@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/rightsizing/RightsizingScanView.tsx

@@ -36,6 +36,7 @@ import {
   type RightsizingActionTone,
 } from './presentation'
 import { useNavCustomization } from '../../context/NavCustomization'
+import { previousSettingsNote, usePreviousIntegrationSettings } from '../../hooks/usePreviousIntegrationSettings'
 
 export const RIGHTSIZING_SCAN_DESCRIPTION =
   'Find CPU and memory requests to increase, reduce, or review. Radar never changes them.'
@@ -117,6 +118,8 @@ export function RightsizingScanView({ namespaces }: RightsizingScanViewProps) {
     isLoading: statusLoading,
     refetch: retryPrometheus,
   } = usePrometheusStatus()
+  const offers = usePreviousIntegrationSettings(!!promStatus && !promStatus.connected && !promStatus.discovering && !statusLoading)
+  const previousNote = offers.metrics ? previousSettingsNote('metrics', offers.metrics) : undefined
   const scan = useRightsizingScan(namespaces, clusterInfo?.context)
   const result = scan.data
   const [openRow, setOpenRow] = useState<string | null>(null)
@@ -257,7 +260,7 @@ export function RightsizingScanView({ namespaces }: RightsizingScanViewProps) {
           <CenteredState
             title={RIGHTSIZING_METRICS_REQUIRED_TITLE}
             body={settingsAvailable
-              ? RIGHTSIZING_METRICS_REQUIRED_BODY
+              ? `${RIGHTSIZING_METRICS_REQUIRED_BODY}${previousNote ? `\n${previousNote}` : ''}`
               : RIGHTSIZING_EMBEDDED_METRICS_REQUIRED_BODY}
             action={
               <div className="flex flex-wrap items-center justify-center gap-3">

package/src/components/settings/ConnectionHeadersEditor.tsx

@@ -0,0 +1,109 @@
+import { Input } from '@skyhook-io/k8s-ui'
+
+export interface HeaderOperation {
+  key: string
+  action: 'keep' | 'set' | 'clear'
+  value?: string
+}
+
+export function ConnectionHeadersEditor({
+  keys,
+  environmentKeys,
+  value,
+  onChange
+}: {
+  keys: string[]
+  environmentKeys: string[]
+  value: HeaderOperation[]
+  onChange: (value: HeaderOperation[]) => void
+}) {
+  const rows = value.length
+    ? value
+    : keys.map((key): HeaderOperation => ({ key, action: 'keep' }))
+  const update = (index: number, patch: Partial<HeaderOperation>) =>
+    onChange(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)))
+  return (
+    <section className="mt-4 space-y-2">
+      <h4 className="text-sm font-medium text-theme-text-primary">
+        Authentication headers
+      </h4>
+      <p className="text-xs text-theme-text-tertiary">
+        Optional. Saved values stay unchanged unless you replace or remove them.
+      </p>
+      {rows.map((row, index) => {
+        const saved = index < keys.length
+        const environment = saved && environmentKeys.some(
+          (key) => key.toLowerCase() === row.key.toLowerCase()
+        )
+        return (
+          <div key={index} className="space-y-1">
+            <div className="flex items-center gap-2">
+              <Input
+                aria-label={`Header ${index + 1} name`}
+                value={row.key}
+                disabled={saved}
+                onChange={(e) => update(index, { key: e.target.value })}
+                placeholder="Header name"
+                  className="min-w-0 flex-1 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+              />
+              <Input
+                aria-label={`${row.key || 'New header'} value`}
+                type="password"
+                autoComplete="new-password"
+                disabled={environment || row.action === 'clear'}
+                value={row.value ?? ''}
+                placeholder={
+                  row.action === 'clear'
+                    ? 'Will be removed'
+                    : environment
+                      ? 'From environment'
+                      : saved
+                        ? 'Saved value'
+                        : 'Value'
+                }
+                onChange={(e) =>
+                  update(index, {
+                    action: saved && !e.target.value ? 'keep' : 'set',
+                    value: e.target.value || undefined
+                  })
+                }
+                  className="min-w-0 flex-1 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+              />
+              {!environment && (
+                <button
+                  type="button"
+                  className="text-xs text-accent-text hover:underline shrink-0"
+                  aria-label={`${row.action === 'clear' ? 'Undo removal of' : 'Remove'} ${row.key || 'new header'}`}
+                  onClick={() =>
+                    saved
+                      ? update(index, {
+                          action: row.action === 'clear' ? 'keep' : 'clear',
+                          value: undefined
+                        })
+                      : onChange(rows.filter((_, i) => i !== index))
+                  }
+                >
+                  {row.action === 'clear' ? 'Undo' : 'Remove'}
+                </button>
+              )}
+            </div>
+            {environment && (
+              <p className="text-xs text-theme-text-tertiary">
+                Environment reference · edit this header in clusters.json.
+              </p>
+            )}
+          </div>
+        )
+      })}
+      <button
+        type="button"
+        className="text-xs text-accent-text hover:underline"
+        onClick={() =>
+          onChange([...rows, { key: '', action: 'set', value: '' }])
+        }
+      >
+        Add header
+      </button>
+    </section>
+  )
+}

