danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: improve log details view

Browse source
This commit is contained in:
arabcoders 2026-06-08 08:38:12 +03:00
parent acca33a7dc
commit 2efc09d587
2 changed files with 511 additions and 412 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

509
ui/app/components/LogDetailModal.vue Normal file
View file

@ -0,0 +1,509 @@
<template>
<UModal
:open="open"
title="Log details"
:ui="{
content: 'max-w-5xl',
body: 'max-h-[75vh] overflow-y-auto',
}"
@update:open="emit('update:modelValue', $event)"
>
<template #body>
<div v-if="log" class="space-y-5">
<div class="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
<div class="flex min-w-0 flex-wrap items-center gap-2">
<UBadge
:color="LOG_LEVEL_COLOR[getLogLevel(log.level)]"
variant="soft"
size="sm"
class="uppercase"
>
<UIcon :name="LOG_LEVEL_ICON[getLogLevel(log.level)]" class="mr-1 size-3.5" />
{{ getLogLevel(log.level) }}
</UBadge>
<UBadge
v-if="log.logger"
color="neutral"
variant="soft"
size="sm"
class="max-w-full min-w-0"
:title="log.logger"
>
<UIcon name="i-lucide-tag" class="mr-1 size-3.5" />
<span class="min-w-0 max-w-full truncate">{{ log.logger }}</span>
</UBadge>
<span class="text-xs text-toned">{{ logTimeTitle(log.datetime) }}</span>
</div>
<div class="flex shrink-0 flex-wrap justify-end gap-2">
<UDropdownMenu :items="copyMenuItems" :content="{ align: 'end' }" :modal="false">
<UButton
color="neutral"
variant="outline"
size="xs"
icon="i-lucide-copy"
trailing-icon="i-lucide-chevron-down"
>
Copy
</UButton>
</UDropdownMenu>
</div>
<div class="min-w-0 space-y-2 sm:col-span-2">
<p class="wrap-break-word w-full font-mono text-sm text-default">
{{ log.message }}
</p>
<UAlert
v-if="exceptionSummary(log)"
color="error"
variant="soft"
icon="i-lucide-badge-alert"
:title="exceptionSummary(log)"
class="w-full"
/>
</div>
</div>
<section v-if="log.exception" class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="exceptionOpen = !exceptionOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', exceptionOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-bug" class="size-4 text-error" />
Exception
</button>
<pre
v-if="exceptionOpen"
class="max-h-72 overflow-auto rounded-sm border border-error/30 bg-error/5 p-3 text-xs whitespace-pre-wrap text-error"
>{{ exceptionText(log) }}</pre
>
</section>
<section v-if="detailRows(log).length > 0" class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="sourceOpen = !sourceOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', sourceOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-file-code" class="size-4 text-info" />
Source
</button>
<dl v-if="sourceOpen" class="grid gap-2 sm:grid-cols-2">
<div
v-for="row in detailRows(log)"
:key="row.label"
class="rounded-sm border border-default bg-elevated/40 p-3"
>
<dt
class="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-toned"
>
<UIcon :name="row.icon" class="size-3.5" />
<span>{{ row.label }}</span>
</dt>
<dd class="mt-1 wrap-break-word font-mono text-xs text-default">{{ row.value }}</dd>
</div>
</dl>
</section>
<section v-if="fieldRows(log).length > 0" class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="fieldsOpen = !fieldsOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', fieldsOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-tags" class="size-4 text-primary" />
Fields
</button>
<div v-if="fieldsOpen" class="space-y-2">
<div
v-for="field in fieldRows(log)"
:key="field.key"
class="rounded-sm border border-default bg-elevated/40"
>
<button
type="button"
class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left"
@click="toggleField(field.key)"
>
<span class="text-[11px] font-semibold uppercase tracking-wide text-toned">
{{ field.label }}
</span>
<div class="flex items-center gap-2">
<span v-if="field.preview" class="max-w-md truncate text-xs text-toned">
{{ field.preview }}
</span>
<UIcon
name="i-lucide-chevron-right"
:class="[
'size-4 shrink-0 text-toned transition-transform',
fieldOpen(field.key) ? 'rotate-90' : '',
]"
/>
</div>
</button>
<div v-if="fieldOpen(field.key)" class="border-t border-default/70 px-3 py-3">
<div class="mb-3 flex items-center justify-between gap-3">
<UInput
v-if="field.kind !== 'scalar'"
:model-value="fieldFilter(field.key)"
type="search"
icon="i-lucide-filter"
placeholder="Filter field lines"
size="sm"
class="w-full"
@update:model-value="setFieldFilter(field.key, $event)"
/>
<UButton
size="xs"
color="neutral"
variant="outline"
icon="i-lucide-copy"
@click="copyFieldValue(field)"
>
Copy
</UButton>
</div>
<pre
v-if="field.kind === 'json'"
class="max-h-96 overflow-auto rounded-sm border border-default bg-elevated/50 p-3 text-xs whitespace-pre-wrap text-default"
>{{ displayedFieldValue(field) }}</pre
>
<pre
v-else-if="field.kind === 'text'"
class="max-h-96 overflow-auto rounded-sm border border-default bg-elevated/50 p-3 text-xs whitespace-pre-wrap text-default"
>{{ displayedFieldValue(field) }}</pre
>
<p v-else class="wrap-break-word font-mono text-xs text-default">
{{ field.value }}
</p>
</div>
</div>
</div>
</section>
<section class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="rawJsonOpen = !rawJsonOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', rawJsonOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-braces" class="size-4 text-toned" />
RAW DATA
</button>
<div v-if="rawJsonOpen" class="space-y-3">
<div class="flex items-center justify-between gap-3">
<UInput
v-model="rawJsonFilter"
type="search"
icon="i-lucide-filter"
placeholder="Filter lines"
size="sm"
class="w-full"
/>
<UButton
size="xs"
color="neutral"
variant="outline"
icon="i-lucide-copy"
@click="log && copyText(logRaw(log))"
>
Copy
</UButton>
</div>
<pre
class="max-h-96 overflow-auto rounded-sm border border-default bg-elevated/50 p-3 text-xs whitespace-pre-wrap text-default"
>{{ filteredRawJson }}</pre
>
</div>
</section>
</div>
</template>
</UModal>
</template>
<script setup lang="ts">
import moment from 'moment';
import { useStorage } from '@vueuse/core';
import type { log_line } from '~/types/logs';
import { copyText } from '~/utils';
const props = defineProps<{
modelValue?: boolean;
log?: log_line | null;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
}>();
const open = computed({
get: () => props.modelValue ?? false,
set: (val: boolean) => emit('update:modelValue', val),
});
type LogLevel = 'debug' | 'info' | 'warning' | 'error';
type LogLevelColor = 'neutral' | 'info' | 'warning' | 'error';
type DetailRow = {
label: string;
value: string;
icon: string;
};
type LogFieldRow = {
key: string;
label: string;
value: string;
preview: string;
kind: 'scalar' | 'text' | 'json';
};
const LOG_LEVEL_COLOR: Record<LogLevel, LogLevelColor> = {
debug: 'neutral',
info: 'info',
warning: 'warning',
error: 'error',
};
const LOG_LEVEL_ICON: Record<LogLevel, string> = {
debug: 'i-lucide-terminal',
info: 'i-lucide-info',
warning: 'i-lucide-triangle-alert',
error: 'i-lucide-circle-x',
};
const exceptionOpen = useStorage<boolean>('logs_exception_open', false);
const fieldsOpen = useStorage<boolean>('logs_fields_open', true);
const rawJsonOpen = useStorage<boolean>('logs_raw_json_open', false);
const rawJsonFilter = ref('');
const sourceOpen = useStorage<boolean>('logs_source_open', true);
const fieldOpenState = ref<Record<string, boolean>>({});
const fieldFilters = ref<Record<string, string>>({});
const getLogLevel = (level: string): LogLevel => {
switch (level.toLowerCase()) {
case 'info':
return 'info';
case 'warning':
case 'warn':
return 'warning';
case 'error':
case 'critical':
case 'fatal':
return 'error';
default:
return 'debug';
}
};
const logRaw = (log: log_line): string => JSON.stringify(log, null, 2);
const exceptionSummary = (log: log_line): string => {
const type = log.exception?.type?.trim() ?? '';
const message = log.exception?.message?.trim() ?? '';
if (type && message) {
return `${type}: ${message}`;
}
return type || message;
};
const exceptionText = (log: log_line): string =>
log.exception ? JSON.stringify(log.exception, null, 2) : '';
const logTimeTitle = (value?: string): string =>
value ? moment(value).format('YYYY-MM-DD HH:mm:ss Z') : 'No timestamp';
const copyMenuItems = computed(() => [
[
{
label: 'Copy Message',
icon: 'i-lucide-message-square-text',
onSelect: () => {
if (props.log) {
copyText(props.log.message);
}
},
},
{
label: 'Copy JSON',
icon: 'i-lucide-braces',
onSelect: () => {
if (props.log) {
copyText(logRaw(props.log));
}
},
},
],
]);
const filteredRawJson = computed(() => {
const raw = props.log ? logRaw(props.log) : '';
const query = rawJsonFilter.value.toLowerCase();
if (!query) return raw;
return raw
.split('\n')
.filter((line) => line.toLowerCase().includes(query))
.join('\n');
});
const formatDetailValue = (value: unknown): string => {
if (value === undefined || value === null || value === '') {
return '';
}
if (typeof value === 'string') {
return value;
}
if (typeof value === 'number' || typeof value === 'boolean') {
return String(value);
}
return JSON.stringify(value);
};
const compactRows = (rows: Array<{ label: string; value: unknown; icon: string }>): DetailRow[] =>
rows
.map((row) => ({
label: row.label,
value: formatDetailValue(row.value),
icon: row.icon,
}))
.filter((row) => Boolean(row.value));
const formatNameId = (name: unknown, id: unknown): string => {
const nameValue = formatDetailValue(name);
const idValue = formatDetailValue(id);
if (nameValue && idValue) {
return `${nameValue} / ${idValue}`;
}
return nameValue || idValue;
};
const detailRows = (log: log_line): DetailRow[] =>
compactRows([
{ label: 'File', value: log.source?.file, icon: 'i-lucide-file' },
{ label: 'Line', value: log.source?.line, icon: 'i-lucide-hash' },
{ label: 'Function', value: log.source?.function, icon: 'i-lucide-code-2' },
{ label: 'Module', value: log.source?.module, icon: 'i-lucide-box' },
{ label: 'Path', value: log.source?.path, icon: 'i-lucide-folder-tree' },
{
label: 'Process / ID',
value: formatNameId(log.process?.name, log.process?.id),
icon: 'i-lucide-cpu',
},
{
label: 'Thread / ID',
value: formatNameId(log.thread?.name, log.thread?.id),
icon: 'i-lucide-git-branch',
},
]);
const fieldRows = (log: log_line): LogFieldRow[] => {
if (!log.fields) return [];
const rows: LogFieldRow[] = [];
for (const [key, rawValue] of Object.entries(log.fields)) {
if (rawValue === undefined || rawValue === null || rawValue === '') continue;
const jsonValue =
typeof rawValue === 'string'
? parseJsonContainerString(rawValue)
: isJsonContainer(rawValue)
? rawValue
: null;
const value = jsonValue ? JSON.stringify(jsonValue, null, 2) : formatFieldValue(rawValue);
const kind = jsonValue
? 'json'
: typeof rawValue === 'string'
? rawValue.includes('\n')
? 'text'
: 'scalar'
: 'scalar';
rows.push({
key,
label: normalizeFieldLabel(key),
value,
preview: formatFieldValue(rawValue).replaceAll('\n', ' '),
kind,
});
}
return rows;
};
const fieldOpen = (key: string) => fieldOpenState.value[key] ?? false;
const toggleField = (key: string) => {
fieldOpenState.value = { ...fieldOpenState.value, [key]: !fieldOpen(key) };
};
const fieldFilter = (key: string) => fieldFilters.value[key] ?? '';
const setFieldFilter = (key: string, value: string | number) => {
fieldFilters.value = { ...fieldFilters.value, [key]: String(value ?? '') };
};
const displayedFieldValue = (field: LogFieldRow): string => {
const query = fieldFilter(field.key);
if (!query) return field.value;
const needle = query.toLowerCase();
return field.value
.split('\n')
.filter((line) => line.toLowerCase().includes(needle))
.join('\n');
};
const copyFieldValue = (field: LogFieldRow): void => {
copyText(field.value);
};
const isJsonLike = (value: string): boolean => {
const trimmed = value.trim();
return (
((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
(trimmed.startsWith('[') && trimmed.endsWith(']'))) &&
trimmed.length > 1
);
};
const isJsonContainer = (value: unknown): value is Record<string, unknown> | unknown[] =>
Array.isArray(value) || (!!value && typeof value === 'object');
const parseJsonContainerString = (value: string): Record<string, unknown> | unknown[] | null => {
if (!isJsonLike(value)) return null;
try {
const parsed = JSON.parse(value) as unknown;
if (Array.isArray(parsed)) return parsed;
if (parsed && typeof parsed === 'object') return parsed as Record<string, unknown>;
} catch {
return null;
}
return null;
};
const normalizeFieldLabel = (key: string) => key.replaceAll('_', ' ');
const formatFieldValue = (value: unknown): string => {
if (typeof value === 'string') return value;
if (typeof value === 'number' || typeof value === 'boolean') return String(value);
return JSON.stringify(value, null, 2);
};
</script>

414
ui/app/pages/logs.vue
View file

@ -224,221 +224,7 @@
</template>
</UPageCard>
<UModal v-model:open="detailsOpen" title="Log details" :ui="detailsModalUi">
<template #body>
<div v-if="selectedLog" class="space-y-5">
<div class="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
<div class="flex min-w-0 flex-wrap items-center gap-2">
<UBadge
:color="LOG_LEVEL_COLOR[getLogLevel(selectedLog.level)]"
variant="soft"
size="sm"
class="uppercase"
>
<UIcon
:name="LOG_LEVEL_ICON[getLogLevel(selectedLog.level)]"
class="mr-1 size-3.5"
/>
{{ getLogLevel(selectedLog.level) }}
</UBadge>
<UBadge
v-if="selectedLog.logger"
color="neutral"
variant="soft"
size="sm"
class="max-w-full min-w-0"
:title="selectedLog.logger"
>
<span class="min-w-0 max-w-full truncate">{{ selectedLog.logger }}</span>
</UBadge>
<span class="text-xs text-toned">{{ logTimeTitle(selectedLog.datetime) }}</span>
</div>
<div class="flex shrink-0 flex-wrap justify-end gap-2">
<UDropdownMenu :items="copyMenuItems" :content="{ align: 'end' }" :modal="false">
<UButton
color="neutral"
variant="outline"
size="xs"
icon="i-lucide-copy"
trailing-icon="i-lucide-chevron-down"
>
Copy
</UButton>
</UDropdownMenu>
</div>
<div class="min-w-0 space-y-2 sm:col-span-2">
<p class="wrap-break-word w-full font-mono text-sm text-default">
{{ selectedLog.message }}
</p>
<UAlert
v-if="exceptionSummary(selectedLog)"
color="error"
variant="soft"
icon="i-lucide-badge-alert"
:title="exceptionSummary(selectedLog)"
class="w-full"
/>
</div>
</div>
<section v-if="selectedLog.exception" class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="exceptionOpen = !exceptionOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', exceptionOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-bug" class="size-4 text-error" />
Exception
</button>
<pre
v-if="exceptionOpen"
class="max-h-72 overflow-auto rounded-sm border border-error/30 bg-error/5 p-3 text-xs whitespace-pre-wrap text-error"
>{{ exceptionText(selectedLog) }}</pre
>
</section>
<section v-if="detailRows(selectedLog).length > 0" class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="sourceOpen = !sourceOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', sourceOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-file-code" class="size-4 text-info" />
Source
</button>
<dl v-if="sourceOpen" class="grid gap-2 sm:grid-cols-2">
<div
v-for="row in detailRows(selectedLog)"
:key="row.label"
class="rounded-sm border border-default bg-elevated/40 p-3"
>
<dt
class="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-toned"
>
<UIcon :name="row.icon" class="size-3.5" />
<span>{{ row.label }}</span>
</dt>
<dd class="mt-1 wrap-break-word font-mono text-xs text-default">{{ row.value }}</dd>
</div>
</dl>
</section>
<section v-if="fieldRows(selectedLog).length > 0" class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="fieldsOpen = !fieldsOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', fieldsOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-tags" class="size-4 text-primary" />
Fields
</button>
<div v-if="fieldsOpen" class="space-y-2">
<div
v-for="field in fieldRows(selectedLog)"
:key="field.key"
class="rounded-sm border border-default bg-elevated/40"
>
<button
type="button"
class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left"
@click="toggleField(field.key)"
>
<span class="text-[11px] font-semibold uppercase tracking-wide text-toned">
{{ field.label }}
</span>
<div class="flex items-center gap-2">
<span v-if="field.preview" class="max-w-md truncate text-xs text-toned">
{{ field.preview }}
</span>
<UIcon
name="i-lucide-chevron-right"
:class="[
'size-4 shrink-0 text-toned transition-transform',
fieldOpen(field.key) ? 'rotate-90' : '',
]"
/>
</div>
</button>
<div
v-if="fieldOpen(field.key)"
class="border-t border-default/70 px-3 py-3"
>
<div class="mb-3 flex items-center justify-between gap-3">
<UInput
v-if="field.kind !== 'scalar'"
:model-value="fieldFilter(field.key)"
type="search"
icon="i-lucide-filter"
placeholder="Filter field lines"
size="sm"
class="w-full"
@update:model-value="setFieldFilter(field.key, $event)"
/>
<UButton
size="xs"
color="neutral"
variant="outline"
icon="i-lucide-copy"
@click="copyFieldValue(field)"
>
Copy
</UButton>
</div>
<pre
v-if="field.kind === 'json'"
class="max-h-96 overflow-auto rounded-sm border border-default bg-elevated/50 p-3 text-xs whitespace-pre-wrap text-default"
>{{ displayedFieldValue(field) }}</pre>
<pre
v-else-if="field.kind === 'text'"
class="max-h-96 overflow-auto rounded-sm border border-default bg-elevated/50 p-3 text-xs whitespace-pre-wrap text-default"
>{{ displayedFieldValue(field) }}</pre>
<p v-else class="wrap-break-word font-mono text-xs text-default">
{{ field.value }}
</p>
</div>
</div>
</div>
</section>
<section class="space-y-2">
<button
type="button"
class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-toned hover:text-default"
@click="rawJsonOpen = !rawJsonOpen"
>
<UIcon
name="i-lucide-chevron-right"
:class="['size-4 transition-transform', rawJsonOpen ? 'rotate-90' : '']"
/>
<UIcon name="i-lucide-braces" class="size-4 text-toned" />
RAW DATA
</button>
<pre
v-if="rawJsonOpen"
class="max-h-96 overflow-auto rounded-sm border border-default bg-elevated/50 p-3 text-xs whitespace-pre-wrap text-default"
>{{ logRaw(selectedLog) }}</pre
>
</section>
</div>
</template>
</UModal>
<LogDetailModal v-model="detailsOpen" :log="selectedLog" />
</main>
</template>
@ -448,7 +234,7 @@ import type { EventSourceMessage } from '@microsoft/fetch-event-source';
import moment from 'moment';
import { useStorage } from '@vueuse/core';
import type { log_line } from '~/types/logs';
import { copyText, parse_api_error, request, uri } from '~/utils';
import { parse_api_error, request, uri } from '~/utils';
import { requirePageShell } from '~/utils/topLevelNavigation';
type FilteredLogEntry = {
@ -459,19 +245,6 @@ type FilteredLogEntry = {
};
type LogLevel = 'debug' | 'info' | 'warning' | 'error';
type LogLevelColor = 'neutral' | 'info' | 'warning' | 'error';
type DetailRow = {
label: string;
value: string;
icon: string;
};
type LogFieldRow = {
key: string;
label: string;
value: string;
preview: string;
kind: 'scalar' | 'text' | 'json';
};
type LevelFilterItem = {
label: string;
value: LogLevel;
@ -481,12 +254,6 @@ const FILTER_CONTEXT_REGEX = /context:(\d+)/;
const LOG_LEVELS: LogLevel[] = ['debug', 'info', 'warning', 'error'];
const LOG_ROW_CLASS =
'flex min-w-0 border-b border-default/40 bg-transparent transition-colors duration-150 last:border-b-0 hover:bg-elevated/70';
const LOG_LEVEL_COLOR: Record<LogLevel, LogLevelColor> = {
debug: 'neutral',
info: 'info',
warning: 'warning',
error: 'error',
};
const LOG_LEVEL_ICON: Record<LogLevel, string> = {
debug: 'i-lucide-terminal',
info: 'i-lucide-info',
@ -507,12 +274,6 @@ const pageShell = requirePageShell('logs');
const logContainer = useTemplateRef<HTMLDivElement>('logContainer');
const textWrap = useStorage<boolean>('logs_wrap', true);
const exceptionOpen = useStorage<boolean>('logs_exception_open', false);
const fieldsOpen = useStorage<boolean>('logs_fields_open', true);
const rawJsonOpen = useStorage<boolean>('logs_raw_json_open', false);
const sourceOpen = useStorage<boolean>('logs_source_open', true);
const fieldOpenState = ref<Record<string, boolean>>({});
const fieldFilters = ref<Record<string, string>>({});
const selectedLevels = useStorage<LogLevel[]>('logs_level_filter', [...LOG_LEVELS]);
const sseController = ref<AbortController | null>(null);
const runtimeLogLevel = ref<LogLevel | null>(null);
@ -532,33 +293,6 @@ const pageCardUi = {
wrapper: 'w-full min-w-0 items-stretch',
body: 'w-full min-w-0 max-w-full overflow-hidden',
};
const detailsModalUi = {
content: 'max-w-5xl',
body: 'max-h-[75vh] overflow-y-auto',
};
const copyMenuItems = computed(() => [
[
{
label: 'Copy Message',
icon: 'i-lucide-message-square-text',
onSelect: () => {
if (selectedLog.value) {
copyText(selectedLog.value.message);
}
},
},
{
label: 'Copy JSON',
icon: 'i-lucide-braces',
onSelect: () => {
if (selectedLog.value) {
copyText(logRaw(selectedLog.value));
}
},
},
],
]);
const query = ref<string>(
(() => {
@ -968,8 +702,6 @@ const logTimeLabel = (value?: string): string =>
const logTimeTitle = (value?: string): string =>
value ? moment(value).format('YYYY-MM-DD HH:mm:ss Z') : 'No timestamp';
const logRaw = (log: log_line): string => JSON.stringify(log, null, 2);
const exceptionSummary = (log: log_line): string => {
const type = log.exception?.type?.trim() ?? '';
const message = log.exception?.message?.trim() ?? '';
@ -981,9 +713,6 @@ const exceptionSummary = (log: log_line): string => {
return type || message;
};
const exceptionText = (log: log_line): string =>
log.exception ? JSON.stringify(log.exception, null, 2) : '';
const searchableLog = (log: log_line): string =>
[
log.message,
@ -1057,145 +786,6 @@ const openLogDetails = (log: log_line): void => {
detailsOpen.value = true;
};
const formatDetailValue = (value: unknown): string => {
if (value === undefined || value === null || value === '') {
return '';
}
if (typeof value === 'string') {
return value;
}
if (typeof value === 'number' || typeof value === 'boolean') {
return String(value);
}
return JSON.stringify(value);
};
const compactRows = (rows: Array<{ label: string; value: unknown; icon: string }>): DetailRow[] =>
rows
.map((row) => ({
label: row.label,
value: formatDetailValue(row.value),
icon: row.icon,
}))
.filter((row) => Boolean(row.value));
const formatNameId = (name: unknown, id: unknown): string => {
const nameValue = formatDetailValue(name);
const idValue = formatDetailValue(id);
if (nameValue && idValue) {
return `${nameValue} / ${idValue}`;
}
return nameValue || idValue;
};
const detailRows = (log: log_line): DetailRow[] =>
compactRows([
{ label: 'File', value: log.source?.file, icon: 'i-lucide-file' },
{ label: 'Line', value: log.source?.line, icon: 'i-lucide-hash' },
{ label: 'Function', value: log.source?.function, icon: 'i-lucide-code-2' },
{ label: 'Module', value: log.source?.module, icon: 'i-lucide-box' },
{ label: 'Path', value: log.source?.path, icon: 'i-lucide-folder-tree' },
{
label: 'Process / ID',
value: formatNameId(log.process?.name, log.process?.id),
icon: 'i-lucide-cpu',
},
{
label: 'Thread / ID',
value: formatNameId(log.thread?.name, log.thread?.id),
icon: 'i-lucide-git-branch',
},
]);
const fieldRows = (log: log_line): LogFieldRow[] => {
if (!log.fields) return [];
const rows: LogFieldRow[] = [];
for (const [key, rawValue] of Object.entries(log.fields)) {
if (rawValue === undefined || rawValue === null || rawValue === '') continue;
const jsonValue =
typeof rawValue === 'string'
? parseJsonContainerString(rawValue)
: isJsonContainer(rawValue)
? rawValue
: null;
const value = jsonValue ? JSON.stringify(jsonValue, null, 2) : formatFieldValue(rawValue);
const kind = jsonValue
? 'json'
: typeof rawValue === 'string'
? rawValue.includes('\n')
? 'text'
: 'scalar'
: 'scalar';
rows.push({
key,
label: normalizeFieldLabel(key),
value,
preview: formatFieldValue(rawValue).replaceAll('\n', ' '),
kind,
});
}
return rows;
};
const fieldOpen = (key: string) => fieldOpenState.value[key] ?? false;
const toggleField = (key: string) => {
fieldOpenState.value = { ...fieldOpenState.value, [key]: !fieldOpen(key) };
};
const fieldFilter = (key: string) => fieldFilters.value[key] ?? '';
const setFieldFilter = (key: string, value: string | number) => {
fieldFilters.value = { ...fieldFilters.value, [key]: String(value ?? '') };
};
const displayedFieldValue = (field: LogFieldRow): string => {
const query = fieldFilter(field.key);
if (!query) return field.value;
const needle = query.toLowerCase();
return field.value.split('\n').filter((line) => line.toLowerCase().includes(needle)).join('\n');
};
const copyFieldValue = (field: LogFieldRow): void => {
copyText(field.value);
};
const isJsonLike = (value: string): boolean => {
const trimmed = value.trim();
return (
((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
(trimmed.startsWith('[') && trimmed.endsWith(']'))) &&
trimmed.length > 1
);
};
const isJsonContainer = (value: unknown): value is Record<string, unknown> | unknown[] =>
Array.isArray(value) || (!!value && typeof value === 'object');
const parseJsonContainerString = (value: string): Record<string, unknown> | unknown[] | null => {
if (!isJsonLike(value)) return null;
try {
const parsed = JSON.parse(value) as unknown;
if (Array.isArray(parsed)) return parsed;
if (parsed && typeof parsed === 'object') return parsed as Record<string, unknown>;
} catch {
return null;
}
return null;
};
const normalizeFieldLabel = (key: string) => key.replaceAll('_', ' ');
const formatFieldValue = (value: unknown): string => {
if (typeof value === 'string') return value;
if (typeof value === 'number' || typeof value === 'boolean') return String(value);
return JSON.stringify(value, null, 2);
};
onMounted(async () => {
if (!config.app.file_logging) {
await navigateTo('/');