databuild/plans/webapp_v1/chunk-5-build-status.md

Chunk 5: Build Status

Parent: Build Graph Dashboard
Previous: Chunk 4: Recent Activity
Next: Chunk 6: Partition Pages

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

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