IO-233 CDK Allocations Summary

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

@@ -1,16 +1,23 @@
-import { Result, Timeline, Space, Tag, Divider, Button } from "antd";
+import { useQuery } from "@apollo/client";
+import { Button, Result } from "antd";
+import queryString from "query-string";
 import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
 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 DmsLogEvents from "../../components/dms-log-events/dms-log-events.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { auth } from "../../firebase/firebase.utils";
+import { QUERY_JOB_EXPORT_DMS } from "../../graphql/jobs.queries";
 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,
@@ -39,6 +46,13 @@ export const socket = SocketIO(
 export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   const [logs, setLogs] = useState([]);
+  const search = queryString.parse(useLocation().search);
+  const { jobId } = search;
+
+  const { loading, error, data } = useQuery(QUERY_JOB_EXPORT_DMS, {
+    variables: { id: jobId },
+    skip: !jobId,
+  });
 
   useEffect(() => {
     document.title = t("titles.dms");
@@ -71,10 +85,13 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     };
   }, []);
 
-  if (!bodyshop.cdk_dealerid) return <Result status="404" />;
+  if (!jobId || !bodyshop.cdk_dealerid) return <Result status="404" />;
 
   const dmsType = determineDmsType(bodyshop);
 
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
   return (
     <div>
       <Button
@@ -98,39 +115,18 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
         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>
+      <DmsAllocationsSummary
+        socket={socket}
+        job={data ? data.jobs_by_pk : null}
+      />
+
+      <div>
+        <DmsLogEvents socket={socket} logs={logs} />
+      </div>
     </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 {