ila/yovision
1
0
Fork 0
Code Issues 14 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

feat: 重建 Bell 规则与预警链路 (#132)

Browse Source
This commit is contained in:
QiuSW
2026-08-29 10:01:09 +08:00
parent 689de560bb
commit b01ca1fe09
22 changed files with 1759 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Bell/ui/src/api/bell/alert.js
+9
View File
@@ -0,0 +1,9 @@
import request from '@/utils/request'
export function listAlerts(query) {
return request({ url: '/api/v1/bell/alerts', method: 'get', params: query })
}
export function getAlert(id) {
return request({ url: `/api/v1/bell/alerts/${id}`, method: 'get' })
}
Bell/ui/src/api/bell/event.js
+13
View File
@@ -0,0 +1,13 @@
import request from '@/utils/request'
export function listEvents(query) {
return request({ url: '/api/v1/bell/events', method: 'get', params: query })
}
export function getEvent(id) {
return request({ url: `/api/v1/bell/events/${id}`, method: 'get' })
}
export function getEventRuleResults(id) {
return request({ url: `/api/v1/bell/events/${id}/rule-results`, method: 'get' })
}
Bell/ui/src/api/bell/rule.js
+17
View File
@@ -0,0 +1,17 @@
import request from '@/utils/request'
export function listRules(query) {
return request({ url: '/api/v1/bell/rules', method: 'get', params: query })
}
export function createRule(data) {
return request({ url: '/api/v1/bell/rules', method: 'post', data })
}
export function updateRule(id, data) {
return request({ url: `/api/v1/bell/rules/${id}`, method: 'put', data })
}
export function setRuleEnabled(id, enabled) {
return request({ url: `/api/v1/bell/rules/${id}/enabled`, method: 'put', data: { enabled }})
}
Bell/ui/src/views/bell/alerts/index.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<BasicLayout>
<template #wrapper>
<el-card class="box-card">
<template #header><div class="page-heading"><h2>预警管理</h2><p>查看待处理预警及其关联事件；开始处理和完成操作将在下一阶段提供。</p></div></template>
<el-form ref="queryForm" :model="query" :inline="true">
<el-form-item label="状态" prop="status"><el-select v-model="query.status" clearable placeholder="全部状态" style="width:130px"><el-option label="待处理" value="open" /></el-select></el-form-item>
<el-form-item label="风险" prop="severity"><el-select v-model="query.severity" clearable placeholder="全部风险" style="width:130px"><el-option v-for="item in severities" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item>
<el-form-item label="地点" prop="location"><el-input v-model="query.location" clearable placeholder="请输入地点" @keyup.enter="search" /></el-form-item>
<el-form-item><el-button type="primary" @click="search">搜索</el-button><el-button @click="reset">重置</el-button></el-form-item>
</el-form>
<el-alert v-if="error" :title="error" type="error" show-icon :closable="false" class="state-alert" />
<el-table v-loading="loading" :data="items" border row-key="id" @row-dblclick="openDetail">
<el-table-column prop="createdAt" label="创建时间" min-width="180"><template #default="scope">{{ parseTime(scope.row.createdAt) }}</template></el-table-column>
<el-table-column prop="summary" label="预警事项" min-width="200" show-overflow-tooltip />
<el-table-column prop="location" label="地点" min-width="140" show-overflow-tooltip />
<el-table-column label="风险" width="90"><template #default="scope"><el-tag :type="severityType(scope.row.severity)">{{ severityName(scope.row.severity) }}</el-tag></template></el-table-column>
<el-table-column label="状态" width="90"><template #default><el-tag type="danger">待处理</el-tag></template></el-table-column>
<el-table-column prop="eventCount" label="关联事件" width="100" />
<el-table-column label="操作" width="90"><template #default="scope"><el-button type="primary" link @click="openDetail(scope.row)">详情</el-button></template></el-table-column>
<template #empty><el-empty description="暂无预警" /></template>
</el-table>
<pagination v-show="total > 0" v-model:current-page="query.pageIndex" v-model:page-size="query.pageSize" :total="total" @pagination="load" />
</el-card>
<el-drawer v-model="drawer" title="预警详情" size="min(720px, 100%)">
<div v-loading="detailLoading">
<el-alert v-if="detailError" :title="detailError" type="error" show-icon :closable="false" class="state-alert" />
<template v-if="detail">
<el-descriptions :column="1" border>
<el-descriptions-item label="发生事项">{{ detail.alert.summary }}</el-descriptions-item>
<el-descriptions-item label="地点">{{ detail.alert.location }}</el-descriptions-item>
<el-descriptions-item label="紧急程度">{{ severityName(detail.alert.severity) }}</el-descriptions-item>
<el-descriptions-item label="状态">待处理</el-descriptions-item>
<el-descriptions-item label="命中规则">{{ detail.alert.ruleName }}</el-descriptions-item>
<el-descriptions-item label="预警编号">{{ detail.alert.id }}</el-descriptions-item>
</el-descriptions>
<h3>关联事件</h3>
<el-table :data="detail.events" border row-key="id">
<el-table-column prop="occurredAt" label="发生时间" min-width="180"><template #default="scope">{{ parseTime(scope.row.occurredAt) }}</template></el-table-column>
<el-table-column prop="eventType" label="事件类型" min-width="150" />
<el-table-column label="操作" width="80"><template #default="scope"><el-button link type="primary" @click="goEvent(scope.row.id)">查看</el-button></template></el-table-column>
</el-table>
<h3>命中说明</h3>
<el-timeline>
<el-timeline-item v-for="match in detail.matches" :key="`${match.eventId}-${match.ruleId}`" :timestamp="parseTime(match.matchedAt)" type="primary">
规则 v{{ match.ruleVersion }}：{{ match.explanation }}
</el-timeline-item>
</el-timeline>
</template>
</div>
</el-drawer>
</template>
</BasicLayout>
</template>
<script>
import { getAlert, listAlerts } from '@/api/bell/alert'
export default {
name: 'BellAlerts',
data() {
return {
loading: false, detailLoading: false, error: '', detailError: '', items: [], total: 0,
drawer: false, detail: null,
severities: [{ label: '低', value: 'low' }, { label: '中', value: 'medium' }, { label: '高', value: 'high' }, { label: '紧急', value: 'critical' }],
query: { pageIndex: 1, pageSize: 10, status: '', severity: '', location: '' }
}
},
created() { this.load().then(() => { if (this.$route.query.alertId) this.openDetail({ id: this.$route.query.alertId }) }) },
methods: {
async load() {
this.loading = true; this.error = ''
try { const response = await listAlerts(this.query); this.items = response.data.list || []; this.total = response.data.count || 0 } catch (error) { this.error = error.message || '预警加载失败' } finally { this.loading = false }
},
search() { this.query.pageIndex = 1; this.load() },
reset() { this.$refs.queryForm.resetFields(); this.search() },
async openDetail(row) {
this.drawer = true; this.detailLoading = true; this.detailError = ''; this.detail = null
try { const response = await getAlert(row.id); this.detail = response.data } catch (error) { this.detailError = error.message || '预警详情加载失败' } finally { this.detailLoading = false }
},
goEvent(id) { this.drawer = false; this.$router.push({ path: '/bell/events', query: { eventId: id }}) },
severityName(value) { return { low: '低', medium: '中', high: '高', critical: '紧急' }[value] || value },
severityType(value) { return { low: 'info', medium: 'primary', high: 'warning', critical: 'danger' }[value] || 'info' }
}
}
</script>
<style scoped>
.page-heading h2{margin:0}.page-heading p{margin:6px 0 0;color:var(--el-text-color-secondary)}.state-alert{margin-bottom:16px}h3{font-size:16px;margin:22px 0 10px}
</style>
Bell/ui/src/views/bell/events/index.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<BasicLayout>
<template #wrapper>
<el-card class="box-card">
<template #header>
<div class="page-heading">
<div><h2>事件查询</h2><p>原始事件只读保存，规则评估和预警不会改写事件。</p></div>
</div>
</template>
<el-form ref="queryForm" :model="query" :inline="true">
<el-form-item label="事件类型" prop="eventType"><el-input v-model="query.eventType" clearable placeholder="请输入事件类型" @keyup.enter="search" /></el-form-item>
<el-form-item label="地点" prop="location"><el-input v-model="query.location" clearable placeholder="请输入地点" @keyup.enter="search" /></el-form-item>
<el-form-item label="风险" prop="severity">
<el-select v-model="query.severity" clearable placeholder="全部风险" style="width: 130px">
<el-option v-for="item in severities" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item><el-button type="primary" @click="search">搜索</el-button><el-button @click="reset">重置</el-button></el-form-item>
</el-form>
<el-alert v-if="error" :title="error" type="error" show-icon :closable="false" class="state-alert" />
<el-table v-loading="loading" :data="items" border row-key="id" @row-dblclick="openDetail">
<el-table-column prop="occurredAt" label="发生时间" min-width="180"><template #default="scope">{{ parseTime(scope.row.occurredAt) }}</template></el-table-column>
<el-table-column prop="eventType" label="事件类型" min-width="160" show-overflow-tooltip />
<el-table-column prop="location" label="地点" min-width="150" show-overflow-tooltip />
<el-table-column label="风险" width="90"><template #default="scope"><el-tag :type="severityType(scope.row.severity)">{{ severityName(scope.row.severity) }}</el-tag></template></el-table-column>
<el-table-column prop="alertCount" label="关联预警" width="100" />
<el-table-column label="操作" width="90"><template #default="scope"><el-button type="primary" link @click="openDetail(scope.row)">详情</el-button></template></el-table-column>
<template #empty><el-empty description="暂无事件" /></template>
</el-table>
<pagination v-show="total > 0" v-model:current-page="query.pageIndex" v-model:page-size="query.pageSize" :total="total" @pagination="load" />
</el-card>
<el-drawer v-model="drawer" title="事件详情" size="min(680px, 100%)">
<div v-loading="detailLoading">
<el-alert v-if="detailError" :title="detailError" type="error" show-icon :closable="false" class="state-alert" />
<template v-if="selected">
<el-descriptions :column="1" border>
<el-descriptions-item label="发生事项">{{ selected.eventType }}</el-descriptions-item>
<el-descriptions-item label="地点">{{ selected.location }}</el-descriptions-item>
<el-descriptions-item label="发生时间">{{ parseTime(selected.occurredAt) }}</el-descriptions-item>
<el-descriptions-item label="紧急程度">{{ severityName(selected.severity) }}</el-descriptions-item>
<el-descriptions-item label="事件编号">{{ selected.id }}</el-descriptions-item>
<el-descriptions-item label="事件来源">{{ selected.producerId }}</el-descriptions-item>
<el-descriptions-item label="来源事件编号">{{ selected.sourceEventId }}</el-descriptions-item>
<el-descriptions-item label="证据引用">{{ selected.evidenceRef || '无' }}</el-descriptions-item>
</el-descriptions>
<h3>关联预警</h3>
<el-table :data="results.alerts" border row-key="id">
<el-table-column prop="summary" label="预警事项" min-width="180" />
<el-table-column prop="status" label="状态" width="90"><template #default><el-tag type="danger">待处理</el-tag></template></el-table-column>
<el-table-column label="操作" width="80"><template #default="scope"><el-button link type="primary" @click="goAlert(scope.row.id)">查看</el-button></template></el-table-column>
<template #empty><el-empty description="该事件未生成预警" /></template>
</el-table>
<h3>规则评估</h3>
<el-table :data="results.evaluations" border row-key="ruleId">
<el-table-column label="规则" min-width="160"><template #default="scope">{{ scope.row.ruleSnapshot && scope.row.ruleSnapshot.name }}</template></el-table-column>
<el-table-column prop="ruleVersion" label="版本" width="70" />
<el-table-column label="结果" width="90"><template #default="scope"><el-tag :type="scope.row.matched ? 'success' : 'info'">{{ scope.row.matched ? '命中' : '未命中' }}</el-tag></template></el-table-column>
<el-table-column prop="explanation" label="说明" min-width="180" />
<template #empty><el-empty description="接收时没有启用规则" /></template>
</el-table>
</template>
</div>
</el-drawer>
</template>
</BasicLayout>
</template>
<script>
import { getEvent, getEventRuleResults, listEvents } from '@/api/bell/event'
export default {
name: 'BellEvents',
data() {
return {
loading: false, detailLoading: false, error: '', detailError: '', items: [], total: 0,
drawer: false, selected: null, results: { alerts: [], evaluations: [] },
severities: [{ label: '低', value: 'low' }, { label: '中', value: 'medium' }, { label: '高', value: 'high' }, { label: '紧急', value: 'critical' }],
query: { pageIndex: 1, pageSize: 10, eventType: '', location: '', severity: '' }
}
},
created() { this.load().then(() => { if (this.$route.query.eventId) this.openDetail({ id: this.$route.query.eventId }) }) },
methods: {
async load() {
this.loading = true; this.error = ''
try { const response = await listEvents(this.query); this.items = response.data.list || []; this.total = response.data.count || 0 } catch (error) { this.error = error.message || '事件加载失败' } finally { this.loading = false }
},
search() { this.query.pageIndex = 1; this.load() },
reset() { this.$refs.queryForm.resetFields(); this.search() },
async openDetail(row) {
this.drawer = true; this.detailLoading = true; this.detailError = ''; this.selected = null
try { const [eventResponse, resultResponse] = await Promise.all([getEvent(row.id), getEventRuleResults(row.id)]); this.selected = eventResponse.data; this.results = resultResponse.data } catch (error) { this.detailError = error.message || '事件详情加载失败' } finally { this.detailLoading = false }
},
goAlert(id) { this.drawer = false; this.$router.push({ path: '/bell/alerts', query: { alertId: id }}) },
severityName(value) { return { low: '低', medium: '中', high: '高', critical: '紧急' }[value] || value },
severityType(value) { return { low: 'info', medium: 'primary', high: 'warning', critical: 'danger' }[value] || 'info' }
}
}
</script>
<style scoped>
.page-heading h2{margin:0}.page-heading p{margin:6px 0 0;color:var(--el-text-color-secondary)}.state-alert{margin-bottom:16px}h3{font-size:16px;margin:22px 0 10px}
</style>
Bell/ui/src/views/bell/rules/index.vue
+96
View File
@@ -0,0 +1,96 @@
<template>
<BasicLayout>
<template #wrapper>
<el-card class="box-card">
<template #header><div class="page-heading"><div><h2>规则配置</h2><p>规则修改会产生新版本，已有事件的命中快照不会改变。</p></div><el-button v-permisaction="['bell:rule:add']" type="primary" @click="openCreate">新增规则</el-button></div></template>
<el-form ref="queryForm" :model="query" :inline="true">
<el-form-item label="规则" prop="name"><el-input v-model="query.name" clearable placeholder="名称或编码" @keyup.enter="search" /></el-form-item>
<el-form-item label="状态" prop="enabled"><el-select v-model="query.enabled" clearable placeholder="全部状态" style="width:130px"><el-option label="已启用" :value="true" /><el-option label="已停用" :value="false" /></el-select></el-form-item>
<el-form-item><el-button type="primary" @click="search">搜索</el-button><el-button @click="reset">重置</el-button></el-form-item>
</el-form>
<el-alert v-if="error" :title="error" type="error" show-icon :closable="false" class="state-alert" />
<el-table v-loading="loading" :data="items" border row-key="id">
<el-table-column prop="name" label="规则名称" min-width="170" />
<el-table-column prop="code" label="规则编码" min-width="150" />
<el-table-column label="事件类型" min-width="150"><template #default="scope">{{ scope.row.eventType || '全部' }}</template></el-table-column>
<el-table-column label="最低风险" width="100"><template #default="scope"><el-tag :type="severityType(scope.row.minimumSeverity)">{{ severityName(scope.row.minimumSeverity) }}</el-tag></template></el-table-column>
<el-table-column label="地点包含" min-width="130"><template #default="scope">{{ scope.row.locationContains || '不限' }}</template></el-table-column>
<el-table-column prop="version" label="版本" width="70" />
<el-table-column label="状态" width="100"><template #default="scope"><el-switch v-model="scope.row.enabled" :disabled="!canEdit" inline-prompt active-text="启" inactive-text="停" @change="toggle(scope.row)" /></template></el-table-column>
<el-table-column label="操作" width="90"><template #default="scope"><el-button v-permisaction="['bell:rule:edit']" link type="primary" @click="openEdit(scope.row)">编辑</el-button></template></el-table-column>
<template #empty><el-empty description="暂无规则" /></template>
</el-table>
<pagination v-show="total > 0" v-model:current-page="query.pageIndex" v-model:page-size="query.pageSize" :total="total" @pagination="load" />
</el-card>
<el-dialog v-model="dialog" :title="editing ? '编辑规则' : '新增规则'" width="min(560px, calc(100vw - 32px))" :close-on-click-modal="false" @closed="clearForm">
<el-alert title="保存后仅影响随后接收的事件，历史命中记录保持原样。" type="info" :closable="false" class="state-alert" />
<el-form ref="ruleForm" :model="form" :rules="formRules" label-position="top">
<el-form-item label="规则编码" prop="code"><el-input v-model.trim="form.code" :disabled="editing" placeholder="如 gate-danger" /></el-form-item>
<el-form-item label="规则名称" prop="name"><el-input v-model.trim="form.name" maxlength="128" show-word-limit /></el-form-item>
<el-form-item label="事件类型"><el-input v-model.trim="form.eventType" placeholder="留空表示全部类型" maxlength="128" /></el-form-item>
<el-form-item label="最低风险" prop="minimumSeverity"><el-select v-model="form.minimumSeverity" style="width:100%"><el-option v-for="item in severities" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item>
<el-form-item label="地点包含"><el-input v-model.trim="form.locationContains" placeholder="留空表示不限地点" maxlength="128" /></el-form-item>
</el-form>
<template #footer><el-button @click="dialog=false">取消</el-button><el-button type="primary" :loading="saving" @click="save">保存</el-button></template>
</el-dialog>
</template>
</BasicLayout>
</template>
<script>
import { createRule, listRules, setRuleEnabled, updateRule } from '@/api/bell/rule'
export default {
name: 'BellRules',
data() {
return {
loading: false, saving: false, error: '', items: [], total: 0, dialog: false, editing: false, editingId: '',
severities: [{ label: '低', value: 'low' }, { label: '中', value: 'medium' }, { label: '高', value: 'high' }, { label: '紧急', value: 'critical' }],
query: { pageIndex: 1, pageSize: 10, name: '', enabled: null },
form: { code: '', name: '', eventType: '', minimumSeverity: 'high', locationContains: '' },
formRules: {
code: [{ required: true, pattern: /^[a-z0-9][a-z0-9_-]{1,127}$/, message: '请输入至少2位小写字母、数字、下划线或短横线', trigger: 'blur' }],
name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
minimumSeverity: [{ required: true, message: '请选择最低风险', trigger: 'change' }]
}
}
},
computed: {
canEdit() { const values = this.$store.getters.permisaction || []; return values.includes('*:*:*') || values.includes('bell:rule:edit') }
},
created() { this.load() },
methods: {
async load() {
this.loading = true; this.error = ''
try { const response = await listRules(this.query); this.items = response.data.list || []; this.total = response.data.count || 0 } catch (error) { this.error = error.message || '规则加载失败' } finally { this.loading = false }
},
search() { this.query.pageIndex = 1; this.load() },
reset() { this.$refs.queryForm.resetFields(); this.query.enabled = null; this.search() },
openCreate() { this.editing = false; this.editingId = ''; this.dialog = true },
openEdit(row) {
this.editing = true; this.editingId = row.id
this.form = { code: row.code, name: row.name, eventType: row.eventType || '', minimumSeverity: row.minimumSeverity, locationContains: row.locationContains || '' }
this.dialog = true
},
async save() {
try {
await this.$refs.ruleForm.validate(); this.saving = true
const payload = { ...this.form, eventType: this.form.eventType || null, locationContains: this.form.locationContains || null }
if (this.editing) await updateRule(this.editingId, payload); else await createRule(payload)
this.msgSuccess(this.editing ? '规则已更新并生成新版本' : '规则已创建'); this.dialog = false; await this.load()
} catch (error) { if (error && error.message) this.error = error.message } finally { this.saving = false }
},
async toggle(row) {
try { await setRuleEnabled(row.id, row.enabled); this.msgSuccess(row.enabled ? '规则已启用' : '规则已停用'); await this.load() } catch (error) { row.enabled = !row.enabled; this.error = error.message || '规则状态更新失败' }
},
clearForm() { this.$refs.ruleForm && this.$refs.ruleForm.clearValidate(); this.form = { code: '', name: '', eventType: '', minimumSeverity: 'high', locationContains: '' } },
severityName(value) { return { low: '低', medium: '中', high: '高', critical: '紧急' }[value] || value },
severityType(value) { return { low: 'info', medium: 'primary', high: 'warning', critical: 'danger' }[value] || 'info' }
}
}
</script>
<style scoped>
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.page-heading h2{margin:0}.page-heading p{margin:6px 0 0;color:var(--el-text-color-secondary)}.state-alert{margin-bottom:16px}
</style>