diff --git a/.github/workflows/build-demos.yml b/.github/workflows/build-demos.yml index 7aec843..1af08ac 100644 --- a/.github/workflows/build-demos.yml +++ b/.github/workflows/build-demos.yml @@ -16,7 +16,7 @@ permissions: jobs: build-and-deploy: - if: github.repository == 'googlemaps/fleet-debugger' + if: github.repository == 'googlemaps/fleet-debugger' || github.event_name == 'workflow_dispatch' runs-on: ubuntu-latest steps: diff --git a/public/index.html b/public/index.html index f1eed25..44e81d6 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + Fleet Debugger diff --git a/src/App.js b/src/App.js index ef1e15d..f742c3a 100644 --- a/src/App.js +++ b/src/App.js @@ -17,6 +17,7 @@ import { saveDatasetAsJson, saveToIndexedDB, } from "./localStorage"; +import { exportToGoogleSheet, requestSheetsToken } from "./GoogleSheets"; import _ from "lodash"; import { getQueryStringValue, setQueryStringValue } from "./queryString"; import "./global.css"; @@ -527,6 +528,28 @@ class App extends React.Component { } }; + const handleGoogleSheetExport = async (e) => { + e.stopPropagation(); + log(`Google Sheet export initiated for dataset ${index}`); + this.setState({ activeMenuIndex: null }); + + try { + const token = await requestSheetsToken(); + const sheetUrl = await exportToGoogleSheet(index, token); + toast.success( + + Exported to{" "} + + Google Sheet + + + ); + } catch (error) { + log(`Error exporting to Google Sheet: ${error.message}`, error); + toast.error(`Google Sheet export failed: ${error.message}`); + } + }; + const handlePruneClick = async (e) => { e.stopPropagation(); log(`Prune initiated for dataset ${index}`); @@ -681,7 +704,10 @@ class App extends React.Component { {isMenuOpen && (
- Export + Export File +
+
+ Export GSheet
Prune diff --git a/src/DatasetLoading.js b/src/DatasetLoading.js index d882b48..7f8e3aa 100644 --- a/src/DatasetLoading.js +++ b/src/DatasetLoading.js @@ -5,12 +5,16 @@ import ExtraDataSource from "./ExtraDataSource"; import { log } from "./Utils"; import { toast } from "react-toastify"; import { isTokenValid, fetchLogsWithToken, useCloudLoggingLogin, buildQueryFilter } from "./CloudLogging"; -import { HAS_EXTRA_DATA_SOURCE } from "./constants"; +import { useSheetsLogin, isSheetsTokenValid, getSheetsToken, importFromGoogleSheet } from "./GoogleSheets"; +import { HAS_EXTRA_DATA_SOURCE, GOOGLE_CLIENT_ID } from "./constants"; const CloudLoggingFormComponent = ({ onLogsReceived, onFileUpload }) => { const getStoredValue = (key, defaultValue = "") => localStorage.getItem(`datasetLoading_${key}`) || defaultValue; const [fetching, setFetching] = useState(false); + const [sheetFormVisible, setSheetFormVisible] = useState(false); + const [sheetUrl, setSheetUrl] = useState(localStorage.getItem("datasetLoading_sheetUrl") || ""); + const [sheetLoading, setSheetLoading] = useState(false); const [queryParams, setQueryParams] = useState({ projectId: getStoredValue("projectId"), vehicleId: getStoredValue("vehicleId"), @@ -65,6 +69,52 @@ const CloudLoggingFormComponent = ({ onLogsReceived, onFileUpload }) => { } }; + const handleSheetImport = (token) => { + setSheetLoading(true); + setLocalError(null); + localStorage.setItem("datasetLoading_sheetUrl", sheetUrl); + + importFromGoogleSheet(sheetUrl, token) + .then((logs) => { + log(`Received ${logs.length} logs from Google Sheet`); + if (logs.length > 0) { + onLogsReceived(logs); + } else { + toast.warning("No logs found in the spreadsheet."); + } + }) + .catch((err) => { + setLocalError(`Sheet import error: ${err.message}`); + toast.error(`Sheet import error: ${err.message}`); + }) + .finally(() => setSheetLoading(false)); + }; + + const sheetsLogin = useSheetsLogin( + (token) => { + log("Sheets login successful, importing..."); + handleSheetImport(token); + }, + (err) => { + log("Sheets login failed.", err); + setLocalError(`Auth Error: ${err.error || "Unknown"}`); + setSheetLoading(false); + } + ); + + const handleSheetLoadClick = () => { + if (!sheetUrl.trim()) { + setLocalError("Please enter a spreadsheet URL or ID."); + return; + } + setLocalError(null); + if (isSheetsTokenValid()) { + handleSheetImport(getSheetsToken()); + } else { + sheetsLogin(); + } + }; + return (

Fleet Engine Logs Loading

@@ -162,14 +212,48 @@ const CloudLoggingFormComponent = ({ onLogsReceived, onFileUpload }) => {
)}
- -
+ {sheetFormVisible && ( +
+
+ +
+ + {sheetLoading && ( +
+
Loading from Google Sheet...
+ +
+ )} +
+ )}
); }; @@ -210,7 +294,7 @@ export default function DatasetLoading(props) { {isExtra ? ( ExtraFormComponent ) : ( - + )} diff --git a/src/GoogleSheets.js b/src/GoogleSheets.js new file mode 100644 index 0000000..33bcd53 --- /dev/null +++ b/src/GoogleSheets.js @@ -0,0 +1,325 @@ +// src/GoogleSheets.js +import { useGoogleLogin } from "@react-oauth/google"; +import { getUploadedData, getVehicleIdFromLogs, getFirstLogDate } from "./localStorage"; +import { log } from "./Utils"; +import { GOOGLE_CLIENT_ID } from "./constants"; +import _ from "lodash"; + +const SHEETS_API_BASE = "https://sheets.googleapis.com/v4/spreadsheets"; +const CLIENT_ID = GOOGLE_CLIENT_ID; +const SCOPES = "https://www.googleapis.com/auth/spreadsheets"; +const TOKEN_EXPIRY_BUFFER = 5 * 60 * 1000; + +const API_TYPE_REGEX_MAP = [ + { name: "createVehicle", regex: /createVehicle/i }, + { name: "getVehicle", regex: /getVehicle/i }, + { name: "updateVehicle", regex: /updateVehicle/i }, + { name: "createDeliveryVehicle", regex: /createDeliveryVehicle/i }, + { name: "getDeliveryVehicle", regex: /getDeliveryVehicle/i }, + { name: "updateDeliveryVehicle", regex: /updateDeliveryVehicle/i }, + { name: "createTrip", regex: /createTrip/i }, + { name: "getTrip", regex: /getTrip/i }, + { name: "updateTrip", regex: /updateTrip/i }, + { name: "createTask", regex: /createTask/i }, + { name: "getTask", regex: /getTask/i }, + { name: "updateTask", regex: /updateTask/i }, +]; + +function getApiType(logEntry) { + const typeField = logEntry["@type"] || logEntry.jsonpayload?.["@type"] || ""; + for (const { name, regex } of API_TYPE_REGEX_MAP) { + if (regex.test(typeField)) return name; + } + return "other"; +} + +// --- Token Management --- + +export const isSheetsTokenValid = () => { + const token = sessionStorage.getItem("sheets_token"); + if (!token) return false; + const expiry = parseInt(sessionStorage.getItem("sheets_token_expiry") || "0", 10); + return expiry > Date.now() + TOKEN_EXPIRY_BUFFER; +}; + +export const getSheetsToken = () => sessionStorage.getItem("sheets_token"); + +const storeSheetsToken = (accessToken, expiresIn) => { + const expiryTime = Date.now() + (expiresIn || 3600) * 1000; + sessionStorage.setItem("sheets_token", accessToken); + sessionStorage.setItem("sheets_token_expiry", expiryTime.toString()); +}; + +/** + * Acquires an OAuth token for Google Sheets using the GIS token client. + * Works outside of React context / GoogleOAuthProvider. + */ +export function requestSheetsToken() { + return new Promise((resolve, reject) => { + if (isSheetsTokenValid()) { + resolve(getSheetsToken()); + return; + } + + const checkGis = () => { + if (window.google?.accounts?.oauth2) { + const tokenClient = window.google.accounts.oauth2.initTokenClient({ + client_id: CLIENT_ID, + scope: SCOPES, + callback: (tokenResponse) => { + if (tokenResponse.error) { + reject(new Error(`Auth error: ${tokenResponse.error}`)); + return; + } + storeSheetsToken(tokenResponse.access_token, tokenResponse.expires_in); + resolve(tokenResponse.access_token); + }, + error_callback: (error) => { + reject(new Error(`Auth error: ${error.message || "Unknown"}`)); + }, + }); + + tokenClient.requestAccessToken(); + return true; + } + return false; + }; + + if (checkGis()) return; + + // Wait up to 5 seconds for GIS to load + let attempts = 0; + const interval = setInterval(() => { + attempts++; + if (checkGis()) { + clearInterval(interval); + } else if (attempts > 50) { + clearInterval(interval); + reject(new Error("Google Identity Services not loaded. Please refresh and try again.")); + } + }, 100); + }); +} + +/** + * Hook for use inside GoogleOAuthProvider (DatasetLoading dialog). + */ +export const useSheetsLogin = (onSuccess, onError) => { + return useGoogleLogin({ + onSuccess: (tokenResponse) => { + log("Google Sheets OAuth login successful"); + storeSheetsToken(tokenResponse.access_token, tokenResponse.expires_in); + if (onSuccess) onSuccess(tokenResponse.access_token); + }, + onError: (error) => { + log("Google Sheets OAuth login error", error); + if (onError) onError(error); + }, + flow: "implicit", + scope: SCOPES, + }); +}; + +// --- Flatten / Unflatten --- + +const reversePath = (path) => path.split(".").reverse().join("."); + +function flattenObject(obj, prefix = "") { + const result = {}; + for (const key of Object.keys(obj)) { + const fullPath = prefix ? `${prefix}.${key}` : key; + const value = obj[key]; + if (value !== null && typeof value === "object" && !Array.isArray(value)) { + Object.assign(result, flattenObject(value, fullPath)); + } else { + result[fullPath] = value; + } + } + return result; +} + +function collectAllKeys(logs) { + const keysSet = new Set(); + for (const entry of logs) { + const flat = flattenObject(entry); + for (const key of Object.keys(flat)) { + keysSet.add(key); + } + } + const keys = Array.from(keysSet); + keys.sort(); + const tsIndex = keys.indexOf("timestamp"); + if (tsIndex > 0) { + keys.splice(tsIndex, 1); + keys.unshift("timestamp"); + } + return keys; +} + +function toCellValue(value) { + if (value === null || value === undefined) return ""; + if (Array.isArray(value)) return JSON.stringify(value); + if (typeof value === "object") return JSON.stringify(value); + return value; +} + +function fromCellValue(value) { + if (value === "" || value === null || value === undefined) return undefined; + if (typeof value === "string") { + if (value.startsWith("[") || value.startsWith("{")) { + try { + return JSON.parse(value); + } catch { + return value; + } + } + const num = Number(value); + if (!isNaN(num) && value.trim() !== "") return num; + } + return value; +} + +// --- Sheets API Helpers --- + +async function sheetsApiFetch(url, token, options = {}) { + const response = await fetch(url, { + ...options, + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "application/json", + ...(options.headers || {}), + }, + }); + if (!response.ok) { + const errorData = await response.json().catch(() => ({})); + throw new Error(`Sheets API error (${response.status}): ${errorData.error?.message || JSON.stringify(errorData)}`); + } + return response.json(); +} + +// --- Export --- + +export async function exportToGoogleSheet(index, token) { + log(`Exporting dataset ${index} to Google Sheet`); + const data = await getUploadedData(index); + + if (!data?.rawLogs?.length) { + throw new Error("No data available to export"); + } + + const grouped = {}; + for (const entry of data.rawLogs) { + const apiType = getApiType(entry); + if (!grouped[apiType]) grouped[apiType] = []; + grouped[apiType].push(entry); + } + + const sheetNames = Object.keys(grouped).sort(); + log(`Grouped logs into ${sheetNames.length} API types: ${sheetNames.join(", ")}`); + + const sheets = sheetNames.map((name) => ({ properties: { title: name } })); + + const vehicleId = getVehicleIdFromLogs(data.rawLogs); + const date = getFirstLogDate(data.rawLogs); + const spreadsheet = await sheetsApiFetch(SHEETS_API_BASE, token, { + method: "POST", + body: JSON.stringify({ + properties: { title: `Fleet Debugger - ${vehicleId} - ${date}` }, + sheets, + }), + }); + + const spreadsheetId = spreadsheet.spreadsheetId; + log(`Created spreadsheet: ${spreadsheetId}`); + + const valueRanges = []; + for (const sheetName of sheetNames) { + const logs = grouped[sheetName]; + const originalHeaders = collectAllKeys(logs); + const displayHeaders = originalHeaders.map(reversePath); + const rows = [displayHeaders]; + + for (const entry of logs) { + const flat = flattenObject(entry); + const row = originalHeaders.map((h) => toCellValue(flat[h])); + rows.push(row); + } + + valueRanges.push({ + range: `'${sheetName}'!A1`, + values: rows, + }); + } + + await sheetsApiFetch(`${SHEETS_API_BASE}/${spreadsheetId}/values:batchUpdate`, token, { + method: "POST", + body: JSON.stringify({ + valueInputOption: "RAW", + data: valueRanges, + }), + }); + + const sheetUrl = `https://docs.google.com/spreadsheets/d/${spreadsheetId}`; + log(`Export complete: ${sheetUrl}`); + return sheetUrl; +} + +// --- Import --- + +function extractSpreadsheetId(input) { + const trimmed = input.trim(); + const urlMatch = trimmed.match(/\/spreadsheets\/d\/([a-zA-Z0-9-_]+)/); + if (urlMatch) return urlMatch[1]; + if (/^[a-zA-Z0-9-_]+$/.test(trimmed)) return trimmed; + throw new Error("Invalid spreadsheet URL or ID"); +} + +export async function importFromGoogleSheet(spreadsheetInput, token) { + const spreadsheetId = extractSpreadsheetId(spreadsheetInput); + log(`Importing from spreadsheet: ${spreadsheetId}`); + + const metadata = await sheetsApiFetch(`${SHEETS_API_BASE}/${spreadsheetId}?fields=sheets.properties.title`, token); + + const sheetNames = metadata.sheets.map((s) => s.properties.title); + log(`Found ${sheetNames.length} tabs: ${sheetNames.join(", ")}`); + + const ranges = sheetNames.map((name) => `'${name}'!A:ZZ`); + const batchResult = await sheetsApiFetch( + `${SHEETS_API_BASE}/${spreadsheetId}/values:batchGet?${ranges.map((r) => `ranges=${encodeURIComponent(r)}`).join("&")}`, + token + ); + + const allLogs = []; + for (const valueRange of batchResult.valueRanges) { + const rows = valueRange.values; + if (!rows || rows.length < 2) continue; + + const displayHeaders = rows[0]; + const originalHeaders = displayHeaders.map(reversePath); + for (let i = 1; i < rows.length; i++) { + const row = rows[i]; + const obj = {}; + for (let j = 0; j < originalHeaders.length; j++) { + const value = fromCellValue(j < row.length ? row[j] : undefined); + if (value !== undefined) { + _.set(obj, originalHeaders[j], value); + } + } + allLogs.push(obj); + } + } + + log(`Imported ${allLogs.length} total log entries`); + + if (allLogs.length === 0) { + throw new Error("No log data found in the spreadsheet"); + } + + allLogs.sort((a, b) => { + const tsA = a.timestamp || ""; + const tsB = b.timestamp || ""; + return tsA < tsB ? -1 : tsA > tsB ? 1 : 0; + }); + + return allLogs; +} diff --git a/src/MapToggles.js b/src/MapToggles.js index 443d988..7040180 100644 --- a/src/MapToggles.js +++ b/src/MapToggles.js @@ -6,7 +6,7 @@ import Utils, { log } from "./Utils"; export const ALL_TOGGLES = [ { id: "showGPSBubbles", - name: "GPS Accuracy", + name: "Location Accuracy", docLink: "https://github.com/googlemaps/fleet-debugger/blob/main/docs/GPSAccuracy.md", columns: ["lastlocation.rawlocationaccuracy", "lastlocation.locationsensor"], solutionTypes: ["ODRD", "LMFS"], diff --git a/src/constants.js b/src/constants.js index e8fe127..08d81ad 100644 --- a/src/constants.js +++ b/src/constants.js @@ -4,3 +4,4 @@ import ExtraDataSource from "./ExtraDataSource"; export const DEFAULT_API_KEY = ""; export const DEFAULT_MAP_ID = "e6ead35a6ace8599"; export const HAS_EXTRA_DATA_SOURCE = ExtraDataSource.isAvailable(); +export const GOOGLE_CLIENT_ID = "829183678942-eq2c9cd7pjdm39l2um5thgbrvgva07e7.apps.googleusercontent.com"; diff --git a/src/global.css b/src/global.css index c0b636e..fe6e34d 100644 --- a/src/global.css +++ b/src/global.css @@ -169,43 +169,59 @@ .cloud-logging-buttons { display: flex; - gap: 10px; + gap: 8px; margin-bottom: 15px; align-items: stretch; } -.primary-button { +.fetch-logs-button { background-color: #4285f4; color: white; - padding: 10px 15px; + padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; - font-weight: bold; + font-family: Roboto, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 1.2; flex: 3; display: flex; align-items: center; justify-content: center; + text-align: center; } -.primary-button:disabled { +.fetch-logs-button:disabled { background-color: #ccc; cursor: not-allowed; } -.secondary-button { +.sideload-logs-button { background-color: #34A853; color: white; - padding: 10px 15px; + padding: 12px 6px; border: none; border-radius: 4px; cursor: pointer; + font-family: Roboto, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 1.2; flex: 1; display: flex; align-items: center; justify-content: center; + text-align: center; } +.google-sheet-form { + margin-top: 10px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + background-color: #fafafa; +} .cloud-logging-fetch-button { background-color: #4285f4; diff --git a/src/localStorage.js b/src/localStorage.js index 2dae3c0..bff3676 100644 --- a/src/localStorage.js +++ b/src/localStorage.js @@ -89,6 +89,26 @@ export async function uploadCloudLogs(logs, index) { } } +function getVehicleIdFromLogs(rawLogs) { + for (const entry of rawLogs) { + const jsonPayload = entry.jsonpayload || {}; + const response = jsonPayload.response || {}; + const vehicleId = response.vehicleid || response.deliveryvehicleid; + if (vehicleId) return vehicleId; + } + return "unknown"; +} + +function getFirstLogDate(rawLogs) { + const oldestTimestamp = getOldestTimestamp(rawLogs); + if (oldestTimestamp === Infinity) { + return new Date().toISOString().split("T")[0]; + } + return new Date(oldestTimestamp).toISOString().split("T")[0]; +} + +export { getVehicleIdFromLogs, getFirstLogDate }; + export async function saveDatasetAsJson(index) { try { log(`Attempting to save dataset ${index} as JSON`); @@ -106,9 +126,9 @@ export async function saveDatasetAsJson(index) { const link = document.createElement("a"); link.href = url; - // Set the filename based on the dataset number and current date - const date = new Date().toISOString().split("T")[0]; - link.download = `dataset_${index + 1}_${date}.json`; + const vehicleId = getVehicleIdFromLogs(data.rawLogs); + const date = getFirstLogDate(data.rawLogs); + link.download = `Fleet Debugger - ${vehicleId} - ${date}.json`; document.body.appendChild(link); link.click(); @@ -229,7 +249,7 @@ function isRestrictedLog(row) { return row.jsonPayload?.["@type"]?.includes("Restricted") || false; } -function calculateRetentionDate(logsArray) { +function getOldestTimestamp(logsArray) { let oldestTimestamp = Infinity; logsArray.forEach((row) => { const ts = new Date( @@ -239,6 +259,11 @@ function calculateRetentionDate(logsArray) { oldestTimestamp = ts; } }); + return oldestTimestamp; +} + +function calculateRetentionDate(logsArray) { + const oldestTimestamp = getOldestTimestamp(logsArray); let retentionDateIdentifier = null; if (oldestTimestamp !== Infinity) {