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>
134 lines
3.2 KiB
Markdown
134 lines
3.2 KiB
Markdown
# 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 ✅
|
|
- [x] Initialize Vite + React + TypeScript
|
|
- [x] Configure TailwindCSS
|
|
- [x] Set up path aliases
|
|
- [x] 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
|
|
|
|
1. **No Business Logic in Components** - All logic in hooks/services
|
|
2. **Type Safety** - Full TypeScript coverage
|
|
3. **Error Handling** - Unified error handling
|
|
4. **Loading States** - Proper loading indicators
|
|
5. **Responsive Design** - Mobile-friendly
|
|
6. **Accessibility** - WCAG compliance
|
|
|
|
## 🚀 Getting Started
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## 📝 Next Steps
|
|
|
|
1. Install dependencies
|
|
2. Set up shadcn/ui
|
|
3. Create API client
|
|
4. Build authentication flow
|
|
5. Create dashboard
|
|
|