From 15b87cc257745f5ccd3715236666ab2e2ce01810 Mon Sep 17 00:00:00 2001 From: Sergio Arroutbi Date: Mon, 20 Apr 2026 03:05:05 +0200 Subject: [PATCH] Add FR-084: Fleet Overview KPI card navigation Co-Authored-By: Claude Opus 4.6 Signed-off-by: Sergio Arroutbi --- spec/SDD-Keylime-Monitoring-Tool.md | 4 ++- spec/SRS-Keylime-Monitoring-Tool.md | 50 +++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/spec/SDD-Keylime-Monitoring-Tool.md b/spec/SDD-Keylime-Monitoring-Tool.md index f62b43b..3e52961 100644 --- a/spec/SDD-Keylime-Monitoring-Tool.md +++ b/spec/SDD-Keylime-Monitoring-Tool.md @@ -191,7 +191,7 @@ keylime-webtool-frontend/src/ | | +-- TopBar.tsx Hamburger toggle, search, theme toggle, user menu | +-- common/ | +-- DataTable.tsx Generic sortable, selectable table -| +-- KpiCard.tsx Metric card with variant styling +| +-- KpiCard.tsx Metric card with variant styling, optional drill-down link (FR-084) | +-- StatusBadge.tsx Color-coded status label | +-- AgentStateChart.tsx Recharts pie chart for agent states +-- hooks/ @@ -1043,6 +1043,7 @@ Maximum 5 parallel concurrent log fetches to the Verifier API, enforced via Toki | Sidebar alert indicator for service outages | Surfaces integration health at a glance without navigating away; shares cached TanStack Query data with Integrations page to avoid extra requests | FR-081 | | Agent UUID hyperlinks in failure list | One-click drill-down from failure to agent detail eliminates manual navigation; uses React Router `` for SPA navigation without full reload | FR-082 | | Inline copy-to-clipboard button in Raw Data source selector | Single compact button adjacent to filter group copies whichever JSON view is active; uses Clipboard API with 2s checkmark feedback for confirmation; avoids per-view copy buttons to reduce clutter | FR-083 | +| Clickable KPI cards with drill-down navigation | Each `KpiCard` accepts an optional `linkTo` prop (route string); when set, the card renders as a React Router ``, shows pointer cursor and hover highlight, and navigates to the target view (with optional query params for pre-applied filters) | FR-084 | --- @@ -1144,6 +1145,7 @@ Maximum 5 parallel concurrent log fetches to the Verifier API, enforced via Toki | FR-081 | 3.2.2 | `Sidebar.tsx`: `useHasServiceDown()` hook queries integration health, renders exclamation badge on Integrations nav item | | FR-082 | 3.2.2 | Failure categorization list renders agent UUIDs as React Router `` to `/agents/{agent_id}` detail page | | FR-083 | 3.4.3 | Raw Data tab: compact copy icon button to the right of source selector group; Clipboard API with 2s checkmark feedback | +| FR-084 | 3.2.2 | `KpiCard.tsx`: optional `linkTo` prop wraps card in React Router ``; Dashboard page maps each KPI to its target route (e.g., Failed Agents → `/agents?state=failed,invalid_quote,tenant_failed`) | ### 6.2 Non-Functional Requirements diff --git a/spec/SRS-Keylime-Monitoring-Tool.md b/spec/SRS-Keylime-Monitoring-Tool.md index 7df9e85..fb6d81e 100644 --- a/spec/SRS-Keylime-Monitoring-Tool.md +++ b/spec/SRS-Keylime-Monitoring-Tool.md @@ -117,6 +117,7 @@ The System transforms Keylime from a CLI-driven security tool into a visual oper | FR-081 | Sidebar alert indicator for integration service outages | MUST | Dashboard - Navigation Structure | | FR-082 | Agent ID hyperlinks in failure categorization list | MUST | Attestation Analytics - Failure Categorization | | FR-083 | Copy-to-clipboard button in Raw Data source selector toolbar | MUST | Agent Detail - Raw Data | +| FR-084 | Fleet Overview KPI card drill-down navigation | SHOULD | Dashboard - Key Performance Indicators | ### 2.2 Non-Functional Requirements @@ -2616,6 +2617,55 @@ Feature: Raw Data Copy-to-Clipboard Button Then the button MUST return to its default icon state ``` +### FR-084: Fleet Overview KPI Card Drill-Down Navigation + +**Description:** Each KPI card on the Fleet Overview Dashboard SHOULD act as a clickable navigation element that takes the user to the relevant detailed view. The cards MUST display a visual affordance (e.g., cursor change, hover highlight) indicating they are interactive. The navigation targets are: Total Active Agents → Agent List; Failed Agents → Agent List filtered by failed states (7, 9, 10); Attestation Success Rate → Attestation Analytics; Average Attestation Latency → Attestation Analytics; Certificate Expiry Warnings → Certificates; Active IMA Policies → Policies; Revocation Events (24h) → Alerts; Consecutive Failures → Agent List sorted by failure count; Registration Count → Agent List. + +**Trace:** Dashboard - Key Performance Indicators; FR-001 + +```gherkin +Feature: Fleet Overview KPI Card Drill-Down Navigation + + Scenario: Click Total Active Agents card + Given the user is viewing the Fleet Overview Dashboard + And the "Total Active Agents" KPI card displays "247" + When the user clicks the "Total Active Agents" card + Then the System MUST navigate to the Agent List page at /agents + + Scenario: Click Failed Agents card navigates with filter + Given the user is viewing the Fleet Overview Dashboard + And the "Failed Agents" KPI card displays "3" + When the user clicks the "Failed Agents" card + Then the System MUST navigate to the Agent List page + And the agent state filter MUST be pre-applied for states FAILED, INVALID_QUOTE, and TENANT_FAILED + + Scenario: Click Attestation Success Rate card + Given the user is viewing the Fleet Overview Dashboard + When the user clicks the "Attestation Success Rate" card + Then the System MUST navigate to the Attestation Analytics page at /attestations + + Scenario: Click Certificate Expiry Warnings card + Given the user is viewing the Fleet Overview Dashboard + When the user clicks the "Certificate Expiry Warnings" card + Then the System MUST navigate to the Certificates page at /certificates + + Scenario: Click Active IMA Policies card + Given the user is viewing the Fleet Overview Dashboard + When the user clicks the "Active IMA Policies" card + Then the System MUST navigate to the Policies page at /policies + + Scenario: Click Revocation Events card + Given the user is viewing the Fleet Overview Dashboard + When the user clicks the "Revocation Events (24h)" card + Then the System MUST navigate to the Alerts page at /alerts + + Scenario: KPI cards show interactive affordance + Given the user is viewing the Fleet Overview Dashboard + When the user hovers over any KPI card + Then the card MUST display a pointer cursor + And the card SHOULD display a hover highlight effect +``` + --- ## 4. Non-Functional Requirements Detail