feat: dashboard top hosts/types, problems 24h, drill-down (d2-2)

- Extend /dashboards/summary; Events filters from query (hostname, severity)

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

frontend/src/api.ts

@@ -137,6 +137,17 @@ export async function resolveProblem(problemId: number): Promise<{ id: number; s
   return apiFetch(`/api/v1/problems/${problemId}/resolve`, { method: "POST" });
 }
 
+export interface TopHostItem {
+  host_id: number;
+  hostname: string;
+  count: number;
+}
+
+export interface TopTypeItem {
+  type: string;
+  count: number;
+}
+
 export interface DashboardSummary {
   events_last_24h: number;
   hosts_total: number;
@@ -144,6 +155,10 @@ export interface DashboardSummary {
   heartbeats_24h: number;
   daily_reports_24h: number;
   problems_open: number;
+  problems_opened_24h: number;
+  problems_resolved_24h: number;
   severity_24h: Record<string, number>;
+  top_hosts: TopHostItem[];
+  top_event_types: TopTypeItem[];
   recent_events: EventSummary[];
 }

frontend/src/style.css

@@ -147,6 +147,40 @@ pre {
   margin-bottom: 1.5rem;
 }
 
+.dashboard-panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.dash-panel {
+  background: #1a2332;
+  border: 1px solid #2a3441;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.dash-panel h2 {
+  margin-top: 0;
+  font-size: 1rem;
+}
+
+.dash-table {
+  width: 100%;
+}
+
+.dash-table td:last-child,
+.dash-table th:last-child {
+  text-align: right;
+  width: 5rem;
+}
+
+.muted {
+  color: #9aa4b2;
+  margin: 0;
+}
+
 .dash-card {
   background: #1a2332;
   border: 1px solid #2a3441;

frontend/src/views/DashboardView.vue

@@ -14,6 +14,16 @@
         <div class="dash-label">Открытых проблем</div>
         <RouterLink :to="{ path: '/problems', query: { status: 'open' } }">Проблемы →</RouterLink>
       </div>
+      <div class="dash-card">
+        <div class="dash-value">{{ data.problems_opened_24h }}</div>
+        <div class="dash-label">Новых проблем за 24 ч</div>
+        <RouterLink to="/problems">Все проблемы →</RouterLink>
+      </div>
+      <div class="dash-card">
+        <div class="dash-value">{{ data.problems_resolved_24h }}</div>
+        <div class="dash-label">Закрыто за 24 ч</div>
+        <RouterLink :to="{ path: '/problems', query: { status: 'resolved' } }">Resolved →</RouterLink>
+      </div>
       <div class="dash-card">
         <div class="dash-value">{{ data.hosts_total }}</div>
         <div class="dash-label">Хостов</div>
@@ -27,7 +37,7 @@
       <div class="dash-card">
         <div class="dash-value">{{ data.heartbeats_24h }}</div>
         <div class="dash-label">Heartbeat за 24 ч</div>
-        <RouterLink to="/events?type=agent.heartbeat">События →</RouterLink>
+        <RouterLink :to="{ path: '/events', query: { type: 'agent.heartbeat' } }">События →</RouterLink>
       </div>
       <div class="dash-card">
         <div class="dash-value">{{ data.daily_reports_24h }}</div>
@@ -36,10 +46,60 @@
       </div>
     </div>
 
+    <div class="dashboard-panels">
+      <section class="dash-panel">
+        <h2>Top хостов (24 ч)</h2>
+        <table v-if="data.top_hosts.length" class="dash-table">
+          <thead>
+            <tr>
+              <th>Хост</th>
+              <th>Событий</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="h in data.top_hosts" :key="h.host_id">
+              <td>
+                <RouterLink :to="{ path: '/events', query: { hostname: h.hostname } }">
+                  {{ h.hostname }}
+                </RouterLink>
+              </td>
+              <td>{{ h.count }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="muted">Нет событий за 24 ч</p>
+      </section>
+
+      <section class="dash-panel">
+        <h2>Top типов (24 ч)</h2>
+        <table v-if="data.top_event_types.length" class="dash-table">
+          <thead>
+            <tr>
+              <th>Type</th>
+              <th>Событий</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="t in data.top_event_types" :key="t.type">
+              <td>
+                <RouterLink :to="{ path: '/events', query: { type: t.type } }">
+                  <code>{{ t.type }}</code>
+                </RouterLink>
+              </td>
+              <td>{{ t.count }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="muted">Нет событий за 24 ч</p>
+      </section>
+    </div>
+
     <h2>Severity за 24 ч</h2>
     <ul class="severity-list">
       <li v-for="(count, sev) in data.severity_24h" :key="sev">
-        <span :class="'sev-' + sev">{{ sev }}</span>: {{ count }}
+        <RouterLink :to="{ path: '/events', query: { severity: sev } }">
+          <span :class="'sev-' + sev">{{ sev }}</span>: {{ count }}
+        </RouterLink>
       </li>
       <li v-if="!Object.keys(data.severity_24h).length">Нет событий</li>
     </ul>
@@ -61,7 +121,11 @@
             <RouterLink :to="`/events/${e.id}`">{{ e.id }}</RouterLink>
           </td>
           <td>{{ formatDt(e.occurred_at) }}</td>
-          <td>{{ e.hostname }}</td>
+          <td>
+            <RouterLink :to="{ path: '/events', query: { hostname: e.hostname } }">
+              {{ e.hostname }}
+            </RouterLink>
+          </td>
           <td :class="'sev-' + e.severity">{{ e.severity }}</td>
           <td>{{ e.title }}</td>
         </tr>

frontend/src/views/EventsView.vue

@@ -10,6 +10,7 @@
       <option>critical</option>
     </select>
     <input v-model="typeFilter" placeholder="type" @keyup.enter="load(1)" />
+    <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>
@@ -70,6 +71,7 @@ const pageSize = 50;
 const q = ref("");
 const severity = ref("");
 const typeFilter = ref("");
+const hostnameFilter = ref("");
 
 function formatDt(iso: string) {
   return new Date(iso).toLocaleString("ru-RU");
@@ -86,6 +88,7 @@ async function load(p: number) {
     });
     if (severity.value) params.set("severity", severity.value);
     if (typeFilter.value) params.set("type", typeFilter.value);
+    if (hostnameFilter.value.trim()) params.set("hostname", hostnameFilter.value.trim());
     if (q.value.trim()) params.set("q", q.value.trim());
     data.value = await apiFetch<EventListResponse>(`/api/v1/events?${params}`);
   } catch (e) {
@@ -98,6 +101,10 @@ async function load(p: number) {
 onMounted(() => {
   const t = route.query.type;
   if (typeof t === "string" && t) typeFilter.value = t;
+  const sev = route.query.severity;
+  if (typeof sev === "string" && sev) severity.value = sev;
+  const h = route.query.hostname;
+  if (typeof h === "string" && h) hostnameFilter.value = h;
   load(1);
 });
 </script>