feat: UI Problems list filters, detail card and event timeline (d2-1)
- Filters status/severity/hostname; /problems/:id with Ack/Resolve and timeline - Dashboard drill-down to open problems Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
PTah
+3
-3
@@ -87,7 +87,7 @@
|
||||
|
||||
### День 2
|
||||
|
||||
- [ ] `d2-1` UI Problems: список, фильтры, `Ack/Resolve`, карточка с таймлайном
|
||||
- [x] `d2-1` UI Problems: список, фильтры, `Ack/Resolve`, карточка с таймлайном
|
||||
- [ ] `d2-2` Dashboard: top hosts/types, `open vs resolved 24h`, drill-down
|
||||
- [ ] `d2-3` Ops: retention, health checks, runbook backup/restore/deploy
|
||||
- [ ] `dod` DoD: нет дублей `event_id`, Problems e2e, 3 правила, UI MVP, docs, push в kalinamall
|
||||
@@ -116,8 +116,8 @@
|
||||
|
||||
#### День 2
|
||||
|
||||
- [ ] `09:00–11:00` UI Problems: таблица + фильтры (`status/severity/host`)
|
||||
- [ ] `11:00–12:00` карточка проблемы + таймлайн событий
|
||||
- [x] `09:00–11:00` UI Problems: таблица + фильтры (`status/severity/host`)
|
||||
- [x] `11:00–12:00` карточка проблемы + таймлайн событий
|
||||
- [ ] `13:00–14:30` Dashboard: виджеты top hosts/types
|
||||
- [ ] `14:30–16:00` Dashboard: `open/resolved 24h` + drill-down
|
||||
- [ ] `16:00–17:00` retention job (`events 30–90d`, `problems 180d+`)
|
||||
|
||||
@@ -111,6 +111,24 @@ export interface ProblemListResponse {
|
||||
page_size: number;
|
||||
}
|
||||
|
||||
export interface ProblemEventItem {
|
||||
id: number;
|
||||
event_id: string;
|
||||
occurred_at: string;
|
||||
type: string;
|
||||
severity: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
export interface ProblemDetail extends ProblemSummary {
|
||||
events: ProblemEventItem[];
|
||||
}
|
||||
|
||||
export function fetchProblem(id: number): Promise<ProblemDetail> {
|
||||
return apiFetch<ProblemDetail>(`/api/v1/problems/${id}`);
|
||||
}
|
||||
|
||||
export async function ackProblem(problemId: number): Promise<{ id: number; status: string }> {
|
||||
return apiFetch(`/api/v1/problems/${problemId}/ack`, { method: "POST" });
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import EventDetailView from "./views/EventDetailView.vue";
|
||||
import HostsView from "./views/HostsView.vue";
|
||||
import LoginView from "./views/LoginView.vue";
|
||||
import ProblemsView from "./views/ProblemsView.vue";
|
||||
import ProblemDetailView from "./views/ProblemDetailView.vue";
|
||||
import DashboardView from "./views/DashboardView.vue";
|
||||
import ReportsView from "./views/ReportsView.vue";
|
||||
|
||||
@@ -19,6 +20,7 @@ const router = createRouter({
|
||||
{ path: "/reports", component: ReportsView },
|
||||
{ path: "/hosts", component: HostsView },
|
||||
{ path: "/problems", component: ProblemsView },
|
||||
{ path: "/problems/:id", component: ProblemDetailView, props: true },
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@@ -94,6 +94,11 @@ td.actions {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.timeline-table td:nth-child(5) {
|
||||
max-width: 28rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="dash-card">
|
||||
<div class="dash-value">{{ data.problems_open }}</div>
|
||||
<div class="dash-label">Открытых проблем</div>
|
||||
<RouterLink to="/problems">Проблемы →</RouterLink>
|
||||
<RouterLink :to="{ path: '/problems', query: { status: 'open' } }">Проблемы →</RouterLink>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="dash-value">{{ data.hosts_total }}</div>
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<p><RouterLink to="/problems">← Проблемы</RouterLink></p>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
<template v-else-if="problem">
|
||||
<h1>{{ problem.title }}</h1>
|
||||
<div class="card report-meta">
|
||||
<p>
|
||||
<strong>ID:</strong> {{ problem.id }}
|
||||
· <strong>Status:</strong>
|
||||
<span :class="'status-' + problem.status">{{ problem.status }}</span>
|
||||
· <strong>Severity:</strong>
|
||||
<span :class="'sev-' + problem.severity">{{ problem.severity }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Хост:</strong>
|
||||
<RouterLink
|
||||
v-if="problem.hostname"
|
||||
:to="{ path: '/reports', query: { hostname: problem.hostname } }"
|
||||
>
|
||||
{{ problem.hostname }}
|
||||
</RouterLink>
|
||||
<span v-else>—</span>
|
||||
· <strong>Rule:</strong> <code>{{ problem.rule_id ?? "—" }}</code>
|
||||
</p>
|
||||
<p><strong>Summary:</strong> {{ problem.summary }}</p>
|
||||
<p>
|
||||
<strong>Событий:</strong> {{ problem.event_count ?? "—" }}
|
||||
· <strong>Last seen:</strong> {{ formatDt(problem.last_seen_at ?? problem.updated_at) }}
|
||||
· <strong>Обновлено:</strong> {{ formatDt(problem.updated_at) }}
|
||||
</p>
|
||||
<p v-if="problem.fingerprint">
|
||||
<strong>Fingerprint:</strong> <code>{{ problem.fingerprint }}</code>
|
||||
</p>
|
||||
<p class="actions">
|
||||
<button
|
||||
v-if="problem.status === 'open'"
|
||||
type="button"
|
||||
class="secondary"
|
||||
:disabled="acting"
|
||||
@click="doAck"
|
||||
>
|
||||
Ack
|
||||
</button>
|
||||
<button v-if="problem.status !== 'resolved'" type="button" :disabled="acting" @click="doResolve">
|
||||
Resolve
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>Таймлайн событий</h2>
|
||||
<p v-if="!problem.events.length">Нет связанных событий.</p>
|
||||
<table v-else class="timeline-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Severity</th>
|
||||
<th>Type</th>
|
||||
<th>Title</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="e in problem.events" :key="e.id">
|
||||
<td>{{ formatDt(e.occurred_at) }}</td>
|
||||
<td :class="'sev-' + e.severity">{{ e.severity }}</td>
|
||||
<td>
|
||||
<RouterLink :to="`/events/${e.id}`"><code>{{ e.type }}</code></RouterLink>
|
||||
</td>
|
||||
<td>{{ e.title }}</td>
|
||||
<td>{{ e.summary }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { ackProblem, fetchProblem, resolveProblem, type ProblemDetail } from "../api";
|
||||
|
||||
const props = defineProps<{ id: string }>();
|
||||
|
||||
const problem = ref<ProblemDetail | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const acting = ref(false);
|
||||
|
||||
function formatDt(iso: string) {
|
||||
return new Date(iso).toLocaleString("ru-RU");
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
problem.value = await fetchProblem(Number(props.id));
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Не найдено";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function doAck() {
|
||||
if (!problem.value) return;
|
||||
acting.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await ackProblem(problem.value.id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Ошибка ack";
|
||||
} finally {
|
||||
acting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function doResolve() {
|
||||
if (!problem.value) return;
|
||||
acting.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await resolveProblem(problem.value.id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Ошибка resolve";
|
||||
} finally {
|
||||
acting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
watch(() => props.id, load);
|
||||
</script>
|
||||
@@ -7,7 +7,15 @@
|
||||
<option value="acknowledged">acknowledged</option>
|
||||
<option value="resolved">resolved</option>
|
||||
</select>
|
||||
<button type="button" @click="load(1)">Обновить</button>
|
||||
<select v-model="severityFilter" @change="load(1)">
|
||||
<option value="">Все severity</option>
|
||||
<option>info</option>
|
||||
<option>warning</option>
|
||||
<option>high</option>
|
||||
<option>critical</option>
|
||||
</select>
|
||||
<input v-model="hostnameFilter" placeholder="hostname" @keyup.enter="load(1)" />
|
||||
<button type="button" @click="load(1)">Применить</button>
|
||||
</div>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
@@ -28,13 +36,17 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="p in data?.items ?? []" :key="p.id">
|
||||
<td>{{ p.id }}</td>
|
||||
<td>
|
||||
<RouterLink :to="`/problems/${p.id}`">{{ p.id }}</RouterLink>
|
||||
</td>
|
||||
<td>{{ formatDt(p.updated_at) }}</td>
|
||||
<td>{{ p.hostname ?? "—" }}</td>
|
||||
<td :class="'sev-' + p.severity">{{ p.severity }}</td>
|
||||
<td :class="'status-' + p.status">{{ p.status }}</td>
|
||||
<td><code>{{ p.rule_id ?? "—" }}</code></td>
|
||||
<td>{{ p.title }}</td>
|
||||
<td>
|
||||
<RouterLink :to="`/problems/${p.id}`">{{ p.title }}</RouterLink>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button
|
||||
v-if="p.status === 'open'"
|
||||
@@ -73,15 +85,20 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ackProblem, apiFetch, resolveProblem, type ProblemListResponse } from "../api";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const data = ref<ProblemListResponse | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const page = ref(1);
|
||||
const pageSize = 50;
|
||||
const statusFilter = ref("");
|
||||
const severityFilter = ref("");
|
||||
const hostnameFilter = ref("");
|
||||
const actingId = ref<number | null>(null);
|
||||
|
||||
function formatDt(iso: string) {
|
||||
@@ -98,6 +115,8 @@ async function load(p: number) {
|
||||
page_size: String(pageSize),
|
||||
});
|
||||
if (statusFilter.value) params.set("status", statusFilter.value);
|
||||
if (severityFilter.value) params.set("severity", severityFilter.value);
|
||||
if (hostnameFilter.value.trim()) params.set("hostname", hostnameFilter.value.trim());
|
||||
data.value = await apiFetch<ProblemListResponse>(`/api/v1/problems?${params}`);
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Ошибка загрузки";
|
||||
@@ -132,5 +151,23 @@ async function doResolve(id: number) {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => load(1));
|
||||
onMounted(() => {
|
||||
const status = route.query.status;
|
||||
if (typeof status === "string" && status) statusFilter.value = status;
|
||||
const severity = route.query.severity;
|
||||
if (typeof severity === "string" && severity) severityFilter.value = severity;
|
||||
const hostname = route.query.hostname;
|
||||
if (typeof hostname === "string" && hostname) hostnameFilter.value = hostname;
|
||||
load(1);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [route.query.status, route.query.severity, route.query.hostname] as const,
|
||||
([status, severity, hostname]) => {
|
||||
if (typeof status === "string") statusFilter.value = status;
|
||||
if (typeof severity === "string") severityFilter.value = severity;
|
||||
if (typeof hostname === "string") hostnameFilter.value = hostname;
|
||||
load(1);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user