IO-233 CDK Allocations Summary

client/src/components/dms-log-events/dms-log-events.component.jsx

@@ -0,0 +1,55 @@
+import { Divider, Space, Tag, Timeline } from "antd";
+import moment from "moment";
+import React 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";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
+
+export function DmsLogEvents({ socket, logs, bodyshop }) {
+  return (
+    <Timeline pending 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>
+  );
+}
+
+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;
+  }
+}