feat(platform): filter quality issues by type

2026-07-04 04:42:12 +08:00
parent 7ed5d7620b
commit b53cfbabfe
7 changed files with 164 additions and 12 deletions
--- a/vehicle-data-platform/apps/web/src/domain/qualityIssue.test.ts
+++ b/vehicle-data-platform/apps/web/src/domain/qualityIssue.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { qualityIssueLabel, qualityProtocolLabel, qualityProtocolOptions } from './qualityIssue';
+import { qualityIssueLabel, qualityIssueOptions, qualityProtocolLabel, qualityProtocolOptions } from './qualityIssue';

 describe('qualityIssueLabel', () => {
  test('maps no-source issues to a vehicle-service label', () => {
@@ -27,3 +27,10 @@ describe('qualityProtocolOptions', () => {
    ]);
  });
 });
+
+describe('qualityIssueOptions', () => {
+  test('includes issue types used by governance filters', () => {
+    expect(qualityIssueOptions.map((item) => item.value)).toContain('NO_SOURCE');
+    expect(qualityIssueOptions.map((item) => item.value)).toContain('VIN_MISSING');
+  });
+});
--- a/vehicle-data-platform/apps/web/src/domain/qualityIssue.ts
+++ b/vehicle-data-platform/apps/web/src/domain/qualityIssue.ts
@@ -19,6 +19,13 @@ export const qualityProtocolOptions = [
  { value: 'YUTONG_MQTT', label: protocolLabels.YUTONG_MQTT }
 ];

+export const qualityIssueOptions = [
+  { value: 'NO_SOURCE', label: issueLabels.NO_SOURCE },
+  { value: 'VIN_MISSING', label: issueLabels.VIN_MISSING },
+  { value: 'LINK_GAP', label: issueLabels.LINK_GAP },
+  { value: 'FIELD_MISSING', label: issueLabels.FIELD_MISSING }
+];
+
 export function qualityIssueLabel(issueType: string) {
  return issueLabels[issueType] ?? issueType;
 }
--- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { OpsHealth, QualitySummary, QualityIssueRow } from '../api/types';
 import { PageHeader } from '../components/PageHeader';
