Skip to content

Commit 943d84f

Browse files
danialraza03danialraza03
authored
Merge pull request #121 from zenml-io/stack-tab-in-components
Stack tab in components
2 parents 72307b8 + db6c8c2 commit 943d84f

File tree

10 files changed

+150
-10
lines changed

10 files changed

+150
-10
lines changed

‎src/api/stacks/getMyStacksApi.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { httpMethods } from '../constants';
44
import { apiUrl } from '../apiUrl';
55

66
const getMyStacksApi = ({
7+
component_id,
78
workspace,
89
sort_by,
910
logical_operator,
@@ -12,6 +13,7 @@ const getMyStacksApi = ({
1213
filtersParam,
1314
authenticationToken,
1415
}: {
16+
component_id?: any;
1517
workspace: string;
1618
sort_by: string;
1719
logical_operator: string;
@@ -22,7 +24,14 @@ const getMyStacksApi = ({
2224
}): Promise<TStack> =>
2325
fetchApiWithAuthRequest({
2426
url: apiUrl(endpoints.Stacks.my(workspace)),
25-
params: { sort_by, logical_operator, page, size, ...filtersParam },
27+
params: {
28+
component_id,
29+
sort_by,
30+
logical_operator,
31+
page,
32+
size,
33+
...filtersParam,
34+
},
2635
method: httpMethods.get,
2736
authenticationToken,
2837
});

‎src/redux/actions/stacks/getMyStacksAction.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { stackActionTypes } from '../../actionTypes';
22
import getMyStacksApi from '../../../api/stacks/getMyStacksApi';
33

44
export const getMyStacksAction = ({
5+
component_id,
56
workspace,
67
sort_by,
78
logical_operator,
@@ -12,6 +13,7 @@ export const getMyStacksAction = ({
1213
onSuccess,
1314
onFailure,
1415
}: {
16+
component_id?: any;
1517
name?: string;
1618
workspace?: string;
1719
sort_by?: string;
@@ -29,6 +31,7 @@ export const getMyStacksAction = ({
2931
failureActionType: stackActionTypes.getMyStacks.failure,
3032
successActionType: stackActionTypes.getMyStacks.success,
3133
params: {
34+
component_id,
3235
workspace,
3336
name,
3437
sort_by,

‎src/routes/appRoutesConfig.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,14 @@ const routes = [
321321
},
322322
exact: true,
323323
},
324+
{
325+
path: routePaths.stackComponents.stacks(':type', ':id', ':string'),
326+
Component: stackComponentsDetail,
327+
visibility: {
328+
authentication: RouteVisibilityAuthentication.authenticatedOnly,
329+
},
330+
exact: true,
331+
},
324332

325333
{
326334
path: routePaths.settings.base,

‎src/routes/routePaths.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export const routePaths = {
1111
dashboard: (workspace: string): string => `/workspaces/${workspace}`,
1212
pipelines: {
1313
base: `/pipelines`,
14-
list: (workspace: string): string => `/workspaces/${workspace}/pipelines/list`,
14+
list: (workspace: string): string =>
15+
`/workspaces/${workspace}/pipelines/list`,
1516
allRuns: (workspace: string): string => `/workspaces/${workspace}/all-runs`,
1617
},
1718
pipeline: {
@@ -96,6 +97,8 @@ export const routePaths = {
9697
`/workspaces/${workspace}/components/${type}/${id}/configuration`,
9798
runs: (type: string, id: TId, workspace: string): string =>
9899
`/workspaces/${workspace}/components/${type}/${id}/runs`,
100+
stacks: (type: string, id: TId, workspace: string): string =>
101+
`/workspaces/${workspace}/components/${type}/${id}/stacks`,
99102
},
100103

101104
settings: {

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
8484
} = callActionForStackComponentRunsForPagination();
8585
const locationPath = useLocation();
8686
const componentName = locationPath.pathname.split('/')[3];
87+
const CheckIfStackFormComponents =
88+
componentName === 'components' &&
89+
locationPath.pathname.split('/')[6] === 'stacks'
90+
? locationPath.pathname.split('/')[6]
91+
: locationPath.pathname.split('/')[5];
8792
const CheckIfRun =
8893
componentName === 'components'
8994
? locationPath.pathname.split('/')[6]
@@ -150,7 +155,16 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
150155
break;
151156
}
152157
case 'components':
153-
if (CheckIfRun) {
158+
if (CheckIfRun && CheckIfStackFormComponents === 'stacks') {
159+
dispatchStackData(
160+
page,
161+
size,
162+
checkValidFilter.length ? (filters as any) : [],
163+
activeSorting,
164+
locationPath.pathname.split('/')[5],
165+
);
166+
break;
167+
} else if (CheckIfRun && CheckIfStackFormComponents === 'runs') {
154168
dispatchStackComponentRunsData(
155169
id,
156170
page,
@@ -168,6 +182,24 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
168182
);
169183
break;
170184
}
185+
// dispatchStackComponentRunsData(
186+
// id,
187+
// page,
188+
// size,
189+
// checkValidFilter.length ? (filters as any) : [],
190+
// activeSorting,
191+
192+
// );
193+
// break;
194+
// } else {
195+
// dispatchStackComponentsData(
196+
// page,
197+
// size,
198+
// checkValidFilter.length ? (filters as any) : [],
199+
// activeSorting,
200+
// );
201+
// break;
202+
// }
171203
case 'pipelines':
172204
if (CheckIfRun) {
173205
dispatchPipelineRunsData(

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,12 @@ export const Table: React.FC<TableProps> = ({
190190
componentName === 'components'
191191
? locationPath.pathname.split('/')[6]
192192
: locationPath.pathname.split('/')[5];
193+
const CheckIfStackFormComponents =
194+
componentName === 'components' &&
195+
locationPath.pathname.split('/')[6] === 'stacks'
196+
? locationPath.pathname.split('/')[6]
197+
: locationPath.pathname.split('/')[5];
198+
193199
const id =
194200
componentName === 'components'
195201
? locationPath.pathname.split('/')[5]
@@ -201,6 +207,7 @@ export const Table: React.FC<TableProps> = ({
201207
if (filters) {
202208
setPageIndex(0);
203209
}
210+
204211
switch (componentName) {
205212
case 'stacks':
206213
if (CheckIfRun) {
@@ -218,11 +225,21 @@ export const Table: React.FC<TableProps> = ({
218225
itemPerPage,
219226
checkValidFilter.length ? (validFilters as any) : [],
220227
activeSorting,
228+
locationPath.pathname.split('/')[6],
221229
);
222230
break;
223231
}
224232
case 'components':
225-
if (CheckIfRun) {
233+
if (CheckIfRun && CheckIfStackFormComponents === 'stacks') {
234+
dispatchStackData(
235+
1,
236+
itemPerPage,
237+
checkValidFilter.length ? (validFilters as any) : [],
238+
activeSorting,
239+
locationPath.pathname.split('/')[5],
240+
);
241+
break;
242+
} else if (CheckIfRun && CheckIfStackFormComponents === 'runs') {
226243
dispatchStackComponentRunsData(
227244
id,
228245
1,

‎src/ui/layouts/stackComponents/StackDetail/index.tsx‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ import { BasePage } from '../BasePage';
1313
import { useService } from './useService';
1414
import { useLocationPath, useSelector } from '../../../hooks';
1515
import FilterComponent, {
16+
getInitialFilterState,
1617
getInitialFilterStateForRuns,
1718
} from '../../../components/Filters';
1819
import { workspaceSelectors } from '../../../../redux/selectors';
19-
import { List } from '../Stacks/List';
20+
import { List as StackComponenList } from '../Stacks/List';
21+
import { List } from '../../stacks/Stacks/List';
2022

2123
const FilterWrapperForRun = () => {
2224
const locationPath = useLocationPath();
@@ -46,6 +48,35 @@ const FilterWrapperForRun = () => {
4648
</FilterComponent>
4749
);
4850
};
51+
52+
const FilterWrapperForStacks = () => {
53+
const locationPath = useLocationPath();
54+
55+
// TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
56+
const [filters, setFilter] = useState([getInitialFilterState()]);
57+
function getFilter(values: any) {
58+
const filterValuesMap = values.map((v: any) => {
59+
return {
60+
column: v.column.selectedValue,
61+
type: v.contains.selectedValue,
62+
value: v.filterValue,
63+
};
64+
});
65+
return filterValuesMap;
66+
}
67+
return (
68+
<FilterComponent
69+
getInitials={getInitialFilterState}
70+
filters={filters}
71+
setFilter={setFilter}
72+
>
73+
<List
74+
stackComponentId={locationPath.split('/')[5]}
75+
filter={getFilter(filters)}
76+
/>
77+
</FilterComponent>
78+
);
79+
};
4980
const getTabPages = (
5081
stackId: TId,
5182
locationPath: any,
@@ -70,6 +101,15 @@ const getTabPages = (
70101
selectedWorkspace,
71102
),
72103
},
104+
{
105+
text: 'Stacks',
106+
Component: FilterWrapperForStacks,
107+
path: routePaths.stackComponents.stacks(
108+
locationPath.split('/')[4],
109+
stackId,
110+
selectedWorkspace,
111+
),
112+
},
73113
];
74114
};
75115

@@ -191,12 +231,12 @@ export const StackDetail: React.FC = () => {
191231
</Box>
192232
</Box> */}
193233
<Box paddingTop={'xl'}>
194-
<List
234+
<StackComponenList
195235
filter={[]}
196236
pagination={false}
197237
isExpended
198238
id={stackComponent.id}
199-
></List>
239+
></StackComponenList>
200240
{/* <>
201241
<table className={cn(styles.table)}>
202242
<tbody>

‎src/ui/layouts/stacks/Stacks/List/index.tsx‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22

33
import { translate } from '../translate';
44
import { CollapseTable } from '../../../common/CollapseTable';
@@ -12,20 +12,28 @@ import {
1212
workspaceSelectors,
1313
stackSelectors,
1414
} from '../../../../../redux/selectors';
15+
import { callActionForStacksForPagination } from '../useService';
1516

1617
interface Props {
1718
filter: any;
1819
pagination?: boolean;
1920
id?: string;
2021
isExpended?: boolean;
22+
stackComponentId?: TId;
2123
}
2224
export const List: React.FC<Props> = ({
2325
filter,
2426
pagination,
2527
isExpended,
2628
id,
29+
stackComponentId,
2730
}: Props) => {
2831
const history = useHistory();
32+
const { dispatchStackData } = callActionForStacksForPagination();
33+
const ITEMS_PER_PAGE = parseInt(
34+
process.env.REACT_APP_ITEMS_PER_PAGE as string,
35+
);
36+
const DEFAULT_ITEMS_PER_PAGE = 10;
2937
const {
3038
openStackIds,
3139
setOpenStackIds,
@@ -37,7 +45,22 @@ export const List: React.FC<Props> = ({
3745
activeSortingDirection,
3846
setActiveSortingDirection,
3947
setSelectedRunIds,
40-
} = useService({ filter, isExpended });
48+
} = useService({ filter, isExpended, stackComponentId });
49+
const stacksPaginated = useSelector(stackSelectors.mystacksPaginated);
50+
51+
useEffect(() => {
52+
if (stackComponentId) {
53+
dispatchStackData(
54+
1,
55+
ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
56+
filter,
57+
activeSortingDirection?.toLowerCase() + ':' + activeSorting,
58+
stackComponentId,
59+
);
60+
}
61+
// eslint-disable-next-line react-hooks/exhaustive-deps
62+
}, [stackComponentId]);
63+
console.log(fetching, 'asdasdasd');
4164
const expendedRow = filteredStacks.filter((item) => item.id === id);
4265
const headerCols = GetHeaderCols({
4366
expendedRow,
@@ -51,8 +74,8 @@ export const List: React.FC<Props> = ({
5174
setActiveSortingDirection,
5275
});
5376
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
54-
const stacksPaginated = useSelector(stackSelectors.mystacksPaginated);
5577

78+
// console.log(filter, 'filterfilterfilter');
5679
const openDetailPage = (stack: TStack) => {
5780
setSelectedRunIds([]);
5881
if (id) {

‎src/ui/layouts/stacks/Stacks/List/useService.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,11 @@ interface filterValue {
3232
value: string;
3333
}
3434
export const useService = ({
35+
stackComponentId,
3536
filter,
3637
isExpended,
3738
}: {
39+
stackComponentId?: any;
3840
isExpended?: any;
3941
filter: {
4042
column: filterValue;
@@ -72,6 +74,7 @@ export const useService = ({
7274
const intervalId = setInterval(() => {
7375
dispatch(
7476
stacksActions.getMy({
77+
component_id: stackComponentId,
7578
sort_by: applySorting ? applySorting : 'created',
7679
logical_operator: 'and',
7780
workspace: selectedWorkspace,

‎src/ui/layouts/stacks/Stacks/useService.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,15 @@ export const callActionForStacksForPagination = () => {
5454
size: number,
5555
filters?: any[],
5656
sortby?: string,
57+
stackComponentId?: TId,
5758
) {
5859
const logicalOperator = localStorage.getItem('logical_operator');
5960
let filtersParam = filterObjectForParam(filters);
6061

6162
setFetching(true);
6263
dispatch(
6364
stacksActions.getMy({
65+
component_id: stackComponentId,
6466
workspace: selectedWorkspace,
6567
sort_by: sortby ? sortby : 'created',
6668
logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',

0 commit comments

Comments
 (0)