feat(platform): surface global alert pressure

2026-07-04 17:37:44 +08:00
parent 2d4b397acd
commit d266396c47
4 changed files with 131 additions and 16 deletions
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Toast } from '@douyinfe/semi-ui';
 import { api } from './api/client';
-import type { VehicleSourceConsistency, VehicleServiceOverview, VehicleServiceStatus } from './api/types';
+import type { QualityNotificationPlan, VehicleSourceConsistency, VehicleServiceOverview, VehicleServiceStatus } from './api/types';
 import { buildAppHash, parseAppHash } from './domain/appRoute';
 import { AppShell, type PageKey } from './layout/AppShell';
 import { Dashboard } from './pages/Dashboard';
@@ -38,6 +38,8 @@ export default function App() {
    initialRoute.page === 'quality' ? qualityFiltersFromRoute(initialRoute) : {}
  );
  const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
+  const [activeAlertRuleCount, setActiveAlertRuleCount] = useState<number | null>(null);
+  const [p0AlertRuleCount, setP0AlertRuleCount] = useState<number | null>(null);
  const [platformRelease, setPlatformRelease] = useState('');
  const [currentVehicleStatus, setCurrentVehicleStatus] = useState<VehicleServiceStatus | undefined>();
  const [currentVehicleLabel, setCurrentVehicleLabel] = useState('');
@@ -62,11 +64,29 @@ export default function App() {
    return { resolved, nextKey, overview };
  }, []);