package/src/components/settings/FormSaveActions.tsx

@@ -0,0 +1,76 @@
+import { Collapse } from "@skyhook-io/k8s-ui";
+import { Check } from "lucide-react";
+
+export interface FormFeedback {
+  message: string;
+  tone: "success" | "warning" | "info";
+}
+
+export function FormSaveActions({
+  dirty,
+  busy,
+  onSave,
+  onDiscard,
+  feedback,
+  error,
+}: {
+  dirty: boolean;
+  busy: boolean;
+  onSave: () => void;
+  onDiscard: () => void;
+  feedback?: FormFeedback;
+  error?: string;
+}) {
+  const success = !dirty && !busy && !error && feedback?.tone === "success";
+  const detail =
+    !busy && (error || (feedback?.tone !== "success" && feedback?.message));
+  return (
+    <div className="mt-4 border-t border-theme-border pt-4">
+      <div className="flex min-h-8 flex-wrap items-center gap-3">
+        <button
+          type="button"
+          disabled={!dirty || busy}
+          onClick={onSave}
+          className="btn-brand min-w-28 px-3 py-2 text-xs"
+        >
+          {busy ? "Saving…" : "Save changes"}
+        </button>
+        {success && (
+          <span
+            role="status"
+            className="flex items-center gap-1.5 text-xs text-theme-text-secondary"
+          >
+            <Check
+              aria-hidden="true"
+              className="h-3.5 w-3.5 text-[var(--color-success-dark)] dark:text-[var(--color-success-light)]"
+            />
+            {feedback.message}
+          </span>
+        )}
+        {dirty && (
+          <>
+            <button
+              type="button"
+              disabled={busy}
+              onClick={onDiscard}
+              className="text-xs text-theme-text-secondary hover:underline"
+            >
+              Discard
+            </button>
+            <span className="text-xs text-theme-text-tertiary">
+              Unsaved changes
+            </span>
+          </>
+        )}
+      </div>
+      <Collapse open={!!detail}>
+        <p
+          role={error ? "alert" : "status"}
+          className={`pt-2 text-xs ${error ? "text-semantic-error" : feedback?.tone === "warning" ? "text-warning-text" : "text-theme-text-secondary"}`}
+        >
+          {detail}
+        </p>
+      </Collapse>
+    </div>
+  );
+}

package/src/components/settings/IntegrationConnectionForms.tsx

