feat: complete logs

2026-04-05 00:55:05 +03:00
parent 43ea41f633
commit cf6065b55a
4 changed files with 114 additions and 53 deletions
@@ -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) => {
-    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,
@@ -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,
@@ -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 {
@@ -14,14 +14,14 @@ const logLevelColors: Record<
  { bg: string; text: string; border: string }
 > = {
  info: {
-    bg: "var(--info-bg)",
-    text: "var(--info-text)",
-    border: "var(--info-border)",
+    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)",
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    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)",
-    text: "var(--fatal-text)",
-    border: "var(--fatal-border)",
+    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(
              (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"
@@ -26,14 +26,14 @@ const logLevelColors: Record<
  { bg: string; text: string; border: string }
 > = {
  info: {
-    bg: "var(--info-bg)",
-    text: "var(--info-text)",
-    border: "var(--info-border)",
+    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)",
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    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)",
-    text: "var(--fatal-text)",
-    border: "var(--fatal-border)",
+    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?.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>
                      );