Skip to content

Commit 354cee3

Browse files
talhainvenxiontalhainvenxion
committed
hyperlink for pipeline and stack added in all run details page.
1 parent 1b0a4b9 commit 354cee3

File tree

5 files changed

+114
-2
lines changed

5 files changed

+114
-2
lines changed

‎src/ui/components/dag/useService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// import { useEffect } from 'react';
2+
import { useEffect } from 'react';
23
import { useSelector } from 'react-redux';
34
import { runSelectors } from '../../../redux/selectors';
45

56
export const useService = ({ runId }: { runId: TId }) => {
67
const graph = useSelector(runSelectors.graphByRunId(runId));
78
// debugger;
8-
// useEffect(() => {}, [graph]);
9+
useEffect(() => {}, [graph]);
910
// const graph: any = useSelector(runSelectors.graphByRunId(runId));
1011
return { graph };
1112
};

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,24 @@ export const RunDetail: React.FC = () => {
127127
{run.name}
128128
</Paragraph>
129129
</Box>
130+
<Box>
131+
<Paragraph style={headStyle}>PIPELINE NAME</Paragraph>
132+
<Paragraph
133+
size="small"
134+
style={{
135+
color: '#22BBDD',
136+
textDecoration: 'underline',
137+
cursor: 'pointer',
138+
marginTop: '10px',
139+
}}
140+
onClick={(event) => {
141+
event.stopPropagation();
142+
history.push(routePaths.pipeline.configuration(run.pipeline?.id));
143+
}}
144+
>
145+
{run.pipeline?.name}
146+
</Paragraph>
147+
</Box>
130148
<Box>
131149
<Paragraph style={headStyle}>STATUS</Paragraph>
132150
<Paragraph

‎src/ui/layouts/runs/RunDetail/index.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,24 @@ export const RunDetail: React.FC = () => {
100100
{run.name}
101101
</Paragraph>
102102
</Box>
103+
<Box>
104+
<Paragraph style={headStyle}>PIPELINE NAME</Paragraph>
105+
<Paragraph
106+
size="small"
107+
style={{
108+
color: '#22BBDD',
109+
textDecoration: 'underline',
110+
cursor: 'pointer',
111+
marginTop: '10px',
112+
}}
113+
onClick={(event) => {
114+
event.stopPropagation();
115+
history.push(routePaths.pipeline.configuration(run.pipeline?.id));
116+
}}
117+
>
118+
{run.pipeline?.name}
119+
</Paragraph>
120+
</Box>
103121
<Box>
104122
<Paragraph style={headStyle}>STATUS</Paragraph>
105123
<Paragraph

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

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
camelCaseToParagraph,
66
formatDateForOverviewBar,
77
} from '../../../../utils';
8-
import { useLocationPath } from '../../../hooks';
8+
import { useHistory, useLocationPath } from '../../../hooks';
99
// import { translate } from './translate';
1010
import { BasePage } from '../BasePage';
1111
import { Configuration } from './Configuration';
@@ -76,6 +76,7 @@ export interface RunDetailRouteParams {
7676

7777
export const RunDetail: React.FC = () => {
7878
const locationPath = useLocationPath();
79+
const history = useHistory();
7980
const { stackComponentId, runId, run } = useService();
8081
// debugger;
8182
// debugger;
@@ -157,6 +158,24 @@ export const RunDetail: React.FC = () => {
157158
{run.name}
158159
</Paragraph>
159160
</Box>
161+
<Box>
162+
<Paragraph style={headStyle}>PIPELINE NAME</Paragraph>
163+
<Paragraph
164+
size="small"
165+
style={{
166+
color: '#22BBDD',
167+
textDecoration: 'underline',
168+
cursor: 'pointer',
169+
marginTop: '10px',
170+
}}
171+
onClick={(event) => {
172+
event.stopPropagation();
173+
history.push(routePaths.pipeline.configuration(run.pipeline?.id));
174+
}}
175+
>
176+
{run.pipeline?.name}
177+
</Paragraph>
178+
</Box>
160179
<Box>
161180
<Paragraph style={headStyle}>STATUS</Paragraph>
162181
<Paragraph
@@ -173,6 +192,24 @@ export const RunDetail: React.FC = () => {
173192
<RunStatus run={run} />
174193
</Paragraph>
175194
</Box>
195+
<Box>
196+
<Paragraph style={headStyle}>STACK NAME</Paragraph>
197+
<Paragraph
198+
size="small"
199+
style={{
200+
color: '#22BBDD',
201+
textDecoration: 'underline',
202+
cursor: 'pointer',
203+
marginTop: '10px',
204+
}}
205+
onClick={(event) => {
206+
event.stopPropagation();
207+
history.push(routePaths.stack.configuration(run.stack?.id));
208+
}}
209+
>
210+
{run.stack?.name}
211+
</Paragraph>
212+
</Box>
176213
<Box>
177214
<Paragraph style={headStyle}>AUTHOR</Paragraph>
178215
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>

‎src/ui/layouts/stacks/RunDetail/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DAG } from '../../../components/dag';
99
import { Box, Paragraph } from '../../../components';
1010
import { RunStatus } from './components';
1111
import { formatDateForOverviewBar } from '../../../../utils';
12+
import { useHistory } from 'react-router-dom';
1213

1314
const getTabPages = ({
1415
stackId,
@@ -72,6 +73,7 @@ export interface RunDetailRouteParams {
7273
export const RunDetail: React.FC = () => {
7374
// const { runId, stackId } = useService();
7475
const { runId, stackId, run } = useService();
76+
const history = useHistory();
7577
const tabPages = getTabPages({
7678
runId,
7779
stackId,
@@ -108,6 +110,24 @@ export const RunDetail: React.FC = () => {
108110
{run.name}
109111
</Paragraph>
110112
</Box>
113+
<Box>
114+
<Paragraph style={headStyle}>PIPELINE NAME</Paragraph>
115+
<Paragraph
116+
size="small"
117+
style={{
118+
color: '#22BBDD',
119+
textDecoration: 'underline',
120+
cursor: 'pointer',
121+
marginTop: '10px',
122+
}}
123+
onClick={(event) => {
124+
event.stopPropagation();
125+
history.push(routePaths.pipeline.configuration(run.pipeline?.id));
126+
}}
127+
>
128+
{run.pipeline?.name}
129+
</Paragraph>
130+
</Box>
111131
<Box>
112132
<Paragraph style={headStyle}>STATUS</Paragraph>
113133
<Paragraph
@@ -124,6 +144,24 @@ export const RunDetail: React.FC = () => {
124144
<RunStatus run={run} />
125145
</Paragraph>
126146
</Box>
147+
<Box>
148+
<Paragraph style={headStyle}>STACK NAME</Paragraph>
149+
<Paragraph
150+
size="small"
151+
style={{
152+
color: '#22BBDD',
153+
textDecoration: 'underline',
154+
cursor: 'pointer',
155+
marginTop: '10px',
156+
}}
157+
onClick={(event) => {
158+
event.stopPropagation();
159+
history.push(routePaths.stack.configuration(run.stack?.id));
160+
}}
161+
>
162+
{run.stack?.name}
163+
</Paragraph>
164+
</Box>
127165
<Box>
128166
<Paragraph style={headStyle}>AUTHOR</Paragraph>
129167
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>

0 commit comments

Comments
 (0)