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

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

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>