databuild/plans/webapp_v1/chunk-4-recent-activity.md

Chunk 4: Recent Activity

Parent: Build Graph Dashboard
Previous: Chunk 3: Routing Framework
Next: Chunk 5: Build Status

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

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