IO-233 WS Updates and templat eadditions

2021-06-25 07:42:49 -07:00
parent b49555e111
commit 2172cc2d04
13 changed files with 203 additions and 89 deletions
--- a/client/src/pages/dms/dms.container.jsx
+++ b/client/src/pages/dms/dms.container.jsx
@@ -0,0 +1,139 @@
+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)(DmsContainer);
+
+export const socket = SocketIO(
+  process.env.NODE_ENV === "production"
+    ? process.env.REACT_APP_AXIOS_BASE_API_URL
+    : window.location.origin,
+  {
+    path: "/ws",
+    auth: async (callback) => {
+      const token = auth.currentUser && (await auth.currentUser.getIdToken());
+      callback({ token });
+    },
+  }
+);
+
+export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
+  const { t } = useTranslation();
+  const [logs, setLogs] = useState([]);
+
+  useEffect(() => {
+    document.title = t("titles.dms");
+    setSelectedHeader("dms");
+    setBreadcrumbs([
+      {
+        link: "/manage/dms",
+        label: t("titles.bc.dms"),
+      },
+    ]);
+  }, [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" />;
+
+  const dmsType = determineDmsType(bodyshop);
+
+  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>
+
+      <Timeline pending={socket.connected && "Processing..."} reverse={true}>
+        {logs.map((log, idx) => (
+          <Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>
+            <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;
+  }
+}
+
+const determineDmsType = (bodyshop) => {
+  if (bodyshop.cdk_dealerid) return "cdk";
+  else {
+    return "pbs";
+  }
+};