feat: redesign Sidebar with hierarchical trees, starring, and collapsible sections
Replace flat app/route/agent lists with expandable tree navigation. Apps contain their routes and agents hierarchically. Add localStorage- backed starring with composite keys for uniqueness. Persist expand state to sessionStorage across page navigations. Add collapsible section headers, remove button on starred items, and parent app context labels. Create stub pages for /apps/:id, /agents/:id, /admin, /api-docs. Consolidate duplicated sidebar data into shared mock. Widen sidebar from 220px to 260px. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,12 @@
|
||||
import type { Agent } from '../design-system/layout/Sidebar/Sidebar'
|
||||
|
||||
export interface AgentHealth extends Agent {
|
||||
export interface AgentHealth {
|
||||
id: string
|
||||
name: string
|
||||
service: string
|
||||
version: string
|
||||
tps: string
|
||||
lastSeen: string
|
||||
status: 'live' | 'stale' | 'dead'
|
||||
errorRate?: string
|
||||
uptime: string
|
||||
memoryUsagePct: number
|
||||
cpuUsagePct: number
|
||||
|
||||
75
src/mocks/sidebar.ts
Normal file
75
src/mocks/sidebar.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
export interface SidebarRoute {
|
||||
id: string
|
||||
name: string
|
||||
exchangeCount: number
|
||||
}
|
||||
|
||||
export interface SidebarAgent {
|
||||
id: string
|
||||
name: string
|
||||
status: 'live' | 'stale' | 'dead'
|
||||
tps: string
|
||||
}
|
||||
|
||||
export interface SidebarApp {
|
||||
id: string
|
||||
name: string
|
||||
health: 'live' | 'stale' | 'dead'
|
||||
exchangeCount: number
|
||||
routes: SidebarRoute[]
|
||||
agents: SidebarAgent[]
|
||||
}
|
||||
|
||||
export const SIDEBAR_APPS: SidebarApp[] = [
|
||||
{
|
||||
id: 'order-service',
|
||||
name: 'order-service',
|
||||
health: 'live',
|
||||
exchangeCount: 1433,
|
||||
routes: [
|
||||
{ id: 'order-intake', name: 'order-intake', exchangeCount: 892 },
|
||||
{ id: 'order-enrichment', name: 'order-enrichment', exchangeCount: 541 },
|
||||
],
|
||||
agents: [
|
||||
{ id: 'prod-1', name: 'prod-1', status: 'live', tps: '14.2/s' },
|
||||
{ id: 'prod-2', name: 'prod-2', status: 'live', tps: '11.8/s' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'payment-svc',
|
||||
name: 'payment-svc',
|
||||
health: 'live',
|
||||
exchangeCount: 912,
|
||||
routes: [
|
||||
{ id: 'payment-process', name: 'payment-process', exchangeCount: 414 },
|
||||
{ id: 'payment-validate', name: 'payment-validate', exchangeCount: 498 },
|
||||
],
|
||||
agents: [
|
||||
{ id: 'prod-2', name: 'prod-2', status: 'live', tps: '11.8/s' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'shipment-tracker',
|
||||
name: 'shipment-tracker',
|
||||
health: 'live',
|
||||
exchangeCount: 471,
|
||||
routes: [
|
||||
{ id: 'shipment-dispatch', name: 'shipment-dispatch', exchangeCount: 387 },
|
||||
{ id: 'shipment-track', name: 'shipment-track', exchangeCount: 923 },
|
||||
],
|
||||
agents: [
|
||||
{ id: 'prod-3', name: 'prod-3', status: 'live', tps: '12.1/s' },
|
||||
{ id: 'prod-4', name: 'prod-4', status: 'live', tps: '9.1/s' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'notification-hub',
|
||||
name: 'notification-hub',
|
||||
health: 'stale',
|
||||
exchangeCount: 128,
|
||||
routes: [
|
||||
{ id: 'notification-dispatch', name: 'notification-dispatch', exchangeCount: 471 },
|
||||
],
|
||||
agents: [],
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user