IO-233 WIP CDK

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

@@ -1,4 +1,4 @@
-import { Result, Timeline, Space, Tag, Divider, Button } from "antd";
+import { Result, Timeline, Space, Tag, Divider, Button, Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
 import moment from "moment";
+import DmsCustomerSelector from "../../components/dms-customer-selector/dms-customer-selector.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -38,6 +39,7 @@ export const socket = SocketIO(
 
 export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
+  const [logLevel, setLogLevel] = useState("DEBUG");
   const [logs, setLogs] = useState([]);
 
   useEffect(() => {
@@ -57,7 +59,16 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     });
     socket.on("reconnect", () => {
       console.log("Connected again.");
-      setLogs([]);
+      setLogs((logs) => {
+        return [
+          ...logs,
+          {
+            timestamp: new Date(),
+            level: "WARNING",
+            message: "Reconnected to CDK Export Service",
+          },
+        ];
+      });
     });
 
     socket.on("log-event", (payload) => {
@@ -67,12 +78,13 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     });
 
     socket.connect();
-    socket.emit("set-log-level", "TRACE");
+    socket.emit("set-log-level", logLevel);
 
     return () => {
       socket.removeAllListeners();
       socket.disconnect();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (!bodyshop.cdk_dealerid) return <Result status="404" />;
@@ -81,27 +93,43 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <div>
-      <Button
-        onClick={() => {
-          socket.emit(
-            `${dmsType}-export-job`,
-            "752a4f5f-22ab-414b-b182-98d4e62227ef"
-          );
-        }}
-      >
-        Export
-      </Button>
-
-      <Button
-        onClick={() => {
-          setLogs([]);
-          socket.disconnect();
-          socket.connect();
-        }}
-      >
-        reconnect
-      </Button>
-
+      <Space>
+        <Select
+          placeholder="Log Level"
+          value={logLevel}
+          onChange={(value) => {
+            setLogLevel(value);
+            socket.emit("set-log-level", value);
+          }}
+        >
+          <Select.Option>TRACE</Select.Option>
+          <Select.Option>DEBUG</Select.Option>
+          <Select.Option>INFO</Select.Option>
+          <Select.Option>WARNING</Select.Option>
+          <Select.Option>ERROR</Select.Option>
+        </Select>
+        <Button
+          onClick={() => {
+            socket.emit(
+              `${dmsType}-export-job`,
+              "752a4f5f-22ab-414b-b182-98d4e62227ef"
+            );
+          }}
+        >
+          Export
+        </Button>
+        <Button
+          onClick={() => {
+            setLogs([]);
+            socket.disconnect();
+            socket.connect();
+          }}
+        >
+          Reconnect
+        </Button>
+        <Button onClick={() => setLogs([])}>Clear Logs</Button>
+      </Space>
+      <DmsCustomerSelector />
       <Timeline pending={socket.connected && "Processing..."} reverse={true}>
         {logs.map((log, idx) => (
           <Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>