From b10d09fd41e461a880d821fe90a0c6941e4f2e26 Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Fri, 6 Feb 2026 21:55:13 -0500
Subject: [PATCH] feat: move refresh interval to plugin settings

Register plugin settings via registerPluginSettings so the refresh
interval is configurable from Headlamp's plugin config page instead
of being embedded in the main view header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/api/polaris.ts                 |  7 ++++++
 src/components/PolarisSettings.tsx | 40 ++++++++++++++++++++++++++++++
 src/components/PolarisView.tsx     | 33 ++----------------------
 src/index.tsx                      |  9 ++++++-
 4 files changed, 57 insertions(+), 32 deletions(-)
 create mode 100644 src/components/PolarisSettings.tsx

diff --git a/src/api/polaris.ts b/src/api/polaris.ts
index 808b3d8..f40d5d5 100644
--- a/src/api/polaris.ts
+++ b/src/api/polaris.ts
@@ -93,6 +93,13 @@ export function countResults(data: AuditData): ResultCounts {
 
 // --- Settings ---
 
+export const INTERVAL_OPTIONS = [
+  { label: '1 minute', value: 60 },
+  { label: '5 minutes', value: 300 },
+  { label: '10 minutes', value: 600 },
+  { label: '30 minutes', value: 1800 },
+];
+
 const STORAGE_KEY = 'polaris-plugin-refresh-interval';
 const DEFAULT_INTERVAL_SECONDS = 300; // 5 minutes
 
diff --git a/src/components/PolarisSettings.tsx b/src/components/PolarisSettings.tsx
new file mode 100644
index 0000000..be80a22
--- /dev/null
+++ b/src/components/PolarisSettings.tsx
@@ -0,0 +1,40 @@
+import { NameValueTable, SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import React from 'react';
+import { getRefreshInterval, INTERVAL_OPTIONS, setRefreshInterval } from '../api/polaris';
+
+interface PluginSettingsProps {
+  data?: { [key: string]: string | number | boolean };
+  onDataChange?: (data: { [key: string]: string | number | boolean }) => void;
+}
+
+export default function PolarisSettings(props: PluginSettingsProps) {
+  const { data, onDataChange } = props;
+  const currentInterval = (data?.refreshInterval as number) ?? getRefreshInterval();
+
+  function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    const seconds = Number(e.target.value);
+    setRefreshInterval(seconds);
+    onDataChange?.({ ...data, refreshInterval: seconds });
+  }
+
+  return (
+    <SectionBox title="Polaris Settings">
+      <NameValueTable
+        rows={[
+          {
+            name: 'Refresh Interval',
+            value: (
+              <select value={currentInterval} onChange={handleChange}>
+                {INTERVAL_OPTIONS.map(opt => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            ),
+          },
+        ]}
+      />
+    </SectionBox>
+  );
+}
diff --git a/src/components/PolarisView.tsx b/src/components/PolarisView.tsx
index 16f0127..9e4efd2 100644
--- a/src/components/PolarisView.tsx
+++ b/src/components/PolarisView.tsx
@@ -1,5 +1,4 @@
 import {
-  HeaderLabel,
   Loader,
   NameValueTable,
   SectionBox,
@@ -13,32 +12,15 @@ import {
   countResults,
   getRefreshInterval,
   ResultCounts,
-  setRefreshInterval,
   usePolarisData,
 } from '../api/polaris';
 
-const INTERVAL_OPTIONS = [
-  { label: '1 minute', value: 60 },
-  { label: '5 minutes', value: 300 },
-  { label: '10 minutes', value: 600 },
-  { label: '30 minutes', value: 1800 },
-];
-
 function scoreStatus(score: number): 'success' | 'warning' | 'error' {
   if (score >= 80) return 'success';
   if (score >= 50) return 'warning';
   return 'error';
 }
 
-function RefreshSettings(props: { interval: number; onChange: (seconds: number) => void }) {
-  return (
-    <HeaderLabel
-      label="Refresh interval"
-      value={INTERVAL_OPTIONS.find(o => o.value === props.interval)?.label ?? ''}
-    />
-  );
-}
-
 function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
   const score = computeScore(props.counts);
   const status = scoreStatus(score);
@@ -105,13 +87,7 @@ function OverviewSection(props: { data: AuditData; counts: ResultCounts }) {
 }
 
 export default function PolarisView() {
-  const [interval, setInterval] = React.useState(getRefreshInterval);
-
-  function handleIntervalChange(seconds: number) {
-    setInterval(seconds);
-    setRefreshInterval(seconds);
-  }
-
+  const interval = getRefreshInterval();
   const { data, loading, error } = usePolarisData(interval);
 
   if (loading) {
@@ -122,12 +98,7 @@ export default function PolarisView() {
 
   return (
     <>
-      <SectionHeader
-        title="Polaris"
-        actions={[
-          <RefreshSettings key="refresh" interval={interval} onChange={handleIntervalChange} />,
-        ]}
-      />
+      <SectionHeader title="Polaris" />
 
       {error && (
         <SectionBox title="Error">
diff --git a/src/index.tsx b/src/index.tsx
index 3b30f3f..fdce70e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,10 @@
-import { registerRoute, registerSidebarEntry } from '@kinvolk/headlamp-plugin/lib';
+import {
+  registerPluginSettings,
+  registerRoute,
+  registerSidebarEntry,
+} from '@kinvolk/headlamp-plugin/lib';
 import React from 'react';
+import PolarisSettings from './components/PolarisSettings';
 import PolarisView from './components/PolarisView';
 
 registerSidebarEntry({
@@ -17,3 +22,5 @@ registerRoute({
   exact: true,
   component: () => <PolarisView />,
 });
+
+registerPluginSettings('polaris-headlamp-plugin', PolarisSettings, true);