IO-233 Base websocket setup for CDK.

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -395,7 +395,7 @@ export function JobLinesComponent({
                 setState({
                   ...state,
                   filteredInfo: {
-                    part_type: ["PAN,PAL,PAA,PAP,PAS,PASL"],
+                    part_type: ["PAN,PAC,PAR,PAL,PAA,PAM,PAP,PAS,PASL"],
                   },
                 });
               }}

client/src/graphql/bodyshop.queries.js

@@ -89,6 +89,7 @@ export const QUERY_BODYSHOP = gql`
       website
       jc_hourly_rates
       md_jobline_presets
+      cdk_dealerid
       employees {
         id
         active
@@ -175,6 +176,7 @@ export const UPDATE_SHOP = gql`
         website
         jc_hourly_rates
         md_jobline_presets
+        cdk_dealerid
         employees {
           id
           first_name

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>
   );
 

client/src/redux/dms/dms.actions.js

@@ -0,0 +1,6 @@
+import DmsActions from "./dms.types";
+
+export const endLoading = (options) => ({
+  //  type: DmsActions.END_LOADING,
+  payload: options,
+});

client/src/redux/dms/dms.reducer.js

@@ -0,0 +1,20 @@
+import DmsActionTypes from "./dms.types";
+
+const INITIAL_STATE = {
+  eventLog: [],
+};
+
+const dmsReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    // case ApplicationActionTypes.SET_SELECTED_HEADER:
+    //   return {
+    //     ...state,
+    //     selectedHeader: action.payload,
+    //   };
+
+    default:
+      return state;
+  }
+};
+
+export default dmsReducer;

client/src/redux/dms/dms.sagas.js

@@ -0,0 +1,14 @@
+import { all, call } from "redux-saga/effects";
+//import DmsActionTypes from "./dms.types";
+
+export function* onCalculateScheduleLoad() {
+  //   yield takeLatest(
+  //     DmsActionTypes.CALCULATE_SCHEDULE_LOAD,
+  //     calculateScheduleLoad
+  //   );
+}
+export function* calculateScheduleLoad({ payload: end }) {}
+
+export function* dmsSagas() {
+  yield all([call()]);
+}

client/src/redux/dms/dms.selectors.js

@@ -0,0 +1,8 @@
+import { createSelector } from "reselect";
+
+const selectDms = (state) => state.dms;
+
+export const selectEventLog = createSelector(
+  [selectDms],
+  (dms) => dms.eventLog
+);

client/src/redux/dms/dms.types.js

@@ -0,0 +1,4 @@
+const DmsActionTypes = {
+  ADD_EVENT: "ADD_EVENT",
+};
+export default DmsActionTypes;