HellreigN/frontend/src/pages/dashboard.page.tsx

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>
  );
};