@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/settings/controls.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+export function SubHeading({ children }: { children: ReactNode }) {
+  return (
+    <h4 className="text-xs font-semibold uppercase tracking-wider text-theme-text-tertiary">
+      {children}
+    </h4>
+  )
+}
+
+export function ConfigToggle({
+  label,
+  description,
+  value,
+  disabled,
+  onChange,
+}: {
+  label: string
+  description?: ReactNode
+  value: boolean
+  disabled?: boolean
+  onChange: (value: boolean) => void
+}) {
+  return (
+    <label className={clsx('flex items-start justify-between gap-3 py-1', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+      <span className="min-w-0">
+        <span className={clsx('block text-sm', disabled ? 'text-theme-text-secondary' : 'text-theme-text-primary')}>{label}</span>
+        {description && (
+          <span className="mt-0.5 block text-xs text-theme-text-tertiary">{description}</span>
+        )}
+      </span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={value}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange(!value)}
+        className={clsx(
+          'relative w-9 h-5 shrink-0 rounded-full transition-colors',
+          value ? 'bg-skyhook-600' : 'bg-theme-elevated border border-theme-border',
+          disabled && 'opacity-50'
+        )}
+      >
+        <span
+          className={clsx(
+            'absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm',
+            value && 'translate-x-4'
+          )}
+        />
+      </button>
+    </label>
+  )
+}

package/src/components/settings/currency-options.test.ts

@@ -9,7 +9,7 @@ describe('currency options', () => {
   it('offers Auto followed by named ISO 4217 currencies', () => {
     expect(CURRENCY_OPTIONS[0]).toEqual({
       value: '',
-      label: 'Auto (detect from OpenCost/Kubecost)',
+      label: 'Automatic (from the cost source)',
     })
     expect(CURRENCY_OPTIONS).toContainEqual({
       value: 'EUR',

package/src/components/settings/currency-options.ts

@@ -19,7 +19,7 @@ const currencyCodes = [
 ]
 
 export const CURRENCY_OPTIONS: SelectMenuOption[] = [
-  { value: '', label: 'Auto (detect from OpenCost/Kubecost)' },
+  { value: '', label: 'Automatic (from the cost source)' },
   ...currencyCodes
     .filter((code) => code !== 'XTS' && code !== 'XXX')
     .map((code) => {

package/src/components/settings/settings-state.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   costSourceApplyLabel,
   prometheusHeadersFromRows,
-  shouldOfferCostReview,
+  pendingSections,
   shouldShowSettingsFooter,
 } from "./settings-state";
 
@@ -23,35 +23,42 @@ describe("Prometheus header edits", () => {
   });
 });
 
-describe("Cost settings state", () => {
-  it("keeps source drafts inline while the Cost section is open", () => {
-    expect(shouldOfferCostReview(true, "cost")).toBe(false);
+describe("Integration settings state", () => {
+  it.each(['prometheus', 'cost', 'argocd'] as const)("offers discard for a %s draft", (section) => {
+    expect(pendingSections({ prometheus: false, cost: false, argocd: false, ai: false, [section]: true })).toEqual([section]);
     expect(
       shouldShowSettingsFooter({
         canEditConfig: true,
         confirmingClose: false,
         configDirty: false,
-        costIntegrationDirty: true,
-        section: "cost",
+        integrationDirty: true,
+        aiDirtyElsewhere: false,
         hasSaveMessage: false,
       }),
-    ).toBe(false);
+    ).toBe(true);
   });
 
   it("offers review from other sections and retains the close guard", () => {
-    expect(shouldOfferCostReview(true, "overview")).toBe(true);
+    expect(pendingSections({ prometheus: true, cost: true, argocd: true, ai: true })).toEqual(['prometheus', 'cost', 'argocd', 'ai']);
     expect(
       shouldShowSettingsFooter({
         canEditConfig: true,
         confirmingClose: true,
         configDirty: false,
-        costIntegrationDirty: true,
-        section: "cost",
+        integrationDirty: true,
+        aiDirtyElsewhere: false,
         hasSaveMessage: false,
       }),
     ).toBe(true);
   });
 
+  it("shows an AI draft to users without owner access, but not their startup or integration drafts", () => {
+    const base = { canEditConfig: false, confirmingClose: false, configDirty: true, integrationDirty: true, aiDirtyElsewhere: false, hasSaveMessage: true };
+    expect(shouldShowSettingsFooter(base)).toBe(false);
+    expect(shouldShowSettingsFooter({ ...base, aiDirtyElsewhere: true })).toBe(true);
+    expect(shouldShowSettingsFooter({ ...base, confirmingClose: true })).toBe(true);
+  });
+
   it("only claims to test sources that the backend probes", () => {
     expect(costSourceApplyLabel("auto")).toBe("Test & apply source");
     expect(costSourceApplyLabel("kubecost")).toBe("Test & apply source");

package/src/components/settings/settings-state.ts

@@ -7,28 +7,37 @@ export type SettingsSectionId =
   | 'argocd'
   | 'ai'
   | 'advanced'
+  | 'privacy'
 
-export function shouldOfferCostReview(
-  costIntegrationDirty: boolean,
-  section: SettingsSectionId,
-): boolean {
-  return costIntegrationDirty && section !== 'cost'
+export type IntegrationSectionId = 'prometheus' | 'cost' | 'argocd'
+// Tabs whose drafts save through their own form, not the startup footer.
+export type PendingSectionId = IntegrationSectionId | 'ai'
+
+export const pendingSectionLabels: Record<PendingSectionId, string> = {
+  prometheus: 'Metrics', cost: 'Cost', argocd: 'Argo CD', ai: 'AI investigations',
+}
+
+export function pendingSections(dirty: Record<PendingSectionId, boolean>): PendingSectionId[] {
+  return (['prometheus', 'cost', 'argocd', 'ai'] as const).filter(section => dirty[section])
 }
 
+// AI preferences are open to every user, so an AI draft pending in another tab
+// shows the footer even without owner access.
 export function shouldShowSettingsFooter(input: {
   canEditConfig: boolean
   confirmingClose: boolean
   configDirty: boolean
-  costIntegrationDirty: boolean
-  section: SettingsSectionId
+  integrationDirty: boolean
+  aiDirtyElsewhere: boolean
   hasSaveMessage: boolean
 }): boolean {
   return (
-    input.canEditConfig &&
-    (input.confirmingClose ||
-      input.configDirty ||
-      shouldOfferCostReview(input.costIntegrationDirty, input.section) ||
-      input.hasSaveMessage)
+    input.confirmingClose ||
+    input.aiDirtyElsewhere ||
+    (input.canEditConfig &&
+      (input.configDirty ||
+        input.integrationDirty ||
+        input.hasSaveMessage))
   )
 }
 

package/src/components/timeline/TimelineList.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+import { applyClientFilters } from '../../api/timelineSource'
+import type { TimelineEvent } from '../../types'
+import { listIncludesManaged } from './TimelineList'
+
+function ev(over: Partial<TimelineEvent> & { id: string }): TimelineEvent {
+  return {
+    timestamp: '2024-01-01T00:00:00.000Z',
+    source: 'informer',
+    kind: 'Deployment',
+    namespace: 'ns-a',
+    name: over.id,
+    eventType: 'update',
+    ...over,
+  }
+}
+
+// Mirrors the host: the source filter runs first, then the UI keeps the selected kinds.
+function listRows(events: TimelineEvent[], kinds: string[]): string[] {
+  return applyClientFilters(events, { includeManaged: listIncludesManaged(false, kinds) })
+    .filter((e) => kinds.length === 0 || kinds.includes(e.kind))
+    .map((e) => e.id)
+}
+
+describe('listIncludesManaged', () => {
+  it('includes managed rows when app-scoped or when any kind is selected', () => {
+    expect(listIncludesManaged(true, [])).toBe(true)
+    expect(listIncludesManaged(false, ['Pod'])).toBe(true)
+    expect(listIncludesManaged(false, ['Job'])).toBe(true)
+  })
+
+  it('keeps hiding managed rows for the unfiltered list', () => {
+    expect(listIncludesManaged(false, [])).toBe(false)
+  })
+})
+
+describe('timeline list rows', () => {
+  const events = [
+    ev({ id: 'dep', kind: 'Deployment' }),
+    ev({ id: 'pod', kind: 'Pod' }),
+    ev({ id: 'job', kind: 'Job' }),
+    ev({ id: 'cron-job', kind: 'Job', owner: { kind: 'CronJob', name: 'nightly' } }),
+  ]
+
+  it('lists pod rows for a Pod selection', () => {
+    expect(listRows(events, ['Pod'])).toEqual(['pod'])
+  })
+
+  it('lists owned rows of an unmanaged kind for that kind', () => {
+    expect(listRows(events, ['Job']).sort()).toEqual(['cron-job', 'job'])
+  })
+
+  it('hides pod and owned rows when no kind is selected', () => {
+    expect(listRows(events, []).sort()).toEqual(['dep', 'job'])
+  })
+})

package/src/components/timeline/TimelineList.tsx

@@ -24,6 +24,12 @@ export type { ActivityTypeFilter, ActivityFilterKey }
 const LIST_FETCH_LIMIT = 2000
 const APP_SCOPED_FETCH_LIMIT = 10000
 
+// The source drops managed rows (Pod, ReplicaSet, Event, or any owned row) before
+// the kind filter runs, so an explicit kind selection must keep them or it lists nothing.
+export function listIncludesManaged(appScoped: boolean, kinds: string[]): boolean {
+  return appScoped || kinds.length > 0
+}
+
 interface TimelineListProps {
   namespaces: string[]
   onViewChange?: (view: 'list' | 'swimlane') => void
@@ -76,7 +82,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     kinds: queryParams.kinds,
     timeRange: queryParams.timeRange,
     includeK8sEvents: true,
-    includeManaged: appScoped,
+    includeManaged: listIncludesManaged(appScoped, queryParams.kinds),
     includeDeleted: showDeleted,
     limit: fetchLimit,
     fromMs: selectionWindow?.fromMs,

package/src/components/traffic/TrafficFlowList.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'
 import { Virtuoso } from 'react-virtuoso'
 import type { TrafficFlow, TrafficEndpoint } from '../../types'
 import { clsx } from 'clsx'
+import { dedupeHTTPPairs } from './trafficFilters'
 import { ChevronDown, ChevronUp, ShieldCheck } from 'lucide-react'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { pluralize, StatusDot } from '@skyhook-io/k8s-ui'
@@ -53,9 +54,11 @@ type SortDir = 'asc' | 'desc'
 
 interface TrafficFlowListProps {
   flows: TrafficFlow[]
+  /** The server said its L7 responses run caller → callee; see dedupeHTTPPairs. */
+  responsesCallerOriented: boolean
 }
 
-export function TrafficFlowList({ flows }: TrafficFlowListProps) {
+export function TrafficFlowList({ flows, responsesCallerOriented }: TrafficFlowListProps) {
   const [search] = useFlowSearch()
   const [sortField, setSortField] = useState<SortField>('time')
   const [sortDir, setSortDir] = useState<SortDir>('desc')
@@ -70,26 +73,7 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
     }
   }
 
-  // Deduplicate HTTP REQUEST/RESPONSE pairs: prefer RESPONSE (has status + latency).
-  // Keep orphan REQUESTs (no matching RESPONSE) as they indicate missing responses.
-  // Deduplicate HTTP REQUEST/RESPONSE pairs: prefer RESPONSE (has status + latency).
-  // REQUEST goes client→server, RESPONSE goes server→client (src/dst swapped).
-  const deduped = useMemo(() => {
-    // RESPONSE goes server→client, REQUEST goes client→server (src/dst swapped).
-    // Normalize key: always client|server|method|path
-    const responseKeys = new Set<string>()
-    for (const f of flows) {
-      if (f.l7Protocol === 'HTTP' && f.l7Type === 'RESPONSE') {
-        responseKeys.add(`${f.destination.name}|${f.source.name}|${f.httpMethod}|${f.httpPath}`)
-      }
-    }
-    return flows.filter(f => {
-      if (f.l7Protocol === 'HTTP' && f.l7Type === 'REQUEST') {
-        return !responseKeys.has(`${f.source.name}|${f.destination.name}|${f.httpMethod}|${f.httpPath}`)
-      }
-      return true
-    })
-  }, [flows])
+  const deduped = useMemo(() => dedupeHTTPPairs(flows, responsesCallerOriented), [flows, responsesCallerOriented])
 
   const filtered = useMemo(() => {
     if (!search) return deduped

package/src/components/traffic/TrafficFlowListContext.tsx

@@ -4,12 +4,13 @@ import type { TrafficGraphSelection } from './TrafficGraph'
 
 interface TrafficFlowListContextValue {
   flows: TrafficFlow[]
+  responsesCallerOriented: boolean
   graphSelection: TrafficGraphSelection | null
   clearSelection: () => void
 }
 
 // Module-level store — TrafficView writes, dock tab reads.
-let currentValue: TrafficFlowListContextValue = { flows: [], graphSelection: null, clearSelection: () => {} }
+let currentValue: TrafficFlowListContextValue = { flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} }
 const listeners = new Set<() => void>()
 
 function setValue(val: TrafficFlowListContextValue) {
@@ -49,17 +50,18 @@ export function useFlowSearch(): [string, (val: string) => void] {
 // Provider — call this from TrafficView to publish flow data
 export function TrafficFlowListProvider({
   flows,
+  responsesCallerOriented,
   graphSelection,
   clearSelection,
   children,
 }: TrafficFlowListContextValue & { children: ReactNode }) {
   useEffect(() => {
-    setValue({ flows, graphSelection, clearSelection })
-  }, [flows, graphSelection, clearSelection])
+    setValue({ flows, responsesCallerOriented, graphSelection, clearSelection })
+  }, [flows, responsesCallerOriented, graphSelection, clearSelection])
 
   useEffect(() => {
     return () => {
-      setValue({ flows: [], graphSelection: null, clearSelection: () => {} })
+      setValue({ flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} })
       setFlowSearch('')
     }
   }, [])