148 lines
No EOL
3.9 KiB
Markdown
148 lines
No EOL
3.9 KiB
Markdown
# Chunk 4: Recent Activity
|
|
|
|
**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)
|
|
**Previous:** [Chunk 3: Routing Framework](./chunk-3-routing-framework.md)
|
|
**Next:** [Chunk 5: Build Status](./chunk-5-build-status.md)
|
|
|
|
## Overview
|
|
|
|
Implement the dashboard home page showing recent build activity and system status with real-time updates via polling.
|
|
|
|
## Scope
|
|
|
|
### In Scope
|
|
- Recent build requests display
|
|
- Active builds count and status
|
|
- Recent partition builds
|
|
- System health indicators
|
|
- Basic polling for real-time updates
|
|
- Tailwind + DaisyUI styling
|
|
|
|
### Out of Scope
|
|
- Complex filtering or searching
|
|
- Historical data beyond recent activity
|
|
- Advanced visualizations
|
|
- User preferences/settings
|
|
|
|
## Technical Approach
|
|
|
|
### Data Sources
|
|
From Build Graph Service API:
|
|
- Recent build requests (from event log)
|
|
- Active builds count
|
|
- Recent partition builds
|
|
- System status
|
|
|
|
### Component Structure
|
|
```typescript
|
|
const RecentActivity = {
|
|
oninit: () => {
|
|
// Start polling for updates
|
|
this.pollInterval = setInterval(this.loadData, 5000);
|
|
this.loadData();
|
|
},
|
|
|
|
onremove: () => {
|
|
// Clean up polling
|
|
clearInterval(this.pollInterval);
|
|
},
|
|
|
|
view: () => [
|
|
m('.dashboard-header', [
|
|
m('h1', 'DataBuild Dashboard'),
|
|
m('.stats', [
|
|
m('.stat-item', `Active Builds: ${this.activeBuilds}`),
|
|
m('.stat-item', `Recent Builds: ${this.recentBuilds.length}`),
|
|
])
|
|
]),
|
|
|
|
m('.dashboard-content', [
|
|
m('.recent-builds', [
|
|
m('h2', 'Recent Build Requests'),
|
|
m('table', this.recentBuilds.map(build =>
|
|
m('tr', [
|
|
m('td', m('a', { href: `/builds/${build.id}` }, build.id)),
|
|
m('td', build.status),
|
|
m('td', formatTime(build.created_at)),
|
|
])
|
|
))
|
|
]),
|
|
|
|
m('.recent-partitions', [
|
|
m('h2', 'Recent Partition Builds'),
|
|
m('table', this.recentPartitions.map(partition =>
|
|
m('tr', [
|
|
m('td', m('a', {
|
|
href: `/partitions/${encodePartitionRef(partition.ref)}`
|
|
}, partition.ref)),
|
|
m('td', partition.status),
|
|
m('td', formatTime(partition.updated_at)),
|
|
])
|
|
))
|
|
])
|
|
])
|
|
]
|
|
};
|
|
```
|
|
|
|
### Polling Strategy
|
|
- Poll every 5 seconds for updates
|
|
- Use Page Visibility API to pause when tab inactive
|
|
- Show loading states during updates
|
|
- Handle connection errors gracefully
|
|
|
|
### Styling
|
|
- Use DaisyUI stat components for metrics
|
|
- Table layout for recent items
|
|
- Responsive grid for dashboard sections
|
|
- Status badges for build states
|
|
|
|
## Implementation Strategy
|
|
|
|
1. **Create Data Layer**
|
|
- API calls for recent activity data
|
|
- Polling manager with visibility detection
|
|
- Error handling and retries
|
|
|
|
2. **Build UI Components**
|
|
- Dashboard header with metrics
|
|
- Recent builds table
|
|
- Recent partitions table
|
|
- Loading and error states
|
|
|
|
3. **Implement Real-time Updates**
|
|
- Set up polling with proper cleanup
|
|
- Page Visibility API integration
|
|
- Optimistic updates for better UX
|
|
|
|
4. **Add Styling**
|
|
- DaisyUI components for consistent look
|
|
- Responsive layout
|
|
- Status indicators and badges
|
|
|
|
## Deliverables
|
|
|
|
- [ ] Dashboard home page with recent activity
|
|
- [ ] Real-time polling with visibility detection
|
|
- [ ] Recent build requests table with links
|
|
- [ ] Recent partition builds display
|
|
- [ ] System metrics and health indicators
|
|
- [ ] Responsive styling with DaisyUI
|
|
|
|
## Success Criteria
|
|
|
|
- Page loads and displays recent activity
|
|
- Real-time updates work correctly
|
|
- Links navigate to appropriate detail pages
|
|
- Polling stops when tab is inactive
|
|
- Layout is responsive and well-styled
|
|
- Error states are handled gracefully
|
|
|
|
## Testing
|
|
|
|
- Verify recent builds and partitions display
|
|
- Test real-time updates with running builds
|
|
- Validate links to build and partition detail pages
|
|
- Check polling behavior with tab visibility changes
|
|
- Test error handling with service unavailable
|
|
- Verify responsive layout on different screen sizes |