@skyhook-io/k8s-ui 1.7.12 → 1.7.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.12",
+  "version": "1.7.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/applications/AppChips.tsx

@@ -0,0 +1,109 @@
+import { Tooltip } from '../ui/Tooltip'
+import {
+  type AppRow,
+  type AppWorkloadClass,
+  CHIP,
+  CHIP_TONE,
+  CLASS_META,
+  overlayProvenance,
+} from '../../utils/applications'
+import { midTruncate } from '../../utils/format'
+import { ProvenanceTooltip, CategoryTooltip, VersionTooltip } from './AppTooltips'
+
+// The composed badges shared by ApplicationsList and ApplicationDetail. Both
+// surfaces must render the same chip with the same tooltip for the same fact —
+// defining them once is what keeps that true.
+
+export function ProvenanceBadge({ tier, appKey, confidence }: { tier?: number; appKey: string; confidence?: string }) {
+  if (!tier) {
+    return (
+      <Tooltip content="No GitOps, Helm, or app-label grouping signal — shown as the raw workload." delay={150}>
+        <span className={`${CHIP} ${CHIP_TONE.muted}`}>ungrouped</span>
+      </Tooltip>
+    )
+  }
+  const conf = confidence ?? 'low'
+  const tone = conf === 'high' ? CHIP_TONE.emerald : conf === 'medium' ? CHIP_TONE.neutral : CHIP_TONE.amber
+  return (
+    <Tooltip content={<ProvenanceTooltip tier={tier} appKey={appKey} confidence={conf} />} delay={150}>
+      <span className={`${CHIP} ${tone}`}>{overlayProvenance(tier)}</span>
+    </Tooltip>
+  )
+}
+
+export function ClassBadge({
+  workloadClass,
+  composition,
+}: {
+  workloadClass: AppWorkloadClass
+  /** Per-class counts (classCompositionOf) — lets a Mixed badge's tooltip say
+   *  what the mix actually contains. */
+  composition?: { cls: AppWorkloadClass; count: number }[]
+}) {
+  const meta = CLASS_META[workloadClass]
+  const tooltip =
+    workloadClass === 'mixed' && composition && composition.length > 0 ? (
+      <div className="space-y-1">
+        <div className="text-xs text-theme-text-primary">
+          Contains {composition.map((c) => `${c.count} ${CLASS_META[c.cls].label}${c.count > 1 ? 's' : ''}`).join(' · ')}
+        </div>
+        <div className="text-[11px] leading-snug text-theme-text-secondary">Class filters match any of the contained classes.</div>
+      </div>
+    ) : (
+      meta.tooltip
+    )
+  return (
+    <Tooltip content={tooltip} delay={150}>
+      <span className={`${CHIP} ${meta.pill}`}>{meta.label}</span>
+    </Tooltip>
+  )
+}
+
+/** The add-on / mixed classification chip; renders nothing for plain apps. */
+export function CategoryChip({ category, addonReason }: { category?: string; addonReason?: string }) {
+  if (category !== 'addon' && category !== 'mixed') return null
+  return (
+    <Tooltip content={<CategoryTooltip category={category} addonReason={addonReason} />} delay={150}>
+      <span className={`${CHIP} ${category === 'mixed' ? CHIP_TONE.amber : CHIP_TONE.muted}`}>{category === 'addon' ? 'add-on' : 'mixed'}</span>
+    </Tooltip>
+  )
+}
+
+/** The version display: appVersion when the workloads agree on one upstream
+ *  version, the single image tag, or "N versions" (amber only on real skew).
+ *  `cell` = table chip styling, `fact` = the detail context strip. */
+export function VersionInfo({ app, variant }: { app: AppRow; variant: 'cell' | 'fact' }) {
+  const versions = Array.from(new Set((app.versions || []).filter(Boolean)))
+  const workloads = app.workloads ?? []
+  const max = variant === 'fact' ? 32 : 24
+  const mono = variant === 'fact' ? 'font-mono' : 'font-mono text-xs text-theme-text-secondary'
+  if (app.appVersion) {
+    return (
+      <Tooltip content={<VersionTooltip workloads={workloads} />} delay={150}>
+        <span className={mono}>{midTruncate(app.appVersion, max)}</span>
+      </Tooltip>
+    )
+  }
+  if (versions.length === 0) {
+    return variant === 'cell' ? <span className="text-theme-text-tertiary">—</span> : null
+  }
+  if (versions.length === 1) {
+    const v = versions[0]
+    return v.length > max ? (
+      <Tooltip content={v} delay={150}>
+        <span className={mono}>{midTruncate(v, max)}</span>
+      </Tooltip>
+    ) : (
+      <span className={mono}>{v}</span>
+    )
+  }
+  return (
+    <Tooltip content={<VersionTooltip workloads={workloads} />} delay={150}>
+      {variant === 'cell' ? (
+        <span className={`${CHIP} ${app.versionSkew ? CHIP_TONE.amber : CHIP_TONE.neutral}`}>{versions.length} versions</span>
+      ) : (
+        <span className={mono}>{versions.length} versions</span>
+      )}
+    </Tooltip>
+  )
+}

