feat: live последние события на Dashboard; retention, health, runbook
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
PTah
@@ -1,219 +1,280 @@
|
||||
<template>
|
||||
<h1>Dashboard</h1>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
<template v-else-if="data">
|
||||
<div class="dashboard-cards">
|
||||
<div class="dash-card">
|
||||
<div class="dash-value">{{ data.events_last_24h }}</div>
|
||||
<div class="dash-label">Событий за 24 ч</div>
|
||||
<RouterLink to="/events">Все события →</RouterLink>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="dash-value">{{ data.problems_open }}</div>
|
||||
<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>
|
||||
<RouterLink to="/hosts">Хосты →</RouterLink>
|
||||
</div>
|
||||
<div class="dash-card" :class="{ 'dash-warn': data.hosts_stale > 0 }">
|
||||
<div class="dash-value">{{ data.hosts_stale }}</div>
|
||||
<div class="dash-label">Устаревший heartbeat</div>
|
||||
<RouterLink to="/hosts">Хосты →</RouterLink>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="dash-value">{{ data.heartbeats_24h }}</div>
|
||||
<div class="dash-label">Heartbeat за 24 ч</div>
|
||||
<RouterLink :to="{ path: '/events', query: { type: 'agent.heartbeat' } }">События →</RouterLink>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="dash-value">{{ data.daily_reports_24h }}</div>
|
||||
<div class="dash-label">Отчёты за 24 ч</div>
|
||||
<RouterLink to="/reports">Отчёты →</RouterLink>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<h2>Последние события</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Время</th>
|
||||
<th>Хост</th>
|
||||
<th>Severity</th>
|
||||
<th>Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="e in data.recent_events" :key="e.id">
|
||||
<td>
|
||||
<RouterLink :to="`/events/${e.id}`">{{ e.id }}</RouterLink>
|
||||
</td>
|
||||
<td>{{ formatDt(e.occurred_at) }}</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>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="filters" style="margin-top: 1rem">
|
||||
<button type="button" class="secondary" @click="load">Обновить</button>
|
||||
<span v-if="live" class="live-badge">live</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { apiFetch, getToken, type DashboardSummary } from "../api";
|
||||
|
||||
const data = ref<DashboardSummary | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const live = ref(false);
|
||||
let eventSource: EventSource | null = null;
|
||||
|
||||
function formatDt(iso: string) {
|
||||
return new Date(iso).toLocaleString("ru-RU");
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
data.value = await apiFetch<DashboardSummary>("/api/v1/dashboards/summary");
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function connectLive() {
|
||||
const token = getToken();
|
||||
if (!token) return;
|
||||
eventSource?.close();
|
||||
const url = `/api/v1/stream/events?token=${encodeURIComponent(token)}`;
|
||||
eventSource = new EventSource(url);
|
||||
eventSource.onopen = () => {
|
||||
live.value = true;
|
||||
};
|
||||
eventSource.onmessage = (ev) => {
|
||||
try {
|
||||
const msg = JSON.parse(ev.data) as {
|
||||
type?: string;
|
||||
events_last_24h?: number;
|
||||
problems_open?: number;
|
||||
hosts_stale?: number;
|
||||
heartbeats_24h?: number;
|
||||
daily_reports_24h?: number;
|
||||
};
|
||||
if (msg.type !== "dashboard" || !data.value) return;
|
||||
if (typeof msg.events_last_24h === "number") {
|
||||
data.value.events_last_24h = msg.events_last_24h;
|
||||
}
|
||||
if (typeof msg.problems_open === "number") {
|
||||
data.value.problems_open = msg.problems_open;
|
||||
}
|
||||
if (typeof msg.hosts_stale === "number") {
|
||||
data.value.hosts_stale = msg.hosts_stale;
|
||||
}
|
||||
if (typeof msg.heartbeats_24h === "number") {
|
||||
data.value.heartbeats_24h = msg.heartbeats_24h;
|
||||
}
|
||||
if (typeof msg.daily_reports_24h === "number") {
|
||||
data.value.daily_reports_24h = msg.daily_reports_24h;
|
||||
}
|
||||
} catch {
|
||||
/* ignore malformed SSE */
|
||||
}
|
||||
};
|
||||
eventSource.onerror = () => {
|
||||
live.value = false;
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load().then(() => connectLive());
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
|
||||
<template v-else-if="data">
|
||||
|
||||
<div class="dashboard-cards">
|
||||
|
||||
<div class="dash-card">
|
||||
|
||||
<div class="dash-value">{{ data.events_last_24h }}</div>
|
||||
|
||||
<div class="dash-label">Событий за 24 ч</div>
|
||||
|
||||
<RouterLink to="/events">Все события →</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dash-card">
|
||||
|
||||
<div class="dash-value">{{ data.problems_open }}</div>
|
||||
|
||||
<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>
|
||||
|
||||
<RouterLink to="/hosts">Хосты →</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dash-card" :class="{ 'dash-warn': data.hosts_stale > 0 }">
|
||||
|
||||
<div class="dash-value">{{ data.hosts_stale }}</div>
|
||||
|
||||
<div class="dash-label">Устаревший heartbeat</div>
|
||||
|
||||
<RouterLink to="/hosts">Хосты →</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dash-card">
|
||||
|
||||
<div class="dash-value">{{ data.heartbeats_24h }}</div>
|
||||
|
||||
<div class="dash-label">Heartbeat за 24 ч</div>
|
||||
|
||||
<RouterLink :to="{ path: '/events', query: { type: 'agent.heartbeat' } }">События →</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dash-card">
|
||||
|
||||
<div class="dash-value">{{ data.daily_reports_24h }}</div>
|
||||
|
||||
<div class="dash-label">Отчёты за 24 ч</div>
|
||||
|
||||
<RouterLink to="/reports">Отчёты →</RouterLink>
|
||||
|
||||
</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">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<h2>Последние события</h2>
|
||||
|
||||
<p class="muted dash-recent-hint">
|
||||
|
||||
Обновляется при поступлении событий (live, ~5 с). Время — момент приёма SAC.
|
||||
|
||||
</p>
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>ID</th>
|
||||
|
||||
<th>Получено</th>
|
||||
|
||||
<th>Хост</th>
|
||||
|
||||
<th>Severity</th>
|
||||
|
||||
<th>Title</th>
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr v-for="e in data.recent_events" :key="e.id">
|
||||
|
||||
<td>
|
||||
|
||||
<RouterLink :to="`/events/${e.id}`">{{ e.id }}</RouterLink>
|
||||
|
||||
</td>
|
||||
|
||||
<td>{{ formatDt(e.received_at) }}</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>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<div class="filters" style="margin-top: 1rem">
|
||||
|
||||
<button type="button" class="secondary" @click="load">Обновить всё</button>
|
||||
|
||||
<span v-if="live" class="live-badge">live</span>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user