first commit

2024-08-23 19:17:13 +00:00
commit d6df9f205a
23 changed files with 6009 additions and 0 deletions
--- a/app/components/WebConsole/stats.tsx
+++ b/app/components/WebConsole/stats.tsx
@@ -0,0 +1,116 @@
+import React, { useEffect, useState, useRef } from "react";
+
+interface Stats {
+  cpu: number;
+  ramUsage: number;
+  ramTotal: number;
+  diskUsage: number;
+  diskTotal: number;
+  network: NetworkStats;
+  uptime: number;
+}
+
+interface NetworkStats {
+  inbound: number;
+  outbound: number;
+}
+
+const StatsComponent = ({
+  cpu,
+  ramUsage,
+  ramTotal,
+  diskUsage,
+  diskTotal,
+  network,
+  uptime,
+}: Stats) => {
+  const [inboundSpeed, setInboundSpeed] = useState(0);
+  const [outboundSpeed, setOutboundSpeed] = useState(0);
+  const [uptimeStat, setUptime] = useState(uptime);
+
+  // useRef to przechowywanie poprzednich wartości bez powodowania ponownego renderowania komponentu
+  const previousInbound = useRef(network.inbound);
+  const previousOutbound = useRef(network.outbound);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const currentInbound = network.inbound;
+      const currentOutbound = network.outbound;
+
+      const inboundDifference = currentInbound - previousInbound.current;
+      const outboundDifference = currentOutbound - previousOutbound.current;
+
+      setInboundSpeed(inboundDifference);
+      setOutboundSpeed(outboundDifference);
+
+      // Aktualizacja poprzednich wartości
+      previousInbound.current = currentInbound;
+      previousOutbound.current = currentOutbound;
+    }, 1000); // Prędkość będzie aktualizowana co 1 sekundę
+
+    return () => clearInterval(intervalId); // Czyszczenie interwału po odmontowaniu komponentu
+  }, [network.inbound, network.outbound]);
+
+  // substract current tiimestamp with the timestamp from timestamp variable and convert it to days hours minutes and seconds
+  const formatUptime = (timestamp: number) => {
+    // convert miliseconds to string formatted days hours minutes and seconds
+    const days = Math.floor(timestamp / (1000 * 60 * 60 * 24));
+    const hours = Math.floor(
+      (timestamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+    );
+    const minutes = Math.floor((timestamp % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((timestamp % (1000 * 60)) / 1000);
+
+    return `${days}d ${hours}h ${minutes}m ${seconds}s`;
+  };
+
+  return (
+    <div>
+      <div className="stats stats-vertical shadow w-full">
+        <div className="stat">
+          <div className="stat-title">Uptime</div>
+          <div className="stat-value">{formatUptime(uptime)}</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">CPU</div>
+          <div className="stat-value">{cpu} %</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">RAM</div>
+          <div className="stat-value">{ramUsage} GB</div>
+          <div className="stat-desc">{ramTotal} GB</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Storage</div>
+          <div className="stat-value">{diskUsage} GB</div>
+          <div className="stat-desc">{diskTotal} GB</div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Network (Inbound)</div>
+          <div className="stat-value">
+            {Math.round(inboundSpeed / 1024)} kB/s
+          </div>
+          <div className="stat-desc">
+            {Math.round(network.inbound / (1024 * 1024))} MB
+          </div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Network (Outbound)</div>
+          <div className="stat-value">
+            {Math.round(outboundSpeed / 1024)} kB/s
+          </div>
+          <div className="stat-desc">
+            {Math.round(network.outbound / (1024 * 1024))} MB
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatsComponent;