RustFS Console

A modern, responsive web management console for RustFS distributed file system, built with Next.js 16 (App Router) + React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui.

✨ Features

Core Features

• File Browser - Visual file/object management interface with upload, download, delete operations
• Access Keys Management - Create and manage service account access keys
• Policy Management - Configure and manage IAM policies for fine-grained access control
• User Management - Create, edit, enable/disable, and delete user accounts
• User Groups Management - Create and manage user groups to simplify permission assignment

Advanced Features

• Import/Export - Import and export system configurations
• Performance Monitoring - Real-time system status, server information, and performance metrics
• Tiered Storage - Configure and manage tiered storage policies
• Event Destinations - Configure event destinations for event notifications
• SSE Settings - Server-side encryption configuration
• License Management - View and manage system license information

🛠️ Tech Stack

Core Framework

• Next.js 16 - React full-stack framework with App Router
• React 19 - UI library
• TypeScript 5 - Type safety

UI & Styling

• Tailwind CSS v4 - Utility-first CSS framework
• shadcn/ui - High-quality component library based on Radix UI
• Remix Icon - Icon library
• next-themes - Theme switching support

Data Management

• TanStack Table - Powerful table component
• TanStack Virtual - Virtual scrolling support
• AWS SDK v3 - S3 client integration

Other Tools

• i18next - Internationalization support (13 languages)
• Recharts - Chart visualization
• Sonner - Toast notifications
• date-fns / dayjs - Date handling

📁 Project Structure

console/
├── app/                    # Next.js App Router pages and layouts
│   ├── (auth)/            # Authentication pages
│   └── (dashboard)/       # Dashboard pages
├── components/             # React components
│   ├── ui/                # shadcn/ui base components
│   └── ...                # Business components
├── hooks/                 # Custom React Hooks
├── contexts/              # React Context providers
├── lib/                   # Utility functions and library code
│   └── feedback/          # Global feedback APIs (toast, dialog)
├── types/                 # TypeScript type definitions
├── i18n/                  # Internationalization resource files
│   └── locales/          # Multi-language files (13 languages)
├── config/                # Configuration files
├── public/                # Static assets
└── tests/                 # Test files (mirror source structure)

🚀 Quick Start

Prerequisites

• Node.js >= 20
• pnpm >= 10.19.0 (recommended to use the version specified in the project)
• Docker - For running RustFS service

Start RustFS Service

The RustFS service must be started before development. Run it using Docker:

# Create data directory
mkdir rustfs-data

# Run RustFS service
docker run -p 9000:9000 -p 9001:9001 -v ./rustfs-data:/data rustfs/rustfs:1.0.0-alpha.82

The service will start on the following ports:

• 9000 - API port
• 9001 - Console port

Install Dependencies

pnpm install

Development Mode

Note: Before starting the development server, ensure the RustFS service is running (see "Start RustFS Service" section above).

Start the development server (with hot reload):

pnpm dev

Visit http://localhost:3000 to view the application.

Build for Production

pnpm build

Run Production Build

pnpm start

💻 Development Guide

Code Quality Checks

Before committing code, ensure all checks pass:

1. Lockfile Sync Check

pnpm install --frozen-lockfile

Ensure pnpm-lock.yaml is in sync with package.json. After modifying package.json, you must run pnpm install and commit the updated lockfile.

2. TypeScript Type Check

pnpm type-check
# or
pnpm build

3. ESLint Check

pnpm lint

4. Code Formatting Check

pnpm format:check

5. Auto-fix Formatting Issues

pnpm lint:fix
# or
pnpm format

Naming Conventions

• Component files: Use kebab-case (e.g., bucket-selector.tsx)
• Component names: Use PascalCase (e.g., <BucketSelector />)
• Directory structure: Group by feature/domain, use plural forms (e.g., buckets/, users/)
• File naming: Don't repeat directory name in filename (e.g., buckets/info.tsx instead of buckets/bucket-info.tsx)

UI Component Usage

• Declarative UI: Use base components from @/components/ui/*
• Imperative feedback: Use @/lib/feedback/message and @/lib/feedback/dialog for global toast and dialog prompts

Testing

When tests are configured:

• Test files should be placed in tests/ directory, mirroring source structure
• Use *.spec.ts or *.test.ts naming
• Run tests: pnpm test:run

🌍 Internationalization

The project supports multiple languages. Currently supported languages:

• العربية (AR-MA)
• 中文（简体）(Chinese Simplified)
• English (US)
• Deutsch (DE)
• Español (ES)
• Français (FR)
• Bahasa Indonesia (ID)
• Italiano (IT)
• 日本語 (JP)
• 한국어 (KR)
• Português (BR)
• Русский (RU)
• Türkçe (TR)

Language files are located in the i18n/locales/ directory.

📦 Build & Deployment

Environment Variables

Configure necessary environment variables according to your deployment environment (e.g., API endpoints, authentication configuration).

Build Configuration

The project uses Next.js default build configuration. Custom configuration can be done via next.config.ts.

Deployment

The project can be deployed to any platform that supports Next.js:

• Vercel (Recommended) - Zero-config deployment
• Docker - Using official Next.js Docker image
• Self-hosted - Run pnpm build && pnpm start

🤝 Contributing

Commit Guidelines

• Use conventional commit messages (Conventional Commits)
• Ensure all code quality checks pass before committing
• Each PR should include a clear description and related issue links

Code Review

• Keep PR scope focused; coordinate large refactors in advance
• Commit messages and PR titles must be in English
• UI-related work should include screenshots

📄 License

Licensed under the Apache License 2.0. See LICENSE for details.

🔗 Resources

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation
• shadcn/ui Documentation
• TypeScript Documentation

📝 Development Notes

• Follow the guidelines in AGENTS.md
• Keep code simple, readable, and maintainable
• Prefer using existing project tools and patterns
• Consider internationalization support when adding new features
• Ensure all changes pass type checking