Error and Alarm list cleanup, split into seperate components; Add con…

…troller type badge to each item
Sienci-Labs · Jan 31, 2024 · c3e5039 · c3e5039
1 parent f42ff7b
commit c3e5039
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 57 deletions.
diff --git a/src/app/containers/Preferences/Safety/ErrorLogs/ErrorItem.jsx b/src/app/containers/Preferences/Safety/ErrorLogs/ErrorItem.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { VscError } from 'react-icons/vsc';
+import { BsAlarm } from 'react-icons/bs';
+import { VerticalTimelineElement } from 'react-vertical-timeline-component';
+
+import { ALARM } from 'app/constants';
+
+import styles from '../../index.styl';
+
+const colorCodes = {
+    ALARM: '#d75f5f',
+    ERROR: '#ff0000'
+};
+
+const ErrorItem = ({ log, date, time }) => {
+    return (
+        <VerticalTimelineElement
+            className={`vertical-timeline-element--work ${styles.marginUpdate}`}
+            contentStyle={{ height: 'auto', borderTop: `5px solid ${colorCodes[log.type]}` }}
+            contentArrowStyle={{ top: '42%' }}
+            iconStyle={{ top: '31%', background: colorCodes[log.type], color: '#fff' }}
+            dateClassName={styles.inbuiltDate}
+            icon={log.type === ALARM ? <BsAlarm /> : <VscError />}
+        >
+            <span className={styles.errorTag}>{log.type} - {log.source}</span>
+            <span className={styles.errorDate}>
+                {`On ${date} at ${time}`}
+            </span>
+            <p className={styles.errorReason}>
+                {`${log.type} ${log.CODE} - ${log.MESSAGE}`} <br />
+            </p>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <p>
+                    {
+                        log.line && (
+                            log.source !== 'Console' && log.source !== 'Feeder' ? `Line ${log.lineNumber}: ` : 'Line: '
+                        )
+                    }
+                    {log.line}
+                </p>
+                <p style={{ border: '1px solid #d1d5db', borderRadius: '6px', padding: '0 1rem', fontWeight: 'bold' }}>{log.controller}</p>
+            </div>
+        </VerticalTimelineElement>
+    );
+};
+
+export default ErrorItem;
diff --git a/src/app/containers/Preferences/Safety/ErrorLogs/ErrorLog.js b/src/app/containers/Preferences/Safety/ErrorLogs/ErrorLog.js
@@ -1,28 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
+
 import 'react-vertical-timeline-component/style.min.css';
-import { VscError } from 'react-icons/vsc';
-import { BsAlarm } from 'react-icons/bs';
-import uniqueID from 'lodash/uniqueId';
-import styles from '../../index.styl';
+
 import api from 'app/api';
-import { ALARM } from '../../../../constants';
-import { convertISOStringToDateAndTime } from '../../../../lib/datetime';
+
+import LogList from './LogList';
+import styles from '../../index.styl';
 
 const ErrorLog = () => {
     const [logs, setLogs] = useState([]);
 
-    const colorCodes = {
-        ALARM: '#d75f5f',
-        ERROR: '#ff0000'
-    };
-
     useEffect(() => {
         const fetchLogs = async () => {
             const res = await api.alarmList.fetch();
             const { list } = res.body;
-            setLogs(list || []);
+
+            setLogs(list.reverse() || []);
         };
         fetchLogs();
     }, []);
@@ -32,48 +26,9 @@ const ErrorLog = () => {
             <div className={styles.errorHeading}>
                 { `Errors and Alarms (${logs.length})`}
             </div>
+
             <div className={styles.errorBody}>
-                { logs.length !== 0
-                    ? (
-                        <VerticalTimeline animate={false} layout="1-column-left" className={styles.verticalTimeline}>
-                            {
-                                logs.map((log, index) => {
-                                    const [date, time] = convertISOStringToDateAndTime(log.time);
-                                    return (
-                                        <VerticalTimelineElement
-                                            className={`vertical-timeline-element--work ${styles.marginUpdate}`}
-                                            contentStyle={{ height: 'auto', borderTop: `5px solid ${colorCodes[log.type]}` }}
-                                            contentArrowStyle={{ top: '42%' }}
-                                            iconStyle={{ top: '31%', background: colorCodes[log.type], color: '#fff' }}
-                                            dateClassName={styles.inbuiltDate}
-                                            icon={log.type === ALARM ? <BsAlarm /> : <VscError />}
-                                            key={uniqueID()}
-                                        >
-                                            <span className={styles.errorTag}>{log.type} - {log.source}</span>
-                                            <span className={styles.errorDate}>
-                                                {`On ${date} at ${time}`}
-                                            </span>
-                                            <p className={styles.errorReason}>
-                                                {`${log.type} ${log.CODE} - ${log.MESSAGE}`} <br />
-                                                {
-                                                    log.line && (
-                                                        log.source !== 'Console' && log.source !== 'Feeder' ? `Line ${log.lineNumber}: ` : 'Line: '
-                                                    )
-                                                }
-                                                {log.line}
-                                            </p>
-                                        </VerticalTimelineElement>
-                                    );
-                                }).reverse()
-                            }
-                        </VerticalTimeline>
-                    )
-                    : (
-                        <div className={styles.noErrors}>
-                            No history of alarms or errors
-                        </div>
-                    )
-                }
+                <LogList logs={logs} />
             </div>
         </div>
     );

diff --git a/src/app/containers/Preferences/Safety/ErrorLogs/LogList.jsx b/src/app/containers/Preferences/Safety/ErrorLogs/LogList.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { VerticalTimeline } from 'react-vertical-timeline-component';
+import uniqueID from 'lodash/uniqueId';
+
+import ErrorItem from './ErrorItem';
+import { convertISOStringToDateAndTime } from '../../../../lib/datetime';
+
+import styles from '../../index.styl';
+
+const LogList = ({ logs }) => {
+    if (!logs || logs?.length === 0) {
+        return (
+            <div className={styles.noErrors}>
+                No history of alarms or errors
+            </div>
+        );
+    }
+
+    return (
+        <VerticalTimeline animate={false} layout="1-column-left" className={styles.verticalTimeline}>
+            {
+                logs.map((log) => {
+                    const [date, time] = convertISOStringToDateAndTime(log.time);
+
+                    const key = uniqueID();
+
+                    return (
+                        <ErrorItem
+                            log={log}
+                            date={date}
+                            time={time}
+                            key={key}
+                        />
+                    );
+                })
+            }
+        </VerticalTimeline>
+    );
+};
+
+export default LogList;
diff --git a/src/app/containers/Preferences/index.styl b/src/app/containers/Preferences/index.styl
@@ -600,9 +600,6 @@
       .errorTag{
         font-weight: 800;
         font-size: 1.2rem;
-      }
-      .errorReason{
-
       }
       .errorDate{
         float: right;