feat

2026-04-04 19:49:37 +03:00
parent 69ff617c30
commit c6a9907822
7 changed files with 171 additions and 123 deletions
@@ -1,5 +1,10 @@
 import { useMemo } from "react";
-import { Graph, type GraphData, type GraphNode, type GraphLink } from "@/modules/graph";
+import {
+  Graph,
+  type GraphData,
+  type GraphNode,
+  type GraphLink,
+} from "@/modules/graph";
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";

 const buildGraphFromAgents = (): GraphData => {
@@ -10,26 +15,26 @@ const buildGraphFromAgents = (): GraphData => {
  agents.forEach((agent) => {
    // Агент как узел
    nodes.push({
-      id: agent.name,
-      name: agent.name,
+      id: agent.label,
+      name: agent.label,
      type: "agent",
      val: 8,
-      description: `Агент: ${agent.name}`,
+      description: `Агент: ${agent.label}`,
    });

    // Сервисы агента как узлы + связи
    agent.services.forEach((service) => {
-      const serviceId = `${agent.name}-${service.name}`;
+      const serviceId = `${agent.label}-${service}`;
      nodes.push({
        id: serviceId,
-        name: service.name,
+        name: service,
        type: "service",
        val: 12,
-        description: `Сервис: ${service.name} (${service.status})`,
+        description: `Сервис: ${service}`,
      });

      links.push({
-        source: agent.name,
+        source: agent.label,
        target: serviceId,
        type: "hosts",
      });
@@ -21,11 +21,30 @@ const logLevelIcons: Record<string, React.ReactNode> = {
  FATAL: <FiXOctagon size={14} />,
 };

-const logLevelColors: Record<string, { bg: string; text: string; border: string }> = {
-  INFO: { bg: "var(--info-bg)", text: "var(--info-text)", border: "var(--info-border)" },
-  WARNING: { bg: "var(--warning-bg)", text: "var(--warning-text)", border: "var(--warning-border)" },
-  ERROR: { bg: "var(--error-bg)", text: "var(--error-text)", border: "var(--error-border)" },
-  FATAL: { bg: "var(--fatal-bg)", text: "var(--fatal-text)", border: "var(--fatal-border)" },
+const logLevelColors: Record<
+  string,
+  { bg: string; text: string; border: string }
+> = {
+  INFO: {
+    bg: "var(--info-bg)",
+    text: "var(--info-text)",
+    border: "var(--info-border)",
+  },
+  WARNING: {
+    bg: "var(--warning-bg)",
+    text: "var(--warning-text)",
+    border: "var(--warning-border)",
+  },
+  ERROR: {
+    bg: "var(--error-bg)",
+    text: "var(--error-text)",
+    border: "var(--error-border)",
+  },
+  FATAL: {
+    bg: "var(--fatal-bg)",
+    text: "var(--fatal-text)",
+    border: "var(--fatal-border)",
+  },
 };

 export const LogsPage: React.FC = () => {
@@ -47,7 +66,9 @@ export const LogsPage: React.FC = () => {
      setLogs(data);
      setTotalLogs(data.length);
    } catch (err) {
-      setError(err instanceof Error ? err.message : "Ошибка при загрузке логов");
+      setError(
+        err instanceof Error ? err.message : "Ошибка при загрузке логов",
+      );
    } finally {
      setIsLoading(false);
    }
@@ -112,7 +133,10 @@ export const LogsPage: React.FC = () => {
              className="w-14 h-14 rounded-xl flex items-center justify-center"
              style={{ backgroundColor: "var(--bg-secondary)" }}
            >
-              <FiFileText className="w-7 h-7" style={{ color: "var(--accent)" }} />
+              <FiFileText
+                className="w-7 h-7"
+                style={{ color: "var(--accent)" }}
+              />
            </div>
            <div>
              <h1
@@ -160,8 +184,14 @@ export const LogsPage: React.FC = () => {
          }}
        >
          {/* Table Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: "var(--border)" }}>
-            <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
+          <div
+            className="flex items-center justify-between px-4 py-3 border-b"
+            style={{ borderColor: "var(--border)" }}
+          >
+            <span
+              className="text-sm font-medium"
+              style={{ color: "var(--text-primary)" }}
+            >
              Найдено: {totalLogs} записей
            </span>
            <button
@@ -173,18 +203,27 @@ export const LogsPage: React.FC = () => {
                borderColor: "var(--border)",
              }}
            >
-              <FiRefreshCw size={12} className={isLoading ? "animate-spin" : ""} />
+              <FiRefreshCw
+                size={12}
+                className={isLoading ? "animate-spin" : ""}
+              />
              Обновить
            </button>
          </div>

          {isLoading ? (
-            <div className="flex items-center justify-center py-12" style={{ color: "var(--text-secondary)" }}>
+            <div
+              className="flex items-center justify-center py-12"
+              style={{ color: "var(--text-secondary)" }}
+            >
              <FiRefreshCw size={24} className="animate-spin mr-3" />
              Загрузка логов...
            </div>
          ) : logs.length === 0 ? (
-            <div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
+            <div
+              className="text-center py-12"
+              style={{ color: "var(--text-muted)" }}
+            >
              Логи не найдены
            </div>
          ) : (
@@ -193,36 +232,58 @@ export const LogsPage: React.FC = () => {
                <table className="w-full">
                  <thead>
                    <tr style={{ backgroundColor: "var(--bg-secondary)" }}>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                        Время
                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                        Уровень
                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                        Сервис
                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                        Агент
                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>
+                      <th
+                        className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
                        Сообщение
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {logs.map((log, index) => {
-                      const colors = logLevelColors[log.level] || logLevelColors.INFO;
+                      const colors =
+                        logLevelColors[log.level] || logLevelColors.INFO;
                      return (
                        <tr
                          key={index}
                          className="border-t"
                          style={{
                            borderColor: "var(--border)",
-                            backgroundColor: index % 2 === 0 ? "var(--card-bg)" : "var(--bg-secondary)",
+                            backgroundColor:
+                              index % 2 === 0
+                                ? "var(--card-bg)"
+                                : "var(--bg-secondary)",
                          }}
                        >
-                          <td className="px-4 py-3 text-sm font-mono whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                          <td
+                            className="px-4 py-3 text-sm font-mono whitespace-nowrap"
+                            style={{ color: "var(--text-secondary)" }}
+                          >
                            {formatTimestamp(log.timestamp)}
                          </td>
                          <td className="px-4 py-3">
@@ -238,13 +299,22 @@ export const LogsPage: React.FC = () => {
                              {log.level}
                            </span>
                          </td>
-                          <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>
+                          <td
+                            className="px-4 py-3 text-sm"
+                            style={{ color: "var(--text-primary)" }}
+                          >
                            {log.service}
                          </td>
-                          <td className="px-4 py-3 text-sm font-mono" style={{ color: "var(--text-primary)" }}>
+                          <td
+                            className="px-4 py-3 text-sm font-mono"
+                            style={{ color: "var(--text-primary)" }}
+                          >
                            {log.agent}
                          </td>
-                          <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>
+                          <td
+                            className="px-4 py-3 text-sm"
+                            style={{ color: "var(--text-primary)" }}
+                          >
                            {log.message}
                          </td>
                        </tr>
@@ -255,7 +325,10 @@ export const LogsPage: React.FC = () => {
              </div>

              {/* Pagination */}
-              <div className="flex items-center justify-between px-4 py-3 border-t" style={{ borderColor: "var(--border)" }}>
+              <div
+                className="flex items-center justify-between px-4 py-3 border-t"
+                style={{ borderColor: "var(--border)" }}
+              >
                <button
                  onClick={handlePrevPage}
                  disabled={offset === 0}
@@ -269,7 +342,10 @@ export const LogsPage: React.FC = () => {
                  <FiChevronLeft size={16} />
                  Назад
                </button>
-                <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                <span
+                  className="text-sm"
+                  style={{ color: "var(--text-secondary)" }}
+                >
                  Показано {logs.length} записей (смещение: {offset})
                </span>
                <button