[1/n] Refactor workflow details page (headers, version selection) (#1308

)
RunLLM · May 25, 2023 · d9b4d13 · d9b4d13
1 parent ac649b2
commit d9b4d13
Show file tree

Hide file tree

Showing 74 changed files with 2,850 additions and 4,484 deletions.
diff --git a/src/golang/cmd/server/routes/routes.go b/src/golang/cmd/server/routes/routes.go
@@ -9,7 +9,7 @@ const (
 	ListStorageMigrationRoute      = "/api/v2/storage-migrations"
 	WorkflowsRoute                 = "/api/v2/workflows"
 	WorkflowRoute                  = "/api/v2/workflow/{workflowID}"
-	WorkflowObjectsRoute           = "/api/v2/workflow/{workflowID}/objects"
+	WorkflowObjectsRoute           = "/api/v2/workflow/{workflowId}/objects"
 	DAGsRoute                      = "/api/v2/workflow/{workflowID}/dags"
 	DAGRoute                       = "/api/v2/workflow/{workflowID}/dag/{dagID}"
 	DAGResultsRoute                = "/api/v2/workflow/{workflowID}/results"

diff --git a/src/golang/cmd/server/server/handlers.go b/src/golang/cmd/server/server/handlers.go
@@ -182,6 +182,18 @@ func (s *AqServer) Handlers() map[string]handler.Handler {
 			DagRepo:                  s.DAGRepo,
 			ArtifactResultRepo:       s.ArtifactResultRepo,
 		},
+		routes.WorkflowDeletePostRoute: &v2.WorkflowDeleteHandler{
+			Database:   s.Database,
+			Engine:     s.AqEngine,
+			JobManager: s.JobManager,
+
+			ResourceRepo:             s.ResourceRepo,
+			ExecutionEnvironmentRepo: s.ExecutionEnvironmentRepo,
+			OperatorRepo:             s.OperatorRepo,
+			WorkflowRepo:             s.WorkflowRepo,
+			DagRepo:                  s.DAGRepo,
+			ArtifactResultRepo:       s.ArtifactResultRepo,
+		},
 		routes.EditResourceRoute: &handler.EditResourceHandler{
 			Database:   s.Database,
 			JobManager: s.JobManager,

diff --git a/src/ui/app/index.tsx b/src/ui/app/index.tsx
@@ -35,15 +35,17 @@ const App = () => {
       <Route path={`/${pathPrefix}/workflows`} element={<RequireAuth user={user}><WorkflowsPage user={user} /> </RequireAuth>} />
       <Route path={`/${pathPrefix}/login`} element={user && user.apiKey ? <Navigate to="/" replace /> : <LoginPage />} />
       <Route path={`/${pathPrefix}/account`} element={<RequireAuth user={user}><AccountPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:id`} element={<RequireAuth user={user}><WorkflowPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:workflowDagResultId/operator/:operatorId`} element={<RequireAuth user={user}><OperatorDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:workflowDagResultId/artifact/:artifactId`} element={<RequireAuth user={user}><ArtifactDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:workflowDagResultId/metric/:operatorId`} element={<RequireAuth user={user}><MetricDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:workflowDagResultId/check/:operatorId`} element={<RequireAuth user={user}><CheckDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:workflowDagId/operator/:operatorId`} element={<RequireAuth user={user}><OperatorDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:workflowDagId/artifact/:artifactId`} element={<RequireAuth user={user}><ArtifactDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:workflowDagId/metric/:operatorId`} element={<RequireAuth user={user}><MetricDetailsPage user={user} /> </RequireAuth>} />
-      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:workflowDagId/check/:operatorId`} element={<RequireAuth user={user}><CheckDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId`} element={<RequireAuth user={user}><WorkflowPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:dagId`} element={<RequireAuth user={user}><WorkflowPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:dagResultId`} element={<RequireAuth user={user}><WorkflowPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:dagResultId/operator/:nodeId`} element={<RequireAuth user={user}><OperatorDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:dagResultId/artifact/:nodeId`} element={<RequireAuth user={user}><ArtifactDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:dagResultId/metric/:nodeId`} element={<RequireAuth user={user}><MetricDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/result/:dagResultId/check/:nodeId`} element={<RequireAuth user={user}><CheckDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:dagId/operator/:nodeId`} element={<RequireAuth user={user}><OperatorDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:dagId/artifact/:nodeId`} element={<RequireAuth user={user}><ArtifactDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:dagId/metric/:nodeId`} element={<RequireAuth user={user}><MetricDetailsPage user={user} /> </RequireAuth>} />
+      <Route path={`/${pathPrefix}/workflow/:workflowId/dag/:dagId/check/:nodeId`} element={<RequireAuth user={user}><CheckDetailsPage user={user} /> </RequireAuth>} />
       <Route path={`/${pathPrefix}/404`} element={user && user.apiKey ? <RequireAuth user={user}><ErrorPage user={user} /> </RequireAuth> : <ErrorPage />} />
       <Route path="*" element={<Navigate replace to={`/404`} />} />
     </Routes>

diff --git a/src/ui/app/package.json b/src/ui/app/package.json
@@ -45,9 +45,10 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "5.59.5",
     "@typescript-eslint/parser": "5.59.5",
+    "buffer": "^5.7.1",
     "eslint": "8.40.0",
-    "eslint-formatter-table": "7.32.1",
     "eslint-config-prettier": "8.8.0",
+    "eslint-formatter-table": "7.32.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-simple-import-sort": "10.0.0",
@@ -59,4 +60,4 @@
     "process": "^0.11.10",
     "typescript": "^4.9.4"
   }
-}
+}
diff --git a/src/ui/app/stores/store.ts b/src/ui/app/stores/store.ts
@@ -1,36 +1,24 @@
 import { aqueductApi } from '@aqueducthq/common';
 import { dataPreview as dataPreviewReducer } from '@aqueducthq/common';
+import { resource as resourceReducer } from '@aqueducthq/common';
 import { resources as resourcesReducer } from '@aqueducthq/common';
 import { workflowSummaries as listWorkflowReducer } from '@aqueducthq/common';
-import { resource as resourceReducer } from '@aqueducthq/common';
-import { nodeSelection as nodeSelectionReducer } from '@aqueducthq/common';
 import { notifications as notificationsReducer } from '@aqueducthq/common';
-import { workflow as workflowReducer } from '@aqueducthq/common';
-import { workflowDagResults as workflowDagResultsReducer } from '@aqueducthq/common';
-import { workflowDags as workflowDagsReducer } from '@aqueducthq/common';
-import { artifactResultContents as artifactResultContentsReducer } from '@aqueducthq/common';
-import { artifactResults as artifactResultsReducer } from '@aqueducthq/common';
 import { serverConfig as serverConfigReducer } from '@aqueducthq/common';
-import { workflowHistory as workflowHistoryReducer } from '@aqueducthq/common';
+import { workflowPage as workflowPageReducer } from '@aqueducthq/common';
 import { configureStore } from '@reduxjs/toolkit';
 import { setupListeners } from '@reduxjs/toolkit/dist/query';
 
 export const store = configureStore({
     reducer: {
         [aqueductApi.reducerPath]: aqueductApi.reducer,
-        nodeSelectionReducer,
         notificationsReducer,
         listWorkflowReducer,
         dataPreviewReducer,
         resourceReducer,
         resourcesReducer,
-        workflowReducer,
-        workflowDagsReducer,
-        workflowDagResultsReducer,
-        artifactResultsReducer,
-        artifactResultContentsReducer,
         serverConfigReducer,
-        workflowHistoryReducer,
+        workflowPageReducer,
     },
 
     middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(aqueductApi.middleware),

diff --git a/src/ui/common/src/components/layouts/NavBar.tsx b/src/ui/common/src/components/layouts/NavBar.tsx
@@ -29,7 +29,7 @@ const pathPrefix = getPathPrefix();
 export class BreadcrumbLink {
   static readonly HOME = new BreadcrumbLink(`${pathPrefix}/`, 'Home');
   static readonly DATA = new BreadcrumbLink(`${pathPrefix}/data`, 'Data');
-  static readonly INTEGRATIONS = new BreadcrumbLink(
+  static readonly RESOURCES = new BreadcrumbLink(
     `${pathPrefix}/resources`,
     'Resources'
   );

diff --git a/src/ui/common/src/components/layouts/menuSidebar.tsx b/src/ui/common/src/components/layouts/menuSidebar.tsx
@@ -13,10 +13,10 @@ import Divider from '@mui/material/Divider';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Link as RouterLink, useLocation } from 'react-router-dom';
-import UserProfile from 'src/utils/auth';
 
 import { useEnvironmentGetQuery } from '../../handlers/AqueductApi';
 import { AppDispatch } from '../../stores/store';
+import UserProfile from '../../utils/auth';
 import { getPathPrefix } from '../../utils/getPathPrefix';
 import {
   menuSidebar,

diff --git a/src/ui/common/src/components/operators/RequireOperator.tsx b/src/ui/common/src/components/operators/RequireOperator.tsx
diff --git a/src/ui/common/src/components/operators/WithOperatorHeader.tsx b/src/ui/common/src/components/operators/WithOperatorHeader.tsx
@@ -7,10 +7,12 @@ import { Box, Divider, Typography } from '@mui/material';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { DagResultResponse } from '../../handlers/responses/dagDeprecated';
-import { OperatorResultResponse } from '../../handlers/responses/operatorDeprecated';
-import { WorkflowDagResultWithLoadingStatus } from '../../reducers/workflowDagResults';
-import { WorkflowDagWithLoadingStatus } from '../../reducers/workflowDags';
+import {
+  NodeResultsMap,
+  NodesMap,
+  OperatorResponse,
+  OperatorResultResponse,
+} from '../../handlers/responses/node';
 import { RootState } from '../../stores/store';
 import { theme } from '../../styles/theme/theme';
 import { OperatorType } from '../../utils/operators';
@@ -23,10 +25,11 @@ import ArtifactSummaryList from '../workflows/artifact/summaryList';
 type Props = {
   workflowId: string;
   dagId: string;
-  dagResultId: string;
-  dagWithLoadingStatus?: WorkflowDagWithLoadingStatus;
-  dagResultWithLoadingStatus?: WorkflowDagResultWithLoadingStatus;
-  operator?: OperatorResultResponse;
+  dagResultId?: string;
+  nodes: NodesMap;
+  operator: OperatorResponse;
+  operatorResult?: OperatorResultResponse;
+  nodeResults?: NodeResultsMap;
   sideSheetMode?: boolean;
   children?: React.ReactElement | React.ReactElement[];
 };
@@ -35,35 +38,24 @@ const WithOperatorHeader: React.FC<Props> = ({
   workflowId,
   dagId,
   dagResultId,
-  dagWithLoadingStatus,
-  dagResultWithLoadingStatus,
+  nodes,
   operator,
+  operatorResult,
+  nodeResults,
   sideSheetMode,
   children,
 }) => {
   const resourcesState = useSelector(
     (state: RootState) => state.resourcesReducer
   );
 
-  if (!operator) {
-    return null;
-  }
-
-  if (!dagWithLoadingStatus && !dagResultWithLoadingStatus) {
-    return null;
-  }
-
-  const dagResult =
-    dagResultWithLoadingStatus?.result ??
-    (dagWithLoadingStatus?.result as DagResultResponse);
-
-  const operatorStatus = operator?.result?.exec_state?.status;
+  const operatorStatus = operatorResult?.exec_state?.status;
   const mapArtifacts = (artfIds: string[]) =>
     artfIds
-      .map((artifactId) => (dagResult?.artifacts ?? {})[artifactId])
+      .map((artifactId) => (nodes?.artifacts ?? {})[artifactId])
       .filter((artf) => !!artf);
-  const inputs = mapArtifacts(operator.inputs);
-  const outputs = mapArtifacts(operator.outputs);
+  const inputs = mapArtifacts(operator.inputs ?? []);
+  const outputs = mapArtifacts(operator.outputs ?? []);
 
   let checkLevelDisplay = null;
   if (operator?.spec?.check?.level) {
@@ -146,7 +138,9 @@ const WithOperatorHeader: React.FC<Props> = ({
                 workflowId={workflowId}
                 dagId={dagId}
                 dagResultId={dagResultId}
-                artifactResults={inputs}
+                nodes={nodes}
+                nodeResults={nodeResults}
+                artifactIds={operator.inputs}
                 collapsePrimitives={operator.spec?.type !== OperatorType.Check}
                 appearance={
                   operator.spec?.type === OperatorType.Metric ? 'value' : 'link'
@@ -162,7 +156,9 @@ const WithOperatorHeader: React.FC<Props> = ({
                 workflowId={workflowId}
                 dagId={dagId}
                 dagResultId={dagResultId}
-                artifactResults={outputs}
+                nodes={nodes}
+                nodeResults={nodeResults}
+                artifactIds={operator.outputs}
                 appearance={
                   operator.spec?.type === OperatorType.Metric ? 'value' : 'link'
                 }

diff --git a/src/ui/common/src/components/pages/artifact/id/components/Preview.tsx b/src/ui/common/src/components/pages/artifact/id/components/Preview.tsx
@@ -2,21 +2,25 @@ import { Alert, Box, Divider, Typography } from '@mui/material';
 import React from 'react';
 
 import ArtifactContent from '../../../../../components/workflows/artifact/content';
-import { ArtifactResultResponse } from '../../../../../handlers/responses/artifactDeprecated';
-import { ContentWithLoadingStatus } from '../../../../../reducers/artifactResultContents';
+import { ArtifactResultResponse } from '../../../../../handlers/responses/node';
+import { NodeArtifactResultContentGetResponse } from '../../../../../handlers/v2/NodeArtifactResultContentGet';
 
 type PreviewProps = {
   upstreamPending: boolean;
   previewAvailable: boolean;
-  artifact: ArtifactResultResponse;
-  contentWithLoadingStatus: ContentWithLoadingStatus;
+  artifactResult?: ArtifactResultResponse;
+  content?: NodeArtifactResultContentGetResponse;
+  contentLoading: boolean;
+  contentError: string;
 };
 
 export const Preview: React.FC<PreviewProps> = ({
   upstreamPending,
   previewAvailable,
-  artifact,
-  contentWithLoadingStatus,
+  artifactResult,
+  content,
+  contentLoading,
+  contentError,
 }) => {
   let preview = (
     <>
@@ -57,8 +61,10 @@ export const Preview: React.FC<PreviewProps> = ({
             Preview
           </Typography>
           <ArtifactContent
-            artifact={artifact}
-            contentWithLoadingStatus={contentWithLoadingStatus}
+            artifactResult={artifactResult}
+            content={content}
+            contentLoading={contentLoading}
+            contentError={contentError}
           />
         </Box>