refactor: remove incident form from IncidentsView — now in DiagnoseView Structured tab
This commit is contained in:
parent
726755e69e
commit
28013f8cbe
1 changed files with 10 additions and 243 deletions
|
|
@ -4,151 +4,20 @@
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<h1 class="text-text-primary text-xl font-semibold mb-1">Incidents</h1>
|
<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>
|
<p class="text-text-dim text-sm">
|
||||||
</div>
|
Tagged incidents and their log evidence.
|
||||||
|
<RouterLink
|
||||||
<!-- Create form -->
|
to="/diagnose?tab=structured"
|
||||||
<div class="mb-8 rounded border border-surface-border bg-surface-raised p-5">
|
class="text-accent hover:text-blue-300 underline underline-offset-2 ml-1"
|
||||||
<h2 class="text-text-primary text-sm font-semibold mb-4 uppercase tracking-wider">Tag New Incident</h2>
|
>Tag a new incident →</RouterLink>
|
||||||
|
</p>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Issue type -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs text-text-dim mb-1">Issue type <span class="text-text-dim">(optional — short tag for pattern building)</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 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>
|
</div>
|
||||||
|
|
||||||
<!-- Incidents table -->
|
<!-- Incidents table -->
|
||||||
<div v-if="loading" class="text-text-dim py-8 text-center text-sm">Loading…</div>
|
<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">
|
<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.
|
No incidents tagged yet.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="rounded border border-surface-border overflow-hidden">
|
<div v-else class="rounded border border-surface-border overflow-hidden">
|
||||||
|
|
@ -243,7 +112,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
|
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
|
||||||
|
|
||||||
|
|
@ -266,109 +136,6 @@ interface Entry {
|
||||||
text: string
|
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: '',
|
|
||||||
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.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,
|
|
||||||
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())
|
|
||||||
const created: Incident = await res.json()
|
|
||||||
incidents.value.unshift(created)
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── list + delete ────────────────────────────────────────────
|
// ── list + delete ────────────────────────────────────────────
|
||||||
const incidents = ref<Incident[]>([])
|
const incidents = ref<Incident[]>([])
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue