@flanksource/clicky-ui 0.3.1 → 0.3.3

package/dist/data/TimeseriesGauge.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useQueries } from "@tanstack/react-query";
 import { useState, useMemo } from "react";
 import { cn } from "../lib/utils.js";
@@ -6,6 +6,8 @@ import { formatUnit } from "../lib/format.js";
 import { Modal } from "../overlay/Modal.js";
 import { Icon } from "./Icon.js";
 import { TimeseriesPanel } from "./TimeseriesPanel.js";
+import { GaugeHoverCard } from "./GaugeHoverCard.js";
+import { seriesStats } from "./gauge-stats.js";
 import { UiFullscreen } from "../icons/components/UiFullscreen.js";
 const defaultFetcher = async (url) => {
   const res = await fetch(url);
@@ -20,6 +22,38 @@ function toneClass(pct, [warn, danger]) {
   if (pct >= warn) return "text-amber-500";
   return "text-emerald-500";
 }
+function toneBgClass(pct, [warn, danger]) {
+  if (pct >= danger) return "bg-red-500";
+  if (pct >= warn) return "bg-amber-500";
+  return "bg-emerald-500";
+}
+function GaugeArc({ pct, tone, strokeWidth }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 50", className: "h-full w-full overflow-visible", children: [
+    /* @__PURE__ */ jsx("path", { d: GAUGE_PATH, fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", className: "text-muted" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: GAUGE_PATH,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        className: tone,
+        strokeDasharray: GAUGE_ARC,
+        strokeDashoffset: GAUGE_ARC * (1 - pct / 100)
+      }
+    )
+  ] });
+}
+function GaugeBar({ pct, toneBg, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("relative block overflow-hidden rounded-full bg-muted", className), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("absolute inset-y-0 left-0 rounded-full transition-all duration-300", toneBg),
+      style: { width: `${pct}%` }
+    }
+  ) });
+}
 function latestValue(resp) {
   var _a;
   const points = resp == null ? void 0 : resp.points;
@@ -45,11 +79,13 @@ function TimeseriesGauge({
   thresholds = [75, 90],
   centerDisplay = "value",
   variant = "default",
+  shape = "radial",
   showLabel = true,
+  hoverCard = true,
   fetcher = defaultFetcher,
   className
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const [expanded, setExpanded] = useState(false);
   const maxIsSeries = typeof max === "object";
   const maxSeries = maxIsSeries ? max : void 0;
@@ -85,6 +121,7 @@ function TimeseriesGauge({
   const bounded = hasValue && limit !== void 0 && limit > 0;
   const pct = bounded ? Math.min(100, Math.round(usage / limit * 100)) : 0;
   const tone = toneClass(pct, thresholds);
+  const toneBg = toneBgClass(pct, thresholds);
   const readout = centerDisplay === "percent" ? bounded ? `${pct}%` : hasValue ? "n/a" : "—" : hasValue ? formatUnit(usage, unit) : "—";
   const titleText = `${title}: ${readout}`;
   const canExpand = expandable && variant === "default";
@@ -94,74 +131,63 @@ function TimeseriesGauge({
     if (maxSeries) s.push({ id: maxSeries.id, label: "max", ...maxSeries.transform ? { transform: maxSeries.transform } : {} });
     return s;
   }, [value.id, value.transform, maxSeries]);
+  const stats = seriesStats((_d = (_c = results[0]) == null ? void 0 : _c.data) == null ? void 0 : _d.points, value.transform);
+  const fmt = (n) => formatUnit(n, unit);
+  const hoverRows = hasValue ? [
+    { label: "Current", value: fmt(usage), ...bounded ? { tone } : {} },
+    ...stats ? [
+      { label: "Min", value: fmt(stats.min) },
+      { label: "Max", value: fmt(stats.max) },
+      { label: "Avg", value: fmt(stats.avg) }
+    ] : [],
+    ...limit !== void 0 ? [{ label: "Capacity", value: fmt(limit) }] : []
+  ] : [];
+  const useHover = hoverCard && hoverRows.length > 0;
+  const footer = `over last ${range}`;
   if (variant === "cell") {
-    return /* @__PURE__ */ jsxs(
+    const cell = /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
           "inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs",
           className
         ),
-        title: titleText,
-        "aria-label": !showLabel ? titleText : void 0,
+        ...useHover ? {} : { title: titleText },
+        "aria-label": useHover || !showLabel ? titleText : void 0,
+        "data-shape": shape,
         children: [
           icon ? /* @__PURE__ */ jsx(GaugeIcon, { icon }) : null,
           showLabel ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: title }) : null,
-          /* @__PURE__ */ jsx("span", { className: "relative h-4 w-8 shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 50", className: "h-full w-full overflow-visible", children: [
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: GAUGE_PATH,
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 10,
-                strokeLinecap: "round",
-                className: "text-muted"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: GAUGE_PATH,
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 10,
-                strokeLinecap: "round",
-                className: tone,
-                strokeDasharray: GAUGE_ARC,
-                strokeDashoffset: GAUGE_ARC * (1 - pct / 100)
-              }
-            )
-          ] }) }),
+          shape === "linear" ? /* @__PURE__ */ jsx(GaugeBar, { pct, toneBg, className: "h-1.5 w-12 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "relative h-4 w-8 shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GaugeArc, { pct, tone, strokeWidth: 10 }) }),
           /* @__PURE__ */ jsx("span", { className: cn("shrink-0 font-semibold tabular-nums", readoutTone), children: readout })
         ]
       }
     );
+    return useHover ? /* @__PURE__ */ jsx(GaugeHoverCard, { title, rows: hoverRows, footer, trigger: cell }) : cell;
   }
