@kwirthmagnify/kwirth-homepage-matrix 0.1.1

package/front.js

@@ -0,0 +1,355 @@
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // kwirth-globals:react
+  var require_react = __commonJS({
+    "kwirth-globals:react"(exports, module) {
+      var _m = window.__kwirth__.React;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@mui/material
+  var require_material = __commonJS({
+    "kwirth-globals:@mui/material"(exports, module) {
+      var _m = window.__kwirth__.MUI.material;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@mui/icons-material
+  var require_icons_material = __commonJS({
+    "kwirth-globals:@mui/icons-material"(exports, module) {
+      var _m = window.__kwirth__.MUI.icons;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // src/front/Matrix.tsx
+  var import_react = __toESM(require_react(), 1);
+  var import_material = __toESM(require_material(), 1);
+  var import_icons_material = __toESM(require_icons_material(), 1);
+  var MATRIX_GREEN = "#00ff41";
+  var MATRIX_DIM = "#006620";
+  var MATRIX_GLOW = "rgba(0,255,65,0.3)";
+  var EVENTS_LIMIT = 25;
+  var POLL_INTERVAL_MS = 1e4;
+  var MatrixRain = () => {
+    const canvasRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const fontSize = 22;
+      const chars = "\u30A2\u30A4\u30A6\u30A8\u30AA\u30AB\u30AD\u30AF\u30B1\u30B3\u30B5\u30B7\u30B9\u30BB\u30BD\u30BF\u30C1\u30C4\u30C6\u30C8\u30CA\u30CB\u30CC\u30CD\u30CE\u30CF\u30D2\u30D5\u30D8\u30DB\u30DE\u30DF\u30E0\u30E1\u30E2\u30E4\u30E6\u30E8\u30E9\u30EA\u30EB\u30EC\u30ED\u30EF\u30F2\u30F30123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      let drops = [];
+      let animId;
+      let frame = 0;
+      const SPEED = 12;
+      const resize = (w, h) => {
+        canvas.width = w;
+        canvas.height = h;
+        const cols = Math.floor(w / fontSize);
+        drops = Array.from({ length: cols }, () => -Math.floor(Math.random() * (h / fontSize) * 4));
+      };
+      const draw = () => {
+        frame++;
+        ctx.fillStyle = "rgba(0,0,0,0.02)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.font = `${fontSize}px monospace`;
+        if (frame % SPEED === 0) {
+          for (let i = 0; i < drops.length; i++) {
+            if (drops[i] > 0) {
+              const bright = Math.random() > 0.97;
+              ctx.fillStyle = bright ? "#ccffcc" : MATRIX_GREEN;
+              ctx.fillText(chars[Math.floor(Math.random() * chars.length)], i * fontSize, drops[i] * fontSize);
+            }
+            if (drops[i] * fontSize > canvas.height) {
+              drops[i] = -Math.floor(Math.random() * (canvas.height / fontSize) * 3 + canvas.height / fontSize * 2);
+            }
+            drops[i]++;
+          }
+        }
+        animId = requestAnimationFrame(draw);
+      };
+      const observer = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        resize(Math.round(width), Math.round(height));
+      });
+      observer.observe(canvas);
+      animId = requestAnimationFrame(draw);
+      return () => {
+        cancelAnimationFrame(animId);
+        observer.disconnect();
+      };
+    }, []);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "canvas",
+      {
+        ref: canvasRef,
+        style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", display: "block" }
+      }
+    );
+  };
+  var StatusLight = ({ online, events, animationDelay }) => {
+    const hasError = online && (events ?? []).some((e) => e.type !== "Normal" && e.type !== "Warning");
+    const hasWarning = online && !hasError && (events ?? []).some((e) => e.type === "Warning");
+    const color = !online ? "#ff3333" : hasError ? "#ff3333" : hasWarning ? "#ff9800" : MATRIX_GREEN;
+    const label = !online ? "Offline" : hasError ? "Errors detected" : hasWarning ? "Warnings detected" : "Online";
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: label }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
+      width: 12,
+      height: 12,
+      borderRadius: "50%",
+      bgcolor: color,
+      boxShadow: `0 0 6px 2px ${color}`,
+      transition: "all 0.3s ease",
+      cursor: "default",
+      animation: online && !hasError && !hasWarning ? "matrix-status-pulse 2.5s ease-in-out infinite" : "none",
+      animationDelay: animationDelay ?? "0s"
+    } }));
+  };
+  var MetricBar = ({ label, value }) => {
+    const barRef = (0, import_react.useRef)(null);
+    const [cols, setCols] = (0, import_react.useState)(10);
+    (0, import_react.useEffect)(() => {
+      if (!barRef.current) return;
+      const obs = new ResizeObserver(() => {
+        if (barRef.current) setCols(Math.max(5, Math.floor(barRef.current.offsetWidth / 6)));
+      });
+      obs.observe(barRef.current);
+      return () => obs.disconnect();
+    }, []);
+    const filled = Math.round(value * cols / 100);
+    const bar = "\u2588".repeat(filled) + "\u2591".repeat(cols - filled);
+    const color = value > 90 ? "#ff3333" : value > 80 ? "#b36200" : MATRIX_GREEN;
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", alignItems: "center", spacing: 0 }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.65rem", color: MATRIX_DIM, width: 28, flexShrink: 0 } }, label), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { ref: barRef, sx: { fontFamily: "monospace", fontSize: "0.65rem", color, letterSpacing: "-0.5px", flex: 1, overflow: "hidden", whiteSpace: "nowrap" } }, bar), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.65rem", color, flexShrink: 0, pl: 0.5, width: 32, textAlign: "right" } }, Math.round(value), "%"));
+  };
+  var MiniInfoCard = ({ label, value, stretch }) => /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
+    border: `1px solid ${MATRIX_DIM}`,
+    borderRadius: 1,
+    px: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 70,
+    ...stretch ? { height: "100%" } : { py: 0.75 }
+  } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "1rem", color: MATRIX_GREEN, lineHeight: 1.2 } }, value), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.78rem", color: MATRIX_DIM, lineHeight: 1.2 } }, label));
+  var EventLog = ({ events }) => {
+    const boxRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;
+    }, [events]);
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { ref: boxRef, sx: {
+      flex: 1,
+      overflowY: "auto",
+      overflowX: "auto",
+      fontFamily: "monospace",
+      fontSize: "0.55rem",
+      lineHeight: 1.9,
+      color: MATRIX_DIM,
+      bgcolor: "rgba(0,18,6,0.92)",
+      border: `1px solid ${MATRIX_DIM}`,
+      borderRadius: 1,
+      p: 1,
+      whiteSpace: "nowrap",
+      "&::-webkit-scrollbar": { width: 4, height: 4 },
+      "&::-webkit-scrollbar-thumb": { bgcolor: MATRIX_DIM, borderRadius: 2 }
+    } }, events.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { color: MATRIX_GREEN, opacity: 0.4 } }, "// follow the white rabbit") : [...events].reverse().map((e, i) => {
+      const d = new Date(e.time);
+      const t = [d.getHours(), d.getMinutes(), d.getSeconds()].map((n) => String(n).padStart(2, "0")).join(":");
+      return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { key: i, sx: { color: e.type === "Warning" ? "#ff9800" : MATRIX_GREEN, mb: 0.2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "span", sx: { color: MATRIX_DIM, mr: 0.5 } }, t), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "span", sx: { mr: 0.5 } }, "[", e.reason, "]"), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "span", sx: { color: MATRIX_DIM, mr: 0.5 } }, e.object), e.message);
+    }));
+  };
+  var Matrix = (props) => {
+    (0, import_react.useEffect)(() => {
+      const id = "matrix-keyframes";
+      if (!document.getElementById(id)) {
+        const style = document.createElement("style");
+        style.id = id;
+        style.textContent = `@keyframes matrix-status-pulse {
+                0%, 100% { opacity: 0.25; box-shadow: none; }
+                50% { opacity: 0.85; box-shadow: 0 0 7px 2px ${MATRIX_GREEN}; }
+            }`;
+        document.head.appendChild(style);
+      }
+      return () => {
+        document.getElementById("matrix-keyframes")?.remove();
+      };
+    }, []);
+    const containerRef = (0, import_react.useRef)(null);
+    const [containerHeight, setContainerHeight] = import_react.default.useState(0);
+    (0, import_react.useEffect)(() => {
+      const observer = new ResizeObserver(() => {
+        if (!containerRef.current) return;
+        const { top } = containerRef.current.getBoundingClientRect();
+        setContainerHeight(window.innerHeight - top);
+      });
+      observer.observe(document.body);
+      return () => observer.disconnect();
+    }, [containerRef.current]);
+    const [clusterMetrics, setClusterMetrics] = (0, import_react.useState)({});
+    (0, import_react.useEffect)(() => {
+      if (!props.getClusterMetrics) return;
+      const fetchAll = () => {
+        props.clusters.forEach((cluster) => {
+          props.getClusterMetrics(cluster.name).then((m) => {
+            if (m) setClusterMetrics((prev) => ({ ...prev, [cluster.name]: m }));
+          });
+        });
+      };
+      fetchAll();
+      const timer = setInterval(fetchAll, POLL_INTERVAL_MS);
+      return () => clearInterval(timer);
+    }, [props.clusters, props.getClusterMetrics]);
+    const [clusterEvents, setClusterEvents] = (0, import_react.useState)({});
+    (0, import_react.useEffect)(() => {
+      if (!props.getClusterEvents) return;
+      const fetchAll = () => {
+        props.clusters.forEach((cluster) => {
+          props.getClusterEvents(cluster.name, EVENTS_LIMIT).then((events) => {
+            setClusterEvents((prev) => ({ ...prev, [cluster.name]: events }));
+          });
+        });
+      };
+      fetchAll();
+      const timer = setInterval(fetchAll, POLL_INTERVAL_MS);
+      return () => clearInterval(timer);
+    }, [props.clusters, props.getClusterEvents]);
+    const launchMagnify = (clusterName) => {
+      props.onHomepageSelectTab({
+        name: clusterName,
+        description: "",
+        channel: "magnify",
+        channelObject: { clusterName, view: "cluster", namespace: "", group: "", pod: "", container: "" }
+      });
+    };
+    const launchTopology = (clusterName) => {
+      props.onHomepageSelectTab({
+        name: clusterName,
+        description: "",
+        channel: "topology",
+        channelObject: { clusterName, view: "cluster", namespace: "", group: "", pod: "", container: "" }
+      });
+    };
+    const hasMagnify = props.frontChannels.has("magnify");
+    const hasTopology = props.frontChannels.has("topology");
+    const magnifyClass = props.frontChannels.get("magnify");
+    const magnifyIcon = magnifyClass ? new magnifyClass().getChannelIcon() : null;
+    const topologyClass = props.frontChannels.get("topology");
+    const topologyIcon = topologyClass ? new topologyClass().getChannelIcon() : /* @__PURE__ */ import_react.default.createElement(import_icons_material.AccountTree, null);
+    const matrixButtonSx = {
+      fontFamily: "monospace",
+      "&:not(.Mui-disabled)": { color: MATRIX_GREEN, borderColor: MATRIX_GREEN },
+      "&:hover:not(.Mui-disabled)": {
+        borderColor: MATRIX_GREEN,
+        bgcolor: "rgba(0,255,65,0.1)",
+        boxShadow: `0 0 8px ${MATRIX_GLOW}`
+      }
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { ref: containerRef, sx: { position: "relative", width: "100%", height: `${containerHeight}px`, overflow: "hidden", bgcolor: "#000" } }, /* @__PURE__ */ import_react.default.createElement(MatrixRain, null), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
+      position: "relative",
+      zIndex: 1,
+      p: 3,
+      height: "100%",
+      overflowY: "auto",
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: 4,
+      alignContent: "start"
+    } }, props.clusters.map((cluster, idx) => {
+      const clusterChannelIds = new Set((cluster.kwirthData?.channels ?? []).map((ch) => ch.id));
+      const clusterHasMagnify = hasMagnify && clusterChannelIds.has("magnify");
+      const clusterHasTopology = hasTopology && clusterChannelIds.has("topology");
+      return /* @__PURE__ */ import_react.default.createElement(import_material.Card, { key: cluster.name, variant: "outlined", sx: {
+        bgcolor: "rgba(0,0,0,0.80)",
+        border: `1px solid ${MATRIX_GREEN}`,
+        boxShadow: `0 0 10px ${MATRIX_GLOW}, inset 0 0 10px rgba(0,255,65,0.05)`,
+        color: MATRIX_GREEN,
+        backdropFilter: "blur(2px)",
+        height: `${Math.floor((containerHeight - 24 * 2 - 24) / 2) - 4}px`,
+        overflow: "hidden"
+      } }, /* @__PURE__ */ import_react.default.createElement(import_material.CardContent, { sx: { height: "100%", display: "flex", flexDirection: "row", gap: 2, py: 2, "&:last-child": { pb: 2 } } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", justifyContent: "space-between", sx: { flex: "0 0 40%", minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", alignItems: "center", spacing: 1 }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "h6", sx: {
+        fontFamily: "monospace",
+        color: MATRIX_GREEN,
+        lineHeight: 1.3,
+        textShadow: `0 0 8px ${MATRIX_GREEN}`,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        m: 0
+      } }, cluster.name), /* @__PURE__ */ import_react.default.createElement(StatusLight, { online: !!clusterMetrics[cluster.name], events: clusterEvents[cluster.name], animationDelay: `${idx * 0.7 % 2.5}s` })), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "body2", sx: {
+        fontFamily: "monospace",
+        color: MATRIX_DIM,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      } }, cluster.url), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.25 }, /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "CPU", value: clusterMetrics[cluster.name].cpu }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "MEM", value: clusterMetrics[cluster.name].memory }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "POD", value: clusterMetrics[cluster.name].maxPods > 0 ? clusterMetrics[cluster.name].pods / clusterMetrics[cluster.name].maxPods * 100 : 0 }))), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1.5, sx: { justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "vCPUs", value: clusterMetrics[cluster.name].vcpus != null ? String(clusterMetrics[cluster.name].vcpus) : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "RAM", value: clusterMetrics[cluster.name].totalMemoryBytes != null ? `${(clusterMetrics[cluster.name].totalMemoryBytes / 1073741824).toFixed(0)}G` : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "Pods", value: clusterMetrics[cluster.name].pods ? String(clusterMetrics[cluster.name].pods) : "--" })), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.75 }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, (cluster.kwirthData?.channels ?? []).map((ch) => {
+        const channelClass = props.frontChannels.get(ch.id);
+        if (!channelClass) return null;
+        const icon = new channelClass().getChannelIcon();
+        return /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { key: ch.id, title: ch.id }, import_react.default.cloneElement(icon, { fontSize: "small", sx: { color: MATRIX_GREEN, opacity: 0.6 } }));
+      })), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1, justifyContent: "flex-start" }, /* @__PURE__ */ import_react.default.createElement(
+        import_material.Button,
+        {
+          variant: "outlined",
+          size: "small",
+          disabled: !clusterHasTopology,
+          startIcon: topologyIcon,
+          onClick: () => launchTopology(cluster.name),
+          sx: matrixButtonSx
+        },
+        "Topology"
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_material.Button,
+        {
+          variant: "outlined",
+          size: "small",
+          disabled: !clusterHasMagnify,
+          startIcon: magnifyIcon,
+          onClick: () => launchMagnify(cluster.name),
+          sx: matrixButtonSx
+        },
+        "Magnify"
+      )))), /* @__PURE__ */ import_react.default.createElement(EventLog, { events: clusterEvents[cluster.name] ?? [] })));
+    }), props.clusters.length === 0 && /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", color: MATRIX_GREEN, p: 2, textShadow: `0 0 8px ${MATRIX_GREEN}` } }, "// Entering the matrix...")));
+  };
+
+  // src/front/index.ts
+  window.__kwirth_homepages__["matrix"] = {
+    homepageId: "matrix",
+    displayName: "Matrix",
+    Component: Matrix
+  };
+})();

package/package.json

@@ -0,0 +1,7 @@
+{
+  "id": "matrix",
+  "name": "@kwirthmagnify/kwirth-homepage-matrix",
+  "displayName": "Matrix",
+  "version": "0.1.1",
+  "description": "Matrix-style cluster overview homepage for Kwirth"
+}