@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/cost/CostViewTabs.test.tsx

@@ -0,0 +1,21 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, expect, it } from 'vitest'
+import { CostViewTabs } from './CostViewTabs'
+
+describe('CostViewTabs', () => {
+  it('preserves namespace and rightsizing filters between cost views', () => {
+    const html = renderToStaticMarkup(
+      <MemoryRouter
+        initialEntries={['/cost/rightsizing?namespaces=shop%2Cprod&rfClass=review&rfQ=api']}
+      >
+        <CostViewTabs />
+      </MemoryRouter>,
+    )
+
+    expect(html).toContain('href="/cost?namespaces=shop%2Cprod&amp;rfClass=review&amp;rfQ=api"')
+    expect(html).toContain(
+      'href="/cost/rightsizing?namespaces=shop%2Cprod&amp;rfClass=review&amp;rfQ=api"',
+    )
+  })
+})

package/src/components/cost/CostViewTabs.tsx

@@ -0,0 +1,40 @@
+import { Link, useLocation, type To } from 'react-router-dom'
+import { clsx } from 'clsx'
+
+export function CostViewTabs() {
+  const { pathname, search } = useLocation()
+  const rightsizing = pathname.startsWith('/cost/rightsizing')
+  return (
+    <div
+      className="flex items-center gap-1 border-b border-theme-border"
+      role="tablist"
+      aria-label="Cost views"
+    >
+      <CostTab to={{ pathname: '/cost', search }} active={!rightsizing}>
+        Overview
+      </CostTab>
+      <CostTab to={{ pathname: '/cost/rightsizing', search }} active={rightsizing}>
+        Rightsizing
+      </CostTab>
+    </div>
+  )
+}
+
+function CostTab({ to, active, children }: { to: To; active: boolean; children: React.ReactNode }) {
+  return (
+    <Link
+      to={to}
+      role="tab"
+      aria-selected={active}
+      className={clsx(
+        'relative px-3 py-2 text-sm font-medium transition-colors',
+        active
+          ? 'text-theme-text-primary'
+          : 'text-theme-text-tertiary hover:text-theme-text-secondary',
+      )}
+    >
+      {children}
+      {active && <span className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent" />}
+    </Link>
+  )
+}

package/src/components/cost/CurrentAllocationUse.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import { ALLOCATION_USE_TOOLTIP, formatAllocatedUse } from './CurrentAllocationUse'
+
+describe('formatAllocatedUse', () => {
+  it('keeps unavailable, zero-allocation, and zero-use states distinct', () => {
+    expect(formatAllocatedUse(1, 0, false)).toBe('Usage unavailable')
+    expect(formatAllocatedUse(0, 0, false)).toBe('No allocation')
+    expect(formatAllocatedUse(1, 0, true)).toBe('0% allocated use')
+    expect(formatAllocatedUse(1, 0, true, false)).toBe('—')
+  })
+
+  it('caps bursty or noisy ratios at the allocation ceiling', () => {
+    expect(formatAllocatedUse(1, 42.4, true)).toBe('42% allocated use')
+    expect(formatAllocatedUse(1, 120, true)).toBe('100% allocated use')
+  })
+
+  it('does not frame the measure as a grade or recoverable savings', () => {
+    expect(ALLOCATION_USE_TOOLTIP.toLowerCase()).not.toMatch(/efficient|waste|unused capacity/)
+    expect(ALLOCATION_USE_TOOLTIP).toContain('not request headroom')
+  })
+})

package/src/components/cost/CurrentAllocationUse.tsx

@@ -0,0 +1,126 @@
+import { clsx } from 'clsx'
+import { HelpCircle } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
+import { formatCostPerHour, formatProjectedMonthlyRate } from './format'
+
+interface CurrentAllocationUseProps {
+  dataAvailable: boolean
+  cpuCost: number
+  memoryCost: number
+  hourlyCost: number
+  cpuAllocationUse: number
+  memoryAllocationUse: number
+  cpuUsageAvailable: boolean
+  memoryUsageAvailable: boolean
+  scopeNote?: string
+}
+
+export const ALLOCATION_USE_TOOLTIP =
+  'OpenCost allocation uses the greater of requested or observed CPU and memory. The percentages compare observed use with that allocated amount; they are not request headroom or a right-sizing recommendation.'
+
+export function formatAllocatedUse(
+  allocationCost: number,
+  allocationUse: number,
+  usageAvailable: boolean,
+  dataAvailable = true,
+): string {
+  if (!dataAvailable) return '—'
+  if (allocationCost <= 0) return 'No allocation'
+  if (!usageAvailable) return 'Usage unavailable'
+  const percentage = Math.min(100, Math.max(0, Math.round(allocationUse)))
+  return `${percentage}% allocated use`
+}
+
+export function CurrentAllocationUse({
+  dataAvailable,
+  cpuCost,
+  memoryCost,
+  hourlyCost,
+  cpuAllocationUse,
+  memoryAllocationUse,
+  cpuUsageAvailable,
+  memoryUsageAvailable,
+  scopeNote,
+}: CurrentAllocationUseProps) {
+  const splitTotal = cpuCost + memoryCost
+  const cpuPct = splitTotal > 0 ? (cpuCost / splitTotal) * 100 : 0
+  const memoryPct = splitTotal > 0 ? (memoryCost / splitTotal) * 100 : 0
+
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface/50 p-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-1.5">
+            <div className="text-sm font-semibold text-theme-text-primary">Current allocation and use</div>
+            <Tooltip content={ALLOCATION_USE_TOOLTIP} className="max-w-[320px] whitespace-normal text-left" delay={150}>
+              <HelpCircle className="h-3.5 w-3.5 cursor-help text-theme-text-tertiary transition-colors hover:text-theme-text-secondary" />
+            </Tooltip>
+          </div>
+          <div className="text-xs text-theme-text-tertiary">
+            Allocation and CPU use: 1h average · Memory use: current
+            {scopeNote ? ` · ${scopeNote}` : ''}
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-sm font-medium text-theme-text-primary tabular-nums">
+            {dataAvailable ? formatProjectedMonthlyRate(hourlyCost) : '—'}
+          </div>
+          {dataAvailable && (
+            <div className="text-[10px] text-theme-text-tertiary tabular-nums">
+              {formatCostPerHour(hourlyCost)} current rate
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="h-3 overflow-hidden rounded-full bg-theme-hover">
+        <div className="flex h-full">
+          {dataAvailable && (
+            <>
+              <div className="h-full bg-accent" style={{ width: `${cpuPct}%` }} />
+              <div className="h-full bg-amber-500" style={{ width: `${memoryPct}%` }} />
+            </>
+          )}
+        </div>
+      </div>
+      <div className="mt-3 grid gap-2 text-xs text-theme-text-secondary sm:grid-cols-2">
+        <AllocationUseItem
+          colorClass="bg-accent"
+          label="CPU"
+          allocation={dataAvailable ? formatProjectedMonthlyRate(cpuCost) : '—'}
+          use={formatAllocatedUse(cpuCost, cpuAllocationUse, cpuUsageAvailable, dataAvailable)}
+        />
+        <AllocationUseItem
+          colorClass="bg-amber-500"
+          label="Memory"
+          allocation={dataAvailable ? formatProjectedMonthlyRate(memoryCost) : '—'}
+          use={formatAllocatedUse(memoryCost, memoryAllocationUse, memoryUsageAvailable, dataAvailable)}
+        />
+      </div>
+    </section>
+  )
+}
+
+function AllocationUseItem({
+  colorClass,
+  label,
+  allocation,
+  use,
+}: {
+  colorClass: string
+  label: string
+  allocation: string
+  use: string
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-md bg-theme-base px-2.5 py-2">
+      <span className="flex items-center gap-2">
+        <span className={clsx('h-2.5 w-2.5 rounded-sm', colorClass)} />
+        {label}
+      </span>
+      <span className="text-right">
+        <span className="block font-medium tabular-nums text-theme-text-primary">{allocation}</span>
+        <span className="block text-[10px] tabular-nums text-theme-text-tertiary">{use}</span>
+      </span>
+    </div>
+  )
+}

package/src/components/cost/WorkloadCostTab.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, it } from 'vitest'
+import { getWorkloadCostState } from './WorkloadCostTab'
+import { ApiError, type OpenCostWorkloadDetailResponse, type OpenCostWorkloadTrendResponse } from '../../api/client'
+
+describe('getWorkloadCostState', () => {
+  it('treats scaled-to-zero as a valid zero state', () => {
+    const current: OpenCostWorkloadDetailResponse = {
+      available: true,
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+      current: {
+        name: 'checkout',
+        kind: 'Deployment',
+        hourlyCost: 0,
+        cpuCost: 0,
+        memoryCost: 0,
+        replicas: 0,
+        cpuUsageAvailable: false,
+        memoryUsageAvailable: false,
+        cpuAllocationUse: 0,
+        memoryAllocationUse: 0,
+      },
+    }
+    const trend: OpenCostWorkloadTrendResponse = {
+      available: false,
+      reason: 'no_metrics',
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+      range: '24h',
+    }
+
+    expect(getWorkloadCostState(current, trend, false)).toBe('zero')
+  })
+
+  it('keeps current cost visible when only historical owner metrics are missing', () => {
+    const current: OpenCostWorkloadDetailResponse = {
+      available: true,
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+      current: {
+        name: 'checkout',
+        kind: 'Deployment',
+        hourlyCost: 0.2,
+        cpuCost: 0.12,
+        memoryCost: 0.08,
+        replicas: 2,
+        cpuUsageAvailable: true,
+        memoryUsageAvailable: true,
+        cpuAllocationUse: 25,
+        memoryAllocationUse: 25,
+      },
+    }
+    const trend: OpenCostWorkloadTrendResponse = {
+      available: false,
+      reason: 'no_metrics',
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+      range: '24h',
+    }
+
+    expect(getWorkloadCostState(current, trend, false)).toBe('partial_missing_history')
+  })
+
+  it('keeps current cost visible while historical owner metrics are still loading', () => {
+    const current: OpenCostWorkloadDetailResponse = {
+      available: true,
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+      current: {
+        name: 'checkout',
+        kind: 'Deployment',
+        hourlyCost: 0.2,
+        cpuCost: 0.12,
+        memoryCost: 0.08,
+        replicas: 2,
+        cpuUsageAvailable: true,
+        memoryUsageAvailable: true,
+        cpuAllocationUse: 25,
+        memoryAllocationUse: 25,
+      },
+    }
+
+    expect(getWorkloadCostState(current, undefined, { trendLoading: true })).toBe('data')
+  })
+
+  it('uses historical data when current metrics are absent but history exists', () => {
+    const current: OpenCostWorkloadDetailResponse = {
+      available: false,
+      reason: 'no_metrics',
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+    }
+    const trend: OpenCostWorkloadTrendResponse = {
+      available: true,
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+      range: '7d',
+      dataPoints: [
+        { timestamp: 1700000000, value: 0.1 },
+        { timestamp: 1700003600, value: 0.2 },
+      ],
+    }
+
+    expect(getWorkloadCostState(current, trend, false)).toBe('partial_missing_current')
+  })
+
+  it('separates load failures from absent workload metrics', () => {
+    expect(getWorkloadCostState(undefined, undefined, { currentError: true })).toBe('load_error')
+  })
+
+  it('surfaces workload access and existence failures', () => {
+    const current: OpenCostWorkloadDetailResponse = {
+      available: false,
+      reason: 'access_denied',
+      namespace: 'prod',
+      kind: 'Deployment',
+      name: 'checkout',
+    }
+
+    const missing: OpenCostWorkloadTrendResponse = {
+      available: false,
+      reason: 'not_found',
+      namespace: 'prod',
+      kind: 'Deployment',
+      name: 'checkout',
+      range: '24h',
+    }
+
+    expect(getWorkloadCostState(current, undefined, false)).toBe('access_denied')
+    expect(getWorkloadCostState(undefined, missing, false)).toBe('not_found')
+    expect(getWorkloadCostState(undefined, undefined, { currentError: new ApiError('denied', 403) })).toBe('access_denied')
+    expect(getWorkloadCostState(undefined, undefined, { trendError: new ApiError('missing', 404) })).toBe('not_found')
+  })
+
+  it('shows Prometheus discovery as soon as one query reports it', () => {
+    const current: OpenCostWorkloadDetailResponse = {
+      available: false,
+      reason: 'no_prometheus',
+      namespace: 'default',
+      kind: 'Deployment',
+      name: 'checkout',
+    }
+
+    expect(getWorkloadCostState(current, undefined, { trendLoading: true })).toBe('no_prometheus')
+  })
+})