IO-233 Minor CDK UI Updates.

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

@@ -7,13 +7,13 @@ import {
   Result,
   Row,
   Select,
-  Space,
+  Space
 } from "antd";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation, useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
@@ -26,7 +26,7 @@ import { auth } from "../../firebase/firebase.utils";
 import { QUERY_JOB_EXPORT_DMS } from "../../graphql/jobs.queries";
 import {
   setBreadcrumbs,
-  setSelectedHeader,
+  setSelectedHeader
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
@@ -66,6 +66,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
     variables: { id: jobId },
     skip: !jobId,
   });
+  const logsRef = useRef(null);
 
   useEffect(() => {
     document.title = t("titles.dms");
@@ -151,46 +152,49 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
             socket={socket}
             jobId={jobId}
             job={data && data.jobs_by_pk}
+            logsRef={logsRef}
           />
         </Col>
 
         <DmsCustomerSelector />
 
-        <Col span={24}>
-          <Card
-            title={t("jobs.labels.dms.logs")}
-            extra={
-              <Space wrap>
-                <Select
-                  placeholder="Log Level"
-                  value={logLevel}
-                  onChange={(value) => {
-                    setLogLevel(value);
-                    socket.emit("set-log-level", value);
-                  }}
-                >
-                  <Select.Option key="TRACE">TRACE</Select.Option>
-                  <Select.Option key="DEBUG">DEBUG</Select.Option>
-                  <Select.Option key="INFO">INFO</Select.Option>
-                  <Select.Option key="WARNING">WARNING</Select.Option>
-                  <Select.Option key="ERROR">ERROR</Select.Option>
-                </Select>
-                <Button onClick={() => setLogs([])}>Clear Logs</Button>
-                <Button
-                  onClick={() => {
-                    setLogs([]);
-                    socket.disconnect();
-                    socket.connect();
-                  }}
-                >
-                  Reconnect
-                </Button>
-              </Space>
-            }
-          >
-            <DmsLogEvents socket={socket} logs={logs} />
-          </Card>
-        </Col>
+        <div ref={logsRef}>
+          <Col span={24}>
+            <Card
+              title={t("jobs.labels.dms.logs")}
+              extra={
+                <Space wrap>
+                  <Select
+                    placeholder="Log Level"
+                    value={logLevel}
+                    onChange={(value) => {
+                      setLogLevel(value);
+                      socket.emit("set-log-level", value);
+                    }}
+                  >
+                    <Select.Option key="TRACE">TRACE</Select.Option>
+                    <Select.Option key="DEBUG">DEBUG</Select.Option>
+                    <Select.Option key="INFO">INFO</Select.Option>
+                    <Select.Option key="WARNING">WARNING</Select.Option>
+                    <Select.Option key="ERROR">ERROR</Select.Option>
+                  </Select>
+                  <Button onClick={() => setLogs([])}>Clear Logs</Button>
+                  <Button
+                    onClick={() => {
+                      setLogs([]);
+                      socket.disconnect();
+                      socket.connect();
+                    }}
+                  >
+                    Reconnect
+                  </Button>
+                </Space>
+              }
+            >
+              <DmsLogEvents socket={socket} logs={logs} />
+            </Card>
+          </Col>
+        </div>
       </Row>
     </div>
   );