feat: restructure sidebar hierarchy and add full audit view
Reorganize the sidebar into a proper hierarchy (Overview, Full Audit, Namespaces) and add a Full Audit dashboard view that includes skipped checks. Namespace routes move to /polaris/ns/:namespace to avoid path collisions, and namespace detail pages now link out to the Polaris dashboard. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+9
-1
@@ -61,6 +61,7 @@ export interface ResultCounts {
|
|||||||
pass: number;
|
pass: number;
|
||||||
warning: number;
|
warning: number;
|
||||||
danger: number;
|
danger: number;
|
||||||
|
skipped: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
function countResultSet(rs: ResultSet, counts: ResultCounts): void {
|
function countResultSet(rs: ResultSet, counts: ResultCounts): void {
|
||||||
@@ -69,6 +70,8 @@ function countResultSet(rs: ResultSet, counts: ResultCounts): void {
|
|||||||
counts.total++;
|
counts.total++;
|
||||||
if (msg.Success) {
|
if (msg.Success) {
|
||||||
counts.pass++;
|
counts.pass++;
|
||||||
|
} else if (msg.Severity === 'ignore') {
|
||||||
|
counts.skipped++;
|
||||||
} else if (msg.Severity === 'warning') {
|
} else if (msg.Severity === 'warning') {
|
||||||
counts.warning++;
|
counts.warning++;
|
||||||
} else if (msg.Severity === 'danger') {
|
} else if (msg.Severity === 'danger') {
|
||||||
@@ -78,7 +81,7 @@ function countResultSet(rs: ResultSet, counts: ResultCounts): void {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function countResultItems(results: Result[]): ResultCounts {
|
function countResultItems(results: Result[]): ResultCounts {
|
||||||
const counts: ResultCounts = { total: 0, pass: 0, warning: 0, danger: 0 };
|
const counts: ResultCounts = { total: 0, pass: 0, warning: 0, danger: 0, skipped: 0 };
|
||||||
for (const result of results) {
|
for (const result of results) {
|
||||||
countResultSet(result.Results, counts);
|
countResultSet(result.Results, counts);
|
||||||
if (result.PodResult) {
|
if (result.PodResult) {
|
||||||
@@ -138,6 +141,11 @@ export function setRefreshInterval(seconds: number): void {
|
|||||||
localStorage.setItem(STORAGE_KEY, String(seconds));
|
localStorage.setItem(STORAGE_KEY, String(seconds));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- Polaris dashboard proxy URL ---
|
||||||
|
|
||||||
|
export const POLARIS_DASHBOARD_PROXY =
|
||||||
|
'/api/v1/namespaces/polaris/services/polaris-dashboard:80/proxy/';
|
||||||
|
|
||||||
// --- Score computation ---
|
// --- Score computation ---
|
||||||
|
|
||||||
export function computeScore(counts: ResultCounts): number {
|
export function computeScore(counts: ResultCounts): number {
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { AuditData, computeScore, countResults, ResultCounts } from '../api/polaris';
|
import { AuditData, countResults, ResultCounts } from '../api/polaris';
|
||||||
import { usePolarisDataContext } from '../api/PolarisDataContext';
|
import { usePolarisDataContext } from '../api/PolarisDataContext';
|
||||||
|
|
||||||
function scoreStatus(score: number): 'success' | 'warning' | 'error' {
|
function scoreStatus(score: number): 'success' | 'warning' | 'error' {
|
||||||
@@ -15,10 +15,41 @@ function scoreStatus(score: number): 'success' | 'warning' | 'error' {
|
|||||||
return 'error';
|
return 'error';
|
||||||
}
|
}
|
||||||
|
|
||||||
function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
|
function OverviewSection(props: {
|
||||||
const score = computeScore(props.counts);
|
data: AuditData;
|
||||||
|
counts: ResultCounts;
|
||||||
|
includeSkipped: boolean;
|
||||||
|
}) {
|
||||||
|
const { counts, includeSkipped } = props;
|
||||||
|
|
||||||
|
const displayTotal = includeSkipped ? counts.total : counts.total - counts.skipped;
|
||||||
|
const displayPass = counts.pass;
|
||||||
|
const score = displayTotal === 0 ? 0 : Math.round((displayPass / displayTotal) * 100);
|
||||||
const status = scoreStatus(score);
|
const status = scoreStatus(score);
|
||||||
|
|
||||||
|
const summaryRows: { name: string; value: React.ReactNode }[] = [
|
||||||
|
{ name: 'Total Checks', value: String(displayTotal) },
|
||||||
|
{
|
||||||
|
name: 'Pass',
|
||||||
|
value: <StatusLabel status="success">{counts.pass}</StatusLabel>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Warning',
|
||||||
|
value: <StatusLabel status="warning">{counts.warning}</StatusLabel>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Danger',
|
||||||
|
value: <StatusLabel status="error">{counts.danger}</StatusLabel>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
if (includeSkipped) {
|
||||||
|
summaryRows.push({
|
||||||
|
name: 'Skipped',
|
||||||
|
value: <StatusLabel status="">{counts.skipped}</StatusLabel>,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SectionBox title="Score">
|
<SectionBox title="Score">
|
||||||
@@ -32,23 +63,7 @@ function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
|
|||||||
/>
|
/>
|
||||||
</SectionBox>
|
</SectionBox>
|
||||||
<SectionBox title="Check Summary">
|
<SectionBox title="Check Summary">
|
||||||
<NameValueTable
|
<NameValueTable rows={summaryRows} />
|
||||||
rows={[
|
|
||||||
{ name: 'Total Checks', value: String(props.counts.total) },
|
|
||||||
{
|
|
||||||
name: 'Pass',
|
|
||||||
value: <StatusLabel status="success">{props.counts.pass}</StatusLabel>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Warning',
|
|
||||||
value: <StatusLabel status="warning">{props.counts.warning}</StatusLabel>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Danger',
|
|
||||||
value: <StatusLabel status="error">{props.counts.danger}</StatusLabel>,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</SectionBox>
|
</SectionBox>
|
||||||
<SectionBox title="Cluster Info">
|
<SectionBox title="Cluster Info">
|
||||||
<NameValueTable
|
<NameValueTable
|
||||||
@@ -64,8 +79,9 @@ function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PolarisView() {
|
export default function DashboardView(props: { includeSkipped: boolean }) {
|
||||||
const { data, loading, error } = usePolarisDataContext();
|
const { data, loading, error } = usePolarisDataContext();
|
||||||
|
const title = props.includeSkipped ? 'Polaris — Full Audit' : 'Polaris — Overview';
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Loader title="Loading Polaris audit data..." />;
|
return <Loader title="Loading Polaris audit data..." />;
|
||||||
@@ -75,7 +91,7 @@ export default function PolarisView() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SectionHeader title="Polaris" />
|
<SectionHeader title={title} />
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<SectionBox title="Error">
|
<SectionBox title="Error">
|
||||||
@@ -90,7 +106,9 @@ export default function PolarisView() {
|
|||||||
</SectionBox>
|
</SectionBox>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{data && counts && <OverviewSection data={data} counts={counts} />}
|
{data && counts && (
|
||||||
|
<OverviewSection data={data} counts={counts} includeSkipped={props.includeSkipped} />
|
||||||
|
)}
|
||||||
|
|
||||||
{!data && !error && (
|
{!data && !error && (
|
||||||
<SectionBox title="No Data">
|
<SectionBox title="No Data">
|
||||||
@@ -16,10 +16,10 @@ export default function DynamicSidebarRegistrar() {
|
|||||||
if (registeredNamespaces.has(ns)) continue;
|
if (registeredNamespaces.has(ns)) continue;
|
||||||
registeredNamespaces.add(ns);
|
registeredNamespaces.add(ns);
|
||||||
registerSidebarEntry({
|
registerSidebarEntry({
|
||||||
parent: 'polaris',
|
parent: 'polaris-namespaces',
|
||||||
name: `polaris-ns-${ns}`,
|
name: `polaris-ns-${ns}`,
|
||||||
label: ns,
|
label: ns,
|
||||||
url: `/polaris/${ns}`,
|
url: `/polaris/ns/${ns}`,
|
||||||
icon: 'mdi:folder-outline',
|
icon: 'mdi:folder-outline',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import {
|
|||||||
computeScore,
|
computeScore,
|
||||||
countResultsForItems,
|
countResultsForItems,
|
||||||
filterResultsByNamespace,
|
filterResultsByNamespace,
|
||||||
|
POLARIS_DASHBOARD_PROXY,
|
||||||
Result,
|
Result,
|
||||||
ResultCounts,
|
ResultCounts,
|
||||||
} from '../api/polaris';
|
} from '../api/polaris';
|
||||||
@@ -82,6 +83,21 @@ export default function NamespaceDetailView() {
|
|||||||
<>
|
<>
|
||||||
<SectionHeader title={`Polaris — ${namespace}`} />
|
<SectionHeader title={`Polaris — ${namespace}`} />
|
||||||
|
|
||||||
|
<SectionBox title="External">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{
|
||||||
|
name: 'Polaris Dashboard',
|
||||||
|
value: (
|
||||||
|
<a href={POLARIS_DASHBOARD_PROXY} target="_blank" rel="noopener noreferrer">
|
||||||
|
View in Polaris Dashboard
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
|
||||||
<SectionBox title="Namespace Score">
|
<SectionBox title="Namespace Score">
|
||||||
<NameValueTable
|
<NameValueTable
|
||||||
rows={[
|
rows={[
|
||||||
|
|||||||
+44
-3
@@ -5,10 +5,12 @@ import {
|
|||||||
} from '@kinvolk/headlamp-plugin/lib';
|
} from '@kinvolk/headlamp-plugin/lib';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { PolarisDataProvider } from './api/PolarisDataContext';
|
import { PolarisDataProvider } from './api/PolarisDataContext';
|
||||||
|
import DashboardView from './components/DashboardView';
|
||||||
import DynamicSidebarRegistrar from './components/DynamicSidebarRegistrar';
|
import DynamicSidebarRegistrar from './components/DynamicSidebarRegistrar';
|
||||||
import NamespaceDetailView from './components/NamespaceDetailView';
|
import NamespaceDetailView from './components/NamespaceDetailView';
|
||||||
import PolarisSettings from './components/PolarisSettings';
|
import PolarisSettings from './components/PolarisSettings';
|
||||||
import PolarisView from './components/PolarisView';
|
|
||||||
|
// --- Sidebar entries ---
|
||||||
|
|
||||||
registerSidebarEntry({
|
registerSidebarEntry({
|
||||||
parent: null,
|
parent: null,
|
||||||
@@ -18,6 +20,32 @@ registerSidebarEntry({
|
|||||||
icon: 'mdi:shield-check',
|
icon: 'mdi:shield-check',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
registerSidebarEntry({
|
||||||
|
parent: 'polaris',
|
||||||
|
name: 'polaris-overview',
|
||||||
|
label: 'Overview',
|
||||||
|
url: '/polaris',
|
||||||
|
icon: 'mdi:view-dashboard',
|
||||||
|
});
|
||||||
|
|
||||||
|
registerSidebarEntry({
|
||||||
|
parent: 'polaris',
|
||||||
|
name: 'polaris-full',
|
||||||
|
label: 'Full Audit',
|
||||||
|
url: '/polaris/full-audit',
|
||||||
|
icon: 'mdi:clipboard-text-search',
|
||||||
|
});
|
||||||
|
|
||||||
|
registerSidebarEntry({
|
||||||
|
parent: 'polaris',
|
||||||
|
name: 'polaris-namespaces',
|
||||||
|
label: 'Namespaces',
|
||||||
|
url: '/polaris',
|
||||||
|
icon: 'mdi:dns',
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Routes ---
|
||||||
|
|
||||||
registerRoute({
|
registerRoute({
|
||||||
path: '/polaris',
|
path: '/polaris',
|
||||||
sidebar: 'polaris',
|
sidebar: 'polaris',
|
||||||
@@ -26,13 +54,26 @@ registerRoute({
|
|||||||
component: () => (
|
component: () => (
|
||||||
<PolarisDataProvider>
|
<PolarisDataProvider>
|
||||||
<DynamicSidebarRegistrar />
|
<DynamicSidebarRegistrar />
|
||||||
<PolarisView />
|
<DashboardView includeSkipped={false} />
|
||||||
</PolarisDataProvider>
|
</PolarisDataProvider>
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
registerRoute({
|
registerRoute({
|
||||||
path: '/polaris/:namespace',
|
path: '/polaris/full-audit',
|
||||||
|
sidebar: 'polaris-full',
|
||||||
|
name: 'polaris-full-audit',
|
||||||
|
exact: true,
|
||||||
|
component: () => (
|
||||||
|
<PolarisDataProvider>
|
||||||
|
<DynamicSidebarRegistrar />
|
||||||
|
<DashboardView includeSkipped />
|
||||||
|
</PolarisDataProvider>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
registerRoute({
|
||||||
|
path: '/polaris/ns/:namespace',
|
||||||
sidebar: 'polaris',
|
sidebar: 'polaris',
|
||||||
name: 'polaris-namespace',
|
name: 'polaris-namespace',
|
||||||
exact: true,
|
exact: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user