feat: readable report and host detail layout in web UI (0.9.8)

Field grid for event/host cards, human-readable daily report labels,
and normalized plain-text report bodies.

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

frontend/src/views/EventDetailView.vue

@@ -1,131 +1,91 @@
 <template>
-
   <p>
-
     <RouterLink v-if="fromReports" :to="{ path: '/reports', query: backToReportsQuery }">← Отчёты</RouterLink>
-
     <RouterLink v-else :to="{ path: '/events', query: backToEventsQuery }">← События</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>&nbsp;
-        <RouterLink :to="{ path: '/reports', query: { hostname: event.hostname } }">
-
-          {{ event.hostname }}
-
-        </RouterLink>
-
-        · <strong>Severity:</strong>&nbsp;
-
-        <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>
-
+      <dl class="detail-fields">
+        <div class="detail-field">
+          <dt>ID</dt>
+          <dd>{{ event.id }}</dd>
+        </div>
+        <div class="detail-field detail-field-wide">
+          <dt>event_id</dt>
+          <dd><code>{{ event.event_id }}</code></dd>
+        </div>
+        <div class="detail-field">
+          <dt>Хост</dt>
+          <dd>
+            <RouterLink :to="{ path: '/reports', query: { hostname: event.hostname } }">
+              {{ event.hostname }}
+            </RouterLink>
+          </dd>
+        </div>
+        <div class="detail-field">
+          <dt>Severity</dt>
+          <dd><span :class="'sev-' + event.severity">{{ event.severity }}</span></dd>
+        </div>
+        <div class="detail-field">
+          <dt>Тип</dt>
+          <dd>
+            <template v-if="isReport">{{ reportTypeLabel(event.type) }}</template>
+            <code v-else>{{ event.type }}</code>
+          </dd>
+        </div>
+        <div class="detail-field">
+          <dt>Occurred</dt>
+          <dd>{{ formatDt(event.occurred_at) }}</dd>
+        </div>
+        <div v-if="!isReport" class="detail-field detail-field-wide">
+          <dt>Summary</dt>
+          <dd>{{ event.summary }}</dd>
+        </div>
+      </dl>
     </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">
-
       <summary>payload (JSON)</summary>
-
       <pre>{{ JSON.stringify(event.payload, null, 2) }}</pre>
-
     </details>
-
   </template>
-
 </template>
 
-
-
 <script setup lang="ts">
-
 import { computed, onMounted, ref, watch } from "vue";
-
 import { useRoute } from "vue-router";
-
 import { apiFetch, type EventDetail } from "../api";
-
 import ReportBodyCard from "../components/ReportBodyCard.vue";
-
 import { eventsBackQueryFromDetail } from "../utils/eventsListQuery";
-import { isDailyReportType } from "../utils/reportDisplay";
-
-
+import { dailyReportTypeLabel, isDailyReportType } from "../utils/reportDisplay";
 
 const props = defineProps<{ id: string }>();
-
 const route = useRoute();
 
-
-
 const event = ref<EventDetail | null>(null);
-
 const loading = ref(false);
-
 const error = ref("");
 
-
-
 const fromReports = computed(() => route.query.from === "reports");
-
 const isReport = computed(() => (event.value ? isDailyReportType(event.value.type) : false));
 
 const backToReportsQuery = computed(() => {
@@ -137,44 +97,26 @@ const backToReportsQuery = computed(() => {
 
 const backToEventsQuery = computed(() => eventsBackQueryFromDetail(route.query));
 
-
+function reportTypeLabel(type: string) {
+  return dailyReportTypeLabel(type);
+}
 
 function formatDt(iso: string) {
-
   return new Date(iso).toLocaleString("ru-RU");
-
 }
 
-
-
 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>
-
-