@skyhook-io/radar-app 1.8.6 → 1.8.8

package/src/components/portforward/PortForwardManager.tsx

@@ -644,7 +644,7 @@ export function PortForwardPanel() {
       onMouseEnter={onPanelHoverEnter}
       onMouseLeave={onPanelHoverLeave}
       className={clsx(
-        'fixed z-[51] w-80',
+        'fixed z-[51] w-[26rem] max-w-[calc(100vw-2rem)]',
         'transition-opacity duration-150 ease-out',
         isPanelOpen
           ? 'opacity-100 pointer-events-auto'
@@ -726,14 +726,16 @@ export function PortForwardPanel() {
           </div>
         ) : (
           <div className="divide-y divide-theme-border">
-            {activeSessions.map((session) => (
-              <div
-                key={session.id}
-                className={clsx(
-                  'p-3 space-y-1',
-                  session.status === 'error' ? 'bg-red-500/10' : 'hover:bg-theme-elevated'
-                )}
-              >
+            {activeSessions.map((session) => {
+              const resourceName = session.serviceName || session.podName
+              return (
+                <div
+                  key={session.id}
+                  className={clsx(
+                    'p-3 space-y-1',
+                    session.status === 'error' ? 'bg-red-500/10' : 'hover:bg-theme-elevated'
+                  )}
+                >
                 {/* Row 1: status dot + name | stop button */}
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex items-start gap-2 min-w-0 flex-1">
@@ -743,9 +745,11 @@ export function PortForwardPanel() {
                         session.status === 'running' ? 'bg-green-500' : 'bg-red-500'
                       )}
                     />
-                    <span className="text-sm text-theme-text-primary font-medium break-all line-clamp-2">
-                      {session.serviceName || session.podName}
-                    </span>
+                    <Tooltip content={resourceName} delay={300} position="bottom" disabled={!isPanelOpen} wrapperClassName="min-w-0 flex-1">
+                      <span className="block min-w-0 truncate text-sm font-medium text-theme-text-primary">
+                        {resourceName}
+                      </span>
+                    </Tooltip>
                     {session.status === 'error' && (
                       <span className={clsx('badge-sm shrink-0', SEVERITY_BADGE.error)}>Failed</span>
                     )}
@@ -916,8 +920,9 @@ export function PortForwardPanel() {
                     </div>
                   </div>
                 )}
-              </div>
-            ))}
+                </div>
+              )
+            })}
           </div>
         )}
       </div>

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { BarChart3, ChevronDown, ChevronRight, Loader2, Wifi, WifiOff } from 'lucide-react'
+import { Loader2, Wifi, WifiOff } from 'lucide-react'
 import {
   AreaChart,
   SeriesLegend,
@@ -11,11 +11,9 @@ import {
   usePrometheusStatus,
   usePrometheusConnect,
   usePrometheusResourceMetrics,
-  usePrometheusRightsizing,
   useAutoPromConnect,
   type PrometheusMetricCategory,
   type PrometheusTimeRange,
-  type RightsizingTone,
 } from '../../api/client'
 import {
   MetricsSummary,
@@ -57,7 +55,6 @@ export function PrometheusChartsGrid({
   const showRestartLane = isSupported && kind !== 'Node'
 
   const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
-  const [diskExpanded, setDiskExpanded] = useState(false)
 
   const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
 
@@ -112,7 +109,6 @@ export function PrometheusChartsGrid({
   const findCategory = (key: PrometheusMetricCategory): CategoryDef | undefined =>
     categories.find(c => c.key === key)
 
-  // Disk I/O is collapsed by default — niche metric.
   const primaryCats: { def: CategoryDef; refLines?: ReferenceLine[] }[] = []
   const cpu = findCategory('cpu')
   if (cpu) primaryCats.push({ def: cpu, refLines: cpuRefLines })
@@ -125,19 +121,16 @@ export function PrometheusChartsGrid({
     if (tx) primaryCats.push({ def: tx })
   }
   const disk = findCategory('filesystem')
+  const chartPanels = disk ? [...primaryCats, { def: disk }] : primaryCats
 
   return (
     <div className="flex flex-col h-full overflow-auto">
-      <div className="shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-theme-border bg-theme-surface/50">
-        <div className="flex items-center gap-2 text-sm font-medium text-theme-text-secondary">
-          <BarChart3 className="w-4 h-4 text-theme-text-tertiary" />
-          Metrics
-          <WorkloadHealthBadge kind={kind} namespace={namespace} name={name} />
-        </div>
+      <div className="flex shrink-0 justify-end px-4 pt-3">
         <select
+          aria-label="Metrics time range"
           value={timeRange}
           onChange={e => setTimeRange(e.target.value as PrometheusTimeRange)}
-          className="px-2 py-1 text-xs rounded-md bg-theme-elevated border border-theme-border text-theme-text-secondary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+          className="rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary shadow-theme-sm focus:outline-none focus:ring-1 focus:ring-accent/50"
         >
           {TIME_RANGES.map(tr => (
             <option key={tr.value} value={tr.value}>{tr.label}</option>
@@ -154,7 +147,7 @@ export function PrometheusChartsGrid({
       )}
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4">
-        {primaryCats.map(({ def, refLines }) => (
+        {chartPanels.map(({ def, refLines }) => (
           <MetricsPanel
             key={def.key}
             category={def}
@@ -166,30 +159,6 @@ export function PrometheusChartsGrid({
           />
         ))}
       </div>
-
-      {disk && (
-        <div className="px-4 pb-4">
-          <button
-            type="button"
-            onClick={() => setDiskExpanded(v => !v)}
-            className="flex items-center gap-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary py-1"
-          >
-            {diskExpanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
-            Disk I/O
-          </button>
-          {diskExpanded && (
-            <div className="mt-2">
-              <MetricsPanel
-                category={disk}
-                kind={kind}
-                namespace={namespace}
-                name={name}
-                timeRange={timeRange}
-              />
-            </div>
-          )}
-        </div>
-      )}
     </div>
   )
 }
@@ -269,49 +238,6 @@ function SaturationChip({ ratio, against }: { ratio: number; against: 'limit' |
   return <span className={`badge badge-sm ${SEVERITY_BADGE[tone]}`}>{label}</span>
 }
 
-// Severity ordering for rightsizing tones. Aligned with `Tone` constants in
-// `internal/prometheus/rightsizing.go` — adding a new tone there triggers a
-// TypeScript exhaustiveness error on the Record key set here.
-const TONE_RANK: Record<RightsizingTone, number> = {
-  ok: 0,
-  info: 1,
-  warning: 2,
-  alert: 3,
-  critical: 4,
-}
-
-function WorkloadHealthBadge({ kind, namespace, name }: { kind: string; namespace: string; name: string }) {
-  const supported = kind === 'Deployment' || kind === 'StatefulSet' || kind === 'DaemonSet'
-  const { data, error } = usePrometheusRightsizing(kind, namespace, name, supported)
-  if (!supported) return null
-  // Surface a neutral "Health unknown" pill when the rightsizing endpoint
-  // errors — otherwise an actually-throttled or OOM-risk workload would
-  // silently render as fine while we have no signal to display.
-  if (error && !data) {
-    const msg = error instanceof Error ? error.message : String(error)
-    return (
-      <Tooltip content={`Health check failed: ${msg}`}>
-      <span className={`badge badge-sm ${SEVERITY_BADGE.neutral}`}>Health unknown</span>
-      </Tooltip>
-    )
-  }
-  if (!data?.sampleAvailable || data.rows.length === 0) return null
-
-  const worst = data.rows.reduce<RightsizingTone>(
-    (acc, r) => (TONE_RANK[r.tone] > TONE_RANK[acc] ? r.tone : acc),
-    'ok',
-  )
-  // Skip the chip for the steady-state tones to avoid badge-blindness — we
-  // only want to draw the eye when there's something to address.
-  if (worst === 'ok' || worst === 'info') return null
-
-  const { label, severity }: { label: string; severity: Severity } =
-    worst === 'critical' ? { label: 'OOM risk', severity: 'error' } :
-    worst === 'alert' ? { label: 'CPU throttling', severity: 'alert' } :
-    /* warning */ { label: 'Needs review', severity: 'warning' }
-  return <span className={`badge badge-sm ${SEVERITY_BADGE[severity]}`}>{label}</span>
-}
-
 function PanelLoading() {
   return (
     <div className="flex items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs">

package/src/components/resource/RightsizingStrip.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest'
+import type { RightsizingRow } from '../../api/client'
+import {
+  getRightsizingExplanation,
+  getRightsizingPresentation,
+  RIGHTSIZING_METHODOLOGY,
+  RIGHTSIZING_DOCS_URL,
+  RIGHTSIZING_SUMMARY,
+} from './RightsizingStrip'
+
+const row = (overrides: Partial<RightsizingRow> = {}): RightsizingRow => ({
+  container: 'server',
+  resource: 'cpu',
+  fit: 'balanced',
+  confidence: 'high',
+  sampleCount: 2016,
+  expectedSamples: 2016,
+  coverage: 1,
+  hpaManaged: false,
+  hpaEvidenceAvailable: true,
+  oomEvidenceAvailable: true,
+  throttleAvailable: true,
+  ...overrides,
+})
+
+describe('rightsizing presentation', () => {
+  it('keeps fit, confidence, and runtime risk as separate concepts', () => {
+    expect(getRightsizingPresentation('oversized')).toEqual({
+      label: 'Oversized',
+      severity: 'info',
+    })
+    expect(getRightsizingPresentation('under_requested')).toEqual({
+      label: 'Under-requested',
+      severity: 'warning',
+    })
+    expect(getRightsizingPresentation('insufficient_history')).toEqual({
+      label: 'Insufficient history',
+      severity: 'neutral',
+    })
+  })
+
+  it('labels query failures independently from insufficient history', () => {
+    expect(getRightsizingPresentation('insufficient_history', 'usage query failed')).toEqual({
+      label: 'Query failed',
+      severity: 'error',
+    })
+  })
+
+  it('explains why recommendations are withheld without inventing a zero-risk result', () => {
+    expect(getRightsizingExplanation(row({ recommendationReason: 'hpa_managed' }))).toContain(
+      'HPA manages cpu',
+    )
+    expect(
+      getRightsizingExplanation(row({ resource: 'memory', recommendationReason: 'oom_evidence' })),
+    ).toContain('OOM evidence')
+    expect(
+      getRightsizingExplanation(row({ recommendationReason: 'hpa_evidence_unavailable' })),
+    ).toContain('could not verify HPA')
+    expect(
+      getRightsizingExplanation(
+        row({
+          resource: 'memory',
+          recommendationReason: 'oom_evidence_unavailable',
+        }),
+      ),
+    ).toContain('could not verify recent OOM')
+    expect(getRightsizingExplanation(row({ throttleAvailable: false }))).toContain(
+      'throttling metrics are unavailable',
+    )
+  })
+
+  it('separates the demand target from a conservative reduction step', () => {
+    const explanation = getRightsizingExplanation(
+      row({
+        fit: 'oversized',
+        currentRequest: '1',
+        recommendedRequest: '500m',
+        calculatedRequest: '10m',
+        reductionLimited: true,
+        bursty: true,
+        peak: { name: 'P99', value: 0.2, formatted: '200m' },
+      }),
+    )
+    expect(explanation).toContain('Demand-based target: 10m')
+    expect(explanation).toContain('conservative next step')
+    expect(explanation).toContain('CPU P99 reached 200m')
+  })
+
+  it('does not revive the misleading efficiency vocabulary', () => {
+    const copy = [
+      getRightsizingPresentation('balanced').label,
+      getRightsizingPresentation('oversized').label,
+      getRightsizingExplanation(row({ recommendationReason: 'request_within_fit_range' })),
+    ]
+      .join(' ')
+      .toLowerCase()
+    expect(copy).not.toContain('efficien')
+    expect(copy).not.toContain('waste')
+  })
+
+  it('sets the workload-level scope and methodology without promising savings or changes', () => {
+    expect(RIGHTSIZING_SUMMARY).toContain('this workload')
+    expect(RIGHTSIZING_SUMMARY).toContain('not a savings estimate or automatic change')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('CPU P95 and memory maximum')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('Reductions are staged')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('Radar does not change requests')
+    expect(RIGHTSIZING_DOCS_URL).toContain('/features/rightsizing')
+  })
+})