feat(platform-web): show searched vehicle service status
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import { Toast } from '@douyinfe/semi-ui';
|
import { Toast } from '@douyinfe/semi-ui';
|
||||||
import { api } from './api/client';
|
import { api } from './api/client';
|
||||||
|
import type { VehicleServiceStatus } from './api/types';
|
||||||
import { buildAppHash, parseAppHash } from './domain/appRoute';
|
import { buildAppHash, parseAppHash } from './domain/appRoute';
|
||||||
import { AppShell, type PageKey } from './layout/AppShell';
|
import { AppShell, type PageKey } from './layout/AppShell';
|
||||||
import { Dashboard } from './pages/Dashboard';
|
import { Dashboard } from './pages/Dashboard';
|
||||||
@@ -19,6 +20,7 @@ export default function App() {
|
|||||||
const [analysisVin, setAnalysisVin] = useState(initialVehicleKey);
|
const [analysisVin, setAnalysisVin] = useState(initialVehicleKey);
|
||||||
const [activeProtocol, setActiveProtocol] = useState(initialRoute.protocol ?? '');
|
const [activeProtocol, setActiveProtocol] = useState(initialRoute.protocol ?? '');
|
||||||
const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
|
const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
|
||||||
|
const [currentVehicleStatus, setCurrentVehicleStatus] = useState<VehicleServiceStatus | undefined>();
|
||||||
|
|
||||||
const refreshOpsHealth = useCallback((showError = true) => {
|
const refreshOpsHealth = useCallback((showError = true) => {
|
||||||
return api.opsHealth()
|
return api.opsHealth()
|
||||||
@@ -91,6 +93,7 @@ export default function App() {
|
|||||||
try {
|
try {
|
||||||
const resolved = await api.vehicleResolve(new URLSearchParams({ keyword: lookupKey }));
|
const resolved = await api.vehicleResolve(new URLSearchParams({ keyword: lookupKey }));
|
||||||
const nextKey = resolved.resolved && resolved.vin ? resolved.vin : lookupKey;
|
const nextKey = resolved.resolved && resolved.vin ? resolved.vin : lookupKey;
|
||||||
|
setCurrentVehicleStatus(resolved.serviceStatus);
|
||||||
setActiveVin(nextKey);
|
setActiveVin(nextKey);
|
||||||
setActiveProtocol(nextProtocol);
|
setActiveProtocol(nextProtocol);
|
||||||
setActivePage('detail');
|
setActivePage('detail');
|
||||||
@@ -149,7 +152,7 @@ export default function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppShell activePage={activePage} linkIssueCount={linkIssueCount} onChange={navigatePage} onVehicleSearch={openVehicle}>
|
<AppShell activePage={activePage} linkIssueCount={linkIssueCount} currentVehicleStatus={currentVehicleStatus} onChange={navigatePage} onVehicleSearch={openVehicle}>
|
||||||
{pages[activePage]}
|
{pages[activePage]}
|
||||||
</AppShell>
|
</AppShell>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import {
|
|||||||
} from '@douyinfe/semi-icons';
|
} from '@douyinfe/semi-icons';
|
||||||
import type { ReactNode } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import type { VehicleServiceStatus } from '../api/types';
|
||||||
|
|
||||||
export type PageKey = 'dashboard' | 'vehicles' | 'realtime' | 'detail' | 'history' | 'mileage' | 'quality';
|
export type PageKey = 'dashboard' | 'vehicles' | 'realtime' | 'detail' | 'history' | 'mileage' | 'quality';
|
||||||
|
|
||||||
@@ -34,12 +35,14 @@ function linkHealthClassName(count: number | null) {
|
|||||||
export function AppShell({
|
export function AppShell({
|
||||||
activePage,
|
activePage,
|
||||||
linkIssueCount,
|
linkIssueCount,
|
||||||
|
currentVehicleStatus,
|
||||||
onChange,
|
onChange,
|
||||||
onVehicleSearch,
|
onVehicleSearch,
|
||||||
children
|
children
|
||||||
}: {
|
}: {
|
||||||
activePage: PageKey;
|
activePage: PageKey;
|
||||||
linkIssueCount: number | null;
|
linkIssueCount: number | null;
|
||||||
|
currentVehicleStatus?: VehicleServiceStatus;
|
||||||
onChange: (page: PageKey) => void;
|
onChange: (page: PageKey) => void;
|
||||||
onVehicleSearch: (keyword: string) => void | Promise<void>;
|
onVehicleSearch: (keyword: string) => void | Promise<void>;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@@ -86,6 +89,11 @@ export function AppShell({
|
|||||||
<Button theme="solid" type="primary" loading={searching} onClick={search}>查询车辆</Button>
|
<Button theme="solid" type="primary" loading={searching} onClick={search}>查询车辆</Button>
|
||||||
</Space>
|
</Space>
|
||||||
<Space spacing={12}>
|
<Space spacing={12}>
|
||||||
|
{currentVehicleStatus ? (
|
||||||
|
<Tag color={currentVehicleStatus.severity === 'ok' ? 'green' : currentVehicleStatus.severity === 'error' ? 'red' : 'orange'}>
|
||||||
|
当前车辆:{currentVehicleStatus.title}
|
||||||
|
</Tag>
|
||||||
|
) : null}
|
||||||
<Tag color="blue">生产环境</Tag>
|
<Tag color="blue">生产环境</Tag>
|
||||||
<Tag color="grey">多源接入 / 一个车辆服务</Tag>
|
<Tag color="grey">多源接入 / 一个车辆服务</Tag>
|
||||||
<Button size="small" className={linkHealthClassName(linkIssueCount)} onClick={() => onChange('quality')}>
|
<Button size="small" className={linkHealthClassName(linkIssueCount)} onClick={() => onChange('quality')}>
|
||||||
|
|||||||
@@ -57,6 +57,97 @@ test('shows vehicle service status distribution on dashboard', async () => {
|
|||||||
expect(screen.getByText('39')).toBeInTheDocument();
|
expect(screen.getByText('39')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('shows resolved vehicle service status after topbar search', 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 } },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/dashboard/summary')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: { onlineVehicles: 3, activeToday: 4, frameToday: 1286320, issueVehicles: 7, kafkaLag: 0, protocols: [], serviceStatuses: [], linkHealth: [] },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/vehicles/resolve')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
lookupKey: '粤AG18312',
|
||||||
|
resolved: true,
|
||||||
|
vin: 'LB9A32A24R0LS1426',
|
||||||
|
plate: '粤AG18312',
|
||||||
|
phone: '13307795425',
|
||||||
|
oem: 'G7s',
|
||||||
|
protocols: ['GB32960', 'JT808'],
|
||||||
|
online: true,
|
||||||
|
lastSeen: '2026-07-03 20:12:10',
|
||||||
|
serviceStatus: {
|
||||||
|
status: 'degraded',
|
||||||
|
severity: 'warning',
|
||||||
|
title: '部分来源离线',
|
||||||
|
detail: '1/2 个来源在线',
|
||||||
|
sourceCount: 2,
|
||||||
|
onlineSourceCount: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/vehicle-service')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
vin: 'LB9A32A24R0LS1426',
|
||||||
|
lookupKey: 'LB9A32A24R0LS1426',
|
||||||
|
lookupResolved: true,
|
||||||
|
sources: ['GB32960', 'JT808'],
|
||||||
|
sourceStatus: [],
|
||||||
|
realtime: [],
|
||||||
|
history: { items: [], total: 0, limit: 20, offset: 0 },
|
||||||
|
raw: { items: [], total: 0, limit: 10, offset: 0 },
|
||||||
|
mileage: { items: [], total: 0, limit: 20, offset: 0 },
|
||||||
|
quality: { items: [], total: 0, limit: 20, offset: 0 }
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: { items: [], total: 0, limit: 10, offset: 0 },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<App />);
|
||||||
|
|
||||||
|
fireEvent.change(screen.getByPlaceholderText('搜索 VIN / 车牌 / 手机号'), { target: { value: '粤AG18312' } });
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: '查询车辆' }));
|
||||||
|
|
||||||
|
expect(await screen.findByText('当前车辆:部分来源离线')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
test('shows row service status in dashboard vehicle previews', async () => {
|
test('shows row service status in dashboard vehicle previews', async () => {
|
||||||
window.history.replaceState(null, '', '/#/dashboard');
|
window.history.replaceState(null, '', '/#/dashboard');
|
||||||
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user