@@ -0,0 +1,391 @@
+import { useEffect, useId, useState, type ReactNode } from 'react'
+import { Input, Disclosure, SelectMenu } from '@skyhook-io/k8s-ui'
+import { FormSaveActions, type FormFeedback } from './FormSaveActions'
+import { COST_SOURCE_OPTIONS } from '../cost/source'
+
+export interface SecretEdit {
+  action: 'keep' | 'set' | 'clear'
+  value?: string
+}
+export interface ArgoConnectionDraft {
+  url: string
+  insecureTls: boolean
+  secret?: SecretEdit
+  useCliToken?: boolean
+}
+export interface CostConnectionDraft {
+  url: string
+  mode: 'auto' | 'prometheus' | 'kubecost'
+  clusterId: string
+  secret?: SecretEdit
+}
+
+function CredentialField({
+  label,
+  saved,
+  value,
+  onChange
+}: {
+  label: string
+  saved: boolean
+  value: SecretEdit
+  onChange: (value: SecretEdit) => void
+}) {
+  const id = useId()
+  return (
+    <section className="space-y-2 border-t border-theme-border pt-4">
+      <label
+        htmlFor={id}
+        className="block text-sm font-medium text-theme-text-primary"
+      >
+        {label}
+      </label>
+      <div className="flex items-center gap-2">
+        <Input
+          id={id}
+          type="password"
+          autoComplete="new-password"
+          spellCheck={false}
+          value={value.value ?? ''}
+          onChange={(e) =>
+            onChange({
+              action: e.target.value ? 'set' : 'keep',
+              value: e.target.value || undefined
+            })
+          }
+          placeholder={
+            value.action === 'clear'
+              ? 'Will be removed'
+              : saved
+                ? 'Saved value'
+                : 'Optional'
+          }
+          className="block w-full min-w-0 px-3 py-2 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500 flex-1"
+        />
+        {saved && (
+          <button
+            type="button"
+            className="text-xs text-accent-text hover:underline"
+            onClick={() =>
+              onChange(
+                value.action === 'keep'
+                  ? { action: 'clear' }
+                  : { action: 'keep' }
+              )
+            }
+          >
+            {value.action === 'keep' ? 'Remove' : 'Undo'}
+          </button>
+        )}
+      </div>
+      <p className="text-xs text-theme-text-tertiary">
+        {value.action === 'clear'
+          ? 'Will be removed when you save.'
+          : 'Leave unchanged to keep the saved value.'}
+      </p>
+    </section>
+  )
+}
+
+export function ArgoCDConnectionForm({
+  value,
+  secretSet,
+  cliSession,
+  onChange,
+  onApply,
+  dirty,
+  onDiscard,
+  connectionAction,
+  feedback,
+  onDirtyChange
+}: {
+  value: ArgoConnectionDraft
+  secretSet: boolean
+  cliSession?: { server: string; user: string; insecure?: boolean }
+  onChange: (value: ArgoConnectionDraft) => void
+  onApply: (value: ArgoConnectionDraft) => Promise<void | boolean>
+  dirty: boolean
+  onDiscard: () => void
+  connectionAction?: ReactNode
+  feedback?: FormFeedback
+  onDirtyChange?: (dirty: boolean) => void
+}) {
+  const id = useId()
+  const [secret, setSecret] = useState<SecretEdit>({ action: 'keep' })
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  useEffect(
+    () => onDirtyChange?.(secret.action !== 'keep'),
+    [secret, onDirtyChange]
+  )
+  const apply = async (useCliToken = false) => {
+    setBusy(true)
+    setError('')
+    try {
+      const applied = await onApply({
+        ...value,
+        ...(useCliToken ? { useCliToken: true } : { secret })
+      })
+      if (applied === false) return
+      setSecret({ action: 'keep' })
+    } catch (error) {
+      setError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <fieldset disabled={busy} className="min-w-0 space-y-4">
+      <p className="text-sm text-theme-text-secondary">
+        Compare Git configuration with live resources and show Argo CD health.
+        Auto-discovery works without setup where anonymous reads are allowed.
+      </p>
+      <div className="space-y-1">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <label
+            htmlFor={id}
+            className="block text-sm font-medium text-theme-text-primary"
+          >
+            Argo CD server URL
+          </label>
+        </div>
+        <p className="text-xs text-theme-text-tertiary">
+          Reachable from Radar. Leave empty to discover the server in this
+          cluster.
+        </p>
+        <Input
+          className="block w-full min-w-0 px-3 py-2 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+          id={id}
+          value={value.url}
+          onChange={(e) => onChange({ ...value, url: e.target.value })}
+          placeholder="Auto-discover, or https://argocd.example.com"
+        />
+        {connectionAction}
+      </div>
+      <CredentialField
+        label="API token"
+        saved={secretSet}
+        value={secret}
+        onChange={setSecret}
+      />
+      {cliSession && (
+        <div className="text-xs text-theme-text-secondary space-y-1">
+          <p>
+            CLI session available: {cliSession.user} at {cliSession.server}
+          </p>
+          <button
+            type="button"
+            disabled={!value.url.trim()}
+            onClick={() => void apply(true)}
+            className="text-accent-text hover:underline disabled:opacity-50"
+          >
+            Connect using CLI token
+          </button>
+        </div>
+      )}
+      <label className="flex items-center gap-2 text-xs text-theme-text-secondary">
+        <input
+          type="checkbox"
+          checked={value.insecureTls}
+          onChange={(e) =>
+            onChange({ ...value, insecureTls: e.target.checked })
+          }
+        />
+        Skip TLS verification (self-signed server)
+      </label>
+      {value.insecureTls && (
+        <p className="text-xs text-warning-text">
+          Server identity will not be verified. Use only for a trusted server.
+        </p>
+      )}
+      {value.url.startsWith('http://') &&
+        (secretSet || secret.action === 'set') && (
+          <p className="text-xs text-warning-text">
+            Credentials will travel over unencrypted HTTP. Prefer HTTPS outside
+            a trusted private network.
+          </p>
+        )}
+      <FormSaveActions
+        dirty={dirty}
+        busy={busy}
+        onSave={() => void apply()}
+        onDiscard={onDiscard}
+        feedback={feedback}
+        error={error}
+      />
+    </fieldset>
+  )
+}
+
+export function CostConnectionForm({
+  value,
+  secretSet,
+  onChange,
+  onApply,
+  dirty,
+  onDiscard,
+  connectionAction,
+  feedback,
+  onDirtyChange
+}: {
+  value: CostConnectionDraft
+  secretSet: boolean
+  onChange: (value: CostConnectionDraft) => void
+  onApply: (value: CostConnectionDraft) => Promise<void | boolean>
+  dirty: boolean
+  onDiscard: () => void
+  connectionAction?: ReactNode
+  feedback?: FormFeedback
+  onDirtyChange?: (dirty: boolean) => void
+}) {
+  const id = useId()
+  const [secret, setSecret] = useState<SecretEdit>({ action: 'keep' })
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [overridesOpen, setOverridesOpen] = useState(
+    !!value.url || !!value.clusterId || secretSet
+  )
+  const automatic = value.mode === 'auto'
+  useEffect(
+    () => onDirtyChange?.(secret.action !== 'keep'),
+    [secret, onDirtyChange]
+  )
+  const apply = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      const applied = await onApply({ ...value, secret })
+      if (applied === false) return
+      setSecret({ action: 'keep' })
+    } catch (error) {
+      setError(error instanceof Error ? error.message : String(error))
+      setOverridesOpen(true)
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <fieldset disabled={busy} className="min-w-0 space-y-4">
+      <p className="text-sm text-theme-text-secondary">
+        Use OpenCost metrics from this cluster's metrics connection, or connect
+        to a Kubecost Aggregator.
+      </p>
+      <div className="space-y-1">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <label
+            htmlFor={`${id}-source`}
+            className="text-sm font-medium text-theme-text-primary"
+          >
+            Cost source
+          </label>
+        </div>
+        <SelectMenu
+          id={`${id}-source`}
+          ariaLabel="Cost source"
+          value={value.mode}
+          options={COST_SOURCE_OPTIONS}
+          onChange={(mode) => {
+            if (
+              mode === 'auto' &&
+              (value.url ||
+                value.clusterId ||
+                secretSet ||
+                secret.action !== 'keep')
+            )
+              setOverridesOpen(true)
+            onChange({
+              ...value,
+              mode: mode as CostConnectionDraft['mode']
+            })
+          }}
+          className="w-full"
+        />
+        {(value.mode === 'prometheus' || (automatic && !overridesOpen)) && connectionAction}
+      </div>
+      {value.mode !== 'prometheus' && (
+        <Disclosure
+          summary={
+            value.url ||
+            value.clusterId ||
+            secretSet ||
+            secret.action !== 'keep'
+              ? 'Kubecost connection overrides · configured'
+              : 'Kubecost connection overrides (optional)'
+          }
+          summaryClassName={
+            automatic
+              ? 'text-sm font-medium text-theme-text-secondary'
+              : 'hidden'
+          }
+          open={!automatic || overridesOpen}
+          onOpenChange={setOverridesOpen}
+        >
+          <div className={automatic ? 'space-y-4 pt-3' : 'space-y-4'}>
+            <div className="space-y-1">
+              <label
+                htmlFor={id}
+                className="block text-sm font-medium text-theme-text-primary"
+              >
+                Kubecost Aggregator URL
+              </label>
+              <p className="text-xs text-theme-text-tertiary">
+                Leave empty for discovery in this cluster. Use the central
+                Aggregator URL for a federated setup.
+              </p>
+              <Input
+                className="block w-full min-w-0 px-3 py-2 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+                id={id}
+                value={value.url}
+                onChange={(e) => onChange({ ...value, url: e.target.value })}
+                placeholder="Auto-discover, or https://kubecost.example.com"
+              />
+              {(!automatic || overridesOpen) && connectionAction}
+            </div>
+            <CredentialField
+              label="API key"
+              saved={secretSet}
+              value={secret}
+              onChange={setSecret}
+            />
+            {value.url.startsWith('http://') &&
+              (secretSet || secret.action === 'set') && (
+                <p className="text-xs text-warning-text">
+                  The API key will travel over unencrypted HTTP. Prefer HTTPS
+                  outside a trusted private network.
+                </p>
+              )}
+            <section className="space-y-1 border-t border-theme-border pt-4">
+              <label
+                htmlFor={`${id}-cluster`}
+                className="block text-sm font-medium text-theme-text-primary"
+              >
+                Kubecost cluster ID
+              </label>
+              <p className="text-xs text-theme-text-tertiary">
+                The FinOps Agent's CLUSTER_ID, not the kubeconfig context
+                name. Leave empty to detect it. Applies only to this cluster.
+              </p>
+              <Input
+                className="block w-full min-w-0 px-3 py-2 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+                id={`${id}-cluster`}
+                value={value.clusterId}
+                onChange={(e) =>
+                  onChange({ ...value, clusterId: e.target.value })
+                }
+                placeholder="Detected automatically"
+              />
+            </section>
+          </div>
+        </Disclosure>
+      )}
+      <FormSaveActions
+        dirty={dirty}
+        busy={busy}
+        onSave={() => void apply()}
+        onDiscard={onDiscard}
+        feedback={feedback}
+        error={error}
+      />
+    </fieldset>
+  )
+}