Merge pull request #531 from zenml-io/UAT

Author: Cahllagerfeld

appserverSchema.d.ts

@@ -7,11 +7,25 @@ import { workspaceSelectors } from '../../../../redux/selectors';
 import { Link } from 'react-router-dom';
 import { routePaths } from '../../../../routes/routePaths';
 import { Run } from '../../../../api/types';
+import { Box } from '../../boxes';
+import { icons } from '../../icons';
+import { iconColors, iconSizes } from '../../../../constants';
 
 interface CodeCardProps {
   run: Run;
 }
 
+const innerBoxStyleDisable = {
+  // height: '30px',
+  border: '2px solid #f0ebfc',
+  borderRadius: '5px',
+  display: 'inline-flex',
+  paddingLeft: '8px',
+  paddingRight: '8px',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
 const CodeCard = ({ run }: CodeCardProps) => {
   const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
   return (
@@ -20,17 +34,43 @@ const CodeCard = ({ run }: CodeCardProps) => {
         <Paragraph className={styles.card__key}>Code Repository</Paragraph>
         <Paragraph className={styles.card__value}>
           {/* @ts-ignore */}
-          {run.deployment?.code_reference?.code_repository?.id ? (
-            <Link
-              to={routePaths.repositories.overview(
-                selectedWorkspace,
-                // @ts-ignore
-                run.deployment?.code_reference?.code_repository?.id,
+          {run.body?.code_reference?.body?.code_repository?.id ? (
+            <>
+              {run.body?.code_reference?.permission_denied ||
+              run.body?.code_reference?.body?.code_repository
+                .permission_denied ? (
+                <div>
+                  <Box style={innerBoxStyleDisable}>
+                    <icons.lock2
+                      style={{ paddingRight: '5px' }}
+                      color={iconColors.grey}
+                      size={iconSizes.sml}
+                    />
+                    <Paragraph
+                      size="small"
+                      style={{
+                        color: '#666c78',
+                      }}
+                    >
+                      {run.body?.code_reference?.body?.code_repository?.name &&
+                        `${run.body?.code_reference?.body.code_repository?.name}`}
+                      {/* `${run?.body?.pipeline?.name} ( v${run?.pipeline?.version} )`} */}
+                    </Paragraph>
+                  </Box>
+                </div>
+              ) : (
+                <Link
+                  to={routePaths.repositories.overview(
+                    selectedWorkspace,
+                    // @ts-ignore
+                    run.body?.code_reference?.body?.code_repository?.id,
+                  )}
+                >
+                  {/* @ts-ignore */}
+                  {run.body?.code_reference?.body?.code_repository?.name}
+                </Link>
               )}
-            >
-              {/* @ts-ignore */}
-              {run.deployment?.code_reference?.code_repository?.id}
-            </Link>
+            </>
           ) : (
             'n/a'
           )}

src/ui/components/runDetailCards/Cards/CodeCard.tsx

@@ -18,6 +18,7 @@ export const usePollingService = ({
   sortBy,
   isExpended,
   dispatchFun,
+  type,
   paginatedValue,
 }: {
   pipelineId?: TId;
@@ -26,7 +27,7 @@ export const usePollingService = ({
   isExpended?: any;
   sortBy: string;
   dispatchFun: Function;
-
+  type?: string;
   paginatedValue: any;
   filter: {
     column: filterValue;
@@ -40,7 +41,6 @@ export const usePollingService = ({
 
   const isValidFilter = filter?.map((f) => f.value).join('');
   const [pending, setPending] = useState(false);
-  console.log(stackComponentId, 'dispatchFun');
   useEffect(() => {
     if (!isValidFilter && !isExpended && !pending) {
       const intervalId = setInterval(() => {
@@ -52,6 +52,7 @@ export const usePollingService = ({
             stackId: stackId,
             component_id: stackComponentId,
             sort_by: sortBy,
+            type,
             logical_operator: 'and',
             workspace: selectedWorkspace,
             page: paginatedValue.page,

src/ui/hooks/usePollingService.ts

@@ -51,33 +51,6 @@ export const useService = (): ServiceInterface => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, setIsMounted]);
 
-  useEffect(() => {
-    if (run.body?.status === 'running') {
-      const intervalId = setInterval(() => {
-        dispatch(
-          runsActions.runForId({
-            pipelineId: pipelineId,
-            runId: id,
-            onSuccess: (res) => {
-              if (res.status !== 'running') {
-                dispatch(
-                  runsActions.graphForRun({
-                    runId: id,
-                  }),
-                );
-              }
-            },
-          }),
-        );
-      }, 12000);
-
-      return () => {
-        clearInterval(intervalId);
-      };
-    }
-    // This is important
-  }, [pipelineId, id, run, dispatch]);
-
   const fetchMetaData = async () => {
     const response = await axios.get(
       `${process.env.REACT_APP_BASE_API_URL}/run-metadata?pipeline_run_id=${id}&key=orchestrator_url`,

src/ui/layouts/pipelines/RunDetail/useService.ts

@@ -51,33 +51,6 @@ export const useService = (): ServiceInterface => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, setIsMounted]);
 
-  useEffect(() => {
-    if (run.body?.status === 'running') {
-      const intervalId = setInterval(() => {
-        dispatch(
-          runsActions.runForId({
-            repositoryID: repositoryID,
-            runId: id,
-            onSuccess: (res) => {
-              if (res.status !== 'running') {
-                dispatch(
-                  runsActions.graphForRun({
-                    runId: id,
-                  }),
-                );
-              }
-            },
-          }),
-        );
-      }, 12000);
-
-      return () => {
-        clearInterval(intervalId);
-      };
-    }
-    // This is important
-  }, [repositoryID, id, run, dispatch]);
-
   const fetchMetaData = async () => {
     const response = await axios.get(
       `${process.env.REACT_APP_BASE_API_URL}/run-metadata?pipeline_run_id=${id}&key=orchestrator_url`,

src/ui/layouts/repositories/RunDetail/useService.ts

@@ -61,31 +61,6 @@ export const useService = (): ServiceInterface => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, setIsMounted]);
-  useEffect(() => {
-    if (run.body?.status === 'running') {
-      const intervalId = setInterval(() => {
-        dispatch(
-          runsActions.runForId({
-            runId: runId,
-            onSuccess: (res) => {
-              if (res.status !== 'running') {
-                dispatch(
-                  runsActions.graphForRun({
-                    runId: runId,
-                  }),
-                );
-              }
-            },
-          }),
-        );
-      }, 5000);
-
-      return () => {
-        clearInterval(intervalId);
-      };
-    }
-    // This is important
-  }, [runId, run, dispatch]);
 
   const fetchMetaData = async () => {
     const response = await axios.get(

src/ui/layouts/runs/RunDetail/useService.ts

@@ -69,6 +69,7 @@ export const List: React.FC<Props> = ({
   usePollingService({
     filter,
     sortBy: activeSortingDirection?.toLowerCase() + ':' + activeSorting,
+    type: componentId,
     dispatchFun: stackComponentsActions.getMy,
     paginatedValue: stackComponentsPaginated,
   });

src/ui/layouts/stackComponents/Stacks/List/index.tsx

@@ -51,32 +51,6 @@ export const useService = (): ServiceInterface => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, setIsMounted]);
 
-  useEffect(() => {
-    if (run.body?.status === 'running') {
-      const intervalId = setInterval(() => {
-        dispatch(
-          runsActions.runForId({
-            stackId: stackId,
-            runId: id,
-            onSuccess: (res) => {
-              if (res.status !== 'running') {
-                dispatch(
-                  runsActions.graphForRun({
-                    runId: id,
-                  }),
-                );
-              }
-            },
-          }),
-        );
-      }, 5000);
-
-      return () => {
-        clearInterval(intervalId);
-      };
-    }
-    // This is important
-  }, [stackId, id, run, dispatch]);
   const fetchMetaData = async () => {
     const response = await axios.get(
       `${process.env.REACT_APP_BASE_API_URL}/run-metadata?pipeline_run_id=${id}&key=orchestrator_url`,