Event table prototype

Author: joconor

src/App.js

@@ -8,10 +8,12 @@ import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import DeveloperModeIcon from '@material-ui/icons/DeveloperMode'
+import { startOfToday, formatRelative } from 'date-fns'
 
 
 import './App.css';
 import Status from './Status';
+import StatusTable from './StatusTable';
 import Debug from './Debug';
 
 import { getStatus } from './api';
@@ -31,9 +33,9 @@ class App extends Component {
 
   async newSetStatusInfo() {
     try {
-      this.setState({statusJson: await getStatus()});
+      this.setState({ statusJson: await getStatus() });
     } catch (error) {
-      this.setState({error: error.message})
+      this.setState({ error: error.message })
     }
   }
 
@@ -67,7 +69,13 @@ class App extends Component {
           </Toolbar>
         </AppBar>
         <Box mx={2}>
+          { this.state.statusJson ? (
+            <Typography>
+              Last event collection &amp; analysis time {' was '.concat(formatRelative(new Date(this.state.statusJson.currentStats.lastAnalysisDate), startOfToday()))}<br />
+            </Typography>
+          ) : <br />}
           <Status statusJson={this.state.statusJson} />
+          <StatusTable />
           {this.state.showDebugInfo ? (
             <Debug debugInfo={this.state.statusJson} />
           ) : (<br />)}
@@ -77,5 +85,4 @@ class App extends Component {
   }
 }
 
-
 export default App;

src/Status.js

@@ -61,14 +61,14 @@ class Status extends Component {
           <ReferenceArea x1={firstYesterday.name} />
         </BarChart>
       </ResponsiveContainer>
-      <Typography>
+      {/* <Typography>
         Last event collection &amp; analysis time {' was '.concat(formatRelative(new Date(this.props.statusJson.currentStats.lastAnalysisDate), startOfToday()))}<br />
         <br /><u>24 Hour totals:</u><br />
         Loss of FEC: {(this.props.statusJson["24HoursAgoToNow"].CMStatus16Count) || 0}<br />
         Recovery of FEC: {(this.props.statusJson["24HoursAgoToNow"].CMStatus24Count) || 0}<br />
         T3 Timeouts: {(this.props.statusJson["24HoursAgoToNow"].T3TimeoutCount) || 0}<br />
         T4 Timeouts: {(this.props.statusJson["24HoursAgoToNow"].T4TimeoutCount) || 0}
-      </Typography>
+      </Typography> */}
     </div>)
   }
 }

src/StatusTable.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+  tablecell: {
+    fontSize: '9pt'
+  },
+});
+
+function createData(index, time, priority, description) {
+  return { index, time, priority, description };
+}
+
+const rows = [
+  createData(0, '2020-05-26, 09:00:33', 'Notice (6)', 'CM-STATUS message sent. Event Type Code: 24; Chan ID: 33 ; DSID: N/A; MAC Addr: N/A; OFDM/OFDMA Profile ID: 1 2 3 .;CM-MAC=3c:37:86:e8:47:20;CMTS-MAC=00:17:10:8d:ef:a4;CM-QOS=1.1;CM-VER=3.1;'),
+  createData(1, '2020-05-26, 09:00:24', 'Notice (6)', 'CM-STATUS message sent. Event Type Code: 16; Chan ID: 33 ; DSID: N/A; MAC Addr: N/A; OFDM/OFDMA Profile ID: 3 .;CM-MAC=3c:37:86:e8:47:20;CMTS-MAC=00:17:10:8d:ef:a4;CM-QOS=1.1;CM-VER=3.1;'),
+  createData(2, '2020-05-26, 04:24:51', 'Error (4)', 'DHCP RENEW WARNING - Field invalid in response v4 option;CM-MAC=3c:37:86:e8:47:20;CMTS-MAC=00:17:10:8d:ef:a4;CM-QOS=1.1;CM-VER=3.1;'),
+  createData(3, '2020-05-26, 04:20:37', 'Notice (6)', 'CM-STATUS message sent. Event Type Code: 24; Chan ID: 33 ; DSID: N/A; MAC Addr: N/A; OFDM/OFDMA Profile ID: 1 2 3 .;CM-MAC=3c:37:86:e8:47:20;CMTS-MAC=00:17:10:8d:ef:a4;CM-QOS=1.1;CM-VER=3.1;'),
+  createData(4, '2020-05-26, 04:20:25', 'Notice (6)', 'CM-STATUS message sent. Event Type Code: 16; Chan ID: 33 ; DSID: N/A; MAC Addr: N/A; OFDM/OFDMA Profile ID: 3 .;CM-MAC=3c:37:86:e8:47:20;CMTS-MAC=00:17:10:8d:ef:a4;CM-QOS=1.1;CM-VER=3.1;'),
+];
+
+export default function DenseTable() {
+  const classes = useStyles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table} size="small" aria-label="a dense table">
+        <TableHead>
+          <TableRow>
+            <TableCell style={{ width: "15%", padding: "6px", fontSize: "9pt" }}>Time</TableCell>
+            <TableCell style={{ width: "10%", padding: "6px", fontSize: "9pt" }}>Priority</TableCell>
+            <TableCell style={{ width: "75%", padding: "6px", fontSize: "9pt" }}>Description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.index}>
+              <TableCell style={{ width: "15%", padding: "6px", fontSize: "9pt" }} component="th" scope="row">
+                {row.time}
+              </TableCell>
+              <TableCell style={{ width: "10%", padding: "6px", fontSize: "9pt" }}>{row.priority}</TableCell>
+              <TableCell style={{ width: "75%", padding: "6px", fontSize: "9pt" }}>{row.description}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}