@flanksource/clicky-ui 0.2.21 → 0.3.1

package/dist/data/TimeseriesGauge.js

@@ -44,6 +44,8 @@ function TimeseriesGauge({
   expandable = true,
   thresholds = [75, 90],
   centerDisplay = "value",
+  variant = "default",
+  showLabel = true,
   fetcher = defaultFetcher,
   className
 }) {
@@ -83,60 +85,116 @@ 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 readout = centerDisplay === "percent" ? bounded ? `${pct}%` : hasValue ? "n/a" : "—" : hasValue ? formatUnit(usage, unit) : "—";
+  const titleText = `${title}: ${readout}`;
+  const canExpand = expandable && variant === "default";
+  const readoutTone = bounded ? tone : "text-foreground";
   const chartSeries = useMemo(() => {
     const s = [{ id: value.id, label: "value", ...value.transform ? { transform: value.transform } : {} }];
     if (maxSeries) s.push({ id: maxSeries.id, label: "max", ...maxSeries.transform ? { transform: maxSeries.transform } : {} });
     return s;
   }, [value.id, value.transform, maxSeries]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-1", className), 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)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 text-center text-sm font-semibold text-foreground", children: centerDisplay === "percent" ? bounded ? `${pct}%` : hasValue ? "n/a" : "—" : hasValue ? formatUnit(usage, unit) : "—" }),
