feat(matrix): unify Techniques and Coverage Matrix into one page

Techniques (/techniques) and Coverage Matrix (/matrix) showed the same underlying data (Technique.status_global) with completely different visual styles — discrete Tailwind status colors + ID+name cells on Techniques, vs. a continuous score-gradient hex color + ID-only cells (name via tooltip) on the heatmap. Coverage Matrix also has 3 layers (Threat Actor, Detection Rules, Campaign) with no Techniques equivalent, so Techniques was the strict subset — merged into Coverage Matrix rather than the other way around. - HeatmapCell now uses the same discrete status-color palette as the old TechniqueCell (cellColors.ts), shows the technique name inline, and keeps zoom/virtualization/hover-tooltip untouched. - HeatmapLegend restyled to match (swatch + label + description per tier, review_required as an overlay badge) instead of the old hex-gradient bar. - MatrixPage gains a Matrix/List view toggle and a status filter (coverage/threat-actor layers only) — both ported from the old Techniques page — so nothing it offered is lost. - /techniques now redirects to /matrix; removed TechniquesPage, AttackMatrix, TechniqueCell (fully superseded). /techniques/:mitreId (detail) and /techniques/review-queue are untouched. Known pre-existing limitation carried over, not introduced or fixed here: the heatmap only places a multi-tactic technique under its first tactic column (_format_tactic takes tactic_str.split(",")[0]), while the old Techniques matrix placed it under every tactic it belongs to.
2026-07-09 14:19:38 +02:00
parent 0de9f4a6c0
commit 8031682e9c
13 changed files with 311 additions and 653 deletions
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
-import { Loader2, AlertCircle, Download, ZoomIn, ZoomOut } from "lucide-react";
+import { Loader2, AlertCircle, Download, ZoomIn, ZoomOut, Grid3X3, List } from "lucide-react";
 import {
  getHeatmapCoverage,
  getHeatmapThreatActor,
@@ -12,11 +12,13 @@ import {
  type HeatmapFilters as HeatmapFilterParams,
 } from "../api/heatmap";
 import AdvancedHeatmap from "../components/heatmap/AdvancedHeatmap";
+import HeatmapTechniqueTable from "../components/heatmap/HeatmapTechniqueTable";
 import HeatmapLayerSelector, {
  type LayerType,
 } from "../components/heatmap/HeatmapLayerSelector";
 import HeatmapFiltersComponent from "../components/heatmap/HeatmapFilters";
 import HeatmapLegend from "../components/heatmap/HeatmapLegend";
+import type { TechniqueStatus } from "../types/models";

 const TACTIC_ORDER = [
  "reconnaissance",
@@ -49,6 +51,14 @@ export default function MatrixPage() {
  const [platforms, setPlatforms] = useState<string[]>([]);
  const [selectedTactics, setSelectedTactics] = useState<string[]>([]);
  const [minScore, setMinScore] = useState(0);
+  // Only meaningful for layers that carry a real TechniqueStatus
+  // (coverage, threat-actor) — applied client-side since it's not a score
+  // threshold (review_required and not_covered share the same score).
+  const [statusFilter, setStatusFilter] = useState<TechniqueStatus | "all">("all");
+
+  // Matrix (tactic-columned grid) vs List (flat sortable table) — ported
+  // from the old standalone Techniques page.
+  const [viewMode, setViewMode] = useState<"matrix" | "list">("matrix");

  // Zoom
  const [zoom, setZoom] = useState<ZoomLevel>("normal");
@@ -104,7 +114,14 @@ export default function MatrixPage() {
      (activeLayer === "campaign" && !!selectedCampaignId),
  });

-  const techniques = layerData?.techniques || [];
+  const allTechniques = layerData?.techniques || [];
+
+  const layerHasStatus = activeLayer === "coverage" || activeLayer === "threat-actor";
+
+  const techniques = useMemo(() => {
+    if (statusFilter === "all" || !layerHasStatus) return allTechniques;
+    return allTechniques.filter((t) => t.status === statusFilter);
+  }, [allTechniques, statusFilter, layerHasStatus]);

  // Handle cell click - navigate to technique detail
  const handleCellClick = useCallback(
@@ -182,8 +199,34 @@ export default function MatrixPage() {
            onCampaignChange={setSelectedCampaignId}
          />

-          {/* Right side: Export + Zoom */}
+          {/* Right side: View toggle + Export + Zoom */}
          <div className="flex items-center gap-2">
+            {/* Matrix / List view toggle */}
+            <div className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 p-1">
+              <button
+                onClick={() => setViewMode("matrix")}
+                className={`flex items-center gap-1.5 rounded px-2.5 py-1 text-xs transition-colors ${
+                  viewMode === "matrix"
+                    ? "bg-cyan-500/20 text-cyan-400"
+                    : "text-gray-400 hover:text-gray-200"
+                }`}
+              >
+                <Grid3X3 className="h-3.5 w-3.5" />
+                Matrix
+              </button>
+              <button
+                onClick={() => setViewMode("list")}
+                className={`flex items-center gap-1.5 rounded px-2.5 py-1 text-xs transition-colors ${
+                  viewMode === "list"
+                    ? "bg-cyan-500/20 text-cyan-400"
+                    : "text-gray-400 hover:text-gray-200"
+                }`}
+              >
+                <List className="h-3.5 w-3.5" />
+                List
+              </button>
+            </div>
+
            {/* Export dropdown */}
            <div className="relative">
              <button
@@ -211,30 +254,49 @@ export default function MatrixPage() {
              )}
            </div>

-            {/* Zoom controls */}
-            <div className="flex items-center rounded-lg border border-gray-700 bg-gray-800">
-              <button
-                onClick={zoomOut}
-                disabled={zoom === "compact"}
-                className="px-2 py-1.5 text-gray-400 hover:text-white disabled:opacity-30"
-              >
-                <ZoomOut className="h-3.5 w-3.5" />
-              </button>
-              <span className="border-x border-gray-700 px-2 py-1 text-[10px] font-medium uppercase text-gray-400">
-                {zoom}
-              </span>
-              <button
-                onClick={zoomIn}
-                disabled={zoom === "expanded"}
-                className="px-2 py-1.5 text-gray-400 hover:text-white disabled:opacity-30"
-              >
-                <ZoomIn className="h-3.5 w-3.5" />
-              </button>
-            </div>
+            {/* Zoom controls — matrix view only */}
+            {viewMode === "matrix" && (
+              <div className="flex items-center rounded-lg border border-gray-700 bg-gray-800">
+                <button
+                  onClick={zoomOut}
+                  disabled={zoom === "compact"}
+                  className="px-2 py-1.5 text-gray-400 hover:text-white disabled:opacity-30"
+                >
+                  <ZoomOut className="h-3.5 w-3.5" />
+                </button>
+                <span className="border-x border-gray-700 px-2 py-1 text-[10px] font-medium uppercase text-gray-400">
+                  {zoom}
+                </span>
+                <button
+                  onClick={zoomIn}
+                  disabled={zoom === "expanded"}
+                  className="px-2 py-1.5 text-gray-400 hover:text-white disabled:opacity-30"
+                >
+                  <ZoomIn className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            )}
          </div>
        </div>

        {/* Filters */}
+        <div className="flex flex-wrap items-center gap-3">
+          {layerHasStatus && (
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as TechniqueStatus | "all")}
+              className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-200 focus:border-cyan-500 focus:outline-none"
+            >
+              <option value="all">All Statuses</option>
+              <option value="validated">Validated</option>
+              <option value="partial">Partial</option>
+              <option value="in_progress">In Progress</option>
+              <option value="not_covered">Not Covered</option>
+              <option value="not_evaluated">Not Evaluated</option>
+              <option value="review_required">Review Required</option>
+            </select>
+          )}
+        </div>
        <HeatmapFiltersComponent
          platforms={platforms}
          onPlatformsChange={setPlatforms}
@@ -272,6 +334,8 @@ export default function MatrixPage() {
          <AlertCircle className="h-10 w-10 text-red-400" />
          <p className="text-red-400">Failed to load heatmap data</p>
        </div>
+      ) : viewMode === "list" ? (
+        <HeatmapTechniqueTable techniques={techniques} />
      ) : (
        <AdvancedHeatmap
          techniques={techniques}
@@ -212,11 +212,11 @@ export default function TechniqueDetailPage() {
        <AlertCircle className="h-10 w-10 text-red-400" />
        <p className="text-red-400">Failed to load technique</p>
        <button
-          onClick={() => navigate("/techniques")}
+          onClick={() => navigate("/matrix")}
          className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
        >
          <ArrowLeft className="h-4 w-4" />
-          Back to techniques
+          Back to matrix
        </button>
      </div>
    );
@@ -237,11 +237,11 @@ export default function TechniqueDetailPage() {
    <div className="space-y-6">
      {/* Back button */}
      <button
-        onClick={() => navigate("/techniques")}
+        onClick={() => navigate("/matrix")}
        className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
-        Back to techniques
+        Back to matrix
      </button>

      {/* Header */}
@@ -1,326 +0,0 @@
-import { useState, useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Loader2, AlertCircle, Filter, X, Grid3X3, List, AlertTriangle } from "lucide-react";
-import { getTechniques, type TechniqueSummary } from "../api/techniques";
-import AttackMatrix from "../components/AttackMatrix";
-import type { TechniqueStatus } from "../types/models";
-import { useNavigate, Link } from "react-router-dom";
-
-const STATUS_OPTIONS: { value: TechniqueStatus | "all"; label: string; color: string }[] = [
-  { value: "all", label: "All Statuses", color: "text-gray-400" },
-  { value: "validated", label: "Validated", color: "text-green-400" },
-  { value: "partial", label: "Partial", color: "text-yellow-400" },
-  { value: "in_progress", label: "In Progress", color: "text-blue-400" },
-  { value: "not_covered", label: "Not Covered", color: "text-red-400" },
-  { value: "not_evaluated", label: "Not Evaluated", color: "text-gray-400" },
-];
-
-const PLATFORM_OPTIONS = ["all", "windows", "linux", "macos", "cloud", "network"] as const;
-
-import StatusBadge from "../components/StatusBadge";
-
-const statusBadgeColors: Record<TechniqueStatus, string> = {
-  validated: "bg-green-900/50 text-green-400 border-green-500/30",
-  partial: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
-  in_progress: "bg-blue-900/50 text-blue-400 border-blue-500/30",
-  not_covered: "bg-red-900/50 text-red-400 border-red-500/30",
-  not_evaluated: "bg-gray-800/50 text-gray-400 border-gray-600/30",
-  review_required: "bg-orange-900/50 text-orange-400 border-orange-500/30",
-};
-
-export default function TechniquesPage() {
-  const navigate = useNavigate();
-  const [viewMode, setViewMode] = useState<"matrix" | "list">("matrix");
-  const [statusFilter, setStatusFilter] = useState<TechniqueStatus | "all">("all");
-  const [platformFilter, setPlatformFilter] = useState<string>("all");
-  const [tacticFilter, setTacticFilter] = useState<string>("all");
-
-  const {
-    data: techniques,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["techniques"],
-    queryFn: () => getTechniques(),
-  });
-
-  // Extract unique tactics from techniques
-  const availableTactics = useMemo(() => {
-    if (!techniques) return [];
-    const tactics = new Set<string>();
-    for (const tech of techniques) {
-      if (tech.tactic) {
-        tech.tactic.split(",").forEach((t) => tactics.add(t.trim().toLowerCase()));
-      }
-    }
-    return Array.from(tactics).sort();
-  }, [techniques]);
-
-  // Apply filters
-  const filteredTechniques = useMemo(() => {
-    if (!techniques) return [];
-
-    return techniques.filter((tech: TechniqueSummary) => {
-      // Status filter
-      if (statusFilter !== "all" && tech.status_global !== statusFilter) {
-        return false;
-      }
-
-      // Tactic filter
-      if (tacticFilter !== "all") {
-        const techTactics = tech.tactic?.split(",").map((t) => t.trim().toLowerCase()) || [];
-        if (!techTactics.includes(tacticFilter)) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-  }, [techniques, statusFilter, tacticFilter]);
-
-  const hasActiveFilters = statusFilter !== "all" || tacticFilter !== "all" || platformFilter !== "all";
-
-  const clearFilters = () => {
-    setStatusFilter("all");
-    setPlatformFilter("all");
-    setTacticFilter("all");
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex h-64 flex-col items-center justify-center gap-2">
-        <AlertCircle className="h-10 w-10 text-red-400" />
-        <p className="text-red-400">Failed to load techniques</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">ATT&CK Techniques</h1>
-          <p className="mt-1 text-sm text-gray-400">
-            MITRE ATT&CK coverage matrix — click any technique for details
-          </p>
-        </div>
-        <div className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 p-1">
-          <button
-            onClick={() => setViewMode("matrix")}
-            className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
-              viewMode === "matrix"
-                ? "bg-cyan-500/20 text-cyan-400"
-                : "text-gray-400 hover:text-gray-200"
-            }`}
-          >
-            <Grid3X3 className="h-4 w-4" />
-            Matrix
-          </button>
-          <button
-            onClick={() => setViewMode("list")}
-            className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
-              viewMode === "list"
-                ? "bg-cyan-500/20 text-cyan-400"
-                : "text-gray-400 hover:text-gray-200"
-            }`}
-          >
-            <List className="h-4 w-4" />
-            List
-          </button>
-        </div>
-      </div>
-
-      {/* Legend */}
-      <div className="rounded-xl border border-gray-800 bg-gray-900 p-4">
-        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Coverage legend</p>
-        <div className="flex flex-wrap gap-x-6 gap-y-3">
-
-          {/* Validated */}
-          <div className="flex items-start gap-2.5">
-            <div className="mt-0.5 h-8 w-8 shrink-0 rounded-md border border-green-500/50 bg-green-900/40" />
-            <div>
-              <p className="text-xs font-semibold text-green-400">Validated</p>
-              <p className="text-xs text-gray-500">Detected in ≥2 approved tests</p>
-            </div>
-          </div>
-
-          {/* Partial */}
-          <div className="flex items-start gap-2.5">
-            <div className="mt-0.5 h-8 w-8 shrink-0 rounded-md border border-yellow-500/50 bg-yellow-900/40" />
-            <div>
-              <p className="text-xs font-semibold text-yellow-400">Partial</p>
-              <p className="text-xs text-gray-500">Some tests validated, coverage incomplete</p>
-            </div>
-          </div>
-
-          {/* In Progress */}
-          <div className="flex items-start gap-2.5">
-            <div className="mt-0.5 h-8 w-8 shrink-0 rounded-md border border-blue-500/50 bg-blue-900/40" />
-            <div>
-              <p className="text-xs font-semibold text-blue-400">In Progress</p>
-              <p className="text-xs text-gray-500">Tests active, awaiting validation</p>
-            </div>
-          </div>
-
-          {/* Not Covered */}
-          <div className="flex items-start gap-2.5">
-            <div className="mt-0.5 h-8 w-8 shrink-0 rounded-md border border-red-500/50 bg-red-900/40" />
-            <div>
-              <p className="text-xs font-semibold text-red-400">Not Covered</p>
-              <p className="text-xs text-gray-500">Tested but not detected — confirmed gap</p>
-            </div>
-          </div>
-
-          {/* Not Evaluated */}
-          <div className="flex items-start gap-2.5">
-            <div className="mt-0.5 h-8 w-8 shrink-0 rounded-md border border-gray-600/50 bg-gray-800/40" />
-            <div>
-              <p className="text-xs font-semibold text-gray-400">Not Evaluated</p>
-              <p className="text-xs text-gray-500">No tests created yet — unknown risk</p>
-            </div>
-          </div>
-
-          {/* Review Required */}
-          <div className="flex items-start gap-2.5">
-            <div className="relative mt-0.5 h-8 w-8 shrink-0 rounded-md border border-yellow-500/50 bg-yellow-900/40">
-              <div className="absolute -right-1 -top-1 rounded-full bg-orange-500 p-0.5">
-                <AlertTriangle className="h-2.5 w-2.5 text-white" />
-              </div>
-            </div>
-            <div>
-              <p className="text-xs font-semibold text-yellow-400">Review Required</p>
-              <p className="text-xs text-gray-500">Pending lead validation or re-evaluation</p>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      {/* Filters */}
-      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
-        <div className="flex items-center gap-2">
-          <Filter className="h-4 w-4 text-gray-400" />
-          <span className="text-sm font-medium text-gray-400">Filters:</span>
-        </div>
-
-        {/* Status filter */}
-        <select
-          value={statusFilter}
-          onChange={(e) => setStatusFilter(e.target.value as TechniqueStatus | "all")}
-          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
-        >
-          {STATUS_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-
-        {/* Tactic filter */}
-        <select
-          value={tacticFilter}
-          onChange={(e) => setTacticFilter(e.target.value)}
-          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
-        >
-          <option value="all">All Tactics</option>
-          {availableTactics.map((tactic) => (
-            <option key={tactic} value={tactic}>
-              {tactic
-                .split("-")
-                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-                .join(" ")}
-            </option>
-          ))}
-        </select>
-
-        {/* Platform filter */}
-        <select
-          value={platformFilter}
-          onChange={(e) => setPlatformFilter(e.target.value)}
-          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
-        >
-          {PLATFORM_OPTIONS.map((platform) => (
-            <option key={platform} value={platform}>
-              {platform === "all" ? "All Platforms" : platform.charAt(0).toUpperCase() + platform.slice(1)}
-            </option>
-          ))}
-        </select>
-
-        {hasActiveFilters && (
-          <button
-            onClick={clearFilters}
-            className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-400 hover:border-red-500/50 hover:text-red-400"
-          >
-            <X className="h-3.5 w-3.5" />
-            Clear
-          </button>
-        )}
-
-        <div className="ml-auto text-sm text-gray-500">
-          Showing {filteredTechniques.length} of {techniques?.length || 0} techniques
-        </div>
-      </div>
-
-      {/* Matrix or List View */}
-      {viewMode === "matrix" ? (
-        <AttackMatrix techniques={filteredTechniques} />
-      ) : (
-        <div className="rounded-xl border border-gray-800 bg-gray-900">
-          <table className="w-full text-left text-sm">
-            <thead>
-              <tr className="border-b border-gray-800">
-                <th className="px-4 py-3 font-medium text-gray-400">MITRE ID</th>
-                <th className="px-4 py-3 font-medium text-gray-400">Name</th>
-                <th className="px-4 py-3 font-medium text-gray-400">Tactic</th>
-                <th className="px-4 py-3 font-medium text-gray-400">Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filteredTechniques.map((tech) => (
-                <tr
-                  key={tech.id}
-                  onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
-                  className="cursor-pointer border-b border-gray-800/50 hover:bg-gray-800/50 transition-colors"
-                >
-                  <td className="px-4 py-3">
-                    <Link
-                      to={`/techniques/${tech.mitre_id}`}
-                      onClick={(e) => e.stopPropagation()}
-                      className="font-mono text-cyan-400 hover:underline"
-                    >
-                      {tech.mitre_id}
-                    </Link>
-                  </td>
-                  <td className="px-4 py-3 text-gray-200">{tech.name}</td>
-                  <td className="px-4 py-3">
-                    <span className="text-gray-400 capitalize">
-                      {tech.tactic?.replace(/-/g, " ") || "—"}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3 overflow-visible">
-                    <StatusBadge status={tech.status_global} />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          {filteredTechniques.length === 0 && (
-            <div className="p-8 text-center text-gray-400">
-              No techniques found matching your filters
-            </div>
-          )}
-        </div>
-      )}
-
-    </div>
-  );
-}