more tables

interface/src/framework/security/ManageUsersForm.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext, useState } from 'react';
 
-import { Button, IconButton, Table, TableBody, TableCell, TableFooter, TableHead, TableRow } from '@mui/material';
+import { Button, IconButton, Box } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import DeleteIcon from '@mui/icons-material/Delete';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
@@ -9,6 +9,10 @@ import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import VpnKeyIcon from '@mui/icons-material/VpnKey';
 
+import { Table } from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
+
 import * as SecurityApi from '../../api/security';
 import { SecuritySettings, User } from '../../types';
 import { ButtonRow, FormLoader, MessageBox, SectionContent } from '../../components';
@@ -19,16 +23,6 @@ import { AuthenticatedContext } from '../../contexts/authentication';
 import GenerateToken from './GenerateToken';
 import UserForm from './UserForm';
 
-function compareUsers(a: User, b: User) {
-  if (a.username < b.username) {
-    return -1;
-  }
-  if (a.username > b.username) {
-    return 1;
-  }
-  return 0;
-}
-
 const ManageUsersForm: FC = () => {
   const { loadData, saving, data, setData, saveData, errorMessage } = useRest<SecuritySettings>({
     read: SecurityApi.readSecuritySettings,
@@ -40,6 +34,45 @@ const ManageUsersForm: FC = () => {
   const [generatingToken, setGeneratingToken] = useState<string>();
   const authenticatedContext = useContext(AuthenticatedContext);
 
+  const table_theme = useTheme({
+    BaseRow: `
+      font-size: 14px;
+      color: white;
+  `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      border-bottom: 1px solid #e0e0e0;
+    `,
+    Row: `
+      &:nth-of-type(odd) {
+        background-color: #303030;
+      }
+      &:nth-of-type(even) {
+        background-color: #1e1e1e;
+      }
+      border-top: 1px solid #565656;
+      border-bottom: 1px solid #565656;
+      position: relative;
+      z-index: 1;
+      &:not(:last-of-type) {
+        margin-bottom: -1px;
+      }
+      &:not(:first-of-type) {
+        margin-top: -1px;
+      }
+      &:hover {
+        color: white;
+      }
+      `,
+    BaseCell: `
+      border-top: 1px solid transparent;
+      border-right: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+    `
+  });
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -48,13 +81,14 @@ const ManageUsersForm: FC = () => {
     const noAdminConfigured = () => !data.users.find((u) => u.admin);
 
     const removeUser = (toRemove: User) => {
-      const users = data.users.filter((u) => u.username !== toRemove.username);
+      const users = data.users.filter((u) => u.id !== toRemove.id);
       setData({ ...data, users });
     };
 
     const createUser = () => {
       setCreating(true);
       setUser({
+        id: '',
         username: '',
         password: '',
         admin: true
@@ -72,7 +106,7 @@ const ManageUsersForm: FC = () => {
 
     const doneEditingUser = () => {
       if (user) {
-        const users = [...data.users.filter((u) => u.username !== user.username), user];
+        const users = [...data.users.filter((u) => u.id !== user.id), user];
         setData({ ...data, users });
         setUser(undefined);
       }
@@ -82,8 +116,8 @@ const ManageUsersForm: FC = () => {
       setGeneratingToken(undefined);
     };
 
-    const generateToken = (username: string) => {
-      setGeneratingToken(username);
+    const generateToken = (id: string) => {
+      setGeneratingToken(id);
     };
 
     const onSubmit = async () => {
@@ -93,66 +127,71 @@ const ManageUsersForm: FC = () => {
 
     return (
       <>
-        <Table size="small">
-          <TableHead>
-            <TableRow>
-              <TableCell>Username</TableCell>
-              <TableCell align="center">is Admin?</TableCell>
-              <TableCell />
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {data.users.sort(compareUsers).map((u) => (
-              <TableRow key={u.username}>
-                <TableCell component="th" scope="row">
-                  {u.username}
-                </TableCell>
-                <TableCell align="center">{u.admin ? <CheckIcon /> : <CloseIcon />}</TableCell>
-                <TableCell align="center">
-                  <IconButton
-                    size="small"
-                    disabled={!authenticatedContext.me.admin}
-                    aria-label="Generate Token"
-                    onClick={() => generateToken(u.username)}
-                  >
-                    <VpnKeyIcon />
-                  </IconButton>
-                  <IconButton size="small" aria-label="Delete" onClick={() => removeUser(u)}>
-                    <DeleteIcon />
-                  </IconButton>
-                  <IconButton size="small" aria-label="Edit" onClick={() => editUser(u)}>
-                    <EditIcon />
-                  </IconButton>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={2} />
-              <TableCell align="center">
-                <Button startIcon={<PersonAddIcon />} variant="outlined" color="secondary" onClick={createUser}>
-                  Add
-                </Button>
-              </TableCell>
-            </TableRow>
-          </TableFooter>
+        <Table data={{ nodes: data.users }} theme={table_theme}>
+          {(tableList: any) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell>USERNAME</HeaderCell>
+                  <HeaderCell>IS ADMIN</HeaderCell>
+                  <HeaderCell />
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((u: User, index: number) => (
+                  <Row key={u.id} item={u}>
+                    <Cell>{u.id}</Cell>
+                    <Cell>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell>
+                    <Cell>
+                      <IconButton
+                        size="small"
+                        disabled={!authenticatedContext.me.admin}
+                        aria-label="Generate Token"
+                        onClick={() => generateToken(u.id)}
+                      >
+                        <VpnKeyIcon />
+                      </IconButton>
+                      <IconButton size="small" aria-label="Delete" onClick={() => removeUser(u)}>
+                        <DeleteIcon />
+                      </IconButton>
+                      <IconButton size="small" aria-label="Edit" onClick={() => editUser(u)}>
+                        <EditIcon />
+                      </IconButton>
+                    </Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
         </Table>
+
         {noAdminConfigured() && (
           <MessageBox level="warning" message="You must have at least one admin user configured" my={2} />
         )}
-        <ButtonRow>
-          <Button
-            startIcon={<SaveIcon />}
-            disabled={saving || noAdminConfigured()}
-            variant="outlined"
-            color="primary"
-            type="submit"
-            onClick={onSubmit}
-          >
-            Save
-          </Button>
-        </ButtonRow>
+
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
+            <Button
+              startIcon={<SaveIcon />}
+              disabled={saving || noAdminConfigured()}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={onSubmit}
+            >
+              Save
+            </Button>
+          </Box>
+
+          <Box flexWrap="nowrap" whiteSpace="nowrap">
+            <ButtonRow>
+              <Button startIcon={<PersonAddIcon />} variant="outlined" color="secondary" onClick={createUser}>
+                Add
+              </Button>
+            </ButtonRow>
+          </Box>
+        </Box>
+
         <GenerateToken username={generatingToken} onClose={closeGenerateToken} />
         <UserForm
           user={user}

interface/src/project/DashboardStatus.tsx

@@ -3,25 +3,23 @@ import { useSnackbar } from 'notistack';
 import {
   Avatar,
   Button,
-  Table,
-  TableContainer,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
   List,
   ListItem,
   ListItemAvatar,
   ListItemText,
-  Theme,
-  useTheme,
   Box,
   Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle
+  DialogTitle,
+  Theme,
+  useTheme
 } from '@mui/material';
 
+import { Table } from '@table-library/react-table-library/table';
+import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
+import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
+
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
@@ -32,14 +30,12 @@ import { AuthenticatedContext } from '../contexts/authentication';
 
 import { ButtonRow, FormLoader, SectionContent } from '../components';
 
-import { Status, busConnectionStatus } from './types';
+import { Status, busConnectionStatus, Stat } from './types';
 
-import { formatDurationSec, pluralize } from '../utils';
+import { formatDurationSec, pluralize, extractErrorMessage, useRest } from '../utils';
 
 import * as EMSESP from './api';
 
-import { extractErrorMessage, useRest } from '../utils';
-
 export const isConnected = ({ status }: Status) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
 
 const busStatusHighlight = ({ status }: Status, theme: Theme) => {
@@ -60,7 +56,7 @@ const busStatus = ({ status }: Status) => {
     case busConnectionStatus.BUS_STATUS_CONNECTED:
       return 'Connected';
     case busConnectionStatus.BUS_STATUS_TX_ERRORS:
-      return 'Tx issues - try a different Tx-Mode';
+      return 'Tx issues - try a different Tx Mode';
     case busConnectionStatus.BUS_STATUS_OFFLINE:
       return 'Disconnected';
     default:
@@ -68,41 +64,17 @@ const busStatus = ({ status }: Status) => {
   }
 };
 
-const formatRow = (name: string, success: number, fail: number, quality: number) => {
-  if (success === 0 && fail === 0) {
-    return (
-      <TableRow>
-        <TableCell sx={{ color: 'gray' }}>{name}</TableCell>
-        <TableCell />
-        <TableCell />
-        <TableCell />
-      </TableRow>
-    );
+const showQuality = (stat: Stat) => {
+  if (stat.q === 0 || stat.s + stat.f === 0) {
+    return;
   }
-
-  return (
-    <TableRow>
-      <TableCell>{name}</TableCell>
-      <TableCell>{Intl.NumberFormat().format(success)}</TableCell>
-      <TableCell>{Intl.NumberFormat().format(fail)}</TableCell>
-      {showQuality(quality)}
-    </TableRow>
-  );
-};
-
-const showQuality = (quality: number) => {
-  if (quality === 0) {
-    return <TableCell />;
+  if (stat.q === 100) {
+    return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
   }
-
-  if (quality === 100) {
-    return <TableCell sx={{ color: '#00FF7F' }}>{quality}%</TableCell>;
-  }
-
-  if (quality >= 95) {
-    return <TableCell sx={{ color: 'orange' }}>{quality}%</TableCell>;
+  if (stat.q >= 95) {
+    return <div style={{ color: 'orange' }}>{stat.q}%</div>;
   } else {
-    return <TableCell sx={{ color: 'red' }}>{quality}%</TableCell>;
+    return <div style={{ color: 'red' }}>{stat.q}%</div>;
   }
 };
 
@@ -115,6 +87,48 @@ const DashboardStatus: FC = () => {
 
   const { me } = useContext(AuthenticatedContext);
 
+  const stats_theme = tableTheme({
+    BaseRow: `
+      font-size: 14px;
+      color: white;
+  `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      border-bottom: 1px solid #e0e0e0;
+    `,
+    Row: `
+      &:nth-of-type(odd) {
+        background-color: #303030;
+      }
+      &:nth-of-type(even) {
+        background-color: #1e1e1e;
+      }
+      border-top: 1px solid #565656;
+      border-bottom: 1px solid #565656;
+      position: relative;
+      z-index: 1;
+      &:not(:last-of-type) {
+        margin-bottom: -1px;
+      }
+      &:not(:first-of-type) {
+        margin-top: -1px;
+      }
+      &:hover {
+        color: white;
+      }
+      `,
+    BaseCell: `
+      border-top: 1px solid transparent;
+      border-right: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      &:nth-of-type(1) {
+        flex: 1;
+      }
+    `
+  });
+
   useEffect(() => {
     const timer = setInterval(() => loadData(), 30000);
     return () => {
@@ -183,27 +197,30 @@ const DashboardStatus: FC = () => {
             />
           </ListItem>
           <Box m={3}></Box>
-          <TableContainer>
-            <Table size="small">
-              <TableHead>
-                <TableRow>
-                  <TableCell></TableCell>
-                  <TableCell>SUCCESS</TableCell>
-                  <TableCell>FAIL</TableCell>
-                  <TableCell>QUALITY</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {formatRow('EMS Telegrams Received (Rx)', data.rx_received, data.rx_fails, data.rx_quality)}
-                {formatRow('EMS Reads (Tx)', data.tx_reads, data.tx_read_fails, data.tx_read_quality)}
-                {formatRow('EMS Writes (Tx)', data.tx_writes, data.tx_write_fails, data.tx_write_quality)}
-                {formatRow('Temperature Sensor Reads', data.sensor_reads, data.sensor_fails, data.sensor_quality)}
-                {formatRow('Analog Sensor Reads', data.analog_reads, data.analog_fails, data.analog_quality)}
-                {formatRow('MQTT Publishes', data.mqtt_count, data.mqtt_fails, data.mqtt_quality)}
-                {formatRow('API Calls', data.api_calls, data.api_fails, data.api_quality)}
-              </TableBody>
-            </Table>
-          </TableContainer>
+          <Table data={{ nodes: data.stats }} theme={stats_theme} layout={{ custom: true }}>
+            {(tableList: any) => (
+              <>
+                <Header>
+                  <HeaderRow>
+                    <HeaderCell></HeaderCell>
+                    <HeaderCell>SUCCESS</HeaderCell>
+                    <HeaderCell>FAIL</HeaderCell>
+                    <HeaderCell>QUALITY</HeaderCell>
+                  </HeaderRow>
+                </Header>
+                <Body>
+                  {tableList.map((stat: Stat, index: number) => (
+                    <Row key={stat.id} item={stat}>
+                      <Cell>{stat.id}</Cell>
+                      <Cell>{Intl.NumberFormat().format(stat.s)}</Cell>
+                      <Cell>{Intl.NumberFormat().format(stat.f)}</Cell>
+                      <Cell>{showQuality(stat)}</Cell>
+                    </Row>
+                  ))}
+                </Body>
+              </>
+            )}
+          </Table>
         </List>
         {renderScanDialog()}
         <Box display="flex" flexWrap="wrap">

interface/src/project/types.ts

@@ -38,36 +38,21 @@ export enum busConnectionStatus {
   BUS_STATUS_OFFLINE = 2
 }
 
+export interface Stat {
+  id: string; // name
+  s: number; // success
+  f: number;  // fail
+  q: number;  // quality
+}
 export interface Status {
   status: busConnectionStatus;
   tx_mode: number;
-  rx_received: number;
-  tx_reads: number;
-  tx_writes: number;
-  rx_quality: number;
-  tx_read_quality: number;
-  tx_write_quality: number;
-  tx_read_fails: number;
-  tx_write_fails: number;
-  rx_fails: number;
-  sensor_fails: number;
-  sensor_reads: number;
-  sensor_quality: number;
-  analog_fails: number;
-  analog_reads: number;
-  analog_quality: number;
-  mqtt_count: number;
-  mqtt_fails: number;
-  mqtt_quality: number;
-  api_calls: number;
-  api_fails: number;
-  api_quality: number;
+  uptime: number;
   num_devices: number;
   num_sensors: number;
   num_analogs: number;
-  uptime: number;
+  stats: Stat[];
 }
-
 export interface Device {
   id: string; // id index
   t: string; // type

interface/src/types/security.ts

@@ -1,4 +1,5 @@
 export interface User {
+  id: string; // needed for Table
   username: string;
   password: string;
   admin: boolean;