@flanksource/clicky-ui/dist/data/diagnostics/DiagnosticsTree.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { Tree } from "../Tree.js";
import { Icon } from "../Icon.js";
import { countProcesses, processLabel, processStateIcon, processStateColor, formatBytes } from "./utils.js";
function DiagnosticsTree({
  root,
  selectedPid,
  expandAll = null,
  onSelect
}) {
  if (!root) {
    return /* @__PURE__ */ jsxs("div", { className: "p-density-6 text-center text-muted-foreground", children: [
      /* @__PURE__ */ jsx(Icon, { name: "svg-spinners:ring-resize", className: "text-3xl text-blue-500" }),
      /* @__PURE__ */ jsx("p", { className: "mt-density-2", children: "Waiting for process diagnostics..." })
    ] });
  }
  if (countProcesses(root) === 0) {
    return /* @__PURE__ */ jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: "No processes available" });
  }
  return /* @__PURE__ */ jsx(
    Tree,
    {
      roots: [root],
      getChildren: (n) => n.children,
      getKey: (n) => n.pid,
      expandAll,
      defaultOpen: (n, depth) => !!n.is_root || depth < 1,
      onSelect: (n) => onSelect(n.pid),
      renderRow: ({ node }) => {
        const selected = node.pid === selectedPid;
        const cpu = node.cpu_percent || 0;
        return /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(
            Icon,
            {
              name: node.is_root ? "codicon:server-process" : "codicon:debug-alt",
              className: node.is_root ? "text-base text-blue-600" : "text-base text-muted-foreground"
            }
          ),
          /* @__PURE__ */ jsx(
            "span",
            {
              className: `truncate ${selected ? "font-semibold text-primary" : "font-medium text-foreground"}`,
              children: processLabel(node)
            }
          ),
          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground shrink-0", children: [
            "pid ",
            node.pid
          ] }),
          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
          node.status && /* @__PURE__ */ jsxs(
            "span",
            {
              className: `inline-flex items-center gap-1 text-xs shrink-0 ${processStateColor(
                node.status
              )}`,
              children: [
                /* @__PURE__ */ jsx(Icon, { name: processStateIcon(node.status) }),
                node.status
              ]
            }
          ),
          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground shrink-0 tabular-nums", children: [
            cpu.toFixed(1),
            "%"
          ] }),
          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground shrink-0 tabular-nums", children: formatBytes(node.rss) })
        ] });
      },
      rowClass: (node) => node.pid === selectedPid ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent"
    }
  );
}
export {
  DiagnosticsTree
};
//# sourceMappingURL=DiagnosticsTree.js.map