feat: 实现 Sense 运维告警隔离 (#79)

Sense/ui/src/api/sense/ops-alert.js

@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+export function listOpsAlerts(query) {
+  return request({ url: '/api/v1/ops-alerts', method: 'get', params: query })
+}
+
+export function getOpsAlert(id) {
+  return request({ url: `/api/v1/ops-alerts/${encodeURIComponent(id)}`, method: 'get' })
+}
+
+export function evaluateOpsAlerts() {
+  return request({ url: '/api/v1/ops-alerts/evaluate', method: 'post' })
+}
+
+export function acknowledgeOpsAlert(id, data) {
+  return request({ url: `/api/v1/ops-alerts/${encodeURIComponent(id)}/acknowledge`, method: 'post', data })
+}
+
+export function recoverOpsAlert(id, data) {
+  return request({ url: `/api/v1/ops-alerts/${encodeURIComponent(id)}/recover`, method: 'post', data })
+}

Sense/ui/src/views/sense/ops-alert/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <BasicLayout>
+    <template #wrapper>
+      <el-card class="box-card">
+        <div class="page-header">
+          <div>
+            <h3>运维告警</h3>
+            <p>处理设备、媒体服务和边缘节点的运行异常。</p>
+          </div>
+          <el-button v-permisaction="['sense:ops-alert:evaluate']" :icon="Refresh" :loading="refreshing" @click="refreshSources">刷新状态</el-button>
+        </div>
+
+        <el-alert class="boundary-alert" type="info" :closable="false" show-icon title="这里只处理系统运行问题">
+          运维告警不会创建本地安全事件，也不会发送到 Bell 作为业务预警；确认告警仅表示已有人处理，不代表故障已经恢复。
+        </el-alert>
+
+        <el-row :gutter="12" class="summary-row" aria-label="告警概览">
+          <el-col :xs="24" :sm="8"><div class="summary-item"><span>活动告警</span><strong>{{ summary.active }}</strong></div></el-col>
+          <el-col :xs="24" :sm="8"><div class="summary-item"><span>待确认</span><strong class="danger-number">{{ summary.unacknowledged }}</strong></div></el-col>
+          <el-col :xs="24" :sm="8"><div class="summary-item"><span>恢复观察</span><strong class="primary-number">{{ summary.recovering }}</strong></div></el-col>
+        </el-row>
+
+        <el-form :model="query" label-width="76px" class="filter-form" @submit.prevent="search">
+          <el-form-item label="告警类型">
+            <el-select v-model="query.alertType" clearable placeholder="全部类型">
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="处理状态">
+            <el-select v-model="query.state" clearable placeholder="全部状态">
+              <el-option label="待确认" value="unacknowledged" /><el-option label="已确认" value="acknowledged" />
+              <el-option label="恢复观察" value="recovering" /><el-option label="已恢复" value="recovered" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关键词"><el-input v-model="query.keyword" clearable placeholder="设备、位置或详情" @keyup.enter="search" /></el-form-item>
+          <el-form-item class="filter-actions"><el-button type="primary" :icon="Search" native-type="submit">查询</el-button><el-button :icon="RefreshLeft" @click="reset">重置</el-button></el-form-item>
+        </el-form>
+
+        <el-table v-loading="loading" :data="alerts" border stripe empty-text="当前筛选条件下没有运维告警">
+          <el-table-column label="告警" min-width="180"><template #default="scope"><strong>{{ scope.row.title }}</strong><div class="muted">{{ alertTypeLabel(scope.row.alertType) }}</div></template></el-table-column>
+          <el-table-column label="对象" min-width="170"><template #default="scope"><strong>{{ scope.row.objectName }}</strong><div class="muted">{{ scope.row.location || scope.row.objectId }}</div></template></el-table-column>
+          <el-table-column label="状态" width="110" align="center"><template #default="scope"><el-tag :type="alertStateType(scope.row.state)" size="small">{{ alertStateLabel(scope.row.state) }}</el-tag></template></el-table-column>
+          <el-table-column label="首次 / 最近发现" min-width="190"><template #default="scope"><div>{{ formatTime(scope.row.firstSeenAt) }}</div><small>{{ formatTime(scope.row.lastSeenAt) }}</small></template></el-table-column>
+          <el-table-column prop="occurrenceCount" label="重复次数" width="92" align="center" />
+          <el-table-column label="操作" width="184" fixed="right">
+            <template #default="scope">
+              <el-button v-permisaction="['sense:ops-alert:detail']" type="primary" link @click="openDetail(scope.row.id)">详情</el-button>
+              <el-button v-if="canAcknowledge(scope.row)" v-permisaction="['sense:ops-alert:acknowledge']" type="warning" link @click="openAction(scope.row, 'acknowledge')">确认</el-button>
+              <el-button v-if="canRecover(scope.row)" v-permisaction="['sense:ops-alert:recover']" type="success" link @click="openAction(scope.row, 'recover')">恢复</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" v-model:current-page="query.pageIndex" v-model:page-size="query.pageSize" :total="total" @pagination="load" />
+        <p class="help-text">同一对象的同类故障使用唯一指纹去重；恢复后再次发生会复用历史记录并开启新的处理周期。</p>
+      </el-card>
+
+      <el-dialog v-model="detailOpen" title="运维告警详情" width="min(780px, calc(100vw - 24px))">
+        <el-descriptions v-if="selected" :column="2" border>
+          <el-descriptions-item label="告警编号">{{ selected.id }}</el-descriptions-item><el-descriptions-item label="处理状态"><el-tag :type="alertStateType(selected.state)">{{ alertStateLabel(selected.state) }}</el-tag></el-descriptions-item>
+          <el-descriptions-item label="异常对象">{{ selected.objectName }}</el-descriptions-item><el-descriptions-item label="发现次数">{{ selected.occurrenceCount }}</el-descriptions-item>
+          <el-descriptions-item label="异常详情" :span="2">{{ selected.detail }}</el-descriptions-item><el-descriptions-item label="建议处理" :span="2">{{ selected.nextAction }}</el-descriptions-item>
+        </el-descriptions>
+        <el-alert class="detail-boundary" type="warning" :closable="false" show-icon title="业务隔离边界">该记录仅用于 Sense 运维，不会生成安全事件或 Bell 业务预警。</el-alert>
+        <el-timeline v-if="transitions.length" class="timeline"><el-timeline-item v-for="item in transitions" :key="item.id" :timestamp="formatTime(item.createdAt)"><strong>{{ actionLabel(item.action) }}</strong><div class="muted">{{ item.reason }}</div></el-timeline-item></el-timeline>
+        <template #footer><el-button @click="detailOpen = false">关闭</el-button></template>
+      </el-dialog>
+
+      <el-dialog v-model="actionOpen" :title="actionMode === 'acknowledge' ? '确认运维告警' : '确认故障恢复'" width="min(520px, calc(100vw - 24px))" :close-on-click-modal="false">
+        <el-alert :type="actionMode === 'acknowledge' ? 'warning' : 'success'" :closable="false" show-icon :title="actionMode === 'acknowledge' ? '确认不代表恢复' : '仅在健康状态已稳定后关闭告警'" />
+        <el-form ref="actionFormRef" :model="actionForm" :rules="actionRules" label-position="top" class="action-form">
+          <el-form-item label="处理说明" prop="reason"><el-input v-model="actionForm.reason" type="textarea" :rows="4" maxlength="256" show-word-limit placeholder="请输入至少 6 个字符，说明处理人、措施或恢复依据" /></el-form-item>
+        </el-form>
+        <template #footer><el-button @click="actionOpen = false">取消</el-button><el-button :type="actionMode === 'acknowledge' ? 'warning' : 'success'" :loading="submitting" @click="submitAction">确认提交</el-button></template>
+      </el-dialog>
+    </template>
+  </BasicLayout>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { Refresh, RefreshLeft, Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { acknowledgeOpsAlert, evaluateOpsAlerts, getOpsAlert, listOpsAlerts, recoverOpsAlert } from '@/api/sense/ops-alert'
+import { alertStateLabel, alertStateType, alertTypeLabel, buildOpsAlertQuery, canAcknowledge, canRecover } from './opsAlertState'
+
+defineOptions({ name: 'SenseOpsAlert' })
+const loading = ref(false); const refreshing = ref(false); const submitting = ref(false); const detailOpen = ref(false); const actionOpen = ref(false)
+const alerts = ref([]); const total = ref(0); const selected = ref(null); const transitions = ref([]); const actionMode = ref('acknowledge'); const actionFormRef = ref()
+const summary = reactive({ active: 0, unacknowledged: 0, recovering: 0 })
+const query = reactive({ pageIndex: 1, pageSize: 10, alertType: '', state: '', keyword: '' })
+const actionForm = reactive({ reason: '', expectedVersion: 0 })
+const actionRules = { reason: [{ required: true, message: '请输入处理说明', trigger: 'blur' }, { min: 6, max: 256, message: '处理说明需为 6 至 256 个字符', trigger: 'blur' }] }
+const typeOptions = ['device_offline', 'authentication_failed', 'clock_drift', 'reconciliation_failed', 'media_shard_failed', 'control_tunnel_failed'].map(value => ({ value, label: alertTypeLabel(value) }))
+function unwrap(response) { return response?.data?.data ?? response?.data ?? response }
+function formatTime(value) { return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—' }
+function actionLabel(value) { return ({ detected: '发现异常', acknowledge: '人工确认', health_restored: '健康恢复', recover: '确认恢复', relapsed: '恢复失败', reopened: '再次发生' })[value] || value }
+async function load() { loading.value = true; try { const payload = unwrap(await listOpsAlerts(buildOpsAlertQuery(query))) || {}; alerts.value = payload.list || []; total.value = payload.count || 0; Object.assign(summary, payload.summary || { active: 0, unacknowledged: 0, recovering: 0 }) } catch (error) { ElMessage.error(error.message || '运维告警加载失败') } finally { loading.value = false } }
+async function refreshSources() { refreshing.value = true; try { await evaluateOpsAlerts(); ElMessage.success('状态已刷新'); await load() } catch (error) { ElMessage.error(error.message || '健康状态刷新失败') } finally { refreshing.value = false } }
+function search() { query.pageIndex = 1; load() }
+function reset() { Object.assign(query, { pageIndex: 1, alertType: '', state: '', keyword: '' }); load() }
+async function openDetail(id) { try { const payload = unwrap(await getOpsAlert(id)) || {}; selected.value = payload.alert; transitions.value = payload.transitions || []; detailOpen.value = true } catch (error) { ElMessage.error(error.message || '告警详情加载失败') } }
+function openAction(item, mode) { selected.value = item; actionMode.value = mode; actionForm.reason = ''; actionForm.expectedVersion = item.version; actionOpen.value = true }
+async function submitAction() { if (!await actionFormRef.value.validate().catch(() => false)) return; submitting.value = true; try { const payload = { expectedVersion: actionForm.expectedVersion, reason: actionForm.reason.trim() }; if (actionMode.value === 'acknowledge') await acknowledgeOpsAlert(selected.value.id, payload); else await recoverOpsAlert(selected.value.id, payload); ElMessage.success(actionMode.value === 'acknowledge' ? '告警已确认' : '告警已恢复'); actionOpen.value = false; detailOpen.value = false; await load() } catch (error) { ElMessage.warning(error.message || '状态已变化，请刷新后重试') } finally { submitting.value = false } }
+onMounted(load)
+</script>
+
+<style scoped>
+.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-header h3{margin:0 0 6px}.page-header p{margin:0;color:#909399}.boundary-alert{margin:16px 0}.summary-row{margin-bottom:20px}.summary-item{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:12px 16px;border:1px solid #ebeef5;border-radius:4px}.summary-item span{color:#606266}.summary-item strong{font-size:22px}.danger-number{color:#f56c6c}.primary-number{color:#409eff}.filter-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 12px;margin:16px 0 2px}.filter-form .el-form-item{width:230px}.filter-form .filter-actions{width:auto}.filter-form :deep(.el-select){width:100%}.muted,small,.help-text{color:#909399;font-size:12px}.help-text{margin:12px 0 0}.detail-boundary{margin:16px 0}.timeline{padding-top:8px}.action-form{margin-top:16px}@media(max-width:768px){.page-header{align-items:stretch;flex-direction:column}.filter-form .el-form-item{width:100%}.summary-item{margin-bottom:8px}}
+</style>

Sense/ui/src/views/sense/ops-alert/opsAlertState.js

@@ -0,0 +1,30 @@
+const typeLabels = {
+  device_offline: '设备离线',
+  authentication_failed: '认证失败',
+  clock_drift: '时间漂移',
+  reconciliation_failed: '状态对账失败',
+  media_shard_failed: '媒体分片异常',
+  control_tunnel_failed: '控制隧道异常'
+}
+
+const stateLabels = {
+  unacknowledged: '待确认',
+  acknowledged: '已确认',
+  recovering: '恢复观察',
+  recovered: '已恢复'
+}
+
+export function alertTypeLabel(value) { return typeLabels[value] || value || '未知类型' }
+export function alertStateLabel(value) { return stateLabels[value] || value || '未知状态' }
+export function alertStateType(value) { return ({ unacknowledged: 'danger', acknowledged: 'warning', recovering: 'primary', recovered: 'success' })[value] || 'info' }
+export function canAcknowledge(item) { return item?.state === 'unacknowledged' && item?.version > 0 }
+export function canRecover(item) { return item?.state === 'recovering' && item?.version > 0 }
+export function buildOpsAlertQuery(query) {
+  return {
+    pageIndex: Number(query.pageIndex) || 1,
+    pageSize: Number(query.pageSize) || 10,
+    alertType: String(query.alertType || '').trim(),
+    state: String(query.state || '').trim(),
+    keyword: String(query.keyword || '').trim()
+  }
+}