feat: dashboard-page

2026-04-04 16:53:12 +03:00
parent 55cb214458
commit 78f35f6811
11 changed files with 1221 additions and 0 deletions
@@ -0,0 +1,197 @@
+import { DashboardChart } from "@/modules/dashboard/components/dashboard.chart";
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+const generateTimeData = (count: number, base: number, variance: number) => {
+  const data = [];
+  const now = new Date();
+  for (let i = count - 1; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 60000);
+    const h = time.getHours().toString().padStart(2, "0");
+    const m = time.getMinutes().toString().padStart(2, "0");
+    data.push({
+      timestamp: `${h}:${m}`,
+      value: Math.round(
+        base + Math.sin(i / 3) * variance + Math.random() * variance * 0.5,
+      ),
+    });
+  }
+  return data;
+};
+
+const cpuData = generateTimeData(20, 45, 25).map((d, i) => ({
+  timestamp: d.timestamp,
+  "Использование %": d.value,
+}));
+
+const ramData = generateTimeData(20, 60, 15).map((d) => ({
+  timestamp: d.timestamp,
+  "Использовано ГБ": d.value / 10,
+  "Свободно ГБ": 16 - d.value / 10,
+}));
+
+const diskData = generateTimeData(20, 70, 5).map((d) => ({
+  timestamp: d.timestamp,
+  "Занято ГБ": d.value,
+}));
+
+const networkData = generateTimeData(20, 50, 30).map((d) => ({
+  timestamp: d.timestamp,
+  "Входящий Мбит/с": d.value,
+  "Исходящий Мбит/с": Math.round(d.value * 0.4),
+}));
+
+const metricData = [
+  { name: "INFO", value: 125 },
+  { name: "WARN", value: 42 },
+  { name: "ERROR", value: 18 },
+  { name: "CRITICAL", value: 5 },
+];
+
+export const DashboardPage = () => {
+  return (
+    <div style={{ padding: "16px 20px" }}>
+      <h1
+        style={{
+          fontSize: "16px",
+          fontWeight: 600,
+          color: "var(--text-primary)",
+          marginBottom: "16px",
+        }}
+      >
+        Мониторинг системы
+      </h1>
+
+      <div
+        style={{
+          maxWidth: "1100px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+        }}
+      >
+        {/* Центр: Метрика логов — круговая диаграмма */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <div style={{ width: "100%", maxWidth: 600 }}>
+            <h3
+              style={{
+                fontSize: "13px",
+                fontWeight: 600,
+                color: "var(--text-primary)",
+                marginBottom: "8px",
+                textAlign: "center",
+              }}
+            >
+              Метрики логов
+            </h3>
+            <div style={{ height: 320 }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={metricData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={65}
+                    outerRadius={110}
+                    paddingAngle={4}
+                    dataKey="value"
+                    nameKey="name"
+                    strokeWidth={0}
+                  >
+                    {metricData.map((entry, index) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={
+                          ["#10b981", "#f59e0b", "#ef4444", "#dc2626"][index]
+                        }
+                      />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "var(--card-bg)",
+                      border: "1px solid var(--border)",
+                      borderRadius: "4px",
+                      fontSize: "11px",
+                      padding: "4px 8px",
+                    }}
+                  />
+                  <Legend
+                    wrapperStyle={{
+                      fontSize: "11px",
+                      paddingTop: "4px",
+                    }}
+                    iconType="circle"
+                    iconSize={8}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
+        {/* Верхний ряд: CPU + RAM */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: "12px",
+          }}
+        >
+          <DashboardChart
+            title="CPU"
+            type="line"
+            data={cpuData}
+            dataKeys={["Использование %"]}
+            colors={["#3b82f6"]}
+          />
+
+          <DashboardChart
+            title="Оперативная память"
+            type="area"
+            data={ramData}
+            dataKeys={["Использовано ГБ", "Свободно ГБ"]}
+            colors={["#10b981", "#64748b"]}
+          />
+        </div>
+
+        {/* Нижний ряд: Диск + Сеть */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: "12px",
+          }}
+        >
+          <DashboardChart
+            title="Жесткий диск"
+            type="line"
+            data={diskData}
+            dataKeys={["Занято ГБ"]}
+            colors={["#f59e0b"]}
+          />
+
+          <DashboardChart
+            title="Сеть"
+            type="area"
+            data={networkData}
+            dataKeys={["Входящий Мбит/с", "Исходящий Мбит/с"]}
+            colors={["#8b5cf6", "#06b6d4"]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};