Chunk 3: Routing Framework

Parent: Build Graph Dashboard
Previous: Chunk 2: Hello World App
Next: Chunk 4: Recent Activity

Overview

Implement multi-page routing using Mithril's routing system, create the base layout with navigation, and handle URL encoding/decoding for partition references.

Scope

In Scope

Mithril routing for all planned dashboard pages
Base layout with navigation header
URL encoding/decoding for partition references
Initial page scaffolding for all routes
Basic Tailwind + DaisyUI styling setup

Out of Scope

Full page implementations (handled in subsequent chunks)
Complex state management
Advanced styling (minimal styling only)

Technical Approach

Routing Structure

const routes = {
  '/': RecentActivity,
  '/builds/:id': BuildStatus,
  '/partitions': PartitionsList,
  '/partitions/:base64_ref': PartitionStatus,
  '/jobs': JobsList,
  '/jobs/:label': JobMetrics,
  '/analyze': GraphAnalysis,
};

URL Encoding Utilities

// Partition reference URL encoding
function encodePartitionRef(ref: string): string {
  return btoa(ref).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}

function decodePartitionRef(encoded: string): string {
  // Add padding if needed
  const padded = encoded.replace(/-/g, '+').replace(/_/g, '/');
  return atob(padded);
}

Base Layout

const Layout = {
  view: (vnode: any) => [
    m('header.navbar', [
      m('nav', [
        m('a[href="/"]', 'Dashboard'),
        m('a[href="/partitions"]', 'Partitions'),
        m('a[href="/jobs"]', 'Jobs'),
        m('a[href="/analyze"]', 'Analyze'),
      ])
    ]),
    m('main', vnode.children)
  ]
};

Page Scaffolding

Create placeholder components for each route:

RecentActivity - Dashboard home
BuildStatus - Build request status
PartitionsList - Partition listing
PartitionStatus - Individual partition status
JobsList - Jobs listing
JobMetrics - Job metrics and history
GraphAnalysis - Graph analysis tool

Implementation Strategy

Set Up Routing
- Configure Mithril routing
- Create route definitions
- Implement navigation handlers
Create Base Layout
- Navigation header with links
- Main content area
- Basic responsive design
Implement URL Encoding
- Partition reference encoding/decoding
- URL parameter handling
- Error handling for invalid refs
Add Tailwind + DaisyUI
- Configure build system for CSS processing
- Add basic styling to layout
- Set up design tokens
Create Page Scaffolds
- Placeholder components for each route
- Basic page structure
- Navigation between pages

Deliverables

Working multi-page routing system
Base layout with navigation
URL encoding/decoding for partition refs
Scaffold pages for all planned routes
Basic Tailwind + DaisyUI styling setup

Success Criteria

All routes load without errors
Navigation between pages works correctly
Partition reference encoding/decoding handles edge cases
Layout is responsive and functional
Ready for page implementations in subsequent chunks

Testing

Navigate to all routes and verify they load
Test partition reference encoding/decoding with various inputs
Verify browser back/forward navigation works
Test responsive layout on different screen sizes
Validate URL parameter handling

3.5 KiB Raw Permalink Blame History