prettier

tapis-project · Aug 7, 2024 · 5703643 · 5703643
1 parent 57f87ed
commit 5703643
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 112 deletions.
diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx
@@ -22,9 +22,16 @@ import {
   Box,
   List,
   ListItem,
-  ListItemButton
+  ListItemButton,
 } from '@mui/material';
-import { DataObject, Share, Add, Bolt, Publish, AltRoute } from '@mui/icons-material';
+import {
+  DataObject,
+  Share,
+  Add,
+  Bolt,
+  Publish,
+  AltRoute,
+} from '@mui/icons-material';
 import {
   ReactFlow,
   MiniMap,
@@ -39,22 +46,32 @@ import {
   Node,
   Panel,
 } from '@xyflow/react';
-import { CreateTaskModal, RunPipelineModal } from 'app/Workflows/_components/Modals';
+import {
+  CreateTaskModal,
+  RunPipelineModal,
+} from 'app/Workflows/_components/Modals';
 
 import '@xyflow/react/dist/style.css';
 
 type DagViewDrawerProps = {
-  groupId: string,
-  pipelineId: string
-  toggle: () => void,
-  open: boolean,
-  onClickCreateTask: () => void
-  onClickRunPipeline: () => void
-}
+  groupId: string;
+  pipelineId: string;
+  toggle: () => void;
+  open: boolean;
+  onClickCreateTask: () => void;
+  onClickRunPipeline: () => void;
+};
 
