feat: complete logs

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

@@ -6,7 +6,7 @@ interface LogFilterState {
   searchQuery: string;
   startDate: Date | null;
   endDate: Date | null;
-  selectedLogLevels: LogLevel[];
+  selectedLogLevel: LogLevel | null;
   selectedService: string;
   selectedAgent: string;
   limit: number;
@@ -15,14 +15,14 @@ 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;
   setOffset: (offset: number) => void;
   resetFilters: () => void;
   getFilters: () => {
-    level?: string | string[];
+    level?: string;
     service?: string;
     agent?: string;
     date_from?: string;
@@ -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) => {
+  setSelectedLogLevel: (level) => set({ selectedLogLevel: level }),
-    const { selectedLogLevels } = get();
-    if (selectedLogLevels.includes(level)) {
-      set({ selectedLogLevels: selectedLogLevels.filter((l) => l !== level) });
-    } else {
-      set({ selectedLogLevels: [...selectedLogLevels, 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,
@@ -73,7 +66,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
 
   getFilters: () => {
     const {
-      selectedLogLevels,
+      selectedLogLevel,
       selectedService,
       selectedAgent,
       startDate,
@@ -82,7 +75,7 @@ export const useLogFilterStore = create<LogFilterState>((set, get) => ({
       offset,
     } = get();
     return {
-      level: selectedLogLevels.length > 0 ? selectedLogLevels : 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;
+  Agent: string;
-  level: string;
+  Level: string;
-  message: string;
+  Message: string;
-  service: string;
+  Service: string;
-  timestamp: string;
+  Timestamp: string;
 }
 
 export interface InsertLogRequest {

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

@@ -14,14 +14,14 @@ const logLevelColors: Record<
   { bg: string; text: string; border: string }
 > = {
   info: {
-    bg: "var(--info-bg)",
+    bg: "rgba(59, 130, 246, 0.1)",
-    text: "var(--info-text)",
+    text: "#3b82f6",
-    border: "var(--info-border)",
+    border: "rgba(59, 130, 246, 0.3)",
   },
   warning: {
-    bg: "var(--warning-bg)",
+    bg: "rgba(245, 158, 11, 0.1)",
-    text: "var(--warning-text)",
+    text: "#f59e0b",
-    border: "var(--warning-border)",
+    border: "rgba(245, 158, 11, 0.3)",
   },
   error: {
     bg: "var(--error-bg)",
@@ -29,9 +29,9 @@ const logLevelColors: Record<
     border: "var(--error-border)",
   },
   fatal: {
-    bg: "var(--fatal-bg)",
+    bg: "rgba(168, 85, 247, 0.1)",
-    text: "var(--fatal-text)",
+    text: "#a855f7",
-    border: "var(--fatal-border)",
+    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(
               (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,6 +294,24 @@ 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" />
@@ -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

@@ -26,14 +26,14 @@ const logLevelColors: Record<
   { bg: string; text: string; border: string }
 > = {
   info: {
-    bg: "var(--info-bg)",
+    bg: "rgba(59, 130, 246, 0.1)",
-    text: "var(--info-text)",
+    text: "#3b82f6",
-    border: "var(--info-border)",
+    border: "rgba(59, 130, 246, 0.3)",
   },
   warning: {
-    bg: "var(--warning-bg)",
+    bg: "rgba(245, 158, 11, 0.1)",
-    text: "var(--warning-text)",
+    text: "#f59e0b",
-    border: "var(--warning-border)",
+    border: "rgba(245, 158, 11, 0.3)",
   },
   error: {
     bg: "var(--error-bg)",
@@ -41,9 +41,9 @@ const logLevelColors: Record<
     border: "var(--error-border)",
   },
   fatal: {
-    bg: "var(--fatal-bg)",
+    bg: "rgba(168, 85, 247, 0.1)",
-    text: "var(--fatal-text)",
+    text: "#a855f7",
-    border: "var(--fatal-border)",
+    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?.toLowerCase() || "info";
+                      const level = log.Level?.toLowerCase() || "info";
                       const colors =
                         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>
                       );