feat: add QuickCapture and IncidentForm components
This commit is contained in:
parent
935d5a8e7c
commit
a812b3751a
2 changed files with 472 additions and 0 deletions
222
web/src/components/IncidentForm.vue
Normal file
222
web/src/components/IncidentForm.vue
Normal file
|
|
@ -0,0 +1,222 @@
|
||||||
|
<template>
|
||||||
|
<div class="rounded border border-surface-border bg-surface-raised p-5">
|
||||||
|
<h2 class="text-text-primary text-sm font-semibold mb-4 uppercase tracking-wider">Tag New Incident</h2>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Label -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Description <span class="text-accent">*</span></label>
|
||||||
|
<input
|
||||||
|
v-model="form.label"
|
||||||
|
type="text"
|
||||||
|
placeholder='e.g. "plex stopped playing audio" or "bluetooth kept disconnecting"'
|
||||||
|
class="w-full bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
|
||||||
|
/>
|
||||||
|
<p class="text-text-dim text-xs mt-1">Your literal description — used to find relevant log entries in the window.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Time bucket picker -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-2">When did it happen?</label>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-3">
|
||||||
|
<button
|
||||||
|
v-for="preset in presets"
|
||||||
|
:key="preset.key"
|
||||||
|
@click="applyPreset(preset.key)"
|
||||||
|
:class="[
|
||||||
|
'px-3 py-1.5 rounded text-xs border transition-colors',
|
||||||
|
activePreset === preset.key
|
||||||
|
? 'bg-accent text-surface border-accent'
|
||||||
|
: 'bg-surface border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
|
||||||
|
]"
|
||||||
|
>{{ preset.label }}</button>
|
||||||
|
<button
|
||||||
|
@click="toggleCustomPicker"
|
||||||
|
:class="[
|
||||||
|
'px-3 py-1.5 rounded text-xs border transition-colors',
|
||||||
|
showCustomPicker
|
||||||
|
? 'bg-accent text-surface border-accent'
|
||||||
|
: 'bg-surface border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
|
||||||
|
]"
|
||||||
|
>Custom range…</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="showCustomPicker" class="flex flex-wrap gap-3 mt-2">
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Start</label>
|
||||||
|
<input
|
||||||
|
v-model="form.started_at_local"
|
||||||
|
type="datetime-local"
|
||||||
|
class="bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent"
|
||||||
|
@change="activePreset = 'custom'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-1">End <span class="text-text-dim">(leave blank if ongoing)</span></label>
|
||||||
|
<input
|
||||||
|
v-model="form.ended_at_local"
|
||||||
|
type="datetime-local"
|
||||||
|
class="bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent"
|
||||||
|
@change="activePreset = 'custom'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p v-if="windowSummary" class="text-text-dim text-xs mt-2">
|
||||||
|
Window: <span class="text-text-muted">{{ windowSummary }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Issue type -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Issue type <span class="text-text-dim">(optional)</span></label>
|
||||||
|
<input
|
||||||
|
v-model="form.issue_type"
|
||||||
|
type="text"
|
||||||
|
list="issue-type-suggestions"
|
||||||
|
placeholder='e.g. "qbit_stall", "auth_failure", "disk_full"'
|
||||||
|
class="w-full bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent font-mono"
|
||||||
|
/>
|
||||||
|
<datalist id="issue-type-suggestions">
|
||||||
|
<option value="qbit_stall" /><option value="qbit_crash" /><option value="auth_failure" />
|
||||||
|
<option value="disk_full" /><option value="network_drop" /><option value="service_crash" />
|
||||||
|
<option value="permission_error" /><option value="oom" />
|
||||||
|
</datalist>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Severity + Notes -->
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Severity</label>
|
||||||
|
<select
|
||||||
|
v-model="form.severity"
|
||||||
|
class="bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-accent"
|
||||||
|
>
|
||||||
|
<option value="low">Low</option>
|
||||||
|
<option value="medium">Medium</option>
|
||||||
|
<option value="high">High</option>
|
||||||
|
<option value="critical">Critical</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-48">
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Notes <span class="text-text-dim">(optional)</span></label>
|
||||||
|
<input
|
||||||
|
v-model="form.notes"
|
||||||
|
type="text"
|
||||||
|
placeholder="Any extra context…"
|
||||||
|
class="w-full bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Submit -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
@click="submit"
|
||||||
|
:disabled="!form.label.trim() || submitting"
|
||||||
|
class="px-4 py-2 bg-accent text-surface text-sm rounded font-medium hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{{ submitting ? 'Tagging…' : 'Tag Incident' }}
|
||||||
|
</button>
|
||||||
|
<span v-if="submitError" class="text-sev-error text-xs">{{ submitError }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
|
||||||
|
const emit = defineEmits<{ created: [label: string] }>()
|
||||||
|
|
||||||
|
const presets = [
|
||||||
|
{ key: 'ongoing', label: 'Ongoing' },
|
||||||
|
{ key: 'just_now', label: 'Just now' },
|
||||||
|
{ key: 'last_1h', label: 'Last hour' },
|
||||||
|
{ key: 'last_day', label: 'Last day' },
|
||||||
|
]
|
||||||
|
|
||||||
|
function getQuickRange(preset: string): { started_at: string | null; ended_at: string | null } {
|
||||||
|
const now = new Date()
|
||||||
|
const iso = (d: Date) => d.toISOString()
|
||||||
|
if (preset === 'ongoing') return { started_at: iso(now), ended_at: null }
|
||||||
|
const offsets: Record<string, number> = {
|
||||||
|
just_now: 15 * 60 * 1000,
|
||||||
|
last_1h: 60 * 60 * 1000,
|
||||||
|
last_day: 24 * 60 * 60 * 1000,
|
||||||
|
}
|
||||||
|
const ms = offsets[preset]
|
||||||
|
return ms !== undefined
|
||||||
|
? { started_at: iso(new Date(now.getTime() - ms)), ended_at: iso(now) }
|
||||||
|
: { started_at: null, ended_at: null }
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
label: '', issue_type: '', severity: 'medium', notes: '',
|
||||||
|
started_at: null as string | null, ended_at: null as string | null,
|
||||||
|
started_at_local: '', ended_at_local: '',
|
||||||
|
})
|
||||||
|
const activePreset = ref<string | null>(null)
|
||||||
|
const showCustomPicker = ref(false)
|
||||||
|
const submitting = ref(false)
|
||||||
|
const submitError = ref('')
|
||||||
|
|
||||||
|
function applyPreset(key: string) {
|
||||||
|
activePreset.value = key
|
||||||
|
showCustomPicker.value = false
|
||||||
|
const range = getQuickRange(key)
|
||||||
|
form.value = { ...form.value, started_at: range.started_at, ended_at: range.ended_at }
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleCustomPicker() {
|
||||||
|
showCustomPicker.value = !showCustomPicker.value
|
||||||
|
if (showCustomPicker.value) activePreset.value = 'custom'
|
||||||
|
}
|
||||||
|
|
||||||
|
const windowSummary = computed(() => {
|
||||||
|
const start = showCustomPicker.value ? localToIso(form.value.started_at_local) : form.value.started_at
|
||||||
|
const end = showCustomPicker.value ? localToIso(form.value.ended_at_local) : form.value.ended_at
|
||||||
|
if (!start && !end) return ''
|
||||||
|
return `${start ? fmtTs(start) : '—'} → ${end ? fmtTs(end) : 'ongoing'}`
|
||||||
|
})
|
||||||
|
|
||||||
|
function localToIso(local: string): string | null {
|
||||||
|
if (!local) return null
|
||||||
|
return new Date(local).toISOString()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
submitError.value = ''
|
||||||
|
if (!form.value.label.trim()) return
|
||||||
|
const started_at = showCustomPicker.value ? localToIso(form.value.started_at_local) : form.value.started_at
|
||||||
|
const ended_at = showCustomPicker.value ? localToIso(form.value.ended_at_local) : form.value.ended_at
|
||||||
|
submitting.value = true
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${BASE}/api/incidents`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
label: form.value.label, issue_type: form.value.issue_type,
|
||||||
|
severity: form.value.severity, notes: form.value.notes,
|
||||||
|
started_at, ended_at,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error(await res.text())
|
||||||
|
emit('created', form.value.label)
|
||||||
|
form.value = { label: '', issue_type: '', severity: 'medium', notes: '', started_at: null, ended_at: null, started_at_local: '', ended_at_local: '' }
|
||||||
|
activePreset.value = null
|
||||||
|
showCustomPicker.value = false
|
||||||
|
} catch (e: unknown) {
|
||||||
|
submitError.value = e instanceof Error ? e.message : 'Failed to create incident'
|
||||||
|
} finally {
|
||||||
|
submitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtTs(iso: string): string {
|
||||||
|
try {
|
||||||
|
return new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
|
||||||
|
} catch { return iso }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
250
web/src/components/QuickCapture.vue
Normal file
250
web/src/components/QuickCapture.vue
Normal file
|
|
@ -0,0 +1,250 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Input row -->
|
||||||
|
<div class="flex gap-3 mb-6">
|
||||||
|
<input
|
||||||
|
v-model="query"
|
||||||
|
type="text"
|
||||||
|
placeholder='e.g. "plex stopped playing audio around 2pm"'
|
||||||
|
class="flex-1 bg-surface-raised border border-surface-border rounded px-4 py-2.5 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
|
||||||
|
@keydown.enter="run()"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
:disabled="loading || !query.trim()"
|
||||||
|
@click="run()"
|
||||||
|
class="px-6 py-2.5 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span v-if="loading">Searching…</span>
|
||||||
|
<span v-else>Go</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error -->
|
||||||
|
<div v-if="error" class="mb-4 p-3 rounded bg-red-900/30 border border-red-700/40 text-sev-error text-sm">
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Summary header -->
|
||||||
|
<div v-if="summary" class="mb-4 rounded border border-surface-border bg-surface-raised p-4">
|
||||||
|
<div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-text-dim">
|
||||||
|
<span class="text-text-muted font-medium">{{ summary.total }} entr{{ summary.total !== 1 ? 'ies' : 'y' }}</span>
|
||||||
|
<span v-if="summary.window_start">
|
||||||
|
{{ fmtTs(summary.window_start) }} → {{ fmtTs(summary.window_end) }}
|
||||||
|
</span>
|
||||||
|
<span v-if="!summary.time_detected" class="italic">(last 60 min — no time detected)</span>
|
||||||
|
<span
|
||||||
|
v-for="(count, sev) in nonZeroSeverity"
|
||||||
|
:key="String(sev)"
|
||||||
|
:class="sevClass(String(sev))"
|
||||||
|
>{{ count }} {{ sev }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-text-dim mt-2">
|
||||||
|
<span v-for="(count, src) in summary.by_source" :key="String(src)">
|
||||||
|
{{ String(src).split(':').pop() }} ({{ count }})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Log stream -->
|
||||||
|
<div v-if="entries.length" class="rounded border border-surface-border overflow-hidden mb-4">
|
||||||
|
<LogEntryRow v-for="entry in entries" :key="entry.entry_id" :entry="entry" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Zero state -->
|
||||||
|
<div v-else-if="ranOnce && !loading" class="text-center text-text-dim py-12">
|
||||||
|
<p class="mb-1">No log evidence found for "{{ lastQuery }}"</p>
|
||||||
|
<p class="text-sm">Check the Sources tab to confirm data is ingested, or try a broader description.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Save CTAs -->
|
||||||
|
<div v-if="entries.length && !saved" class="mt-2 flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
@click="saveQuick"
|
||||||
|
:disabled="saving"
|
||||||
|
class="px-4 py-2 bg-accent text-surface text-sm rounded font-medium hover:opacity-90 transition-opacity disabled:opacity-40"
|
||||||
|
>
|
||||||
|
{{ saving ? 'Saving…' : 'Save as incident' }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="!showDetails"
|
||||||
|
@click="showDetails = true"
|
||||||
|
class="text-text-dim hover:text-text-primary text-sm underline underline-offset-2"
|
||||||
|
>
|
||||||
|
add details…
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inline details panel -->
|
||||||
|
<div v-if="showDetails && !saved" class="mt-4 rounded border border-surface-border bg-surface-raised p-4 space-y-3">
|
||||||
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Severity</label>
|
||||||
|
<select
|
||||||
|
v-model="detailSeverity"
|
||||||
|
class="bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent"
|
||||||
|
>
|
||||||
|
<option value="low">Low</option>
|
||||||
|
<option value="medium">Medium</option>
|
||||||
|
<option value="high">High</option>
|
||||||
|
<option value="critical">Critical</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-48">
|
||||||
|
<label class="block text-xs text-text-dim mb-1">Notes <span class="text-text-dim">(optional)</span></label>
|
||||||
|
<input
|
||||||
|
v-model="detailNotes"
|
||||||
|
type="text"
|
||||||
|
placeholder="Any extra context…"
|
||||||
|
class="w-full bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button
|
||||||
|
@click="saveWithDetails"
|
||||||
|
:disabled="saving"
|
||||||
|
class="px-4 py-2 bg-accent text-surface text-sm rounded font-medium hover:opacity-90 transition-opacity disabled:opacity-40"
|
||||||
|
>
|
||||||
|
{{ saving ? 'Saving…' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
<button @click="showDetails = false" class="text-text-dim hover:text-text-primary text-sm">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Saved confirmation -->
|
||||||
|
<div v-if="saved" class="mt-2 text-sm text-green-400">
|
||||||
|
Saved —
|
||||||
|
<RouterLink to="/incidents" class="underline underline-offset-2 hover:text-green-300">view in Incidents</RouterLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted, watch } from 'vue'
|
||||||
|
import { useRoute, RouterLink } from 'vue-router'
|
||||||
|
import LogEntryRow from '@/components/LogEntryRow.vue'
|
||||||
|
import type { LogEntry } from '@/stores/search'
|
||||||
|
|
||||||
|
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
interface Summary {
|
||||||
|
total: number
|
||||||
|
window_start: string | null
|
||||||
|
window_end: string | null
|
||||||
|
time_detected: boolean
|
||||||
|
by_severity: Record<string, number>
|
||||||
|
by_source: Record<string, number>
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = ref('')
|
||||||
|
const entries = ref<LogEntry[]>([])
|
||||||
|
const summary = ref<Summary | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
const error = ref<string | null>(null)
|
||||||
|
const ranOnce = ref(false)
|
||||||
|
const lastQuery = ref('')
|
||||||
|
const saved = ref(false)
|
||||||
|
const saving = ref(false)
|
||||||
|
const showDetails = ref(false)
|
||||||
|
const detailSeverity = ref('medium')
|
||||||
|
const detailNotes = ref('')
|
||||||
|
let capturedSince: string | null = null
|
||||||
|
let capturedUntil: string | null = null
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const q = route.query.q
|
||||||
|
if (typeof q === 'string' && q.trim()) {
|
||||||
|
query.value = q
|
||||||
|
run()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => route.query.q, (newQ) => {
|
||||||
|
if (typeof newQ === 'string' && newQ.trim() && newQ !== lastQuery.value) {
|
||||||
|
query.value = newQ
|
||||||
|
run()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
if (!query.value.trim()) return
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
ranOnce.value = true
|
||||||
|
lastQuery.value = query.value
|
||||||
|
saved.value = false
|
||||||
|
showDetails.value = false
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${BASE}/api/diagnose`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ query: query.value }),
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error(`API returned ${res.status}`)
|
||||||
|
const data = await res.json()
|
||||||
|
entries.value = data.entries
|
||||||
|
summary.value = data.summary
|
||||||
|
capturedSince = data.summary.window_start
|
||||||
|
capturedUntil = data.summary.window_end
|
||||||
|
} catch (e) {
|
||||||
|
error.value = e instanceof Error ? e.message : String(e)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveQuick() {
|
||||||
|
saving.value = true
|
||||||
|
try { await postIncident('medium', '') }
|
||||||
|
finally { saving.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveWithDetails() {
|
||||||
|
saving.value = true
|
||||||
|
try { await postIncident(detailSeverity.value, detailNotes.value) }
|
||||||
|
finally { saving.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function postIncident(severity: string, notes: string) {
|
||||||
|
const res = await fetch(`${BASE}/api/incidents`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
label: lastQuery.value,
|
||||||
|
started_at: capturedSince,
|
||||||
|
ended_at: capturedUntil,
|
||||||
|
severity,
|
||||||
|
notes,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error(await res.text())
|
||||||
|
saved.value = true
|
||||||
|
showDetails.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const nonZeroSeverity = computed(() => {
|
||||||
|
if (!summary.value) return {}
|
||||||
|
return Object.fromEntries(
|
||||||
|
Object.entries(summary.value.by_severity).filter(([, v]) => v > 0)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
function sevClass(sev: string): string {
|
||||||
|
return ({
|
||||||
|
CRITICAL: 'text-sev-critical',
|
||||||
|
ERROR: 'text-sev-error',
|
||||||
|
WARN: 'text-sev-warn',
|
||||||
|
INFO: 'text-sev-info',
|
||||||
|
} as Record<string, string>)[sev] ?? 'text-text-dim'
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtTs(iso: string | null): string {
|
||||||
|
if (!iso) return '—'
|
||||||
|
try {
|
||||||
|
return new Date(iso).toLocaleString(undefined, {
|
||||||
|
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||||
|
})
|
||||||
|
} catch { return iso }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in a new issue