LogsViewer

1"use client";
2 
3import {
4  Alert02Icon,
5  ArrowDown01Icon,
6  Cancel01Icon,
7  Clock01Icon,
8  Search01Icon,
9} from "@hugeicons/core-free-icons";
10import { HugeiconsIcon } from "@hugeicons/react";
11import Anser from "anser";
12import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
13import type { UIEvent } from "react";
14 
15import {
16  Select,
17  SelectContent,
18  SelectItem,
19  SelectTrigger,
20  SelectValue,
21} from "@/components/ui/select";
22import { cn } from "@/lib/utils";
23 
24type LogLevel = "debug" | "info" | "warn" | "error";
25type TimeRange = "all" | "5m" | "15m" | "1h" | "24h";
26 
27interface LogLine {
28  id: string;
29  message: string;
30  level?: LogLevel;
31  timestamp?: string;
32  at?: string;
33  source?: string;
34}
35 
36interface LogsViewerProps {
37  lines: LogLine[];
38  title?: string;
39  maxLines?: number;
40  rowHeight?: number;
41  visibleRows?: number;
42  follow?: boolean;
43  defaultFollow?: boolean;
44  onFollowChange?: (follow: boolean) => void;
45  query?: string;
46  defaultQuery?: string;
47  onQueryChange?: (query: string) => void;
48  range?: TimeRange;
49  defaultRange?: TimeRange;
50  onRangeChange?: (range: TimeRange) => void;
51  levels?: LogLevel[];
52  defaultLevels?: LogLevel[];
53  onLevelsChange?: (levels: LogLevel[]) => void;
54  isStreaming?: boolean;
55  isLoading?: boolean;
56  error?: Error | string | null;
57  className?: string;
58}
59 
60const LEVELS: { label: string; value: LogLevel; className: string }[] = [
61  { className: "text-muted-foreground", label: "Debug", value: "debug" },
62  { className: "text-[var(--status-active)]", label: "Info", value: "info" },
63  { className: "text-[var(--status-scaling)]", label: "Warn", value: "warn" },
64  { className: "text-destructive", label: "Error", value: "error" },
65];
66 
67const LEVEL_META = new Map(LEVELS.map((level) => [level.value, level]));
68 
69const ANSI_COLORS: Record<string, string> = {
70  "ansi-black": "text-foreground",
71  "ansi-blue": "text-[var(--status-active)]",
72  "ansi-bright-black": "text-muted-foreground",
73  "ansi-bright-blue": "text-[var(--status-active)]",
74  "ansi-bright-cyan": "text-[var(--status-active)]",
75  "ansi-bright-green": "text-[var(--status-active)]",
76  "ansi-bright-magenta": "text-primary",
77  "ansi-bright-red": "text-destructive",
78  "ansi-bright-white": "text-foreground",
79  "ansi-bright-yellow": "text-[var(--status-scaling)]",
80  "ansi-cyan": "text-[var(--status-active)]",
81  "ansi-green": "text-[var(--status-active)]",
82  "ansi-magenta": "text-primary",
83  "ansi-red": "text-destructive",
84// … truncated