diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx index 884517d0..d30a523e 100644 --- a/vehicle-data-platform/apps/web/src/App.tsx +++ b/vehicle-data-platform/apps/web/src/App.tsx @@ -13,6 +13,7 @@ import { Vehicles } from './pages/Vehicles'; export default function App() { const [activePage, setActivePage] = useState('dashboard'); const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426'); + const [analysisVin, setAnalysisVin] = useState('LB9A32A24R0LS1426'); const [linkIssueCount, setLinkIssueCount] = useState(null); const refreshOpsHealth = useCallback((showError = true) => { @@ -45,13 +46,31 @@ export default function App() { setActivePage('detail'); }; + const openHistoryForVehicle = (vin: string) => { + const nextVin = vin.trim(); + if (!nextVin) { + return; + } + setAnalysisVin(nextVin); + setActivePage('history'); + }; + + const openMileageForVehicle = (vin: string) => { + const nextVin = vin.trim(); + if (!nextVin) { + return; + } + setAnalysisVin(nextVin); + setActivePage('mileage'); + }; + const pages: Record = { dashboard: setActivePage('quality')} />, vehicles: , realtime: , - detail: , - history: , - mileage: , + detail: , + history: , + mileage: , quality: setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length)} /> }; diff --git a/vehicle-data-platform/apps/web/src/pages/History.tsx b/vehicle-data-platform/apps/web/src/pages/History.tsx index dee46d55..f1ff2d11 100644 --- a/vehicle-data-platform/apps/web/src/pages/History.tsx +++ b/vehicle-data-platform/apps/web/src/pages/History.tsx @@ -26,8 +26,8 @@ function canOpenVehicle(vin?: string) { return Boolean(value && value !== 'unknown'); } -export function History({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) { - const [filters, setFilters] = useState(defaultFilters); +export function History({ initialVin, onOpenVehicle }: { initialVin: string; onOpenVehicle: (vin: string) => void }) { + const [filters, setFilters] = useState({ ...defaultFilters, vin: initialVin || defaultFilters.vin }); const [locations, setLocations] = useState>(defaultPage); const [rawFrames, setRawFrames] = useState>(defaultPage); const [selectedRaw, setSelectedRaw] = useState(null); @@ -84,15 +84,18 @@ export function History({ onOpenVehicle }: { onOpenVehicle: (vin: string) => voi }; const reset = () => { - setFilters(defaultFilters); - loadLocations(defaultFilters, 1, locationPagination.pageSize); - loadRawFrames(defaultFilters, 1, rawPagination.pageSize); + const nextFilters = { ...defaultFilters, vin: initialVin || defaultFilters.vin }; + setFilters(nextFilters); + loadLocations(nextFilters, 1, locationPagination.pageSize); + loadRawFrames(nextFilters, 1, rawPagination.pageSize); }; useEffect(() => { - loadLocations(defaultFilters, 1, locationPagination.pageSize); - loadRawFrames(defaultFilters, 1, rawPagination.pageSize); - }, []); + const nextFilters = { ...defaultFilters, vin: initialVin || defaultFilters.vin }; + setFilters(nextFilters); + loadLocations(nextFilters, 1, locationPagination.pageSize); + loadRawFrames(nextFilters, 1, rawPagination.pageSize); + }, [initialVin]); const rawFieldCount = useMemo(() => Object.keys(selectedRaw?.parsedFields ?? {}).length, [selectedRaw]); @@ -100,7 +103,7 @@ export function History({ onOpenVehicle }: { onOpenVehicle: (vin: string) => voi
-
submit(values)}> + submit(values)}> GB32960 diff --git a/vehicle-data-platform/apps/web/src/pages/Mileage.tsx b/vehicle-data-platform/apps/web/src/pages/Mileage.tsx index 047a3f5d..fec1440e 100644 --- a/vehicle-data-platform/apps/web/src/pages/Mileage.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Mileage.tsx @@ -32,12 +32,12 @@ function canOpenVehicle(vin?: string) { return Boolean(value && value !== 'unknown'); } -export function Mileage({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) { +export function Mileage({ initialVin, onOpenVehicle }: { initialVin: string; onOpenVehicle: (vin: string) => void }) { const [rows, setRows] = useState([]); const [summary, setSummary] = useState(emptySummary); const [loading, setLoading] = useState(true); const [summaryLoading, setSummaryLoading] = useState(true); - const [filters, setFilters] = useState>({}); + const [filters, setFilters] = useState>({ vin: initialVin }); const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 }); const loadSummary = (values: Record = filters) => { @@ -60,15 +60,17 @@ export function Mileage({ onOpenVehicle }: { onOpenVehicle: (vin: string) => voi }; useEffect(() => { - loadSummary({}); - load({}, 1, pagination.pageSize); - }, []); + const nextFilters = { vin: initialVin }; + setFilters(nextFilters); + loadSummary(nextFilters); + load(nextFilters, 1, pagination.pageSize); + }, [initialVin]); return (
- { + { const nextFilters = values as Record; setFilters(nextFilters); loadSummary(nextFilters); @@ -85,9 +87,10 @@ export function Mileage({ onOpenVehicle }: { onOpenVehicle: (vin: string) => voi diff --git a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx index eb1930e1..296aa5ca 100644 --- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx +++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx @@ -11,7 +11,15 @@ type VehicleQuery = { protocol?: string; }; -export function VehicleDetail({ vin }: { vin: string }) { +export function VehicleDetail({ + vin, + onOpenHistory, + onOpenMileage +}: { + vin: string; + onOpenHistory: (vin: string) => void; + onOpenMileage: (vin: string) => void; +}) { const [query, setQuery] = useState({ vin }); const [detail, setDetail] = useState(null); const [loading, setLoading] = useState(false); @@ -66,6 +74,8 @@ export function VehicleDetail({ vin }: { vin: string }) { + +