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>
This commit is contained in:
2026-02-07 12:15:04 -05:00
parent 4126439e52
commit b815ce165d
3 changed files with 142 additions and 36 deletions
@@ -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;
}
+126
View File
@@ -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>
</>
);
}
+16 -7
View File
@@ -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>
),