start working on the frontend side
This commit is contained in:
Warp Agent
216
FRONTEND-READY-TO-TEST.md
Normal file
216
FRONTEND-READY-TO-TEST.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# Frontend Ready to Test ✅
|
||||
|
||||
## 🎉 Status: READY FOR TESTING
|
||||
|
||||
The frontend is fully set up and ready to test!
|
||||
|
||||
---
|
||||
|
||||
## 📋 Pre-Testing Checklist
|
||||
|
||||
Before testing, ensure:
|
||||
|
||||
- [ ] **Node.js 18+ installed** (check with `node --version`)
|
||||
- [ ] **Backend API running** on `http://localhost:8080`
|
||||
- [ ] **Database running** and accessible
|
||||
- [ ] **Test user created** in database
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start Testing
|
||||
|
||||
### 1. Install Node.js (if not installed)
|
||||
|
||||
```bash
|
||||
# Option 1: Use install script
|
||||
sudo ./scripts/install-requirements.sh
|
||||
|
||||
# Option 2: Manual installation
|
||||
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
```
|
||||
|
||||
### 2. Install Frontend Dependencies
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
### 3. Start Backend (if not running)
|
||||
|
||||
In one terminal:
|
||||
```bash
|
||||
cd backend
|
||||
export CALYPSO_DB_PASSWORD="calypso123"
|
||||
export CALYPSO_JWT_SECRET="test-jwt-secret-key-minimum-32-characters-long"
|
||||
go run ./cmd/calypso-api -config config.yaml.example
|
||||
```
|
||||
|
||||
### 4. Start Frontend Dev Server
|
||||
|
||||
In another terminal:
|
||||
```bash
|
||||
cd frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 5. Open Browser
|
||||
|
||||
Navigate to: `http://localhost:3000`
|
||||
|
||||
---
|
||||
|
||||
## ✅ What to Test
|
||||
|
||||
### Authentication
|
||||
- [ ] Login page displays
|
||||
- [ ] Login with valid credentials works
|
||||
- [ ] Invalid credentials show error
|
||||
- [ ] Token is stored after login
|
||||
- [ ] Logout works
|
||||
|
||||
### Dashboard
|
||||
- [ ] Dashboard loads after login
|
||||
- [ ] System health status displays
|
||||
- [ ] Overview cards show data:
|
||||
- Storage repositories count
|
||||
- Active alerts count
|
||||
- iSCSI targets count
|
||||
- Running tasks count
|
||||
- [ ] Quick action buttons work
|
||||
- [ ] Recent alerts preview displays
|
||||
|
||||
### Storage Page
|
||||
- [ ] Navigate to Storage from sidebar
|
||||
- [ ] Repositories list displays
|
||||
- [ ] Capacity bars render correctly
|
||||
- [ ] Physical disks list displays
|
||||
- [ ] Volume groups list displays
|
||||
- [ ] Status indicators show correctly
|
||||
|
||||
### Alerts Page
|
||||
- [ ] Navigate to Alerts from sidebar
|
||||
- [ ] Alert list displays
|
||||
- [ ] Filter buttons work (All / Unacknowledged)
|
||||
- [ ] Severity colors are correct
|
||||
- [ ] Acknowledge button works
|
||||
- [ ] Resolve button works
|
||||
- [ ] Relative time displays correctly
|
||||
|
||||
### Navigation
|
||||
- [ ] Sidebar navigation works
|
||||
- [ ] All menu items are clickable
|
||||
- [ ] Active route is highlighted
|
||||
- [ ] Logout button works
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Common Issues
|
||||
|
||||
### "Node.js not found"
|
||||
**Fix**: Install Node.js (see step 1 above)
|
||||
|
||||
### "Cannot connect to API"
|
||||
**Fix**:
|
||||
- Ensure backend is running
|
||||
- Check `http://localhost:8080/api/v1/health` in browser
|
||||
|
||||
### "401 Unauthorized"
|
||||
**Fix**:
|
||||
- Verify user exists in database
|
||||
- Check password is correct (may need Argon2id hash)
|
||||
- See `scripts/update-admin-password.sh`
|
||||
|
||||
### "Blank page"
|
||||
**Fix**:
|
||||
- Check browser console (F12)
|
||||
- Check network tab for failed requests
|
||||
- Verify all dependencies installed
|
||||
|
||||
---
|
||||
|
||||
## 📊 Test Results Template
|
||||
|
||||
After testing, document results:
|
||||
|
||||
```
|
||||
Frontend Testing Results
|
||||
Date: [DATE]
|
||||
Tester: [NAME]
|
||||
|
||||
✅ PASSING:
|
||||
- Login page
|
||||
- Dashboard
|
||||
- Storage page
|
||||
- Alerts page
|
||||
- Navigation
|
||||
|
||||
❌ FAILING:
|
||||
- [Issue description]
|
||||
|
||||
⚠️ ISSUES:
|
||||
- [Issue description]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Expected Behavior
|
||||
|
||||
### Login Flow
|
||||
1. User sees login form
|
||||
2. Enters credentials
|
||||
3. On success: Redirects to dashboard
|
||||
4. Token stored in localStorage
|
||||
5. All API requests include token
|
||||
|
||||
### Dashboard
|
||||
- Shows system health (green/yellow/red indicator)
|
||||
- Displays overview statistics
|
||||
- Shows quick action buttons
|
||||
- Displays recent alerts (if any)
|
||||
|
||||
### Storage Page
|
||||
- Lists all repositories with usage bars
|
||||
- Shows physical disks
|
||||
- Shows volume groups
|
||||
- All data from real API
|
||||
|
||||
### Alerts Page
|
||||
- Lists alerts with severity colors
|
||||
- Filtering works
|
||||
- Actions (acknowledge/resolve) work
|
||||
- Updates after actions
|
||||
|
||||
---
|
||||
|
||||
## 📝 Next Steps After Testing
|
||||
|
||||
Once testing is complete:
|
||||
1. Document any issues found
|
||||
2. Fix any bugs
|
||||
3. Continue building remaining pages:
|
||||
- Tape Libraries
|
||||
- iSCSI Targets
|
||||
- Tasks
|
||||
- System
|
||||
- IAM
|
||||
4. Add WebSocket real-time updates
|
||||
5. Enhance UI components
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Ready to Test!
|
||||
|
||||
The frontend is fully set up with:
|
||||
- ✅ React + Vite + TypeScript
|
||||
- ✅ Authentication flow
|
||||
- ✅ Dashboard with real data
|
||||
- ✅ Storage management page
|
||||
- ✅ Alerts management page
|
||||
- ✅ Navigation and routing
|
||||
- ✅ API integration
|
||||
- ✅ UI components
|
||||
|
||||
**Start testing now!** 🚀
|
||||
|
||||
Reference in New Issue
Block a user