feat(platform): add customer alert command center
This commit is contained in:
@@ -764,6 +764,55 @@ function alertRecoveryReceiptText({
|
|||||||
].join('\n');
|
].join('\n');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function alertNotificationCommandText({
|
||||||
|
summary,
|
||||||
|
priorityRows,
|
||||||
|
primaryPolicy,
|
||||||
|
filters,
|
||||||
|
platformRelease
|
||||||
|
}: {
|
||||||
|
summary: QualitySummary;
|
||||||
|
priorityRows: PriorityIssueRow[];
|
||||||
|
primaryPolicy?: QualityNotificationPolicy;
|
||||||
|
filters: Record<string, string>;
|
||||||
|
platformRelease?: string;
|
||||||
|
}) {
|
||||||
|
const release = platformRelease?.trim();
|
||||||
|
const p0Rows = priorityRows.filter((row) => row.priority === 'P0');
|
||||||
|
const p1Rows = priorityRows.filter((row) => row.priority === 'P1');
|
||||||
|
const focusIssue = priorityRows[0];
|
||||||
|
const focusLookup = focusIssue ? qualityIssueVehicleLookup(focusIssue) : undefined;
|
||||||
|
const filterLines = [
|
||||||
|
filters.keyword ? `关键词=${filters.keyword}` : '',
|
||||||
|
filters.protocol ? `数据来源=${qualityProtocolLabel(filters.protocol)}` : '',
|
||||||
|
filters.issueType ? `问题类型=${qualityIssueLabel(filters.issueType)}` : ''
|
||||||
|
].filter(Boolean);
|
||||||
|
const primaryPolicyLine = primaryPolicy
|
||||||
|
? [primaryPolicy.name, primaryPolicy.target, primaryPolicy.channel, formatEscalationMinutes(primaryPolicy.escalationMinutes)].filter(Boolean).join(' / ')
|
||||||
|
: '-';
|
||||||
|
const evidenceKeyword = focusLookup?.key || filters.keyword || '';
|
||||||
|
const evidenceProtocol = focusIssue?.protocol || filters.protocol;
|
||||||
|
return [
|
||||||
|
'【客户告警通知总控包】',
|
||||||
|
...(release ? [`运行版本:${release}`] : []),
|
||||||
|
`当前筛选:${filterLines.length > 0 ? filterLines.join(';') : '全部告警'}`,
|
||||||
|
'服务链路:影响车辆 -> 通知对象 -> SLA升级 -> 证据闭环 -> 恢复验收',
|
||||||
|
`影响范围:${Number(summary.issueVehicleCount ?? 0).toLocaleString()} 辆 / ${Number(summary.issueRecordCount ?? 0).toLocaleString()} 条`,
|
||||||
|
`优先级:P0 ${p0Rows.length.toLocaleString()} / P1 ${p1Rows.length.toLocaleString()}`,
|
||||||
|
`主通知策略:${primaryPolicyLine}`,
|
||||||
|
`恢复验收:${primaryPolicy?.acceptanceCriteria || '车辆服务状态恢复,实时、轨迹、历史和里程证据可查询。'}`,
|
||||||
|
`焦点车辆:${focusIssue ? focusIssue.vehicleLabel : '-'}`,
|
||||||
|
focusIssue ? `焦点问题:${qualityProtocolLabel(focusIssue.protocol)} / ${qualityIssueLabel(focusIssue.issueType)} / ${focusIssue.actionLabel}` : '',
|
||||||
|
'',
|
||||||
|
`告警事件:${qualityShareURL()}`,
|
||||||
|
`通知闭环:${appURL(buildAppHash({ page: 'notification-rules' }))}`,
|
||||||
|
`实时监控:${appURL(buildAppHash({ page: 'realtime', keyword: evidenceKeyword, protocol: evidenceProtocol }))}`,
|
||||||
|
`轨迹证据:${appURL(buildAppHash({ page: 'history', keyword: evidenceKeyword, protocol: evidenceProtocol }))}`,
|
||||||
|
`原始记录:${appURL(buildAppHash({ page: 'history-query', keyword: evidenceKeyword, protocol: evidenceProtocol, filters: { tab: 'raw', includeFields: 'true' } }))}`,
|
||||||
|
`车辆服务:${appURL(buildAppHash({ page: 'detail', keyword: evidenceKeyword, protocol: evidenceProtocol }))}`
|
||||||
|
].filter(Boolean).join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
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) {
|
||||||
@@ -1072,6 +1121,53 @@ export function Quality({
|
|||||||
platformRelease: health?.runtime?.platformRelease
|
platformRelease: health?.runtime?.platformRelease
|
||||||
}), '客户告警恢复验收回执');
|
}), '客户告警恢复验收回执');
|
||||||
};
|
};
|
||||||
|
const copyAlertNotificationCommand = () => {
|
||||||
|
copyText(alertNotificationCommandText({
|
||||||
|
summary: notificationPlan?.summary ?? summary,
|
||||||
|
priorityRows,
|
||||||
|
primaryPolicy,
|
||||||
|
filters,
|
||||||
|
platformRelease: health?.runtime?.platformRelease
|
||||||
|
}), '客户告警通知总控包');
|
||||||
|
};
|
||||||
|
const alertNotificationCommandItems = [
|
||||||
|
{
|
||||||
|
label: '影响车辆',
|
||||||
|
value: `${issueVehicleCount.toLocaleString()} 辆`,
|
||||||
|
detail: `${issueRecordCount.toLocaleString()} 条告警记录,先判断实时、轨迹、里程和历史导出是否受影响。`,
|
||||||
|
color: issueVehicleCount > 0 ? 'orange' as const : 'green' as const,
|
||||||
|
action: '复制影响',
|
||||||
|
disabled: false,
|
||||||
|
onClick: () => copyBusinessImpact()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '通知对象',
|
||||||
|
value: primaryPolicy?.target || '责任人待配置',
|
||||||
|
detail: primaryPolicy ? `${primaryPolicy.name} / ${primaryPolicy.channel}` : '需要配置客户通知对象、渠道和升级策略。',
|
||||||
|
color: primaryPolicy ? 'blue' as const : 'orange' as const,
|
||||||
|
action: '复制通知',
|
||||||
|
disabled: priorityRows.length === 0,
|
||||||
|
onClick: () => copyPriorityDigest()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'SLA升级',
|
||||||
|
value: formatEscalationMinutes(primaryPolicy?.escalationMinutes) || '未配置',
|
||||||
|
detail: primaryPolicy?.condition || '按 P0/P1 告警规则决定是否升级。',
|
||||||
|
color: primaryPolicy ? customerDecision.color : 'orange' as const,
|
||||||
|
action: '通知闭环',
|
||||||
|
disabled: false,
|
||||||
|
onClick: () => onOpenNotificationRules?.()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '恢复验收',
|
||||||
|
value: primaryPolicy?.acceptanceCriteria ? '有标准' : '待补充',
|
||||||
|
detail: primaryPolicy?.acceptanceCriteria || '车辆服务状态恢复,实时、轨迹、历史和里程证据可查询。',
|
||||||
|
color: primaryPolicy?.acceptanceCriteria ? 'green' as const : 'orange' as const,
|
||||||
|
action: '复制回执',
|
||||||
|
disabled: false,
|
||||||
|
onClick: () => copyAlertRecoveryReceipt()
|
||||||
|
}
|
||||||
|
];
|
||||||
const alertRecoveryAcceptanceItems = [
|
const alertRecoveryAcceptanceItems = [
|
||||||
{
|
{
|
||||||
label: '实时恢复',
|
label: '实时恢复',
|
||||||
@@ -1268,6 +1364,41 @@ export function Quality({
|
|||||||
return (
|
return (
|
||||||
<div className="vp-page">
|
<div className="vp-page">
|
||||||
<PageHeader title="告警事件" description="围绕车辆服务沉淀断链、VIN 缺失、字段缺失和链路健康事件,并形成通知闭环" />
|
<PageHeader title="告警事件" description="围绕车辆服务沉淀断链、VIN 缺失、字段缺失和链路健康事件,并形成通知闭环" />
|
||||||
|
<section className="vp-alert-action-conclusion" aria-label="客户告警通知总控">
|
||||||
|
<div className="vp-alert-action-conclusion-summary">
|
||||||
|
<Space wrap>
|
||||||
|
<Tag color={customerDecision.color}>客户告警通知总控</Tag>
|
||||||
|
<Tag color={priorityP0Count > 0 ? 'red' : priorityP1Count > 0 ? 'orange' : 'green'}>
|
||||||
|
P0 {priorityP0Count.toLocaleString()} / P1 {priorityP1Count.toLocaleString()}
|
||||||
|
</Tag>
|
||||||
|
<Tag color={primaryPolicy ? 'blue' : 'orange'}>{primaryPolicy?.target || '责任人待配置'}</Tag>
|
||||||
|
</Space>
|
||||||
|
<strong>把影响车辆、通知对象、SLA升级、证据闭环和恢复验收收敛成客户可执行的告警服务链路。</strong>
|
||||||
|
<Space wrap>
|
||||||
|
<Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyAlertNotificationCommand}>
|
||||||
|
复制告警总控包
|
||||||
|
</Button>
|
||||||
|
{onOpenNotificationRules ? <Button size="small" onClick={onOpenNotificationRules}>通知闭环</Button> : null}
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
<div className="vp-alert-action-conclusion-grid">
|
||||||
|
{alertNotificationCommandItems.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.label}
|
||||||
|
type="button"
|
||||||
|
className="vp-alert-action-conclusion-item"
|
||||||
|
disabled={item.disabled}
|
||||||
|
onClick={item.onClick}
|
||||||
|
aria-label={`客户告警通知总控 ${item.label} ${item.value} ${item.action}`}
|
||||||
|
>
|
||||||
|
<Tag color={item.color}>{item.label}</Tag>
|
||||||
|
<strong>{item.value}</strong>
|
||||||
|
<span>{item.detail}</span>
|
||||||
|
<em>{item.action}</em>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section className="vp-alert-action-conclusion" aria-label="告警处置结论栏">
|
<section className="vp-alert-action-conclusion" aria-label="告警处置结论栏">
|
||||||
<div className="vp-alert-action-conclusion-summary">
|
<div className="vp-alert-action-conclusion-summary">
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
|
|||||||
@@ -12493,6 +12493,11 @@ test('loads realtime vehicles from shareable source filter hash', async () => {
|
|||||||
|
|
||||||
test('opens realtime status from quality issue row with source evidence', async () => {
|
test('opens realtime status from quality issue row with source evidence', async () => {
|
||||||
window.history.replaceState(null, '', '/#/alert-events');
|
window.history.replaceState(null, '', '/#/alert-events');
|
||||||
|
const writeText = vi.fn(() => Promise.resolve());
|
||||||
|
Object.defineProperty(navigator, 'clipboard', {
|
||||||
|
configurable: true,
|
||||||
|
value: { writeText }
|
||||||
|
});
|
||||||
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
const path = String(input);
|
const path = String(input);
|
||||||
if (path.includes('/api/ops/health')) {
|
if (path.includes('/api/ops/health')) {
|
||||||
@@ -12570,6 +12575,13 @@ test('opens realtime status from quality issue row with source evidence', async
|
|||||||
render(<App />);
|
render(<App />);
|
||||||
|
|
||||||
expect(await screen.findByText('13307795425')).toBeInTheDocument();
|
expect(await screen.findByText('13307795425')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('客户告警通知总控')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('把影响车辆、通知对象、SLA升级、证据闭环和恢复验收收敛成客户可执行的告警服务链路。')).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '客户告警通知总控 影响车辆 1 辆 复制影响' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '客户告警通知总控 通知对象 接入运维 + 业务责任人 复制通知' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '客户告警通知总控 SLA升级 30 分钟升级 通知闭环' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '客户告警通知总控 恢复验收 有标准 复制回执' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: /复制告警总控包/ })).toBeInTheDocument();
|
||||||
expect(screen.getByText('告警处置结论栏')).toBeInTheDocument();
|
expect(screen.getByText('告警处置结论栏')).toBeInTheDocument();
|
||||||
expect(screen.getByText('先判断客户受影响车辆,再确认通知、SLA、证据和恢复回执,避免告警停留在技术表格里。')).toBeInTheDocument();
|
expect(screen.getByText('先判断客户受影响车辆,再确认通知、SLA、证据和恢复回执,避免告警停留在技术表格里。')).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '告警处置结论栏 影响范围 1 辆 复制影响' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '告警处置结论栏 影响范围 1 辆 复制影响' })).toBeInTheDocument();
|
||||||
@@ -12584,6 +12596,16 @@ test('opens realtime status from quality issue row with source evidence', async
|
|||||||
expect(screen.getByRole('button', { name: '客户告警服务台 焦点车辆 粤AG18312 / 13307795425 车辆服务' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '客户告警服务台 焦点车辆 粤AG18312 / 13307795425 车辆服务' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '客户告警服务台 证据闭环 可复核 复制交接' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '客户告警服务台 证据闭环 可复核 复制交接' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '客户告警服务台 恢复验收 有标准 复制回执' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '客户告警服务台 恢复验收 有标准 复制回执' })).toBeInTheDocument();
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /复制告警总控包/ }));
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户告警通知总控包】'));
|
||||||
|
});
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('服务链路:影响车辆 -> 通知对象 -> SLA升级 -> 证据闭环 -> 恢复验收'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('影响范围:1 辆 / 1 条'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('优先级:P0 1 / P1 0'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('主通知策略:P0 实时中断 / 接入运维 + 业务责任人 / 站内告警 / 邮件 / 企业微信 / 30 分钟升级'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('焦点车辆:粤AG18312 / 13307795425'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('通知闭环:http://localhost:3000/#/notification-rules'));
|
||||||
fireEvent.click(screen.getAllByRole('button', { name: '实时状态' })[0]);
|
fireEvent.click(screen.getAllByRole('button', { name: '实时状态' })[0]);
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user