added status and renamed components

interface/src/framework/system/ESPSystemStatus.tsx

@@ -133,6 +133,7 @@ const ESPSystemStatus: FC = () => {
               secondary={formatNumber(data.fs_used) + ' KB / ' + formatNumber(data.fs_free) + ' KB'}
             />
           </ListItem>
+          <Divider variant="inset" component="li" />
         </List>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>

interface/src/framework/system/System.tsx

@@ -7,25 +7,25 @@ import type { FC } from 'react';
 import { useRouterTab, RouterTabs, useLayoutTitle } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
-import Activity from 'project/Activity';
+import SystemActivity from 'project/SystemActivity';
 
-const Status: FC = () => {
+const System: FC = () => {
   const { LL } = useI18nContext();
 
-  useLayoutTitle(LL.STATUS_OF(''));
+  useLayoutTitle(LL.SYSTEM(0));
 
   const { routerTab } = useRouterTab();
 
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.SYSTEM(1)} />
+        <Tab value="status" label={LL.STATUS_OF('')} />
         <Tab value="activity" label={LL.ACTIVITY()} />
         <Tab value="log" label={LL.LOG_OF('')} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<SystemStatus />} />
-        <Route path="activity" element={<Activity />} />
+        <Route path="activity" element={<SystemActivity />} />
         <Route path="log" element={<SystemLog />} />
         <Route path="*" element={<Navigate replace to="status" />} />
       </Routes>
@@ -33,4 +33,4 @@ const Status: FC = () => {
   );
 };
 
-export default Status;
+export default System;

interface/src/framework/system/SystemLog.tsx

@@ -11,7 +11,7 @@ import { addAccessTokenParameter } from 'api/authentication';
 import { EVENT_SOURCE_ROOT } from 'api/endpoints';
 import * as SystemApi from 'api/system';
 
-import { SectionContent, FormLoader, BlockFormControlLabel, BlockNavigation } from 'components';
+import { SectionContent, FormLoader, BlockFormControlLabel, BlockNavigation, useLayoutTitle } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
 import { LogLevel } from 'types';
@@ -50,6 +50,8 @@ const levelLabel = (level: LogLevel) => {
 const SystemLog: FC = () => {
   const { LL } = useI18nContext();
 
+  useLayoutTitle(LL.LOG_OF(''));
+
   const { loadData, data, updateDataValue, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
     useRest<LogSettings>({
       read: SystemApi.readLogSettings,

interface/src/framework/system/SystemStatus.tsx

@@ -1,7 +1,9 @@
 import BuildIcon from '@mui/icons-material/Build';
 import CancelIcon from '@mui/icons-material/Cancel';
+import CastIcon from '@mui/icons-material/Cast';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
+import MemoryIcon from '@mui/icons-material/Memory';
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import TimerIcon from '@mui/icons-material/Timer';
@@ -29,10 +31,12 @@ import { toast } from 'react-toastify';
 import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
+import ListMenuItem from 'components/layout/ListMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import * as EMSESP from 'project/api';
 import { busConnectionStatus } from 'project/types';
+import { NTPSyncStatus } from 'types';
 
 const SystemStatus: FC = () => {
   const { LL } = useI18nContext();
@@ -71,6 +75,10 @@ const SystemStatus: FC = () => {
     return formatted;
   };
 
+  function formatNumber(num: number) {
+    return new Intl.NumberFormat().format(num);
+  }
+
   const busStatus = () => {
     if (data) {
       switch (data.status) {
@@ -85,8 +93,6 @@ const SystemStatus: FC = () => {
     return 'Unknown';
   };
 
-  // export const isConnected = ({ status }: Status) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
-
   const busStatusHighlight = () => {
     switch (data.status) {
       case busConnectionStatus.BUS_STATUS_TX_ERRORS:
@@ -100,6 +106,34 @@ const SystemStatus: FC = () => {
     }
   };
 
+  const ntpStatus = () => {
+    switch (data.ntp_status) {
+      case NTPSyncStatus.NTP_DISABLED:
+        return LL.NOT_ENABLED();
+      case NTPSyncStatus.NTP_INACTIVE:
+        return LL.INACTIVE(0);
+      case NTPSyncStatus.NTP_ACTIVE:
+        return LL.ACTIVE();
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
+  const ntpStatusHighlight = () => {
+    switch (data.ntp_status) {
+      case NTPSyncStatus.NTP_DISABLED:
+        return theme.palette.info.main;
+      case NTPSyncStatus.NTP_INACTIVE:
+        return theme.palette.error.main;
+      case NTPSyncStatus.NTP_ACTIVE:
+        return theme.palette.success.main;
+      default:
+        return theme.palette.error.main;
+    }
+  };
+
+  const activeHighlight = (value: boolean) => (value ? theme.palette.success.main : theme.palette.info.main);
+
   const scan = async () => {
     await scanDevices()
       .then(() => {
@@ -136,27 +170,7 @@ const SystemStatus: FC = () => {
         <List>
           <ListItem>
             <ListItemAvatar>
-              <Avatar>
-                <BuildIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.EMS_ESP_VER()} secondary={data.emsesp_version} />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                <TimerIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.UPTIME()} secondary={formatDurationSec(data.uptime)} />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: busStatusHighlight() }}>
+              <Avatar sx={{ bgcolor: busStatusHighlight(), color: 'white' }}>
                 <DirectionsBusIcon />
               </Avatar>
             </ListItemAvatar>
@@ -166,7 +180,7 @@ const SystemStatus: FC = () => {
 
           <ListItem>
             <ListItemAvatar>
-              <Avatar sx={{ bgcolor: theme.palette.success.main }}>
+              <Avatar sx={{ bgcolor: '#5d89f7', color: 'white' }}>
                 <DeviceHubIcon />
               </Avatar>
             </ListItemAvatar>
@@ -191,7 +205,67 @@ const SystemStatus: FC = () => {
               </Button>
             )}
           </ListItem>
+          <Divider variant="inset" component="li" />
 
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
+                <TimerIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.UPTIME()} secondary={formatDurationSec(data.uptime)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={BuildIcon}
+            bgcolor="#134ba2"
+            label={LL.EMS_ESP_VER()}
+            text={data.emsesp_version}
+            to="/settings/ems-esp"
+          />
+          <Divider variant="inset" component="li" />
+
+          {/* TODO: translate */}
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={MemoryIcon}
+            bgcolor="#68374d"
+            label="System Memory"
+            text={formatNumber(data.free_heap) + ' KB'}
+            to="/settings/espsystemstatus"
+          />
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={DeviceHubIcon}
+            bgcolor={activeHighlight(data.mqtt_status)}
+            label={LL.STATUS_OF('MQTT')}
+            text={data.mqtt_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+            to="/settings/mqtt/status"
+          />
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={DeviceHubIcon}
+            bgcolor={ntpStatusHighlight()}
+            label={LL.STATUS_OF('NTP')}
+            text={ntpStatus()}
+            to="/settings/ntp/status"
+          />
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={CastIcon}
+            bgcolor={activeHighlight(data.ota_status)}
+            label={LL.STATUS_OF('OTA')}
+            text={data.ota_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+            to="/settings/ota"
+          />
           <Divider variant="inset" component="li" />
         </List>