Skip to content

Commit 10e1427

Browse files
danialraza03danialraza03
authored
Merge pull request #128 from zenml-io/dev
Dev
2 parents 4be399b + 556d917 commit 10e1427

File tree

22 files changed

+413
-97
lines changed

22 files changed

+413
-97
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: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,15 @@ const routes = [
157157
},
158158
exact: true,
159159
},
160+
{
161+
path: routePaths.stack.components(':id', ':string'),
162+
Component: StackDetail,
163+
visibility: {
164+
authentication: RouteVisibilityAuthentication.authenticatedOnly,
165+
},
166+
exact: true,
167+
},
168+
160169
{
161170
path: routePaths.stack.runs(':string', ':id'),
162171
Component: StackDetail,
@@ -321,6 +330,14 @@ const routes = [
321330
},
322331
exact: true,
323332
},
333+
{
334+
path: routePaths.stackComponents.stacks(':type', ':id', ':string'),
335+
Component: stackComponentsDetail,
336+
visibility: {
337+
authentication: RouteVisibilityAuthentication.authenticatedOnly,
338+
},
339+
exact: true,
340+
},
324341

325342
{
326343
path: routePaths.settings.base,

‎src/routes/routePaths.tsx‎

Lines changed: 6 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: {
@@ -82,6 +83,8 @@ export const routePaths = {
8283
`/workspaces/${workspace}/stacks/${id}/configuration`,
8384
runs: (workspace: string, id: TId): string =>
8485
`/workspaces/${workspace}/stacks/${id}/runs`,
86+
components: (id: TId, workspace: string): string =>
87+
`/workspaces/${workspace}/stacks/${id}/component`,
8588
},
8689
runs: {
8790
base: (id: TId): string => `/stacks/${id}`,
@@ -96,6 +99,8 @@ export const routePaths = {
9699
`/workspaces/${workspace}/components/${type}/${id}/configuration`,
97100
runs: (type: string, id: TId, workspace: string): string =>
98101
`/workspaces/${workspace}/components/${type}/${id}/runs`,
102+
stacks: (type: string, id: TId, workspace: string): string =>
103+
`/workspaces/${workspace}/components/${type}/${id}/stacks`,
99104
},
100105

101106
settings: {

‎src/ui/components/Filters/index.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -657,7 +657,14 @@ const FilterComponent = ({
657657
onClick={onClick}
658658
ref={ref}
659659
>
660-
<div>{value}</div>
660+
<div
661+
style={{
662+
fontSize: '12px',
663+
fontFamily: 'Rubik',
664+
}}
665+
>
666+
{value}
667+
</div>
661668
<div>
662669
<icons.calendar size={iconSizes.md} color={iconColors.grey} />
663670
</div>
@@ -990,6 +997,8 @@ const FilterComponent = ({
990997
onChange={(value: any) => {
991998
if (value) {
992999
handleChangeForSearchable(filter, value.value);
1000+
} else {
1001+
handleChangeForSearchable(filter, '');
9931002
}
9941003
}}
9951004
isClearable={true}
@@ -1013,6 +1022,8 @@ const FilterComponent = ({
10131022
onChange={(value: any) => {
10141023
if (value) {
10151024
handleChangeForSearchable(filter, value.value);
1025+
} else {
1026+
handleChangeForSearchable(filter, '');
10161027
}
10171028
}}
10181029
isClearable={true}
@@ -1033,11 +1044,14 @@ const FilterComponent = ({
10331044
styles={selectStyles}
10341045
onInputChange={(e: any) => callActionForUsers(e)}
10351046
onChange={(value: any) => {
1047+
console.log(value, 'valuevalue');
10361048
if (value) {
10371049
handleChangeForSearchable(filter, value.value);
1050+
} else {
1051+
handleChangeForSearchable(filter, '');
10381052
}
10391053
}}
1040-
isClearable={true}
1054+
isClearable
10411055
// value={'role'}
10421056
className={styles.searchableInput}
10431057
// classNamePrefix="select"

‎src/ui/components/dag/index.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { useService } from './useService';
33
import { LayoutFlow } from '../lineage';
44
import { FullWidthSpinner } from '../spinners';
5+
import { useSelector } from '../../hooks';
6+
import { sessionSelectors } from '../../../redux/selectors';
7+
import axios from 'axios';
58

69
const styles = {
710
container: { width: '100%', height: '100%' },
@@ -12,16 +15,38 @@ export const DAG: React.FC<{ runId: TId; fetching?: boolean }> = ({
1215
runId,
1316
fetching,
1417
}) => {
18+
const [metadata, setMetaData] = useState([] as any);
19+
20+
const authToken = useSelector(sessionSelectors.authenticationToken);
21+
1522
const { graph } = useService({ runId });
1623

24+
useEffect(() => {
25+
fetchMetaData();
26+
// eslint-disable-next-line react-hooks/exhaustive-deps
27+
}, [runId]);
28+
29+
const fetchMetaData = async () => {
30+
const response = await axios.get(
31+
`${process.env.REACT_APP_BASE_API_URL}/run-metadata?pipeline_run_id=${runId}&key=orchestrator_url`,
32+
{
33+
headers: {
34+
Authorization: `bearer ${authToken}`,
35+
},
36+
},
37+
);
38+
39+
setMetaData(response?.data?.items); //Setting the response into state
40+
};
41+
1742
if (fetching) {
1843
return <FullWidthSpinner color="black" size="md" />;
1944
}
20-
45+
// console.log(metadata, 'metadatametadata');
2146
return (
2247
<div style={styles.container}>
2348
<div style={styles.dag}>
24-
<LayoutFlow runId={runId} graph={graph} />
49+
<LayoutFlow graph={graph} runId={runId} metadata={metadata} />
2550
</div>
2651
</div>
2752
);

‎src/ui/components/icons/assets/Logs.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/ui/components/icons/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import { ReactComponent as Cached } from './assets/Cached.svg';
4444
import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
4545
import { ReactComponent as Edit } from './assets/Edit.svg';
4646
import { ReactComponent as Search } from './assets/Search.svg';
47-
47+
import { ReactComponent as Logs } from './assets/Logs.svg';
4848
//icons for stackComponents
4949
// import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
5050
import { ReactComponent as Folders } from './assets/Folders.svg';
@@ -172,7 +172,7 @@ const icons = {
172172
edit: createIcon({ Component: Edit }),
173173
search: createIcon({ Component: Search }),
174174
run: createIcon({ Component: Run, useStroke: true }),
175-
175+
logs: createIcon({ Component: Logs, useStroke: true }),
176176
//icons for stackComponents
177177
artifact_store: createIcon({ Component: Folders, useStroke: true }),
178178
alerter: createIcon({ Component: ChatDots, useStroke: true }),

‎src/ui/components/lineage/index.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const getLayoutedElements = (
110110

111111
const nodeTypes = { step: StepNode, artifact: ArtifactNode };
112112

113-
export const LayoutFlow: React.FC<any> = (graph: any, runId: any) => {
113+
export const LayoutFlow: React.FC<any> = (graph: any) => {
114114
const dispatch = useDispatch();
115115
const {
116116
initialNodes: layoutedNodes,
@@ -153,9 +153,19 @@ export const LayoutFlow: React.FC<any> = (graph: any, runId: any) => {
153153
>
154154
Refresh
155155
</button>
156-
156+
<button onClick={() => setLegend(!legend)}>Legend</button>
157+
<button
158+
onClick={() => {
159+
window.open(
160+
graph?.metadata[0]?.value
161+
? graph?.metadata[0]?.value
162+
: 'https://zenml.io/home',
163+
);
164+
}}
165+
>
166+
Orchestrator Logs
167+
</button>
157168
<div style={{ position: 'relative' }}>
158-
<button onClick={() => setLegend(!legend)}>Legend</button>
159169
<div className="legend" style={{ display: legend ? '' : 'none' }}>
160170
<span>
161171
<Analysis /> <span>Data Analysis Artifact</span>

‎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(

0 commit comments

Comments
 (0)