-      expandable && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Expand chart",
-          onClick: () => setExpanded(true),
-          className: "absolute right-0 top-0 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, width: 12, height: 12 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-      icon ? /* @__PURE__ */ jsx(GaugeIcon, { icon }) : null,
-      /* @__PURE__ */ jsx("span", { children: title })
-    ] }),
-    expandable && /* @__PURE__ */ jsx(Modal, { open: expanded, onClose: () => setExpanded(false), title, size: "xl", children: /* @__PURE__ */ jsx(
-      TimeseriesPanel,
+  if (variant === "cell") {
+    return /* @__PURE__ */ jsxs(
+      "span",
       {
-        title,
-        ...icon ? { icon } : {},
-        ...unit ? { unit } : {},
-        baseUrl,
-        series: chartSeries,
-        range,
-        refreshMs,
-        expandable: false,
-        fetcher
+        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,
+        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)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("span", { className: cn("shrink-0 font-semibold tabular-nums", readoutTone), children: readout })
+        ]
       }
-    ) })
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col items-center gap-1", className),
+      title: !showLabel ? titleText : void 0,
+      "aria-label": !showLabel ? titleText : void 0,
+      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)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 text-center text-sm font-semibold text-foreground", children: readout }),
+          canExpand && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Expand chart",
+              onClick: () => setExpanded(true),
+              className: "absolute right-0 top-0 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, width: 12, height: 12 })
+            }
+          )
+        ] }),
+        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
+          }
+        ) })
+      ]
+    }
+  );
 }
 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 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  /** 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  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\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  return (\n    <div className={cn(\"flex flex-col items-center gap-1\", className)}>\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          {centerDisplay === \"percent\"\n            ? bounded\n              ? `${pct}%`\n              : hasValue\n                ? \"n/a\"\n                : \"—\"\n            : hasValue\n              ? formatUnit(usage, unit)\n              : \"—\"}\n        </span>\n        {expandable && (\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      <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n        {icon ? <GaugeIcon icon={icon} /> : null}\n        <span>{title}</span>\n      </div>\n\n      {expandable && (\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\";\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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"}

package/dist/data/WorkloadCard.cjs

@@ -0,0 +1,371 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const mi = require("@flanksource/icons/mi");
+const utils = require("../lib/utils.cjs");
+const Modal = require("../overlay/Modal.cjs");
+const Badge = require("./Badge.cjs");
+const Timestamp = require("./cells/Timestamp.cjs");
+const Icon = require("./Icon.cjs");
+const TimeseriesCoreBars = require("./TimeseriesCoreBars.cjs");
+const TimeseriesGauge = require("./TimeseriesGauge.cjs");
+const TimeseriesPanel = require("./TimeseriesPanel.cjs");
+const WorkloadCard_model = require("./WorkloadCard.model.cjs");
+const UiChip = require("../icons/components/UiChip.cjs");
+const UiMemoryStick = require("../icons/components/UiMemoryStick.cjs");
+const UiHardDrive = require("../icons/components/UiHardDrive.cjs");
+const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
+const KIND_ICONS = {
+  service: mi.K8SService,
+  ingress: mi.K8SIngress,
+  deployment: mi.K8SDeployment,
+  statefulset: mi.K8SStatefulset,
+  pod: mi.K8SPod
+};
+const SIZE_CLASSES = {
+  sm: {
+    root: "p-2",
+    header: "mb-2 gap-2",
+    titleGap: "gap-1",
+    icon: "h-3.5 w-3.5",
+    name: "text-xs",
+    meta: "mt-0.5 gap-x-1.5 gap-y-0.5 text-[11px] leading-4",
+    statusSize: "xxs",
+    action: "h-5 w-5",
+    actionIcon: 12,
+    metricGrid: "grid-cols-1 gap-1.5",
+    metricVariant: "cell",
+    empty: "px-2 py-3 text-[11px]"
+  },
+  md: {
+    root: "p-3",
+    header: "mb-3 gap-2",
+    titleGap: "gap-1.5",
+    icon: "h-4 w-4",
+    name: "text-sm",
+    meta: "mt-0.5 gap-x-2 gap-y-0.5 text-xs",
+    statusSize: "xs",
+    action: "h-6 w-6",
+    actionIcon: 14,
+    metricGrid: "gap-3",
+    metricVariant: "default",
+    empty: "px-3 py-4 text-xs"
+  },
+  lg: {
+    root: "p-4",
+    header: "mb-4 gap-3",
+    titleGap: "gap-2",
+    icon: "h-5 w-5",
+    name: "text-base",
+    meta: "mt-1 gap-x-2 gap-y-1 text-xs",
+    statusSize: "sm",
+    action: "h-7 w-7",
+    actionIcon: 16,
+    metricGrid: "gap-4",
+    metricVariant: "default",
+    empty: "px-4 py-6 text-sm"
+  }
+};
+const VARIANT_CLASSES = {
+  default: "border-border bg-card text-card-foreground",
+  outline: "border-border bg-background text-foreground",
+  subtle: "border-transparent bg-muted/35 text-foreground",
+  elevated: "border-border/70 bg-card text-card-foreground shadow-sm",
+  ghost: "border-transparent bg-transparent text-foreground"
+};
+function metricGridClass(count) {
+  if (count <= 1) return "grid-cols-1";
+  if (count === 2) return "grid-cols-2";
+  return "grid-cols-3";
+}
+function WorkloadIcon({
+  icon,
+  title,
+  className
+}) {
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, title, ...className ? { className } : {} });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, title, ...className ? { className } : {} });
+}
+function metricSeries(metric) {
+  const series = [
+    {
+      id: metric.value.id,
+      label: metric.valueLabel ?? "usage",
+      ...metric.value.transform ? { transform: metric.value.transform } : {}
+    }
+  ];
+  if (typeof metric.max === "object") {
+    series.push({
+      id: metric.max.id,
+      label: metric.maxLabel ?? "limit",
+      ...metric.max.transform ? { transform: metric.max.transform } : {}
+    });
+  }
+  return series;
+}
+function hasMetric(metrics) {
+  return Boolean(metrics.cpu || metrics.memory || metrics.disk);
+}
+function HeaderMeta({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "h-1 w-1 shrink-0 rounded-full bg-muted-foreground/40",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children })
+  ] });
+}
+function WorkloadCard({
+  workload,
+  metrics,
+  baseUrl,
+  range = "1h",
+  refreshMs = 5e3,
+  expandable = true,
+  size = "md",
+  variant = "default",
+  fetcher,
+  className
+}) {
+  var _a;
+  const [expanded, setExpanded] = react.useState(false);
+  const kindLabel = WorkloadCard_model.workloadKindLabel(workload.kind);
+  const statusLabel = WorkloadCard_model.workloadStatusLabel(workload.status);
+  const replicaText = WorkloadCard_model.formatReplicaCounts(workload.replicas);
+  const workloadIcon = workload.icon ?? KIND_ICONS[workload.kind];
+  const sizeClasses = SIZE_CLASSES[size];
+  const panelMetrics = react.useMemo(() => {
+    const list = [];
+    if (metrics.cpu) {
+      list.push({
+        key: "cpu",
+        title: metrics.cpu.title ?? "CPU",
+        unit: metrics.cpu.unit ?? "short",
+        icon: metrics.cpu.icon ?? UiChip.UiChip,
+        metric: metrics.cpu
+      });
+    }
+    if (metrics.memory) {
+      list.push({
+        key: "memory",
+        title: metrics.memory.title ?? "Memory",
+        unit: metrics.memory.unit ?? "bytes",
+        icon: metrics.memory.icon ?? UiMemoryStick.UiMemoryStick,
+        metric: metrics.memory
+      });
+    }
+    if (metrics.disk) {
+      list.push({
+        key: "disk",
+        title: metrics.disk.title ?? "Disk",
+        unit: metrics.disk.unit ?? "bytes",
+        icon: metrics.disk.icon ?? UiHardDrive.UiHardDrive,
+        metric: metrics.disk
+      });
+    }
+    return list;
+  }, [metrics]);
+  const metricProps = {
+    ...baseUrl !== void 0 ? { baseUrl } : {},
+    range,
+    refreshMs,
+    ...fetcher !== void 0 ? { fetcher } : {}
+  };
+  const canExpand = expandable && hasMetric(metrics);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "w-full rounded-md border",
+        VARIANT_CLASSES[variant],
+        sizeClasses.root,
+        className
+      ),
+      "data-size": size,
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn("flex items-start justify-between", sizeClasses.header),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: utils.cn("flex min-w-0 items-center", sizeClasses.titleGap),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        WorkloadIcon,
+                        {
+                          icon: workloadIcon,
+                          title: kindLabel,
+                          className: utils.cn("shrink-0 text-muted-foreground", sizeClasses.icon)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: utils.cn("min-w-0 truncate font-medium", sizeClasses.name),
+                          title: workload.name,
+                          children: workload.name
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: utils.cn(
+                      "flex flex-wrap items-center text-muted-foreground",
+                      sizeClasses.meta
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: kindLabel }),
+                      workload.namespace ? /* @__PURE__ */ jsxRuntime.jsx(HeaderMeta, { children: workload.namespace }) : null,
+                      workload.role ? /* @__PURE__ */ jsxRuntime.jsx(HeaderMeta, { children: workload.role }) : null,
+                      replicaText ? /* @__PURE__ */ jsxRuntime.jsx(HeaderMeta, { children: replicaText }) : null,
+                      workload.createdAt !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(HeaderMeta, { children: [
+                        "age ",
+                        /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, { value: workload.createdAt, format: "relative" })
+                      ] }) : null
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: (_a = workload.status) == null ? void 0 : _a.message, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Badge.Badge,
+                  {
+                    tone: WorkloadCard_model.workloadStatusTone(workload.status),
+                    variant: "soft",
+                    size: sizeClasses.statusSize,
+                    children: statusLabel
+                  }
+                ) }) : null,
+                canExpand ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Open ${workload.name} history`,
+                    title: "History",
+                    onClick: () => setExpanded(true),
+                    className: utils.cn(
+                      "inline-flex items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      sizeClasses.action
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Icon.Icon,
+                      {
+                        icon: UiFullscreen.UiFullscreen,
+                        width: sizeClasses.actionIcon,
+                        height: sizeClasses.actionIcon
+                      }
+                    )
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        hasMetric(metrics) ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "grid items-start gap-3",
+              sizeClasses.metricVariant === "cell" ? sizeClasses.metricGrid : utils.cn(
+                metricGridClass(panelMetrics.length),
+                sizeClasses.metricGrid
+              )
+            ),
+            children: [
+              metrics.cpu ? /* @__PURE__ */ jsxRuntime.jsx(
+                TimeseriesCoreBars.TimeseriesCoreBars,
+                {
+                  title: metrics.cpu.title ?? "CPU",
+                  icon: metrics.cpu.icon ?? UiChip.UiChip,
+                  value: metrics.cpu.value,
+                  ...metrics.cpu.max !== void 0 ? { max: metrics.cpu.max } : {},
+                  ...metrics.cpu.thresholds ? { thresholds: metrics.cpu.thresholds } : {},
+                  ...metrics.cpu.orientation ? { orientation: metrics.cpu.orientation } : {},
+                  ...metrics.cpu.showValue !== void 0 ? { showValue: metrics.cpu.showValue } : {},
+                  variant: sizeClasses.metricVariant,
+                  ...metricProps
+                }
+              ) : null,
+              metrics.memory ? /* @__PURE__ */ jsxRuntime.jsx(
+                TimeseriesGauge.TimeseriesGauge,
+                {
+                  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",
+                  variant: sizeClasses.metricVariant,
+                  ...metrics.memory.max !== void 0 ? { max: metrics.memory.max } : {},
+                  ...metrics.memory.thresholds ? { thresholds: metrics.memory.thresholds } : {},
+                  ...metricProps
+                }
+              ) : null,
+              metrics.disk ? /* @__PURE__ */ jsxRuntime.jsx(
+                TimeseriesGauge.TimeseriesGauge,
+                {
+                  title: metrics.disk.title ?? "Disk",
+                  icon: metrics.disk.icon ?? UiHardDrive.UiHardDrive,
+                  value: metrics.disk.value,
+                  unit: metrics.disk.unit ?? "bytes",
+                  expandable: false,
+                  centerDisplay: metrics.disk.centerDisplay ?? "value",
+                  variant: sizeClasses.metricVariant,
+                  ...metrics.disk.max !== void 0 ? { max: metrics.disk.max } : {},
+                  ...metrics.disk.thresholds ? { thresholds: metrics.disk.thresholds } : {},
+                  ...metricProps
+                }
+              ) : null
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "rounded-md border border-dashed border-border text-center text-muted-foreground",
+              sizeClasses.empty
+            ),
+            children: "No metrics configured"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Modal.Modal,
+          {
+            open: expanded,
+            onClose: () => setExpanded(false),
+            title: `${workload.name} history`,
+            size: "xl",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: panelMetrics.map(({ key, title, unit, icon, metric }) => /* @__PURE__ */ jsxRuntime.jsx(
+              TimeseriesPanel.TimeseriesPanel,
+              {
+                title,
+                icon,
+                series: metricSeries(metric),
+                ...unit ? { unit } : {},
+                ...metricProps,
+                expandable: false
+              },
+              key
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+exports.WorkloadCard = WorkloadCard;
+//# sourceMappingURL=WorkloadCard.cjs.map