Merge pull request 'feat: restructure sidebar hierarchy and add full audit view' (#15) from feat/sidebar-restructure-dashboard-views into main

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

src/api/polaris.ts

@@ -61,6 +61,7 @@ export interface ResultCounts {
   pass: number;
   warning: number;
   danger: number;
+  skipped: number;
 }
 
 function countResultSet(rs: ResultSet, counts: ResultCounts): void {
@@ -69,6 +70,8 @@ function countResultSet(rs: ResultSet, counts: ResultCounts): void {
     counts.total++;
     if (msg.Success) {
       counts.pass++;
+    } else if (msg.Severity === 'ignore') {
+      counts.skipped++;
     } else if (msg.Severity === 'warning') {
       counts.warning++;
     } else if (msg.Severity === 'danger') {
@@ -78,7 +81,7 @@ function countResultSet(rs: ResultSet, counts: ResultCounts): void {
 }
 
 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) {
     countResultSet(result.Results, counts);
     if (result.PodResult) {
@@ -138,6 +141,11 @@ export function setRefreshInterval(seconds: number): void {
   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 ---
 
 export function computeScore(counts: ResultCounts): number {

src/components/DashboardView.tsx

@@ -6,7 +6,7 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import { AuditData, computeScore, countResults, ResultCounts } from '../api/polaris';
+import { AuditData, countResults, ResultCounts } from '../api/polaris';
 import { usePolarisDataContext } from '../api/PolarisDataContext';
 
 function scoreStatus(score: number): 'success' | 'warning' | 'error' {
@@ -15,10 +15,41 @@ function scoreStatus(score: number): 'success' | 'warning' | 'error' {
   return 'error';
 }
 
-function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
-  const score = computeScore(props.counts);
+function OverviewSection(props: {
+  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 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 (
     <>
       <SectionBox title="Score">
@@ -32,23 +63,7 @@ function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
         />
       </SectionBox>
       <SectionBox title="Check Summary">
-        <NameValueTable
-          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>,
-            },
-          ]}
-        />
+        <NameValueTable rows={summaryRows} />
       </SectionBox>
       <SectionBox title="Cluster Info">
         <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 title = props.includeSkipped ? 'Polaris — Full Audit' : 'Polaris — Overview';
 
   if (loading) {
     return <Loader title="Loading Polaris audit data..." />;
@@ -75,7 +91,7 @@ export default function PolarisView() {
 
   return (
     <>
-      <SectionHeader title="Polaris" />
+      <SectionHeader title={title} />
 
       {error && (
         <SectionBox title="Error">
@@ -90,7 +106,9 @@ export default function PolarisView() {
         </SectionBox>
       )}
 
-      {data && counts && <OverviewSection data={data} counts={counts} />}
+      {data && counts && (
+        <OverviewSection data={data} counts={counts} includeSkipped={props.includeSkipped} />
+      )}
 
       {!data && !error && (
         <SectionBox title="No Data">

src/components/DynamicSidebarRegistrar.tsx

@@ -16,10 +16,10 @@ export default function DynamicSidebarRegistrar() {
       if (registeredNamespaces.has(ns)) continue;
       registeredNamespaces.add(ns);
       registerSidebarEntry({
-        parent: 'polaris',
+        parent: 'polaris-namespaces',
         name: `polaris-ns-${ns}`,
         label: ns,
-        url: `/polaris/${ns}`,
+        url: `/polaris/ns/${ns}`,
         icon: 'mdi:folder-outline',
       });
     }

src/components/NamespaceDetailView.tsx

@@ -12,6 +12,7 @@ import {
   computeScore,
   countResultsForItems,
   filterResultsByNamespace,
+  POLARIS_DASHBOARD_PROXY,
   Result,
   ResultCounts,
 } from '../api/polaris';
@@ -82,6 +83,21 @@ export default function NamespaceDetailView() {
     <>
       <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">
         <NameValueTable
           rows={[

src/index.tsx

@@ -5,10 +5,12 @@ import {
 } from '@kinvolk/headlamp-plugin/lib';
 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 PolarisSettings from './components/PolarisSettings';
-import PolarisView from './components/PolarisView';
+
+// --- Sidebar entries ---
 
 registerSidebarEntry({
   parent: null,
@@ -18,6 +20,32 @@ registerSidebarEntry({
   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({
   path: '/polaris',
   sidebar: 'polaris',
@@ -26,13 +54,26 @@ registerRoute({
   component: () => (
     <PolarisDataProvider>
       <DynamicSidebarRegistrar />
-      <PolarisView />
+      <DashboardView includeSkipped={false} />
     </PolarisDataProvider>
   ),
 });
 
 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',
   name: 'polaris-namespace',
   exact: true,