Skip to content

Commit f5c6a01

Browse files
CahllagerfeldCahllagerfeld
authored
fix: pipeline status (#433)
1 parent 72d310c commit f5c6a01

File tree

1 file changed

+42
-90
lines changed
  • src/ui/layouts/pipelines/Pipelines/List/Status

1 file changed

+42
-90
lines changed

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

Lines changed: 42 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,108 @@
11
import React from 'react';
2-
import { useHistory } from 'react-router-dom';
32
import ReactTooltip from 'react-tooltip';
43
import { runStatus, iconColors, iconSizes } from '../../../../../../constants';
5-
import { routePaths } from '../../../../../../routes/routePaths';
64

7-
import {
8-
Box,
9-
// ColoredCircle,
10-
FlexBox,
11-
icons,
12-
If,
13-
Paragraph,
14-
} from '../../../../../components';
15-
import { useService } from './useService';
16-
import { useSelector } from '../../../../../hooks';
17-
import { workspaceSelectors } from '../../../../../../redux/selectors';
5+
import { Box, FlexBox, icons, If, Paragraph } from '../../../../../components';
186

19-
export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
20-
const { lastThreeRuns } = useService({ pipeline });
7+
function getID(pipelineID: string, index: number) {
8+
return `${pipelineID}-${index}`;
9+
}
2110

22-
const history = useHistory();
23-
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
11+
export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
2412
return (
2513
<FlexBox
2614
alignItems="center"
2715
justifyContent="center"
2816
style={{ marginLeft: '-16px' }}
2917
>
30-
{lastThreeRuns.map((item: any, index: number) => (
18+
{pipeline.status.map((item: any, index: number) => (
3119
<Box key={index}>
3220
<>
3321
<FlexBox alignItems="center">
34-
<div data-tip data-for={item.status}>
35-
<If condition={item.status === runStatus.COMPLETED}>
22+
<div data-tip data-for={getID(pipeline.id, index)}>
23+
<If condition={item === runStatus.COMPLETED}>
3624
{() => (
37-
<div
38-
onClick={(e) => {
39-
e.stopPropagation();
40-
history.push(
41-
routePaths.run.pipeline.statistics(
42-
selectedWorkspace,
43-
item.run.id,
44-
pipeline.id,
45-
),
46-
);
47-
}}
48-
>
49-
{/* <ColoredCircle color="green" size="xs"> */}
25+
<div>
5026
<icons.circleCheck
5127
color={iconColors.lightGreen}
5228
size={iconSizes.md}
5329
/>
54-
{/* </ColoredCircle> */}
5530
</div>
5631
)}
5732
</If>
5833
</div>
59-
<ReactTooltip id={item.status} place="top" effect="solid">
60-
<Paragraph color="white">{item.status}</Paragraph>
34+
<ReactTooltip
35+
id={getID(pipeline.id, index)}
36+
place="top"
37+
effect="solid"
38+
>
39+
<Paragraph color="white">{item}</Paragraph>
6140
</ReactTooltip>
6241
</FlexBox>
6342

6443
<FlexBox alignItems="center">
65-
<div data-tip data-for={item.status}>
66-
<If condition={item.status === runStatus.RUNNING}>
44+
<div data-tip data-for={getID(pipeline.id, index)}>
45+
<If condition={item === runStatus.RUNNING}>
6746
{() => (
68-
<div
69-
onClick={(e) => {
70-
e.stopPropagation();
71-
history.push(
72-
routePaths.run.pipeline.statistics(
73-
selectedWorkspace,
74-
item.run.id,
75-
pipeline.id,
76-
),
77-
);
78-
}}
79-
>
80-
{/* <ColoredCircle color="secondary" size="xs"> */}
47+
<div>
8148
<icons.inProgress
8249
color={iconColors.orange}
8350
size={iconSizes.md}
8451
/>
85-
{/* </ColoredCircle> */}
8652
</div>
8753
)}
8854
</If>
8955
</div>
90-
<ReactTooltip id={item.runId} place="top" effect="solid">
91-
<Paragraph color="white">{item.status}</Paragraph>
56+
<ReactTooltip
57+
id={getID(pipeline.id, index)}
58+
place="top"
59+
effect="solid"
60+
>
61+
<Paragraph color="white">{item}</Paragraph>
9262
</ReactTooltip>
9363
</FlexBox>
9464

9565
<FlexBox alignItems="center">
96-
<div data-tip data-for={item.runId}>
97-
<If condition={item.status === runStatus.FAILED}>
66+
<div data-tip data-for={getID(pipeline.id, index)}>
67+
<If condition={item === runStatus.FAILED}>
9868
{() => (
99-
<div
100-
onClick={(e) => {
101-
e.stopPropagation();
102-
history.push(
103-
routePaths.run.pipeline.statistics(
104-
selectedWorkspace,
105-
item.run.id,
106-
pipeline.id,
107-
),
108-
);
109-
}}
110-
>
111-
{/* <ColoredCircle color="red" size="xs"> */}
69+
<div>
11270
<icons.failed
11371
color={iconColors.red}
11472
size={iconSizes.md}
11573
/>
116-
{/* </ColoredCircle> */}
11774
</div>
11875
)}
11976
</If>
12077
</div>
121-
<ReactTooltip id={item.runId} place="top" effect="solid">
122-
<Paragraph color="white">{item.status}</Paragraph>
78+
<ReactTooltip
79+
id={getID(pipeline.id, index)}
80+
place="top"
81+
effect="solid"
82+
>
83+
<Paragraph color="white">{item}</Paragraph>
12384
</ReactTooltip>
12485
</FlexBox>
12586

12687
<FlexBox alignItems="center">
127-
<div data-tip data-for={item.runId}>
128-
<If condition={item.status === runStatus.CACHED}>
88+
<div data-tip data-for={getID(pipeline.id, index)}>
89+
<If condition={item === runStatus.CACHED}>
12990
{() => (
130-
<div
131-
onClick={(e) => {
132-
e.stopPropagation();
133-
history.push(
134-
routePaths.run.pipeline.statistics(
135-
selectedWorkspace,
136-
item.run.id,
137-
pipeline.id,
138-
),
139-
);
140-
}}
141-
>
142-
{/* <ColoredCircle color="mustard" size="xs"> */}
91+
<div>
14392
<icons.cached
14493
color={iconColors.butterflyBlue}
14594
size={iconSizes.md}
14695
/>
147-
{/* </ColoredCircle> */}
14896
</div>
14997
)}
15098
</If>
15199
</div>
152-
<ReactTooltip id={item.runId} place="top" effect="solid">
153-
<Paragraph color="white">{item.status}</Paragraph>
100+
<ReactTooltip
101+
id={getID(pipeline.id, index)}
102+
place="top"
103+
effect="solid"
104+
>
105+
<Paragraph color="white">{item}</Paragraph>
154106
</ReactTooltip>
155107
</FlexBox>
156108
</>

0 commit comments

Comments
 (0)