Skip to content

Commit 84e036c

Browse files
htahir1htahir1
committed
Merge remote-tracking branch 'origin/dev' into main
2 parents 42cdc61 + edad879 commit 84e036c

File tree

11 files changed

+107
-47
lines changed

11 files changed

+107
-47
lines changed

‎src/api/fetchApi/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import axios from 'axios';
22
import { httpMethods } from '../constants';
3+
export let source: any = { cancel: [] };
34

45
export const DEFAULT_HEADERS = {
56
Accept: 'application/json',
@@ -41,10 +42,16 @@ export const fetchApiWithAuthRequest = ({
4142
authenticationToken: string;
4243
headers?: any;
4344
}): Promise<any> => {
45+
const CancelToken = axios.CancelToken;
46+
4447
return axios({
4548
method: method || httpMethods.get,
4649
url,
4750
data,
51+
cancelToken: new CancelToken(function executor(c) {
52+
// An executor function receives a cancel function as a parameter
53+
source.cancel.push(c);
54+
}),
4855
headers: {
4956
...DEFAULT_HEADERS,
5057
...headers,

‎src/redux/sagas/requestSaga.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,11 @@ export function* handleRequestSaga(action: any) {
9595
} catch (e) {
9696
if (isUnauthenticatedError(e, action)) {
9797
yield* handleUnauthenticated(action);
98-
} else if (e.response.status === httpStatus.unprocessablEntity) {
98+
} else if (e?.response?.status === httpStatus.unprocessablEntity) {
9999
yield* unprocessablEntity();
100100
} else {
101101
let errorText = 'Something went wrong!';
102-
if (e.message.indexOf('Network Error') === -1) {
102+
if (e?.message?.indexOf('Network Error') === -1) {
103103
// this means its not a generic message from the server
104104
errorText = e.response ? e.response.data.detail : '';
105105
}

‎src/ui/layouts/Home.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -72,21 +72,23 @@ export const Home: React.FC = () => {
7272
const authToken = useSelector(sessionSelectors.authenticationToken);
7373

7474
useEffect(() => {
75-
const getDashboardData = async () => {
76-
setFetching(true);
77-
const { data } = await axios.get(
78-
`${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
79-
{
80-
headers: {
81-
Authorization: `bearer ${authToken}`,
75+
if (authToken) {
76+
const getDashboardData = async () => {
77+
setFetching(true);
78+
const { data } = await axios.get(
79+
`${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
80+
{
81+
headers: {
82+
Authorization: `bearer ${authToken}`,
83+
},
8284
},
83-
},
84-
);
85+
);
8586

86-
setDashboardData(data);
87-
setFetching(false);
88-
};
89-
getDashboardData();
87+
setDashboardData(data);
88+
setFetching(false);
89+
};
90+
getDashboardData();
91+
}
9092
}, [authToken]);
9193

9294
const preData = Object.entries(dashboardData);

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface TableProps {
3535
}
3636

3737
const ITEMS_PER_PAGE = parseInt(process.env.REACT_APP_ITEMS_PER_PAGE as string);
38+
const DEFAULT_ITEMS_PER_PAGE = 10;
3839

3940
export const Table: React.FC<TableProps> = ({
4041
headerCols,
@@ -50,7 +51,7 @@ export const Table: React.FC<TableProps> = ({
5051

5152
const { itemsForPage, pages, totalOfPages } = getPaginationData({
5253
pageIndex,
53-
itemsPerPage: ITEMS_PER_PAGE,
54+
itemsPerPage: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
5455
items: tableRows,
5556
});
5657

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,30 @@ import { useSelector } from '../../../../../../hooks';
1010
import axios from 'axios';
1111

1212
export const SideFooter: React.FC = () => {
13-
1413
const authToken = useSelector(sessionSelectors.authenticationToken);
15-
const [apiVersion, setApiVersion] = useState('')
14+
const [apiVersion, setApiVersion] = useState('');
15+
16+
useEffect(() => {
17+
if (authToken) {
18+
const getApiVersion = async () => {
19+
const { data } = await axios.get(
20+
`${process.env.REACT_APP_BASE_API_URL}/version`,
21+
{
22+
headers: {
23+
Authorization: `bearer ${authToken}`,
24+
},
25+
},
26+
);
27+
setApiVersion(data);
28+
};
1629

17-
useEffect(() => {
18-
const getApiVersion = async () => {
19-
const { data } = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/version`, {
20-
headers: {
21-
'Authorization': `bearer ${authToken}`
22-
}
23-
})
24-
setApiVersion(data)
30+
getApiVersion();
2531
}
32+
}, [authToken]);
2633

27-
getApiVersion()
28-
}, [authToken])
29-
3034
return (
3135
<>
32-
<Box marginHorizontal="md" paddingBottom='md'>
36+
<Box marginHorizontal="md" paddingBottom="md">
3337
<Separator.LightNew />
3438
</Box>
3539

@@ -53,13 +57,19 @@ export const SideFooter: React.FC = () => {
5357
<MenuItem
5458
Icon={() => (
5559
<icons.settings color={iconColors.white} size={iconSizes.md} />
56-
)} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')}
60+
)}
61+
to={routePaths.settings.personalDetails}
62+
text={translate('menu.setting.text')}
5763
/>
5864

59-
<Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom='xs' >
60-
<Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
61-
<Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>ZenML v{apiVersion}</Paragraph>
65+
<Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom="xs">
66+
<Paragraph color="white" style={{ fontSize: '8px', fontWeight: 400 }}>
67+
UI Version v{process.env.REACT_APP_VERSION}
68+
</Paragraph>
69+
<Paragraph color="white" style={{ fontSize: '8px', fontWeight: 400 }}>
70+
ZenML v{apiVersion}
71+
</Paragraph>
6272
</Box>
63-
</>
73+
</>
6474
);
6575
};

‎src/ui/layouts/pipelines/Pipelines/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,9 @@ const PAGES = [
7171
];
7272

7373
export const Pipelines: React.FC = () => {
74-
const { setFetching } = useService();
75-
console.log(setFetching);
74+
const { setFetchingForAllRuns } = useService();
75+
76+
console.log(setFetchingForAllRuns);
7677
const locationPath = useLocationPath();
7778

7879
return (

‎src/ui/layouts/pipelines/Pipelines/useService.ts‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,50 @@
11
/* eslint-disable */
22

33
import { useEffect } from 'react';
4+
45
import {
56
pipelinePagesActions,
67
runsActions,
78
pipelinesActions,
9+
runPagesActions,
810
} from '../../../../redux/actions';
911

1012
import { useDispatch } from '../../../hooks';
1113

1214
interface ServiceInterface {
13-
setFetching: (arg: boolean) => void;
15+
setFetchingForPipeline: (arg: boolean) => void;
16+
setFetchingForAllRuns: (arg: boolean) => void;
1417
}
1518

1619
export const useService = (): ServiceInterface => {
1720
const dispatch = useDispatch();
1821

1922
useEffect(() => {
20-
setFetching(true);
21-
23+
setFetchingForPipeline(true);
24+
setFetchingForAllRuns(true);
2225
dispatch(
2326
runsActions.allRuns({
24-
onSuccess: () => setFetching(false),
25-
onFailure: () => setFetching(false),
27+
onSuccess: () => setFetchingForAllRuns(false),
28+
onFailure: () => setFetchingForAllRuns(false),
2629
}),
2730
);
2831
dispatch(
2932
pipelinesActions.getMy({
30-
onSuccess: () => setFetching(false),
31-
onFailure: () => setFetching(false),
33+
onSuccess: () => setFetchingForPipeline(false),
34+
onFailure: () => setFetchingForPipeline(false),
3235
}),
3336
);
3437
}, []);
3538

36-
const setFetching = (fetching: boolean) => {
39+
const setFetchingForPipeline = (fetching: boolean) => {
3740
dispatch(pipelinePagesActions.setFetching({ fetching }));
3841
};
42+
const setFetchingForAllRuns = (fetching: boolean) => {
43+
dispatch(runPagesActions.setFetching({ fetching }));
44+
};
3945

4046
return {
41-
setFetching,
47+
setFetchingForPipeline,
48+
setFetchingForAllRuns,
4249
};
4350
};

‎src/ui/layouts/pipelines/RunsTable/useService.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { pipelinePagesActions } from '../../../../redux/actions';
88
import { useDispatch, useSelector } from '../../../hooks';
99
import { runSelectors } from '../../../../redux/selectors';
1010
import { getFilteredDataForTable } from '../../../../utils/tableFilters';
11+
import { source } from '../../../../api/fetchApi';
1112

1213
interface ServiceInterface {
1314
sortedRuns: TRun[];
@@ -67,6 +68,14 @@ export const useService = ({
6768
setSortedRuns(orderedRuns);
6869
}, [filter, runIds]);
6970

71+
useEffect(() => {
72+
return () => {
73+
source.cancel.forEach((element: any) => {
74+
element();
75+
});
76+
};
77+
}, []);
78+
7079
const setSelectedRunIds = (runIds: TId[]) => {
7180
dispatch(pipelinePagesActions.setSelectedRunIds({ runIds }));
7281
};

‎src/ui/layouts/runs/RunsTable/useService.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Sorting, SortingDirection } from './types';
77
import { stackPagesActions } from '../../../../redux/actions';
88
import { useDispatch, useSelector } from '../../../hooks';
99
import { runSelectors } from '../../../../redux/selectors';
10+
import { source } from '../../../../api/fetchApi';
1011

1112
interface ServiceInterface {
1213
sortedRuns: TRun[];
@@ -40,6 +41,13 @@ export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
4041

4142
setSortedRuns(orderedRuns as TRun[]);
4243
}, []);
44+
useEffect(() => {
45+
return () => {
46+
source.cancel.forEach((element: any) => {
47+
element();
48+
});
49+
};
50+
}, []);
4351

4452
const setSelectedRunIds = (runIds: TId[]) => {
4553
dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

‎src/ui/layouts/stackComponents/RunsTable/useService.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { stackPagesActions } from '../../../../redux/actions';
88
import { useDispatch, useSelector } from '../../../hooks';
99
import { runSelectors } from '../../../../redux/selectors';
1010
import { getFilteredDataForTable } from '../../../../utils/tableFilters';
11+
import { source } from '../../../../api/fetchApi';
1112

1213
interface ServiceInterface {
1314
sortedRuns: TRun[];
@@ -60,6 +61,13 @@ export const useService = ({
6061
}
6162
setSortedRuns(orderedRuns as TRun[]);
6263
}, [filter]);
64+
useEffect(() => {
65+
return () => {
66+
source.cancel.forEach((element: any) => {
67+
element();
68+
});
69+
};
70+
}, []);
6371

6472
const setSelectedRunIds = (runIds: TId[]) => {
6573
dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

0 commit comments

Comments
 (0)