Skip to content

Commit adc8e6e

Browse files
talhainvenxiontalhainvenxion
committed
added run detail overview bar on all run screen.
1 parent 1aa1ca1 commit adc8e6e

File tree

13 files changed

+729
-325
lines changed

13 files changed

+729
-325
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const PipelineDetail: React.FC = () => {
8989

9090
const boxStyle = {
9191
backgroundColor: '#E9EAEC',
92-
padding: '30px 0',
92+
padding: '10px 0',
9393
borderRadius: '8px',
9494
marginTop: '20px',
9595
display: 'flex',

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

Lines changed: 111 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import React from 'react';
2+
import ReactTooltip from 'react-tooltip';
23
import { runStatus, iconColors, iconSizes } from '../../../../constants';
3-
import { Paragraph, Box, ColoredCircle, icons, If } from '../../../components';
4+
import {
5+
Paragraph,
6+
Box,
7+
ColoredCircle,
8+
icons,
9+
If,
10+
FlexBox,
11+
} from '../../../components';
412

513
import styles from './components.module.scss';
614

@@ -29,20 +37,108 @@ export const RunStatus: React.FC<{ run: TRun }> = ({ run }) => {
2937

3038
return (
3139
<>
32-
<If condition={run.status === runStatus.Succeeded}>
33-
{() => (
34-
<ColoredCircle color="green" size="xs">
35-
<icons.check color={iconColors.white} size={iconSizes.xs} />
36-
</ColoredCircle>
37-
)}
38-
</If>
39-
<If condition={run.status === runStatus.Failed}>
40-
{() => (
41-
<ColoredCircle color="red" size="xs">
42-
<icons.close color={iconColors.white} size={iconSizes.xs} />
43-
</ColoredCircle>
44-
)}
45-
</If>
40+
<FlexBox alignItems="center">
41+
<div data-tip data-for={run.status}>
42+
<If condition={run.status === runStatus.COMPLETED}>
43+
{() => (
44+
<ColoredCircle color="primary" size="xs">
45+
<icons.check color={iconColors.white} size={iconSizes.xs} />
46+
</ColoredCircle>
47+
)}
48+
</If>
49+
</div>
50+
<ReactTooltip
51+
id={run.status}
52+
place="top"
53+
effect="solid"
54+
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
55+
>
56+
<Paragraph color="white">
57+
{run.status}
58+
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
59+
</Paragraph>
60+
</ReactTooltip>
61+
</FlexBox>
62+
63+
<FlexBox alignItems="center">
64+
<div data-tip data-for={run.status}>
65+
<If condition={run.status === runStatus.RUNNING}>
66+
{() => (
67+
<ColoredCircle color="secondary" size="xs">
68+
<icons.inProgress
69+
color={iconColors.white}
70+
size={iconSizes.xs}
71+
/>
72+
</ColoredCircle>
73+
)}
74+
</If>
75+
</div>
76+
<ReactTooltip
77+
id={run.status}
78+
place="top"
79+
effect="solid"
80+
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
81+
>
82+
<Paragraph color="white">
83+
{run.status}
84+
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
85+
</Paragraph>
86+
</ReactTooltip>
87+
</FlexBox>
88+
89+
{/* <If condition={status === runStatus.FAILED}>
90+
{() => (
91+
<ColoredCircle color="red" size="xs">
92+
<icons.close color={iconColors.white} size={iconSizes.xs} />
93+
</ColoredCircle>
94+
)}
95+
</If> */}
96+
97+
<FlexBox alignItems="center">
98+
<div data-tip data-for={run.status}>
99+
<If condition={run.status === runStatus.FAILED}>
100+
{() => (
101+
<ColoredCircle color="red" size="xs">
102+
<icons.close color={iconColors.white} size={iconSizes.xs} />
103+
</ColoredCircle>
104+
)}
105+
</If>
106+
</div>
107+
<ReactTooltip
108+
id={run.status}
109+
place="top"
110+
effect="solid"
111+
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
112+
>
113+
<Paragraph color="white">
114+
{run.status}
115+
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
116+
</Paragraph>
117+
</ReactTooltip>
118+
</FlexBox>
119+
120+
<FlexBox alignItems="center">
121+
<div data-tip data-for={run.status}>
122+
<If condition={run.status === runStatus.CACHED}>
123+
{() => (
124+
<ColoredCircle color="mustard" size="xs">
125+
<icons.cached color={iconColors.white} size={iconSizes.xs} />
126+
</ColoredCircle>
127+
)}
128+
</If>
129+
</div>
130+
<ReactTooltip
131+
id={run.status}
132+
place="top"
133+
effect="solid"
134+
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
135+
>
136+
<Paragraph color="white">
137+
{run.status}
138+
{/* {truncate(pipeline.id, ID_MAX_LENGTH)} */}
139+
</Paragraph>
140+
</ReactTooltip>
141+
</FlexBox>
46142
</>
47143
);
48144
};

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

Lines changed: 69 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ import { useService } from './useService';
77
// import { Configuration } from '../PipelineDetail/Configuration';
88
import { Configuration } from '../RunDetail/Configuration';
99
import { DAG } from '../RunDetail/DAG';
10-
// import styles from './index.module.scss';
11-
// import { Box, FlexBox, icons, Paragraph, Truncate } from '../../../components';
12-
// import { iconColors, iconSizes, ID_MAX_LENGTH } from '../../../../constants';
13-
// import { RunTime } from '../RunTime';
14-
// import { KeyValue, RunStatus } from './components';
15-
// import { Results } from './Results';
16-
// import { Statistics } from './Statistics';
17-
// import { Tensorboard } from './Tensorboard';
18-
// import { formatMoney } from '../../../../utils/money';
19-
// import { truncate } from '../../../../utils';
10+
import styles from './index.module.scss';
11+
import { Box, FlexBox, icons, Paragraph, Truncate } from '../../../components';
12+
import { iconColors, iconSizes, ID_MAX_LENGTH } from '../../../../constants';
13+
import { RunTime } from '../RunTime';
14+
import { KeyValue, RunStatus } from './components';
15+
16+
import { formatMoney } from '../../../../utils/money';
17+
import { formatDateToDisplay, truncate } from '../../../../utils';
2018

2119
const getTabPages = ({
2220
pipelineId,
@@ -89,7 +87,7 @@ export interface RunDetailRouteParams {
8987

9088
export const RunDetail: React.FC = () => {
9189
// const { runId, pipelineId, run, billing } = useService();
92-
const { runId, pipelineId } = useService();
90+
const { runId, pipelineId, run, billing } = useService();
9391
const tabPages = getTabPages({
9492
runId,
9593
pipelineId,
@@ -98,66 +96,73 @@ export const RunDetail: React.FC = () => {
9896
runId,
9997
pipelineId,
10098
});
99+
100+
const boxStyle = {
101+
backgroundColor: '#E9EAEC',
102+
padding: '10px 0',
103+
borderRadius: '8px',
104+
marginTop: '20px',
105+
display: 'flex',
106+
justifyContent: 'space-around',
107+
};
108+
const headStyle = { color: '#828282' };
101109
// debugger;
102110
return (
103111
<BasePage
104112
tabPages={tabPages}
105113
tabBasePath={routePaths.run.pipeline.base(runId, pipelineId)}
106114
breadcrumbs={breadcrumbs}
107115
>
108-
{/* <FlexBox marginTop="xxl" padding="lg" className={styles.box}>
109-
<KeyValue width="10%" label={translate('box.runId.text')}>
110-
<Truncate maxLines={1}>
111-
<Paragraph size="small">
112-
{truncate(run.id, ID_MAX_LENGTH)}
113-
</Paragraph>
114-
</Truncate>
115-
</KeyValue>
116-
<KeyValue width="10%" label={translate('box.status.text')}>
117-
<RunStatus run={run} />
118-
</KeyValue>
119-
<KeyValue width="10%" label={translate('box.runtime.text')}>
120-
<FlexBox alignItems="center">
121-
<Box marginRight="sm">
122-
<icons.clock color={iconColors.black} size={iconSizes.sm} />
123-
</Box>
124-
<RunTime run={run} />
125-
</FlexBox>
126-
</KeyValue>
127-
<KeyValue width="10%" label={translate('box.type.text')}>
128-
<Truncate maxLines={1}>
129-
<Paragraph size="small">{run.pipelineRunType}</Paragraph>
130-
</Truncate>
131-
</KeyValue>
132-
<KeyValue width="15%" label={translate('box.datasourceCommit.text')}>
133-
<Truncate maxLines={1}>
134-
<Paragraph size="small">
135-
{truncate(run.datasourceCommitId, ID_MAX_LENGTH)}
136-
</Paragraph>
137-
</Truncate>
138-
</KeyValue>
139-
<KeyValue width="15%" label={translate('box.computeCost.text')}>
140-
<Truncate maxLines={1}>
141-
<Paragraph size="small">
142-
{formatMoney(billing.computeCost)}
143-
</Paragraph>
144-
</Truncate>
145-
</KeyValue>
146-
<KeyValue width="15%" label={translate('box.trainingCost.text')}>
147-
<Truncate maxLines={1}>
148-
<Paragraph size="small">
149-
{formatMoney(billing.trainingCost)}
150-
</Paragraph>
151-
</Truncate>
152-
</KeyValue>
153-
<KeyValue width="15%" label={translate('box.totalCost.text')}>
154-
<Truncate maxLines={1}>
155-
<Paragraph size="small">
156-
{formatMoney(billing.trainingCost + billing.computeCost)}
157-
</Paragraph>
158-
</Truncate>
159-
</KeyValue>
160-
</FlexBox> */}
116+
<Box style={boxStyle}>
117+
<Box>
118+
<Paragraph style={headStyle}>RUN ID</Paragraph>
119+
<Paragraph
120+
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
121+
>
122+
{run.id}
123+
</Paragraph>
124+
</Box>
125+
<Box>
126+
<Paragraph style={headStyle}>RUN NAME</Paragraph>
127+
<Paragraph
128+
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
129+
>
130+
{run.name}
131+
</Paragraph>
132+
</Box>
133+
<Box>
134+
<Paragraph style={headStyle}>STATUS</Paragraph>
135+
<Paragraph
136+
style={{
137+
marginTop: '10px',
138+
justifyContent: 'center',
139+
borderRadius: '50%',
140+
height: '25px',
141+
width: '25px',
142+
paddingTop: '3px',
143+
textAlign: 'center',
144+
}}
145+
>
146+
<RunStatus run={run} />
147+
</Paragraph>
148+
</Box>
149+
<Box>
150+
<Paragraph style={headStyle}>AUTHOR</Paragraph>
151+
<Paragraph
152+
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
153+
>
154+
{run.user.name}
155+
</Paragraph>
156+
</Box>
157+
<Box>
158+
<Paragraph style={headStyle}>CREATED AT</Paragraph>
159+
<Paragraph
160+
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
161+
>
162+
{formatDateToDisplay(run.created)}
163+
</Paragraph>
164+
</Box>
165+
</Box>
161166
</BasePage>
162167
);
163168
};

0 commit comments

Comments
 (0)