-const DagViewDrawer: React.FC<DagViewDrawerProps> = ({groupId, pipelineId, toggle, open, onClickCreateTask, onClickRunPipeline}) => {
+const DagViewDrawer: React.FC<DagViewDrawerProps> = ({
+  groupId,
+  pipelineId,
+  toggle,
+  open,
+  onClickCreateTask,
+  onClickRunPipeline,
+}) => {
   const { extension } = useExtension();
-  const { create } = Hooks.Tasks.useCreate()
+  const { create } = Hooks.Tasks.useCreate();
 
   const handleCreateDagTask = (task: Workflows.FunctionTask) => {
     create(
@@ -68,58 +85,71 @@ const DagViewDrawer: React.FC<DagViewDrawerProps> = ({groupId, pipelineId, toggl
           runtime: task.runtime!,
           installer: task.installer!,
           code: task.code! || undefined,
-        }
+        },
       },
       {
         onSuccess: toggle,
       }
     );
-  }
+  };
 
   const sidebarTasks =
     extension?.serviceCustomizations?.workflows?.dagTasks || [];
   return (
     <div>
       <Drawer open={open} onClose={toggle}>
-      <Box sx={{ width: 250 }} role="presentation" onClick={toggle}>
-        <List>
-          <ListItem disablePadding>
-            <ListItemButton onClick={onClickRunPipeline}>
-              <ListItemIcon>
-                <Publish />
-              </ListItemIcon>
-              <ListItemText primary={"Run Pipeline"} secondary={`Run pipeline '${pipelineId}'`}/>
-            </ListItemButton>
-          </ListItem>
-        </List>
-        <List>
-          <ListItem disablePadding>
-            <ListItemButton onClick={onClickCreateTask}>
-              <ListItemIcon>
-                <Add />
-              </ListItemIcon>
-              <ListItemText primary={"New Task"} secondary="Add a new task to the graph"/>
-            </ListItemButton>
-          </ListItem>
-        </List>
-        <Divider />
-        <List>
-          {sidebarTasks.map((task, i) => (
-            <ListItem key={`dag-task-${i}`} disablePadding>
-              <ListItemButton onClick={() => {handleCreateDagTask((task as Workflows.Task))}}>
+        <Box sx={{ width: 250 }} role="presentation" onClick={toggle}>
+          <List>
+            <ListItem disablePadding>
+              <ListItemButton onClick={onClickRunPipeline}>
+                <ListItemIcon>
+                  <Publish />
+                </ListItemIcon>
+                <ListItemText
+                  primary={'Run Pipeline'}
+                  secondary={`Run pipeline '${pipelineId}'`}
+                />
+              </ListItemButton>
+            </ListItem>
+          </List>
+          <List>
+            <ListItem disablePadding>
+              <ListItemButton onClick={onClickCreateTask}>
                 <ListItemIcon>
                   <Add />
                 </ListItemIcon>
-                <ListItemText primary={task.id} secondary={task.description || ""}/>
+                <ListItemText
+                  primary={'New Task'}
+                  secondary="Add a new task to the graph"
+                />
               </ListItemButton>
             </ListItem>
-          ))}
-        </List>
-      </Box>
+          </List>
+          <Divider />
+          <List>
+            {sidebarTasks.map((task, i) => (
+              <ListItem key={`dag-task-${i}`} disablePadding>
+                <ListItemButton
+                  onClick={() => {
+                    handleCreateDagTask(task as Workflows.Task);
+                  }}
+                >
+                  <ListItemIcon>
+                    <Add />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={task.id}
+                    secondary={task.description || ''}
+                  />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
       </Drawer>
     </div>
-  )
-}
+  );
+};
 
 type DagViewProps = {
   pipeline: Workflows.Pipeline;
@@ -130,8 +160,8 @@ type View = 'data' | 'dependencies' | 'conditionals';
 
 const DagView: React.FC<DagViewProps> = ({ groupId, pipeline }) => {
   const tasks = pipeline.tasks!;
-  const [modal, setModal] = useState<string | undefined>(undefined)
-  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [modal, setModal] = useState<string | undefined>(undefined);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   const nodeTypes = useMemo(
     () => ({
@@ -190,7 +220,13 @@ const DagView: React.FC<DagViewProps> = ({ groupId, pipeline }) => {
           y: Object.entries(pipeline.env!).length * 25 + 30,
         },
         type: 'standard',
-        data: { label: task.id!, task: task, groupId, pipelineId: pipeline.id, tasks },
+        data: {
+          label: task.id!,
+          task: task,
+          groupId,
+          pipelineId: pipeline.id,
+          tasks,
+        },
       });
       i++;
     }
@@ -281,7 +317,7 @@ const DagView: React.FC<DagViewProps> = ({ groupId, pipeline }) => {
     (params: any) => setEdges((eds) => addEdge(params, eds)),
     [setEdges]
   );
-  
+
   return (
     <div className={styles['dag']}>
       <ReactFlow
@@ -297,14 +333,22 @@ const DagView: React.FC<DagViewProps> = ({ groupId, pipeline }) => {
           groupId={groupId}
           pipelineId={pipeline.id!}
           open={drawerOpen}
-          toggle={() => {setDrawerOpen(false)}}
-          onClickCreateTask={() => {setModal("createtask")}}
-          onClickRunPipeline={() => {setModal("runpipeline")}}
+          toggle={() => {
+            setDrawerOpen(false);
+          }}
+          onClickCreateTask={() => {
+            setModal('createtask');
+          }}
+          onClickRunPipeline={() => {
+            setModal('runpipeline');
+          }}
         />
         <Panel position="top-left">
           <Chip
-            onClick={() => {setDrawerOpen(true)}}
-            color={"primary"}
+            onClick={() => {
+              setDrawerOpen(true);
+            }}
+            color={'primary'}
             size="small"
             label="actions"
             icon={<Bolt />}
@@ -345,19 +389,33 @@ const DagView: React.FC<DagViewProps> = ({ groupId, pipeline }) => {
             icon={<AltRoute />}
           />
         </Panel>
-        <Controls position="bottom-left" style={{color: "black", border: "1px solid #999999", borderRadius: "1px"}}/>
-        <MiniMap position="bottom-right" style={{border: "1px solid #999999", borderRadius: "1px"}}/>
+        <Controls
+          position="bottom-left"
+          style={{
+            color: 'black',
+            border: '1px solid #999999',
+            borderRadius: '1px',
+          }}
+        />
+        <MiniMap
+          position="bottom-right"
+          style={{ border: '1px solid #999999', borderRadius: '1px' }}
+        />
         <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
       </ReactFlow>
       <CreateTaskModal
-        open={modal === "createtask"}
-        toggle={() => {setModal(undefined)}}
+        open={modal === 'createtask'}
+        toggle={() => {
+          setModal(undefined);
+        }}
         groupId={groupId}
         pipelineId={pipeline.id!}
       />
       <RunPipelineModal
-        open={modal === "runpipeline"}
-        toggle={() => {setModal(undefined)}}
+        open={modal === 'runpipeline'}
+        toggle={() => {
+          setModal(undefined);
+        }}
         groupId={groupId}
         pipelineId={pipeline.id!}
         pipeline={pipeline}

diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/Nodes/TaskNode/TaskNode.module.scss b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/Nodes/TaskNode/TaskNode.module.scss
@@ -59,4 +59,3 @@
   padding: 2px;
   cursor: pointer;
 }
-
diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/Nodes/TaskNode/TaskNode.tsx b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/Nodes/TaskNode/TaskNode.tsx
@@ -10,7 +10,7 @@ import { DeleteTaskModal } from 'app/Workflows/_components/Modals';
 
 type NodeType = {
   task: Workflows.Task;
-  tasks: Array<Workflows.Task>
+  tasks: Array<Workflows.Task>;
   groupId: string;
   pipelineId: string;
 };
@@ -62,17 +62,25 @@ const resolveNodeImage = (task: Workflows.Task) => {
 };
 
 const TaskNode: React.FC<NodeProps> = ({ data }) => {
-  const [modal, setModal] = useState<string | undefined>(undefined)
+  const [modal, setModal] = useState<string | undefined>(undefined);
   const history = useHistory();
   let { task, tasks, groupId, pipelineId } = data as NodeType;
 
   return (
     <>
-      <TaskUpdateProvider task={task} tasks={tasks} groupId={groupId} pipelineId={pipelineId}>
+      <TaskUpdateProvider
+        task={task}
+        tasks={tasks}
+        groupId={groupId}
+        pipelineId={pipelineId}
+      >
         <StandardHandle type="target" position={Position.Left} />
         <div className={styles['node']}>
           <div className={styles['header']}>
-            <img src={resolveNodeImage(task)} className={styles['header-img']} />
+            <img
+              src={resolveNodeImage(task)}
+              className={styles['header-img']}
+            />
             <span className={styles['title']}>{task.id}</span>
           </div>
           <div className={styles['body']}>
@@ -92,11 +100,16 @@ const TaskNode: React.FC<NodeProps> = ({ data }) => {
             <Delete
               className={styles['action-danger']}
               color="error"
-              onClick={() => {setModal("delete")}}
+              onClick={() => {
+                setModal('delete');
+              }}
             />
           </div>
         </div>
-        <DeleteTaskModal open={modal === "delete"} toggle={() => setModal(undefined)}/>
+        <DeleteTaskModal
+          open={modal === 'delete'}
+          toggle={() => setModal(undefined)}
+        />
         <StandardHandle type="source" position={Position.Right} />
       </TaskUpdateProvider>
     </>

diff --git a/...rkflows/Pipelines/_components/TaskEditor/Tabs/ExecutionProfileTab/ExecutionProfileTab.tsx b/...rkflows/Pipelines/_components/TaskEditor/Tabs/ExecutionProfileTab/ExecutionProfileTab.tsx
@@ -13,8 +13,7 @@ import { Sidebar } from '../../../Sidebar';
 import { usePatchTask } from 'app/Workflows/_hooks';
 
 const ExecutionProfileTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
-  const { task, taskPatch } =
-    usePatchTask<Workflows.Task>();
+  const { task, taskPatch } = usePatchTask<Workflows.Task>();
   return (
     <Sidebar title={'Execution Profile'} toggle={toggle}>
       <div className={styles['form']}>

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GeneralTab/GeneralTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GeneralTab/GeneralTab.tsx
@@ -6,8 +6,7 @@ import { Sidebar } from '../../../Sidebar';
 import { usePatchTask } from 'app/Workflows/_hooks';
 
 const GeneralTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
-  const { task, taskPatch, setTaskPatch } =
-    usePatchTask<Workflows.Task>();
+  const { task, taskPatch, setTaskPatch } = usePatchTask<Workflows.Task>();
   return (
     <Sidebar title={'General'} toggle={toggle}>
       <Box

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/IOTab/IOTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/IOTab/IOTab.tsx
@@ -4,13 +4,9 @@ import { Sidebar } from '../../../Sidebar';
 import { usePatchTask } from 'app/Workflows/_hooks';
 
 const IOTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
-  const { taskPatch } =
-    usePatchTask<Workflows.Task>();
+  const { taskPatch } = usePatchTask<Workflows.Task>();
   return (
-    <Sidebar
-      title={'Inputs & Outputs'}
-      toggle={toggle}
-    >
+    <Sidebar title={'Inputs & Outputs'} toggle={toggle}>
       {JSON.stringify(taskPatch.input)}
       {JSON.stringify(taskPatch.output)}
     </Sidebar>

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/TapisJobDefTab/TapisJobDefTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/TapisJobDefTab/TapisJobDefTab.tsx
@@ -12,7 +12,8 @@ type TapisJobDefTabProps = {
 };
 
 const TapisJobDefTab: React.FC<TapisJobDefTabProps> = ({ featured }) => {
-  const { task, setTaskPatch, taskPatch } = usePatchTask<Workflows.TapisJobTask>();
+  const { task, setTaskPatch, taskPatch } =
+    usePatchTask<Workflows.TapisJobTask>();
 
   return (
     <div

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/index.ts b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/index.ts
@@ -6,4 +6,4 @@ export { RuntimeTab } from './RuntimeTab';
 export { ExecutionProfileTab } from './ExecutionProfileTab';
 export { TapisJobDefTab } from './TapisJobDefTab';
 export { ConditionsTab } from './ConditionsTab';
-export { IOTab } from "./IOTab"
+export { IOTab } from './IOTab';
diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx
@@ -21,7 +21,7 @@ import {
   ExecutionProfileTab,
   TapisJobDefTab,
   ConditionsTab,
-  IOTab
+  IOTab,
 } from './Tabs';
 import { usePatchTask } from 'app/Workflows/_hooks';
 import { DeleteTaskModal } from 'app/Workflows/_components/Modals';