a08514b4f2
- Created docs/ directory for better organization - Moved 35 markdown files from root to docs/ - Includes all status reports, guides, and testing documentation Co-Authored-By: Warp <agent@warp.dev>
3.2 KiB
3.2 KiB
Phase E: Frontend Implementation Plan
🎯 Overview
Phase E implements the web-based GUI for AtlasOS - Calypso using React + Vite + TypeScript.
📋 Technology Stack
- React 18 - UI framework
- Vite - Build tool and dev server
- TypeScript - Type safety
- TailwindCSS - Styling
- shadcn/ui - UI component library
- TanStack Query - Data fetching and caching
- React Router - Routing
- Zustand - State management
- Axios - HTTP client
- WebSocket - Real-time events
🏗️ Project Structure
frontend/
├── src/
│ ├── api/ # API client and queries
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── hooks/ # Custom React hooks
│ ├── store/ # Zustand stores
│ ├── types/ # TypeScript types
│ ├── utils/ # Utility functions
│ ├── lib/ # Library configurations
│ ├── App.tsx # Main app component
│ └── main.tsx # Entry point
├── public/ # Static assets
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js
📦 Implementation Tasks
1. Project Setup ✅
- Initialize Vite + React + TypeScript
- Configure TailwindCSS
- Set up path aliases
- Configure Vite proxy for API
2. Core Infrastructure
- Set up shadcn/ui components
- Create API client with Axios
- Set up TanStack Query
- Implement WebSocket client
- Create authentication store (Zustand)
- Set up React Router
3. Authentication & Routing
- Login page
- Protected route wrapper
- Auth context/hooks
- Token management
- Auto-refresh tokens
4. Dashboard
- Overview cards (storage, tapes, alerts)
- System health status
- Recent tasks
- Active alerts
- Quick actions
5. Storage Management
- Disk list and details
- Volume groups
- Repository management (CRUD)
- Capacity charts
6. Tape Library Management
- Physical tape libraries
- Virtual tape libraries (VTL)
- Tape inventory
- Load/unload operations
- Drive status
7. iSCSI Management
- Target list and details
- LUN mapping
- Initiator management
- Configuration apply
8. Monitoring & Alerts
- Alerts list and filters
- Metrics dashboard
- Real-time event stream
- Alert acknowledgment
9. System Management
- Service status
- Service control
- Log viewer
- Support bundle generation
10. IAM (Admin Only)
- User management
- Role management
- Permission management
🎨 Design Principles
- No Business Logic in Components - All logic in hooks/services
- Type Safety - Full TypeScript coverage
- Error Handling - Unified error handling
- Loading States - Proper loading indicators
- Responsive Design - Mobile-friendly
- Accessibility - WCAG compliance
🚀 Getting Started
cd frontend
npm install
npm run dev
📝 Next Steps
- Install dependencies
- Set up shadcn/ui
- Create API client
- Build authentication flow
- Create dashboard