Merge remote-tracking branch 'origin/dev' into main

zenml-io · Nov 1, 2022 · 84e036c · 84e036c
2 parents 42cdc61 + edad879
commit 84e036c
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 47 deletions.
diff --git a/src/api/fetchApi/index.ts b/src/api/fetchApi/index.ts
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { httpMethods } from '../constants';
+export let source: any = { cancel: [] };
 
 export const DEFAULT_HEADERS = {
   Accept: 'application/json',
@@ -41,10 +42,16 @@ export const fetchApiWithAuthRequest = ({
   authenticationToken: string;
   headers?: any;
 }): Promise<any> => {
+  const CancelToken = axios.CancelToken;
+
   return axios({
     method: method || httpMethods.get,
     url,
     data,
+    cancelToken: new CancelToken(function executor(c) {
+      // An executor function receives a cancel function as a parameter
+      source.cancel.push(c);
+    }),
     headers: {
       ...DEFAULT_HEADERS,
       ...headers,

diff --git a/src/redux/sagas/requestSaga.ts b/src/redux/sagas/requestSaga.ts
@@ -95,11 +95,11 @@ export function* handleRequestSaga(action: any) {
   } catch (e) {
     if (isUnauthenticatedError(e, action)) {
       yield* handleUnauthenticated(action);
-    } else if (e.response.status === httpStatus.unprocessablEntity) {
+    } else if (e?.response?.status === httpStatus.unprocessablEntity) {
       yield* unprocessablEntity();
     } else {
       let errorText = 'Something went wrong!';
-      if (e.message.indexOf('Network Error') === -1) {
+      if (e?.message?.indexOf('Network Error') === -1) {
         // this means its not a generic message from the server
         errorText = e.response ? e.response.data.detail : '';
       }

diff --git a/src/ui/layouts/Home.tsx b/src/ui/layouts/Home.tsx
@@ -72,21 +72,23 @@ export const Home: React.FC = () => {
   const authToken = useSelector(sessionSelectors.authenticationToken);
 
   useEffect(() => {
-    const getDashboardData = async () => {
-      setFetching(true);
-      const { data } = await axios.get(
-        `${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
-        {
-          headers: {
-            Authorization: `bearer ${authToken}`,
+    if (authToken) {
+      const getDashboardData = async () => {
+        setFetching(true);
+        const { data } = await axios.get(
+          `${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
+          {
+            headers: {
+              Authorization: `bearer ${authToken}`,
+            },
           },
-        },
-      );
+        );
 
-      setDashboardData(data);
-      setFetching(false);
-    };
-    getDashboardData();
+        setDashboardData(data);
+        setFetching(false);
+      };
+      getDashboardData();
+    }
   }, [authToken]);
 
   const preData = Object.entries(dashboardData);

diff --git a/src/ui/layouts/common/Table/index.tsx b/src/ui/layouts/common/Table/index.tsx
@@ -35,6 +35,7 @@ export interface TableProps {
 }
 
 const ITEMS_PER_PAGE = parseInt(process.env.REACT_APP_ITEMS_PER_PAGE as string);
+const DEFAULT_ITEMS_PER_PAGE = 10;
 
 export const Table: React.FC<TableProps> = ({
   headerCols,
@@ -50,7 +51,7 @@ export const Table: React.FC<TableProps> = ({
 
   const { itemsForPage, pages, totalOfPages } = getPaginationData({
     pageIndex,
-    itemsPerPage: ITEMS_PER_PAGE,
+    itemsPerPage: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
     items: tableRows,
   });
 

diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx
@@ -10,26 +10,30 @@ import { useSelector } from '../../../../../../hooks';
 import axios from 'axios';
 
 export const SideFooter: React.FC = () => {
-
   const authToken = useSelector(sessionSelectors.authenticationToken);
-  const [apiVersion, setApiVersion] = useState('')
+  const [apiVersion, setApiVersion] = useState('');
+
+  useEffect(() => {
+    if (authToken) {
+      const getApiVersion = async () => {
+        const { data } = await axios.get(
+          `${process.env.REACT_APP_BASE_API_URL}/version`,
+          {
+            headers: {
+              Authorization: `bearer ${authToken}`,
+            },
+          },
+        );
+        setApiVersion(data);
+      };
 
-  useEffect(()  => {  
-    const getApiVersion = async () => {
-    const { data } = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/version`, {
-      headers: {
-        'Authorization': `bearer ${authToken}` 
-      }
-    })
-    setApiVersion(data)
+      getApiVersion();
     }
+  }, [authToken]);
 
-    getApiVersion()
-  }, [authToken])
-
   return (
     <>
-      <Box marginHorizontal="md" paddingBottom='md'>
+      <Box marginHorizontal="md" paddingBottom="md">
         <Separator.LightNew />
       </Box>
 
@@ -53,13 +57,19 @@ export const SideFooter: React.FC = () => {
       <MenuItem
         Icon={() => (
           <icons.settings color={iconColors.white} size={iconSizes.md} />
-        )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} 
+        )}
+        to={routePaths.settings.personalDetails}
+        text={translate('menu.setting.text')}
       />
 
-      <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom='xs' >
-        <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
-        <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>ZenML v{apiVersion}</Paragraph>
+      <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom="xs">
+        <Paragraph color="white" style={{ fontSize: '8px', fontWeight: 400 }}>
+          UI Version v{process.env.REACT_APP_VERSION}
+        </Paragraph>
+        <Paragraph color="white" style={{ fontSize: '8px', fontWeight: 400 }}>
+          ZenML v{apiVersion}
+        </Paragraph>
       </Box>
-      </>
+    </>
   );
 };
diff --git a/src/ui/layouts/pipelines/Pipelines/index.tsx b/src/ui/layouts/pipelines/Pipelines/index.tsx
@@ -71,8 +71,9 @@ const PAGES = [
 ];
 
 export const Pipelines: React.FC = () => {
-  const { setFetching } = useService();
-  console.log(setFetching);
+  const { setFetchingForAllRuns } = useService();
+
+  console.log(setFetchingForAllRuns);
   const locationPath = useLocationPath();
 
   return (

diff --git a/src/ui/layouts/pipelines/Pipelines/useService.ts b/src/ui/layouts/pipelines/Pipelines/useService.ts
@@ -1,43 +1,50 @@
 /* eslint-disable */
 
 import { useEffect } from 'react';
+
 import {
   pipelinePagesActions,
   runsActions,
   pipelinesActions,
+  runPagesActions,
 } from '../../../../redux/actions';
 
 import { useDispatch } from '../../../hooks';
 
 interface ServiceInterface {
-  setFetching: (arg: boolean) => void;
+  setFetchingForPipeline: (arg: boolean) => void;
+  setFetchingForAllRuns: (arg: boolean) => void;
 }
 
 export const useService = (): ServiceInterface => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    setFetching(true);
-
+    setFetchingForPipeline(true);
+    setFetchingForAllRuns(true);
     dispatch(
       runsActions.allRuns({
-        onSuccess: () => setFetching(false),
-        onFailure: () => setFetching(false),
+        onSuccess: () => setFetchingForAllRuns(false),
+        onFailure: () => setFetchingForAllRuns(false),
       }),
     );
     dispatch(
       pipelinesActions.getMy({
-        onSuccess: () => setFetching(false),
-        onFailure: () => setFetching(false),
+        onSuccess: () => setFetchingForPipeline(false),
+        onFailure: () => setFetchingForPipeline(false),
       }),
     );
   }, []);
 
-  const setFetching = (fetching: boolean) => {
+  const setFetchingForPipeline = (fetching: boolean) => {
     dispatch(pipelinePagesActions.setFetching({ fetching }));
   };
+  const setFetchingForAllRuns = (fetching: boolean) => {
+    dispatch(runPagesActions.setFetching({ fetching }));
+  };
 
   return {
-    setFetching,
+    setFetchingForPipeline,
+    setFetchingForAllRuns,
   };
 };
diff --git a/src/ui/layouts/pipelines/RunsTable/useService.ts b/src/ui/layouts/pipelines/RunsTable/useService.ts
@@ -8,6 +8,7 @@ import { pipelinePagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../utils/tableFilters';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -67,6 +68,14 @@ export const useService = ({
     setSortedRuns(orderedRuns);
   }, [filter, runIds]);
 
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
+
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(pipelinePagesActions.setSelectedRunIds({ runIds }));
   };

diff --git a/src/ui/layouts/runs/RunsTable/useService.ts b/src/ui/layouts/runs/RunsTable/useService.ts
@@ -7,6 +7,7 @@ import { Sorting, SortingDirection } from './types';
 import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -40,6 +41,13 @@ export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
 
     setSortedRuns(orderedRuns as TRun[]);
   }, []);
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

diff --git a/src/ui/layouts/stackComponents/RunsTable/useService.ts b/src/ui/layouts/stackComponents/RunsTable/useService.ts
@@ -8,6 +8,7 @@ import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../utils/tableFilters';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -60,6 +61,13 @@ export const useService = ({
     }
     setSortedRuns(orderedRuns as TRun[]);
   }, [filter]);
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

diff --git a/src/ui/layouts/stacks/RunsTable/useService.ts b/src/ui/layouts/stacks/RunsTable/useService.ts
@@ -8,6 +8,7 @@ import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../utils/tableFilters';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -60,7 +61,13 @@ export const useService = ({
     }
     setSortedRuns(orderedRuns as TRun[]);
   }, [filter, runIds]);
-
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));
   };