package/src/components/applications/AppTooltips.tsx

@@ -0,0 +1,199 @@
+import { provenanceSource, HEALTH_META, type AppWorkload } from '../../utils/applications'
+import { midTruncate } from '../../utils/format'
+
+// Structured tooltip content for the application chips. Both render a short
+// title/phrase plus the technical signal (label key, resource name, selector)
+// in the shared inline-code chip — readable typography instead of a wall of text.
+
+export function ProvenanceTooltip({
+  tier,
+  appKey,
+  confidence,
+}: {
+  tier: number | undefined
+  appKey: string
+  confidence: string | undefined
+}) {
+  const src = provenanceSource(tier, appKey)
+  const conf = confidence ?? 'low'
+  return (
+    <div className="space-y-1">
+      <div className="text-xs text-theme-text-primary">
+        Grouped by {src.lead}
+        {src.code && (
+          <>
+            {' '}
+            <code className="inline-code">{src.code}</code>
+          </>
+        )}
+        {src.trail ? ` ${src.trail}` : ''}
+      </div>
+      {/* Only flag the case the user should act on — weak evidence. Medium/high
+          confidence is resolver detail, not actionable. */}
+      {conf === 'low' && (
+        <div className={`text-[10px] uppercase tracking-wide ${HEALTH_META.degraded.text}`}>low confidence</div>
+      )}
+    </div>
+  )
+}
+
+// "3 versions" on its own says little; the breakdown says which component runs
+// what — the right shape for umbrella apps that genuinely have no single version.
+export function VersionTooltip({ workloads }: { workloads: Pick<AppWorkload, 'name' | 'version'>[] }) {
+  const rows = workloads.filter((w) => w.version)
+  if (rows.length === 0) return null
+  return (
+    <div className="max-w-xs space-y-1">
+      {/* These are the running image tags — they can legitimately differ from
+          the headline appVersion (a label), so the title says what it shows. */}
+      <div className="text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">Image tag by workload</div>
+      <ul className="space-y-0.5">
+        {rows.map((w, i) => (
+          <li key={i} className="flex items-baseline justify-between gap-3">
+            <span className="truncate text-[11px] text-theme-text-secondary">{w.name}</span>
+            <code className="inline-code text-[10px]">{w.version}</code>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export function CategoryTooltip({
+  category,
+  addonReason,
+}: {
+  category: string
+  addonReason?: string
+}) {
+  const mixed = category === 'mixed'
+  const title = mixed ? 'Mixed app / add-on' : 'Platform add-on'
+  const lead = mixed
+    ? 'Has both application and add-on evidence. Kept visible — classification is informational, not identity.'
+    : 'Classified as a platform add-on, shown here for completeness.'
+  // addonReason is a "; "-separated list of signals, e.g.
+  //   "app.kubernetes.io/name=argocd-redis (argocd); chart=argo-cd".
+  // Render each as its own line; the selector goes in code, the trailing
+  // "(namespace)" hint is split out as muted text.
+  const items = (addonReason ?? '')
+    .split(/;\s*/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+  return (
+    <div className="max-w-xs space-y-1.5">
+      <div className="text-xs font-semibold text-theme-text-primary">{title}</div>
+      <div className="text-[11px] leading-snug text-theme-text-secondary">{lead}</div>
+      {items.length > 0 && (
+        <div className="space-y-1 border-t border-theme-border pt-1.5">
+          <div className="text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">Evidence</div>
+          <ul className="max-h-52 space-y-1 overflow-y-auto">
+            {items.map((it, i) => {
+              const parsed = splitTrailingParen(it)
+              const selector = parsed?.lead ?? it
+              const where = parsed?.paren
+              return (
+                <li key={i} className="flex items-baseline gap-1.5">
+                  <code className="inline-code text-[10px]">{selector}</code>
+                  {where && <span className="text-[10px] text-theme-text-tertiary">{where}</span>}
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// AppIdentityTooltip — why these instances are grouped. One line per distinct
+// evidence in the ProvenanceTooltip idiom (signals as inline-code, long repo
+// refs mid-truncated), plus a small flag when the grouping is heuristic-only.
+// No member list — the env pills next to this chip already show the instances.
+export function AppIdentityTooltip({
+  members,
+}: {
+  identityKey?: string
+  members: { name: string; env: string; confidence: string; evidence: string }[]
+}) {
+  const evidences = Array.from(new Set(members.map((m) => m.evidence).filter(Boolean)))
+  const heuristicOnly = members.every((m) => m.confidence !== 'high')
+  return (
+    <div className="max-w-xs space-y-1">
+      {evidences.map((e, i) => (
+        <div key={i} className="text-xs text-theme-text-primary">
+          <EvidenceLine evidence={e} />
+        </div>
+      ))}
+      {heuristicOnly && (
+        <div className={`text-[10px] uppercase tracking-wide ${HEALTH_META.degraded.text}`}>heuristic · medium confidence</div>
+      )}
+    </div>
+  )
+}
+
+// Renders the resolver's evidence string with its signals as inline-code.
+// Known shapes from applications_identity.go; anything else passes through raw.
+function EvidenceLine({ evidence }: { evidence: string }) {
+  const nameStem = quotedEvidenceValue(evidence, 'name stem "', '" + shared image repo ')
+  if (nameStem) {
+    return (
+      <>
+        Same name <code className="inline-code">{nameStem.value}</code> + image <code className="inline-code">{midTruncate(nameStem.rest, 32)}</code>
+      </>
+    )
+  }
+  const envLabel = quotedEvidenceValue(evidence, 'environment label "', '" + name/repo evidence')
+  if (envLabel) {
+    return (
+      <>
+        Environment label <code className="inline-code">{envLabel.value}</code> + name/repo evidence
+      </>
+    )
+  }
+  const argo = splitTrailingParen(evidence)
+  if (argo && argo.lead.startsWith('Argo CD source path ') && argo.paren.startsWith('env overlay ')) {
+    return (
+      <>
+        Argo CD source path <code className="inline-code">{argo.lead.slice('Argo CD source path '.length)}</code>
+      </>
+    )
+  }
+  return <>{evidence}</>
+}
+
+function splitTrailingParen(value: string): { lead: string; paren: string } | null {
+  if (!value.endsWith(')')) return null
+  const open = value.lastIndexOf(' (')
+  if (open < 0) return null
+  return { lead: value.slice(0, open), paren: value.slice(open + 2, -1) }
+}
+
+function quotedEvidenceValue(value: string, prefix: string, separator: string): { value: string; rest: string } | null {
+  if (!value.startsWith(prefix)) return null
+  const start = prefix.length
+  const sep = value.indexOf(separator, start)
+  if (sep < 0) return null
+  return { value: value.slice(start, sep), rest: value.slice(sep + separator.length) }
+}
+
+// EnvHint — how environments are determined + how to set one explicitly.
+// Rendered from the Environment facet's info icon and the unlabeled env
+// cells, so the answer lives exactly where the question arises.
+export function EnvHint({ unlabeled }: { unlabeled?: boolean }) {
+  return (
+    <div className="max-w-xs space-y-1">
+      {unlabeled ? (
+        <div className="text-xs text-theme-text-primary">No environment detected for this app.</div>
+      ) : (
+        <div className="text-xs text-theme-text-primary">Detected from labels, GitOps overlay paths, or name patterns (shown <span className="italic">~inferred</span>).</div>
+      )}
+      <div className="text-[11px] leading-snug text-theme-text-secondary">
+        Set it explicitly — label the namespace or workload:
+      </div>
+      <code className="inline-code">environment=staging</code>
+      <div className="text-[10px] text-theme-text-tertiary">
+        also recognized: <code className="inline-code">app.kubernetes.io/environment</code> · <code className="inline-code">env</code> · <code className="inline-code">tags.datadoghq.com/env</code>
+      </div>
+    </div>
+  )
+}