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