@adminide-stack/redis-admin-server

Redis Admin UI

A modern, full-featured Redis administration interface built with React, TypeScript, and GraphQL.

Features

🚀 Core Functionality

• Real-time Dashboard - Live server metrics and performance monitoring
• Database Management - Browse and manage Redis databases
• Key Management - View, edit, create, and delete Redis keys
• Query Interface - Execute Redis commands with syntax highlighting
• Configuration Management - View and modify Redis configuration
• User Management - Role-based access control

🔐 Security & Permissions

• Role-based Access Control - Admin, Read/Write, and Read-only roles
• Database-level Permissions - Restrict user access to specific databases
• Command Restrictions - Prevent execution of dangerous commands
• Audit Logging - Track user actions and system changes

📊 Monitoring & Analytics

• Performance Metrics - Operations/sec, memory usage, hit rates
• Slow Query Log - Identify performance bottlenecks
• Memory Analysis - Detailed memory usage breakdown
• Connection Monitoring - Track client connections and activity

🎨 User Experience

• Modern UI - Clean, responsive design with dark/light themes
• Real-time Updates - Auto-refresh capabilities with configurable intervals
• Intuitive Navigation - Easy-to-use interface for all skill levels
• Mobile Responsive - Works seamlessly on all device sizes

Tech Stack

Frontend

• React 18 with TypeScript
• Apollo Client for GraphQL
• XState for state management
• Tailwind CSS for styling
• Lucide React for icons
• Vite for development and building

Backend

• Node.js with TypeScript
• Apollo Server for GraphQL
• Express.js for HTTP server
• Redis client for database operations
• File-based user management (easily replaceable)

Quick Start

Prerequisites

• Node.js 18+
• Redis server running locally or remotely
• npm or yarn package manager

Installation

• Clone the repository

  git clone <repository-url>
  cd redis-admin-ui
  

• Install dependencies

  npm install
  

• Configure environment

  cp .env.example .env
  # Edit .env with your Redis connection details
  

• Start the development servers

  npm run dev
  

  This starts both:

  • Frontend dev server at http://localhost:5173
  • Backend GraphQL server at http://localhost:4000/graphql

Default Users

The system comes with default users for testing:

Username	Password	Role	Access
admin	admin123	Admin	All databases
developer	dev123	Read/Write	Databases 0-3
readonly	read123	Read Only	Databases 0-1

Configuration

Redis Connection

Configure your Redis connection in .env:

REDIS_URL=redis://localhost:6379
# or for authenticated Redis:
REDIS_URL=redis://username:password@host:port

Server Configuration

PORT=4000                    # GraphQL server port
NODE_ENV=development         # Environment
CORS_ORIGIN=http://localhost:5173  # Frontend URL

API Documentation

GraphQL Schema

The backend provides a comprehensive GraphQL API with the following main types:

Queries

• redisAdminInfo - Server information and statistics
• redisAdminDatabases - List all databases with metrics
• redisAdminKeys - Get keys from a specific database
• redisAdminConfig - Redis configuration parameters
• redisAdminUsers - User management (admin only)
• executeRedisAdminCommand - Execute Redis commands

Mutations

• setRedisAdminKeyValue - Create/update keys
• deleteRedisAdminKey - Delete keys
• setRedisAdminConfig - Update configuration
• createRedisAdminUser - Create new users
• flushRedisAdminDatabase - Clear database

REST Endpoints

• GET /health - Health check endpoint
• POST /graphql - GraphQL endpoint

Development

Project Structure

├── src/                    # Frontend source code
│   ├── components/         # React components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Apollo client and utilities
│   ├── machines/          # XState state machines
│   ├── pages/             # Page components
│   └── utils/             # Utility functions
├── server/                # Backend source code
│   ├── resolvers/         # GraphQL resolvers
│   ├── schema/            # GraphQL schema definitions
│   ├── services/          # Business logic services
│   ├── types/             # TypeScript type definitions
│   └── utils/             # Server utilities
└── data/                  # File-based data storage

Available Scripts

npm run dev              # Start both frontend and backend
npm run dev:frontend     # Start only frontend
npm run dev:backend      # Start only backend
npm run build           # Build for production
npm run lint            # Run ESLint
npm run preview         # Preview production build

Adding New Features

• Frontend: Add components in src/components/ and pages in src/pages/
• Backend: Add resolvers in server/resolvers/ and update schema in server/schema/
• State Management: Use XState machines in src/machines/
• Styling: Use Tailwind CSS classes with the existing design system

Security Considerations

Production Deployment

• Change Default Passwords - Update all default user passwords
• Use Environment Variables - Store sensitive data in environment variables
• Enable HTTPS - Use SSL/TLS in production
• Configure CORS - Restrict CORS origins to your domain
• Redis Security - Enable Redis AUTH and use strong passwords
• Network Security - Use firewalls and VPNs for Redis access

User Management

• Users are stored in data/users.json by default
• Passwords are hashed using SHA-256 (upgrade to bcrypt for production)
• JWT tokens can be implemented for better session management
• Role-based permissions are enforced at the GraphQL resolver level

Deployment

Docker Deployment

# Dockerfile example
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 4000
CMD ["npm", "start"]

Environment Variables for Production

NODE_ENV=production
REDIS_URL=redis://your-redis-server:6379
PORT=4000
CORS_ORIGIN=https://your-domain.com
JWT_SECRET=your-strong-jwt-secret

Contributing

• Fork the repository
• Create a feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support and questions:

• Create an issue on GitHub
• Check the documentation
• Review the GraphQL schema at /graphql endpoint

Built with ❤️ using modern web technologies