-  return /* @__PURE__ */ jsxs(
+  const body = /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn("flex flex-col items-center gap-1", className),
-      title: !showLabel ? titleText : void 0,
-      "aria-label": !showLabel ? titleText : void 0,
+      ...useHover ? {} : { title: !showLabel ? titleText : void 0 },
+      "aria-label": useHover || !showLabel ? titleText : void 0,
+      "data-shape": shape,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-20", children: [
-          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 50", className: "h-full w-full overflow-visible", children: [
-            /* @__PURE__ */ jsx("path", { d: GAUGE_PATH, fill: "none", stroke: "currentColor", strokeWidth: 9, strokeLinecap: "round", className: "text-muted" }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: GAUGE_PATH,
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 9,
-                strokeLinecap: "round",
-                className: tone,
-                strokeDasharray: GAUGE_ARC,
-                strokeDashoffset: GAUGE_ARC * (1 - pct / 100)
-              }
-            )
-          ] }),
+        shape === "linear" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+          /* @__PURE__ */ jsx(GaugeBar, { pct, toneBg, className: "h-2 w-full" }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-semibold text-foreground", children: readout }),
+          canExpand && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Expand chart",
+              onClick: () => setExpanded(true),
+              className: "shrink-0 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, width: 12, height: 12 })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-20", children: [
+          /* @__PURE__ */ jsx(GaugeArc, { pct, tone, strokeWidth: 9 }),
           /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 text-center text-sm font-semibold text-foreground", children: readout }),
           canExpand && /* @__PURE__ */ jsx(
             "button",
@@ -177,24 +203,36 @@ function TimeseriesGauge({
         icon || showLabel ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
           icon ? /* @__PURE__ */ jsx(GaugeIcon, { icon }) : null,
           showLabel ? /* @__PURE__ */ jsx("span", { children: title }) : null
-        ] }) : null,
-        canExpand && /* @__PURE__ */ jsx(Modal, { open: expanded, onClose: () => setExpanded(false), title, size: "xl", children: /* @__PURE__ */ jsx(
-          TimeseriesPanel,
-          {
-            title,
-            ...icon ? { icon } : {},
-            ...unit ? { unit } : {},
-            baseUrl,
-            series: chartSeries,
-            range,
-            refreshMs,
-            expandable: false,
-            fetcher
-          }
-        ) })
+        ] }) : null
       ]
     }
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    useHover ? /* @__PURE__ */ jsx(
+      GaugeHoverCard,
+      {
+        title,
+        rows: hoverRows,
+        footer,
+        trigger: body,
+        className: "w-full justify-center"
+      }
+    ) : body,
+    canExpand && /* @__PURE__ */ jsx(Modal, { open: expanded, onClose: () => setExpanded(false), title, size: "xl", children: /* @__PURE__ */ jsx(
+      TimeseriesPanel,
+      {
+        title,
+        ...icon ? { icon } : {},
+        ...unit ? { unit } : {},
+        baseUrl,
+        series: chartSeries,
+        range,
+        refreshMs,
+        expandable: false,
+        fetcher
+      }
+    ) })
+  ] });
 }
 export {
   TimeseriesGauge

package/dist/data/TimeseriesGauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeseriesGauge.js","sources":["../../src/data/TimeseriesGauge.tsx"],"sourcesContent":["import { useQueries } from \"@tanstack/react-query\";\nimport { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { formatUnit } from \"../lib/format\";\nimport { Modal } from \"../overlay/Modal\";\nimport { UiFullscreen } from \"../icons\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport {\n  TimeseriesPanel,\n  type TimeseriesResponse,\n  type TimeseriesSeries,\n} from \"./TimeseriesPanel\";\n\n/** A metric series whose latest value drives the gauge fill or its maximum. */\nexport interface GaugeSeries {\n  /** Metric id appended to the gauge's baseUrl, e.g. \"k8s.statefulset.cycle.cpu.usage\". */\n  id: string;\n  /** Maps the latest value before display (e.g. unit scaling). Identity when omitted. */\n  transform?: (value: number) => number;\n}\n\nexport type TimeseriesGaugeVariant = \"default\" | \"cell\";\n\nexport interface TimeseriesGaugeProps {\n  /** Common prefix; the value/max requests are `baseUrl + id`. */\n  baseUrl?: string;\n  /** The metric whose latest value fills the gauge. */\n  value: GaugeSeries;\n  /**\n   * The gauge maximum. Either a metric series (its latest value, e.g. a `.limit`\n   * metric) or a fixed number. When omitted, or when the resolved max is 0, the\n   * gauge shows the raw value with no fill (an unbounded reading).\n   */\n  max?: GaugeSeries | number;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\n  /** Grafana-style unit key for the readout (e.g. \"bytes\", \"percent\", \"short\", \"ms\"). */\n  unit?: string;\n  /** Look-back window for the expand chart, passed as ?since=; defaults to \"1h\". */\n  range?: string;\n  /** Poll interval in ms; defaults to 5000. Pass 0 to disable polling. */\n  refreshMs?: number;\n  /** Show an expand button that opens the value/max time-series chart in a modal. Default true. */\n  expandable?: boolean;\n  /**\n   * Utilisation thresholds (percent of max) at which the arc turns amber then\n   * red. Defaults to [75, 90].\n   */\n  thresholds?: [warning: number, danger: number];\n  /**\n   * What to print in the centre: the formatted value (default) or the\n   * utilisation percentage of max (e.g. CPU usage out of its millicore limit).\n   */\n  centerDisplay?: \"value\" | \"percent\";\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: TimeseriesGaugeVariant;\n  /** Show the title text. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  /** Override the default fetch (e.g. to route through an app's API client). */\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst defaultFetcher = async (url: string): Promise<TimeseriesResponse> => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);\n  return res.json();\n};\n\n// Half-gauge SVG geometry: a 100×50 viewBox semicircle (radius 40, centre 50,50)\n// swept 180°. The arc length is π·r; stroke-dashoffset reveals value/max of it.\nconst GAUGE_RADIUS = 40;\nconst GAUGE_ARC = Math.PI * GAUGE_RADIUS;\nconst GAUGE_PATH = `M 10 50 A ${GAUGE_RADIUS} ${GAUGE_RADIUS} 0 0 1 90 50`;\n\nfunction toneClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"text-red-500\";\n  if (pct >= warn) return \"text-amber-500\";\n  return \"text-emerald-500\";\n}\n\nfunction latestValue(resp: TimeseriesResponse | undefined): number | undefined {\n  const points = resp?.points;\n  if (!points || points.length === 0) return undefined;\n  return points[points.length - 1]?.value;\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n}\n\n/**\n * TimeseriesGauge renders a half (180°) radial gauge whose fill is the latest\n * value of a metric over its maximum (a `.limit`-style metric or a fixed number),\n * both read live from the timeseries store. The centre shows the utilisation\n * percentage, with the value/max caption below; the arc colour crosses warning\n * and danger thresholds. An expand button opens the full value/max time-series\n * chart in a modal (a `TimeseriesPanel`), so the gauge gives the at-a-glance\n * reading and the chart the trend.\n */\nexport function TimeseriesGauge({\n  baseUrl = \"\",\n  value,\n  max,\n  title,\n  icon,\n  unit,\n  range = \"1h\",\n  refreshMs = 5000,\n  expandable = true,\n  thresholds = [75, 90],\n  centerDisplay = \"value\",\n  variant = \"default\",\n  showLabel = true,\n  fetcher = defaultFetcher,\n  className,\n}: TimeseriesGaugeProps) {\n  const [expanded, setExpanded] = useState(false);\n\n  const maxIsSeries = typeof max === \"object\";\n  const maxSeries = maxIsSeries ? max : undefined;\n  const ids = useMemo(() => {\n    const list = [value.id];\n    if (maxSeries) list.push(maxSeries.id);\n    return list;\n  }, [value.id, maxSeries]);\n\n  const results = useQueries({\n    queries: ids.map((id) => {\n      const u = new URL(baseUrl + id, window.location.origin);\n      if (range) u.searchParams.set(\"since\", range);\n      const requestUrl = u.pathname + u.search;\n      return {\n        queryKey: [\"timeseries\", requestUrl],\n        queryFn: () => fetcher(requestUrl),\n        refetchInterval: refreshMs > 0 ? refreshMs : false,\n        staleTime: 0,\n        retry: 0,\n      };\n    }),\n  });\n\n  const rawValue = latestValue(results[0]?.data);\n  const hasValue = rawValue !== undefined;\n  const usage = value.transform ? value.transform(rawValue ?? 0) : (rawValue ?? 0);\n\n  let limit: number | undefined;\n  if (typeof max === \"number\") {\n    limit = max;\n  } else if (maxSeries) {\n    const rawMax = latestValue(results[1]?.data);\n    limit = rawMax === undefined ? undefined : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;\n  }\n\n  const bounded = hasValue && limit !== undefined && limit > 0;\n  const pct = bounded ? Math.min(100, Math.round((usage / (limit as number)) * 100)) : 0;\n  const tone = toneClass(pct, thresholds);\n  const readout =\n    centerDisplay === \"percent\"\n      ? bounded\n        ? `${pct}%`\n        : hasValue\n          ? \"n/a\"\n          : \"—\"\n      : hasValue\n        ? formatUnit(usage, unit)\n        : \"—\";\n  const titleText = `${title}: ${readout}`;\n  const canExpand = expandable && variant === \"default\";\n  const readoutTone = bounded ? tone : \"text-foreground\";\n\n  const chartSeries: TimeseriesSeries[] = useMemo(() => {\n    const s: TimeseriesSeries[] = [{ id: value.id, label: \"value\", ...(value.transform ? { transform: value.transform } : {}) }];\n    if (maxSeries) s.push({ id: maxSeries.id, label: \"max\", ...(maxSeries.transform ? { transform: maxSeries.transform } : {}) });\n    return s;\n  }, [value.id, value.transform, maxSeries]);\n\n  if (variant === \"cell\") {\n    return (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        title={titleText}\n        aria-label={!showLabel ? titleText : undefined}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate text-muted-foreground\">{title}</span> : null}\n        <span className=\"relative h-4 w-8 shrink-0\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 100 50\" className=\"h-full w-full overflow-visible\">\n            <path\n              d={GAUGE_PATH}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={10}\n              strokeLinecap=\"round\"\n              className=\"text-muted\"\n            />\n            <path\n              d={GAUGE_PATH}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={10}\n              strokeLinecap=\"round\"\n              className={tone}\n              strokeDasharray={GAUGE_ARC}\n              strokeDashoffset={GAUGE_ARC * (1 - pct / 100)}\n            />\n          </svg>\n        </span>\n        <span className={cn(\"shrink-0 font-semibold tabular-nums\", readoutTone)}>\n          {readout}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      title={!showLabel ? titleText : undefined}\n      aria-label={!showLabel ? titleText : undefined}\n    >\n      <div className=\"relative h-10 w-20\">\n        <svg viewBox=\"0 0 100 50\" className=\"h-full w-full overflow-visible\">\n          <path d={GAUGE_PATH} fill=\"none\" stroke=\"currentColor\" strokeWidth={9} strokeLinecap=\"round\" className=\"text-muted\" />\n          <path\n            d={GAUGE_PATH}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={9}\n            strokeLinecap=\"round\"\n            className={tone}\n            strokeDasharray={GAUGE_ARC}\n            strokeDashoffset={GAUGE_ARC * (1 - pct / 100)}\n          />\n        </svg>\n        <span className=\"absolute inset-x-0 bottom-0 text-center text-sm font-semibold text-foreground\">\n          {readout}\n        </span>\n        {canExpand && (\n          <button\n            type=\"button\"\n            aria-label=\"Expand chart\"\n            onClick={() => setExpanded(true)}\n            className=\"absolute right-0 top-0 text-muted-foreground hover:text-foreground\"\n          >\n            <Icon icon={UiFullscreen} width={12} height={12} />\n          </button>\n        )}\n      </div>\n      {icon || showLabel ? (\n        <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          {showLabel ? <span>{title}</span> : null}\n        </div>\n      ) : null}\n\n      {canExpand && (\n        <Modal open={expanded} onClose={() => setExpanded(false)} title={title} size=\"xl\">\n          <TimeseriesPanel\n            title={title}\n            {...(icon ? { icon } : {})}\n            {...(unit ? { unit } : {})}\n            baseUrl={baseUrl}\n            series={chartSeries}\n            range={range}\n            refreshMs={refreshMs}\n            expandable={false}\n            fetcher={fetcher}\n          />\n        </Modal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeseriesGauge.js","sources":["../../src/data/TimeseriesGauge.tsx"],"sourcesContent":["import { useQueries } from \"@tanstack/react-query\";\nimport { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { formatUnit } from \"../lib/format\";\nimport { Modal } from \"../overlay/Modal\";\nimport { UiFullscreen } from \"../icons\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport {\n  TimeseriesPanel,\n  type TimeseriesResponse,\n  type TimeseriesSeries,\n} from \"./TimeseriesPanel\";\nimport { GaugeHoverCard, type GaugeHoverRow } from \"./GaugeHoverCard\";\nimport { seriesStats } from \"./gauge-stats\";\n\n/** A metric series whose latest value drives the gauge fill or its maximum. */\nexport interface GaugeSeries {\n  /** Metric id appended to the gauge's baseUrl, e.g. \"k8s.statefulset.cycle.cpu.usage\". */\n  id: string;\n  /** Maps the latest value before display (e.g. unit scaling). Identity when omitted. */\n  transform?: (value: number) => number;\n}\n\nexport type TimeseriesGaugeVariant = \"default\" | \"cell\";\n/** Gauge fill geometry: a half-circle arc (default) or a horizontal progress bar. */\nexport type TimeseriesGaugeShape = \"radial\" | \"linear\";\n\nexport interface TimeseriesGaugeProps {\n  /** Common prefix; the value/max requests are `baseUrl + id`. */\n  baseUrl?: string;\n  /** The metric whose latest value fills the gauge. */\n  value: GaugeSeries;\n  /**\n   * The gauge maximum. Either a metric series (its latest value, e.g. a `.limit`\n   * metric) or a fixed number. When omitted, or when the resolved max is 0, the\n   * gauge shows the raw value with no fill (an unbounded reading).\n   */\n  max?: GaugeSeries | number;\n  title: string;\n  /** Iconify name or static icon component shown beside the label. */\n  icon?: string | StaticIconComponent;\n  /** Grafana-style unit key for the readout (e.g. \"bytes\", \"percent\", \"short\", \"ms\"). */\n  unit?: string;\n  /** Look-back window for the expand chart, passed as ?since=; defaults to \"1h\". */\n  range?: string;\n  /** Poll interval in ms; defaults to 5000. Pass 0 to disable polling. */\n  refreshMs?: number;\n  /** Show an expand button that opens the value/max time-series chart in a modal. Default true. */\n  expandable?: boolean;\n  /**\n   * Utilisation thresholds (percent of max) at which the arc turns amber then\n   * red. Defaults to [75, 90].\n   */\n  thresholds?: [warning: number, danger: number];\n  /**\n   * What to print in the centre: the formatted value (default) or the\n   * utilisation percentage of max (e.g. CPU usage out of its millicore limit).\n   */\n  centerDisplay?: \"value\" | \"percent\";\n  /** Visual density/layout. `cell` is a compact inline form for table/grid cells. */\n  variant?: TimeseriesGaugeVariant;\n  /** Fill geometry: a radial half-gauge (default) or a horizontal progress bar. */\n  shape?: TimeseriesGaugeShape;\n  /** Show the title text. Icons and values remain visible when false. */\n  showLabel?: boolean;\n  /**\n   * Wrap the gauge in a hover card summarising the metric (label + current / min /\n   * max / avg / capacity over the window). Defaults to true.\n   */\n  hoverCard?: boolean;\n  /** Override the default fetch (e.g. to route through an app's API client). */\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nconst defaultFetcher = async (url: string): Promise<TimeseriesResponse> => {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`metrics request failed: ${res.status}`);\n  return res.json();\n};\n\n// Half-gauge SVG geometry: a 100×50 viewBox semicircle (radius 40, centre 50,50)\n// swept 180°. The arc length is π·r; stroke-dashoffset reveals value/max of it.\nconst GAUGE_RADIUS = 40;\nconst GAUGE_ARC = Math.PI * GAUGE_RADIUS;\nconst GAUGE_PATH = `M 10 50 A ${GAUGE_RADIUS} ${GAUGE_RADIUS} 0 0 1 90 50`;\n\nfunction toneClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"text-red-500\";\n  if (pct >= warn) return \"text-amber-500\";\n  return \"text-emerald-500\";\n}\n\n// toneBgClass mirrors toneClass for the linear bar's fill, which needs a\n// background colour rather than the arc's stroke (currentColor) tone.\nfunction toneBgClass(pct: number, [warn, danger]: [number, number]): string {\n  if (pct >= danger) return \"bg-red-500\";\n  if (pct >= warn) return \"bg-amber-500\";\n  return \"bg-emerald-500\";\n}\n\n// GaugeArc is the half-circle SVG shared by the cell and default radial gauges;\n// only the stroke width differs between the two densities.\nfunction GaugeArc({ pct, tone, strokeWidth }: { pct: number; tone: string; strokeWidth: number }) {\n  return (\n    <svg viewBox=\"0 0 100 50\" className=\"h-full w-full overflow-visible\">\n      <path d={GAUGE_PATH} fill=\"none\" stroke=\"currentColor\" strokeWidth={strokeWidth} strokeLinecap=\"round\" className=\"text-muted\" />\n      <path\n        d={GAUGE_PATH}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        className={tone}\n        strokeDasharray={GAUGE_ARC}\n        strokeDashoffset={GAUGE_ARC * (1 - pct / 100)}\n      />\n    </svg>\n  );\n}\n\n// GaugeBar is the horizontal progress track shared by the cell and default linear\n// gauges; the caller sizes it via className (e.g. \"h-1.5 w-12\" or \"h-2 w-full\").\nfunction GaugeBar({ pct, toneBg, className }: { pct: number; toneBg: string; className?: string }) {\n  return (\n    <span className={cn(\"relative block overflow-hidden rounded-full bg-muted\", className)} aria-hidden=\"true\">\n      <span\n        className={cn(\"absolute inset-y-0 left-0 rounded-full transition-all duration-300\", toneBg)}\n        style={{ width: `${pct}%` }}\n      />\n    </span>\n  );\n}\n\nfunction latestValue(resp: TimeseriesResponse | undefined): number | undefined {\n  const points = resp?.points;\n  if (!points || points.length === 0) return undefined;\n  return points[points.length - 1]?.value;\n}\n\nfunction GaugeIcon({ icon }: { icon: string | StaticIconComponent }) {\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n  }\n  return <Icon icon={icon} width={14} height={14} className=\"text-muted-foreground\" />;\n}\n\n/**\n * TimeseriesGauge renders a half (180°) radial gauge whose fill is the latest\n * value of a metric over its maximum (a `.limit`-style metric or a fixed number),\n * both read live from the timeseries store. The centre shows the utilisation\n * percentage, with the value/max caption below; the arc colour crosses warning\n * and danger thresholds. An expand button opens the full value/max time-series\n * chart in a modal (a `TimeseriesPanel`), so the gauge gives the at-a-glance\n * reading and the chart the trend.\n */\nexport function TimeseriesGauge({\n  baseUrl = \"\",\n  value,\n  max,\n  title,\n  icon,\n  unit,\n  range = \"1h\",\n  refreshMs = 5000,\n  expandable = true,\n  thresholds = [75, 90],\n  centerDisplay = \"value\",\n  variant = \"default\",\n  shape = \"radial\",\n  showLabel = true,\n  hoverCard = true,\n  fetcher = defaultFetcher,\n  className,\n}: TimeseriesGaugeProps) {\n  const [expanded, setExpanded] = useState(false);\n\n  const maxIsSeries = typeof max === \"object\";\n  const maxSeries = maxIsSeries ? max : undefined;\n  const ids = useMemo(() => {\n    const list = [value.id];\n    if (maxSeries) list.push(maxSeries.id);\n    return list;\n  }, [value.id, maxSeries]);\n\n  const results = useQueries({\n    queries: ids.map((id) => {\n      const u = new URL(baseUrl + id, window.location.origin);\n      if (range) u.searchParams.set(\"since\", range);\n      const requestUrl = u.pathname + u.search;\n      return {\n        queryKey: [\"timeseries\", requestUrl],\n        queryFn: () => fetcher(requestUrl),\n        refetchInterval: refreshMs > 0 ? refreshMs : false,\n        staleTime: 0,\n        retry: 0,\n      };\n    }),\n  });\n\n  const rawValue = latestValue(results[0]?.data);\n  const hasValue = rawValue !== undefined;\n  const usage = value.transform ? value.transform(rawValue ?? 0) : (rawValue ?? 0);\n\n  let limit: number | undefined;\n  if (typeof max === \"number\") {\n    limit = max;\n  } else if (maxSeries) {\n    const rawMax = latestValue(results[1]?.data);\n    limit = rawMax === undefined ? undefined : maxSeries.transform ? maxSeries.transform(rawMax) : rawMax;\n  }\n\n  const bounded = hasValue && limit !== undefined && limit > 0;\n  const pct = bounded ? Math.min(100, Math.round((usage / (limit as number)) * 100)) : 0;\n  const tone = toneClass(pct, thresholds);\n  const toneBg = toneBgClass(pct, thresholds);\n  const readout =\n    centerDisplay === \"percent\"\n      ? bounded\n        ? `${pct}%`\n        : hasValue\n          ? \"n/a\"\n          : \"—\"\n      : hasValue\n        ? formatUnit(usage, unit)\n        : \"—\";\n  const titleText = `${title}: ${readout}`;\n  const canExpand = expandable && variant === \"default\";\n  const readoutTone = bounded ? tone : \"text-foreground\";\n\n  const chartSeries: TimeseriesSeries[] = useMemo(() => {\n    const s: TimeseriesSeries[] = [{ id: value.id, label: \"value\", ...(value.transform ? { transform: value.transform } : {}) }];\n    if (maxSeries) s.push({ id: maxSeries.id, label: \"max\", ...(maxSeries.transform ? { transform: maxSeries.transform } : {}) });\n    return s;\n  }, [value.id, value.transform, maxSeries]);\n\n  // Hover card: reduce the value's points to current/min/max/avg (transformed to\n  // the display unit), plus the resolved capacity. The current row is tinted by\n  // its threshold tone when the reading is bounded.\n  const stats = seriesStats(results[0]?.data?.points, value.transform);\n  const fmt = (n: number) => formatUnit(n, unit);\n  const hoverRows: GaugeHoverRow[] = hasValue\n    ? [\n        { label: \"Current\", value: fmt(usage), ...(bounded ? { tone } : {}) },\n        ...(stats\n          ? [\n              { label: \"Min\", value: fmt(stats.min) },\n              { label: \"Max\", value: fmt(stats.max) },\n              { label: \"Avg\", value: fmt(stats.avg) },\n            ]\n          : []),\n        ...(limit !== undefined\n          ? [{ label: \"Capacity\", value: fmt(limit) }]\n          : []),\n      ]\n    : [];\n  const useHover = hoverCard && hoverRows.length > 0;\n  const footer = `over last ${range}`;\n\n  if (variant === \"cell\") {\n    const cell = (\n      <span\n        className={cn(\n          \"inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap align-middle text-xs\",\n          className,\n        )}\n        {...(useHover ? {} : { title: titleText })}\n        aria-label={useHover || !showLabel ? titleText : undefined}\n        data-shape={shape}\n      >\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        {showLabel ? <span className=\"min-w-0 truncate text-muted-foreground\">{title}</span> : null}\n        {shape === \"linear\" ? (\n          <GaugeBar pct={pct} toneBg={toneBg} className=\"h-1.5 w-12 shrink-0\" />\n        ) : (\n          <span className=\"relative h-4 w-8 shrink-0\" aria-hidden=\"true\">\n            <GaugeArc pct={pct} tone={tone} strokeWidth={10} />\n          </span>\n        )}\n        <span className={cn(\"shrink-0 font-semibold tabular-nums\", readoutTone)}>\n          {readout}\n        </span>\n      </span>\n    );\n    return useHover ? (\n      <GaugeHoverCard title={title} rows={hoverRows} footer={footer} trigger={cell} />\n    ) : (\n      cell\n    );\n  }\n\n  const body = (\n    <div\n      className={cn(\"flex flex-col items-center gap-1\", className)}\n      {...(useHover ? {} : { title: !showLabel ? titleText : undefined })}\n      aria-label={useHover || !showLabel ? titleText : undefined}\n      data-shape={shape}\n    >\n      {shape === \"linear\" ? (\n        <div className=\"flex w-full items-center gap-2\">\n          <GaugeBar pct={pct} toneBg={toneBg} className=\"h-2 w-full\" />\n          <span className=\"shrink-0 text-sm font-semibold text-foreground\">{readout}</span>\n          {canExpand && (\n            <button\n              type=\"button\"\n              aria-label=\"Expand chart\"\n              onClick={() => setExpanded(true)}\n              className=\"shrink-0 text-muted-foreground hover:text-foreground\"\n            >\n              <Icon icon={UiFullscreen} width={12} height={12} />\n            </button>\n          )}\n        </div>\n      ) : (\n        <div className=\"relative h-10 w-20\">\n          <GaugeArc pct={pct} tone={tone} strokeWidth={9} />\n          <span className=\"absolute inset-x-0 bottom-0 text-center text-sm font-semibold text-foreground\">\n            {readout}\n          </span>\n          {canExpand && (\n            <button\n              type=\"button\"\n              aria-label=\"Expand chart\"\n              onClick={() => setExpanded(true)}\n              className=\"absolute right-0 top-0 text-muted-foreground hover:text-foreground\"\n            >\n              <Icon icon={UiFullscreen} width={12} height={12} />\n            </button>\n          )}\n        </div>\n      )}\n      {icon || showLabel ? (\n        <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n          {icon ? <GaugeIcon icon={icon} /> : null}\n          {showLabel ? <span>{title}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <>\n      {useHover ? (\n        <GaugeHoverCard\n          title={title}\n          rows={hoverRows}\n          footer={footer}\n          trigger={body}\n          className=\"w-full justify-center\"\n        />\n      ) : (\n        body\n      )}\n      {canExpand && (\n        <Modal open={expanded} onClose={() => setExpanded(false)} title={title} size=\"xl\">\n          <TimeseriesPanel\n            title={title}\n            {...(icon ? { icon } : {})}\n            {...(unit ? { unit } : {})}\n            baseUrl={baseUrl}\n            series={chartSeries}\n            range={range}\n            refreshMs={refreshMs}\n            expandable={false}\n            fetcher={fetcher}\n          />\n        </Modal>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/WorkloadCard.cjs

@@ -79,6 +79,7 @@ function metricGridClass(count) {
   if (count === 2) return "grid-cols-2";
   return "grid-cols-3";
 }
+const MEMORY_BAR_UNIT = { perBar: 1024 ** 3, label: "GB", barLabel: "GB" };
 function WorkloadIcon({
   icon,
   title,
@@ -301,14 +302,12 @@ function WorkloadCard({
                 }
               ) : null,
               metrics.memory ? /* @__PURE__ */ jsxRuntime.jsx(
-                TimeseriesGauge.TimeseriesGauge,
+                TimeseriesCoreBars.TimeseriesCoreBars,
                 {
                   title: metrics.memory.title ?? "Memory",
                   icon: metrics.memory.icon ?? UiMemoryStick.UiMemoryStick,
                   value: metrics.memory.value,
-                  unit: metrics.memory.unit ?? "bytes",
-                  expandable: false,
-                  centerDisplay: metrics.memory.centerDisplay ?? "value",
+                  unit: MEMORY_BAR_UNIT,
                   variant: sizeClasses.metricVariant,
                   ...metrics.memory.max !== void 0 ? { max: metrics.memory.max } : {},
                   ...metrics.memory.thresholds ? { thresholds: metrics.memory.thresholds } : {},
@@ -322,6 +321,7 @@ function WorkloadCard({
                   icon: metrics.disk.icon ?? UiHardDrive.UiHardDrive,
                   value: metrics.disk.value,
                   unit: metrics.disk.unit ?? "bytes",
+                  shape: "linear",
                   expandable: false,
                   centerDisplay: metrics.disk.centerDisplay ?? "value",
                   variant: sizeClasses.metricVariant,

package/dist/data/WorkloadCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WorkloadCard.cjs","sources":["../../src/data/WorkloadCard.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n  K8SDeployment,\n  K8SIngress,\n  K8SPod,\n  K8SService,\n  K8SStatefulset,\n} from \"@flanksource/icons/mi\";\nimport { cn } from \"../lib/utils\";\nimport { Modal } from \"../overlay/Modal\";\nimport { Badge } from \"./Badge\";\nimport { Timestamp } from \"./cells/Timestamp\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { TimeseriesCoreBars } from \"./TimeseriesCoreBars\";\nimport { TimeseriesGauge } from \"./TimeseriesGauge\";\nimport {\n  TimeseriesPanel,\n  type TimeseriesResponse,\n  type TimeseriesSeries,\n} from \"./TimeseriesPanel\";\nimport { UiChip, UiFullscreen, UiHardDrive, UiMemoryStick } from \"../icons\";\nimport {\n  formatReplicaCounts,\n  workloadKindLabel,\n  workloadStatusLabel,\n  workloadStatusTone,\n  type WorkloadCardIcon,\n  type WorkloadCardKind,\n  type WorkloadCardMetrics,\n  type WorkloadCardResourceMetric,\n  type WorkloadCardWorkload,\n} from \"./WorkloadCard.model\";\n\nexport interface WorkloadCardProps {\n  workload: WorkloadCardWorkload;\n  metrics: WorkloadCardMetrics;\n  baseUrl?: string;\n  range?: string;\n  refreshMs?: number;\n  expandable?: boolean;\n  size?: WorkloadCardSize;\n  variant?: WorkloadCardVariant;\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nexport type WorkloadCardSize = \"sm\" | \"md\" | \"lg\";\nexport type WorkloadCardVariant =\n  | \"default\"\n  | \"outline\"\n  | \"subtle\"\n  | \"elevated\"\n  | \"ghost\";\n\ntype MetricKey = keyof WorkloadCardMetrics;\n\ntype PanelMetric = {\n  key: MetricKey;\n  title: string;\n  unit?: string;\n  icon: WorkloadCardIcon;\n  metric: WorkloadCardResourceMetric;\n};\n\nconst KIND_ICONS: Record<WorkloadCardKind, StaticIconComponent> = {\n  service: K8SService,\n  ingress: K8SIngress,\n  deployment: K8SDeployment,\n  statefulset: K8SStatefulset,\n  pod: K8SPod,\n};\n\ntype WorkloadCardSizeClasses = {\n  root: string;\n  header: string;\n  titleGap: string;\n  icon: string;\n  name: string;\n  meta: string;\n  statusSize: \"xxs\" | \"xs\" | \"sm\";\n  action: string;\n  actionIcon: number;\n  metricGrid: string;\n  metricVariant: \"default\" | \"cell\";\n  empty: string;\n};\n\nconst SIZE_CLASSES: Record<WorkloadCardSize, WorkloadCardSizeClasses> = {\n  sm: {\n    root: \"p-2\",\n    header: \"mb-2 gap-2\",\n    titleGap: \"gap-1\",\n    icon: \"h-3.5 w-3.5\",\n    name: \"text-xs\",\n    meta: \"mt-0.5 gap-x-1.5 gap-y-0.5 text-[11px] leading-4\",\n    statusSize: \"xxs\",\n    action: \"h-5 w-5\",\n    actionIcon: 12,\n    metricGrid: \"grid-cols-1 gap-1.5\",\n    metricVariant: \"cell\",\n    empty: \"px-2 py-3 text-[11px]\",\n  },\n  md: {\n    root: \"p-3\",\n    header: \"mb-3 gap-2\",\n    titleGap: \"gap-1.5\",\n    icon: \"h-4 w-4\",\n    name: \"text-sm\",\n    meta: \"mt-0.5 gap-x-2 gap-y-0.5 text-xs\",\n    statusSize: \"xs\",\n    action: \"h-6 w-6\",\n    actionIcon: 14,\n    metricGrid: \"gap-3\",\n    metricVariant: \"default\",\n    empty: \"px-3 py-4 text-xs\",\n  },\n  lg: {\n    root: \"p-4\",\n    header: \"mb-4 gap-3\",\n    titleGap: \"gap-2\",\n    icon: \"h-5 w-5\",\n    name: \"text-base\",\n    meta: \"mt-1 gap-x-2 gap-y-1 text-xs\",\n    statusSize: \"sm\",\n    action: \"h-7 w-7\",\n    actionIcon: 16,\n    metricGrid: \"gap-4\",\n    metricVariant: \"default\",\n    empty: \"px-4 py-6 text-sm\",\n  },\n};\n\nconst VARIANT_CLASSES: Record<WorkloadCardVariant, string> = {\n  default: \"border-border bg-card text-card-foreground\",\n  outline: \"border-border bg-background text-foreground\",\n  subtle: \"border-transparent bg-muted/35 text-foreground\",\n  elevated: \"border-border/70 bg-card text-card-foreground shadow-sm\",\n  ghost: \"border-transparent bg-transparent text-foreground\",\n};\n\nfunction metricGridClass(count: number): string {\n  if (count <= 1) return \"grid-cols-1\";\n  if (count === 2) return \"grid-cols-2\";\n  return \"grid-cols-3\";\n}\n\nfunction WorkloadIcon({\n  icon,\n  title,\n  className,\n}: {\n  icon: WorkloadCardIcon;\n  title: string;\n  className?: string;\n}) {\n  if (typeof icon === \"string\") {\n    return (\n      <Icon name={icon} title={title} {...(className ? { className } : {})} />\n    );\n  }\n  return (\n    <Icon icon={icon} title={title} {...(className ? { className } : {})} />\n  );\n}\n\nfunction metricSeries(metric: WorkloadCardResourceMetric): TimeseriesSeries[] {\n  const series: TimeseriesSeries[] = [\n    {\n      id: metric.value.id,\n      label: metric.valueLabel ?? \"usage\",\n      ...(metric.value.transform ? { transform: metric.value.transform } : {}),\n    },\n  ];\n  if (typeof metric.max === \"object\") {\n    series.push({\n      id: metric.max.id,\n      label: metric.maxLabel ?? \"limit\",\n      ...(metric.max.transform ? { transform: metric.max.transform } : {}),\n    });\n  }\n  return series;\n}\n\nfunction hasMetric(metrics: WorkloadCardMetrics): boolean {\n  return Boolean(metrics.cpu || metrics.memory || metrics.disk);\n}\n\nfunction HeaderMeta({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"inline-flex min-w-0 items-center gap-1\">\n      <span\n        className=\"h-1 w-1 shrink-0 rounded-full bg-muted-foreground/40\"\n        aria-hidden\n      />\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </span>\n  );\n}\n\n/**\n * WorkloadCard is a compact resource card for Kubernetes-style workloads. It\n * shows workload identity, status, replica/age metadata, and CPU/memory/disk\n * utilization backed by the existing time-series primitives. Callers own the\n * metric ids; the card only composes the supplied series.\n */\nexport function WorkloadCard({\n  workload,\n  metrics,\n  baseUrl,\n  range = \"1h\",\n  refreshMs = 5000,\n  expandable = true,\n  size = \"md\",\n  variant = \"default\",\n  fetcher,\n  className,\n}: WorkloadCardProps) {\n  const [expanded, setExpanded] = useState(false);\n  const kindLabel = workloadKindLabel(workload.kind);\n  const statusLabel = workloadStatusLabel(workload.status);\n  const replicaText = formatReplicaCounts(workload.replicas);\n  const workloadIcon = workload.icon ?? KIND_ICONS[workload.kind];\n  const sizeClasses = SIZE_CLASSES[size];\n\n  const panelMetrics = useMemo(() => {\n    const list: PanelMetric[] = [];\n    if (metrics.cpu) {\n      list.push({\n        key: \"cpu\",\n        title: metrics.cpu.title ?? \"CPU\",\n        unit: metrics.cpu.unit ?? \"short\",\n        icon: metrics.cpu.icon ?? UiChip,\n        metric: metrics.cpu,\n      });\n    }\n    if (metrics.memory) {\n      list.push({\n        key: \"memory\",\n        title: metrics.memory.title ?? \"Memory\",\n        unit: metrics.memory.unit ?? \"bytes\",\n        icon: metrics.memory.icon ?? UiMemoryStick,\n        metric: metrics.memory,\n      });\n    }\n    if (metrics.disk) {\n      list.push({\n        key: \"disk\",\n        title: metrics.disk.title ?? \"Disk\",\n        unit: metrics.disk.unit ?? \"bytes\",\n        icon: metrics.disk.icon ?? UiHardDrive,\n        metric: metrics.disk,\n      });\n    }\n    return list;\n  }, [metrics]);\n\n  const metricProps = {\n    ...(baseUrl !== undefined ? { baseUrl } : {}),\n    range,\n    refreshMs,\n    ...(fetcher !== undefined ? { fetcher } : {}),\n  };\n  const canExpand = expandable && hasMetric(metrics);\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-md border\",\n        VARIANT_CLASSES[variant],\n        sizeClasses.root,\n        className,\n      )}\n      data-size={size}\n      data-variant={variant}\n    >\n      <div\n        className={cn(\"flex items-start justify-between\", sizeClasses.header)}\n      >\n        <div className=\"min-w-0\">\n          <div\n            className={cn(\"flex min-w-0 items-center\", sizeClasses.titleGap)}\n          >\n            <WorkloadIcon\n              icon={workloadIcon}\n              title={kindLabel}\n              className={cn(\"shrink-0 text-muted-foreground\", sizeClasses.icon)}\n            />\n            <span\n              className={cn(\"min-w-0 truncate font-medium\", sizeClasses.name)}\n              title={workload.name}\n            >\n              {workload.name}\n            </span>\n          </div>\n          <div\n            className={cn(\n              \"flex flex-wrap items-center text-muted-foreground\",\n              sizeClasses.meta,\n            )}\n          >\n            <span>{kindLabel}</span>\n            {workload.namespace ? (\n              <HeaderMeta>{workload.namespace}</HeaderMeta>\n            ) : null}\n            {workload.role ? <HeaderMeta>{workload.role}</HeaderMeta> : null}\n            {replicaText ? <HeaderMeta>{replicaText}</HeaderMeta> : null}\n            {workload.createdAt !== undefined ? (\n              <HeaderMeta>\n                age <Timestamp value={workload.createdAt} format=\"relative\" />\n              </HeaderMeta>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {statusLabel ? (\n            <span title={workload.status?.message}>\n              <Badge\n                tone={workloadStatusTone(workload.status)}\n                variant=\"soft\"\n                size={sizeClasses.statusSize}\n              >\n                {statusLabel}\n              </Badge>\n            </span>\n          ) : null}\n          {canExpand ? (\n            <button\n              type=\"button\"\n              aria-label={`Open ${workload.name} history`}\n              title=\"History\"\n              onClick={() => setExpanded(true)}\n              className={cn(\n                \"inline-flex items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n                sizeClasses.action,\n              )}\n            >\n              <Icon\n                icon={UiFullscreen}\n                width={sizeClasses.actionIcon}\n                height={sizeClasses.actionIcon}\n              />\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      {hasMetric(metrics) ? (\n        <div\n          className={cn(\n            \"grid items-start gap-3\",\n            sizeClasses.metricVariant === \"cell\"\n              ? sizeClasses.metricGrid\n              : cn(\n                  metricGridClass(panelMetrics.length),\n                  sizeClasses.metricGrid,\n                ),\n          )}\n        >\n          {metrics.cpu ? (\n            <TimeseriesCoreBars\n              title={metrics.cpu.title ?? \"CPU\"}\n              icon={metrics.cpu.icon ?? UiChip}\n              value={metrics.cpu.value}\n              {...(metrics.cpu.max !== undefined\n                ? { max: metrics.cpu.max }\n                : {})}\n              {...(metrics.cpu.thresholds\n                ? { thresholds: metrics.cpu.thresholds }\n                : {})}\n              {...(metrics.cpu.orientation\n                ? { orientation: metrics.cpu.orientation }\n                : {})}\n              {...(metrics.cpu.showValue !== undefined\n                ? { showValue: metrics.cpu.showValue }\n                : {})}\n              variant={sizeClasses.metricVariant}\n              {...metricProps}\n            />\n          ) : null}\n          {metrics.memory ? (\n            <TimeseriesGauge\n              title={metrics.memory.title ?? \"Memory\"}\n              icon={metrics.memory.icon ?? UiMemoryStick}\n              value={metrics.memory.value}\n              unit={metrics.memory.unit ?? \"bytes\"}\n              expandable={false}\n              centerDisplay={metrics.memory.centerDisplay ?? \"value\"}\n              variant={sizeClasses.metricVariant}\n              {...(metrics.memory.max !== undefined\n                ? { max: metrics.memory.max }\n                : {})}\n              {...(metrics.memory.thresholds\n                ? { thresholds: metrics.memory.thresholds }\n                : {})}\n              {...metricProps}\n            />\n          ) : null}\n          {metrics.disk ? (\n            <TimeseriesGauge\n              title={metrics.disk.title ?? \"Disk\"}\n              icon={metrics.disk.icon ?? UiHardDrive}\n              value={metrics.disk.value}\n              unit={metrics.disk.unit ?? \"bytes\"}\n              expandable={false}\n              centerDisplay={metrics.disk.centerDisplay ?? \"value\"}\n              variant={sizeClasses.metricVariant}\n              {...(metrics.disk.max !== undefined\n                ? { max: metrics.disk.max }\n                : {})}\n              {...(metrics.disk.thresholds\n                ? { thresholds: metrics.disk.thresholds }\n                : {})}\n              {...metricProps}\n            />\n          ) : null}\n        </div>\n      ) : (\n        <div\n          className={cn(\n            \"rounded-md border border-dashed border-border text-center text-muted-foreground\",\n            sizeClasses.empty,\n          )}\n        >\n          No metrics configured\n        </div>\n      )}\n\n      <Modal\n        open={expanded}\n        onClose={() => setExpanded(false)}\n        title={`${workload.name} history`}\n        size=\"xl\"\n      >\n        <div className=\"flex flex-col gap-3\">\n          {panelMetrics.map(({ key, title, unit, icon, metric }) => (\n            <TimeseriesPanel\n              key={key}\n              title={title}\n              icon={icon}\n              series={metricSeries(metric)}\n              {...(unit ? { unit } : {})}\n              {...metricProps}\n              expandable={false}\n            />\n          ))}\n        </div>\n      </Modal>\n    </div>\n  );\n}\n"],"names":["K8SService","K8SIngress","K8SDeployment","K8SStatefulset","K8SPod","jsx","Icon","jsxs","useState","workloadKindLabel","workloadStatusLabel","formatReplicaCounts","useMemo","UiChip","UiMemoryStick","UiHardDrive","cn","Timestamp","Badge","workloadStatusTone","UiFullscreen","TimeseriesCoreBars","TimeseriesGauge","Modal","TimeseriesPanel"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,MAAM,aAA4D;AAAA,EAChE,SAASA,GAAAA;AAAAA,EACT,SAASC,GAAAA;AAAAA,EACT,YAAYC,GAAAA;AAAAA,EACZ,aAAaC,GAAAA;AAAAA,EACb,KAAKC,GAAAA;AACP;AAiBA,MAAM,eAAkE;AAAA,EACtE,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,kBAAuD;AAAA,EAC3D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEA,SAAS,gBAAgB,OAAuB;AAC9C,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,OAAO,SAAS,UAAU;AAC5B,WACEC,+BAACC,KAAAA,MAAA,EAAK,MAAM,MAAM,OAAe,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA,EAAC,CAAI;AAAA,EAE1E;AACA,SACED,2BAAAA,IAACC,WAAA,EAAK,MAAY,OAAe,GAAI,YAAY,EAAE,cAAc,CAAA,GAAK;AAE1E;AAEA,SAAS,aAAa,QAAwD;AAC5E,QAAM,SAA6B;AAAA,IACjC;AAAA,MACE,IAAI,OAAO,MAAM;AAAA,MACjB,OAAO,OAAO,cAAc;AAAA,MAC5B,GAAI,OAAO,MAAM,YAAY,EAAE,WAAW,OAAO,MAAM,cAAc,CAAA;AAAA,IAAC;AAAA,EACxE;AAEF,MAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,WAAO,KAAK;AAAA,MACV,IAAI,OAAO,IAAI;AAAA,MACf,OAAO,OAAO,YAAY;AAAA,MAC1B,GAAI,OAAO,IAAI,YAAY,EAAE,WAAW,OAAO,IAAI,cAAc,CAAA;AAAA,IAAC,CACnE;AAAA,EACH;AACA,SAAO;AACT;AAEA,SAAS,UAAU,SAAuC;AACxD,SAAO,QAAQ,QAAQ,OAAO,QAAQ,UAAU,QAAQ,IAAI;AAC9D;AAEA,SAAS,WAAW,EAAE,YAAqC;AACzD,SACEC,2BAAAA,KAAC,QAAA,EAAK,WAAU,0CACd,UAAA;AAAA,IAAAF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEbA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA,GAC/C;AAEJ;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAsB;;AACpB,QAAM,CAAC,UAAU,WAAW,IAAIG,MAAAA,SAAS,KAAK;AAC9C,QAAM,YAAYC,mBAAAA,kBAAkB,SAAS,IAAI;AACjD,QAAM,cAAcC,mBAAAA,oBAAoB,SAAS,MAAM;AACvD,QAAM,cAAcC,mBAAAA,oBAAoB,SAAS,QAAQ;AACzD,QAAM,eAAe,SAAS,QAAQ,WAAW,SAAS,IAAI;AAC9D,QAAM,cAAc,aAAa,IAAI;AAErC,QAAM,eAAeC,MAAAA,QAAQ,MAAM;AACjC,UAAM,OAAsB,CAAA;AAC5B,QAAI,QAAQ,KAAK;AACf,WAAK,KAAK;AAAA,QACR,KAAK;AAAA,QACL,OAAO,QAAQ,IAAI,SAAS;AAAA,QAC5B,MAAM,QAAQ,IAAI,QAAQ;AAAA,QAC1B,MAAM,QAAQ,IAAI,QAAQC,OAAAA;AAAAA,QAC1B,QAAQ,QAAQ;AAAA,MAAA,CACjB;AAAA,IACH;AACA,QAAI,QAAQ,QAAQ;AAClB,WAAK,KAAK;AAAA,QACR,KAAK;AAAA,QACL,OAAO,QAAQ,OAAO,SAAS;AAAA,QAC/B,MAAM,QAAQ,OAAO,QAAQ;AAAA,QAC7B,MAAM,QAAQ,OAAO,QAAQC,cAAAA;AAAAA,QAC7B,QAAQ,QAAQ;AAAA,MAAA,CACjB;AAAA,IACH;AACA,QAAI,QAAQ,MAAM;AAChB,WAAK,KAAK;AAAA,QACR,KAAK;AAAA,QACL,OAAO,QAAQ,KAAK,SAAS;AAAA,QAC7B,MAAM,QAAQ,KAAK,QAAQ;AAAA,QAC3B,MAAM,QAAQ,KAAK,QAAQC,YAAAA;AAAAA,QAC3B,QAAQ,QAAQ;AAAA,MAAA,CACjB;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,cAAc;AAAA,IAClB,GAAI,YAAY,SAAY,EAAE,QAAA,IAAY,CAAA;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,GAAI,YAAY,SAAY,EAAE,YAAY,CAAA;AAAA,EAAC;AAE7C,QAAM,YAAY,cAAc,UAAU,OAAO;AAEjD,SACER,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,MAAAA;AAAAA,QACT;AAAA,QACA,gBAAgB,OAAO;AAAA,QACvB,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEF,aAAW;AAAA,MACX,gBAAc;AAAA,MAEd,UAAA;AAAA,QAAAT,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWS,MAAAA,GAAG,oCAAoC,YAAY,MAAM;AAAA,YAEpE,UAAA;AAAA,cAAAT,2BAAAA,KAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,gBAAAA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWS,MAAAA,GAAG,6BAA6B,YAAY,QAAQ;AAAA,oBAE/D,UAAA;AAAA,sBAAAX,2BAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,MAAM;AAAA,0BACN,OAAO;AAAA,0BACP,WAAWW,MAAAA,GAAG,kCAAkC,YAAY,IAAI;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAElEX,2BAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWW,MAAAA,GAAG,gCAAgC,YAAY,IAAI;AAAA,0BAC9D,OAAO,SAAS;AAAA,0BAEf,UAAA,SAAS;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACZ;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEFT,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWS,MAAAA;AAAAA,sBACT;AAAA,sBACA,YAAY;AAAA,oBAAA;AAAA,oBAGd,UAAA;AAAA,sBAAAX,2BAAAA,IAAC,UAAM,UAAA,UAAA,CAAU;AAAA,sBAChB,SAAS,YACRA,2BAAAA,IAAC,YAAA,EAAY,UAAA,SAAS,WAAU,IAC9B;AAAA,sBACH,SAAS,OAAOA,2BAAAA,IAAC,YAAA,EAAY,UAAA,SAAS,MAAK,IAAgB;AAAA,sBAC3D,cAAcA,2BAAAA,IAAC,YAAA,EAAY,UAAA,YAAA,CAAY,IAAgB;AAAA,sBACvD,SAAS,cAAc,SACtBE,2BAAAA,KAAC,YAAA,EAAW,UAAA;AAAA,wBAAA;AAAA,uDACLU,UAAAA,WAAA,EAAU,OAAO,SAAS,WAAW,QAAO,WAAA,CAAW;AAAA,sBAAA,EAAA,CAC9D,IACE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACN,GACF;AAAA,cACAV,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,gBAAA,cACCF,2BAAAA,IAAC,QAAA,EAAK,QAAO,cAAS,WAAT,mBAAiB,SAC5B,UAAAA,2BAAAA;AAAAA,kBAACa,MAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMC,mBAAAA,mBAAmB,SAAS,MAAM;AAAA,oBACxC,SAAQ;AAAA,oBACR,MAAM,YAAY;AAAA,oBAEjB,UAAA;AAAA,kBAAA;AAAA,gBAAA,GAEL,IACE;AAAA,gBACH,YACCd,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,QAAQ,SAAS,IAAI;AAAA,oBACjC,OAAM;AAAA,oBACN,SAAS,MAAM,YAAY,IAAI;AAAA,oBAC/B,WAAWW,MAAAA;AAAAA,sBACT;AAAA,sBACA,YAAY;AAAA,oBAAA;AAAA,oBAGd,UAAAX,2BAAAA;AAAAA,sBAACC,KAAAA;AAAAA,sBAAA;AAAA,wBACC,MAAMc,aAAAA;AAAAA,wBACN,OAAO,YAAY;AAAA,wBACnB,QAAQ,YAAY;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACtB;AAAA,gBAAA,IAEA;AAAA,cAAA,EAAA,CACN;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,UAAU,OAAO,IAChBb,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWS,MAAAA;AAAAA,cACT;AAAA,cACA,YAAY,kBAAkB,SAC1B,YAAY,aACZA,MAAAA;AAAAA,gBACE,gBAAgB,aAAa,MAAM;AAAA,gBACnC,YAAY;AAAA,cAAA;AAAA,YACd;AAAA,YAGL,UAAA;AAAA,cAAA,QAAQ,MACPX,2BAAAA;AAAAA,gBAACgB,mBAAAA;AAAAA,gBAAA;AAAA,kBACC,OAAO,QAAQ,IAAI,SAAS;AAAA,kBAC5B,MAAM,QAAQ,IAAI,QAAQR,OAAAA;AAAAA,kBAC1B,OAAO,QAAQ,IAAI;AAAA,kBAClB,GAAI,QAAQ,IAAI,QAAQ,SACrB,EAAE,KAAK,QAAQ,IAAI,IAAA,IACnB,CAAA;AAAA,kBACH,GAAI,QAAQ,IAAI,aACb,EAAE,YAAY,QAAQ,IAAI,WAAA,IAC1B,CAAA;AAAA,kBACH,GAAI,QAAQ,IAAI,cACb,EAAE,aAAa,QAAQ,IAAI,YAAA,IAC3B,CAAA;AAAA,kBACH,GAAI,QAAQ,IAAI,cAAc,SAC3B,EAAE,WAAW,QAAQ,IAAI,UAAA,IACzB,CAAA;AAAA,kBACJ,SAAS,YAAY;AAAA,kBACpB,GAAG;AAAA,gBAAA;AAAA,cAAA,IAEJ;AAAA,cACH,QAAQ,SACPR,2BAAAA;AAAAA,gBAACiB,gBAAAA;AAAAA,gBAAA;AAAA,kBACC,OAAO,QAAQ,OAAO,SAAS;AAAA,kBAC/B,MAAM,QAAQ,OAAO,QAAQR,cAAAA;AAAAA,kBAC7B,OAAO,QAAQ,OAAO;AAAA,kBACtB,MAAM,QAAQ,OAAO,QAAQ;AAAA,kBAC7B,YAAY;AAAA,kBACZ,eAAe,QAAQ,OAAO,iBAAiB;AAAA,kBAC/C,SAAS,YAAY;AAAA,kBACpB,GAAI,QAAQ,OAAO,QAAQ,SACxB,EAAE,KAAK,QAAQ,OAAO,IAAA,IACtB,CAAA;AAAA,kBACH,GAAI,QAAQ,OAAO,aAChB,EAAE,YAAY,QAAQ,OAAO,WAAA,IAC7B,CAAA;AAAA,kBACH,GAAG;AAAA,gBAAA;AAAA,cAAA,IAEJ;AAAA,cACH,QAAQ,OACPT,2BAAAA;AAAAA,gBAACiB,gBAAAA;AAAAA,gBAAA;AAAA,kBACC,OAAO,QAAQ,KAAK,SAAS;AAAA,kBAC7B,MAAM,QAAQ,KAAK,QAAQP,YAAAA;AAAAA,kBAC3B,OAAO,QAAQ,KAAK;AAAA,kBACpB,MAAM,QAAQ,KAAK,QAAQ;AAAA,kBAC3B,YAAY;AAAA,kBACZ,eAAe,QAAQ,KAAK,iBAAiB;AAAA,kBAC7C,SAAS,YAAY;AAAA,kBACpB,GAAI,QAAQ,KAAK,QAAQ,SACtB,EAAE,KAAK,QAAQ,KAAK,IAAA,IACpB,CAAA;AAAA,kBACH,GAAI,QAAQ,KAAK,aACd,EAAE,YAAY,QAAQ,KAAK,WAAA,IAC3B,CAAA;AAAA,kBACH,GAAG;AAAA,gBAAA;AAAA,cAAA,IAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,IAGNV,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWW,MAAAA;AAAAA,cACT;AAAA,cACA,YAAY;AAAA,YAAA;AAAA,YAEf,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKHX,2BAAAA;AAAAA,UAACkB,MAAAA;AAAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,SAAS,MAAM,YAAY,KAAK;AAAA,YAChC,OAAO,GAAG,SAAS,IAAI;AAAA,YACvB,MAAK;AAAA,YAEL,UAAAlB,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBACZ,UAAA,aAAa,IAAI,CAAC,EAAE,KAAK,OAAO,MAAM,MAAM,aAC3CA,2BAAAA;AAAAA,cAACmB,gBAAAA;AAAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA,QAAQ,aAAa,MAAM;AAAA,gBAC1B,GAAI,OAAO,EAAE,KAAA,IAAS,CAAA;AAAA,gBACtB,GAAG;AAAA,gBACJ,YAAY;AAAA,cAAA;AAAA,cANP;AAAA,YAAA,CAQR,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"WorkloadCard.cjs","sources":["../../src/data/WorkloadCard.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n  K8SDeployment,\n  K8SIngress,\n  K8SPod,\n  K8SService,\n  K8SStatefulset,\n} from \"@flanksource/icons/mi\";\nimport { cn } from \"../lib/utils\";\nimport { Modal } from \"../overlay/Modal\";\nimport { Badge } from \"./Badge\";\nimport { Timestamp } from \"./cells/Timestamp\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { TimeseriesCoreBars } from \"./TimeseriesCoreBars\";\nimport { TimeseriesGauge } from \"./TimeseriesGauge\";\nimport {\n  TimeseriesPanel,\n  type TimeseriesResponse,\n  type TimeseriesSeries,\n} from \"./TimeseriesPanel\";\nimport { UiChip, UiFullscreen, UiHardDrive, UiMemoryStick } from \"../icons\";\nimport {\n  formatReplicaCounts,\n  workloadKindLabel,\n  workloadStatusLabel,\n  workloadStatusTone,\n  type WorkloadCardIcon,\n  type WorkloadCardKind,\n  type WorkloadCardMetrics,\n  type WorkloadCardResourceMetric,\n  type WorkloadCardWorkload,\n} from \"./WorkloadCard.model\";\n\nexport interface WorkloadCardProps {\n  workload: WorkloadCardWorkload;\n  metrics: WorkloadCardMetrics;\n  baseUrl?: string;\n  range?: string;\n  refreshMs?: number;\n  expandable?: boolean;\n  size?: WorkloadCardSize;\n  variant?: WorkloadCardVariant;\n  fetcher?: (url: string) => Promise<TimeseriesResponse>;\n  className?: string;\n}\n\nexport type WorkloadCardSize = \"sm\" | \"md\" | \"lg\";\nexport type WorkloadCardVariant =\n  | \"default\"\n  | \"outline\"\n  | \"subtle\"\n  | \"elevated\"\n  | \"ghost\";\n\ntype MetricKey = keyof WorkloadCardMetrics;\n\ntype PanelMetric = {\n  key: MetricKey;\n  title: string;\n  unit?: string;\n  icon: WorkloadCardIcon;\n  metric: WorkloadCardResourceMetric;\n};\n\nconst KIND_ICONS: Record<WorkloadCardKind, StaticIconComponent> = {\n  service: K8SService,\n  ingress: K8SIngress,\n  deployment: K8SDeployment,\n  statefulset: K8SStatefulset,\n  pod: K8SPod,\n};\n\ntype WorkloadCardSizeClasses = {\n  root: string;\n  header: string;\n  titleGap: string;\n  icon: string;\n  name: string;\n  meta: string;\n  statusSize: \"xxs\" | \"xs\" | \"sm\";\n  action: string;\n  actionIcon: number;\n  metricGrid: string;\n  metricVariant: \"default\" | \"cell\";\n  empty: string;\n};\n\nconst SIZE_CLASSES: Record<WorkloadCardSize, WorkloadCardSizeClasses> = {\n  sm: {\n    root: \"p-2\",\n    header: \"mb-2 gap-2\",\n    titleGap: \"gap-1\",\n    icon: \"h-3.5 w-3.5\",\n    name: \"text-xs\",\n    meta: \"mt-0.5 gap-x-1.5 gap-y-0.5 text-[11px] leading-4\",\n    statusSize: \"xxs\",\n    action: \"h-5 w-5\",\n    actionIcon: 12,\n    metricGrid: \"grid-cols-1 gap-1.5\",\n    metricVariant: \"cell\",\n    empty: \"px-2 py-3 text-[11px]\",\n  },\n  md: {\n    root: \"p-3\",\n    header: \"mb-3 gap-2\",\n    titleGap: \"gap-1.5\",\n    icon: \"h-4 w-4\",\n    name: \"text-sm\",\n    meta: \"mt-0.5 gap-x-2 gap-y-0.5 text-xs\",\n    statusSize: \"xs\",\n    action: \"h-6 w-6\",\n    actionIcon: 14,\n    metricGrid: \"gap-3\",\n    metricVariant: \"default\",\n    empty: \"px-3 py-4 text-xs\",\n  },\n  lg: {\n    root: \"p-4\",\n    header: \"mb-4 gap-3\",\n    titleGap: \"gap-2\",\n    icon: \"h-5 w-5\",\n    name: \"text-base\",\n    meta: \"mt-1 gap-x-2 gap-y-1 text-xs\",\n    statusSize: \"sm\",\n    action: \"h-7 w-7\",\n    actionIcon: 16,\n    metricGrid: \"gap-4\",\n    metricVariant: \"default\",\n    empty: \"px-4 py-6 text-sm\",\n  },\n};\n\nconst VARIANT_CLASSES: Record<WorkloadCardVariant, string> = {\n  default: \"border-border bg-card text-card-foreground\",\n  outline: \"border-border bg-background text-foreground\",\n  subtle: \"border-transparent bg-muted/35 text-foreground\",\n  elevated: \"border-border/70 bg-card text-card-foreground shadow-sm\",\n  ghost: \"border-transparent bg-transparent text-foreground\",\n};\n\nfunction metricGridClass(count: number): string {\n  if (count <= 1) return \"grid-cols-1\";\n  if (count === 2) return \"grid-cols-2\";\n  return \"grid-cols-3\";\n}\n\n// Memory renders as cores-style bars at one bar per gigabyte, matching CPU; bytes\n// are fed raw and TimeseriesCoreBars divides by perBar so captions read \"x GB\".\nconst MEMORY_BAR_UNIT = { perBar: 1024 ** 3, label: \"GB\", barLabel: \"GB\" };\n\nfunction WorkloadIcon({\n  icon,\n  title,\n  className,\n}: {\n  icon: WorkloadCardIcon;\n  title: string;\n  className?: string;\n}) {\n  if (typeof icon === \"string\") {\n    return (\n      <Icon name={icon} title={title} {...(className ? { className } : {})} />\n    );\n  }\n  return (\n    <Icon icon={icon} title={title} {...(className ? { className } : {})} />\n  );\n}\n\nfunction metricSeries(metric: WorkloadCardResourceMetric): TimeseriesSeries[] {\n  const series: TimeseriesSeries[] = [\n    {\n      id: metric.value.id,\n      label: metric.valueLabel ?? \"usage\",\n      ...(metric.value.transform ? { transform: metric.value.transform } : {}),\n    },\n  ];\n  if (typeof metric.max === \"object\") {\n    series.push({\n      id: metric.max.id,\n      label: metric.maxLabel ?? \"limit\",\n      ...(metric.max.transform ? { transform: metric.max.transform } : {}),\n    });\n  }\n  return series;\n}\n\nfunction hasMetric(metrics: WorkloadCardMetrics): boolean {\n  return Boolean(metrics.cpu || metrics.memory || metrics.disk);\n}\n\nfunction HeaderMeta({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"inline-flex min-w-0 items-center gap-1\">\n      <span\n        className=\"h-1 w-1 shrink-0 rounded-full bg-muted-foreground/40\"\n        aria-hidden\n      />\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </span>\n  );\n}\n\n/**\n * WorkloadCard is a compact resource card for Kubernetes-style workloads. It\n * shows workload identity, status, replica/age metadata, and CPU/memory/disk\n * utilization backed by the existing time-series primitives: CPU and memory as\n * core-style bars (memory at one bar per GB) and disk as a linear progress bar.\n * Callers own the metric ids; the card only composes the supplied series.\n */\nexport function WorkloadCard({\n  workload,\n  metrics,\n  baseUrl,\n  range = \"1h\",\n  refreshMs = 5000,\n  expandable = true,\n  size = \"md\",\n  variant = \"default\",\n  fetcher,\n  className,\n}: WorkloadCardProps) {\n  const [expanded, setExpanded] = useState(false);\n  const kindLabel = workloadKindLabel(workload.kind);\n  const statusLabel = workloadStatusLabel(workload.status);\n  const replicaText = formatReplicaCounts(workload.replicas);\n  const workloadIcon = workload.icon ?? KIND_ICONS[workload.kind];\n  const sizeClasses = SIZE_CLASSES[size];\n\n  const panelMetrics = useMemo(() => {\n    const list: PanelMetric[] = [];\n    if (metrics.cpu) {\n      list.push({\n        key: \"cpu\",\n        title: metrics.cpu.title ?? \"CPU\",\n        unit: metrics.cpu.unit ?? \"short\",\n        icon: metrics.cpu.icon ?? UiChip,\n        metric: metrics.cpu,\n      });\n    }\n    if (metrics.memory) {\n      list.push({\n        key: \"memory\",\n        title: metrics.memory.title ?? \"Memory\",\n        unit: metrics.memory.unit ?? \"bytes\",\n        icon: metrics.memory.icon ?? UiMemoryStick,\n        metric: metrics.memory,\n      });\n    }\n    if (metrics.disk) {\n      list.push({\n        key: \"disk\",\n        title: metrics.disk.title ?? \"Disk\",\n        unit: metrics.disk.unit ?? \"bytes\",\n        icon: metrics.disk.icon ?? UiHardDrive,\n        metric: metrics.disk,\n      });\n    }\n    return list;\n  }, [metrics]);\n\n  const metricProps = {\n    ...(baseUrl !== undefined ? { baseUrl } : {}),\n    range,\n    refreshMs,\n    ...(fetcher !== undefined ? { fetcher } : {}),\n  };\n  const canExpand = expandable && hasMetric(metrics);\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-md border\",\n        VARIANT_CLASSES[variant],\n        sizeClasses.root,\n        className,\n      )}\n      data-size={size}\n      data-variant={variant}\n    >\n      <div\n        className={cn(\"flex items-start justify-between\", sizeClasses.header)}\n      >\n        <div className=\"min-w-0\">\n          <div\n            className={cn(\"flex min-w-0 items-center\", sizeClasses.titleGap)}\n          >\n            <WorkloadIcon\n              icon={workloadIcon}\n              title={kindLabel}\n              className={cn(\"shrink-0 text-muted-foreground\", sizeClasses.icon)}\n            />\n            <span\n              className={cn(\"min-w-0 truncate font-medium\", sizeClasses.name)}\n              title={workload.name}\n            >\n              {workload.name}\n            </span>\n          </div>\n          <div\n            className={cn(\n              \"flex flex-wrap items-center text-muted-foreground\",\n              sizeClasses.meta,\n            )}\n          >\n            <span>{kindLabel}</span>\n            {workload.namespace ? (\n              <HeaderMeta>{workload.namespace}</HeaderMeta>\n            ) : null}\n            {workload.role ? <HeaderMeta>{workload.role}</HeaderMeta> : null}\n            {replicaText ? <HeaderMeta>{replicaText}</HeaderMeta> : null}\n            {workload.createdAt !== undefined ? (\n              <HeaderMeta>\n                age <Timestamp value={workload.createdAt} format=\"relative\" />\n              </HeaderMeta>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {statusLabel ? (\n            <span title={workload.status?.message}>\n              <Badge\n                tone={workloadStatusTone(workload.status)}\n                variant=\"soft\"\n                size={sizeClasses.statusSize}\n              >\n                {statusLabel}\n              </Badge>\n            </span>\n          ) : null}\n          {canExpand ? (\n            <button\n              type=\"button\"\n              aria-label={`Open ${workload.name} history`}\n              title=\"History\"\n              onClick={() => setExpanded(true)}\n              className={cn(\n                \"inline-flex items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n                sizeClasses.action,\n              )}\n            >\n              <Icon\n                icon={UiFullscreen}\n                width={sizeClasses.actionIcon}\n                height={sizeClasses.actionIcon}\n              />\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      {hasMetric(metrics) ? (\n        <div\n          className={cn(\n            \"grid items-start gap-3\",\n            sizeClasses.metricVariant === \"cell\"\n              ? sizeClasses.metricGrid\n              : cn(\n                  metricGridClass(panelMetrics.length),\n                  sizeClasses.metricGrid,\n                ),\n          )}\n        >\n          {metrics.cpu ? (\n            <TimeseriesCoreBars\n              title={metrics.cpu.title ?? \"CPU\"}\n              icon={metrics.cpu.icon ?? UiChip}\n              value={metrics.cpu.value}\n              {...(metrics.cpu.max !== undefined\n                ? { max: metrics.cpu.max }\n                : {})}\n              {...(metrics.cpu.thresholds\n                ? { thresholds: metrics.cpu.thresholds }\n                : {})}\n              {...(metrics.cpu.orientation\n                ? { orientation: metrics.cpu.orientation }\n                : {})}\n              {...(metrics.cpu.showValue !== undefined\n                ? { showValue: metrics.cpu.showValue }\n                : {})}\n              variant={sizeClasses.metricVariant}\n              {...metricProps}\n            />\n          ) : null}\n          {metrics.memory ? (\n            <TimeseriesCoreBars\n              title={metrics.memory.title ?? \"Memory\"}\n              icon={metrics.memory.icon ?? UiMemoryStick}\n              value={metrics.memory.value}\n              unit={MEMORY_BAR_UNIT}\n              variant={sizeClasses.metricVariant}\n              {...(metrics.memory.max !== undefined\n                ? { max: metrics.memory.max }\n                : {})}\n              {...(metrics.memory.thresholds\n                ? { thresholds: metrics.memory.thresholds }\n                : {})}\n              {...metricProps}\n            />\n          ) : null}\n          {metrics.disk ? (\n            <TimeseriesGauge\n              title={metrics.disk.title ?? \"Disk\"}\n              icon={metrics.disk.icon ?? UiHardDrive}\n              value={metrics.disk.value}\n              unit={metrics.disk.unit ?? \"bytes\"}\n              shape=\"linear\"\n              expandable={false}\n              centerDisplay={metrics.disk.centerDisplay ?? \"value\"}\n              variant={sizeClasses.metricVariant}\n              {...(metrics.disk.max !== undefined\n                ? { max: metrics.disk.max }\n                : {})}\n              {...(metrics.disk.thresholds\n                ? { thresholds: metrics.disk.thresholds }\n                : {})}\n              {...metricProps}\n            />\n          ) : null}\n        </div>\n      ) : (\n        <div\n          className={cn(\n            \"rounded-md border border-dashed border-border text-center text-muted-foreground\",\n            sizeClasses.empty,\n          )}\n        >\n          No metrics configured\n        </div>\n      )}\n\n      <Modal\n        open={expanded}\n        onClose={() => setExpanded(false)}\n        title={`${workload.name} history`}\n        size=\"xl\"\n      >\n        <div className=\"flex flex-col gap-3\">\n          {panelMetrics.map(({ key, title, unit, icon, metric }) => (\n            <TimeseriesPanel\n              key={key}\n              title={title}\n              icon={icon}\n              series={metricSeries(metric)}\n              {...(unit ? { unit } : {})}\n              {...metricProps}\n              expandable={false}\n            />\n          ))}\n        </div>\n      </Modal>\n    </div>\n  );\n}\n"],"names":["K8SService","K8SIngress","K8SDeployment","K8SStatefulset","K8SPod","jsx","Icon","jsxs","useState","workloadKindLabel","workloadStatusLabel","formatReplicaCounts","useMemo","UiChip","UiMemoryStick","UiHardDrive","cn","Timestamp","Badge","workloadStatusTone","UiFullscreen","TimeseriesCoreBars","TimeseriesGauge","Modal","TimeseriesPanel"],"mappings":"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"}

package/dist/data/WorkloadCard.d.ts

@@ -17,8 +17,9 @@ export type WorkloadCardVariant = "default" | "outline" | "subtle" | "elevated"
 /**
  * WorkloadCard is a compact resource card for Kubernetes-style workloads. It
  * shows workload identity, status, replica/age metadata, and CPU/memory/disk
- * utilization backed by the existing time-series primitives. Callers own the
- * metric ids; the card only composes the supplied series.
+ * utilization backed by the existing time-series primitives: CPU and memory as
+ * core-style bars (memory at one bar per GB) and disk as a linear progress bar.
+ * Callers own the metric ids; the card only composes the supplied series.
  */
 export declare function WorkloadCard({ workload, metrics, baseUrl, range, refreshMs, expandable, size, variant, fetcher, className, }: WorkloadCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=WorkloadCard.d.ts.map

package/dist/data/WorkloadCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkloadCard.d.ts","sourceRoot":"","sources":["../../src/data/WorkloadCard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAOL,KAAK,mBAAmB,EAExB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,QAAQ,GACR,UAAU,GACV,OAAO,CAAC;AAmJZ;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAY,EACZ,SAAgB,EAChB,UAAiB,EACjB,IAAW,EACX,OAAmB,EACnB,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,2CAyOnB"}
+{"version":3,"file":"WorkloadCard.d.ts","sourceRoot":"","sources":["../../src/data/WorkloadCard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAOL,KAAK,mBAAmB,EAExB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,QAAQ,GACR,UAAU,GACV,OAAO,CAAC;AAuJZ;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAY,EACZ,SAAgB,EAChB,UAAiB,EACjB,IAAW,EACX,OAAmB,EACnB,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,2CAwOnB"}

package/dist/data/WorkloadCard.js

@@ -77,6 +77,7 @@ function metricGridClass(count) {
   if (count === 2) return "grid-cols-2";
   return "grid-cols-3";
 }
+const MEMORY_BAR_UNIT = { perBar: 1024 ** 3, label: "GB", barLabel: "GB" };
 function WorkloadIcon({
   icon,
   title,
@@ -299,14 +300,12 @@ function WorkloadCard({
                 }
               ) : null,
               metrics.memory ? /* @__PURE__ */ jsx(
-                TimeseriesGauge,
+                TimeseriesCoreBars,
                 {
                   title: metrics.memory.title ?? "Memory",
                   icon: metrics.memory.icon ?? UiMemoryStick,
                   value: metrics.memory.value,
-                  unit: metrics.memory.unit ?? "bytes",
-                  expandable: false,
-                  centerDisplay: metrics.memory.centerDisplay ?? "value",
+                  unit: MEMORY_BAR_UNIT,
                   variant: sizeClasses.metricVariant,
                   ...metrics.memory.max !== void 0 ? { max: metrics.memory.max } : {},
                   ...metrics.memory.thresholds ? { thresholds: metrics.memory.thresholds } : {},
@@ -320,6 +319,7 @@ function WorkloadCard({
                   icon: metrics.disk.icon ?? UiHardDrive,
                   value: metrics.disk.value,
                   unit: metrics.disk.unit ?? "bytes",
+                  shape: "linear",
                   expandable: false,
                   centerDisplay: metrics.disk.centerDisplay ?? "value",
                   variant: sizeClasses.metricVariant,