Skip to content

Commit eb0f6b1

Browse files
talhainvenxiontalhainvenxion
committed
click on run icon lead to the run details.
1 parent 7154385 commit eb0f6b1

File tree

2 files changed

+105
-46
lines changed

2 files changed

+105
-46
lines changed

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

Lines changed: 93 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
2+
import { useHistory } from 'react-router-dom';
23
import ReactTooltip from 'react-tooltip';
34
import { runStatus, iconColors, iconSizes } from '../../../../../../constants';
5+
import { routePaths } from '../../../../../../routes/routePaths';
46

57
import {
68
Box,
@@ -14,61 +16,87 @@ import { useService } from './useService';
1416

1517
export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
1618
const { lastThreeRuns } = useService({ pipeline });
19+
// debugger;
20+
const history = useHistory();
1721
// const lastThreeRuns: any[] = ['failed', 'completed', 'running', 'cached'];
1822
return (
1923
<FlexBox alignItems="center">
20-
{lastThreeRuns.map((status: any, index: number) => (
24+
{lastThreeRuns.map((item: any, index: number) => (
2125
<Box key={index} paddingHorizontal="xs">
2226
{/* {console.log('status', run)} */}
2327
{/* {runStatus.COMPLETED} */}
2428
<>
2529
<div>
26-
<div data-tip data-for={status}>
27-
<If condition={status === runStatus.COMPLETED}>
30+
<div data-tip data-for={item.status}>
31+
<If condition={item.status === runStatus.COMPLETED}>
2832
{() => (
29-
<ColoredCircle color="green" size="xs">
30-
<icons.check
31-
color={iconColors.white}
32-
size={iconSizes.xs}
33-
/>
34-
</ColoredCircle>
33+
<div
34+
onClick={(e) => {
35+
e.stopPropagation();
36+
history.push(
37+
routePaths.run.pipeline.statistics(
38+
item.run.id,
39+
item.run.pipeline_id,
40+
),
41+
);
42+
}}
43+
>
44+
<ColoredCircle color="green" size="xs">
45+
<icons.check
46+
color={iconColors.white}
47+
size={iconSizes.xs}
48+
/>
49+
</ColoredCircle>
50+
</div>
3551
)}
3652
</If>
3753
</div>
3854
<ReactTooltip
39-
id={status}
55+
id={item.status}
4056
place="top"
4157
effect="solid"
4258
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
4359
>
4460
<Paragraph color="white">
45-
{status}
61+
{item.status}
4662
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
4763
</Paragraph>
4864
</ReactTooltip>
4965
</div>
5066

5167
<div>
52-
<div data-tip data-for={status}>
53-
<If condition={status === runStatus.RUNNING}>
68+
<div data-tip data-for={item.status}>
69+
<If condition={item.status === runStatus.RUNNING}>
5470
{() => (
55-
<ColoredCircle color="secondary" size="xs">
56-
<icons.inProgress
57-
color={iconColors.white}
58-
size={iconSizes.xs}
59-
/>
60-
</ColoredCircle>
71+
<div
72+
onClick={(e) => {
73+
e.stopPropagation();
74+
history.push(
75+
routePaths.run.pipeline.statistics(
76+
item.run.id,
77+
item.run.pipeline_id,
78+
),
79+
);
80+
}}
81+
>
82+
<ColoredCircle color="secondary" size="xs">
83+
<icons.inProgress
84+
color={iconColors.white}
85+
size={iconSizes.xs}
86+
/>
87+
</ColoredCircle>
88+
</div>
6189
)}
6290
</If>
6391
</div>
6492
<ReactTooltip
65-
id={status}
93+
id={item.runId}
6694
place="top"
6795
effect="solid"
6896
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
6997
>
7098
<Paragraph color="white">
71-
{status}
99+
{item.status}
72100
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
73101
</Paragraph>
74102
</ReactTooltip>
@@ -83,52 +111,76 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
83111
</If> */}
84112

85113
<div>
86-
<div data-tip data-for={status}>
87-
<If condition={status === runStatus.FAILED}>
114+
<div data-tip data-for={item.runId}>
115+
<If condition={item.status === runStatus.FAILED}>
88116
{() => (
89-
<ColoredCircle color="red" size="xs">
90-
<icons.close
91-
color={iconColors.white}
92-
size={iconSizes.xs}
93-
/>
94-
</ColoredCircle>
117+
<div
118+
onClick={(e) => {
119+
e.stopPropagation();
120+
history.push(
121+
routePaths.run.pipeline.statistics(
122+
item.run.id,
123+
item.run.pipeline_id,
124+
),
125+
);
126+
}}
127+
>
128+
<ColoredCircle color="red" size="xs">
129+
<icons.close
130+
color={iconColors.white}
131+
size={iconSizes.xs}
132+
/>
133+
</ColoredCircle>
134+
</div>
95135
)}
96136
</If>
97137
</div>
98138
<ReactTooltip
99-
id={status}
139+
id={item.runId}
100140
place="top"
101141
effect="solid"
102142
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
103143
>
104144
<Paragraph color="white">
105-
{status}
145+
{item.status}
106146
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
107147
</Paragraph>
108148
</ReactTooltip>
109149
</div>
110150

111151
<div>
112-
<div data-tip data-for={status}>
113-
<If condition={status === runStatus.CACHED}>
152+
<div data-tip data-for={item.runId}>
153+
<If condition={item.status === runStatus.CACHED}>
114154
{() => (
115-
<ColoredCircle color="mustard" size="xs">
116-
<icons.cached
117-
color={iconColors.white}
118-
size={iconSizes.xs}
119-
/>
120-
</ColoredCircle>
155+
<div
156+
onClick={(e) => {
157+
e.stopPropagation();
158+
history.push(
159+
routePaths.run.pipeline.statistics(
160+
item.run.id,
161+
item.run.pipeline_id,
162+
),
163+
);
164+
}}
165+
>
166+
<ColoredCircle color="mustard" size="xs">
167+
<icons.cached
168+
color={iconColors.white}
169+
size={iconSizes.xs}
170+
/>
171+
</ColoredCircle>
172+
</div>
121173
)}
122174
</If>
123175
</div>
124176
<ReactTooltip
125-
id={status}
177+
id={item.runId}
126178
place="top"
127179
effect="solid"
128180
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
129181
>
130182
<Paragraph color="white">
131-
{status}
183+
{item.status}
132184
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
133185
</Paragraph>
134186
</ReactTooltip>

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@ import { getLastThreeRuns } from '../../../../../../utils';
33
// import { useSelector } from '../../../../../hooks';
44

55
interface ServiceInterface {
6-
lastThreeRuns: TRun[];
6+
lastThreeRuns: any[];
77
}
88

99
export const useService = ({
1010
pipeline,
1111
}: {
12-
pipeline: TPipeline;
12+
pipeline: any;
1313
}): ServiceInterface => {
14-
const runs = pipeline.status;
15-
// debugger;
16-
const lastThreeRuns = getLastThreeRuns(runs);
14+
let runs: { status: any; run: any }[] = [];
15+
16+
pipeline.runs.map((item: any, index: string | number) =>
17+
runs.push({
18+
status: pipeline.status[index],
19+
run: pipeline.runs[index],
20+
}),
21+
);
22+
23+
const lastThreeRuns = getLastThreeRuns(runs as any);
1724

1825
return { lastThreeRuns };
1926
};

0 commit comments

Comments
 (0)