130 lines
No EOL
3.5 KiB
Markdown
130 lines
No EOL
3.5 KiB
Markdown
# Chunk 3: Routing Framework
|
|
|
|
**Parent:** [Build Graph Dashboard](../build-graph-dashboard.md)
|
|
**Previous:** [Chunk 2: Hello World App](./chunk-2-hello-world-app.md)
|
|
**Next:** [Chunk 4: Recent Activity](./chunk-4-recent-activity.md)
|
|
|
|
## 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
|
|
```typescript
|
|
const routes = {
|
|
'/': RecentActivity,
|
|
'/builds/:id': BuildStatus,
|
|
'/partitions': PartitionsList,
|
|
'/partitions/:base64_ref': PartitionStatus,
|
|
'/jobs': JobsList,
|
|
'/jobs/:label': JobMetrics,
|
|
'/analyze': GraphAnalysis,
|
|
};
|
|
```
|
|
|
|
### URL Encoding Utilities
|
|
```typescript
|
|
// 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
|
|
```typescript
|
|
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
|
|
|
|
1. **Set Up Routing**
|
|
- Configure Mithril routing
|
|
- Create route definitions
|
|
- Implement navigation handlers
|
|
|
|
2. **Create Base Layout**
|
|
- Navigation header with links
|
|
- Main content area
|
|
- Basic responsive design
|
|
|
|
3. **Implement URL Encoding**
|
|
- Partition reference encoding/decoding
|
|
- URL parameter handling
|
|
- Error handling for invalid refs
|
|
|
|
4. **Add Tailwind + DaisyUI**
|
|
- Configure build system for CSS processing
|
|
- Add basic styling to layout
|
|
- Set up design tokens
|
|
|
|
5. **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 |