157 lines
No EOL
4.6 KiB
Markdown
157 lines
No EOL
4.6 KiB
Markdown
# Chunk 5: Build Status
|
|
|
|
**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)
|
|
**Previous:** [Chunk 4: Recent Activity](./chunk-4-recent-activity.md)
|
|
**Next:** [Chunk 6: Partition Pages](./chunk-6-partition-pages.md)
|
|
|
|
## Overview
|
|
|
|
Implement the core operational build request status page with real-time updates, job/partition status visualization, and execution logs.
|
|
|
|
## Scope
|
|
|
|
### In Scope
|
|
- Build request status display with real-time updates
|
|
- Job and partition status visualization
|
|
- Execution timeline and logs from build events
|
|
- Delegation indicators for shared builds
|
|
- Auto-refresh with Page Visibility API
|
|
- Expandable job details
|
|
|
|
### Out of Scope
|
|
- Complex graph visualizations (simple status indicators)
|
|
- Historical build comparisons
|
|
- Advanced filtering of events
|
|
- User interactions beyond viewing
|
|
|
|
## Technical Approach
|
|
|
|
### Data Sources
|
|
From Build Graph Service API `/api/v1/builds/:id`:
|
|
- Build request metadata (ID, status, timestamps)
|
|
- Requested partitions
|
|
- Build events with job execution details
|
|
- Delegation information
|
|
|
|
### Component Structure
|
|
```typescript
|
|
const BuildStatus = {
|
|
oninit: (vnode) => {
|
|
this.buildId = vnode.attrs.id;
|
|
this.build = null;
|
|
this.pollInterval = null;
|
|
this.loadBuild();
|
|
this.startPolling();
|
|
},
|
|
|
|
onremove: () => {
|
|
this.stopPolling();
|
|
},
|
|
|
|
view: () => [
|
|
m('.build-header', [
|
|
m('h1', `Build ${this.buildId}`),
|
|
m('.build-meta', [
|
|
m('.badge', this.build?.status),
|
|
m('.timestamp', formatTime(this.build?.created_at)),
|
|
m('.partitions', `${this.build?.requested_partitions.length} partitions`),
|
|
])
|
|
]),
|
|
|
|
m('.build-content', [
|
|
m('.partition-status', [
|
|
m('h2', 'Partition Status'),
|
|
m('.partition-grid',
|
|
this.build?.requested_partitions.map(partition =>
|
|
m('.partition-card', [
|
|
m('.partition-ref', partition),
|
|
m('.partition-status', this.getPartitionStatus(partition)),
|
|
m('.partition-job', this.getPartitionJob(partition)),
|
|
])
|
|
)
|
|
)
|
|
]),
|
|
|
|
m('.execution-timeline', [
|
|
m('h2', 'Execution Timeline'),
|
|
m('.timeline', this.build?.events.map(event =>
|
|
m('.timeline-item', [
|
|
m('.timestamp', formatTime(event.timestamp)),
|
|
m('.event-type', event.event_type),
|
|
m('.message', event.message),
|
|
this.isJobEvent(event) ? m('.expandable-logs', [
|
|
m('button', { onclick: () => this.toggleLogs(event) }, 'Show Logs'),
|
|
this.logsExpanded[event.event_id] ?
|
|
m('.logs', this.formatJobLogs(event)) : null
|
|
]) : null
|
|
])
|
|
))
|
|
])
|
|
])
|
|
]
|
|
};
|
|
```
|
|
|
|
### Real-time Updates
|
|
- Poll every 2 seconds when build is active
|
|
- Poll every 10 seconds when build is completed
|
|
- Stop polling when tab is not visible
|
|
- Visual indicators for live updates
|
|
|
|
### Status Visualization
|
|
- Color-coded status badges (green/yellow/red)
|
|
- Progress indicators for running builds
|
|
- Delegation indicators with links to other builds
|
|
- Timeline visualization for build events
|
|
|
|
## Implementation Strategy
|
|
|
|
1. **Create Data Layer**
|
|
- API integration for build status
|
|
- Event parsing and categorization
|
|
- Polling manager with different intervals
|
|
|
|
2. **Build Status Components**
|
|
- Build header with metadata
|
|
- Partition status grid
|
|
- Execution timeline
|
|
- Expandable log sections
|
|
|
|
3. **Real-time Updates**
|
|
- Intelligent polling based on build state
|
|
- Page Visibility API integration
|
|
- Loading states and error handling
|
|
|
|
4. **Status Visualization**
|
|
- Color-coded status indicators
|
|
- Progress bars for active builds
|
|
- Timeline layout for events
|
|
- Delegation indicators
|
|
|
|
## Deliverables
|
|
|
|
- [ ] Build request status page with real-time updates
|
|
- [ ] Partition status grid with visual indicators
|
|
- [ ] Execution timeline with build events
|
|
- [ ] Expandable job logs and details
|
|
- [ ] Auto-refresh with visibility detection
|
|
- [ ] Delegation indicators and links
|
|
|
|
## Success Criteria
|
|
|
|
- Real-time updates show build progress accurately
|
|
- All partition statuses are clearly displayed
|
|
- Job logs are accessible and readable
|
|
- Polling behaves correctly based on build state
|
|
- Delegation to other builds is clearly indicated
|
|
- Page is responsive and performs well
|
|
|
|
## Testing
|
|
|
|
- Test with running builds to verify real-time updates
|
|
- Verify partition status changes are reflected
|
|
- Test job log expansion and readability
|
|
- Validate polling behavior with tab visibility
|
|
- Test with delegated builds
|
|
- Verify error handling with invalid build IDs
|
|
- Check performance with large build requests |