Fix cost unavailable state handling

Author: nadaverell

web/src/api/client.ts

@@ -42,7 +42,7 @@ const DASHBOARD_REFRESH_INTERVAL_MS = 30_000
 const AUDIT_REFRESH_INTERVAL_MS = 60_000
 const ISSUES_REFRESH_INTERVAL_MS = 30_000
 const COST_REFRESH_INTERVAL_MS = 60_000
-const COST_DISCOVERY_RETRY_INTERVAL_MS = 2_000
+const COST_DISCOVERY_RETRY_INTERVAL_MS = 5_000
 export const COST_DISCOVERY_GRACE_MS = 30_000
 const COST_TREND_REFRESH_INTERVAL_MS = 120_000
 const CHANGES_REFRESH_INTERVAL_MS = 60_000
@@ -630,7 +630,7 @@ export function useOpenCostWorkloads(namespace: string, options?: { enabled?: bo
     queryKey: ['opencost-workloads', namespace],
     queryFn: () => fetchJSON(`/opencost/workloads?namespace=${encodeURIComponent(namespace)}`),
     enabled: (options?.enabled ?? true) && Boolean(namespace),
-    refetchInterval: costRefetchInterval(false, clusterInfo.data?.context),
+    refetchInterval: costRefetchInterval(COST_REFRESH_INTERVAL_MS, clusterInfo.data?.context),
     staleTime: 30000,
   })
 }

web/src/components/cost/ApplicationCostTab.test.ts

@@ -66,5 +66,6 @@ describe('getApplicationCostState', () => {
     }
 
     expect(getApplicationCostState(current, undefined, { currentLoading: false, trendLoading: false })).toBe('access_denied')
+    expect(getApplicationCostState(current, undefined, { trendError: true })).toBe('access_denied')
   })
 })

web/src/components/cost/ApplicationCostTab.tsx

@@ -129,7 +129,9 @@ export function ApplicationCostTab({ app, workloads, onSelectWorkloadCost }: App
   const trend = trendData
   const hasCurrent = current?.available === true && (current.coverage?.included ?? 0) > 0
   const totals = hasCurrent ? current?.totals : undefined
-  const coverage = current?.coverage ?? trend?.coverage
+  const coverage = state === 'partial_missing_current'
+    ? (trend?.coverage ?? current?.coverage)
+    : (current?.coverage ?? trend?.coverage)
   const included = coverage?.included ?? 0
   const total = coverage?.total ?? workloads.length
   const unavailableCount = coverage?.unavailable?.length ?? 0
@@ -366,12 +368,12 @@ export function getApplicationCostState(
     return 'data'
   }
   if (trendHasData) return 'partial_missing_current'
-  if (queryError) return 'load_error'
-  if (loading) return 'loading'
-
   const reason = current?.reason ?? trend?.reason
   if (reason === 'no_prometheus' || reason === 'query_error' || reason === 'access_denied' || reason === 'not_found')
     return reason
+  if (queryError) return 'load_error'
+  if (loading) return 'loading'
+
   return 'no_metrics'
 }
 

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

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { getWorkloadCostState } from './WorkloadCostTab'
 import { buildLineChart } from './chart'
-import type { OpenCostWorkloadDetailResponse, OpenCostWorkloadTrendResponse } from '../../api/client'
+import { ApiError, type OpenCostWorkloadDetailResponse, type OpenCostWorkloadTrendResponse } from '../../api/client'
 
 describe('getWorkloadCostState', () => {
   it('treats scaled-to-zero as a valid zero state', () => {
@@ -124,6 +124,20 @@ describe('getWorkloadCostState', () => {
 
     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')
   })
 })
 

web/src/components/cost/WorkloadCostTab.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { clsx } from 'clsx'
 import { AlertCircle, DollarSign, HelpCircle, Loader2, TrendingUp } from 'lucide-react'
 import {
+  ApiError,
   useOpenCostWorkload,
   useOpenCostWorkloadTrend,
   COST_DISCOVERY_GRACE_MS,
@@ -40,8 +41,8 @@ type WorkloadCostState =
 interface WorkloadCostQueryStatus {
   currentLoading?: boolean
   trendLoading?: boolean
-  currentError?: boolean
-  trendError?: boolean
+  currentError?: unknown
+  trendError?: unknown
 }
 
 interface WorkloadCostTabProps {
@@ -62,8 +63,8 @@ export function WorkloadCostTab({ kind, namespace, name }: WorkloadCostTabProps)
   const state = getWorkloadCostState(currentQuery.data, trendData, {
     currentLoading: currentQuery.isLoading,
     trendLoading,
-    currentError: currentQuery.isError,
-    trendError: trendQuery.isError,
+    currentError: currentQuery.error,
+    trendError: trendQuery.error,
   })
 
   useEffect(() => {
@@ -296,15 +297,26 @@ export function getWorkloadCostState(
     return 'data'
   }
   if (trendHasData) return 'partial_missing_current'
+  const reason =
+    current?.reason ??
+    trend?.reason ??
+    costUnavailableReasonFromError(queryStatus.currentError) ??
+    costUnavailableReasonFromError(queryStatus.trendError)
+  if (reason === 'no_prometheus' || reason === 'query_error' || reason === 'access_denied' || reason === 'not_found')
+    return reason
   if (queryError) return 'load_error'
   if (loading) return 'loading'
 
-  const reason = current?.reason ?? trend?.reason
-  if (reason === 'no_prometheus' || reason === 'query_error' || reason === 'access_denied' || reason === 'not_found')
-    return reason
   return 'no_metrics'
 }
 
+function costUnavailableReasonFromError(error: unknown): CostUnavailableReason | undefined {
+  if (!(error instanceof ApiError)) return undefined
+  if (error.status === 403) return 'access_denied'
+  if (error.status === 404) return 'not_found'
+  return undefined
+}
+
 function WorkloadCostDiscovering({ isFetching, onRetry }: { isFetching: boolean; onRetry: () => void }) {
   return (
     <div className="flex h-full min-h-[320px] items-center justify-center">