feat(platform-web): apply protocol in shared history links
This commit is contained in:
@@ -138,8 +138,8 @@ export default function App() {
|
|||||||
vehicles: <Vehicles onOpenVehicle={openVehicle} />,
|
vehicles: <Vehicles onOpenVehicle={openVehicle} />,
|
||||||
realtime: <Realtime onOpenVehicle={openVehicle} />,
|
realtime: <Realtime onOpenVehicle={openVehicle} />,
|
||||||
detail: <VehicleDetail vin={activeVin} protocol={activeProtocol} onOpenHistory={openHistoryForVehicle} onOpenMileage={openMileageForVehicle} onQueryChange={updateVehicleDetailQuery} />,
|
detail: <VehicleDetail vin={activeVin} protocol={activeProtocol} onOpenHistory={openHistoryForVehicle} onOpenMileage={openMileageForVehicle} onQueryChange={updateVehicleDetailQuery} />,
|
||||||
history: <History initialVin={analysisVin} onOpenVehicle={openVehicle} />,
|
history: <History initialVin={analysisVin} initialProtocol={activeProtocol} onOpenVehicle={openVehicle} />,
|
||||||
mileage: <Mileage initialVin={analysisVin} onOpenVehicle={openVehicle} />,
|
mileage: <Mileage initialVin={analysisVin} initialProtocol={activeProtocol} onOpenVehicle={openVehicle} />,
|
||||||
quality: <Quality onOpenVehicle={openVehicle} onHealthLoaded={(health) => setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length)} />
|
quality: <Quality onOpenVehicle={openVehicle} onHealthLoaded={(health) => setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length)} />
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -33,8 +33,9 @@ function splitFields(value?: string) {
|
|||||||
.filter(Boolean);
|
.filter(Boolean);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function History({ initialVin, onOpenVehicle }: { initialVin: string; onOpenVehicle: (vin: string) => void }) {
|
export function History({ initialVin, initialProtocol, onOpenVehicle }: { initialVin: string; initialProtocol?: string; onOpenVehicle: (vin: string) => void }) {
|
||||||
const [filters, setFilters] = useState<HistoryFilters>({ ...defaultFilters, keyword: initialVin || defaultFilters.keyword });
|
const initialFilters = { ...defaultFilters, keyword: initialVin || defaultFilters.keyword, protocol: initialProtocol };
|
||||||
|
const [filters, setFilters] = useState<HistoryFilters>(initialFilters);
|
||||||
const [locations, setLocations] = useState<Page<HistoryLocationRow>>(defaultPage);
|
const [locations, setLocations] = useState<Page<HistoryLocationRow>>(defaultPage);
|
||||||
const [rawFrames, setRawFrames] = useState<Page<RawFrameRow>>(defaultPage);
|
const [rawFrames, setRawFrames] = useState<Page<RawFrameRow>>(defaultPage);
|
||||||
const [selectedRaw, setSelectedRaw] = useState<RawFrameRow | null>(null);
|
const [selectedRaw, setSelectedRaw] = useState<RawFrameRow | null>(null);
|
||||||
@@ -103,18 +104,18 @@ export function History({ initialVin, onOpenVehicle }: { initialVin: string; onO
|
|||||||
};
|
};
|
||||||
|
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
const nextFilters = { ...defaultFilters, keyword: initialVin || defaultFilters.keyword };
|
const nextFilters = { ...defaultFilters, keyword: initialVin || defaultFilters.keyword, protocol: initialProtocol };
|
||||||
setFilters(nextFilters);
|
setFilters(nextFilters);
|
||||||
loadLocations(nextFilters, 1, locationPagination.pageSize);
|
loadLocations(nextFilters, 1, locationPagination.pageSize);
|
||||||
loadRawFrames(nextFilters, 1, rawPagination.pageSize);
|
loadRawFrames(nextFilters, 1, rawPagination.pageSize);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const nextFilters = { ...defaultFilters, keyword: initialVin || defaultFilters.keyword };
|
const nextFilters = { ...defaultFilters, keyword: initialVin || defaultFilters.keyword, protocol: initialProtocol };
|
||||||
setFilters(nextFilters);
|
setFilters(nextFilters);
|
||||||
loadLocations(nextFilters, 1, locationPagination.pageSize);
|
loadLocations(nextFilters, 1, locationPagination.pageSize);
|
||||||
loadRawFrames(nextFilters, 1, rawPagination.pageSize);
|
loadRawFrames(nextFilters, 1, rawPagination.pageSize);
|
||||||
}, [initialVin]);
|
}, [initialVin, initialProtocol]);
|
||||||
|
|
||||||
const rawFieldCount = useMemo(() => Object.keys(selectedRaw?.parsedFields ?? {}).length, [selectedRaw]);
|
const rawFieldCount = useMemo(() => Object.keys(selectedRaw?.parsedFields ?? {}).length, [selectedRaw]);
|
||||||
|
|
||||||
|
|||||||
@@ -32,12 +32,12 @@ function canOpenVehicle(vin?: string) {
|
|||||||
return Boolean(value && value !== 'unknown');
|
return Boolean(value && value !== 'unknown');
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Mileage({ initialVin, onOpenVehicle }: { initialVin: string; onOpenVehicle: (vin: string) => void }) {
|
export function Mileage({ initialVin, initialProtocol, onOpenVehicle }: { initialVin: string; initialProtocol?: string; onOpenVehicle: (vin: string) => void }) {
|
||||||
const [rows, setRows] = useState<DailyMileageRow[]>([]);
|
const [rows, setRows] = useState<DailyMileageRow[]>([]);
|
||||||
const [summary, setSummary] = useState<MileageSummary>(emptySummary);
|
const [summary, setSummary] = useState<MileageSummary>(emptySummary);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [summaryLoading, setSummaryLoading] = useState(true);
|
const [summaryLoading, setSummaryLoading] = useState(true);
|
||||||
const [filters, setFilters] = useState<Record<string, string>>({ keyword: initialVin });
|
const [filters, setFilters] = useState<Record<string, string>>({ keyword: initialVin, protocol: initialProtocol ?? '' });
|
||||||
const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
|
const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
|
||||||
|
|
||||||
const loadSummary = (values: Record<string, string> = filters) => {
|
const loadSummary = (values: Record<string, string> = filters) => {
|
||||||
@@ -60,11 +60,11 @@ export function Mileage({ initialVin, onOpenVehicle }: { initialVin: string; onO
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const nextFilters = { keyword: initialVin };
|
const nextFilters = { keyword: initialVin, protocol: initialProtocol ?? '' };
|
||||||
setFilters(nextFilters);
|
setFilters(nextFilters);
|
||||||
loadSummary(nextFilters);
|
loadSummary(nextFilters);
|
||||||
load(nextFilters, 1, pagination.pageSize);
|
load(nextFilters, 1, pagination.pageSize);
|
||||||
}, [initialVin]);
|
}, [initialVin, initialProtocol]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="vp-page">
|
<div className="vp-page">
|
||||||
@@ -87,7 +87,7 @@ export function Mileage({ initialVin, onOpenVehicle }: { initialVin: string; onO
|
|||||||
<Space>
|
<Space>
|
||||||
<Button htmlType="submit" theme="solid" type="primary">查询</Button>
|
<Button htmlType="submit" theme="solid" type="primary">查询</Button>
|
||||||
<Button onClick={() => {
|
<Button onClick={() => {
|
||||||
const nextFilters = { keyword: initialVin };
|
const nextFilters = { keyword: initialVin, protocol: initialProtocol ?? '' };
|
||||||
setFilters(nextFilters);
|
setFilters(nextFilters);
|
||||||
loadSummary(nextFilters);
|
loadSummary(nextFilters);
|
||||||
load(nextFilters, 1, pagination.pageSize);
|
load(nextFilters, 1, pagination.pageSize);
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { render, screen } from '@testing-library/react';
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
import { afterEach, expect, test, vi } from 'vitest';
|
import { afterEach, expect, test, vi } from 'vitest';
|
||||||
import App from '../App';
|
import App from '../App';
|
||||||
|
|
||||||
@@ -51,3 +51,39 @@ test('opens vehicle detail from shareable hash', async () => {
|
|||||||
expect(await screen.findByDisplayValue('粤AG18312')).toBeInTheDocument();
|
expect(await screen.findByDisplayValue('粤AG18312')).toBeInTheDocument();
|
||||||
expect(screen.getAllByText('车辆服务').length).toBeGreaterThanOrEqual(1);
|
expect(screen.getAllByText('车辆服务').length).toBeGreaterThanOrEqual(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('applies protocol from shareable history hash to API requests', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/history?keyword=%E7%B2%A4AG18312&protocol=JT808');
|
||||||
|
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input, init) => {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: { items: [], total: 0, limit: 10, offset: 0 },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<App />);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/history/locations?'), undefined);
|
||||||
|
});
|
||||||
|
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('protocol=JT808'), undefined);
|
||||||
|
expect(fetchMock).toHaveBeenCalledWith('/api/history/raw-frames/query', expect.objectContaining({
|
||||||
|
method: 'POST',
|
||||||
|
body: expect.stringContaining('"protocol":"JT808"')
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user