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

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

frontend/src/api.ts

@@ -223,6 +223,7 @@ export interface HostListResponse {
   total: number;
   page: number;
   page_size: number;
+  latest_agent_versions?: Record<string, string>;
 }
 
 export interface ProblemSummary {

frontend/src/style.css

@@ -287,6 +287,15 @@ pre {
   color: #9aa4b2;
 }
 
+.agent-version-outdated {
+  display: inline-block;
+  padding: 0.1rem 0.35rem;
+  border-radius: 4px;
+  background: #5c1a1a;
+  color: #ffd4d4;
+  font-weight: 600;
+}
+
 .live-badge {
   color: #6bcb77;
   font-size: 0.85rem;

frontend/src/utils/agentVersion.ts

@@ -0,0 +1,44 @@
+const VERSION_RE = /^(\d+)\.(\d+)\.(\d+)(?:-SAC)?$/i;
+const DEFAULT_LAG_THRESHOLD = 3;
+
+export interface ParsedAgentVersion {
+  major: number;
+  minor: number;
+  patch: number;
+}
+
+export function parseAgentVersion(raw: string | null | undefined): ParsedAgentVersion | null {
+  if (!raw) return null;
+  const match = raw.trim().match(VERSION_RE);
+  if (!match) return null;
+  return {
+    major: Number(match[1]),
+    minor: Number(match[2]),
+    patch: Number(match[3]),
+  };
+}
+
+function compareVersions(a: ParsedAgentVersion, b: ParsedAgentVersion): number {
+  if (a.major !== b.major) return a.major - b.major;
+  if (a.minor !== b.minor) return a.minor - b.minor;
+  return a.patch - b.patch;
+}
+
+function agentVersionLag(host: ParsedAgentVersion, latest: ParsedAgentVersion): number | null {
+  if (compareVersions(host, latest) > 0) return 0;
+  if (host.major !== latest.major || host.minor !== latest.minor) return null;
+  return latest.patch - host.patch;
+}
+
+export function isAgentVersionOutdated(
+  hostVersion: string | null | undefined,
+  latestVersion: string | null | undefined,
+  lagThreshold = DEFAULT_LAG_THRESHOLD,
+): boolean {
+  const host = parseAgentVersion(hostVersion);
+  const latest = parseAgentVersion(latestVersion);
+  if (!host || !latest || compareVersions(host, latest) >= 0) return false;
+  const lag = agentVersionLag(host, latest);
+  if (lag === null) return true;
+  return lag >= lagThreshold;
+}

frontend/src/views/DashboardView.vue

@@ -36,7 +36,7 @@
 
         <div class="dash-label">Новых проблем за 24 ч</div>
 
-        <RouterLink to="/problems">Все проблемы →</RouterLink>
+        <RouterLink :to="{ path: '/problems', query: { created_within_hours: '24' } }">Новые за 24 ч →</RouterLink>
 
       </div>
 
@@ -46,7 +46,7 @@
 
         <div class="dash-label">Закрыто за 24 ч</div>
 
-        <RouterLink :to="{ path: '/problems', query: { status: 'resolved' } }">Resolved →</RouterLink>
+        <RouterLink :to="{ path: '/problems', query: { resolved_within_hours: '24' } }">Закрытые за 24 ч →</RouterLink>
 
       </div>
 
@@ -66,7 +66,7 @@
 
         <div class="dash-label">Устаревший heartbeat</div>
 
-        <RouterLink to="/hosts">Хосты →</RouterLink>
+        <RouterLink :to="{ path: '/hosts', query: { agent_status: 'stale' } }">Stale-хосты →</RouterLink>
 
       </div>
 

frontend/src/views/HostsView.vue

@@ -3,9 +3,18 @@
   <div class="filters">
     <label>
       Поиск (hostname / display name)
-      <input v-model="search" type="search" placeholder="UNMS Kalina" @keyup.enter="loadHosts" />
+      <input v-model="search" type="search" placeholder="UNMS Kalina" @keyup.enter="applyFilters" />
     </label>
-    <button type="button" class="secondary" @click="loadHosts">Найти</button>
+    <label>
+      Статус агента
+      <select v-model="agentStatusFilter" @change="applyFilters">
+        <option value="">Все</option>
+        <option value="online">online</option>
+        <option value="stale">stale</option>
+        <option value="unknown">unknown</option>
+      </select>
+    </label>
+    <button type="button" class="secondary" @click="applyFilters">Найти</button>
   </div>
   <p v-if="error" class="error">{{ error }}</p>
   <p v-else-if="loading">Загрузка…</p>
@@ -44,7 +53,14 @@
           <td>{{ h.id }}</td>
           <td>{{ h.display_name || h.hostname }}</td>
           <td>{{ h.hostname }}</td>
-          <td>{{ h.product_version || "—" }}</td>
+          <td>
+            <span
+              :class="{ 'agent-version-outdated': isVersionOutdated(h) }"
+              :title="versionTitle(h)"
+            >
+              {{ h.product_version || "—" }}
+            </span>
+          </td>
           <td>{{ h.os_family }}</td>
           <td>{{ h.ipv4 || "—" }}</td>
           <td :class="'agent-' + h.agent_status">{{ agentLabel(h.agent_status) }}</td>
@@ -80,8 +96,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useSacLiveEventStream } from "../composables/useSacLiveEventStream";
 import {
   apiFetch,
@@ -91,13 +107,16 @@ import {
   type HostSummary,
 } from "../api";
 import { patchHostSummaryFromDetail } from "../utils/hostsLiveUpdate";
+import { isAgentVersionOutdated } from "../utils/agentVersion";
 
 const router = useRouter();
+const route = useRoute();
 
 const data = ref<HostListResponse | null>(null);
 const loading = ref(false);
 const error = ref("");
 const search = ref("");
+const agentStatusFilter = ref("");
 type SortKey =
   | "id"
   | "display_name"
@@ -168,6 +187,19 @@ function agentLabel(status: string) {
   return "unknown";
 }
 
+function isVersionOutdated(h: HostSummary): boolean {
+  const latest = data.value?.latest_agent_versions?.[h.product];
+  return isAgentVersionOutdated(h.product_version, latest);
+}
+
+function versionTitle(h: HostSummary): string {
+  const latest = data.value?.latest_agent_versions?.[h.product];
+  if (!isVersionOutdated(h)) return "";
+  return latest
+    ? `Устарела относительно последней для ${h.product}: ${latest}`
+    : "Устаревшая версия агента";
+}
+
 function openHost(id: number) {
   router.push(`/hosts/${id}`);
 }
@@ -258,6 +290,7 @@ async function loadHosts() {
     const q = search.value.trim();
     const params = new URLSearchParams({ page: "1", page_size: "100" });
     if (q) params.set("hostname", q);
+    if (agentStatusFilter.value) params.set("agent_status", agentStatusFilter.value);
     data.value = await apiFetch<HostListResponse>(`/api/v1/hosts?${params}`);
   } catch (e) {
     error.value = e instanceof Error ? e.message : "Ошибка";
@@ -266,6 +299,25 @@ async function loadHosts() {
   }
 }
 
+function buildHostsQuery(): Record<string, string> {
+  const q: Record<string, string> = {};
+  if (search.value.trim()) q.hostname = search.value.trim();
+  if (agentStatusFilter.value) q.agent_status = agentStatusFilter.value;
+  return q;
+}
+
+function applyFilters() {
+  void router.replace({ path: "/hosts", query: buildHostsQuery() });
+  void loadHosts();
+}
+
+function syncFromRoute() {
+  const hostname = route.query.hostname;
+  if (typeof hostname === "string") search.value = hostname;
+  const status = route.query.agent_status;
+  agentStatusFilter.value = typeof status === "string" ? status : "";
+}
+
 async function patchHostRowFromLatestEvent() {
   if (!data.value?.items.length || patchingHostRow) return;
   patchingHostRow = true;
@@ -315,6 +367,15 @@ async function confirmDelete(h: HostSummary) {
 }
 
 onMounted(() => {
+  syncFromRoute();
   loadHosts();
 });
+
+watch(
+  () => [route.query.hostname, route.query.agent_status] as const,
+  () => {
+    syncFromRoute();
+    loadHosts();
+  },
+);
 </script>

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>