feat: replace dynamic sidebar with namespaces list page

Headlamp's sidebar Collapse only opens when an item is selected via route matching, so 3-level nesting (Polaris > Namespaces > ns) never expanded. Replace the DynamicSidebarRegistrar with a dedicated /polaris/namespaces route that shows a table of namespaces with scores and clickable links to the detail views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 12:15:04 -05:00
parent 4126439e52
commit b815ce165d
3 changed files with 142 additions and 36 deletions
@@ -0,0 +1,126 @@
+import {
+  Loader,
+  NameValueTable,
+  SectionBox,
+  SectionHeader,
+  SimpleTable,
+  StatusLabel,
+} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  computeScore,
+  countResultsForItems,
+  filterResultsByNamespace,
+  getNamespaces,
+} from '../api/polaris';
+import { usePolarisDataContext } from '../api/PolarisDataContext';
+
+function scoreStatus(score: number): 'success' | 'warning' | 'error' {
+  if (score >= 80) return 'success';
+  if (score >= 50) return 'warning';
+  return 'error';
+}
+
+interface NamespaceRow {
+  namespace: string;
+  score: number;
+  pass: number;
+  warning: number;
+  danger: number;
+}
+
+export default function NamespacesListView() {
+  const { data, loading, error } = usePolarisDataContext();
+
+  if (loading) {
+    return <Loader title="Loading Polaris audit data..." />;
+  }
+
+  if (error) {
+    return (
+      <>
+        <SectionHeader title="Polaris — Namespaces" />
+        <SectionBox title="Error">
+          <NameValueTable
+            rows={[
+              {
+                name: 'Status',
+                value: <StatusLabel status="error">{error}</StatusLabel>,
+              },
+            ]}
+          />
+        </SectionBox>
+      </>
+    );
+  }
+
+  if (!data) {
+    return (
+      <>
+        <SectionHeader title="Polaris — Namespaces" />
+        <SectionBox title="No Data">
+          <NameValueTable rows={[{ name: 'Status', value: 'No Polaris audit results found.' }]} />
+        </SectionBox>
+      </>
+    );
+  }
+
+  const namespaces = getNamespaces(data);
+  const rows: NamespaceRow[] = namespaces.map(ns => {
+    const results = filterResultsByNamespace(data, ns);
+    const counts = countResultsForItems(results);
+    const score = computeScore(counts);
+    return {
+      namespace: ns,
+      score,
+      pass: counts.pass,
+      warning: counts.warning,
+      danger: counts.danger,
+    };
+  });
+
+  return (
+    <>
+      <SectionHeader title="Polaris — Namespaces" />
+      <SectionBox>
+        <SimpleTable
+          columns={[
+            {
+              label: 'Namespace',
+              getter: (row: NamespaceRow) => (
+                <Link to={`/polaris/ns/${row.namespace}`}>{row.namespace}</Link>
+              ),
+            },
+            {
+              label: 'Score',
+              getter: (row: NamespaceRow) => (
+                <StatusLabel status={scoreStatus(row.score)}>{row.score}%</StatusLabel>
+              ),
+            },
+            {
+              label: 'Pass',
+              getter: (row: NamespaceRow) => (
+                <StatusLabel status="success">{row.pass}</StatusLabel>
+              ),
+            },
+            {
+              label: 'Warning',
+              getter: (row: NamespaceRow) => (
+                <StatusLabel status="warning">{row.warning}</StatusLabel>
+              ),
+            },
+            {
+              label: 'Danger',
+              getter: (row: NamespaceRow) => (
+                <StatusLabel status="error">{row.danger}</StatusLabel>
+              ),
+            },
+          ]}
+          data={rows}
+          emptyMessage="No namespaces found in Polaris audit data."
+        />
+      </SectionBox>
+    </>
+  );
+}