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

@@ -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
 

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>
+  );
+}

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);
+  const interval = getRefreshInterval();
-
-  function handleIntervalChange(seconds: number) {
-    setInterval(seconds);
-    setRefreshInterval(seconds);
-  }
-
   const { data, loading, error } = usePolarisData(interval);
 
   if (loading) {
@@ -122,12 +98,7 @@ export default function PolarisView() {
 
   return (
     <>
-      <SectionHeader
+      <SectionHeader title="Polaris" />
-        title="Polaris"
-        actions={[
-          <RefreshSettings key="refresh" interval={interval} onChange={handleIntervalChange} />,
-        ]}
-      />
 
       {error && (
         <SectionBox title="Error">

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);