feat: reports page with formatted daily report cards

2026-05-27 14:15:15 +10:00
parent 04301ab359
commit 61c9f9b673
10 changed files with 453 additions and 49 deletions
@@ -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">
+