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,40 @@
+<script setup>
+import Modal from '@/components/ui/Modal.vue'
+import Button from '@/components/ui/Button.vue'
+import Badge from '@/components/ui/Badge.vue'
+import { alertTypeLabel } from '@/api/normalize'
+
+defineProps({
+  open: { type: Boolean, default: false },
+  alert: { type: Object, default: null },
+})
+
+const emit = defineEmits(['confirm', 'close'])
+
+function severityVariant(severity) {
+  return severity === 'Critical' ? 'critical' : 'warning'
+}
+</script>
+
+<template>
+  <Modal :open="open" title="Acknowledge Alert" @close="emit('close')">
+    <div v-if="alert" class="space-y-4">
+      <div class="flex flex-wrap items-center gap-2">
+        <Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
+        <span class="text-sm font-medium text-gray-900 dark:text-white">
+          {{ alertTypeLabel(alert.alertType) }}
+        </span>
+      </div>
+      <p v-if="alert.details" class="text-sm text-gray-600 dark:text-gray-400">
+        {{ alert.details }}
+      </p>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Confirm that you have reviewed this alert.
+      </p>
+      <div class="flex justify-end gap-2">
+        <Button variant="ghost" @click="emit('close')">Cancel</Button>
+        <Button variant="primary" @click="emit('confirm')">Acknowledge</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
@@ -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>
@@ -0,0 +1,27 @@
+<script setup>
+const activeFilter = defineModel({ type: String, default: 'Open' })
+
+const tabs = [
+  { label: 'Open', value: 'Open', badgeVariant: 'critical' },
+  { label: 'Acknowledged', value: 'Acknowledged', badgeVariant: 'warning' },
+  { label: 'Resolved', value: 'Resolved', badgeVariant: 'success' },
+  { label: 'Escalated', value: 'Escalated', badgeVariant: 'info' },
+]
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
+    <button
+      v-for="tab in tabs"
+      :key="tab.value"
+      type="button"
+      class="border-b-2 px-4 py-2 text-sm font-medium transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      :class="activeFilter === tab.value
+        ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+      @click="activeFilter = tab.value"
+    >
+      {{ tab.label }}
+    </button>
+  </div>
+</template>