admin-web: fix modal issue

README.md

@@ -180,6 +180,10 @@ dagu scheduler --config=~/.dagu/dev.yaml
 
   ![Details-TD](assets/images/ui-details2.png?raw=true)
 
+- **Search DAGs**: It greps given text across all DAGs definitions.
+
+  ![History](assets/images/ui-search.png?raw=true)
+
 - **Execution History**: It shows past execution results and logs.
 
   ![History](assets/images/ui-history.png?raw=true)

admin/src/components/molecules/StatusUpdateModal.tsx

@@ -1,3 +1,4 @@
+import { Box, Button, Modal, Stack, Typography } from '@mui/material';
 import React from 'react';
 import { Step } from '../../models';
 
@@ -8,10 +9,19 @@ type Props = {
   onSubmit: (step: Step, action: string) => void;
 };
 
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
 function StatusUpdateModal({ visible, dismissModal, step, onSubmit }: Props) {
-  const modalStyle = {
-    display: visible ? 'flex' : 'none',
-  };
   React.useEffect(() => {
     const callback = (event: KeyboardEvent) => {
       const e = event || window.event;
@@ -28,40 +38,45 @@ function StatusUpdateModal({ visible, dismissModal, step, onSubmit }: Props) {
     return null;
   }
   return (
-    <div className="modal is-active" style={modalStyle}>
-      <div className="modal-background"></div>
-      <div className="modal-card">
-        <header className="modal-card-head">
-          <p className="modal-card-title">Update status of "{step.Name}"</p>
-          <button
-            className="delete"
-            aria-label="close"
-            onClick={dismissModal}
-          ></button>
-        </header>
-        <section className="modal-card-body">
-          <div className="mr-4 pt-4 is-flex is-flex-direction-row">
-            <button
-              className="button is-info"
+    <Modal open={visible} onClose={dismissModal}>
+      <Box sx={style}>
+        <Stack direction="row" alignContent="center" justifyContent="center">
+          <Typography variant="h6">Update status of "{step.Name}"</Typography>
+        </Stack>
+        <Stack
+          direction="column"
+          alignContent="center"
+          justifyContent="center"
+          spacing={2}
+          mt={2}
+        >
+          <Stack
+            direction="row"
+            alignContent="center"
+            justifyContent="center"
+            spacing={2}
+          >
+            <Button
+              variant="contained"
               onClick={() => onSubmit(step, 'mark-success')}
             >
-              <span>Mark Success</span>
-            </button>
-            <button
-              className="button is-info ml-4"
+              Mark Success
+            </Button>
+            <Button
+              variant="contained"
               onClick={() => onSubmit(step, 'mark-failed')}
             >
-              <span>Mark Failed</span>
-            </button>
-          </div>
-        </section>
-        <footer className="modal-card-foot">
-          <button className="button" onClick={dismissModal}>
-            Cancel
-          </button>
-        </footer>
-      </div>
-    </div>
+              Mark Failed
+            </Button>
+          </Stack>
+          <Stack direction="row" alignContent="center" justifyContent="center">
+            <Button variant="contained" color="error" onClick={dismissModal}>
+              Cancel
+            </Button>
+          </Stack>
+        </Stack>
+      </Box>
+    </Modal>
   );
 }