From b714d3363ff5ad5e6ab67baef3d7dc4328516d65 Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Thu, 2 Apr 2026 19:15:46 +0200 Subject: [PATCH] feat(#119): expose route state in catalog API and sidebar/dashboard Add routeState field to RouteSummary DTO (null for started, 'stopped' or 'suspended' for non-default states). Sidebar shows stop/pause icons and state badge for affected routes in both Apps and Routes sections. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../controller/RouteCatalogController.java | 11 ++++++-- .../server/app/dto/RouteSummary.java | 5 +++- ui/src/components/LayoutShell.tsx | 15 ++++++++--- ui/src/components/sidebar-utils.ts | 25 ++++++++++++++++--- 4 files changed, 46 insertions(+), 10 deletions(-) diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteCatalogController.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteCatalogController.java index 0ce1f83c..abdaffb4 100644 --- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteCatalogController.java +++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/controller/RouteCatalogController.java @@ -7,6 +7,7 @@ import com.cameleer3.common.graph.RouteGraph; import com.cameleer3.server.core.agent.AgentInfo; import com.cameleer3.server.core.agent.AgentRegistryService; import com.cameleer3.server.core.agent.AgentState; +import com.cameleer3.server.core.agent.RouteStateRegistry; import com.cameleer3.server.core.storage.DiagramStore; import com.cameleer3.server.core.storage.StatsStore; import io.swagger.v3.oas.annotations.Operation; @@ -40,13 +41,16 @@ public class RouteCatalogController { private final AgentRegistryService registryService; private final DiagramStore diagramStore; private final JdbcTemplate jdbc; + private final RouteStateRegistry routeStateRegistry; public RouteCatalogController(AgentRegistryService registryService, DiagramStore diagramStore, - @org.springframework.beans.factory.annotation.Qualifier("clickHouseJdbcTemplate") JdbcTemplate jdbc) { + @org.springframework.beans.factory.annotation.Qualifier("clickHouseJdbcTemplate") JdbcTemplate jdbc, + RouteStateRegistry routeStateRegistry) { this.registryService = registryService; this.diagramStore = diagramStore; this.jdbc = jdbc; + this.routeStateRegistry = routeStateRegistry; } @GetMapping("/catalog") @@ -128,7 +132,10 @@ public class RouteCatalogController { long count = routeExchangeCounts.getOrDefault(key, 0L); Instant lastSeen = routeLastSeen.get(key); String fromUri = resolveFromEndpointUri(routeId, agentIds); - return new RouteSummary(routeId, count, lastSeen, fromUri); + String state = routeStateRegistry.getState(appId, routeId).name().toLowerCase(); + // Only include non-default states (stopped/suspended); null means started + String routeState = "started".equals(state) ? null : state; + return new RouteSummary(routeId, count, lastSeen, fromUri, routeState); }) .toList(); diff --git a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/RouteSummary.java b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/RouteSummary.java index 177957cb..ac442369 100644 --- a/cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/RouteSummary.java +++ b/cameleer3-server-app/src/main/java/com/cameleer3/server/app/dto/RouteSummary.java @@ -11,5 +11,8 @@ public record RouteSummary( @NotNull long exchangeCount, Instant lastSeen, @Schema(description = "The from() endpoint URI, e.g. 'direct:processOrder'") - String fromEndpointUri + String fromEndpointUri, + @Schema(description = "Operational state of the route: stopped, suspended, or null (started/default)") + String routeState ) {} + diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx index 837e1e18..cd4dbd90 100644 --- a/ui/src/components/LayoutShell.tsx +++ b/ui/src/components/LayoutShell.tsx @@ -15,7 +15,7 @@ import { useStarred, } from '@cameleer/design-system'; import type { SearchResult, SidebarTreeNode } from '@cameleer/design-system'; -import { Box, Cpu, GitBranch, Settings, FileText, ChevronRight } from 'lucide-react'; +import { Box, Cpu, GitBranch, Settings, FileText, ChevronRight, Square, Pause } from 'lucide-react'; import { useRouteCatalog } from '../api/queries/catalog'; import { useAgents } from '../api/queries/agents'; import { useSearchExecutions, useAttributeKeys } from '../api/queries/executions'; @@ -140,6 +140,14 @@ function makeChevron() { return createElement(ChevronRight, { size: 14 }); } +function makeStopIcon() { + return createElement(Square, { size: 12, style: { color: 'var(--error)' } }); +} + +function makePauseIcon() { + return createElement(Pause, { size: 12, style: { color: 'var(--amber)' } }); +} + /* ------------------------------------------------------------------ */ /* Section open-state keys */ /* ------------------------------------------------------------------ */ @@ -275,6 +283,7 @@ function LayoutContent() { id: r.routeId, name: r.routeId, exchangeCount: r.exchangeCount, + routeState: r.routeState ?? undefined, })), agents: [...(app.agents || [])] .sort((a: any, b: any) => cmp(a.name, b.name)) @@ -289,7 +298,7 @@ function LayoutContent() { // --- Tree nodes --------------------------------------------------- const appTreeNodes: SidebarTreeNode[] = useMemo( - () => buildAppTreeNodes(sidebarApps, makeStatusDot, makeChevron), + () => buildAppTreeNodes(sidebarApps, makeStatusDot, makeChevron, makeStopIcon, makePauseIcon), [sidebarApps], ); @@ -299,7 +308,7 @@ function LayoutContent() { ); const routeTreeNodes: SidebarTreeNode[] = useMemo( - () => buildRouteTreeNodes(sidebarApps, makeStatusDot, makeChevron), + () => buildRouteTreeNodes(sidebarApps, makeStatusDot, makeChevron, makeStopIcon, makePauseIcon), [sidebarApps], ); diff --git a/ui/src/components/sidebar-utils.ts b/ui/src/components/sidebar-utils.ts index 65ff2b11..e99a6d9b 100644 --- a/ui/src/components/sidebar-utils.ts +++ b/ui/src/components/sidebar-utils.ts @@ -9,6 +9,7 @@ export interface SidebarRoute { id: string; name: string; exchangeCount: number; + routeState?: 'stopped' | 'suspended'; } export interface SidebarAgent { @@ -71,6 +72,8 @@ export function buildAppTreeNodes( apps: SidebarApp[], statusDot: (health: string) => ReactNode, chevron: () => ReactNode, + stopIcon?: () => ReactNode, + pauseIcon?: () => ReactNode, ): SidebarTreeNode[] { return apps.map((app) => ({ id: app.id, @@ -83,8 +86,14 @@ export function buildAppTreeNodes( children: app.routes.map((r) => ({ id: `${app.id}/${r.id}`, label: r.name, - icon: chevron(), - badge: formatCount(r.exchangeCount), + icon: r.routeState === 'stopped' && stopIcon + ? stopIcon() + : r.routeState === 'suspended' && pauseIcon + ? pauseIcon() + : chevron(), + badge: r.routeState + ? `${r.routeState.toUpperCase()} \u00b7 ${formatCount(r.exchangeCount)}` + : formatCount(r.exchangeCount), path: `/apps/${app.id}/${r.id}`, starrable: true, starKey: `route:${app.id}/${r.id}`, @@ -128,6 +137,8 @@ export function buildRouteTreeNodes( apps: SidebarApp[], statusDot: (health: string) => ReactNode, chevron: () => ReactNode, + stopIcon?: () => ReactNode, + pauseIcon?: () => ReactNode, ): SidebarTreeNode[] { return apps.map((app) => ({ id: `route:${app.id}`, @@ -138,8 +149,14 @@ export function buildRouteTreeNodes( children: app.routes.map((r) => ({ id: `route:${app.id}/${r.id}`, label: r.name, - icon: chevron(), - badge: formatCount(r.exchangeCount), + icon: r.routeState === 'stopped' && stopIcon + ? stopIcon() + : r.routeState === 'suspended' && pauseIcon + ? pauseIcon() + : chevron(), + badge: r.routeState + ? `${r.routeState.toUpperCase()} \u00b7 ${formatCount(r.exchangeCount)}` + : formatCount(r.exchangeCount), path: `/routes/${app.id}/${r.id}`, })), }));