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>

frontend/src/views/ProblemsView.vue

@@ -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>