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",
|
||||
active: true,
|
||||
sums: "2023.03.00.00.E",
|
||||
notify_sap: false,
|
||||
};
|
||||
let manifests = [
|
||||
{
|
||||
@@ -64,6 +65,7 @@ let manifests = [
|
||||
updated: "2021-07-12T18:22:13.736755Z",
|
||||
active: true,
|
||||
sums: "2023.03.00.00.E",
|
||||
notify_sap: false,
|
||||
},
|
||||
];
|
||||
let totalManifests = 1;
|
||||
|
||||
@@ -26,6 +26,8 @@ import { TableHead } from "@mui/material";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useLocalStorage } from "../../useLocalStorage";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
@@ -132,11 +134,12 @@ const TRexLogsTable = ({ vin, token, classes }) => {
|
||||
const local_date = new Date()
|
||||
const [selectedDate, setSelectedDate] = useState(new Date(local_date.getUTCFullYear(), local_date.getUTCMonth(), local_date.getUTCDate()));
|
||||
const [total, setTotal] = useState(0);
|
||||
const [search, setSearch] = useLocalStorage("TREX_LOGS_SEARCH", "");
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
let controller = new AbortController()
|
||||
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 = () => {
|
||||
return pageSize * pageIndex + pageSize
|
||||
@@ -218,7 +221,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
|
||||
})();
|
||||
return () => controller?.abort()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [vin, token, pageIndex, pageSize, selectedDate, currectLogLevels]);
|
||||
}, [vin, token, search, pageIndex, pageSize, selectedDate, currectLogLevels]);
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
@@ -242,63 +245,75 @@ const TRexLogsTable = ({ vin, token, classes }) => {
|
||||
[event.target.defaultValue]: event.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table
|
||||
style={{ tableLayout: "fixed", width: "100%" }}
|
||||
>
|
||||
<TableRow>
|
||||
<TableCell align="center">
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Log levels</FormLabel>
|
||||
<FormGroup aria-label="position" row>
|
||||
{logLevelCheckBoxes.map((box) => (
|
||||
<FormControlLabel
|
||||
value={box.id}
|
||||
control={<Checkbox defaultChecked disabled={!allLogsFetched} />}
|
||||
label={box.label}
|
||||
labelPlacement="bottom"
|
||||
onChange={handleNewFilter}
|
||||
/>
|
||||
))}
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</TableCell>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell align="center">
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Log levels</FormLabel>
|
||||
<FormGroup aria-label="position" row>
|
||||
{logLevelCheckBoxes.map((box) => (
|
||||
<FormControlLabel
|
||||
key={box.id}
|
||||
value={box.id}
|
||||
control={<Checkbox defaultChecked disabled={!allLogsFetched} />}
|
||||
label={box.label}
|
||||
labelPlacement="bottom"
|
||||
onChange={handleNewFilter}
|
||||
/>
|
||||
))}
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center">
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<KeyboardDatePicker
|
||||
disableToolbar
|
||||
variant="inline"
|
||||
format="yyyy/MM/dd"
|
||||
margin="normal"
|
||||
id="date-picker-inline"
|
||||
label="Choose date (UTC)"
|
||||
value={selectedDate}
|
||||
onChange={handleNewDate}
|
||||
KeyboardButtonProps={{
|
||||
'aria-label': 'change date',
|
||||
}}
|
||||
/>
|
||||
</MuiPickersUtilsProvider>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
<KeyboardDatePicker
|
||||
disableToolbar
|
||||
variant="inline"
|
||||
format="yyyy/MM/dd"
|
||||
margin="normal"
|
||||
id="date-picker-inline"
|
||||
label="Choose date (UTC)"
|
||||
value={selectedDate}
|
||||
onChange={handleNewDate}
|
||||
KeyboardButtonProps={{
|
||||
'aria-label': 'change date',
|
||||
}}
|
||||
/>
|
||||
</MuiPickersUtilsProvider>
|
||||
</TableCell>
|
||||
|
||||
<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>
|
||||
<TableCell align="center">
|
||||
<SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
|
||||
</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
|
||||
|
||||
@@ -175,7 +175,7 @@ const vehiclesAPI = {
|
||||
getCANSignals: async (vin, vehicle) => {
|
||||
return signals;
|
||||
},
|
||||
getTRexLogs: async (vin, date, offset, count, direction, token) => {
|
||||
getTRexLogs: async (vin, search, date, offset, count, direction, token) => {
|
||||
return trexLogs;
|
||||
},
|
||||
getVersionLog: async (vin) => ({
|
||||
|
||||
@@ -224,8 +224,8 @@ const vehiclesAPI = {
|
||||
.catch(errorHandler);
|
||||
},
|
||||
|
||||
getTRexLogs: async (vin, date, offset, count, direction, token, controller) =>
|
||||
fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}`, {
|
||||
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}&search=${search}`, {
|
||||
method: "GET",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
|
||||
Reference in New Issue
Block a user