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>
2026-05-28 09:55:28 +10:00
parent 64b5ef297a
commit 249894d8e1
7 changed files with 206 additions and 9 deletions
@@ -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>