feat(platform): make vehicle action recommendations filterable
This commit is contained in:
@@ -69,20 +69,26 @@ function sourceDiagnosisText(row: VehicleCoverageRow) {
|
|||||||
return parts.join(',');
|
return parts.join(',');
|
||||||
}
|
}
|
||||||
|
|
||||||
function vehicleActionRecommendation(row: VehicleCoverageRow) {
|
type VehicleActionRecommendation = {
|
||||||
|
label: string;
|
||||||
|
color: 'green' | 'orange' | 'red';
|
||||||
|
filters: Record<string, string> | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
function vehicleActionRecommendation(row: VehicleCoverageRow): VehicleActionRecommendation {
|
||||||
if (row.bindingStatus !== 'bound') {
|
if (row.bindingStatus !== 'bound') {
|
||||||
return { label: '维护身份绑定', color: 'orange' as const };
|
return { label: '维护身份绑定', color: 'orange' as const, filters: { bindingStatus: 'unbound' } };
|
||||||
}
|
}
|
||||||
if ((row.missingProtocols ?? []).length > 0) {
|
if ((row.missingProtocols ?? []).length > 0) {
|
||||||
return { label: `补齐 ${row.missingProtocols.join('、')} 来源`, color: 'orange' as const };
|
return { label: `补齐 ${row.missingProtocols.join('、')} 来源`, color: 'orange' as const, filters: { missingProtocol: row.missingProtocols[0] } };
|
||||||
}
|
}
|
||||||
if (row.sourceCount <= 0) {
|
if (row.sourceCount <= 0) {
|
||||||
return { label: '确认平台转发配置', color: 'orange' as const };
|
return { label: '确认平台转发配置', color: 'orange' as const, filters: { serviceStatus: 'no_data' } };
|
||||||
}
|
}
|
||||||
if (row.onlineSourceCount <= 0) {
|
if (row.onlineSourceCount <= 0) {
|
||||||
return { label: '排查离线链路', color: 'red' as const };
|
return { label: '排查离线链路', color: 'red' as const, filters: { online: 'offline' } };
|
||||||
}
|
}
|
||||||
return { label: '持续观察', color: 'green' as const };
|
return { label: '持续观察', color: 'green' as const, filters: null };
|
||||||
}
|
}
|
||||||
|
|
||||||
function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Record<string, string>) => void) {
|
function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Record<string, string>) => void) {
|
||||||
@@ -246,6 +252,13 @@ export function Vehicles({
|
|||||||
width: 180,
|
width: 180,
|
||||||
render: (_: unknown, row: VehicleCoverageRow) => {
|
render: (_: unknown, row: VehicleCoverageRow) => {
|
||||||
const action = vehicleActionRecommendation(row);
|
const action = vehicleActionRecommendation(row);
|
||||||
|
if (action.filters) {
|
||||||
|
return (
|
||||||
|
<Button size="small" theme="light" type={action.color === 'red' ? 'danger' : 'warning'} onClick={() => applyFilters({ ...filters, ...action.filters })}>
|
||||||
|
{action.label}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
return <Tag color={action.color}>{action.label}</Tag>;
|
return <Tag color={action.color}>{action.label}</Tag>;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -588,6 +588,86 @@ test('shows vehicle service result summary on vehicle list filters', async () =>
|
|||||||
expect(screen.getByText('补齐 YUTONG_MQTT 来源')).toBeInTheDocument();
|
expect(screen.getByText('补齐 YUTONG_MQTT 来源')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('filters vehicle list from recommended action', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/vehicles');
|
||||||
|
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, activeConnections: 0, capacityFindings: [], redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/vehicles/coverage/summary')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
totalVehicles: 181,
|
||||||
|
onlineVehicles: 73,
|
||||||
|
singleSourceVehicles: 0,
|
||||||
|
multiSourceVehicles: 181,
|
||||||
|
noDataVehicles: 0,
|
||||||
|
unboundVehicles: 0,
|
||||||
|
missingSources: [{ protocol: 'YUTONG_MQTT', count: 181 }]
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/vehicles/coverage')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
items: [{
|
||||||
|
vin: 'VIN-MISSING-MQTT',
|
||||||
|
plate: '粤A服务2',
|
||||||
|
phone: '13307795425',
|
||||||
|
oem: 'G7s',
|
||||||
|
protocols: ['GB32960', 'JT808'],
|
||||||
|
missingProtocols: ['YUTONG_MQTT'],
|
||||||
|
sourceStatus: [],
|
||||||
|
sourceCount: 2,
|
||||||
|
onlineSourceCount: 2,
|
||||||
|
online: true,
|
||||||
|
lastSeen: '2026-07-03 20:12:10',
|
||||||
|
bindingStatus: 'bound'
|
||||||
|
}],
|
||||||
|
total: 181,
|
||||||
|
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.click(await screen.findByRole('button', { name: '补齐 YUTONG_MQTT 来源' }));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/coverage?limit=20&offset=0&missingProtocol=YUTONG_MQTT'), undefined);
|
||||||
|
});
|
||||||
|
expect(window.location.hash).toBe('#/vehicles?missingProtocol=YUTONG_MQTT');
|
||||||
|
});
|
||||||
|
|
||||||
test('shows and clears current vehicle service filters', async () => {
|
test('shows and clears current vehicle service filters', async () => {
|
||||||
window.history.replaceState(null, '', '/#/vehicles?keyword=%E7%B2%A4A&protocol=JT808&coverage=multi&missingProtocol=YUTONG_MQTT&serviceStatus=degraded&online=online&bindingStatus=bound');
|
window.history.replaceState(null, '', '/#/vehicles?keyword=%E7%B2%A4A&protocol=JT808&coverage=multi&missingProtocol=YUTONG_MQTT&serviceStatus=degraded&online=online&bindingStatus=bound');
|
||||||
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user