From 50caae256df0139f96f5e3df700a62c9c7fe1254 Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Sat, 7 Feb 2026 14:45:39 -0500
Subject: [PATCH] fix: skipped display, namespace link crash, overview redesign

- Fix skipped count showing empty by rendering as plain text instead
  of StatusLabel with empty status (which renders near-invisible)
- Fix namespace link crash by using Router.createRouteURL to generate
  cluster-prefixed URLs with react-router-dom Link, instead of
  Headlamp's Link component which crashes on plugin-registered routes
- Redesign overview page with PercentageCircle score chart and
  PercentageBar check distribution for a better visual experience

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/DashboardView.tsx       | 40 +++++++++++++-------------
 src/components/NamespaceDetailView.tsx |  2 +-
 src/components/NamespacesListView.tsx  | 11 +++++--
 3 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/components/DashboardView.tsx b/src/components/DashboardView.tsx
index a65a804..0b4a0d1 100644
--- a/src/components/DashboardView.tsx
+++ b/src/components/DashboardView.tsx
@@ -1,6 +1,8 @@
 import {
   Loader,
   NameValueTable,
+  PercentageBar,
+  PercentageCircle,
   SectionBox,
   SectionHeader,
   StatusLabel,
@@ -9,30 +11,31 @@ import React from 'react';
 import { AuditData, computeScore, countResults, ResultCounts } 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';
-}
+const COLORS = {
+  pass: '#4caf50',
+  warning: '#ff9800',
+  danger: '#f44336',
+  skipped: '#9e9e9e',
+};
 
 function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
   const { counts } = props;
   const score = computeScore(counts);
-  const status = scoreStatus(score);
+
+  const chartData = [
+    { name: 'Pass', value: counts.pass, fill: COLORS.pass },
+    { name: 'Warning', value: counts.warning, fill: COLORS.warning },
+    { name: 'Danger', value: counts.danger, fill: COLORS.danger },
+    { name: 'Skipped', value: counts.skipped, fill: COLORS.skipped },
+  ];
 
   return (
     <>
-      <SectionBox title="Score">
-        <NameValueTable
-          rows={[
-            {
-              name: 'Cluster Score',
-              value: <StatusLabel status={status}>{score}%</StatusLabel>,
-            },
-          ]}
-        />
+      <SectionBox title="Cluster Score">
+        <PercentageCircle data={chartData} total={counts.total} label={`${score}%`} />
       </SectionBox>
-      <SectionBox title="Check Summary">
+      <SectionBox title="Check Distribution">
+        <PercentageBar data={chartData} total={counts.total} />
         <NameValueTable
           rows={[
             { name: 'Total Checks', value: String(counts.total) },
@@ -48,10 +51,7 @@ function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
               name: 'Danger',
               value: <StatusLabel status="error">{counts.danger}</StatusLabel>,
             },
-            {
-              name: 'Skipped',
-              value: <StatusLabel status="">{counts.skipped}</StatusLabel>,
-            },
+            { name: 'Skipped', value: String(counts.skipped) },
           ]}
         />
       </SectionBox>
diff --git a/src/components/NamespaceDetailView.tsx b/src/components/NamespaceDetailView.tsx
index 2edfd3b..99891de 100644
--- a/src/components/NamespaceDetailView.tsx
+++ b/src/components/NamespaceDetailView.tsx
@@ -120,7 +120,7 @@ export default function NamespaceDetailView() {
             },
             {
               name: 'Skipped',
-              value: <StatusLabel status="">{counts.skipped}</StatusLabel>,
+              value: String(counts.skipped),
             },
           ]}
         />
diff --git a/src/components/NamespacesListView.tsx b/src/components/NamespacesListView.tsx
index 1b0b3bc..2dfbe3f 100644
--- a/src/components/NamespacesListView.tsx
+++ b/src/components/NamespacesListView.tsx
@@ -1,5 +1,5 @@
+import { Router } from '@kinvolk/headlamp-plugin/lib';
 import {
-  Link,
   Loader,
   NameValueTable,
   SectionBox,
@@ -8,6 +8,7 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
+import { Link } from 'react-router-dom';
 import {
   computeScore,
   countResultsForItems,
@@ -91,7 +92,11 @@ export default function NamespacesListView() {
             {
               label: 'Namespace',
               getter: (row: NamespaceRow) => (
-                <Link routeName="polaris-namespace" params={{ namespace: row.namespace }}>
+                <Link
+                  to={Router.createRouteURL('polaris-namespace', {
+                    namespace: row.namespace,
+                  })}
+                >
                   {row.namespace}
                 </Link>
               ),
@@ -118,7 +123,7 @@ export default function NamespacesListView() {
             },
             {
               label: 'Skipped',
-              getter: (row: NamespaceRow) => <StatusLabel status="">{row.skipped}</StatusLabel>,
+              getter: (row: NamespaceRow) => String(row.skipped),
             },
           ]}
           data={rows}