@kwirthmagnify/kwirth-homepage-matrix 0.1.1 → 0.1.2

package/front.js

@@ -1,3 +1,4 @@
+"use strict";
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
@@ -192,6 +193,78 @@
       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 matrixCardSx = {
+    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)"
+  };
+  var matrixIconBtnSx = {
+    color: MATRIX_DIM,
+    p: 0.25,
+    borderRadius: 0.5,
+    fontSize: "0.6rem",
+    fontFamily: "monospace",
+    lineHeight: 1,
+    "&:hover": { color: MATRIX_GREEN, bgcolor: "rgba(0,255,65,0.1)" }
+  };
+  function QuickColumn({ label, items, getKey, getName, getSub, onLaunch, onDelete }) {
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 0.5, alignSelf: "stretch" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM, letterSpacing: 1, mb: 0.25 } }, "// ", label), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { borderTop: `1px solid ${MATRIX_DIM}`, mb: 0.5 } }), items.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.7rem", color: MATRIX_DIM, opacity: 0.5 } }, "// empty") : items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { key: getKey(item), direction: "row", alignItems: "center", sx: { minWidth: 0, gap: 0.5 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: MATRIX_GREEN } }, getName(item)), getSub(item) && /* @__PURE__ */ import_react.default.createElement("span", { style: { color: MATRIX_DIM, paddingLeft: "20px" } }, getSub(item))), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Launch" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { size: "small", sx: matrixIconBtnSx, onClick: () => onLaunch(item) }, "\u25B6")), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Remove" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { size: "small", sx: matrixIconBtnSx, onClick: () => onDelete(item) }, "\u2715")))));
+  }
+  var QuickAccessCard = (props) => {
+    const delLastTab = (tab) => props.onUpdateTabs(props.lastTabs.filter((t) => t.name !== tab.name || t.channel !== tab.channel), props.favTabs);
+    const delFavTab = (tab) => props.onUpdateTabs(props.lastTabs, props.favTabs.filter((t) => t.name !== tab.name || t.channel !== tab.channel));
+    const delLastWs = (ws) => props.onUpdateWorkspaces(props.lastWorkspaces.filter((w) => w.name !== ws.name), props.favWorkspaces);
+    const delFavWs = (ws) => props.onUpdateWorkspaces(props.lastWorkspaces, props.favWorkspaces.filter((w) => w.name !== ws.name));
+    const allEmpty = props.lastTabs.length === 0 && props.favTabs.length === 0 && props.lastWorkspaces.length === 0 && props.favWorkspaces.length === 0;
+    if (allEmpty) return null;
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Card, { variant: "outlined", sx: { ...matrixCardSx, gridColumn: "1 / -1", minHeight: 160 } }, /* @__PURE__ */ import_react.default.createElement(import_material.CardContent, { sx: { py: 1.5, px: 2, height: "100%", boxSizing: "border-box", "&:last-child": { pb: 1.5 } } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 2, alignItems: "flex-start", sx: { minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
+      QuickColumn,
+      {
+        label: "LAST TABS",
+        items: props.lastTabs,
+        getKey: (t) => `${t.channel}::${t.name}`,
+        getName: (t) => t.name,
+        getSub: (t) => `${t.channel} \xB7 ${t.channelObject.clusterName}`,
+        onLaunch: (t) => props.onHomepageSelectTab(t),
+        onDelete: delLastTab
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM, opacity: 0.4 } }), /* @__PURE__ */ import_react.default.createElement(
+      QuickColumn,
+      {
+        label: "FAV TABS",
+        items: props.favTabs,
+        getKey: (t) => `${t.channel}::${t.name}`,
+        getName: (t) => t.name,
+        getSub: (t) => `${t.channel} \xB7 ${t.channelObject.clusterName}`,
+        onLaunch: (t) => props.onHomepageSelectTab(t),
+        onDelete: delFavTab
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM, opacity: 0.4 } }), /* @__PURE__ */ import_react.default.createElement(
+      QuickColumn,
+      {
+        label: "LAST WORKSPACES",
+        items: props.lastWorkspaces,
+        getKey: (w) => w.name,
+        getName: (w) => w.name,
+        getSub: (w) => w.description,
+        onLaunch: (w) => props.onSelectWorkspace(w),
+        onDelete: delLastWs
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM, opacity: 0.4 } }), /* @__PURE__ */ import_react.default.createElement(
+      QuickColumn,
+      {
+        label: "FAV WORKSPACES",
+        items: props.favWorkspaces,
+        getKey: (w) => w.name,
+        getName: (w) => w.name,
+        getSub: (w) => w.description,
+        onLaunch: (w) => props.onSelectWorkspace(w),
+        onDelete: delFavWs
+      }
+    ))));
+  };
   var Matrix = (props) => {
     (0, import_react.useEffect)(() => {
       const id = "matrix-keyframes";
@@ -288,7 +361,7 @@
       gridTemplateColumns: "repeat(2, 1fr)",
       gap: 4,
       alignContent: "start"
-    } }, props.clusters.map((cluster, idx) => {
+    } }, /* @__PURE__ */ import_react.default.createElement(QuickAccessCard, { ...props }), 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");
@@ -315,7 +388,7 @@
         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) => {
+      } }, 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(MiniInfoCard, { label: "Nodes", value: cluster.clusterInfo?.nodes?.length != null ? String(cluster.clusterInfo.nodes.length) : "--" })), /* @__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();

package/package.json

@@ -2,6 +2,6 @@
   "id": "matrix",
   "name": "@kwirthmagnify/kwirth-homepage-matrix",
   "displayName": "Matrix",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Matrix-style cluster overview homepage for Kwirth"
 }