+  const applyNotificationPlanSummary = (plan?: QualityNotificationPlan | null) => {
+    if (!plan) {
+      return;
+    }
+    const activeCount = Number(plan.activeRuleCount);
+    const p0Count = Number(plan.p0RuleCount);
+    if (Number.isFinite(activeCount)) {
+      setActiveAlertRuleCount(activeCount);
+    }
+    if (Number.isFinite(p0Count)) {
+      setP0AlertRuleCount(p0Count);
+    }
+  };
+
  const refreshOpsHealth = useCallback((showError = true) => {
-    return api.opsHealth()
-      .then((health) => {
+    return Promise.all([
+      api.opsHealth(),
+      api.qualityNotificationPlan(new URLSearchParams({ limit: '5' })).catch(() => null)
+    ])
+      .then(([health, notificationPlan]) => {
        setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length);
        setPlatformRelease(health.runtime?.platformRelease ?? '');
+        applyNotificationPlanSummary(notificationPlan);
        return health;
      })
      .catch((error: Error) => {
@@ -444,13 +464,13 @@ export default function App() {
    quality: <Quality onOpenVehicle={openVehicle} onOpenRealtime={openRealtime} onOpenHistory={openHistoryWithFilters} onOpenRaw={openRawWithFilters} onOpenMileage={openMileageWithFilters} onOpenNotificationRules={() => navigatePage('notification-rules')} onHealthLoaded={(health) => {
      setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length);
      setPlatformRelease(health.runtime?.platformRelease ?? '');
-    }} onFiltersChange={updateQualityFilters} initialFilters={qualityFilters} />,
+    }} onNotificationPlanLoaded={applyNotificationPlanSummary} onFiltersChange={updateQualityFilters} initialFilters={qualityFilters} />,
    'notification-rules': <NotificationRules />,
    'ops-quality': <OpsQuality />
  };

  return (
-    <AppShell activePage={activePage} linkIssueCount={linkIssueCount} platformRelease={platformRelease} currentVehicleStatus={currentVehicleStatus} currentVehicleLabel={currentVehicleLabel} currentVehicleConsistency={currentVehicleConsistency} onChange={navigatePage} onVehicleSearch={openVehicle}>
+    <AppShell activePage={activePage} linkIssueCount={linkIssueCount} activeAlertRuleCount={activeAlertRuleCount} p0AlertRuleCount={p0AlertRuleCount} platformRelease={platformRelease} currentVehicleStatus={currentVehicleStatus} currentVehicleLabel={currentVehicleLabel} currentVehicleConsistency={currentVehicleConsistency} onChange={navigatePage} onVehicleSearch={openVehicle}>
      {pages[activePage]}
    </AppShell>
  );
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
@@ -39,9 +39,35 @@ function linkHealthClassName(count: number | null) {
  return count > 0 ? 'vp-link-health-button-warning' : 'vp-link-health-button-ok';
 }

+function alertButtonLabel(linkIssueCount: number | null, activeRuleCount?: number | null, p0RuleCount?: number | null) {
+  const activeCount = Number.isFinite(Number(activeRuleCount)) ? Number(activeRuleCount) : 0;
+  const p0Count = Number.isFinite(Number(p0RuleCount)) ? Number(p0RuleCount) : 0;
+  if (p0Count > 0) {
+    return `告警事件 P0 ${p0Count.toLocaleString()} / 活跃 ${activeCount.toLocaleString()}`;
+  }
+  if (activeCount > 0) {
+    return `告警事件 ${activeCount.toLocaleString()}类规则`;
+  }
+  if (linkIssueCount == null) {
+    return '告警事件';
+  }
+  return linkIssueCount > 0 ? `告警事件 ${linkIssueCount}项关注` : '告警事件正常';
+}
+
+function alertButtonClassName(linkIssueCount: number | null, activeRuleCount?: number | null, p0RuleCount?: number | null) {
+  const activeCount = Number.isFinite(Number(activeRuleCount)) ? Number(activeRuleCount) : 0;
+  const p0Count = Number.isFinite(Number(p0RuleCount)) ? Number(p0RuleCount) : 0;
+  if (p0Count > 0 || activeCount > 0 || (linkIssueCount ?? 0) > 0) {
+    return 'vp-link-health-button-warning';
+  }
+  return linkHealthClassName(linkIssueCount);
+}
+
 export function AppShell({
  activePage,
  linkIssueCount,
+  activeAlertRuleCount,
+  p0AlertRuleCount,
  platformRelease,
  currentVehicleStatus,
  currentVehicleLabel,
@@ -52,6 +78,8 @@ export function AppShell({
 }: {
  activePage: PageKey;
  linkIssueCount: number | null;
+  activeAlertRuleCount?: number | null;
+  p0AlertRuleCount?: number | null;
  platformRelease?: string;
  currentVehicleStatus?: VehicleServiceStatus;
  currentVehicleLabel?: string;
@@ -63,6 +91,8 @@ export function AppShell({
  const [keyword, setKeyword] = useState('');
  const [searching, setSearching] = useState(false);
  const amapConfigured = isAMapConfigured();
+  const alertLabel = alertButtonLabel(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
+  const alertClassName = alertButtonClassName(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);

  const search = () => {
    const value = keyword.trim();
@@ -127,11 +157,11 @@ export function AppShell({
              <Button size="small" aria-label="顶部运维质量" onClick={() => onChange('ops-quality')}>运维质量</Button>
              <Button
                size="small"
-                aria-label={linkIssueCount == null ? '顶部告警事件' : linkIssueCount > 0 ? `顶部告警事件 ${linkIssueCount}项关注` : '顶部告警事件正常'}
-                className={linkHealthClassName(linkIssueCount)}
+                aria-label={`顶部${alertLabel}`}
+                className={alertClassName}
                onClick={() => onChange('quality')}
              >
-                {linkIssueCount == null ? '告警事件' : linkIssueCount > 0 ? `告警事件 ${linkIssueCount}项关注` : '告警事件正常'}
+                {alertLabel}
              </Button>
            </Space>
          </header>
--- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
@@ -497,6 +497,7 @@ export function Quality({
  onOpenMileage,
  onOpenNotificationRules,
  onHealthLoaded,
+  onNotificationPlanLoaded,
  onFiltersChange,
  initialFilters = {}
 }: {
@@ -507,6 +508,7 @@ export function Quality({
  onOpenMileage?: (filters: Record<string, string>) => void;
  onOpenNotificationRules?: () => void;
  onHealthLoaded?: (health: OpsHealth) => void;
+  onNotificationPlanLoaded?: (plan: QualityNotificationPlan) => void;
  onFiltersChange?: (filters: Record<string, string>) => void;
  initialFilters?: Record<string, string>;
 }) {
@@ -519,7 +521,13 @@ export function Quality({
  const [loadingHealth, setLoadingHealth] = useState(true);
  const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
-  const primaryIssueType = summary.issueTypes[0]?.name;
+  const summaryIssueTypes = Array.isArray(summary.issueTypes) ? summary.issueTypes : [];
+  const summaryProtocols = Array.isArray(summary.protocols) ? summary.protocols : [];
+  const issueVehicleCount = Number(summary.issueVehicleCount ?? 0);
+  const issueRecordCount = Number(summary.issueRecordCount ?? 0);
+  const errorCount = Number(summary.errorCount ?? 0);
+  const warningCount = Number(summary.warningCount ?? 0);
+  const primaryIssueType = summaryIssueTypes[0]?.name;
  const rules = normalizeAlertRules(notificationPlan?.rules) ?? alertRuleRows(summary, health);
  const policies = normalizeNotificationPolicies(notificationPlan?.policies) ?? notificationPolicies;
  const activeRuleCount = notificationPlan?.activeRuleCount ?? rules.filter((item) => item.count > 0).length;
@@ -565,6 +573,7 @@ export function Quality({
      .then((plan) => {
        if (Array.isArray(plan.rules) && Array.isArray(plan.policies) && Array.isArray(plan.priorityIssues)) {
          setNotificationPlan(plan);
+          onNotificationPlanLoaded?.(plan);
        }
      })
      .catch(() => {
@@ -662,12 +671,12 @@ export function Quality({
      <PageHeader title="告警事件" description="围绕车辆服务沉淀断链、VIN 缺失、字段缺失和链路健康事件，并形成通知闭环" />
      <div className="vp-kpi-grid">
        {[
-          { label: '问题车辆', value: summary.issueVehicleCount.toLocaleString() },
-          { label: '问题记录', value: summary.issueRecordCount.toLocaleString() },
-          { label: '错误 / 警告', value: `${summary.errorCount}/${summary.warningCount}` },
+          { label: '问题车辆', value: issueVehicleCount.toLocaleString() },
+          { label: '问题记录', value: issueRecordCount.toLocaleString() },
+          { label: '错误 / 警告', value: `${errorCount}/${warningCount}` },
          {
            label: '主要问题',
-            value: primaryIssueType ? `${qualityIssueLabel(primaryIssueType)} ${summary.issueTypes[0].count}` : '-',
+            value: primaryIssueType ? `${qualityIssueLabel(primaryIssueType)} ${summaryIssueTypes[0].count}` : '-',
            onClick: primaryIssueType ? drillPrimaryIssue : undefined
          }
        ].map((item) => (
@@ -709,7 +718,7 @@ export function Quality({
          {[
            { label: '事件触发', value: `${activeRuleCount} 类活跃`, detail: '断链、无来源、VIN 缺失、字段缺失和容量异常进入告警池。' },
            { label: '分级通知', value: `${p0RuleCount} 类 P0`, detail: '按错误、警告、关注分层推送给平台、运维和业务责任人。' },
-            { label: '处置回执', value: `${summary.issueVehicleCount.toLocaleString()} 辆车`, detail: '告警需要关联车辆服务、来源证据和处理结论，形成可追踪闭环。' }
+            { label: '处置回执', value: `${issueVehicleCount.toLocaleString()} 辆车`, detail: '告警需要关联车辆服务、来源证据和处理结论，形成可追踪闭环。' }
          ].map((item) => (
            <div key={item.label} className="vp-alert-flow-item">
              <Tag color="blue">{item.label}</Tag>
@@ -856,7 +865,7 @@ export function Quality({
      <Card bordered title="问题来源分布" loading={loadingSummary} style={{ marginTop: 16 }}>
        <Table
          pagination={false}
-          dataSource={summary.protocols}
+          dataSource={summaryProtocols}
          rowKey="name"
          columns={[
            { title: '数据来源', render: (_: unknown, row: { name: string }) => qualityProtocolLabel(row.name) },
@@ -874,7 +883,7 @@ export function Quality({
      <Card bordered title="问题类型分布" loading={loadingSummary} style={{ marginTop: 16 }}>
        <Table
          pagination={false}
-          dataSource={summary.issueTypes}
+          dataSource={summaryIssueTypes}
          rowKey="name"
          columns={[
            { title: '问题类型', render: (_: unknown, row: { name: string }) => qualityIssueLabel(row.name) },
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -98,6 +98,62 @@ test('exposes AMap operations shortcuts when map key is configured', async () =>
  expect(window.location.hash).toBe('#/quality');
 });

+test('shows global alert pressure from notification plan in topbar', async () => {
+  window.history.replaceState(null, '', '/#/dashboard');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/ops/health')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            linkHealth: [],
+            kafkaLag: 0,
+            redisOnlineKeys: 0,
+            tdengineWritable: true,
+            mysqlWritable: true,
+            runtime: { requestTimeoutMs: 5000, platformRelease: 'platform-20260704180000' }
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/quality/notification-plan')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            summary: { issueVehicleCount: 5, issueRecordCount: 8, errorCount: 2, warningCount: 6, protocols: [], issueTypes: [] },
+            rules: [],
+            policies: [],
+            priorityIssues: [],
+            activeRuleCount: 4,
+            p0RuleCount: 2
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 8, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  const alertButton = await screen.findByRole('button', { name: '顶部告警事件 P0 2 / 活跃 4' });
+  expect(alertButton).toHaveTextContent('告警事件 P0 2 / 活跃 4');
+  fireEvent.click(alertButton);
+  expect(window.location.hash).toBe('#/quality');
+});
+
 test('shows vehicle service status distribution on dashboard', async () => {
  window.history.replaceState(null, '', '/#/dashboard');
  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {