calypso/docs/FRONTEND-READY-TO-TEST.md

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)

# 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

cd frontend
npm install

3. Start Backend (if not running)

In one terminal:

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:

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! 🚀