feat: Incidents tab — Vue view with time-bucket picker and entry drawer (#2)
- New IncidentsView.vue: create/list/delete incidents, inline entry drawer - Time-bucket quick-pick: Ongoing, Just now, Last hour, Last day - Optional custom datetime-local range picker for precise control - Incident label doubles as the LLM/FTS search term for entry retrieval - Entry drawer shows up to 100 associated log entries with severity colour - Add /incidents route and nav link (between Diagnose and Sources)
This commit is contained in:
parent
62d248a08e
commit
1ee364fc97
3 changed files with 418 additions and 3 deletions
|
|
@ -29,8 +29,9 @@ import { RouterLink, RouterView } from 'vue-router'
|
|||
import StatusDot from '@/components/StatusDot.vue'
|
||||
|
||||
const navLinks = [
|
||||
{ to: '/search', label: 'Search' },
|
||||
{ to: '/diagnose', label: 'Diagnose' },
|
||||
{ to: '/sources', label: 'Sources' },
|
||||
{ to: '/search', label: 'Search' },
|
||||
{ to: '/diagnose', label: 'Diagnose' },
|
||||
{ to: '/incidents', label: 'Incidents' },
|
||||
{ to: '/sources', label: 'Sources' },
|
||||
]
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||
import LogSearchView from '@/views/LogSearchView.vue'
|
||||
import DiagnoseView from '@/views/DiagnoseView.vue'
|
||||
import SourcesView from '@/views/SourcesView.vue'
|
||||
import IncidentsView from '@/views/IncidentsView.vue'
|
||||
|
||||
export default createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -10,5 +11,6 @@ export default createRouter({
|
|||
{ path: '/search', component: LogSearchView },
|
||||
{ path: '/diagnose', component: DiagnoseView },
|
||||
{ path: '/sources', component: SourcesView },
|
||||
{ path: '/incidents', component: IncidentsView },
|
||||
],
|
||||
})
|
||||
|
|
|
|||
412
web/src/views/IncidentsView.vue
Normal file
412
web/src/views/IncidentsView.vue
Normal file
|
|
@ -0,0 +1,412 @@
|
|||
<template>
|
||||
<div class="p-6 max-w-5xl mx-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h1 class="text-text-primary text-xl font-semibold mb-1">Incidents</h1>
|
||||
<p class="text-text-dim text-sm">Tag time windows with descriptions. The label is used to search for related log entries.</p>
|
||||
</div>
|
||||
|
||||
<!-- Create form -->
|
||||
<div class="mb-8 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>
|
||||
|
||||
<!-- Custom date range picker -->
|
||||
<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>
|
||||
|
||||
<!-- Active window summary -->
|
||||
<p v-if="windowSummary" class="text-text-dim text-xs mt-2">
|
||||
Window: <span class="text-text-muted">{{ windowSummary }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Severity + Notes row -->
|
||||
<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="submitIncident"
|
||||
: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>
|
||||
|
||||
<!-- Incidents table -->
|
||||
<div v-if="loading" class="text-text-dim py-8 text-center text-sm">Loading…</div>
|
||||
|
||||
<div v-else-if="incidents.length === 0" class="text-text-dim py-12 text-center text-sm">
|
||||
No incidents tagged yet. Use the form above to mark your first one.
|
||||
</div>
|
||||
|
||||
<div v-else class="rounded border border-surface-border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-surface-raised border-b border-surface-border">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Description</th>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Severity</th>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Window</th>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Tagged</th>
|
||||
<th class="px-4 py-2.5"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="inc in incidents"
|
||||
:key="inc.id"
|
||||
class="border-b border-surface-border hover:bg-surface-raised transition-colors cursor-pointer"
|
||||
@click="selectIncident(inc)"
|
||||
>
|
||||
<td class="px-4 py-2.5 text-text-primary">{{ inc.label }}</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span :class="['px-1.5 py-0.5 rounded text-xs font-medium', severityClass(inc.severity)]">
|
||||
{{ inc.severity }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-text-dim text-xs">{{ windowLabel(inc) }}</td>
|
||||
<td class="px-4 py-2.5 text-text-dim text-xs">{{ formatTs(inc.created_at) }}</td>
|
||||
<td class="px-4 py-2.5 text-right">
|
||||
<button
|
||||
@click.stop="deleteIncident(inc.id)"
|
||||
class="text-text-dim hover:text-sev-error transition-colors text-xs px-2 py-1 rounded hover:bg-surface"
|
||||
>
|
||||
delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Incident detail drawer -->
|
||||
<div v-if="selected" class="mt-6 rounded border border-accent bg-surface p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-text-primary text-sm font-semibold">{{ selected.label }}</h2>
|
||||
<button @click="selected = null" class="text-text-dim hover:text-text-primary text-xs">✕ close</button>
|
||||
</div>
|
||||
|
||||
<div v-if="entriesLoading" class="text-text-dim text-sm py-4">Fetching log entries…</div>
|
||||
|
||||
<div v-else-if="selectedEntries.length === 0" class="text-text-dim text-sm py-4">
|
||||
No log entries found in this window.
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<p class="text-text-dim text-xs mb-3">{{ selectedEntries.length }} entries in window</p>
|
||||
<div class="space-y-1 max-h-96 overflow-y-auto">
|
||||
<div
|
||||
v-for="entry in selectedEntries"
|
||||
:key="entry.entry_id"
|
||||
class="font-mono text-xs py-1 px-2 rounded bg-surface-raised border border-surface-border"
|
||||
>
|
||||
<span class="text-text-dim mr-2">{{ shortTs(entry.timestamp_iso) }}</span>
|
||||
<span :class="['mr-2', severityTextClass(entry.severity)]">{{ entry.severity || '?' }}</span>
|
||||
<span class="text-text-muted">{{ entry.source_id.split(':').pop() }}</span>
|
||||
<span class="text-text-dim mx-1">|</span>
|
||||
<span class="text-text-primary">{{ entry.text.slice(0, 200) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
|
||||
|
||||
interface Incident {
|
||||
id: string
|
||||
label: string
|
||||
started_at: string | null
|
||||
ended_at: string | null
|
||||
notes: string
|
||||
created_at: string
|
||||
severity: string
|
||||
}
|
||||
|
||||
interface Entry {
|
||||
entry_id: string
|
||||
source_id: string
|
||||
timestamp_iso: string | null
|
||||
severity: string | null
|
||||
text: 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 }
|
||||
}
|
||||
|
||||
// ── form state ──────────────────────────────────────────────
|
||||
const form = ref({
|
||||
label: '',
|
||||
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.started_at = range.started_at
|
||||
form.value.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 ''
|
||||
const s = start ? formatTs(start) : '—'
|
||||
const e = end ? formatTs(end) : 'ongoing'
|
||||
return `${s} → ${e}`
|
||||
})
|
||||
|
||||
function localToIso(local: string): string | null {
|
||||
if (!local) return null
|
||||
return new Date(local).toISOString()
|
||||
}
|
||||
|
||||
async function submitIncident() {
|
||||
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,
|
||||
severity: form.value.severity,
|
||||
notes: form.value.notes,
|
||||
started_at,
|
||||
ended_at,
|
||||
}),
|
||||
})
|
||||
if (!res.ok) throw new Error(await res.text())
|
||||
const created: Incident = await res.json()
|
||||
incidents.value.unshift(created)
|
||||
form.value = { label: '', 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
|
||||
}
|
||||
}
|
||||
|
||||
// ── list + delete ────────────────────────────────────────────
|
||||
const incidents = ref<Incident[]>([])
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await fetch(`${BASE}/api/incidents`)
|
||||
if (res.ok) incidents.value = (await res.json()).incidents
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
async function deleteIncident(id: string) {
|
||||
await fetch(`${BASE}/api/incidents/${id}`, { method: 'DELETE' })
|
||||
incidents.value = incidents.value.filter(i => i.id !== id)
|
||||
if (selected.value?.id === id) selected.value = null
|
||||
}
|
||||
|
||||
// ── detail drawer ─────────────────────────────────────────────
|
||||
const selected = ref<Incident | null>(null)
|
||||
const selectedEntries = ref<Entry[]>([])
|
||||
const entriesLoading = ref(false)
|
||||
|
||||
async function selectIncident(inc: Incident) {
|
||||
selected.value = inc
|
||||
selectedEntries.value = []
|
||||
entriesLoading.value = true
|
||||
try {
|
||||
const res = await fetch(`${BASE}/api/incidents/${inc.id}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
selectedEntries.value = data.entries ?? []
|
||||
}
|
||||
} finally {
|
||||
entriesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── helpers ───────────────────────────────────────────────────
|
||||
function severityClass(sev: string): string {
|
||||
return {
|
||||
low: 'bg-surface-border text-text-muted',
|
||||
medium: 'bg-yellow-900 text-yellow-300',
|
||||
high: 'bg-orange-900 text-orange-300',
|
||||
critical: 'bg-red-900 text-red-300',
|
||||
}[sev] ?? 'bg-surface-border text-text-muted'
|
||||
}
|
||||
|
||||
function severityTextClass(sev: string | null): string {
|
||||
return {
|
||||
ERROR: 'text-sev-error',
|
||||
CRITICAL: 'text-sev-critical',
|
||||
WARN: 'text-sev-warn',
|
||||
WARNING: 'text-sev-warn',
|
||||
INFO: 'text-sev-info',
|
||||
DEBUG: 'text-text-dim',
|
||||
}[sev?.toUpperCase() ?? ''] ?? 'text-text-dim'
|
||||
}
|
||||
|
||||
function windowLabel(inc: Incident): string {
|
||||
if (!inc.started_at && !inc.ended_at) return '—'
|
||||
const s = inc.started_at ? formatTs(inc.started_at) : '—'
|
||||
const e = inc.ended_at ? formatTs(inc.ended_at) : 'ongoing'
|
||||
return `${s} → ${e}`
|
||||
}
|
||||
|
||||
function formatTs(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 }
|
||||
}
|
||||
|
||||
function shortTs(iso: string | null): string {
|
||||
if (!iso) return '?'
|
||||
try {
|
||||
return new Date(iso).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||
} catch { return iso }
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue