feat: added debug log type & noTimestamp props for TerminalLine

This commit is contained in:
190km
2024-12-12 21:53:10 +01:00
parent 3bc1bd5b15
commit cb487b8be0
5 changed files with 30 additions and 13 deletions

View File

@@ -94,6 +94,7 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
<TerminalLine
key={index}
log={log}
noTimestamp
/>
)) || "Loading..."}
<div ref={endOfLogsRef} />

View File

@@ -102,6 +102,7 @@ export const ShowDeploymentCompose = ({
<TerminalLine
key={index}
log={log}
noTimestamp
/>
)) || "Loading..."}
<div ref={endOfLogsRef} />

View File

@@ -20,7 +20,7 @@ interface Props {
}
type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
type TypeFilter = "all" | "error" | "warning" | "success" | "info";
type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";
export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
const { data } = api.docker.getConfig.useQuery(
@@ -225,7 +225,10 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
<Badge variant="red">Error</Badge>
</SelectItem>
<SelectItem value="warning">
<Badge variant="yellow">Warning</Badge>
<Badge variant="orange">Warning</Badge>
</SelectItem>
<SelectItem value="warning">
<Badge variant="yellow">Debug</Badge>
</SelectItem>
<SelectItem value="success">
<Badge variant="green">Success</Badge>

View File

@@ -12,10 +12,11 @@ import { type LogLine, getLogType } from "./utils";
interface LogLineProps {
log: LogLine;
noTimestamp?: boolean;
searchTerm?: string;
}
export function TerminalLine({ log, searchTerm }: LogLineProps) {
export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
const { timestamp, message, rawTimestamp } = log;
const { type, variant, color } = getLogType(message);
@@ -72,7 +73,9 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
? "bg-red-500/10 hover:bg-red-500/15"
: type === "warning"
? "bg-yellow-500/10 hover:bg-yellow-500/15"
: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
: type === "debug"
? "bg-orange-500/10 hover:bg-orange-500/15"
: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
)}
>
{" "}
@@ -80,9 +83,13 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
{/* Icon to expand the log item maybe implement a colapsible later */}
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
{tooltip(color, rawTimestamp)}
<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
{formattedTime}
</span>
{!noTimestamp && (
<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
{formattedTime}
</span>
)}
<Badge
variant={variant}
className="w-14 justify-center text-[10px] px-1 py-0"

View File

@@ -1,5 +1,5 @@
export type LogType = "error" | "warning" | "success" | "info";
export type LogVariant = "red" | "yellow" | "green" | "blue";
export type LogType = "error" | "warning" | "success" | "info" | "debug";
export type LogVariant = "red" | "yellow" | "green" | "blue" | "orange";
export interface LogLine {
rawTimestamp: string | null;
@@ -21,6 +21,11 @@ const LOG_STYLES: Record<LogType, LogStyle> = {
},
warning: {
type: "warning",
variant: "orange",
color: "bg-orange-500/40",
},
debug: {
type: "debug",
variant: "yellow",
color: "bg-yellow-500/40",
},
@@ -88,7 +93,7 @@ export const getLogType = (message: string): LogStyle => {
/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
/\b(?:&ash|critical|fatal)\b/i.test(lowerMessage) ||
/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
) {
return LOG_STYLES.error;
@@ -124,10 +129,10 @@ export const getLogType = (message: string): LogStyle => {
if (
/(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
/\[(info|log|debug|trace|server|db|api)\]/i.test(lowerMessage) ||
/\b(?:version|config|start|import|load)\b:?/i.test(lowerMessage)
/\[(info|log|debug|trace|server|db|api|http|request|response)\]/i.test(lowerMessage) ||
/\b(?:version|config|import|load)\b:?/i.test(lowerMessage)
) {
return LOG_STYLES.info;
return LOG_STYLES.debug;
}
return LOG_STYLES.info;