feat: Problems API, ingest hook, and UI

frontend/src/App.vue

@@ -3,6 +3,7 @@
     <nav v-if="showNav">
       <span class="brand">SAC</span>
       <RouterLink to="/events">События</RouterLink>
+      <RouterLink to="/problems">Проблемы</RouterLink>
       <RouterLink to="/hosts">Хосты</RouterLink>
       <button type="button" class="secondary" @click="logout">Выход</button>
     </nav>

frontend/src/api.ts

@@ -84,3 +84,31 @@ export interface HostListResponse {
   page: number;
   page_size: number;
 }
+
+export interface ProblemSummary {
+  id: number;
+  host_id: number | null;
+  hostname: string | null;
+  title: string;
+  summary: string;
+  severity: string;
+  status: string;
+  rule_id: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProblemListResponse {
+  items: ProblemSummary[];
+  total: number;
+  page: number;
+  page_size: number;
+}
+
+export async function ackProblem(problemId: number): Promise<{ id: number; status: string }> {
+  return apiFetch(`/api/v1/problems/${problemId}/ack`, { method: "POST" });
+}
+
+export async function resolveProblem(problemId: number): Promise<{ id: number; status: string }> {
+  return apiFetch(`/api/v1/problems/${problemId}/resolve`, { method: "POST" });
+}

frontend/src/router.ts

@@ -4,6 +4,7 @@ import EventsView from "./views/EventsView.vue";
 import EventDetailView from "./views/EventDetailView.vue";
 import HostsView from "./views/HostsView.vue";
 import LoginView from "./views/LoginView.vue";
+import ProblemsView from "./views/ProblemsView.vue";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -13,6 +14,7 @@ const router = createRouter({
     { path: "/events", component: EventsView },
     { path: "/events/:id", component: EventDetailView, props: true },
     { path: "/hosts", component: HostsView },
+    { path: "/problems", component: ProblemsView },
   ],
 });
 

frontend/src/style.css

@@ -67,6 +67,22 @@ th {
   color: #7eb8ff;
 }
 
+.status-open {
+  color: #ff6b6b;
+}
+.status-acknowledged {
+  color: #ffc857;
+}
+.status-resolved {
+  color: #6bcb77;
+}
+
+td.actions {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
 .card {
   background: #1a2332;
   border: 1px solid #2a3441;

frontend/src/views/ProblemsView.vue

@@ -0,0 +1,136 @@
+<template>
+  <h1>Проблемы</h1>
+  <div class="filters">
+    <select v-model="statusFilter" @change="load(1)">
+      <option value="">Все статусы</option>
+      <option value="open">open</option>
+      <option value="acknowledged">acknowledged</option>
+      <option value="resolved">resolved</option>
+    </select>
+    <button type="button" @click="load(1)">Обновить</button>
+  </div>
+  <p v-if="error" class="error">{{ error }}</p>
+  <p v-else-if="loading">Загрузка…</p>
+  <template v-else>
+    <p>Всего: {{ data?.total ?? 0 }}</p>
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Обновлено</th>
+          <th>Хост</th>
+          <th>Severity</th>
+          <th>Status</th>
+          <th>Rule</th>
+          <th>Title</th>
+          <th>Действия</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="p in data?.items ?? []" :key="p.id">
+          <td>{{ p.id }}</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 class="actions">
+            <button
+              v-if="p.status === 'open'"
+              type="button"
+              class="secondary"
+              :disabled="actingId === p.id"
+              @click="doAck(p.id)"
+            >
+              Ack
+            </button>
+            <button
+              v-if="p.status !== 'resolved'"
+              type="button"
+              :disabled="actingId === p.id"
+              @click="doResolve(p.id)"
+            >
+              Resolve
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="filters" style="margin-top: 1rem">
+      <button type="button" class="secondary" :disabled="page <= 1" @click="load(page - 1)">Назад</button>
+      <span>Стр. {{ page }}</span>
+      <button
+        type="button"
+        class="secondary"
+        :disabled="!data || page * pageSize >= data.total"
+        @click="load(page + 1)"
+      >
+        Вперёд
+      </button>
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ackProblem, apiFetch, resolveProblem, type ProblemListResponse } from "../api";
+
+const data = ref<ProblemListResponse | null>(null);
+const loading = ref(false);
+const error = ref("");
+const page = ref(1);
+const pageSize = 50;
+const statusFilter = ref("");
+const actingId = ref<number | null>(null);
+
+function formatDt(iso: string) {
+  return new Date(iso).toLocaleString("ru-RU");
+}
+
+async function load(p: number) {
+  page.value = p;
+  loading.value = true;
+  error.value = "";
+  try {
+    const params = new URLSearchParams({
+      page: String(page.value),
+      page_size: String(pageSize),
+    });
+    if (statusFilter.value) params.set("status", statusFilter.value);
+    data.value = await apiFetch<ProblemListResponse>(`/api/v1/problems?${params}`);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка загрузки";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function doAck(id: number) {
+  actingId.value = id;
+  error.value = "";
+  try {
+    await ackProblem(id);
+    await load(page.value);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка ack";
+  } finally {
+    actingId.value = null;
+  }
+}
+
+async function doResolve(id: number) {
+  actingId.value = id;
+  error.value = "";
+  try {
+    await resolveProblem(id);
+    await load(page.value);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка resolve";
+  } finally {
+    actingId.value = null;
+  }
+}
+
+onMounted(() => load(1));
+</script>