feat: drill-down filters on overview and outdated agent version highlight

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/views/ProblemsView.vue

@@ -1,22 +1,23 @@
 <template>
   <h1>Проблемы</h1>
   <div class="filters">
-    <select v-model="statusFilter" @change="load(1)">
+    <select v-model="statusFilter" @change="applyFilters">
       <option value="">Все статусы</option>
       <option value="open">open</option>
       <option value="acknowledged">acknowledged</option>
       <option value="resolved">resolved</option>
     </select>
-    <select v-model="severityFilter" @change="load(1)">
+    <select v-model="severityFilter" @change="applyFilters">
       <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>
+    <input v-model="hostnameFilter" placeholder="hostname / имя сервера" @keyup.enter="applyFilters" />
+    <button type="button" @click="applyFilters">Применить</button>
   </div>
+  <p v-if="timeFilterHint" class="muted">{{ timeFilterHint }}</p>
   <p v-if="error" class="error">{{ error }}</p>
   <p v-else-if="loading">Загрузка…</p>
   <template v-else>
@@ -90,12 +91,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { ackProblem, apiFetch, resolveProblem, type ProblemListResponse } from "../api";
 import { formatServerName } from "../utils/hostDisplay";
 
 const route = useRoute();
+const router = useRouter();
 
 const data = ref<ProblemListResponse | null>(null);
 const loading = ref(false);
@@ -105,8 +107,20 @@ const pageSize = 50;
 const statusFilter = ref("");
 const severityFilter = ref("");
 const hostnameFilter = ref("");
+const createdWithinHours = ref("");
+const resolvedWithinHours = ref("");
 const actingId = ref<number | null>(null);
 
+const timeFilterHint = computed(() => {
+  if (createdWithinHours.value) {
+    return `Показаны проблемы, созданные за последние ${createdWithinHours.value} ч (любой статус).`;
+  }
+  if (resolvedWithinHours.value) {
+    return `Показаны проблемы, закрытые за последние ${resolvedWithinHours.value} ч.`;
+  }
+  return "";
+});
+
 function formatDt(iso: string) {
   return new Date(iso).toLocaleString("ru-RU");
 }
@@ -120,9 +134,13 @@ async function load(p: number) {
       page: String(page.value),
       page_size: String(pageSize),
     });
-    if (statusFilter.value) params.set("status", statusFilter.value);
+    if (statusFilter.value && !resolvedWithinHours.value) {
+      params.set("status", statusFilter.value);
+    }
     if (severityFilter.value) params.set("severity", severityFilter.value);
     if (hostnameFilter.value.trim()) params.set("hostname", hostnameFilter.value.trim());
+    if (createdWithinHours.value) params.set("created_within_hours", createdWithinHours.value);
+    if (resolvedWithinHours.value) params.set("resolved_within_hours", resolvedWithinHours.value);
     data.value = await apiFetch<ProblemListResponse>(`/api/v1/problems?${params}`);
   } catch (e) {
     error.value = e instanceof Error ? e.message : "Ошибка загрузки";
@@ -131,6 +149,37 @@ async function load(p: number) {
   }
 }
 
+function buildProblemsQuery(): Record<string, string> {
+  const q: Record<string, string> = {};
+  if (statusFilter.value && !resolvedWithinHours.value) q.status = statusFilter.value;
+  if (severityFilter.value) q.severity = severityFilter.value;
+  if (hostnameFilter.value.trim()) q.hostname = hostnameFilter.value.trim();
+  if (createdWithinHours.value) q.created_within_hours = createdWithinHours.value;
+  if (resolvedWithinHours.value) q.resolved_within_hours = resolvedWithinHours.value;
+  return q;
+}
+
+function applyFilters() {
+  if (resolvedWithinHours.value) createdWithinHours.value = "";
+  else if (createdWithinHours.value) resolvedWithinHours.value = "";
+  void router.replace({ path: "/problems", query: buildProblemsQuery() });
+  void load(1);
+}
+
+function syncFromRoute() {
+  const status = route.query.status;
+  statusFilter.value = typeof status === "string" ? status : "";
+  const severity = route.query.severity;
+  severityFilter.value = typeof severity === "string" ? severity : "";
+  const hostname = route.query.hostname;
+  hostnameFilter.value = typeof hostname === "string" ? hostname : "";
+  const created = route.query.created_within_hours;
+  createdWithinHours.value = typeof created === "string" ? created : "";
+  const resolved = route.query.resolved_within_hours;
+  resolvedWithinHours.value = typeof resolved === "string" ? resolved : "";
+  if (resolvedWithinHours.value) statusFilter.value = "resolved";
+}
+
 async function doAck(id: number) {
   actingId.value = id;
   error.value = "";
@@ -158,22 +207,22 @@ async function doResolve(id: number) {
 }
 
 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;
+  syncFromRoute();
   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;
+  () =>
+    [
+      route.query.status,
+      route.query.severity,
+      route.query.hostname,
+      route.query.created_within_hours,
+      route.query.resolved_within_hours,
+    ] as const,
+  () => {
+    syncFromRoute();
     load(1);
-  }
+  },
 );
 </script>