Merge pull request #115 from Tauffer-Consulting/dev

Dev
Tauffer-Consulting · Oct 20, 2023 · 66cb57c · 66cb57c
2 parents 141ad69 + d41fa88
commit 66cb57c
Show file tree

Hide file tree

Showing 28 changed files with 676 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@
 
 <br>
 
-![create workflow](https://raw.githubusercontent.com/Tauffer-Consulting/domino/main/docs/source/_static/media/7_create_workflow.gif)
+![create-workflow](https://github.com/Tauffer-Consulting/domino/assets/54302847/34d619fa-4b6c-4761-8b24-3ca829cfc28c)
 
 # Table of contents
 - [About](#about)
@@ -119,8 +119,8 @@ The Domino frontend service is a React application that provides the GUI for eas
   </summary>
   Create Workflows by dragging and dropping Pieces to the canvas, and connecting them. <br></br>
 
-  ![create workflow](https://raw.githubusercontent.com/Tauffer-Consulting/domino/main/docs/source/_static/media/7_create_workflow.gif)
-
+  ![create-workflow](https://github.com/Tauffer-Consulting/domino/assets/54302847/34d619fa-4b6c-4761-8b24-3ca829cfc28c)
+  
 </details>
 
 <details>
@@ -129,7 +129,7 @@ The Domino frontend service is a React application that provides the GUI for eas
   </summary>
   Edit Pieces by changing their input. Outputs from upstream Pieces are automatically available as inputs for downstream Pieces. Pieces can pass forward any type of data, from simple strings to heavy files, all automatically handled by Domino shared storage system. <br></br>
 
-  ![edit pieces](https://raw.githubusercontent.com/Tauffer-Consulting/domino/main/docs/source/_static/media/8_edit_pieces.gif)
+  ![edit pieces](https://github.com/Tauffer-Consulting/domino/assets/54302847/d453ac81-5485-4159-b2f3-bf57eb969906)
 
 </details>
 
@@ -139,7 +139,8 @@ The Domino frontend service is a React application that provides the GUI for eas
   </summary>
   Schedule Workflows to run periodically, at a specific date/time, or trigger them manually. <br></br>
 
-  ![schedule workflows](https://raw.githubusercontent.com/Tauffer-Consulting/domino/main/docs/source/_static/media/9_edit_workflow.gif)
+  ![schedule workflows](https://github.com/Tauffer-Consulting/domino/assets/54302847/e881d225-e8e0-4344-bc3f-c170cb820274)
+
 </details>
 
 <details>
@@ -148,7 +149,7 @@ The Domino frontend service is a React application that provides the GUI for eas
   </summary>
   Monitor Workflows in real time, including the status of each Piece, the logs and results of each run. <br></br>
 
-  ![monitor workflow](https://raw.githubusercontent.com/Tauffer-Consulting/domino/main/docs/source/_static/media/10_monitor_workflow.gif)
+  ![run-pieces7](https://github.com/Tauffer-Consulting/domino/assets/54302847/fb5a30c5-0314-4271-bb46-81a159ab2696)
 
 </details>
 

diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
@@ -225,7 +225,7 @@ services:
   # Modified Airflow Scheduler with Domino
   airflow-scheduler:
     <<: *airflow-common
-    image: ghcr.io/tauffer-consulting/domino-airflow-base:latest
+    # # image: ghcr.io/tauffer-consulting/domino-airflow-base:latest
     build:
       context: .
       dockerfile: Dockerfile-airflow-domino.dev
@@ -260,7 +260,7 @@ services:
   # Modified Airflow Worker with Domino
   airflow-worker:
     <<: *airflow-common
-    image: ghcr.io/tauffer-consulting/domino-airflow-base:latest
+    # image: ghcr.io/tauffer-consulting/domino-airflow-base:latest
     build:
       context: .
       dockerfile: Dockerfile-airflow-domino.dev
@@ -309,7 +309,7 @@ services:
       - DOMINO_DB_HOST=domino_postgres
       - DOMINO_DB_PORT=5432
       - DOMINO_DB_NAME=postgres
-      - DOMINO_DEFAULT_PIECES_REPOSITORY_VERSION=0.3.12
+      - DOMINO_DEFAULT_PIECES_REPOSITORY_VERSION=0.3.14
       - DOMINO_DEFAULT_PIECES_REPOSITORY_TOKEN=${DOMINO_DEFAULT_PIECES_REPOSITORY_TOKEN}
       - DOMINO_GITHUB_ACCESS_TOKEN_WORKFLOWS=${DOMINO_GITHUB_ACCESS_TOKEN_WORKFLOWS}
       - DOMINO_GITHUB_WORKFLOWS_REPOSITORY=${DOMINO_GITHUB_WORKFLOWS_REPOSITORY}

diff --git a/frontend/index.html b/frontend/index.html
@@ -5,7 +5,6 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y="true"></script>
   <script>
     globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
   </script>
@@ -16,6 +15,7 @@
   <!-- Icons to support Material Design -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
+
   <title>Domino</title>
 </head>
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@iconify/react": "^4.1.1",
     "@import-meta-env/cli": "^0.6.6",
     "@import-meta-env/unplugin": "^0.4.10",
     "@material-ui/core": "^4.12.4",

diff --git a/frontend/src/components/CodeEditorInput/index.tsx b/frontend/src/components/CodeEditorInput/index.tsx
@@ -7,26 +7,29 @@ import {
   useFormContext,
 } from "react-hook-form";
 
-const CodeEditorItem = React.forwardRef(({ ...register }) => (
-  <CodeEditor
-    language="python"
-    placeholder="Enter Python code."
-    padding={15}
-    style={{
-      fontSize: 12,
-      backgroundColor: "#f5f5f5",
-      fontFamily:
-        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
-      borderRadius: 4,
-      border: "1px solid #ddd",
-      width: "100%",
-      minHeight: "200px",
-      maxHeight: "400px",
-      overflowY: "scroll",
-    }}
-    {...register}
-  />
-));
+const CodeEditorItem = React.forwardRef<HTMLTextAreaElement>(
+  ({ ...register }, ref) => (
+    <CodeEditor
+      language="python"
+      placeholder="Enter Python code."
+      padding={15}
+      style={{
+        fontSize: 12,
+        backgroundColor: "#f5f5f5",
+        fontFamily:
+          "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+        borderRadius: 4,
+        border: "1px solid #ddd",
+        width: "100%",
+        minHeight: "200px",
+        maxHeight: "400px",
+        overflowY: "scroll",
+      }}
+      ref={ref}
+      {...register}
+    />
+  ),
+);
 
 CodeEditorItem.displayName = "CodeEditorItem";
 

diff --git a/frontend/src/components/WorkflowPanel/DefaultNode/index.tsx b/frontend/src/components/WorkflowPanel/DefaultNode/index.tsx
@@ -1,3 +1,4 @@
+import { Icon } from "@iconify/react";
 import { Paper, Typography } from "@mui/material";
 import theme from "providers/theme.config";
 import React, { type CSSProperties, memo, useMemo } from "react";
@@ -74,6 +75,8 @@ export const CustomNode = memo<DefaultNodeProps>(({ id, data, selected }) => {
       alignItems: "center",
 
       position: "relative",
+      padding: 1,
+      textAlign: "center",
       width: 150,
       height: 70,
       lineHeight: "60px",
@@ -103,6 +106,20 @@ export const CustomNode = memo<DefaultNodeProps>(({ id, data, selected }) => {
     [data],
   );
 
+  const icon = useMemo(() => {
+    if (data.style.useIcon) {
+      const name = data.style.iconClassName;
+      return {
+        name,
+        style: {
+          width: "20px",
+          height: "20px",
+          ...data.style.iconStyle,
+        },
+      };
+    }
+  }, [data]);
+
   return (
     <>
       {nodeTypeRenderHandleMap[extendedClassExt].renderSourceHandle && (
@@ -122,6 +139,7 @@ export const CustomNode = memo<DefaultNodeProps>(({ id, data, selected }) => {
         />
       )}
       <Paper elevation={selected ? 12 : 3} sx={nodeStyle} ref={ElementRef}>
+        {icon && <Icon icon={icon.name} style={icon.style} />}
         <div
           style={{
             display: "flex",

diff --git a/frontend/src/components/WorkflowPanel/RunNode/index.tsx b/frontend/src/components/WorkflowPanel/RunNode/index.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-prototype-builtins */
+import { Icon } from "@iconify/react";
 import { Paper, Typography } from "@mui/material";
 import { taskState } from "features/workflows/types";
 import theme from "providers/theme.config";
@@ -117,6 +118,20 @@ const RunNode = memo<RunNodeProps>(({ id, data, selected }) => {
     [data],
   );
 
+  const icon = useMemo(() => {
+    if (data.style.useIcon) {
+      const name = data.style.iconClassName;
+      return {
+        name,
+        style: {
+          width: "20px",
+          height: "20px",
+          ...data.style.iconStyle,
+        },
+      };
+    }
+  }, [data]);
+
   return (
     <>
       {nodeTypeRenderHandleMap[extendedClassExt].renderSourceHandle && (
@@ -136,6 +151,7 @@ const RunNode = memo<RunNodeProps>(({ id, data, selected }) => {
         />
       )}
       <Paper elevation={selected ? 12 : 3} sx={nodeStyle}>
+        {icon && <Icon icon={icon.name} style={icon.style} />}
         <div
           style={{
             display: "flex",

diff --git a/frontend/src/context/authentication/authentication.context.tsx b/frontend/src/context/authentication/authentication.context.tsx
@@ -1,4 +1,3 @@
-import { AxiosError } from "axios";
 import localforage from "localforage";
 import React, {
   type ReactNode,
@@ -70,20 +69,12 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
   const authenticate = useCallback(
     async (email: string, password: string) => {
       setAuthLoading(true);
-      postAuthLogin({ email, password })
+      void postAuthLogin({ email, password })
         .then((res) => {
           if (res.status === 200) {
             login(res.data.access_token, res.data.user_id);
           }
         })
-        .catch((e) => {
-          if (e instanceof AxiosError) {
-            toast.error(
-              e.response?.data?.detail ??
-                "Error on login, please review your inputs and try again",
-            );
-          }
-        })
         .finally(() => {
           setAuthLoading(false);
         });

diff --git a/frontend/src/features/workflowEditor/components/WorkflowEditor.tsx b/frontend/src/features/workflowEditor/components/WorkflowEditor.tsx
@@ -162,7 +162,7 @@ export const WorkflowsEditorComponent: React.FC = () => {
     } catch (err) {
       setBackdropIsOpen(false);
       if (err instanceof AxiosError) {
-        toast.error(JSON.stringify(err?.response?.data));
+        console.log(err);
       } else if (err instanceof Error) {
         console.log(err);
         toast.error(

diff --git a/frontend/src/features/workflowEditor/context/types/workflowPieceData.ts b/frontend/src/features/workflowEditor/context/types/workflowPieceData.ts
@@ -36,9 +36,14 @@ interface UiSchema {
 
 interface WorkflowSharedStorageDataModel {
   source: StorageSourcesLocal | StorageSourcesAWS;
-  base_folder?: string;
+
   mode: StorageAccessModes;
-  provider_options?: Record<string, unknown>;
+  provider_options?: ProviderOptionS3;
+}
+
+interface ProviderOptionS3 {
+  bucket?: string;
+  base_folder?: string;
 }
 
 interface SystemRequirementsModel {

diff --git a/frontend/src/features/workflowEditor/context/workflowsEditor.tsx b/frontend/src/features/workflowEditor/context/workflowsEditor.tsx
@@ -167,11 +167,10 @@ const WorkflowsEditorProvider: FC<{ children?: React.ReactNode }> = ({
 
       const workflowSharedStorage = {
         source: storageSource,
-        ...(baseFolder !== "" ? { base_folder: baseFolder } : {}),
         ...{ mode: elementData?.storage?.storageAccessMode },
         provider_options: {
           ...(providerOptions && providerOptions.bucket !== ""
-            ? { bucket: providerOptions.bucket }
+            ? { bucket: providerOptions.bucket, base_folder: baseFolder }
             : {}),
         },
       };

diff --git a/frontend/src/features/workflows/api/workflow/deleteWorkflowId.ts b/frontend/src/features/workflows/api/workflow/deleteWorkflowId.ts
@@ -44,16 +44,7 @@ export const useAuthenticatedDeleteWorkflowId = () => {
       })
       .catch((e) => {
         if (e instanceof AxiosError) {
-          if (e?.response?.status === 403) {
-            toast.error("You are not allowed to delete this workflow.");
-          } else if (e?.response?.status === 404) {
-            toast.error("Workflow not found.");
-          } else if (e?.response?.status === 409) {
-            toast.error("Workflow is not in a valid state. ");
-          } else {
-            console.error(e);
-            toast.error("Something went wrong. ");
-          }
+          console.error(e);
         } else {
           throw e;
         }

diff --git a/frontend/src/features/workflows/api/workflow/postWorkflowRunId.ts b/frontend/src/features/workflows/api/workflow/postWorkflowRunId.ts
@@ -49,16 +49,7 @@ export const useAuthenticatedPostWorkflowRunId = () => {
       })
       .catch((e) => {
         if (e instanceof AxiosError) {
-          if (e?.response?.status === 403) {
-            toast.error("You are not allowed to run this workflow.");
-          } else if (e?.response?.status === 404) {
-            toast.error("Workflow not found.");
-          } else if (e?.response?.status === 409) {
-            toast.error("Workflow is not in a valid state. ");
-          } else {
-            console.error(e);
-            toast.error("Something went wrong. ");
-          }
+          console.error(e);
         } else {
           throw e;
         }

diff --git a/frontend/src/features/workflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx b/frontend/src/features/workflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx
@@ -26,19 +26,7 @@ export const TaskResult = (props: ITaskResultProps) => {
     }
 
     if (!base64_content || !file_type) {
-      return (
-        <Container
-          sx={{
-            height: "90%",
-            width: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Typography variant="h2">No content</Typography>
-        </Container>
-      );
+      return <Typography variant="h2">No content</Typography>;
     }
 
     switch (file_type) {
@@ -106,6 +94,7 @@ export const TaskResult = (props: ITaskResultProps) => {
         height: "90%",
         width: "100%",
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
       }}

diff --git a/frontend/src/services/clients/domino.client.ts b/frontend/src/services/clients/domino.client.ts
@@ -1,6 +1,7 @@
 import axios from "axios";
 import { environment } from "config/environment.config";
 import { dispatchLogout } from "context/authentication";
+import { toast } from "react-toastify";
 
 import { endpoints } from "../config/endpoints.config";
 
@@ -26,6 +27,19 @@ dominoApiClient.interceptors.response.use(
     if (error.response.status === 401) {
       dispatchLogout();
     }
+
+    const message =
+      error.response?.data?.detail ||
+      error.response?.data?.message ||
+      error?.message ||
+      "Something went wrong";
+
+    if (Array.isArray(message)) {
+      toast.error(message[0].msg);
+    } else {
+      toast.error(message);
+    }
+
     return await Promise.reject(error);
   },
 );