feat: improve navigation header

admin/src/App.tsx

@@ -1,9 +1,10 @@
-import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Layout from "./components/layouts/Layout";
-import Dashboard from "./pages/Dashboard";
-import DAGDetails from "./pages/DAGDetails";
-import DAGList from "./pages/DAGList";
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Layout from './components/layouts/Layout';
+import Dashboard from './pages/Dashboard';
+import DAGDetails from './pages/DAGDetails';
+import DAGList from './pages/DAGList';
+import { AppBarContext } from './contexts/AppBarContext';
 
 export type Config = {
   title: string;
@@ -15,17 +16,25 @@ type Props = {
 };
 
 function App({ config }: Props) {
+  const [title, setTitle] = React.useState<string>('');
   return (
-    <BrowserRouter>
-      <Layout {...config}>
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="" element={<DAGList />} />
-          <Route path="/dags/" element={<DAGList />} />
-          <Route path="/dags/:name" element={<DAGDetails />} />
-        </Routes>
-      </Layout>
-    </BrowserRouter>
+    <AppBarContext.Provider
+      value={{
+        title,
+        setTitle,
+      }}
+    >
+      <BrowserRouter>
+        <Layout {...config}>
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="" element={<DAGList />} />
+            <Route path="/dags/" element={<DAGList />} />
+            <Route path="/dags/:name" element={<DAGDetails />} />
+          </Routes>
+        </Layout>
+      </BrowserRouter>
+    </AppBarContext.Provider>
   );
 }
 

admin/src/components/ConfigInfoTable.tsx

@@ -61,9 +61,9 @@ function ConfigInfoTable({ config }: Props) {
 export default ConfigInfoTable;
 
 const configTabColStyles = [
-  { width: '200px' },
-  { width: '200px' },
-  { width: '150px' },
-  { width: '150px' },
+  { maxWidth: '200px' },
+  { maxWidth: '200px' },
+  { maxWidth: '150px' },
+  { maxWidth: '150px' },
   {},
 ];

admin/src/components/ConfigStepTable.tsx

@@ -50,11 +50,11 @@ function ConfigStepTable({ steps }: Props) {
 export default ConfigStepTable;
 
 const StepConfigTabColStyles = [
-  { width: '200px' },
-  { width: '200px' },
-  { width: '300px' },
-  { width: '220px' },
-  { width: '150px' },
-  { width: '80px' },
+  { maxWidth: '200px' },
+  { maxWidth: '200px' },
+  { maxWidth: '300px' },
+  { maxWidth: '220px' },
+  { maxWidth: '150px' },
+  { maxWidth: '80px' },
   {},
 ];

admin/src/components/DAGHistory.tsx

@@ -49,7 +49,11 @@ function DAGHistory({ logData }: Props) {
                 <Box sx={{ mt: 3 }}>
                   <SubTitle>DAG Status</SubTitle>
                   <Box sx={{ mt: 2 }}>
-                    <StatusInfoTable status={logs[idx].Status} {...props} />
+                    <StatusInfoTable
+                      status={logs[idx].Status}
+                      file={logs[idx].File}
+                      {...props}
+                    />
                   </Box>
                 </Box>
                 <Box sx={{ mt: 3 }}>

admin/src/components/StatusInfoTable.tsx

@@ -66,11 +66,11 @@ function StatusInfoTable({ status, name, file = '' }: Props) {
 export default StatusInfoTable;
 
 const statusTabColStyles = [
-  { width: '240px' },
-  { width: '150px' },
-  { width: '150px' },
-  { width: '150px' },
-  { width: '130px' },
-  { width: '130px' },
+  { maxWidth: '240px' },
+  { maxWidth: '150px' },
+  { maxWidth: '150px' },
+  { maxWidth: '150px' },
+  { maxWidth: '130px' },
+  { maxWidth: '130px' },
   {},
 ];

admin/src/components/layouts/Layout.tsx

@@ -10,6 +10,7 @@ import Typography from '@mui/material/Typography';
 import { mainListItems } from '../../menu';
 import { Grid, IconButton } from '@mui/material';
 import icon from '../../assets/images/dagu.png';
+import { AppBarContext } from '../../contexts/AppBarContext';
 
 const drawerWidthClosed = 64;
 const drawerWidth = 240;
@@ -22,16 +23,13 @@ const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== 'open',
 })<AppBarProps>(({ theme, open }) => ({
   zIndex: theme.zIndex.drawer - 1,
-  transition: theme.transitions.create(['width', 'margin'], {
+  transition: theme.transitions.create(['width', 'margin', 'border'], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),
-  marginLeft: drawerWidthClosed,
-  width: `calc(100% - ${drawerWidthClosed}px)`,
+  width: '100%',
   ...(open && {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
+    transition: theme.transitions.create(['width', 'margin', 'border'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
@@ -82,78 +80,111 @@ function Content({ title, navbarColor, children }: DashboardContentProps) {
   const toggleDrawer = () => {
     setOpen(!open);
   };
+  const [scrolled, setScrolled] = React.useState(false);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const gradientColor = navbarColor || '#323232';
 
   return (
     <ThemeProvider theme={mdTheme}>
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', width: '100vw' }}>
         <CssBaseline />
-        <AppBar
-          position="absolute"
-          open={open}
-          elevation={0}
-          sx={{
-            borderBottom: 1,
-            borderColor: 'grey.300',
-          }}
-        >
-          <Toolbar
+        <Drawer variant="permanent" open={open}>
+          <Box
             sx={{
-              pr: '24px', // keep right padding when drawer closed
-              backgroundColor: 'white',
+              background: `linear-gradient(0deg, rgba(210,210,210,1) 0%, ${gradientColor} 100%);`,
+              height: '100%',
             }}
           >
-            <Typography
-              component="h1"
-              variant="h6"
-              gutterBottom
+            <Toolbar
               sx={{
-                fontWeight: '800',
-                color: navbarColor || '#404040',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
               }}
             >
-              {title || 'dagu'}
-            </Typography>
-          </Toolbar>
-        </AppBar>
-        <Drawer variant="permanent" open={open}>
-          <Toolbar
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconButton onClick={toggleDrawer}>
-              <img
-                src={icon}
-                alt="dagu"
-                width={64}
-                style={{
-                  maxWidth: '64px',
-                }}
-              />
-            </IconButton>
-          </Toolbar>
-          <List
-            component="nav"
-            sx={{
-              pl: '6px',
-            }}
-          >
-            {mainListItems}
-          </List>
+              <IconButton onClick={toggleDrawer}>
+                <img
+                  src={icon}
+                  alt="dagu"
+                  width={64}
+                  style={{
+                    maxWidth: '64px',
+                  }}
+                />
+              </IconButton>
+            </Toolbar>
+            <List
+              component="nav"
+              sx={{
+                pl: '6px',
+              }}
+            >
+              {mainListItems}
+            </List>
+          </Box>
         </Drawer>
         <Box
           component="main"
           sx={{
+            display: 'flex',
+            flexDirection: 'column',
             backgroundColor: 'white',
-            flexGrow: 1,
             height: '100vh',
+            width: '100%',
+            maxWidth: '100%',
             overflow: 'auto',
           }}
         >
-          <Toolbar />
-          <Grid container sx={{ mt: 4, mb: 4 }}>
+          <AppBar
+            open={open}
+            elevation={0}
+            sx={{
+              width: '100%',
+              backgroundColor: 'white',
+              borderBottom: scrolled ? 1 : 0,
+              borderColor: 'grey.300',
+              pr: 2,
+              position: 'relative',
+              display: 'block',
+            }}
+          >
+            <Toolbar
+              sx={{
+                width: '100%',
+                backgroundColor: 'white',
+                display: 'flex',
+                direction: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flex: 1,
+              }}
+            >
+              <AppBarContext.Consumer>
+                {(context) => (
+                  <NavBarTitleText visible={scrolled}>
+                    {context.title}
+                  </NavBarTitleText>
+                )}
+              </AppBarContext.Consumer>
+              <NavBarTitleText>{title || 'dagu'}</NavBarTitleText>
+            </Toolbar>
+          </AppBar>
+          <Grid
+            container
+            ref={containerRef}
+            sx={{
+              flex: 1,
+              pt: 2,
+              pb: 4,
+              overflow: 'auto',
+            }}
+            onScroll={() => {
+              const curr = containerRef.current;
+              if (curr) {
+                setScrolled(curr.scrollTop > 54);
+              }
+            }}
+          >
             {children}
           </Grid>
         </Box>
@@ -162,6 +193,30 @@ function Content({ title, navbarColor, children }: DashboardContentProps) {
   );
 }
 
+type NavBarTitleTextProps = {
+  children: string;
+  visible?: boolean;
+};
+
+const NavBarTitleText = ({
+  children,
+  visible = true,
+}: NavBarTitleTextProps) => (
+  <Typography
+    component="h1"
+    variant="h6"
+    gutterBottom
+    sx={{
+      fontWeight: '800',
+      color: '#404040',
+      opacity: visible ? 1 : 0,
+      transition: 'opacity 0.2s',
+    }}
+  >
+    {children}
+  </Typography>
+);
+
 type DashboardProps = DashboardContentProps;
 
 export default function Layout({ children, ...props }: DashboardProps) {

admin/src/consts.ts

@@ -1,17 +1,17 @@
-import { CSSProperties } from "react";
-import { NodeStatus } from "./models/Node";
-import { SchedulerStatus } from "./models/Status";
+import { CSSProperties } from 'react';
+import { NodeStatus } from './models/Node';
+import { SchedulerStatus } from './models/Status';
 
 type statusColorMapping = {
   [key: number]: CSSProperties;
 };
 export const statusColorMapping: statusColorMapping = {
-  [SchedulerStatus.None]: { backgroundColor: "lightblue" },
-  [SchedulerStatus.Running]: { backgroundColor: "lime" },
-  [SchedulerStatus.Error]: { backgroundColor: "red", color: "white" },
-  [SchedulerStatus.Cancel]: { backgroundColor: "pink" },
-  [SchedulerStatus.Success]: { backgroundColor: "green", color: "white" },
-  [SchedulerStatus.Skipped_Unused]: { backgroundColor: "gray", color: "white" },
+  [SchedulerStatus.None]: { backgroundColor: 'lightblue' },
+  [SchedulerStatus.Running]: { backgroundColor: 'lime' },
+  [SchedulerStatus.Error]: { backgroundColor: 'red', color: 'white' },
+  [SchedulerStatus.Cancel]: { backgroundColor: 'pink' },
+  [SchedulerStatus.Success]: { backgroundColor: 'green', color: 'white' },
+  [SchedulerStatus.Skipped_Unused]: { backgroundColor: 'gray', color: 'white' },
 };
 
 export const nodeStatusColorMapping = {
@@ -24,14 +24,14 @@ export const nodeStatusColorMapping = {
 };
 
 export const stepTabColStyles = [
-  { width: "60px" },
-  { width: "200px" },
-  { width: "150px" },
-  { width: "150px" },
-  { width: "150px" },
-  { width: "130px" },
-  { width: "130px" },
-  { width: "100px" },
-  { width: "100px" },
+  { maxWidth: '60px' },
+  { maxWidth: '200px' },
+  { maxWidth: '150px' },
+  { maxWidth: '150px' },
+  { maxWidth: '150px' },
+  { maxWidth: '130px' },
+  { maxWidth: '130px' },
+  { maxWidth: '100px' },
+  { maxWidth: '100px' },
   {},
 ];