feat: reports page with formatted daily report cards

frontend/src/views/DashboardView.vue

@@ -32,7 +32,7 @@
       <div class="dash-card">
         <div class="dash-value">{{ data.daily_reports_24h }}</div>
         <div class="dash-label">Отчёты за 24 ч</div>
-        <RouterLink to="/events?type=report.daily.ssh">События →</RouterLink>
+        <RouterLink to="/reports">Отчёты →</RouterLink>
       </div>
     </div>
 

frontend/src/views/EventDetailView.vue

@@ -1,46 +1,86 @@
-<template>
-  <p><RouterLink to="/events">← События</RouterLink></p>
-  <p v-if="error" class="error">{{ error }}</p>
-  <p v-else-if="loading">Загрузка…</p>
-  <template v-else-if="event">
-    <h1>{{ event.title }}</h1>
-    <div class="card">
-      <p><strong>ID:</strong> {{ event.id }} · <strong>event_id:</strong> {{ event.event_id }}</p>
-      <p><strong>Хост:</strong> {{ event.hostname }} · <strong>Severity:</strong>
-        <span :class="'sev-' + event.severity">{{ event.severity }}</span>
-      </p>
-      <p><strong>Type:</strong> <code>{{ event.type }}</code></p>
-      <p><strong>Occurred:</strong> {{ event.occurred_at }}</p>
-      <p>{{ event.summary }}</p>
-    </div>
-    <h2>details</h2>
-    <pre>{{ JSON.stringify(event.details, null, 2) }}</pre>
-    <h2>payload</h2>
-    <pre>{{ JSON.stringify(event.payload, null, 2) }}</pre>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { apiFetch, type EventDetail } from "../api";
-
-const props = defineProps<{ id: string }>();
-const event = ref<EventDetail | null>(null);
-const loading = ref(false);
-const error = ref("");
-
-async function load() {
-  loading.value = true;
-  error.value = "";
-  try {
-    event.value = await apiFetch<EventDetail>(`/api/v1/events/${props.id}`);
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : "Не найдено";
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(load);
-watch(() => props.id, load);
-</script>
+<template>
+
+  <p>
+
+    <RouterLink v-if="fromReports" to="/reports">← Отчёты</RouterLink>
+
+    <RouterLink v-else to="/events">← События</RouterLink>
+
+  </p>
+
+  <p v-if="error" class="error">{{ error }}</p>
+
+  <p v-else-if="loading">Загрузка…</p>
+
+  <template v-else-if="event">
+
+    <h1>{{ event.title }}</h1>
+
+    <div class="card report-meta">
+
+      <p>
+
+        <strong>ID:</strong> {{ event.id }} · <strong>event_id:</strong> {{ event.event_id }}
+
+      </p>
+
+      <p>
+
+        <strong>Хост:</strong>
+
+        <RouterLink :to="{ path: '/reports', query: { hostname: event.hostname } }">
+
+          {{ event.hostname }}
+
+        </RouterLink>
+
+        · <strong>Severity:</strong>
+
+        <span :class="'sev-' + event.severity">{{ event.severity }}</span>
+
+      </p>
+
+      <p><strong>Type:</strong> <code>{{ event.type }}</code></p>
+
+      <p><strong>Occurred:</strong> {{ formatDt(event.occurred_at) }}</p>
+
+      <p v-if="!isReport"><strong>Summary:</strong> {{ event.summary }}</p>
+
+    </div>
+
+
+
+    <template v-if="isReport">
+
+      <h2>Отчёт</h2>
+
+      <p class="report-summary-line">{{ event.summary }}</p>
+
+      <ReportBodyCard :type="event.type" :summary="event.summary" :details="event.details" />
+
+    </template>
+
+
+
+    <details v-if="event.details && !isReport" class="raw-details">
+
+      <summary>details (JSON)</summary>
+
+      <pre>{{ JSON.stringify(event.details, null, 2) }}</pre>
+
+    </details>
+
+
+
+    <details v-if="isReport && event.details" class="raw-details">
+
+      <summary>details (JSON)</summary>
+
+      <pre>{{ JSON.stringify(event.details, null, 2) }}</pre>
+
+    </details>
+
+
+
+    <details class="raw-details">
+

frontend/src/views/HostsView.vue

@@ -28,7 +28,15 @@
           <td>{{ h.ipv4 || "—" }}</td>
           <td :class="'agent-' + h.agent_status">{{ agentLabel(h.agent_status) }}</td>
           <td>{{ h.last_heartbeat_at ? formatDt(h.last_heartbeat_at) : "—" }}</td>
-          <td>{{ h.last_daily_report_at ? formatDt(h.last_daily_report_at) : "—" }}</td>
+          <td>
+            <RouterLink
+              v-if="h.last_daily_report_at"
+              :to="{ path: '/reports', query: { hostname: h.hostname } }"
+            >
+              {{ formatDt(h.last_daily_report_at) }}
+            </RouterLink>
+            <span v-else>—</span>
+          </td>
           <td>{{ formatDt(h.last_seen_at) }}</td>
           <td>{{ h.event_count ?? 0 }}</td>
         </tr>

frontend/src/views/ReportsView.vue

@@ -0,0 +1,126 @@
+<template>
+  <h1>Отчёты агентов</h1>
+  <p class="report-intro">
+    Ежедневные сводки с узлов (<code>report.daily.ssh</code>, <code>report.daily.rdp</code>). Нажмите на строку,
+    чтобы открыть полный отчёт с форматированием.
+  </p>
+
+  <div class="filters">
+    <input v-model="hostname" placeholder="hostname" @keyup.enter="load(1)" />
+    <select v-model="reportType" @change="load(1)">
+      <option value="report.daily.ssh">SSH (report.daily.ssh)</option>
+      <option value="report.daily.rdp">RDP (report.daily.rdp)</option>
+    </select>
+    <button type="button" @click="load(1)">Применить</button>
+  </div>
+
+  <p v-if="error" class="error">{{ error }}</p>
+  <p v-else-if="loading">Загрузка…</p>
+  <template v-else>
+    <p>Всего: {{ data?.total ?? 0 }}</p>
+    <table class="reports-table">
+      <thead>
+        <tr>
+          <th>Время</th>
+          <th>Хост</th>
+          <th>Тип</th>
+          <th>Сводка</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="e in data?.items ?? []"
+          :key="e.id"
+          class="report-row"
+          tabindex="0"
+          @click="openReport(e.id)"
+          @keyup.enter="openReport(e.id)"
+        >
+          <td>{{ formatDt(e.occurred_at) }}</td>
+          <td>
+            <strong>{{ e.hostname }}</strong>
+          </td>
+          <td><code>{{ e.type }}</code></td>
+          <td class="report-summary-cell">{{ e.summary }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="filters" style="margin-top: 1rem">
+      <button type="button" class="secondary" :disabled="page <= 1" @click="load(page - 1)">Назад</button>
+      <span>Стр. {{ page }}</span>
+      <button
+        type="button"
+        class="secondary"
+        :disabled="!data || page * pageSize >= data.total"
+        @click="load(page + 1)"
+      >
+        Вперёд
+      </button>
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { apiFetch, type EventListResponse } from "../api";
+
+const route = useRoute();
+const router = useRouter();
+
+const data = ref<EventListResponse | null>(null);
+const loading = ref(false);
+const error = ref("");
+const page = ref(1);
+const pageSize = 30;
+const hostname = ref("");
+const reportType = ref("report.daily.ssh");
+
+function formatDt(iso: string) {
+  return new Date(iso).toLocaleString("ru-RU");
+}
+
+function openReport(id: number) {
+  router.push({ path: `/events/${id}`, query: { from: "reports" } });
+}
+
+async function load(p: number) {
+  page.value = p;
+  loading.value = true;
+  error.value = "";
+  try {
+    const params = new URLSearchParams({
+      page: String(page.value),
+      page_size: String(pageSize),
+      severity: "info",
+    });
+    params.set("type", reportType.value);
+    if (hostname.value.trim()) {
+      params.set("hostname", hostname.value.trim());
+    }
+    data.value = await apiFetch<EventListResponse>(`/api/v1/events?${params}`);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка загрузки";
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  const h = route.query.hostname;
+  if (typeof h === "string" && h) hostname.value = h;
+  const t = route.query.type;
+  if (typeof t === "string" && t) reportType.value = t;
+  load(1);
+});
+
+watch(
+  () => route.query.hostname,
+  (h) => {
+    if (typeof h === "string") {
+      hostname.value = h;
+      load(1);
+    }
+  }
+);
+</script>