https://www.hamienet.com/assets/SystemMonitor-BtaKLdqu.js

1import { r as reactExports, j as jsxRuntimeExports } from "./vendor-react-Bay9Y7Lb.js";
2import { a as api } from "./index-D0Bmh-UX.js";
3import { ci as Cpu, cL as RefreshCw, bQ as ExternalLink, d4 as ShieldCheck, aY as TriangleAlert, b9 as Settings } from "./vendor-dVNaLJx_.js";
4import "./vendor-i18n-R-bMoYp_.js";
5const SystemMonitor = () => {
6  const [beszelUrl, setBeszelUrl] = reactExports.useState("");
7  const [isLoading, setIsLoading] = reactExports.useState(true);
8  const [iframeKey, setIframeKey] = reactExports.useState(0);
9  const [hasError, setHasError] = reactExports.useState(false);
10  const [clusterInfo, setClusterInfo] = reactExports.useState({ hkStatus: "online", jpStatus: "online", mode: "WireGuard Tunnel" });
11  const iframeRef = reactExports.useRef(null);
12  reactExports.useEffect(() => {
13    const getUrl = async () => {
14      try {
15        const setting = await api.getSystemSetting("beszel_url");
16        if (setting && typeof setting.value === "string" && setting.value.trim() !== "") {
17          setBeszelUrl(setting.value);
18        } else {
19          setBeszelUrl("/beszel");
20        }
21      } catch (err) {
22        console.error("Failed to load beszel_url setting, falling back to relative path:", err);
23        setBeszelUrl("/beszel");
24      }
25    };
26    getUrl();
27  }, []);
28  const handleReload = () => {
29    setIsLoading(true);
30    setHasError(false);
31    setIframeKey((prev) => prev + 1);
32  };
33  const handleIframeLoad = () => {
34    setIsLoading(false);
35  };
36  reactExports.useEffect(() => {
37    const timer = setTimeout(() => {
38      if (isLoading) {
39        setHasError(true);
40      }
41    }, 12e3);
42    return () => clearTimeout(timer);
43  }, [isLoading, iframeKey]);
44  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full w-full bg-[#050505] text-zinc-100 p-6 space-y-6 overflow-hidden select-none", children: [
45    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 shrink-0 bg-zinc-900/40 border border-zinc-800/80 p-5 rounded-2xl backdrop-blur-md", children: [

46      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
47        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 bg-indigo-600/10 border border-indigo-500/20 text-indigo-400 rounded-xl shadow-[0_0_15px_rgba(99,102,241,0.15)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cpu, { className: "w-6 h-6 animate-pulse" }) }),
48        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
49          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-bold tracking-tight text-white flex items-center gap-2", children: "Infrastructure Analytics" }),
50          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 mt-1 text-xs text-zinc-500", children: [
51            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5 text-emerald-400 font-medium", children: [
52              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping" }),
53              clusterInfo.mode,
54              " Active"
55            ] }),

56            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-zinc-700", children: "•" }),
57            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1", children: [
58              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
59              "HK Node: Online"
60            ] }),
61            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-zinc-700", children: "•" }),
62            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1", children: [
63              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
64              "JP Node: Online"
65            ] })
66          ] })
67        ] })
68      ] }),
69      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2.5", children: [
70        /* @__PURE__ */ jsxRuntimeExports.jsxs(
71          "button",
72          {
73            onClick: handleReload,
74            className: "flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 text-xs font-bold uppercase rounded-lg transition-all",
75            children: [

76              /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { size: 14, className: isLoading ? "animate-spin" : "" }),
77              "Reload Monitor"
78            ]
79          }
80        ),
81        beszelUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(
82          "a",
83          {
84            href: beszelUrl,
85            target: "_blank",
86            rel: "noopener noreferrer",
87            className: "flex items-center gap-2 px-4 py-2 bg-indigo-600/10 hover:bg-indigo-600/20 border border-indigo-500/20 hover:border-indigo-500/30 text-indigo-400 text-xs font-bold uppercase rounded-lg transition-all",
88            children: [
89              /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { size: 14 }),
90              "Launch Window"
91            ]
92          }
93        )
94      ] })
95    ] }),
96    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 w-full relative bg-zinc-950/80 border border-zinc-900 rounded-2xl overflow-hidden shadow-[0_0_30px_rgba(0,0,0,0.5)]", children: [
97      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-zinc-900/90 border border-zinc-800/80 p-8 rounded-2xl flex flex-col items-center justify-center max-w-sm text-center shadow-2xl space-y-4", children: [

98        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
99          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full border-2 border-indigo-500/10 border-t-indigo-500 animate-spin" }),
100          /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldCheck, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-indigo-400 w-5 h-5 animate-pulse" })
101        ] }),
102        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
103          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-bold text-white uppercase tracking-wider", children: "Establishing Connection" }),
104          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-zinc-500 mt-1.5 leading-relaxed", children: "Performing WireGuard handshake and loading local node metrics..." })
105        ] })
106      ] }) }),
107      beszelUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
108        "iframe",
109        {
110          ref: iframeRef,
111          src: beszelUrl,
112          className: "w-full h-full border-none",
113          onLoad: handleIframeLoad,
114          sandbox: "allow-same-origin allow-scripts allow-forms allow-popups"
115        },
116        iframeKey
117      ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-zinc-500", children: "Initializing url configuration..." }),
118      hasError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute bottom-4 right-4 z-20 max-w-sm bg-amber-500/10 border border-amber-500/20 p-4 rounded-xl backdrop-blur-md flex gap-3 animate-in slide-in-from-bottom-2", children: [

119        /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "text-amber-500 shrink-0 mt-0.5", size: 18 }),
120        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
121          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-xs font-bold text-amber-400 uppercase", children: "Connection Slow" }),
122          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[10px] text-zinc-400 mt-1 leading-relaxed", children: 'If the dashboard fails to load, check that Beszel Hub is active in Nginx Proxy Manager or click "Launch Window" to bypass iframe policies.' })
123        ] })
124      ] })
125    ] }),
126    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "shrink-0 bg-zinc-900/10 border border-zinc-800/30 p-4 rounded-xl flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 text-xs text-zinc-500", children: [
127      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
128        /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { size: 14, className: "text-zinc-600" }),

129        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
130          "Framing Target: ",
131          /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "font-mono text-zinc-400 bg-zinc-900/60 px-1.5 py-0.5 rounded border border-zinc-800", children: beszelUrl })
132        ] })
133      ] }),
134      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Status: Both HK and JP agents transmitting securely" })
135    ] })
136  ] });
137};
138export {
139  SystemMonitor as default
140};