IO-233 Base websocket setup for CDK.

client/src/pages/cdk/cdk.container.jsx

@@ -0,0 +1,128 @@
+import { Result, Timeline, Space, Tag, Divider, Button } from "antd";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+import SocketIO from "socket.io-client";
+import { auth } from "../../firebase/firebase.utils";
+import moment from "moment";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CdkContainer);
+
+export const socket = SocketIO(
+  process.env.NODE_ENV === "production"
+    ? process.env.REACT_APP_AXIOS_BASE_API_URL
+    : window.location.origin,
+  {
+    path: "/ws",
+    // transports: ["websocket"],
+    auth: async (callback) => {
+      const token = auth.currentUser && (await auth.currentUser.getIdToken());
+      callback({ token });
+    },
+  }
+);
+
+export function CdkContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
+  const { t } = useTranslation();
+  const [logs, setLogs] = useState([]);
+  useEffect(() => {
+    document.title = t("titles.cdk");
+    setSelectedHeader("cdk");
+    setBreadcrumbs([
+      {
+        link: "/manage/cdk",
+        label: t("titles.bc.cdk"),
+      },
+    ]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  useEffect(() => {
+    socket.on("connected", () => {
+      console.log("Connected again.");
+    });
+
+    socket.on("log-event", (payload) => {
+      setLogs((logs) => {
+        return [...logs, payload];
+      });
+    });
+
+    socket.connect();
+
+    socket.emit("set-log-level", "TRACE");
+
+    return () => {
+      socket.removeAllListeners();
+      socket.disconnect();
+    };
+  }, []);
+
+  if (!bodyshop.cdk_dealerid) return <Result status="404" />;
+
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          socket.emit("export-job", "752a4f5f-22ab-414b-b182-98d4e62227ef");
+        }}
+      >
+        Export
+      </Button>
+
+      <Button
+        onClick={() => {
+          setLogs([]);
+          socket.disconnect();
+          socket.connect();
+        }}
+      >
+        reconnect
+      </Button>
+
+      <Timeline pending={socket.connected && "Processing..."} reverse={true}>
+        {logs.map((log, idx) => (
+          <Timeline.Item key={idx}>
+            <Space wrap align="start" style={{}}>
+              <Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
+              <span>{moment(log.timestamp).format("MM/DD/YYYY HH:MM:ss")}</span>
+              <Divider type="vertical" />
+              <span>{log.message}</span>
+            </Space>
+          </Timeline.Item>
+        ))}
+      </Timeline>
+    </div>
+  );
+}
+
+function LogLevelHierarchy(level) {
+  switch (level) {
+    case "TRACE":
+      return "pink";
+    case "DEBUG":
+      return "orange";
+    case "INFO":
+      return "blue";
+    case "WARNING":
+      return "yellow";
+    case "ERROR":
+      return "red";
+    default:
+      return 0;
+  }
+}

client/src/pages/manage/manage.page.component.jsx

@@ -159,6 +159,7 @@ const EmailTest = lazy(() =>
   import("../../components/email-test/email-test-component")
 );
 const Dashboard = lazy(() => import("../dashboard/dashboard.container"));
+const Cdk = lazy(() => import("../cdk/cdk.container"));
 
 const { Content, Footer } = Layout;
 
@@ -367,6 +368,7 @@ export function Manage({ match, conflict, bodyshop }) {
       <Route exact path={`${match.path}/help`} component={Help} />
       <Route exact path={`${match.path}/emailtest`} component={EmailTest} />
       <Route exact path={`${match.path}/dashboard`} component={Dashboard} />
+      <Route exact path={`${match.path}/cdk`} component={Cdk} />
     </Suspense>
   );