feature/IO-3357-Reynolds-and-Reynolds-DMS-API-Integration - Expanded Logs / Formatting change

client/src/pages/dms/dms.container.jsx

@@ -1,29 +1,35 @@
-import { useQuery } from "@apollo/client";
-import { Button, Card, Col, Result, Row, Select, Space } from "antd";
-import queryString from "query-string";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
+import { connect } from "react-redux";
+import { useTranslation } from "react-i18next";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
-import AlertComponent from "../../components/alert/alert.component";
-import DmsAllocationsSummary from "../../components/dms-allocations-summary/dms-allocations-summary.component";
-import DmsCustomerSelector from "../../components/dms-customer-selector/dms-customer-selector.component";
-import DmsLogEvents from "../../components/dms-log-events/dms-log-events.component";
-import DmsPostForm from "../../components/dms-post-form/dms-post-form.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
+import queryString from "query-string";
+import { useQuery } from "@apollo/client";
+import { Button, Card, Col, Result, Row, Select, Space, Switch } from "antd";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+
 import { auth } from "../../firebase/firebase.utils";
+
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+
 import { QUERY_JOB_EXPORT_DMS } from "../../graphql/jobs.queries";
-import { insertAuditTrail, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { insertAuditTrail, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { determineDmsType } from "../../utils/determineDmsType";
+import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
+
+import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import DmsPostForm from "../../components/dms-post-form/dms-post-form.component";
+import DmsLogEvents from "../../components/dms-log-events/dms-log-events.component";
+import DmsCustomerSelector from "../../components/dms-customer-selector/dms-customer-selector.component";
+import DmsAllocationsSummary from "../../components/dms-allocations-summary/dms-allocations-summary.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -50,15 +56,19 @@ export const socket = SocketIO(import.meta.env.PROD ? import.meta.env.VITE_APP_A
 export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, insertAuditTrail }) {
   const { t } = useTranslation();
   const dms = determineDmsType(bodyshop);
-  const [logLevel, setLogLevel] = useState(dms === "pbs" ? "INFO" : "DEBUG");
+
   const history = useNavigate();
-  const [logs, setLogs] = useState([]);
   const search = queryString.parse(useLocation().search);
+
+  const [logLevel, setLogLevel] = useState(dms === "pbs" ? "INFO" : "DEBUG");
+  const [logs, setLogs] = useState([]);
   const [detailsOpen, setDetailsOpen] = useState(false); // false => button shows "Expand All"
   const [detailsNonce, setDetailsNonce] = useState(0); // forces child to react to toggles
+  const [colorizeJson, setColorizeJson] = useState(false); // default: OFF
 
   const { jobId } = search;
   const notification = useNotification();
+
   const {
     treatments: { Fortellis }
   } = useSplitTreatments({
@@ -66,9 +76,9 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
     names: ["Fortellis"],
     splitKey: bodyshop.imexshopid
   });
+
   // New unified wss socket (Fortellis, RR)
   const { socket: wsssocket } = useSocket();
-
   const activeSocket = useMemo(() => {
     return dms === "rr" || (dms === "cdk" && Fortellis.treatment === "on") ? wsssocket : socket;
   }, [dms, Fortellis.treatment, wsssocket, socket]);
@@ -162,6 +172,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
     if (dms === "rr") {
       // set log level on connect and immediately
       wsssocket.emit("set-log-level", logLevel);
+
       const handleConnect = () => wsssocket.emit("set-log-level", logLevel);
       const handleReconnect = () =>
         setLogs((prev) => [
@@ -371,6 +382,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
             jobId={jobId}
           />
         </Col>
+
         <Col md={24} lg={14}>
           <DmsPostForm socket={activeSocket} job={data?.jobs_by_pk} logsRef={logsRef} />
         </Col>
@@ -384,12 +396,20 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
           onRrCashierFinished={handleRrCashierFinished}
           bodyshop={bodyshop}
         />
+
         <Col span={24}>
           <div ref={logsRef}>
             <Card
               title={t("jobs.labels.dms.logs")}
               extra={
                 <Space wrap>
+                  <Switch
+                    checked={colorizeJson}
+                    onChange={setColorizeJson}
+                    checkedChildren="Color JSON"
+                    unCheckedChildren="Plain JSON"
+                  />
+                  <Button onClick={toggleDetailsAll}>{detailsOpen ? "Collapse All" : "Expand All"}</Button>
                   <Select
                     placeholder="Log Level"
                     value={logLevel}
@@ -407,7 +427,6 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
                     <Select.Option key="WARN">WARN</Select.Option>
                     <Select.Option key="ERROR">ERROR</Select.Option>
                   </Select>
-                  <Button onClick={toggleDetailsAll}>{detailsOpen ? "Collapse All" : "Expand All"}</Button>
                   <Button onClick={() => setLogs([])}>Clear Logs</Button>
                   <Button
                     onClick={() => {
@@ -425,7 +444,13 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
                 </Space>
               }
             >
-              <DmsLogEvents logs={logs} detailsOpen={detailsOpen} detailsNonce={detailsNonce} />
+              <DmsLogEvents
+                socket={socket}
+                logs={logs}
+                detailsOpen={detailsOpen}
+                detailsNonce={detailsNonce}
+                colorizeJson={colorizeJson}
+              />
             </Card>
           </div>
         </Col>