CEC-6085 - Add search bar to TREX logs
This commit is contained in:
padamsen_fisker
46
src/components/Cars/Status/TRexLogsTab.test.jsx
Normal file
46
src/components/Cars/Status/TRexLogsTab.test.jsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
jest.mock("../../Contexts/VehicleContext");
|
||||||
|
jest.mock("../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../Contexts/UserContext");
|
||||||
|
jest.mock("@material-ui/core/utils/unstable_useId", () =>
|
||||||
|
jest.fn().mockReturnValue("mui-test-id")
|
||||||
|
);
|
||||||
|
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||||
|
import { setToken, UserProvider } from "../../Contexts/UserContext";
|
||||||
|
import MainForm from "./TRexLogsTab";
|
||||||
|
import addSnapshotSerializer from "../../../utils/snapshot";
|
||||||
|
import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const renderTRexLogsTab = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MainForm vin="TESTVIN1234567890" />
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => {
|
||||||
|
/* render */
|
||||||
|
});
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("TRexLogsTab", () => {
|
||||||
|
beforeAll(() => {
|
||||||
|
addSnapshotSerializer(expect);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT_FISKER);
|
||||||
|
const container = await renderTRexLogsTab();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,583 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TRexLogsTab Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="MuiTypography-root MuiTypography-h6"
|
||||||
|
>
|
||||||
|
T.Rex Logs
|
||||||
|
</h6>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class="MuiTable-root"
|
||||||
|
style="table-layout: fixed; width: 100%;"
|
||||||
|
>
|
||||||
|
<tbody
|
||||||
|
class="MuiTableBody-root"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
<fieldset
|
||||||
|
class="MuiFormControl-root css-1nrlq1o-MuiFormControl-root"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="MuiFormLabel-root MuiFormLabel-colorPrimary css-u4tvz2-MuiFormLabel-root"
|
||||||
|
>
|
||||||
|
Log levels
|
||||||
|
</legend>
|
||||||
|
<div
|
||||||
|
aria-label="position"
|
||||||
|
class="MuiFormGroup-root MuiFormGroup-row css-qfz70r-MuiFormGroup-root"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input css-1m9pwf3"
|
||||||
|
data-indeterminate="false"
|
||||||
|
disabled=""
|
||||||
|
type="checkbox"
|
||||||
|
value="trace"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||||
|
data-testid="CheckBoxIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled css-ahj2mt-MuiTypography-root"
|
||||||
|
>
|
||||||
|
Trace
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input css-1m9pwf3"
|
||||||
|
data-indeterminate="false"
|
||||||
|
disabled=""
|
||||||
|
type="checkbox"
|
||||||
|
value="debug"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||||
|
data-testid="CheckBoxIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled css-ahj2mt-MuiTypography-root"
|
||||||
|
>
|
||||||
|
Debug
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input css-1m9pwf3"
|
||||||
|
data-indeterminate="false"
|
||||||
|
disabled=""
|
||||||
|
type="checkbox"
|
||||||
|
value="info"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||||
|
data-testid="CheckBoxIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled css-ahj2mt-MuiTypography-root"
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input css-1m9pwf3"
|
||||||
|
data-indeterminate="false"
|
||||||
|
disabled=""
|
||||||
|
type="checkbox"
|
||||||
|
value="warning"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||||
|
data-testid="CheckBoxIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled css-ahj2mt-MuiTypography-root"
|
||||||
|
>
|
||||||
|
Warning
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input css-1m9pwf3"
|
||||||
|
data-indeterminate="false"
|
||||||
|
disabled=""
|
||||||
|
type="checkbox"
|
||||||
|
value="error"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||||
|
data-testid="CheckBoxIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled css-ahj2mt-MuiTypography-root"
|
||||||
|
>
|
||||||
|
Error
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="true"
|
||||||
|
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input css-1m9pwf3"
|
||||||
|
data-indeterminate="false"
|
||||||
|
disabled=""
|
||||||
|
type="checkbox"
|
||||||
|
value="critical"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
|
||||||
|
data-testid="CheckBoxIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled css-ahj2mt-MuiTypography-root"
|
||||||
|
>
|
||||||
|
Critical
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
|
||||||
|
data-shrink="true"
|
||||||
|
for="date-picker-inline"
|
||||||
|
id="date-picker-inline-label"
|
||||||
|
>
|
||||||
|
Choose date (UTC)
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
|
||||||
|
id="date-picker-inline"
|
||||||
|
type="text"
|
||||||
|
value="2024/07/18"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="change date"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
|
||||||
|
data-shrink="false"
|
||||||
|
for="search"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
|
||||||
|
id="search"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="search"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
No logs for 2024-07-18
|
||||||
|
<span
|
||||||
|
align="center"
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="NaN"
|
||||||
|
class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate css-eglki6-MuiLinearProgress-root"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Determinate css-5xe99f-MuiLinearProgress-bar1"
|
||||||
|
style="transform: translateX(NaN%);"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
disabled=""
|
||||||
|
>
|
||||||
|
Download Log File
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<table
|
||||||
|
class="MuiTable-root"
|
||||||
|
style="table-layout: fixed; width: 100%;"
|
||||||
|
>
|
||||||
|
<thead
|
||||||
|
class="MuiTableHead-root makeStyles-root-0 css-15wwp11-MuiTableHead-root"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root makeStyles-tableHeader-0 MuiTableCell-alignCenter"
|
||||||
|
style="width: 5%;"
|
||||||
|
>
|
||||||
|
Level
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root makeStyles-tableHeader-0 MuiTableCell-alignCenter"
|
||||||
|
style="width: 10%;"
|
||||||
|
>
|
||||||
|
T.Rex Timestamp
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root makeStyles-tableHeader-0 MuiTableCell-alignCenter"
|
||||||
|
style="width: 10%;"
|
||||||
|
>
|
||||||
|
Cloud Timestamp
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root makeStyles-tableHeader-0 MuiTableCell-alignCenter"
|
||||||
|
style="width: 5%;"
|
||||||
|
>
|
||||||
|
Line Number
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root makeStyles-tableHeader-0 MuiTableCell-alignCenter"
|
||||||
|
style="width: 10%;"
|
||||||
|
>
|
||||||
|
Filename
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root makeStyles-tableHeader-0 MuiTableCell-alignCenter"
|
||||||
|
style="width: 60%;"
|
||||||
|
>
|
||||||
|
Message
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody
|
||||||
|
class="MuiTableBody-root"
|
||||||
|
/>
|
||||||
|
<tfoot
|
||||||
|
class="MuiTableFooter-root"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root MuiTableRow-footer"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
|
||||||
|
colspan="6"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTablePagination-spacer"
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
||||||
|
>
|
||||||
|
Rows per page:
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
aria-label="rows per page"
|
||||||
|
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="25"
|
||||||
|
>
|
||||||
|
25
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="100"
|
||||||
|
>
|
||||||
|
100
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="1000"
|
||||||
|
>
|
||||||
|
1000
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="10000"
|
||||||
|
>
|
||||||
|
10000
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
||||||
|
>
|
||||||
|
0-0 of 0
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="MuiTablePagination-actions"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Previous page"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
title="Previous page"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-label="Next page"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
title="Next page"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -54,6 +54,7 @@ let manifest = {
|
|||||||
updated: "2022-01-14T00:47:08.996451Z",
|
updated: "2022-01-14T00:47:08.996451Z",
|
||||||
active: true,
|
active: true,
|
||||||
sums: "2023.03.00.00.E",
|
sums: "2023.03.00.00.E",
|
||||||
|
notify_sap: false,
|
||||||
};
|
};
|
||||||
let manifests = [
|
let manifests = [
|
||||||
{
|
{
|
||||||
@@ -64,6 +65,7 @@ let manifests = [
|
|||||||
updated: "2021-07-12T18:22:13.736755Z",
|
updated: "2021-07-12T18:22:13.736755Z",
|
||||||
active: true,
|
active: true,
|
||||||
sums: "2023.03.00.00.E",
|
sums: "2023.03.00.00.E",
|
||||||
|
notify_sap: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
let totalManifests = 1;
|
let totalManifests = 1;
|
||||||
|
|||||||
@@ -26,6 +26,8 @@ import { TableHead } from "@mui/material";
|
|||||||
import { logger } from "../../../services/monitoring";
|
import { logger } from "../../../services/monitoring";
|
||||||
import { LocalDateTimeString } from "../../../utils/dates";
|
import { LocalDateTimeString } from "../../../utils/dates";
|
||||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||||
|
import { useLocalStorage } from "../../useLocalStorage";
|
||||||
|
import SearchField from "../../Controls/SearchField";
|
||||||
|
|
||||||
const tableColumns = [
|
const tableColumns = [
|
||||||
{
|
{
|
||||||
@@ -132,11 +134,12 @@ const TRexLogsTable = ({ vin, token, classes }) => {
|
|||||||
const local_date = new Date()
|
const local_date = new Date()
|
||||||
const [selectedDate, setSelectedDate] = useState(new Date(local_date.getUTCFullYear(), local_date.getUTCMonth(), local_date.getUTCDate()));
|
const [selectedDate, setSelectedDate] = useState(new Date(local_date.getUTCFullYear(), local_date.getUTCMonth(), local_date.getUTCDate()));
|
||||||
const [total, setTotal] = useState(0);
|
const [total, setTotal] = useState(0);
|
||||||
|
const [search, setSearch] = useLocalStorage("TREX_LOGS_SEARCH", "");
|
||||||
const { setMessage } = useStatusContext();
|
const { setMessage } = useStatusContext();
|
||||||
|
|
||||||
let controller = new AbortController()
|
let controller = new AbortController()
|
||||||
const readBlob = async (offset, count) => {
|
const readBlob = async (offset, count) => {
|
||||||
return await api.getTRexLogs(vin, fromatDateForRequest(selectedDate), offset, count, "UP", token, controller)
|
return await api.getTRexLogs(vin, search, fromatDateForRequest(selectedDate), offset, count, "UP", token, controller)
|
||||||
}
|
}
|
||||||
const getDesiredSize = () => {
|
const getDesiredSize = () => {
|
||||||
return pageSize * pageIndex + pageSize
|
return pageSize * pageIndex + pageSize
|
||||||
@@ -218,7 +221,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
|
|||||||
})();
|
})();
|
||||||
return () => controller?.abort()
|
return () => controller?.abort()
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [vin, token, pageIndex, pageSize, selectedDate, currectLogLevels]);
|
}, [vin, token, search, pageIndex, pageSize, selectedDate, currectLogLevels]);
|
||||||
|
|
||||||
const handleChangePageSize = (event) => {
|
const handleChangePageSize = (event) => {
|
||||||
setPageSize(parseInt(event.target.value, 10));
|
setPageSize(parseInt(event.target.value, 10));
|
||||||
@@ -242,63 +245,75 @@ const TRexLogsTable = ({ vin, token, classes }) => {
|
|||||||
[event.target.defaultValue]: event.target.checked,
|
[event.target.defaultValue]: event.target.checked,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSearch = (query) => {
|
||||||
|
setSearch(query);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
<Table
|
<Table
|
||||||
style={{ tableLayout: "fixed", width: "100%" }}
|
style={{ tableLayout: "fixed", width: "100%" }}
|
||||||
>
|
>
|
||||||
<TableRow>
|
<TableBody>
|
||||||
<TableCell align="center">
|
<TableRow>
|
||||||
<FormControl component="fieldset">
|
<TableCell align="center">
|
||||||
<FormLabel component="legend">Log levels</FormLabel>
|
<FormControl component="fieldset">
|
||||||
<FormGroup aria-label="position" row>
|
<FormLabel component="legend">Log levels</FormLabel>
|
||||||
{logLevelCheckBoxes.map((box) => (
|
<FormGroup aria-label="position" row>
|
||||||
<FormControlLabel
|
{logLevelCheckBoxes.map((box) => (
|
||||||
value={box.id}
|
<FormControlLabel
|
||||||
control={<Checkbox defaultChecked disabled={!allLogsFetched} />}
|
key={box.id}
|
||||||
label={box.label}
|
value={box.id}
|
||||||
labelPlacement="bottom"
|
control={<Checkbox defaultChecked disabled={!allLogsFetched} />}
|
||||||
onChange={handleNewFilter}
|
label={box.label}
|
||||||
/>
|
labelPlacement="bottom"
|
||||||
))}
|
onChange={handleNewFilter}
|
||||||
</FormGroup>
|
/>
|
||||||
</FormControl>
|
))}
|
||||||
</TableCell>
|
</FormGroup>
|
||||||
|
</FormControl>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
<TableCell align="center">
|
<TableCell align="center">
|
||||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||||
<KeyboardDatePicker
|
<KeyboardDatePicker
|
||||||
disableToolbar
|
disableToolbar
|
||||||
variant="inline"
|
variant="inline"
|
||||||
format="yyyy/MM/dd"
|
format="yyyy/MM/dd"
|
||||||
margin="normal"
|
margin="normal"
|
||||||
id="date-picker-inline"
|
id="date-picker-inline"
|
||||||
label="Choose date (UTC)"
|
label="Choose date (UTC)"
|
||||||
value={selectedDate}
|
value={selectedDate}
|
||||||
onChange={handleNewDate}
|
onChange={handleNewDate}
|
||||||
KeyboardButtonProps={{
|
KeyboardButtonProps={{
|
||||||
'aria-label': 'change date',
|
'aria-label': 'change date',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</MuiPickersUtilsProvider>
|
</MuiPickersUtilsProvider>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell align="center">
|
<TableCell align="center">
|
||||||
{
|
<SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
|
||||||
blobSize === 0 ? `No logs for ${fromatDateForRequest(selectedDate)}` :
|
</TableCell>
|
||||||
`Read ${getReadPercentage().toFixed(2)}% of logs`
|
|
||||||
}
|
|
||||||
{
|
|
||||||
<LinearProgress
|
|
||||||
variant="determinate"
|
|
||||||
align="center"
|
|
||||||
value={getReadPercentage()} />
|
|
||||||
}
|
|
||||||
<br></br>
|
|
||||||
<button onClick={downloadFile} disabled={blobSize === 0}>Download Log File</button>
|
|
||||||
</TableCell>
|
|
||||||
|
|
||||||
</TableRow>
|
<TableCell align="center">
|
||||||
|
{
|
||||||
|
blobSize === 0 ? `No logs for ${fromatDateForRequest(selectedDate)}` :
|
||||||
|
`Read ${getReadPercentage().toFixed(2)}% of logs`
|
||||||
|
}
|
||||||
|
{
|
||||||
|
<LinearProgress
|
||||||
|
variant="determinate"
|
||||||
|
align="center"
|
||||||
|
value={getReadPercentage()} />
|
||||||
|
}
|
||||||
|
<br></br>
|
||||||
|
<button onClick={downloadFile} disabled={blobSize === 0}>Download Log File</button>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
||||||
<Table
|
<Table
|
||||||
|
|||||||
@@ -175,7 +175,7 @@ const vehiclesAPI = {
|
|||||||
getCANSignals: async (vin, vehicle) => {
|
getCANSignals: async (vin, vehicle) => {
|
||||||
return signals;
|
return signals;
|
||||||
},
|
},
|
||||||
getTRexLogs: async (vin, date, offset, count, direction, token) => {
|
getTRexLogs: async (vin, search, date, offset, count, direction, token) => {
|
||||||
return trexLogs;
|
return trexLogs;
|
||||||
},
|
},
|
||||||
getVersionLog: async (vin) => ({
|
getVersionLog: async (vin) => ({
|
||||||
|
|||||||
@@ -224,8 +224,8 @@ const vehiclesAPI = {
|
|||||||
.catch(errorHandler);
|
.catch(errorHandler);
|
||||||
},
|
},
|
||||||
|
|
||||||
getTRexLogs: async (vin, date, offset, count, direction, token, controller) =>
|
getTRexLogs: async (vin, search, date, offset, count, direction, token, controller) =>
|
||||||
fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}`, {
|
fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}&search=${search}`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: Object.assign(
|
headers: Object.assign(
|
||||||
{ "Content-Type": "application/json" },
|
{ "Content-Type": "application/json" },
|
||||||
|
|||||||
Reference in New Issue
Block a user