Merge branch 'frontend' of gitea.d3m0k1d.ru:d3m0k1d/HellreigN into HEAD

frontend/src/modules/agent/store/logFilter.store.ts

@@ -1,12 +1,12 @@
 import { create } from "zustand";
 
-export type LogLevel = "INFO" | "WARNING" | "ERROR" | "FATAL";
+export type LogLevel = "info" | "warning" | "error" | "fatal";
 
 interface LogFilterState {
   searchQuery: string;
   startDate: Date | null;
   endDate: Date | null;
-  selectedLogLevels: LogLevel[];
+  selectedLogLevel: LogLevel | null;
   selectedService: string;
   selectedAgent: string;
   limit: number;
@@ -15,7 +15,7 @@ interface LogFilterState {
   setSearchQuery: (query: string) => void;
   setStartDate: (date: Date | null) => void;
   setEndDate: (date: Date | null) => void;
-  toggleLogLevel: (level: LogLevel) => void;
+  setSelectedLogLevel: (level: LogLevel | null) => void;
   setSelectedService: (service: string) => void;
   setSelectedAgent: (agent: string) => void;
   setLimit: (limit: number) => void;
@@ -36,7 +36,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
   searchQuery: "",
   startDate: null,
   endDate: null,
-  selectedLogLevels: ["INFO", "WARNING", "ERROR", "FATAL"],
+  selectedLogLevel: null,
   selectedService: "",
   selectedAgent: "",
   limit: 100,
@@ -45,14 +45,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
   setSearchQuery: (query) => set({ searchQuery: query }),
   setStartDate: (date) => set({ startDate: date }),
   setEndDate: (date) => set({ endDate: date }),
-  toggleLogLevel: (level) => {
-    const { selectedLogLevels } = get();
-    if (selectedLogLevels.includes(level)) {
-      set({ selectedLogLevels: selectedLogLevels.filter((l) => l !== level) });
-    } else {
-      set({ selectedLogLevels: [...selectedLogLevels, level] });
-    }
-  },
+  setSelectedLogLevel: (level) => set({ selectedLogLevel: level }),
   setSelectedService: (service) => set({ selectedService: service }),
   setSelectedAgent: (agent) => set({ selectedAgent: agent }),
   setLimit: (limit) => set({ limit }),
@@ -63,7 +56,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
       searchQuery: "",
       startDate: null,
       endDate: null,
-      selectedLogLevels: ["INFO", "WARNING", "ERROR", "FATAL"],
+      selectedLogLevel: null,
       selectedService: "",
       selectedAgent: "",
       limit: 100,
@@ -72,9 +65,17 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
   },
 
   getFilters: () => {
-    const { selectedLogLevels, selectedService, selectedAgent, startDate, endDate, limit, offset } = get();
+    const {
+      selectedLogLevel,
+      selectedService,
+      selectedAgent,
+      startDate,
+      endDate,
+      limit,
+      offset,
+    } = get();
     return {
-      level: selectedLogLevels.length > 0 ? selectedLogLevels.join(",") : undefined,
+      level: selectedLogLevel || undefined,
       service: selectedService || undefined,
       agent: selectedAgent || undefined,
       date_from: startDate ? startDate.toISOString() : undefined,

frontend/src/modules/agent/types/agent.types.ts

@@ -42,11 +42,11 @@ export interface TokenUser {
 }
 
 export interface LogEntry {
-  agent: string;
-  level: string;
-  message: string;
-  service: string;
-  timestamp: string;
+  Agent: string;
+  Level: string;
+  Message: string;
+  Service: string;
+  Timestamp: string;
 }
 
 export interface InsertLogRequest {
@@ -62,7 +62,7 @@ export interface InsertLogsRequest {
 }
 
 export interface LogFilters {
-  level?: string;
+  level?: string | string[];
   service?: string;
   agent?: string;
   date_from?: string;

frontend/src/modules/agent/ui/LogFilters.tsx

@@ -13,25 +13,25 @@ const logLevelColors: Record<
   LogLevel,
   { bg: string; text: string; border: string }
 > = {
-  INFO: {
-    bg: "var(--info-bg)",
-    text: "var(--info-text)",
-    border: "var(--info-border)",
+  info: {
+    bg: "rgba(59, 130, 246, 0.1)",
+    text: "#3b82f6",
+    border: "rgba(59, 130, 246, 0.3)",
   },
-  WARNING: {
-    bg: "var(--warning-bg)",
-    text: "var(--warning-text)",
-    border: "var(--warning-border)",
+  warning: {
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    border: "rgba(245, 158, 11, 0.3)",
   },
-  ERROR: {
+  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)",
+  fatal: {
+    bg: "rgba(168, 85, 247, 0.1)",
+    text: "#a855f7",
+    border: "rgba(168, 85, 247, 0.3)",
   },
 };
 
@@ -50,13 +50,13 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
     searchQuery,
     startDate,
     endDate,
-    selectedLogLevels,
+    selectedLogLevel,
     selectedService,
     selectedAgent,
     setSearchQuery,
     setStartDate,
     setEndDate,
-    toggleLogLevel,
+    setSelectedLogLevel,
     setSelectedService,
     setSelectedAgent,
     resetFilters,
@@ -67,6 +67,9 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
   const [localEndDate, setLocalEndDate] = useState<Date | null>(endDate);
   const [localService, setLocalService] = useState(selectedService);
   const [localAgent, setLocalAgent] = useState(selectedAgent);
+  const [localLevel, setLocalLevel] = useState<LogLevel | null>(
+    selectedLogLevel,
+  );
 
   useEffect(() => {
     setLocalSearchQuery(searchQuery);
@@ -88,10 +91,15 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
     setLocalAgent(selectedAgent);
   }, [selectedAgent]);
 
+  useEffect(() => {
+    setLocalLevel(selectedLogLevel);
+  }, [selectedLogLevel]);
+
   const handleApply = useCallback(() => {
     setSearchQuery(localSearchQuery);
     setStartDate(localStartDate);
     setEndDate(localEndDate);
+    setSelectedLogLevel(localLevel);
     setSelectedService(localService);
     setSelectedAgent(localAgent);
     onApply();
@@ -99,6 +107,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
     localSearchQuery,
     localStartDate,
     localEndDate,
+    localLevel,
     localService,
     localAgent,
     onApply,
@@ -108,6 +117,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
     setLocalSearchQuery("");
     setLocalStartDate(null);
     setLocalEndDate(null);
+    setLocalLevel(null);
     setLocalService("");
     setLocalAgent("");
     resetFilters();
@@ -121,7 +131,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
     if (endDate) count++;
     if (selectedService) count++;
     if (selectedAgent) count++;
-    if (selectedLogLevels.length < 4) count++;
+    if (selectedLogLevel) count++;
     return count;
   };
 
@@ -265,21 +275,18 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
               className="text-xs font-medium"
               style={{ color: "var(--text-secondary)" }}
             >
-              Уровни логов
-            </span>
-            <span className="text-xs" style={{ color: "var(--text-muted)" }}>
-              ({selectedLogLevels.length}/4)
+              Уровень логов
             </span>
           </div>
           <div className="flex flex-wrap gap-2">
-            {(["INFO", "WARNING", "ERROR", "FATAL"] as LogLevel[]).map(
+            {(["info", "warning", "error", "fatal"] as LogLevel[]).map(
               (level) => {
-                const isSelected = selectedLogLevels.includes(level);
+                const isSelected = localLevel === level;
                 const colors = logLevelColors[level];
                 return (
                   <button
                     key={level}
-                    onClick={() => toggleLogLevel(level)}
+                    onClick={() => setLocalLevel(isSelected ? null : level)}
                     className="px-3 py-2 rounded-lg text-xs font-medium transition-all border flex-shrink-0"
                     style={{
                       backgroundColor: isSelected ? colors.bg : "transparent",
@@ -287,11 +294,29 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
                       borderColor: isSelected ? colors.border : "var(--border)",
                       minHeight: "36px",
                     }}
+                    onMouseEnter={(e) => {
+                      if (isSelected) {
+                        e.currentTarget.style.backgroundColor = colors.text;
+                        e.currentTarget.style.color = "#fff";
+                      } else {
+                        e.currentTarget.style.backgroundColor =
+                          "rgba(128, 128, 128, 0.08)";
+                        e.currentTarget.style.color = "var(--text-primary)";
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = isSelected
+                        ? colors.bg
+                        : "transparent";
+                      e.currentTarget.style.color = isSelected
+                        ? colors.text
+                        : "var(--text-secondary)";
+                    }}
                   >
                     {isSelected && (
                       <FiCheck size={10} className="inline mr-1" />
                     )}
-                    {level}
+                    {level.toUpperCase()}
                   </button>
                 );
               },
@@ -402,6 +427,39 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
                   </button>
                 </div>
               )}
+              {selectedLogLevel &&
+                (() => {
+                  const colors = logLevelColors[selectedLogLevel];
+                  return (
+                    <div
+                      className="flex items-center gap-1 px-2 py-1 rounded-lg border text-xs"
+                      style={{
+                        backgroundColor: colors.bg,
+                        borderColor: colors.border,
+                      }}
+                    >
+                      <FiTag size={10} style={{ color: colors.text }} />
+                      <span style={{ color: colors.text }}>
+                        Уровень: {selectedLogLevel.toUpperCase()}
+                      </span>
+                      <button
+                        onClick={() => {
+                          setLocalLevel(null);
+                          setSelectedLogLevel(null);
+                          onApply();
+                        }}
+                        style={{
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          color: colors.text,
+                        }}
+                      >
+                        <FiX size={10} />
+                      </button>
+                    </div>
+                  );
+                })()}
               {selectedAgent && (
                 <div
                   className="flex items-center gap-1 px-2 py-1 rounded-lg border text-xs"

frontend/src/pages/logs.page.tsx

@@ -15,35 +15,35 @@ import {
 } from "react-icons/fi";
 
 const logLevelIcons: Record<string, React.ReactNode> = {
-  INFO: <FiInfo size={14} />,
-  WARNING: <FiAlertTriangle size={14} />,
-  ERROR: <FiAlertCircle size={14} />,
-  FATAL: <FiXOctagon size={14} />,
+  info: <FiInfo size={14} />,
+  warning: <FiAlertTriangle size={14} />,
+  error: <FiAlertCircle size={14} />,
+  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)",
+  info: {
+    bg: "rgba(59, 130, 246, 0.1)",
+    text: "#3b82f6",
+    border: "rgba(59, 130, 246, 0.3)",
   },
-  WARNING: {
-    bg: "var(--warning-bg)",
-    text: "var(--warning-text)",
-    border: "var(--warning-border)",
+  warning: {
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    border: "rgba(245, 158, 11, 0.3)",
   },
-  ERROR: {
+  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)",
+  fatal: {
+    bg: "rgba(168, 85, 247, 0.1)",
+    text: "#a855f7",
+    border: "rgba(168, 85, 247, 0.3)",
   },
 };
 
@@ -306,13 +306,13 @@ export const LogsPage: React.FC = () => {
                   </thead>
                   <tbody>
                     {logs.map((log, index) => {
-                      const level = log.level || "INFO";
+                      const level = log.Level?.toLowerCase() || "info";
                       const colors =
-                        logLevelColors[level] || logLevelColors.INFO;
+                        logLevelColors[level] || logLevelColors.info;
                       return (
                         <tr
                           key={index}
-                          className="border-t"
+                          className="border-t transition-colors"
                           style={{
                             borderColor: "var(--border)",
                             backgroundColor:
@@ -320,12 +320,22 @@ export const LogsPage: React.FC = () => {
                                 ? "var(--card-bg)"
                                 : "var(--bg-secondary)",
                           }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.backgroundColor =
+                              "var(--border)";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.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)" }}
                           >
-                            {formatTimestamp(log.timestamp)}
+                            {formatTimestamp(log.Timestamp)}
                           </td>
                           <td className="px-4 py-3">
                             <span
@@ -344,19 +354,19 @@ export const LogsPage: React.FC = () => {
                             className="px-4 py-3 text-sm"
                             style={{ color: "var(--text-primary)" }}
                           >
-                            {log.service || "—"}
+                            {log.Service || "—"}
                           </td>
                           <td
                             className="px-4 py-3 text-sm font-mono"
                             style={{ color: "var(--text-primary)" }}
                           >
-                            {log.agent || "—"}
+                            {log.Agent || "—"}
                           </td>
                           <td
                             className="px-4 py-3 text-sm"
                             style={{ color: "var(--text-primary)" }}
                           >
-                            {log.message || "—"}
+                            {log.Message || "—"}
                           </td>
                         </tr>
                       );

frontend/src/shared/api/axios.instance.ts

@@ -24,6 +24,33 @@ class ApiClient {
       validateStatus: (status) => {
         return status >= 200 && status < 400;
       },
+      // Добавляем кастомный сериализатор параметров
+      paramsSerializer: {
+        serialize: (params) => {
+          const parts: string[] = [];
+
+          Object.entries(params).forEach(([key, value]) => {
+            if (value === undefined || value === null) return;
+
+            if (Array.isArray(value)) {
+              // Преобразуем массив в множественные параметры: level=info&level=warning
+              value.forEach((item) => {
+                if (item !== undefined && item !== null) {
+                  parts.push(
+                    `${encodeURIComponent(key)}=${encodeURIComponent(item)}`,
+                  );
+                }
+              });
+            } else {
+              parts.push(
+                `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
+              );
+            }
+          });
+
+          return parts.join("&");
+        },
+      },
     });
 
     this.setupInterceptors();