diff --git a/src/components/Cars/Status/TRexLogsTab.jsx b/src/components/Cars/Status/TRexLogsTab.jsx index 8dc6260..4627025 100644 --- a/src/components/Cars/Status/TRexLogsTab.jsx +++ b/src/components/Cars/Status/TRexLogsTab.jsx @@ -19,7 +19,7 @@ const MainForm = () => { return (
- + T.Rex Logs diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx index ac6789f..678cbdf 100644 --- a/src/components/Controls/TRexLogs/index.jsx +++ b/src/components/Controls/TRexLogs/index.jsx @@ -1,47 +1,23 @@ import React, { useEffect, useState } from "react"; -import api from "../../../services/vehiclesAPI"; import { Table, TableBody, TableCell, TableFooter, TablePagination, - TableRow, + TableRow } from "@material-ui/core"; import { - MuiPickersUtilsProvider, - KeyboardDatePicker, + KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; import clsx from "clsx"; +import api from "../../../services/vehiclesAPI"; -import { useStatusContext } from "../../Contexts/StatusContext"; -import { logger } from "../../../services/monitoring"; -import { TableHead } from "@mui/material"; import DateFnsUtils from '@date-io/date-fns'; - -const transformLogs = (logs) => - logs.map((log) => { - const { level, timestamp, received_timestamp, line_number, filename, msg } = log; - //const trex_time = new Date(timestamp) - //const cloud_time = new Date(received_timestamp) - return { - level: level, - trex_timestamp: timestamp, - cloud_timestamp: received_timestamp, - line_number: line_number, - filename: filename, - msg: msg - }; - }) - .flat() - -const fromatDateForRequest = (date) => { - const getYear = date.toLocaleString("default", { year: "numeric" }); - const getMonth = date.toLocaleString("default", { month: "2-digit" }); - const getDay = date.toLocaleString("default", { day: "2-digit" }); - return getYear + "-" + getMonth + "-" + getDay -}; +import { TableHead } from "@mui/material"; +import { logger } from "../../../services/monitoring"; +import { useStatusContext } from "../../Contexts/StatusContext"; const tableColumns = [ { @@ -75,9 +51,34 @@ const tableColumns = [ width: "60%", }, ]; + +const transformLogs = (logs) => + logs.map((log) => { + const { level, timestamp, received_timestamp, line_number, filename, msg } = log; + //const trex_time = new Date(timestamp) + //const cloud_time = new Date(received_timestamp) + return { + level: level, + trex_timestamp: timestamp, + cloud_timestamp: received_timestamp, + line_number: line_number, + filename: filename, + msg: msg + }; + }) + .flat() + +const fromatDateForRequest = (date) => { + const getYear = date.toLocaleString("default", { year: "numeric" }); + const getMonth = date.toLocaleString("default", { month: "2-digit" }); + const getDay = date.toLocaleString("default", { day: "2-digit" }); + return getYear + "-" + getMonth + "-" + getDay +}; + //read at least 30000 bytes per one API request const ONE_READ_SIZE = 30000 const DEFAULT_PAGE_SIZE = 25 + const TRexLogsTable = ({ vin, token, classes }) => { const [allLogsFetched, setAllLogsFetched] = useState(false) const [blobSize, setBlobSize] = useState(0) @@ -134,7 +135,7 @@ const TRexLogsTable = ({ vin, token, classes }) => { return } setTotal(0) - const msg = `Can not fetch logs for ${fromatDateForRequest(selectedDate)}` + const msg = `Cannot fetch logs for ${fromatDateForRequest(selectedDate)}` setMessage(msg) console.log(`${msg}, Cloud error:\n${fetched.error}`); return @@ -188,7 +189,7 @@ const TRexLogsTable = ({ vin, token, classes }) => { style={{ tableLayout: "fixed", minWidth: "1400px" }} > - + { /> - + {getReadPercentage()} @@ -213,13 +214,12 @@ const TRexLogsTable = ({ vin, token, classes }) => { - - + {tableColumns.map((column) => ( - {column.label} - ))} + {column.label} + ))} + {logs.slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).map((log, i) => ( diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx index 3b3a752..1931093 100644 --- a/src/components/useStyles.jsx +++ b/src/components/useStyles.jsx @@ -285,6 +285,10 @@ const useStyles = makeStyles((theme) => ({ color: "blue", textDecoration: "underline", }, + tableHeader: { + textDecorationStyle: "solid", + fontWeight:500, + } })); export default useStyles;