217 lines
4.2 KiB
Markdown
217 lines
4.2 KiB
Markdown
# 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!** 🚀
|
|
|