Merge pull request 'feat: replace dynamic sidebar with namespaces list page' (#17) from feat/namespaces-list-view into main

Reviewed-on: farhoodliquor/headlamp-polaris-plugin#17

src/components/DynamicSidebarRegistrar.tsx

@@ -1,29 +0,0 @@
-import { registerSidebarEntry } from '@kinvolk/headlamp-plugin/lib';
-import React from 'react';
-import { getNamespaces } from '../api/polaris';
-import { usePolarisDataContext } from '../api/PolarisDataContext';
-
-const registeredNamespaces = new Set<string>();
-
-export default function DynamicSidebarRegistrar() {
-  const { data } = usePolarisDataContext();
-
-  React.useEffect(() => {
-    if (!data) return;
-
-    const namespaces = getNamespaces(data);
-    for (const ns of namespaces) {
-      if (registeredNamespaces.has(ns)) continue;
-      registeredNamespaces.add(ns);
-      registerSidebarEntry({
-        parent: 'polaris-namespaces',
-        name: `polaris-ns-${ns}`,
-        label: ns,
-        url: `/polaris/ns/${ns}`,
-        icon: 'mdi:folder-outline',
-      });
-    }
-  }, [data]);
-
-  return null;
-}

src/components/NamespacesListView.tsx

@@ -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>
+    </>
+  );
+}

src/index.tsx

@@ -6,8 +6,8 @@ import {
 import React from 'react';
 import { PolarisDataProvider } from './api/PolarisDataContext';
 import DashboardView from './components/DashboardView';
-import DynamicSidebarRegistrar from './components/DynamicSidebarRegistrar';
 import NamespaceDetailView from './components/NamespaceDetailView';
+import NamespacesListView from './components/NamespacesListView';
 import PolarisSettings from './components/PolarisSettings';
 
 // --- Sidebar entries ---
@@ -40,7 +40,7 @@ registerSidebarEntry({
   parent: 'polaris',
   name: 'polaris-namespaces',
   label: 'Namespaces',
-  url: '/polaris',
+  url: '/polaris/namespaces',
   icon: 'mdi:dns',
 });
 
@@ -48,12 +48,11 @@ registerSidebarEntry({
 
 registerRoute({
   path: '/polaris',
-  sidebar: 'polaris',
+  sidebar: 'polaris-overview',
   name: 'polaris',
   exact: true,
   component: () => (
     <PolarisDataProvider>
-      <DynamicSidebarRegistrar />
       <DashboardView includeSkipped={false} />
     </PolarisDataProvider>
   ),
@@ -66,20 +65,30 @@ registerRoute({
   exact: true,
   component: () => (
     <PolarisDataProvider>
-      <DynamicSidebarRegistrar />
       <DashboardView includeSkipped />
     </PolarisDataProvider>
   ),
 });
 
+registerRoute({
+  path: '/polaris/namespaces',
+  sidebar: 'polaris-namespaces',
+  name: 'polaris-namespaces',
+  exact: true,
+  component: () => (
+    <PolarisDataProvider>
+      <NamespacesListView />
+    </PolarisDataProvider>
+  ),
+});
+
 registerRoute({
   path: '/polaris/ns/:namespace',
-  sidebar: 'polaris',
+  sidebar: 'polaris-namespaces',
   name: 'polaris-namespace',
   exact: true,
   component: () => (
     <PolarisDataProvider>
-      <DynamicSidebarRegistrar />
       <NamespaceDetailView />
     </PolarisDataProvider>
   ),