@flanksource/clicky-ui 0.3.56 → 0.3.58

package/dist/data/traces/otel/OperationList.d.ts

@@ -0,0 +1,10 @@
+import { OperationStats } from './api.js';
+/** The root operations of the window with their counts and p50/p95; choosing one filters to it, "All operations" clears it. */
+export declare function OperationList({ stats, selected, onSelect, hideSingle }: {
+    stats: OperationStats[];
+    /** The one root operation included, "" for none, undefined for any other selection. */
+    selected: string | undefined;
+    onSelect: (operation: string) => void;
+    hideSingle: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=OperationList.d.ts.map

package/dist/data/traces/otel/OperationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationList.d.ts","sourceRoot":"","sources":["../../../../src/data/traces/otel/OperationList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGtD,+HAA+H;AAC/H,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE;IACvE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,OAAO,CAAC;CACrB,+BAgCA"}

package/dist/data/traces/otel/OperationList.js

@@ -0,0 +1,64 @@
+import { duration } from "./api.js";
+import { shortOperation } from "./query.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/data/traces/otel/OperationList.tsx
+/** The root operations of the window with their counts and p50/p95; choosing one filters to it, "All operations" clears it. */
+function OperationList({ stats, selected, onSelect, hideSingle }) {
+	const total = stats.reduce((sum, stat) => sum + stat.count, 0);
+	const item = (operation, label, body, dim = false) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-pressed": selected === operation,
+		onClick: () => onSelect(operation),
+		className: `w-full rounded-md px-density-2 py-1.5 text-left text-xs ${selected === operation ? "bg-accent" : "hover:bg-muted"} ${dim ? "opacity-50" : ""}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block truncate text-sm font-medium",
+			title: operation || label,
+			children: label
+		}), body]
+	}) }, operation || "all");
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "min-w-0 space-y-2 rounded-lg border border-border p-density-2",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "px-density-2 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+				children: "Root operations"
+			}),
+			/* @__PURE__ */ jsxs("ul", {
+				className: "space-y-0.5",
+				children: [item("", "All operations", /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [
+						total.toLocaleString(),
+						" ",
+						total === 1 ? "trace" : "traces"
+					]
+				})), stats.map((stat) => item(stat.operation, shortOperation(stat.operation), /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5 text-muted-foreground",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "tabular-nums",
+						children: [
+							stat.count.toLocaleString(),
+							" ",
+							stat.singleSpan ? "single-span" : stat.count === 1 ? "trace" : "traces"
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "ml-auto tabular-nums",
+						children: [
+							"p50 ",
+							duration(stat.p50Ms),
+							" · p95 ",
+							duration(stat.p95Ms)
+						]
+					})]
+				}), hideSingle && stat.singleSpan))]
+			}),
+			hideSingle && stats.some((stat) => stat.singleSpan) && /* @__PURE__ */ jsx("p", {
+				className: "px-density-2 text-xs text-muted-foreground",
+				children: "Single-span operations are dimmed while single-span traces are hidden."
+			})
+		]
+	});
+}
+export { OperationList };
+
+//# sourceMappingURL=OperationList.js.map

package/dist/data/traces/otel/OperationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationList.js","names":[],"sources":["../../../../src/data/traces/otel/OperationList.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { duration, type OperationStats } from \"./api\";\nimport { shortOperation } from \"./query\";\n\n/** The root operations of the window with their counts and p50/p95; choosing one filters to it, \"All operations\" clears it. */\nexport function OperationList({ stats, selected, onSelect, hideSingle }: {\n  stats: OperationStats[];\n  /** The one root operation included, \"\" for none, undefined for any other selection. */\n  selected: string | undefined;\n  onSelect: (operation: string) => void;\n  hideSingle: boolean;\n}) {\n  const total = stats.reduce((sum, stat) => sum + stat.count, 0);\n  const item = (operation: string, label: string, body: ReactNode, dim = false) => (\n    <li key={operation || \"all\"}>\n      <button\n        type=\"button\"\n        aria-pressed={selected === operation}\n        onClick={() => onSelect(operation)}\n        className={`w-full rounded-md px-density-2 py-1.5 text-left text-xs ${selected === operation ? \"bg-accent\" : \"hover:bg-muted\"} ${dim ? \"opacity-50\" : \"\"}`}\n      >\n        <span className=\"block truncate text-sm font-medium\" title={operation || label}>{label}</span>\n        {body}\n      </button>\n    </li>\n  );\n  return (\n    <aside className=\"min-w-0 space-y-2 rounded-lg border border-border p-density-2\">\n      <h3 className=\"px-density-2 text-xs font-medium uppercase tracking-wide text-muted-foreground\">Root operations</h3>\n      <ul className=\"space-y-0.5\">\n        {item(\"\", \"All operations\", <span className=\"text-muted-foreground\">{total.toLocaleString()} {total === 1 ? \"trace\" : \"traces\"}</span>)}\n        {stats.map(stat => item(stat.operation, shortOperation(stat.operation), (\n          <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n            <span className=\"tabular-nums\">{stat.count.toLocaleString()} {stat.singleSpan ? \"single-span\" : stat.count === 1 ? \"trace\" : \"traces\"}</span>\n            <span className=\"ml-auto tabular-nums\">p50 {duration(stat.p50Ms)} · p95 {duration(stat.p95Ms)}</span>\n          </span>\n        ), hideSingle && stat.singleSpan))}\n      </ul>\n      {hideSingle && stats.some(stat => stat.singleSpan) && (\n        <p className=\"px-density-2 text-xs text-muted-foreground\">Single-span operations are dimmed while single-span traces are hidden.</p>\n      )}\n    </aside>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAAE,OAAO,UAAU,UAAU,cAMxD;CACD,MAAM,QAAQ,MAAM,QAAQ,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;CAC7D,MAAM,QAAQ,WAAmB,OAAe,MAAiB,MAAM,UACrE,oBAAC,MAAD,EAAA,UACE,qBAAC,UAAD;EACE,MAAK;EACL,gBAAc,aAAa;EAC3B,eAAe,SAAS,SAAS;EACjC,WAAW,2DAA2D,aAAa,YAAY,cAAc,iBAAiB,GAAG,MAAM,eAAe;EAJxJ,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GAAqC,OAAO,aAAa;GAAQ,UAAA;EAAY,CAAA,GAC5F,IACK;CACN,CAAA,EAAA,GAVK,aAAa,KAUlB;CAEN,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,MAAD;IAAI,WAAU;IAAiF,UAAA;GAAmB,CAAA;GAClH,qBAAC,MAAD;IAAI,WAAU;IAAd,UAAA,CACG,KAAK,IAAI,kBAAkB,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAAyC,MAAM,eAAe;MAAE;MAAE,UAAU,IAAI,UAAU;KAAe;IAAC,CAAA,CAAA,GACrI,MAAM,KAAI,SAAQ,KAAK,KAAK,WAAW,eAAe,KAAK,SAAS,GACnE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAgC,KAAK,MAAM,eAAe;OAAE;OAAE,KAAK,aAAa,gBAAgB,KAAK,UAAU,IAAI,UAAU;MAAe;KAC5I,CAAA,GAAA,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAuC;OAAK,SAAS,KAAK,KAAK;OAAE;OAAQ,SAAS,KAAK,KAAK;MAAQ;KAChG,CAAA,CAAA;IACL,CAAA,GAAA,cAAc,KAAK,UAAU,CAAC,CAC/B;;GACH,cAAc,MAAM,MAAK,SAAQ,KAAK,UAAU,KAC/C,oBAAC,KAAD;IAAG,WAAU;IAA6C,UAAA;GAAyE,CAAA;EAEhI;;AAEX"}