feat: unified global search & filter system with Cmd-K navigation
Replace per-page filtering with a single GlobalFilterProvider (time range + status) consumed by a redesigned TopBar across all pages. Lift CommandPalette to App level so Cmd-K works globally with filtered results that navigate to exchanges, routes, agents, and applications. Sidebar auto-reveals and selects the target entry on Cmd-K navigation via location state. - Extract shared time preset utilities (computePresetRange, DEFAULT_PRESETS) - Add GlobalFilterProvider (time range + status) and CommandPaletteProvider - Add TimeRangeDropdown primitive with Popover preset list - Redesign TopBar: breadcrumb | time dropdown | status pills | search | env - Add application category to Cmd-K search - Remove FilterBar and local DateRangePicker from Dashboard/Metrics pages - Filter AgentHealth EventFeed by global time range - Remove shift/onSearchClick props from TopBar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
98
src/mocks/searchData.tsx
Normal file
98
src/mocks/searchData.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import type { SearchResult } from '../design-system/composites/CommandPalette/types'
|
||||
import { exchanges, type Exchange } from './exchanges'
|
||||
import { routes } from './routes'
|
||||
import { agents } from './agents'
|
||||
import { SIDEBAR_APPS, type SidebarApp } from './sidebar'
|
||||
|
||||
function formatDuration(ms: number): string {
|
||||
if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`
|
||||
if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`
|
||||
return `${ms}ms`
|
||||
}
|
||||
|
||||
function statusLabel(status: Exchange['status']): string {
|
||||
switch (status) {
|
||||
case 'completed': return 'OK'
|
||||
case 'failed': return 'ERR'
|
||||
case 'running': return 'RUN'
|
||||
case 'warning': return 'WARN'
|
||||
}
|
||||
}
|
||||
|
||||
function statusToVariant(status: Exchange['status']): string {
|
||||
switch (status) {
|
||||
case 'completed': return 'success'
|
||||
case 'failed': return 'error'
|
||||
case 'running': return 'running'
|
||||
case 'warning': return 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimestamp(date: Date): string {
|
||||
return date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||
}
|
||||
|
||||
function healthToColor(health: SidebarApp['health']): string {
|
||||
switch (health) {
|
||||
case 'live': return 'success'
|
||||
case 'stale': return 'warning'
|
||||
case 'dead': return 'error'
|
||||
}
|
||||
}
|
||||
|
||||
export function buildSearchData(
|
||||
exs: Exchange[] = exchanges,
|
||||
rts: typeof routes = routes,
|
||||
ags: typeof agents = agents,
|
||||
apps: SidebarApp[] = SIDEBAR_APPS,
|
||||
): SearchResult[] {
|
||||
const results: SearchResult[] = []
|
||||
|
||||
for (const app of apps) {
|
||||
const liveAgents = app.agents.filter((a) => a.status === 'live').length
|
||||
results.push({
|
||||
id: app.id,
|
||||
category: 'application',
|
||||
title: app.name,
|
||||
badges: [{ label: app.health.toUpperCase(), color: healthToColor(app.health) }],
|
||||
meta: `${app.routes.length} routes · ${app.agents.length} agents (${liveAgents} live) · ${app.exchangeCount.toLocaleString()} exchanges`,
|
||||
path: `/apps/${app.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
for (const exec of exs) {
|
||||
results.push({
|
||||
id: exec.id,
|
||||
category: 'exchange',
|
||||
title: `${exec.orderId} — ${exec.route}`,
|
||||
badges: [{ label: statusLabel(exec.status), color: statusToVariant(exec.status) }],
|
||||
meta: `${exec.correlationId} · ${formatDuration(exec.durationMs)} · ${exec.customer}`,
|
||||
timestamp: formatTimestamp(exec.timestamp),
|
||||
path: `/exchanges/${exec.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
for (const route of rts) {
|
||||
results.push({
|
||||
id: route.id,
|
||||
category: 'route',
|
||||
title: route.name,
|
||||
badges: [{ label: route.group }],
|
||||
meta: `${route.exchangeCount.toLocaleString()} exchanges · ${route.successRate}% success`,
|
||||
path: `/routes/${route.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
for (const agent of ags) {
|
||||
results.push({
|
||||
id: agent.id,
|
||||
category: 'agent',
|
||||
title: agent.name,
|
||||
badges: [{ label: agent.status }],
|
||||
meta: `${agent.service} ${agent.version} · ${agent.tps} · ${agent.lastSeen}`,
|
||||
path: `/agents/${agent.appId}/${agent.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
Reference in New Issue
Block a user