-import { qualityIssueLabel, qualityProtocolLabel, qualityProtocolOptions } from '../domain/qualityIssue';
+import { qualityIssueLabel, qualityIssueOptions, qualityProtocolLabel, qualityProtocolOptions } from '../domain/qualityIssue';
 import { qualityIssueVehicleLookup } from '../domain/vehicleLookup';

 const statusColor: Record<string, 'green' | 'orange' | 'red' | 'grey'> = {
@@ -39,6 +39,7 @@ function qualityParams(values: Record<string, string>) {
  const params = new URLSearchParams();
  if (values?.keyword) params.set('keyword', values.keyword);
  if (values?.protocol) params.set('protocol', values.protocol);
+  if (values?.issueType) params.set('issueType', values.issueType);
  return params;
 }

@@ -71,6 +72,7 @@ export function Quality({
  const [loadingHealth, setLoadingHealth] = useState(true);
  const [filters, setFilters] = useState<Record<string, string>>({});
  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
+  const primaryIssueType = summary.issueTypes[0]?.name;

  const loadIssues = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
    setLoadingIssues(true);
@@ -111,6 +113,19 @@ export function Quality({
    loadHealth();
  }, []);

+  const applyFilters = (nextFilters: Record<string, string>) => {
+    setFilters(nextFilters);
+    loadSummary(nextFilters);
+    loadIssues(nextFilters, 1, pagination.pageSize);
+  };
+
+  const drillPrimaryIssue = () => {
+    if (!primaryIssueType) {
+      return;
+    }
+    applyFilters({ ...filters, issueType: primaryIssueType });
+  };
+
  return (
    <div className="vp-page">
      <PageHeader title="质量治理" description="围绕车辆服务排查断链、VIN 缺失、字段缺失和链路健康" />
@@ -121,12 +136,27 @@ export function Quality({
          { label: '错误 / 警告', value: `${summary.errorCount}/${summary.warningCount}` },
          {
            label: '主要问题',
-            value: summary.issueTypes.length > 0 ? `${qualityIssueLabel(summary.issueTypes[0].name)} ${summary.issueTypes[0].count}` : '-'
+            value: primaryIssueType ? `${qualityIssueLabel(primaryIssueType)} ${summary.issueTypes[0].count}` : '-',
+            onClick: primaryIssueType ? drillPrimaryIssue : undefined
          }
        ].map((item) => (
          <Card key={item.label} bordered loading={loadingSummary}>
-            <div className="vp-kpi-value">{item.value}</div>
-            <div className="vp-kpi-label">{item.label}</div>
+            {item.onClick ? (
+              <button
+                className="vp-result-summary-button"
+                type="button"
+                aria-label={`${item.label} ${item.value}`}
+                onClick={item.onClick}
+              >
+                <div className="vp-kpi-value">{item.value}</div>
+                <div className="vp-kpi-label">{item.label}</div>
+              </button>
+            ) : (
+              <>
+                <div className="vp-kpi-value">{item.value}</div>
+                <div className="vp-kpi-label">{item.label}</div>
+              </>
+            )}
          </Card>
        ))}
      </div>
@@ -141,11 +171,9 @@ export function Quality({
        </Col>
      </Row>
      <Card bordered title="质量问题" style={{ marginTop: 16 }}>
-        <Form layout="horizontal" onSubmit={(values) => {
+        <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
          const nextFilters = values as Record<string, string>;
-          setFilters(nextFilters);
-          loadSummary(nextFilters);
-          loadIssues(nextFilters, 1, pagination.pageSize);
+          applyFilters(nextFilters);
        }} style={{ marginBottom: 12 }}>
          <Form.Input field="keyword" label="关键词" placeholder="VIN / 车牌 / 手机号 / 来源地址" style={{ width: 260 }} />
          <Form.Select field="protocol" label="数据来源" placeholder="全部来源" style={{ width: 160 }}>
@@ -153,12 +181,15 @@ export function Quality({
              <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
            ))}
          </Form.Select>
+          <Form.Select field="issueType" label="问题类型" placeholder="全部问题" style={{ width: 160 }}>
+            {qualityIssueOptions.map((item) => (
+              <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
+            ))}
+          </Form.Select>
          <Space>
            <Button htmlType="submit" theme="solid" type="primary">筛选</Button>
            <Button onClick={() => {
-              setFilters({});
-              loadSummary({});
-              loadIssues({}, 1, pagination.pageSize);
+              applyFilters({});
            }}>重置</Button>
          </Space>
        </Form>
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -729,6 +729,72 @@ test('renders quality issues as vehicle-service governance labels', async () =>
  expect(screen.getAllByText('车辆服务').length).toBeGreaterThanOrEqual(1);
 });

+test('drills into quality issues by issue type', async () => {
+  window.history.replaceState(null, '', '/#/quality');
+  const fetchMock = 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 } },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/quality/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            issueVehicleCount: 1,
+            issueRecordCount: 1,
+            errorCount: 0,
+            warningCount: 1,
+            protocols: [{ name: 'VEHICLE_SERVICE', count: 1 }],
+            issueTypes: [{ name: 'NO_SOURCE', count: 1 }]
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/quality/issues')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [],
+            total: 1,
+            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 />);
+
+  fireEvent.click(await screen.findByRole('button', { name: /主要问题 暂无数据来源 1/ }));
+
+  await waitFor(() => {
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/quality/issues?issueType=NO_SOURCE&limit=20&offset=0'), undefined);
+  });
+  expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/quality/summary?issueType=NO_SOURCE'), undefined);
+});
+
 test('opens vehicle detail from shareable hash', async () => {
  window.history.replaceState(null, '', '/#/detail?keyword=%E7%B2%A4AG18312');
  vi.spyOn(globalThis, 'fetch').mockResolvedValue({