feat(platform): add alert notification operations workspace
This commit is contained in:
@@ -36,6 +36,72 @@ const emptySummary: QualitySummary = {
|
|||||||
issueTypes: []
|
issueTypes: []
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const alertRuleTemplates = [
|
||||||
|
{
|
||||||
|
issueType: 'NO_SOURCE',
|
||||||
|
level: 'P0',
|
||||||
|
owner: '平台接入',
|
||||||
|
trigger: '绑定车辆连续无 GB32960、JT808、MQTT 来源证据',
|
||||||
|
notify: '立即通知接入运维,30 分钟未恢复升级给业务责任人',
|
||||||
|
sla: '30 分钟确认'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
issueType: 'VIN_MISSING',
|
||||||
|
level: 'P0',
|
||||||
|
owner: '车辆档案',
|
||||||
|
trigger: '来源有数据但无法归并到 VIN',
|
||||||
|
notify: '通知档案维护人补齐车牌、手机号和 VIN 映射',
|
||||||
|
sla: '2 小时修复'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
issueType: 'LINK_GAP',
|
||||||
|
level: 'P1',
|
||||||
|
owner: '链路运维',
|
||||||
|
trigger: '车辆或平台来源上报间断、Redis 在线状态过期',
|
||||||
|
notify: '通知平台转发和网关值班人,持续异常进入日报',
|
||||||
|
sla: '1 小时恢复'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
issueType: 'FIELD_MISSING',
|
||||||
|
level: 'P1',
|
||||||
|
owner: '协议解析',
|
||||||
|
trigger: '核心字段缺失导致定位、里程或统计不可用',
|
||||||
|
notify: '通知解析负责人核对字段映射和 RAW 样本',
|
||||||
|
sla: '当日闭环'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const notificationPolicies = [
|
||||||
|
{
|
||||||
|
name: 'P0 实时中断',
|
||||||
|
target: '接入运维 + 业务责任人',
|
||||||
|
channel: '站内告警 / 邮件 / 企业微信',
|
||||||
|
condition: '无来源、VIN 缺失、存储不可写'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'P1 数据质量',
|
||||||
|
target: '协议解析 + 数据治理',
|
||||||
|
channel: '站内告警 / 每日汇总邮件',
|
||||||
|
condition: '字段缺失、链路间断、容量风险'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'P2 趋势关注',
|
||||||
|
target: '数智中心',
|
||||||
|
channel: '周报 / 趋势看板',
|
||||||
|
condition: '单源车辆、档案缺项、来源覆盖下降'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
type AlertRuleRow = {
|
||||||
|
issueType: string;
|
||||||
|
level: string;
|
||||||
|
owner: string;
|
||||||
|
trigger: string;
|
||||||
|
notify: string;
|
||||||
|
sla: string;
|
||||||
|
count: number;
|
||||||
|
};
|
||||||
|
|
||||||
function qualityParams(values: Record<string, string>) {
|
function qualityParams(values: Record<string, string>) {
|
||||||
const params = new URLSearchParams();
|
const params = new URLSearchParams();
|
||||||
if (values?.keyword) params.set('keyword', values.keyword);
|
if (values?.keyword) params.set('keyword', values.keyword);
|
||||||
@@ -84,6 +150,36 @@ function qualityActionRecommendation(row: QualityIssueRow) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function issueCount(summary: QualitySummary, issueType: string) {
|
||||||
|
return summary.issueTypes.find((item) => item.name === issueType)?.count ?? 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function alertRuleRows(summary: QualitySummary, health: OpsHealth | null): AlertRuleRow[] {
|
||||||
|
const storageWritable = health == null || (health.tdengineWritable && health.mysqlWritable);
|
||||||
|
const capacityCount = health?.capacityFindings?.length ?? 0;
|
||||||
|
const rows = alertRuleTemplates.map((item) => ({
|
||||||
|
...item,
|
||||||
|
count: issueCount(summary, item.issueType)
|
||||||
|
}));
|
||||||
|
rows.push({
|
||||||
|
issueType: 'CAPACITY_RISK',
|
||||||
|
level: storageWritable && capacityCount === 0 ? 'P2' : 'P0',
|
||||||
|
owner: '基础设施',
|
||||||
|
trigger: 'Kafka Lag、连接容量、Redis 在线 Key 或存储读写异常',
|
||||||
|
notify: storageWritable ? '容量风险进入运维日报,超过阈值升级' : '立即通知基础设施值班人处理存储不可写',
|
||||||
|
sla: storageWritable ? '当日评估' : '15 分钟恢复',
|
||||||
|
count: capacityCount + (storageWritable ? 0 : 1)
|
||||||
|
});
|
||||||
|
return rows;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ruleStatusColor(count: number, level: string): 'green' | 'orange' | 'red' | 'grey' {
|
||||||
|
if (count <= 0) return 'green';
|
||||||
|
if (level === 'P0') return 'red';
|
||||||
|
if (level === 'P1') return 'orange';
|
||||||
|
return 'grey';
|
||||||
|
}
|
||||||
|
|
||||||
async function copyText(value: string, label: string) {
|
async function copyText(value: string, label: string) {
|
||||||
const text = value.trim();
|
const text = value.trim();
|
||||||
if (!text) {
|
if (!text) {
|
||||||
@@ -122,6 +218,9 @@ export function Quality({
|
|||||||
const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
|
const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
|
||||||
const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
|
const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
|
||||||
const primaryIssueType = summary.issueTypes[0]?.name;
|
const primaryIssueType = summary.issueTypes[0]?.name;
|
||||||
|
const rules = alertRuleRows(summary, health);
|
||||||
|
const activeRuleCount = rules.filter((item) => item.count > 0).length;
|
||||||
|
const p0RuleCount = rules.filter((item) => item.count > 0 && item.level === 'P0').length;
|
||||||
|
|
||||||
const loadIssues = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
|
const loadIssues = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
|
||||||
setLoadingIssues(true);
|
setLoadingIssues(true);
|
||||||
@@ -237,17 +336,50 @@ export function Quality({
|
|||||||
<Card bordered title="告警通知闭环" style={{ marginTop: 16 }}>
|
<Card bordered title="告警通知闭环" style={{ marginTop: 16 }}>
|
||||||
<div className="vp-alert-flow">
|
<div className="vp-alert-flow">
|
||||||
{[
|
{[
|
||||||
{ label: '事件触发', detail: '断链、无来源、VIN 缺失、字段缺失和容量异常进入告警池。' },
|
{ label: '事件触发', value: `${activeRuleCount} 类活跃`, detail: '断链、无来源、VIN 缺失、字段缺失和容量异常进入告警池。' },
|
||||||
{ label: '分级通知', detail: '按错误、警告、关注分层推送给平台、运维和业务责任人。' },
|
{ label: '分级通知', value: `${p0RuleCount} 类 P0`, detail: '按错误、警告、关注分层推送给平台、运维和业务责任人。' },
|
||||||
{ label: '处置回执', detail: '告警需要关联车辆服务、来源证据和处理结论,形成可追踪闭环。' }
|
{ label: '处置回执', value: `${summary.issueVehicleCount.toLocaleString()} 辆车`, detail: '告警需要关联车辆服务、来源证据和处理结论,形成可追踪闭环。' }
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<div key={item.label} className="vp-alert-flow-item">
|
<div key={item.label} className="vp-alert-flow-item">
|
||||||
<Tag color="blue">{item.label}</Tag>
|
<Tag color="blue">{item.label}</Tag>
|
||||||
|
<div className="vp-alert-flow-value">{item.value}</div>
|
||||||
<div>{item.detail}</div>
|
<div>{item.detail}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
<div className="vp-alert-ops-grid">
|
||||||
|
<Card bordered title="告警触发规则">
|
||||||
|
<Table<AlertRuleRow>
|
||||||
|
pagination={false}
|
||||||
|
dataSource={rules}
|
||||||
|
rowKey="issueType"
|
||||||
|
columns={[
|
||||||
|
{ title: '规则', render: (_: unknown, row: AlertRuleRow) => row.issueType === 'CAPACITY_RISK' ? '容量与存储风险' : qualityIssueLabel(row.issueType) },
|
||||||
|
{ title: '级别', width: 90, render: (_: unknown, row: AlertRuleRow) => <Tag color={ruleStatusColor(row.count, row.level)}>{row.level}</Tag> },
|
||||||
|
{ title: '当前命中', width: 110, render: (_: unknown, row: AlertRuleRow) => row.count.toLocaleString() },
|
||||||
|
{ title: '触发条件', dataIndex: 'trigger' },
|
||||||
|
{ title: 'SLA', dataIndex: 'sla', width: 110 }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<Card bordered title="通知策略">
|
||||||
|
<div className="vp-notification-policy-list">
|
||||||
|
{notificationPolicies.map((item) => (
|
||||||
|
<div key={item.name} className="vp-notification-policy">
|
||||||
|
<div>
|
||||||
|
<Space>
|
||||||
|
<Tag color={item.name.startsWith('P0') ? 'red' : item.name.startsWith('P1') ? 'orange' : 'grey'}>{item.name}</Tag>
|
||||||
|
<strong>{item.target}</strong>
|
||||||
|
</Space>
|
||||||
|
<div className="vp-alert-policy-detail">{item.condition}</div>
|
||||||
|
</div>
|
||||||
|
<Tag color="blue">{item.channel}</Tag>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
{health?.capacityFindings?.length ? (
|
{health?.capacityFindings?.length ? (
|
||||||
<Card bordered title="容量检查发现" style={{ marginTop: 16 }}>
|
<Card bordered title="容量检查发现" style={{ marginTop: 16 }}>
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
|
|||||||
@@ -350,6 +350,42 @@ body {
|
|||||||
align-content: start;
|
align-content: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vp-alert-flow-value {
|
||||||
|
color: var(--vp-text);
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-alert-ops-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.6fr);
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-notification-policy-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-notification-policy {
|
||||||
|
min-height: 86px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--vp-border);
|
||||||
|
border-radius: var(--vp-radius);
|
||||||
|
background: #fbfcff;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-alert-policy-detail {
|
||||||
|
margin-top: 8px;
|
||||||
|
color: var(--vp-text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.vp-playback-layout {
|
.vp-playback-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr) 260px;
|
grid-template-columns: minmax(0, 1fr) 260px;
|
||||||
@@ -522,6 +558,7 @@ body {
|
|||||||
.vp-conclusion-grid,
|
.vp-conclusion-grid,
|
||||||
.vp-monitor-layout,
|
.vp-monitor-layout,
|
||||||
.vp-alert-flow,
|
.vp-alert-flow,
|
||||||
|
.vp-alert-ops-grid,
|
||||||
.vp-playback-layout,
|
.vp-playback-layout,
|
||||||
.vp-playback-timeline {
|
.vp-playback-timeline {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@@ -1987,6 +1987,88 @@ test('renders quality issues as vehicle-service governance labels', async () =>
|
|||||||
expect(screen.getByText('车辆已绑定但没有任何来源证据,先确认平台转发、端口和订阅。')).toBeInTheDocument();
|
expect(screen.getByText('车辆已绑定但没有任何来源证据,先确认平台转发、端口和订阅。')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('shows alert rule and notification policy workspace on quality page', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/quality');
|
||||||
|
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
const path = String(input);
|
||||||
|
if (path.includes('/api/ops/health')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
linkHealth: [{ name: 'tdengine', status: 'error', detail: 'write unavailable' }],
|
||||||
|
kafkaLag: 42,
|
||||||
|
activeConnections: 120000,
|
||||||
|
capacityFindings: ['kafka lag 42'],
|
||||||
|
redisOnlineKeys: 368,
|
||||||
|
tdengineWritable: false,
|
||||||
|
mysqlWritable: true,
|
||||||
|
runtime: { requestTimeoutMs: 5000 }
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/quality/summary')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
issueVehicleCount: 3,
|
||||||
|
issueRecordCount: 5,
|
||||||
|
errorCount: 1,
|
||||||
|
warningCount: 4,
|
||||||
|
protocols: [{ name: 'VEHICLE_SERVICE', count: 3 }],
|
||||||
|
issueTypes: [
|
||||||
|
{ name: 'NO_SOURCE', count: 2 },
|
||||||
|
{ name: 'VIN_MISSING', count: 1 },
|
||||||
|
{ name: 'FIELD_MISSING', count: 2 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/quality/issues')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
items: [],
|
||||||
|
total: 0,
|
||||||
|
limit: 20,
|
||||||
|
offset: 0
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: { items: [], total: 0, limit: 20, offset: 0 },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<App />);
|
||||||
|
|
||||||
|
expect(await screen.findByText('告警触发规则')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('4 类活跃')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('3 类 P0')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('容量与存储风险')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('15 分钟恢复')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('通知策略')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('P0 实时中断')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('接入运维 + 业务责任人')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('站内告警 / 邮件 / 企业微信')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
test('opens vehicle service from quality issue with issue source evidence', async () => {
|
test('opens vehicle service from quality issue with issue source evidence', async () => {
|
||||||
window.history.replaceState(null, '', '/#/quality');
|
window.history.replaceState(null, '', '/#/quality');
|
||||||
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user