@kwirthmagnify/kwirth-homepage-matrix 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/front.js +136 -120
- package/package.json +1 -1
package/front.js
CHANGED
|
@@ -57,17 +57,73 @@
|
|
|
57
57
|
});
|
|
58
58
|
|
|
59
59
|
// src/front/Matrix.tsx
|
|
60
|
+
var import_react2 = __toESM(require_react(), 1);
|
|
61
|
+
var import_material2 = __toESM(require_material(), 1);
|
|
62
|
+
var import_icons_material = __toESM(require_icons_material(), 1);
|
|
63
|
+
|
|
64
|
+
// src/front/MatrixSetup.tsx
|
|
60
65
|
var import_react = __toESM(require_react(), 1);
|
|
61
66
|
var import_material = __toESM(require_material(), 1);
|
|
62
|
-
var import_icons_material = __toESM(require_icons_material(), 1);
|
|
63
67
|
var MATRIX_GREEN = "#00ff41";
|
|
64
68
|
var MATRIX_DIM = "#006620";
|
|
69
|
+
var MatrixSetup = ({ config, onSave, onClose }) => {
|
|
70
|
+
const [showQuickAccess, setShowQuickAccess] = (0, import_react.useState)(config.showQuickAccess ?? true);
|
|
71
|
+
const [showRain, setShowRain] = (0, import_react.useState)(config.showRain ?? true);
|
|
72
|
+
const [rainSpeed, setRainSpeed] = (0, import_react.useState)(config.rainSpeed ?? 12);
|
|
73
|
+
const [rainActiveLines, setRainActiveLines] = (0, import_react.useState)(config.rainActiveLines ?? 50);
|
|
74
|
+
const checkSx = { color: MATRIX_DIM, "&.Mui-checked": { color: MATRIX_GREEN } };
|
|
75
|
+
const labelSx = { fontFamily: "monospace", fontSize: "0.85rem", color: MATRIX_GREEN };
|
|
76
|
+
const sliderSx = { color: MATRIX_GREEN, "& .MuiSlider-thumb": { bgcolor: MATRIX_GREEN }, "& .MuiSlider-rail": { bgcolor: MATRIX_DIM } };
|
|
77
|
+
return /* @__PURE__ */ import_react.default.createElement(import_material.Dialog, { open: true, PaperProps: { sx: { bgcolor: "#000", border: `1px solid ${MATRIX_GREEN}`, boxShadow: `0 0 20px rgba(0,255,65,0.3)`, color: MATRIX_GREEN, minWidth: 360 } } }, /* @__PURE__ */ import_react.default.createElement(import_material.DialogTitle, { sx: { fontFamily: "monospace", fontSize: "1rem", color: MATRIX_GREEN, borderBottom: `1px solid ${MATRIX_DIM}`, pb: 1 } }, "// matrix setup"), /* @__PURE__ */ import_react.default.createElement(import_material.DialogContent, null, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 2.5, sx: { pt: 2 } }, /* @__PURE__ */ import_react.default.createElement(
|
|
78
|
+
import_material.FormControlLabel,
|
|
79
|
+
{
|
|
80
|
+
control: /* @__PURE__ */ import_react.default.createElement(import_material.Checkbox, { checked: showQuickAccess, onChange: (e) => setShowQuickAccess(e.target.checked), sx: checkSx }),
|
|
81
|
+
label: /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: labelSx }, "Show tabs / workspaces card")
|
|
82
|
+
}
|
|
83
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
84
|
+
import_material.FormControlLabel,
|
|
85
|
+
{
|
|
86
|
+
control: /* @__PURE__ */ import_react.default.createElement(import_material.Checkbox, { checked: showRain, onChange: (e) => setShowRain(e.target.checked), sx: checkSx }),
|
|
87
|
+
label: /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: labelSx }, "Falling code")
|
|
88
|
+
}
|
|
89
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.5, sx: { opacity: showRain ? 1 : 0.3, pointerEvents: showRain ? "auto" : "none" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM } }, "Speed"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_GREEN } }, rainSpeed <= 5 ? "fast" : rainSpeed <= 12 ? "normal" : "slow")), /* @__PURE__ */ import_react.default.createElement(
|
|
90
|
+
import_material.Slider,
|
|
91
|
+
{
|
|
92
|
+
value: 21 - rainSpeed,
|
|
93
|
+
min: 1,
|
|
94
|
+
max: 20,
|
|
95
|
+
onChange: (_, v) => setRainSpeed(21 - v),
|
|
96
|
+
sx: sliderSx
|
|
97
|
+
}
|
|
98
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM } }, "slow"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM } }, "fast"))), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.5, sx: { opacity: showRain ? 1 : 0.3, pointerEvents: showRain ? "auto" : "none" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM } }, "Active lines"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_GREEN } }, rainActiveLines)), /* @__PURE__ */ import_react.default.createElement(
|
|
99
|
+
import_material.Slider,
|
|
100
|
+
{
|
|
101
|
+
value: rainActiveLines,
|
|
102
|
+
min: 5,
|
|
103
|
+
max: 100,
|
|
104
|
+
onChange: (_, v) => setRainActiveLines(v),
|
|
105
|
+
sx: sliderSx
|
|
106
|
+
}
|
|
107
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM } }, "5"), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM } }, "100"))))), /* @__PURE__ */ import_react.default.createElement(import_material.DialogActions, { sx: { borderTop: `1px solid ${MATRIX_DIM}`, pt: 1 } }, /* @__PURE__ */ import_react.default.createElement(
|
|
108
|
+
import_material.Button,
|
|
109
|
+
{
|
|
110
|
+
onClick: () => onSave({ showQuickAccess, showRain, rainSpeed, rainActiveLines }),
|
|
111
|
+
variant: "contained",
|
|
112
|
+
sx: { bgcolor: MATRIX_GREEN, color: "#000", fontFamily: "monospace", fontWeight: "bold", "&:hover": { bgcolor: "#00cc33" } }
|
|
113
|
+
},
|
|
114
|
+
"Save"
|
|
115
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Button, { onClick: onClose, sx: { color: MATRIX_DIM, fontFamily: "monospace" } }, "Cancel")));
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
// src/front/Matrix.tsx
|
|
119
|
+
var MATRIX_GREEN2 = "#00ff41";
|
|
120
|
+
var MATRIX_DIM2 = "#006620";
|
|
65
121
|
var MATRIX_GLOW = "rgba(0,255,65,0.3)";
|
|
66
122
|
var EVENTS_LIMIT = 25;
|
|
67
123
|
var POLL_INTERVAL_MS = 1e4;
|
|
68
124
|
var MatrixRain = ({ speed, activeLines }) => {
|
|
69
|
-
const canvasRef = (0,
|
|
70
|
-
(0,
|
|
125
|
+
const canvasRef = (0, import_react2.useRef)(null);
|
|
126
|
+
(0, import_react2.useEffect)(() => {
|
|
71
127
|
const canvas = canvasRef.current;
|
|
72
128
|
if (!canvas) return;
|
|
73
129
|
const ctx = canvas.getContext("2d");
|
|
@@ -112,7 +168,7 @@
|
|
|
112
168
|
if (!active[i]) continue;
|
|
113
169
|
if (drops[i] > 0) {
|
|
114
170
|
const bright = Math.random() > 0.97;
|
|
115
|
-
ctx.fillStyle = bright ? "#ccffcc" :
|
|
171
|
+
ctx.fillStyle = bright ? "#ccffcc" : MATRIX_GREEN2;
|
|
116
172
|
ctx.fillText(chars[Math.floor(Math.random() * chars.length)], i * fontSize, drops[i] * fontSize);
|
|
117
173
|
}
|
|
118
174
|
if (drops[i] * fontSize > canvas.height) {
|
|
@@ -134,7 +190,7 @@
|
|
|
134
190
|
observer.disconnect();
|
|
135
191
|
};
|
|
136
192
|
}, [speed, activeLines]);
|
|
137
|
-
return /* @__PURE__ */
|
|
193
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
138
194
|
"canvas",
|
|
139
195
|
{
|
|
140
196
|
ref: canvasRef,
|
|
@@ -145,9 +201,9 @@
|
|
|
145
201
|
var StatusLight = ({ online, events, animationDelay }) => {
|
|
146
202
|
const hasError = online && (events ?? []).some((e) => e.type !== "Normal" && e.type !== "Warning");
|
|
147
203
|
const hasWarning = online && !hasError && (events ?? []).some((e) => e.type === "Warning");
|
|
148
|
-
const color = !online ? "#ff3333" : hasError ? "#ff3333" : hasWarning ? "#ff9800" :
|
|
204
|
+
const color = !online ? "#ff3333" : hasError ? "#ff3333" : hasWarning ? "#ff9800" : MATRIX_GREEN2;
|
|
149
205
|
const label = !online ? "Offline" : hasError ? "Errors detected" : hasWarning ? "Warnings detected" : "Online";
|
|
150
|
-
return /* @__PURE__ */
|
|
206
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Tooltip, { title: label }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: {
|
|
151
207
|
width: 12,
|
|
152
208
|
height: 12,
|
|
153
209
|
borderRadius: "50%",
|
|
@@ -160,9 +216,9 @@
|
|
|
160
216
|
} }));
|
|
161
217
|
};
|
|
162
218
|
var MetricBar = ({ label, value }) => {
|
|
163
|
-
const barRef = (0,
|
|
164
|
-
const [cols, setCols] = (0,
|
|
165
|
-
(0,
|
|
219
|
+
const barRef = (0, import_react2.useRef)(null);
|
|
220
|
+
const [cols, setCols] = (0, import_react2.useState)(10);
|
|
221
|
+
(0, import_react2.useEffect)(() => {
|
|
166
222
|
if (!barRef.current) return;
|
|
167
223
|
const obs = new ResizeObserver(() => {
|
|
168
224
|
if (barRef.current) setCols(Math.max(5, Math.floor(barRef.current.offsetWidth / 6)));
|
|
@@ -172,11 +228,11 @@
|
|
|
172
228
|
}, []);
|
|
173
229
|
const filled = Math.round(value * cols / 100);
|
|
174
230
|
const bar = "\u2588".repeat(filled) + "\u2591".repeat(cols - filled);
|
|
175
|
-
const color = value > 90 ? "#ff3333" : value > 80 ? "#b36200" :
|
|
176
|
-
return /* @__PURE__ */
|
|
231
|
+
const color = value > 90 ? "#ff3333" : value > 80 ? "#b36200" : MATRIX_GREEN2;
|
|
232
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", alignItems: "center", spacing: 0 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.65rem", color: MATRIX_DIM2, width: 28, flexShrink: 0 } }, label), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { ref: barRef, sx: { fontFamily: "monospace", fontSize: "0.65rem", color, letterSpacing: "-0.5px", flex: 1, overflow: "hidden", whiteSpace: "nowrap" } }, bar), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.65rem", color, flexShrink: 0, pl: 0.5, width: 32, textAlign: "right" } }, Math.round(value), "%"));
|
|
177
233
|
};
|
|
178
|
-
var MiniInfoCard = ({ label, value, stretch }) => /* @__PURE__ */
|
|
179
|
-
border: `1px solid ${
|
|
234
|
+
var MiniInfoCard = ({ label, value, stretch }) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: {
|
|
235
|
+
border: `1px solid ${MATRIX_DIM2}`,
|
|
180
236
|
borderRadius: 1,
|
|
181
237
|
px: 1,
|
|
182
238
|
display: "flex",
|
|
@@ -185,51 +241,51 @@
|
|
|
185
241
|
justifyContent: "center",
|
|
186
242
|
minWidth: 70,
|
|
187
243
|
...stretch ? { height: "100%" } : { py: 0.75 }
|
|
188
|
-
} }, /* @__PURE__ */
|
|
244
|
+
} }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "1rem", color: MATRIX_GREEN2, lineHeight: 1.2 } }, value), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.78rem", color: MATRIX_DIM2, lineHeight: 1.2 } }, label));
|
|
189
245
|
var EventLog = ({ events }) => {
|
|
190
|
-
const boxRef = (0,
|
|
191
|
-
(0,
|
|
246
|
+
const boxRef = (0, import_react2.useRef)(null);
|
|
247
|
+
(0, import_react2.useEffect)(() => {
|
|
192
248
|
if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;
|
|
193
249
|
}, [events]);
|
|
194
|
-
return /* @__PURE__ */
|
|
250
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { ref: boxRef, sx: {
|
|
195
251
|
flex: 1,
|
|
196
252
|
overflowY: "auto",
|
|
197
253
|
overflowX: "auto",
|
|
198
254
|
fontFamily: "monospace",
|
|
199
255
|
fontSize: "0.55rem",
|
|
200
256
|
lineHeight: 1.9,
|
|
201
|
-
color:
|
|
257
|
+
color: MATRIX_DIM2,
|
|
202
258
|
bgcolor: "rgba(0,18,6,0.92)",
|
|
203
|
-
border: `1px solid ${
|
|
259
|
+
border: `1px solid ${MATRIX_DIM2}`,
|
|
204
260
|
borderRadius: 1,
|
|
205
261
|
p: 1,
|
|
206
262
|
whiteSpace: "nowrap",
|
|
207
263
|
"&::-webkit-scrollbar": { width: 4, height: 4 },
|
|
208
|
-
"&::-webkit-scrollbar-thumb": { bgcolor:
|
|
209
|
-
} }, events.length === 0 ? /* @__PURE__ */
|
|
264
|
+
"&::-webkit-scrollbar-thumb": { bgcolor: MATRIX_DIM2, borderRadius: 2 }
|
|
265
|
+
} }, events.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { color: MATRIX_GREEN2, opacity: 0.4 } }, "// follow the white rabbit") : [...events].reverse().map((e, i) => {
|
|
210
266
|
const d = new Date(e.time);
|
|
211
267
|
const t = [d.getHours(), d.getMinutes(), d.getSeconds()].map((n) => String(n).padStart(2, "0")).join(":");
|
|
212
|
-
return /* @__PURE__ */
|
|
268
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { key: i, sx: { color: e.type === "Warning" ? "#ff9800" : MATRIX_GREEN2, mb: 0.2 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { component: "span", sx: { color: MATRIX_DIM2, mr: 0.5 } }, t), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { component: "span", sx: { mr: 0.5 } }, "[", e.reason, "]"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { component: "span", sx: { color: MATRIX_DIM2, mr: 0.5 } }, e.object), e.message);
|
|
213
269
|
}));
|
|
214
270
|
};
|
|
215
271
|
var matrixCardSx = {
|
|
216
272
|
bgcolor: "rgba(0,0,0,0.80)",
|
|
217
|
-
border: `1px solid ${
|
|
273
|
+
border: `1px solid ${MATRIX_GREEN2}`,
|
|
218
274
|
boxShadow: `0 0 10px ${MATRIX_GLOW}, inset 0 0 10px rgba(0,255,65,0.05)`,
|
|
219
|
-
color:
|
|
275
|
+
color: MATRIX_GREEN2,
|
|
220
276
|
backdropFilter: "blur(2px)"
|
|
221
277
|
};
|
|
222
278
|
var matrixIconBtnSx = {
|
|
223
|
-
color:
|
|
279
|
+
color: MATRIX_DIM2,
|
|
224
280
|
p: 0.25,
|
|
225
281
|
borderRadius: 0.5,
|
|
226
282
|
fontSize: "0.6rem",
|
|
227
283
|
fontFamily: "monospace",
|
|
228
284
|
lineHeight: 1,
|
|
229
|
-
"&:hover": { color:
|
|
285
|
+
"&:hover": { color: MATRIX_GREEN2, bgcolor: "rgba(0,255,65,0.1)" }
|
|
230
286
|
};
|
|
231
287
|
function QuickColumn({ label, items, getKey, getName, getSub, onLaunch, onDelete }) {
|
|
232
|
-
return /* @__PURE__ */
|
|
288
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 0.5, alignSelf: "stretch" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM2, letterSpacing: 1, mb: 0.25 } }, "// ", label), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { borderTop: `1px solid ${MATRIX_DIM2}`, mb: 0.5 } }), items.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.7rem", color: MATRIX_DIM2, opacity: 0.5 } }, "// empty") : items.map((item) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { key: getKey(item), direction: "row", alignItems: "center", sx: { minWidth: 0, gap: 0.5 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react2.default.createElement("span", { style: { color: MATRIX_GREEN2 } }, getName(item)), getSub(item) && /* @__PURE__ */ import_react2.default.createElement("span", { style: { color: MATRIX_DIM2, paddingLeft: "20px" } }, getSub(item))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Tooltip, { title: "Launch" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", sx: matrixIconBtnSx, onClick: () => onLaunch(item) }, "\u25B6")), /* @__PURE__ */ import_react2.default.createElement(import_material2.Tooltip, { title: "Remove" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", sx: matrixIconBtnSx, onClick: () => onDelete(item) }, "\u2715")))));
|
|
233
289
|
}
|
|
234
290
|
var QuickAccessCard = (props) => {
|
|
235
291
|
const delLastTab = (tab) => props.onUpdateTabs(props.lastTabs.filter((t) => t.name !== tab.name || t.channel !== tab.channel), props.favTabs);
|
|
@@ -238,7 +294,7 @@
|
|
|
238
294
|
const delFavWs = (ws) => props.onUpdateWorkspaces(props.lastWorkspaces, props.favWorkspaces.filter((w) => w.name !== ws.name));
|
|
239
295
|
const allEmpty = props.lastTabs.length === 0 && props.favTabs.length === 0 && props.lastWorkspaces.length === 0 && props.favWorkspaces.length === 0;
|
|
240
296
|
if (allEmpty) return null;
|
|
241
|
-
return /* @__PURE__ */
|
|
297
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Card, { variant: "outlined", sx: { ...matrixCardSx, gridColumn: "1 / -1", minHeight: 160 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CardContent, { sx: { py: 1.5, px: 2, height: "100%", boxSizing: "border-box", "&:last-child": { pb: 1.5 } } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 2, alignItems: "flex-start", sx: { minWidth: 0 } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
242
298
|
QuickColumn,
|
|
243
299
|
{
|
|
244
300
|
label: "LAST TABS",
|
|
@@ -249,7 +305,7 @@
|
|
|
249
305
|
onLaunch: (t) => props.onHomepageSelectTab(t),
|
|
250
306
|
onDelete: delLastTab
|
|
251
307
|
}
|
|
252
|
-
), /* @__PURE__ */
|
|
308
|
+
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM2, opacity: 0.4 } }), /* @__PURE__ */ import_react2.default.createElement(
|
|
253
309
|
QuickColumn,
|
|
254
310
|
{
|
|
255
311
|
label: "FAV TABS",
|
|
@@ -260,7 +316,7 @@
|
|
|
260
316
|
onLaunch: (t) => props.onHomepageSelectTab(t),
|
|
261
317
|
onDelete: delFavTab
|
|
262
318
|
}
|
|
263
|
-
), /* @__PURE__ */
|
|
319
|
+
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM2, opacity: 0.4 } }), /* @__PURE__ */ import_react2.default.createElement(
|
|
264
320
|
QuickColumn,
|
|
265
321
|
{
|
|
266
322
|
label: "LAST WORKSPACES",
|
|
@@ -271,7 +327,7 @@
|
|
|
271
327
|
onLaunch: (w) => props.onSelectWorkspace(w),
|
|
272
328
|
onDelete: delLastWs
|
|
273
329
|
}
|
|
274
|
-
), /* @__PURE__ */
|
|
330
|
+
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM2, opacity: 0.4 } }), /* @__PURE__ */ import_react2.default.createElement(
|
|
275
331
|
QuickColumn,
|
|
276
332
|
{
|
|
277
333
|
label: "FAV WORKSPACES",
|
|
@@ -285,14 +341,14 @@
|
|
|
285
341
|
))));
|
|
286
342
|
};
|
|
287
343
|
var Matrix = (props) => {
|
|
288
|
-
(0,
|
|
344
|
+
(0, import_react2.useEffect)(() => {
|
|
289
345
|
const id = "matrix-keyframes";
|
|
290
346
|
if (!document.getElementById(id)) {
|
|
291
347
|
const style = document.createElement("style");
|
|
292
348
|
style.id = id;
|
|
293
349
|
style.textContent = `@keyframes matrix-status-pulse {
|
|
294
350
|
0%, 100% { opacity: 0.25; box-shadow: none; }
|
|
295
|
-
50% { opacity: 0.85; box-shadow: 0 0 7px 2px ${
|
|
351
|
+
50% { opacity: 0.85; box-shadow: 0 0 7px 2px ${MATRIX_GREEN2}; }
|
|
296
352
|
}`;
|
|
297
353
|
document.head.appendChild(style);
|
|
298
354
|
}
|
|
@@ -300,9 +356,9 @@
|
|
|
300
356
|
document.getElementById("matrix-keyframes")?.remove();
|
|
301
357
|
};
|
|
302
358
|
}, []);
|
|
303
|
-
const containerRef = (0,
|
|
304
|
-
const [containerHeight, setContainerHeight] =
|
|
305
|
-
(0,
|
|
359
|
+
const containerRef = (0, import_react2.useRef)(null);
|
|
360
|
+
const [containerHeight, setContainerHeight] = import_react2.default.useState(0);
|
|
361
|
+
(0, import_react2.useEffect)(() => {
|
|
306
362
|
const observer = new ResizeObserver(() => {
|
|
307
363
|
if (!containerRef.current) return;
|
|
308
364
|
const { top } = containerRef.current.getBoundingClientRect();
|
|
@@ -311,8 +367,8 @@
|
|
|
311
367
|
observer.observe(document.body);
|
|
312
368
|
return () => observer.disconnect();
|
|
313
369
|
}, [containerRef.current]);
|
|
314
|
-
const [clusterMetrics, setClusterMetrics] = (0,
|
|
315
|
-
(0,
|
|
370
|
+
const [clusterMetrics, setClusterMetrics] = (0, import_react2.useState)({});
|
|
371
|
+
(0, import_react2.useEffect)(() => {
|
|
316
372
|
if (!props.getClusterMetrics) return;
|
|
317
373
|
const fetchAll = () => {
|
|
318
374
|
props.clusters.forEach((cluster) => {
|
|
@@ -325,8 +381,8 @@
|
|
|
325
381
|
const timer = setInterval(fetchAll, POLL_INTERVAL_MS);
|
|
326
382
|
return () => clearInterval(timer);
|
|
327
383
|
}, [props.clusters, props.getClusterMetrics]);
|
|
328
|
-
const [clusterEvents, setClusterEvents] = (0,
|
|
329
|
-
(0,
|
|
384
|
+
const [clusterEvents, setClusterEvents] = (0, import_react2.useState)({});
|
|
385
|
+
(0, import_react2.useEffect)(() => {
|
|
330
386
|
if (!props.getClusterEvents) return;
|
|
331
387
|
const fetchAll = () => {
|
|
332
388
|
props.clusters.forEach((cluster) => {
|
|
@@ -355,26 +411,40 @@
|
|
|
355
411
|
channelObject: { clusterName, view: "cluster", namespace: "", group: "", pod: "", container: "" }
|
|
356
412
|
});
|
|
357
413
|
};
|
|
358
|
-
const
|
|
359
|
-
const
|
|
360
|
-
const
|
|
361
|
-
const
|
|
414
|
+
const [localConfig, setLocalConfig] = (0, import_react2.useState)(props.config ?? {});
|
|
415
|
+
const [showSetup, setShowSetup] = (0, import_react2.useState)(false);
|
|
416
|
+
const showQuickAccess = localConfig.showQuickAccess ?? true;
|
|
417
|
+
const showRain = localConfig.showRain ?? true;
|
|
418
|
+
const rainSpeed = localConfig.rainSpeed ?? 12;
|
|
419
|
+
const rainActiveLines = localConfig.rainActiveLines ?? 50;
|
|
420
|
+
const saveConfig = (cfg) => {
|
|
421
|
+
localStorage.setItem("kwirth.homepage.config.matrix", JSON.stringify(cfg));
|
|
422
|
+
setLocalConfig(cfg);
|
|
423
|
+
setShowSetup(false);
|
|
424
|
+
};
|
|
362
425
|
const hasMagnify = props.frontChannels.has("magnify");
|
|
363
426
|
const hasTopology = props.frontChannels.has("topology");
|
|
364
427
|
const magnifyClass = props.frontChannels.get("magnify");
|
|
365
428
|
const magnifyIcon = magnifyClass ? new magnifyClass().getChannelIcon() : null;
|
|
366
429
|
const topologyClass = props.frontChannels.get("topology");
|
|
367
|
-
const topologyIcon = topologyClass ? new topologyClass().getChannelIcon() : /* @__PURE__ */
|
|
430
|
+
const topologyIcon = topologyClass ? new topologyClass().getChannelIcon() : /* @__PURE__ */ import_react2.default.createElement(import_icons_material.AccountTree, null);
|
|
368
431
|
const matrixButtonSx = {
|
|
369
432
|
fontFamily: "monospace",
|
|
370
|
-
"&:not(.Mui-disabled)": { color:
|
|
433
|
+
"&:not(.Mui-disabled)": { color: MATRIX_GREEN2, borderColor: MATRIX_GREEN2 },
|
|
371
434
|
"&:hover:not(.Mui-disabled)": {
|
|
372
|
-
borderColor:
|
|
435
|
+
borderColor: MATRIX_GREEN2,
|
|
373
436
|
bgcolor: "rgba(0,255,65,0.1)",
|
|
374
437
|
boxShadow: `0 0 8px ${MATRIX_GLOW}`
|
|
375
438
|
}
|
|
376
439
|
};
|
|
377
|
-
return /* @__PURE__ */
|
|
440
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { ref: containerRef, sx: { position: "relative", width: "100%", height: `${containerHeight}px`, overflow: "hidden", bgcolor: "#000" } }, showRain && /* @__PURE__ */ import_react2.default.createElement(MatrixRain, { speed: rainSpeed, activeLines: rainActiveLines }), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => setShowSetup(true), size: "small", sx: {
|
|
441
|
+
position: "absolute",
|
|
442
|
+
top: 8,
|
|
443
|
+
right: 8,
|
|
444
|
+
zIndex: 3,
|
|
445
|
+
color: MATRIX_DIM2,
|
|
446
|
+
"&:hover": { color: MATRIX_GREEN2, bgcolor: "rgba(0,255,65,0.1)" }
|
|
447
|
+
} }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Settings, { fontSize: "small" })), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: {
|
|
378
448
|
position: "relative",
|
|
379
449
|
zIndex: 1,
|
|
380
450
|
p: 3,
|
|
@@ -384,40 +454,40 @@
|
|
|
384
454
|
gridTemplateColumns: "repeat(2, 1fr)",
|
|
385
455
|
gap: 4,
|
|
386
456
|
alignContent: "start"
|
|
387
|
-
} }, showQuickAccess && /* @__PURE__ */
|
|
457
|
+
} }, showQuickAccess && /* @__PURE__ */ import_react2.default.createElement(QuickAccessCard, { ...props }), props.clusters.map((cluster, idx) => {
|
|
388
458
|
const clusterChannelIds = new Set((cluster.kwirthData?.channels ?? []).map((ch) => ch.id));
|
|
389
459
|
const clusterHasMagnify = hasMagnify && clusterChannelIds.has("magnify");
|
|
390
460
|
const clusterHasTopology = hasTopology && clusterChannelIds.has("topology");
|
|
391
|
-
return /* @__PURE__ */
|
|
461
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Card, { key: cluster.name, variant: "outlined", sx: {
|
|
392
462
|
bgcolor: "rgba(0,0,0,0.80)",
|
|
393
|
-
border: `1px solid ${
|
|
463
|
+
border: `1px solid ${MATRIX_GREEN2}`,
|
|
394
464
|
boxShadow: `0 0 10px ${MATRIX_GLOW}, inset 0 0 10px rgba(0,255,65,0.05)`,
|
|
395
|
-
color:
|
|
465
|
+
color: MATRIX_GREEN2,
|
|
396
466
|
backdropFilter: "blur(2px)",
|
|
397
467
|
height: `${Math.floor((containerHeight - 24 * 2 - 24) / 2) - 4}px`,
|
|
398
468
|
overflow: "hidden"
|
|
399
|
-
} }, /* @__PURE__ */
|
|
469
|
+
} }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CardContent, { sx: { height: "100%", display: "flex", flexDirection: "row", gap: 2, py: 2, "&:last-child": { pb: 2 } } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", justifyContent: "space-between", sx: { flex: "0 0 40%", minWidth: 0 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 1 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", alignItems: "center", spacing: 1 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "h6", sx: {
|
|
400
470
|
fontFamily: "monospace",
|
|
401
|
-
color:
|
|
471
|
+
color: MATRIX_GREEN2,
|
|
402
472
|
lineHeight: 1.3,
|
|
403
|
-
textShadow: `0 0 8px ${
|
|
473
|
+
textShadow: `0 0 8px ${MATRIX_GREEN2}`,
|
|
404
474
|
overflow: "hidden",
|
|
405
475
|
textOverflow: "ellipsis",
|
|
406
476
|
whiteSpace: "nowrap",
|
|
407
477
|
m: 0
|
|
408
|
-
} }, cluster.name), /* @__PURE__ */
|
|
478
|
+
} }, cluster.name), /* @__PURE__ */ import_react2.default.createElement(StatusLight, { online: !!clusterMetrics[cluster.name], events: clusterEvents[cluster.name], animationDelay: `${idx * 0.7 % 2.5}s` })), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", sx: {
|
|
409
479
|
fontFamily: "monospace",
|
|
410
|
-
color:
|
|
480
|
+
color: MATRIX_DIM2,
|
|
411
481
|
overflow: "hidden",
|
|
412
482
|
textOverflow: "ellipsis",
|
|
413
483
|
whiteSpace: "nowrap"
|
|
414
|
-
} }, cluster.url), clusterMetrics[cluster.name] && /* @__PURE__ */
|
|
484
|
+
} }, cluster.url), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 0.25 }, /* @__PURE__ */ import_react2.default.createElement(MetricBar, { label: "CPU", value: clusterMetrics[cluster.name].cpu }), /* @__PURE__ */ import_react2.default.createElement(MetricBar, { label: "MEM", value: clusterMetrics[cluster.name].memory }), /* @__PURE__ */ import_react2.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_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 1.5, sx: { justifyContent: "center" } }, /* @__PURE__ */ import_react2.default.createElement(MiniInfoCard, { label: "vCPUs", value: clusterMetrics[cluster.name].vcpus != null ? String(clusterMetrics[cluster.name].vcpus) : "--" }), /* @__PURE__ */ import_react2.default.createElement(MiniInfoCard, { label: "RAM", value: clusterMetrics[cluster.name].totalMemoryBytes != null ? `${(clusterMetrics[cluster.name].totalMemoryBytes / 1073741824).toFixed(0)}G` : "--" }), /* @__PURE__ */ import_react2.default.createElement(MiniInfoCard, { label: "Pods", value: clusterMetrics[cluster.name].pods ? String(clusterMetrics[cluster.name].pods) : "--" }), /* @__PURE__ */ import_react2.default.createElement(MiniInfoCard, { label: "Nodes", value: cluster.clusterInfo?.nodes?.length != null ? String(cluster.clusterInfo.nodes.length) : "--" })), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 0.75 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, (cluster.kwirthData?.channels ?? []).map((ch) => {
|
|
415
485
|
const channelClass = props.frontChannels.get(ch.id);
|
|
416
486
|
if (!channelClass) return null;
|
|
417
487
|
const icon = new channelClass().getChannelIcon();
|
|
418
|
-
return /* @__PURE__ */
|
|
419
|
-
})), /* @__PURE__ */
|
|
420
|
-
|
|
488
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Tooltip, { key: ch.id, title: ch.id }, import_react2.default.cloneElement(icon, { fontSize: "small", sx: { color: MATRIX_GREEN2, opacity: 0.6 } }));
|
|
489
|
+
})), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 1, justifyContent: "flex-start" }, /* @__PURE__ */ import_react2.default.createElement(
|
|
490
|
+
import_material2.Button,
|
|
421
491
|
{
|
|
422
492
|
variant: "outlined",
|
|
423
493
|
size: "small",
|
|
@@ -427,8 +497,8 @@
|
|
|
427
497
|
sx: matrixButtonSx
|
|
428
498
|
},
|
|
429
499
|
"Topology"
|
|
430
|
-
), /* @__PURE__ */
|
|
431
|
-
|
|
500
|
+
), /* @__PURE__ */ import_react2.default.createElement(
|
|
501
|
+
import_material2.Button,
|
|
432
502
|
{
|
|
433
503
|
variant: "outlined",
|
|
434
504
|
size: "small",
|
|
@@ -438,62 +508,8 @@
|
|
|
438
508
|
sx: matrixButtonSx
|
|
439
509
|
},
|
|
440
510
|
"Magnify"
|
|
441
|
-
)))), /* @__PURE__ */
|
|
442
|
-
}), props.clusters.length === 0 && /* @__PURE__ */
|
|
443
|
-
};
|
|
444
|
-
|
|
445
|
-
// src/front/MatrixSetup.tsx
|
|
446
|
-
var import_react2 = __toESM(require_react(), 1);
|
|
447
|
-
var import_material2 = __toESM(require_material(), 1);
|
|
448
|
-
var MATRIX_GREEN2 = "#00ff41";
|
|
449
|
-
var MATRIX_DIM2 = "#006620";
|
|
450
|
-
var MatrixSetup = ({ config, onSave, onClose }) => {
|
|
451
|
-
const [showQuickAccess, setShowQuickAccess] = (0, import_react2.useState)(config.showQuickAccess ?? true);
|
|
452
|
-
const [showRain, setShowRain] = (0, import_react2.useState)(config.showRain ?? true);
|
|
453
|
-
const [rainSpeed, setRainSpeed] = (0, import_react2.useState)(config.rainSpeed ?? 12);
|
|
454
|
-
const [rainActiveLines, setRainActiveLines] = (0, import_react2.useState)(config.rainActiveLines ?? 50);
|
|
455
|
-
const checkSx = { color: MATRIX_DIM2, "&.Mui-checked": { color: MATRIX_GREEN2 } };
|
|
456
|
-
const labelSx = { fontFamily: "monospace", fontSize: "0.85rem", color: MATRIX_GREEN2 };
|
|
457
|
-
const sliderSx = { color: MATRIX_GREEN2, "& .MuiSlider-thumb": { bgcolor: MATRIX_GREEN2 }, "& .MuiSlider-rail": { bgcolor: MATRIX_DIM2 } };
|
|
458
|
-
return /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: true, PaperProps: { sx: { bgcolor: "#000", border: `1px solid ${MATRIX_GREEN2}`, boxShadow: `0 0 20px rgba(0,255,65,0.3)`, color: MATRIX_GREEN2, minWidth: 360 } } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, { sx: { fontFamily: "monospace", fontSize: "1rem", color: MATRIX_GREEN2, borderBottom: `1px solid ${MATRIX_DIM2}`, pb: 1 } }, "// matrix setup"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 2.5, sx: { pt: 2 } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
459
|
-
import_material2.FormControlLabel,
|
|
460
|
-
{
|
|
461
|
-
control: /* @__PURE__ */ import_react2.default.createElement(import_material2.Checkbox, { checked: showQuickAccess, onChange: (e) => setShowQuickAccess(e.target.checked), sx: checkSx }),
|
|
462
|
-
label: /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: labelSx }, "Show tabs / workspaces card")
|
|
463
|
-
}
|
|
464
|
-
), /* @__PURE__ */ import_react2.default.createElement(
|
|
465
|
-
import_material2.FormControlLabel,
|
|
466
|
-
{
|
|
467
|
-
control: /* @__PURE__ */ import_react2.default.createElement(import_material2.Checkbox, { checked: showRain, onChange: (e) => setShowRain(e.target.checked), sx: checkSx }),
|
|
468
|
-
label: /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: labelSx }, "Falling code")
|
|
469
|
-
}
|
|
470
|
-
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 0.5, sx: { opacity: showRain ? 1 : 0.3, pointerEvents: showRain ? "auto" : "none" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM2 } }, "Speed"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_GREEN2 } }, rainSpeed <= 5 ? "fast" : rainSpeed <= 12 ? "normal" : "slow")), /* @__PURE__ */ import_react2.default.createElement(
|
|
471
|
-
import_material2.Slider,
|
|
472
|
-
{
|
|
473
|
-
value: 21 - rainSpeed,
|
|
474
|
-
min: 1,
|
|
475
|
-
max: 20,
|
|
476
|
-
onChange: (_, v) => setRainSpeed(21 - v),
|
|
477
|
-
sx: sliderSx
|
|
478
|
-
}
|
|
479
|
-
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "slow"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "fast"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 0.5, sx: { opacity: showRain ? 1 : 0.3, pointerEvents: showRain ? "auto" : "none" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM2 } }, "Active lines"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_GREEN2 } }, rainActiveLines)), /* @__PURE__ */ import_react2.default.createElement(
|
|
480
|
-
import_material2.Slider,
|
|
481
|
-
{
|
|
482
|
-
value: rainActiveLines,
|
|
483
|
-
min: 5,
|
|
484
|
-
max: 100,
|
|
485
|
-
onChange: (_, v) => setRainActiveLines(v),
|
|
486
|
-
sx: sliderSx
|
|
487
|
-
}
|
|
488
|
-
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "5"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "100"))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, { sx: { borderTop: `1px solid ${MATRIX_DIM2}`, pt: 1 } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
489
|
-
import_material2.Button,
|
|
490
|
-
{
|
|
491
|
-
onClick: () => onSave({ showQuickAccess, showRain, rainSpeed, rainActiveLines }),
|
|
492
|
-
variant: "contained",
|
|
493
|
-
sx: { bgcolor: MATRIX_GREEN2, color: "#000", fontFamily: "monospace", fontWeight: "bold", "&:hover": { bgcolor: "#00cc33" } }
|
|
494
|
-
},
|
|
495
|
-
"Save"
|
|
496
|
-
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: onClose, sx: { color: MATRIX_DIM2, fontFamily: "monospace" } }, "Cancel")));
|
|
511
|
+
)))), /* @__PURE__ */ import_react2.default.createElement(EventLog, { events: clusterEvents[cluster.name] ?? [] })));
|
|
512
|
+
}), props.clusters.length === 0 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", color: MATRIX_GREEN2, p: 2, textShadow: `0 0 8px ${MATRIX_GREEN2}` } }, "// Entering the matrix...")), showSetup && /* @__PURE__ */ import_react2.default.createElement(MatrixSetup, { config: localConfig, onSave: saveConfig, onClose: () => setShowSetup(false) }));
|
|
497
513
|
};
|
|
498
514
|
|
|
499
515
|
// src/front/index.ts
|