Merge pull request #1881 from proddy/dev

add back button

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,5 +1,7 @@
 import type { FC } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
 import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
 
@@ -10,30 +12,52 @@ interface LayoutAppBarProps {
   onToggleDrawer: () => void;
 }
 
-const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => (
+const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
-  <AppBar
+  const pathnames = useLocation()
-    position="fixed"
+    .pathname.split('/')
-    sx={{
+    .filter((x) => x);
-      width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
+  const navigate = useNavigate();
-      ml: { md: `${DRAWER_WIDTH}px` },
+  let show_back = false;
-      boxShadow: 'none',
+  if (pathnames.length > 1) {
-      backgroundColor: '#2e586a'
+    show_back = pathnames[0] !== 'system' || pathnames[1] === 'espsystemstatus';
-    }}
+  }
-  >
+
-    <Toolbar>
+  return (
-      <IconButton
+    <AppBar
-        color="inherit"
+      position="fixed"
-        edge="start"
+      sx={{
-        onClick={onToggleDrawer}
+        width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
-        sx={{ mr: 2, display: { md: 'none' } }}
+        ml: { md: `${DRAWER_WIDTH}px` },
-      >
+        boxShadow: 'none',
-        <MenuIcon />
+        backgroundColor: '#2e586a'
-      </IconButton>
+      }}
-      <Typography variant="h6" noWrap component="div">
+    >
-        {title}
+      <Toolbar>
-      </Typography>
+        <IconButton
-    </Toolbar>
+          color="inherit"
-  </AppBar>
+          edge="start"
-);
+          onClick={onToggleDrawer}
+          sx={{ mr: 2, display: { md: 'none' } }}
+        >
+          <MenuIcon />
+        </IconButton>
+
+        {show_back && (
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={() => navigate(pathnames[0])}
+          >
+            <ArrowBackIcon />
+          </IconButton>
+        )}
+
+        <Typography variant="h6" noWrap component="div">
+          {title}
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  );
+};
 
 export default LayoutAppBar;

interface/src/framework/system/SystemLog.tsx

@@ -75,7 +75,7 @@ const levelLabel = (level: LogLevel) => {
 const SystemLog: FC = () => {
   const { LL } = useI18nContext();
 
-  useLayoutTitle(LL.LOG_OF(''));
+  useLayoutTitle(LL.SYSTEM(0));
 
   const {
     loadData,

interface/src/framework/system/SystemStatus.tsx

@@ -47,7 +47,7 @@ import RestartMonitor from './RestartMonitor';
 const SystemStatus: FC = () => {
   const { LL } = useI18nContext();
 
-  useLayoutTitle(LL.STATUS_OF(''));
+  useLayoutTitle(LL.SYSTEM(0));
 
   const { me } = useContext(AuthenticatedContext);
 

interface/src/project/SystemActivity.tsx

@@ -27,7 +27,7 @@ const SystemActivity: FC = () => {
 
   const { LL } = useI18nContext();
 
-  useLayoutTitle(LL.ACTIVITY());
+  useLayoutTitle(LL.SYSTEM(0));
 
   const stats_theme = tableTheme({
     Table: `