feat(dashboards): hover tooltips on all metric cards
New MetricTooltip component — a small ⓘ icon showing an executive- friendly explanation panel on hover (CSS, no JS, instant). DashboardPage: tooltips on all 6 coverage summary cards (Total Techniques, Validated, Partial, In Progress, Not Covered, Not Evaluated), Coverage Evolution chart, Test Pipeline funnel, Team Activity and Validation Rate section headers. ExecutiveDashboardPage: tooltips on all 4 sub-scores (Coverage, Detection, Critical, Response), Score Trend, Top Threat Actors, 4 KPIs (MTTD, MTTR, Detection Efficacy, Validation Throughput), Coverage by Tactic, Critical Gaps table, and all 6 team metrics (Red/Blue Tests Done, Avg Time, Rejection). Each tooltip explains what the metric measures, what a good/bad value looks like, and what action to take — written for non- technical executives.
This commit is contained in:
kitos
@@ -42,6 +42,7 @@ import {
|
||||
import { getCoverageEvolution } from "../api/snapshots";
|
||||
import CoverageSummaryCard from "../components/CoverageSummaryCard";
|
||||
import TacticCoverageChart from "../components/TacticCoverageChart";
|
||||
import MetricTooltip from "../components/MetricTooltip";
|
||||
import type { TestState } from "../types/models";
|
||||
|
||||
/* ── Badge colours (reused from TestsPage) ─────────────────────────── */
|
||||
@@ -199,6 +200,7 @@ export default function DashboardPage() {
|
||||
icon={<Shield className="h-6 w-6 text-cyan-400" />}
|
||||
colorClass="text-cyan-400"
|
||||
bgClass="bg-gray-900"
|
||||
tooltip={{ description: "Total number of MITRE ATT&CK attack techniques tracked in the platform. This is the full universe of known attack methods we measure coverage against.", context: "A higher total means broader threat visibility." }}
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Validated"
|
||||
@@ -207,6 +209,7 @@ export default function DashboardPage() {
|
||||
icon={<CheckCircle className="h-6 w-6 text-green-400" />}
|
||||
colorClass="text-green-400"
|
||||
bgClass="bg-green-950/20"
|
||||
tooltip={{ description: "Techniques confirmed as detectable by Blue Team with ≥2 successful tests. These attacks would be caught if a real adversary used them.", context: "Goal: maximise this number. Higher = stronger defence." }}
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Partial"
|
||||
@@ -215,6 +218,7 @@ export default function DashboardPage() {
|
||||
icon={<AlertTriangle className="h-6 w-6 text-yellow-400" />}
|
||||
colorClass="text-yellow-400"
|
||||
bgClass="bg-yellow-950/20"
|
||||
tooltip={{ description: "Techniques with incomplete coverage: only 1 validated test, mixed detection results, or tests still in progress.", context: "These need attention — detection is not yet reliable." }}
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="In Progress"
|
||||
@@ -223,6 +227,7 @@ export default function DashboardPage() {
|
||||
icon={<Clock className="h-6 w-6 text-blue-400" />}
|
||||
colorClass="text-blue-400"
|
||||
bgClass="bg-blue-950/20"
|
||||
tooltip={{ description: "Techniques with active tests currently being executed or awaiting review by leads. Not yet counted as covered.", context: "Indicates active testing work underway." }}
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Not Covered"
|
||||
@@ -231,6 +236,7 @@ export default function DashboardPage() {
|
||||
icon={<XCircle className="h-6 w-6 text-red-400" />}
|
||||
colorClass="text-red-400"
|
||||
bgClass="bg-red-950/20"
|
||||
tooltip={{ description: "Techniques that were tested but Blue Team failed to detect the attack. These are confirmed security gaps — a real attack would go unnoticed.", context: "High priority: invest in detection rules and monitoring." }}
|
||||
/>
|
||||
<CoverageSummaryCard
|
||||
title="Not Evaluated"
|
||||
@@ -239,6 +245,7 @@ export default function DashboardPage() {
|
||||
icon={<HelpCircle className="h-6 w-6 text-gray-400" />}
|
||||
colorClass="text-gray-400"
|
||||
bgClass="bg-gray-900"
|
||||
tooltip={{ description: "Techniques with no tests created yet. We have no data on whether these attacks would be detected or not.", context: "Unknown risk — prioritise testing the most common ones." }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -248,6 +255,7 @@ export default function DashboardPage() {
|
||||
<h2 className="mb-4 text-lg font-semibold text-white flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5 text-cyan-400" />
|
||||
Coverage Evolution (6 months)
|
||||
<MetricTooltip title="Coverage Evolution" description="How overall coverage % and organisation score have changed over the last 6 months. An upward trend means the security posture is improving." context="Org Score reflects depth of testing; Coverage % reflects breadth." />
|
||||
</h2>
|
||||
{evolutionLoading ? (
|
||||
<div className="flex h-48 items-center justify-center">
|
||||
@@ -310,6 +318,7 @@ export default function DashboardPage() {
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5 text-cyan-400" />
|
||||
Test Pipeline
|
||||
<MetricTooltip title="Test Pipeline" description="Shows how many security tests are at each stage of the Red/Blue workflow: Draft → Red Executing → Blue Evaluating → In Review → Validated / Rejected." context="A healthy pipeline has tests flowing through to Validated. Backlogs in any stage indicate bottlenecks." />
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => navigate("/tests")}
|
||||
@@ -337,6 +346,7 @@ export default function DashboardPage() {
|
||||
<h2 className="mb-4 text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-cyan-400" />
|
||||
Team Activity
|
||||
<MetricTooltip title="Team Activity" description="Shows Red Team (attackers) and Blue Team (defenders) productivity. 'Completed' = tests passed through their phase; 'Pending' = tests waiting for action." context="Low completion rate may indicate resource constraints or bottlenecks." />
|
||||
</h2>
|
||||
|
||||
{teamLoading ? (
|
||||
@@ -389,6 +399,7 @@ export default function DashboardPage() {
|
||||
<h2 className="mb-4 text-lg font-semibold text-white flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-cyan-400" />
|
||||
Validation Rate
|
||||
<MetricTooltip title="Validation Rate" description="How many test results Red Lead and Blue Lead have reviewed and approved vs rejected. High approval = good quality tests and clear detection results." context="High rejection rate may indicate unclear test procedures or disagreement on results." />
|
||||
</h2>
|
||||
|
||||
{validationLoading ? (
|
||||
|
||||
Reference in New Issue
Block a user