Simplify UI (#460)

* fix webpack config issue

* simplify ui design

* fix button style

* update screenshots

README.md

@@ -110,22 +110,22 @@ Dagu is a powerful Cron alternative that comes with a Web UI. It allows you to d
 
   You can switch to the vertical graph with the button on the top right corner.
 
-  ![Details-TD](assets/images/ui-details2.png?raw=true)
+  ![Details-TD](assets/images/ui-details2.webp?raw=true)
 
 - **DAGs**: It shows all DAGs and the real-time status.
 
-  ![DAGs](assets/images/ui-dags.png?raw=true)
+  ![DAGs](assets/images/ui-dags.webp?raw=true)
 
 - **Search DAGs**: It greps given text across all DAGs.
-  ![History](assets/images/ui-search.png?raw=true)
+  ![History](assets/images/ui-search.webp?raw=true)
 
 - **Execution History**: It shows past execution results and logs.
 
-  ![History](assets/images/ui-history.png?raw=true)
+  ![History](assets/images/ui-history.webp?raw=true)
 
 - **DAG Execution Log**: It shows the detail log and standard output of each execution and step.
 
-  ![DAG Log](assets/images/ui-logoutput.png?raw=true)
+  ![DAG Log](assets/images/ui-logoutput.webp?raw=true)
 
 ## **Installation**
 
@@ -230,7 +230,7 @@ You can execute the example by pressing the `Start` button. You can see "Hello D
 
 This example workflow showcases a data pipeline typically implemented in DevOps and Data Engineering scenarios. It demonstrates an end-to-end data processing cycle starting from data acquisition and cleansing to transformation, loading, analysis, reporting, and ultimately, cleanup.
 
-![Details-TD](assets/images/example.png?raw=true)
+![Details-TD](assets/images/example.webp?raw=true)
 
 The YAML code below represents this workflow:
 

docs/source/web_interface.rst

@@ -9,21 +9,21 @@ DAG List
 
 It shows all DAGs and the real-time status.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-dags.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-dags.webp
    :alt: DAGs
    :align: center
 
 DAG Details
 ------------
 It shows the real-time status, logs, and DAG configurations. You can edit DAG configurations on a browser.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details.webp
    :alt: DAG Details
    :align: center
 
 You can switch to the vertical graph with the button on the top right corner.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details2.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details2.webp
    :alt: DAG Details (TD)
    :align: center
 
@@ -32,7 +32,7 @@ DAG Search
 
 It searches given text across all DAGs.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-search.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-search.webp
    :alt: Search DAGs
    :align: center
 
@@ -41,7 +41,7 @@ Execution History
 
 It shows past execution results and logs.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-history.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-history.webp
    :alt: Execution History
    :align: center
 
@@ -50,6 +50,6 @@ DAG Execution Log
 
 It shows the detail log and standard output of each execution and step.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-logoutput.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-logoutput.webp
    :alt: DAG Execution Log
    :align: center

ui/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>dagu</title>
+    <title>Dagu</title>
     <script>
       function getConfig() {
         return {

ui/package.json

@@ -56,6 +56,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@fontsource/inter": "^5.0.8",
     "@fontsource/roboto": "^4.5.7",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",

ui/src/App.tsx

@@ -9,6 +9,9 @@ import { SWRConfig } from 'swr';
 import fetchJson from './lib/fetchJson';
 import Search from './pages/search';
 
+import "@fontsource/inter"
+import "@fontsource/inter/100.css"
+
 export type Config = {
   title: string;
   navbarColor: string;
@@ -40,7 +43,7 @@ function App({ config }: Props) {
           <Layout {...config}>
             <Routes>
               <Route path="/" element={<Dashboard />} />
-              <Route path="" element={<DAGs />} />
+              <Route path="/dashboard" element={<Dashboard />} />
               <Route path="/dags/" element={<DAGs />} />
               <Route path="/dags/:name/*" element={<DAGDetails />} />
               <Route path="/search/" element={<Search />} />

ui/src/Layout.tsx

@@ -8,8 +8,7 @@ import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Typography from '@mui/material/Typography';
 import { mainListItems } from './menu';
-import { Grid, IconButton } from '@mui/material';
-import icon from '../../assets/images/dagu.png';
+import { Grid } from '@mui/material';
 import { AppBarContext } from './contexts/AppBarContext';
 
 const drawerWidthClosed = 64;
@@ -64,13 +63,7 @@ const Drawer = styled(MuiDrawer, {
 
 const mdTheme = createTheme({
   typography: {
-    fontFamily:
-      "'SF Pro Display','SF Compact Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
-  },
-  palette: {
-    primary: {
-      main: '#485fc7',
-    },
+    fontFamily: 'Inter',
   },
 });
 
@@ -81,12 +74,7 @@ type DashboardContentProps = {
   children?: React.ReactElement | React.ReactElement[];
 };
 
-function Content({
-  title,
-  navbarColor,
-  version,
-  children,
-}: DashboardContentProps) {
+function Content({ title, navbarColor, children }: DashboardContentProps) {
   const [open, setOpen] = React.useState(false);
   const toggleDrawer = () => {
     setOpen(!open);
@@ -106,41 +94,7 @@ function Content({
               height: '100%',
             }}
           >
-            <Toolbar
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <IconButton onClick={toggleDrawer}>
-                <img
-                  src={icon}
-                  alt="dagu"
-                  width={64}
-                  style={{
-                    maxWidth: '64px',
-                  }}
-                />
-              </IconButton>
-            </Toolbar>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: '#fff',
-                overflowWrap: 'break-word',
-              }}
-            >
-              {version ? `v${version}` : "dev"}
-            </Box>
-            <List
-              component="nav"
-              sx={{
-                pl: '6px',
-              }}
-            >
+            <List component="nav" sx={{ pl: '6px' }}>
               {mainListItems}
             </List>
           </Box>
@@ -162,18 +116,17 @@ function Content({
             elevation={0}
             sx={{
               width: '100%',
-              backgroundColor: 'white',
+              backgroundColor: '#F2F4F8',
               borderBottom: scrolled ? 1 : 0,
               borderColor: 'grey.300',
-              pr: 2,
+              pr: 3,
               position: 'relative',
               display: 'block',
             }}
           >
             <Toolbar
               sx={{
                 width: '100%',
-                backgroundColor: 'white',
                 display: 'flex',
                 direction: 'row',
                 justifyContent: 'space-between',
@@ -188,17 +141,17 @@ function Content({
                   </NavBarTitleText>
                 )}
               </AppBarContext.Consumer>
-              <NavBarTitleText>{title || 'dagu'}</NavBarTitleText>
+              <NavBarTitleText>{title || 'Dagu'}</NavBarTitleText>
             </Toolbar>
           </AppBar>
           <Grid
             container
             ref={containerRef}
             sx={{
               flex: 1,
-              pt: 2,
               pb: 4,
               overflow: 'auto',
+              backgroundColor: '#F2F4F8',
             }}
             onScroll={() => {
               const curr = containerRef.current;

ui/src/components/atoms/ActionButton.tsx

@@ -18,7 +18,7 @@ export default function ActionButton({
 }: ActionButtonProps) {
   return label ? (
     <Button
-      variant="contained"
+      variant="outlined"
       color="primary"
       size="small"
       startIcon={icon}

ui/src/components/atoms/BorderedBox.tsx

@@ -13,8 +13,8 @@ export default function BorderedBox({
     <Box
       sx={{
         border: 1,
-        borderColor: '#485fc7',
-        borderRadius: '6px',
+        borderColor: '#e0e0e0',
+        backgroundColor: '#fff',
         ...sx,
       }}
       {...props}

ui/src/components/atoms/StyledTableRow.tsx

@@ -2,9 +2,6 @@ import { TableRow } from '@mui/material';
 import { styled } from '@mui/system';
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover,
-  },
   // hide last border
   '&:last-child td, &:last-child th': {
     border: 0,

ui/src/components/molecules/ConfirmModal.tsx

@@ -57,10 +57,10 @@ function ConfirmModal({
           mt={2}
         >
           <Box>{children}</Box>
-          <Button variant="contained" onClick={() => onSubmit()}>
+          <Button variant="outlined" onClick={() => onSubmit()}>
             {buttonText}
           </Button>
-          <Button variant="contained" color="error" onClick={dismissModal}>
+          <Button variant="outlined" color="error" onClick={dismissModal}>
             Cancel
           </Button>
         </Stack>

ui/src/components/molecules/CreateDAGButton.tsx

@@ -4,11 +4,10 @@ import React from 'react';
 function CreateDAGButton() {
   return (
     <Button
-      variant="contained"
+      variant="outlined"
       size="small"
       sx={{
         width: '100px',
-        border: 0,
       }}
       onClick={async () => {
         const name = window.prompt('Please input the new DAG name', '');

ui/src/components/molecules/DAGTable.tsx

@@ -76,9 +76,7 @@ const defaultColumns = [
       return (
         <IconButton
           onClick={table.getToggleAllRowsExpandedHandler()}
-          sx={{
-            color: 'white',
-          }}
+          className="gray-90"
         >
           {table.getIsAllRowsExpanded() ? (
             <>
@@ -552,8 +550,7 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
       </Stack>
       <Box
         sx={{
-          border: '1px solid #485fc7',
-          borderRadius: '6px',
+          border: '1px solid #e0e0e0',
           mt: 2,
         }}
       >
@@ -580,6 +577,7 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
                               : 'default',
                           },
                           onClick: header.column.getToggleSortingHandler(),
+                          className: 'gray-90',
                         }}
                       >
                         <Stack direction="row" alignItems="center">
@@ -593,19 +591,19 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
                             asc: (
                               <ArrowUpward
                                 sx={{
-                                  color: 'white',
                                   fontSize: '0.95rem',
                                   ml: 1,
                                 }}
+                                className="gray-90"
                               />
                             ),
                             desc: (
                               <ArrowDownward
                                 sx={{
-                                  color: 'white',
                                   fontSize: '0.95rem',
                                   ml: 1,
                                 }}
+                                className="gray-90"
                               />
                             ),
                           }[header.column.getIsSorted() as string] ?? null}
@@ -624,7 +622,10 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
           </TableHead>
           <TableBody>
             {instance.getRowModel().rows.map((row) => (
-              <StyledTableRow key={row.id} style={{ height: '44px' }}>
+              <StyledTableRow
+                key={row.id}
+                style={{ height: '44px', backgroundColor: 'white' }}
+              >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell
                     key={cell.id}