add frontend

2026-06-19 17:42:09 +08:00
parent 49973271e5
commit 5f69ce1a95
53 changed files with 6591 additions and 0 deletions
@@ -0,0 +1,74 @@
+<script setup>
+import Card from '@/components/ui/Card.vue'
+import Badge from '@/components/ui/Badge.vue'
+import Button from '@/components/ui/Button.vue'
+import { alertTypeLabel } from '@/api/normalize'
+
+defineProps({
+  alert: { type: Object, required: true },
+})
+
+const emit = defineEmits(['acknowledge', 'resolve'])
+
+function severityVariant(severity) {
+  return severity === 'Critical' ? 'critical' : 'warning'
+}
+
+function showActions(status) {
+  return status !== 'Resolved'
+}
+
+function canAcknowledge(status) {
+  return status === 'Open' || status === 'Escalated'
+}
+
+function canResolve(status) {
+  return status === 'Acknowledged'
+}
+
+function formatTime(iso) {
+  if (!iso) return ''
+  return new Date(iso).toLocaleString()
+}
+</script>
+
+<template>
+  <Card>
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div class="min-w-0 flex-1">
+        <div class="flex flex-wrap items-center gap-2">
+          <Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
+          <Badge variant="info" size="xs">{{ alert.status }}</Badge>
+        </div>
+        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
+          {{ alertTypeLabel(alert.alertType) }}
+        </h3>
+        <p v-if="alert.details" class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          {{ alert.details }}
+        </p>
+        <p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
+          {{ formatTime(alert.triggeredAt) }}
+        </p>
+      </div>
+
+      <div v-if="showActions(alert.status)" class="flex shrink-0 gap-2">
+        <Button
+          v-if="canAcknowledge(alert.status)"
+          size="sm"
+          variant="secondary"
+          @click="emit('acknowledge')"
+        >
+          Acknowledge
+        </Button>
+        <Button
+          v-if="canResolve(alert.status)"
+          size="sm"
+          variant="primary"
+          @click="emit('resolve')"
+        >
+          Resolve
+        </Button>
+      </div>
+    </div>
+  </Card>
+</template>