Skip to content

Commit 94ae470

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #159 from zenml-io/dev
Dev
2 parents 9b5eb20 + 555ae81 commit 94ae470

File tree

16 files changed

+282
-126
lines changed

16 files changed

+282
-126
lines changed

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ export const getInitialFilterStateForRuns = () => {
293293
},
294294
{
295295
value: 'pipeline_id',
296-
label: 'Pipeline Name',
296+
label: 'Pipeline',
297297
type: 'string',
298298
},
299299
{
@@ -582,9 +582,9 @@ const FilterComponent = ({
582582

583583
return member[0].name;
584584
}
585-
if (typeName === 'Pipeline Name') {
585+
if (typeName === 'Pipeline') {
586586
const pipeline = pipelines.filter((item) => item.id === value);
587-
return `${pipeline[0].name}:${pipeline[0].version}`;
587+
return `${pipeline[0].name} ( v${pipeline[0].version} )`;
588588
}
589589
if (typeName === 'Stack Name') {
590590
const stack = stacks.filter((item) => item.id === value);
@@ -627,7 +627,7 @@ const FilterComponent = ({
627627
}) as any;
628628
const pipelinesOptions = pipelines.map((item: any) => {
629629
return {
630-
label: `${item.name}:${item.version}` as string,
630+
label: `${item.name} ( v${item.version})` as string,
631631
value: item.id as string,
632632
};
633633
}) as any;
@@ -834,8 +834,7 @@ const FilterComponent = ({
834834
filter.column.selectedValue.label === 'Shared' ||
835835
filter.column.selectedValue.label === 'Status'
836836
? 'is'
837-
: filter.column.selectedValue.label ===
838-
'Pipeline Name' ||
837+
: filter.column.selectedValue.label === 'Pipeline' ||
839838
filter.column.selectedValue.label ===
840839
'Stack Name' ||
841840
filter.column.selectedValue.label === 'Author'

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ export const Table: React.FC<TableProps> = ({
412412
}}
413413
key={i}
414414
>
415-
<Box paddingVertical="sm" paddingLeft="lg">
415+
<Box paddingVertical="md" paddingLeft="lg">
416416
<Truncate maxLines={1}>
417417
{text.renderRow(headerRow)}
418418
</Truncate>

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ import { workspaceSelectors } from '../../../../../../redux/selectors';
1818

1919
export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
2020
const { lastThreeRuns } = useService({ pipeline });
21-
21+
2222
const history = useHistory();
2323
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
2424
return (
25-
<FlexBox alignItems="center">
25+
<FlexBox alignItems="center" style={{ marginLeft: '30%' }}>
2626
{lastThreeRuns.map((item: any, index: number) => (
2727
<Box key={index} paddingHorizontal="xs">
2828
<>
29-
<div>
30-
<div data-tip data-for={item.status}>
29+
<FlexBox alignItems="center" >
30+
<div data-tip data-for={item.status} >
3131
<If condition={item.status === runStatus.COMPLETED}>
3232
{() => (
3333
<div
@@ -55,10 +55,10 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
5555
<ReactTooltip id={item.status} place="top" effect="solid">
5656
<Paragraph color="white">{item.status}</Paragraph>
5757
</ReactTooltip>
58-
</div>
58+
</FlexBox>
5959

60-
<div>
61-
<div data-tip data-for={item.status}>
60+
<FlexBox alignItems="center" >
61+
<div data-tip data-for={item.status} >
6262
<If condition={item.status === runStatus.RUNNING}>
6363
{() => (
6464
<div
@@ -86,10 +86,10 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
8686
<ReactTooltip id={item.runId} place="top" effect="solid">
8787
<Paragraph color="white">{item.status}</Paragraph>
8888
</ReactTooltip>
89-
</div>
89+
</FlexBox>
9090

91-
<div>
92-
<div data-tip data-for={item.runId}>
91+
<FlexBox alignItems="center" >
92+
<div data-tip data-for={item.runId} >
9393
<If condition={item.status === runStatus.FAILED}>
9494
{() => (
9595
<div
@@ -117,10 +117,10 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
117117
<ReactTooltip id={item.runId} place="top" effect="solid">
118118
<Paragraph color="white">{item.status}</Paragraph>
119119
</ReactTooltip>
120-
</div>
120+
</FlexBox>
121121

122-
<div>
123-
<div data-tip data-for={item.runId}>
122+
<FlexBox alignItems="center" >
123+
<div data-tip data-for={item.runId} >
124124
<If condition={item.status === runStatus.CACHED}>
125125
{() => (
126126
<div
@@ -148,7 +148,7 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
148148
<ReactTooltip id={item.runId} place="top" effect="solid">
149149
<Paragraph color="white">{item.status}</Paragraph>
150150
</ReactTooltip>
151-
</div>
151+
</FlexBox>
152152
</>
153153
</Box>
154154
))}

‎src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -184,9 +184,11 @@ export const GetHeaderCols = ({
184184
},
185185
{
186186
render: () => (
187-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
188-
STATUS
189-
</Paragraph>
187+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }} >
188+
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
189+
STATUS
190+
</Paragraph>
191+
</div>
190192
),
191193
width: '8%',
192194
renderRow: (pipeline: TPipeline) => <Status pipeline={pipeline} />,
@@ -208,7 +210,7 @@ export const GetHeaderCols = ({
208210
activeSortingDirection={activeSortingDirection}
209211
>
210212
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
211-
VERISON
213+
VERSION
212214
</Paragraph>
213215
</SortingHeader>
214216
),

‎src/ui/layouts/pipelines/RunsTable/HeaderCols/index.tsx‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -169,13 +169,15 @@ export const useHeaderCols = ({
169169
activeSorting={activeSorting}
170170
activeSortingDirection={activeSortingDirection}
171171
>
172-
<Paragraph
173-
size="small"
174-
color="black"
175-
style={{ fontSize: '12px' }}
176-
>
177-
STATUS
178-
</Paragraph>
172+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
173+
<Paragraph
174+
size="small"
175+
color="black"
176+
style={{ fontSize: '12px', marginLeft: '-24px' }}
177+
>
178+
STATUS
179+
</Paragraph>
180+
</div>
179181
</SortingHeader>
180182
),
181183
width: '15%',
@@ -390,7 +392,7 @@ export const useHeaderCols = ({
390392
);
391393
}}
392394
>
393-
{run?.pipeline?.name}:{run?.pipeline?.version}
395+
{run?.pipeline?.name} ( v{run?.pipeline?.version} )
394396
</Paragraph>
395397
</div>
396398
<ReactTooltip
@@ -399,7 +401,7 @@ export const useHeaderCols = ({
399401
effect="solid"
400402
>
401403
<Paragraph color="white">
402-
{run?.pipeline?.name}:{run?.pipeline?.version}
404+
{run?.pipeline?.name} ( v{run?.pipeline?.version} )
403405
{/* {translate(`tooltips.${invoice.status}`)} */}
404406
</Paragraph>
405407
</ReactTooltip>
@@ -419,13 +421,15 @@ export const useHeaderCols = ({
419421
activeSorting={activeSorting}
420422
activeSortingDirection={activeSortingDirection}
421423
>
422-
<Paragraph
423-
size="small"
424-
color="black"
425-
style={{ fontSize: '12px' }}
426-
>
427-
STATUS
428-
</Paragraph>
424+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
425+
<Paragraph
426+
size="small"
427+
color="black"
428+
style={{ fontSize: '12px', marginLeft: '-24px' }}
429+
>
430+
STATUS
431+
</Paragraph>
432+
</div>
429433
</SortingHeader>
430434
),
431435
width: '15%',

‎src/ui/layouts/pipelines/RunsTable/RunStatus/index.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ export const RunStatus: React.FC<{ run: TRun }> = ({ run }) => {
1313
return (
1414
<>
1515
<FlexBox alignItems="center">
16-
<div data-tip data-for={run?.status}>
16+
<div data-tip data-for={run?.status} style={{ margin: '0 auto 0 auto' }}>
1717
<If condition={run?.status === runStatus.COMPLETED}>
1818
{() => (
19-
<ColoredCircle color="green" size="xs">
20-
<icons.check color={iconColors.white} size={iconSizes.xs} />
21-
</ColoredCircle>
19+
<div style={{ marginLeft: '-24px' }}>
20+
<ColoredCircle color="green" size="xs">
21+
<icons.check color={iconColors.white} size={iconSizes.xs} />
22+
</ColoredCircle>
23+
</div>
2224
)}
2325
</If>
2426
</div>
@@ -28,15 +30,17 @@ export const RunStatus: React.FC<{ run: TRun }> = ({ run }) => {
2830
</FlexBox>
2931

3032
<FlexBox alignItems="center">
31-
<div data-tip data-for={run?.status}>
33+
<div data-tip data-for={run?.status} style={{ margin: '0 auto 0 auto' }}>
3234
<If condition={run?.status === runStatus.RUNNING}>
3335
{() => (
34-
<ColoredCircle color="secondary" size="xs">
35-
<icons.inProgress
36-
color={iconColors.white}
37-
size={iconSizes.xs}
38-
/>
39-
</ColoredCircle>
36+
<div style={{ marginLeft: '-24px' }}>
37+
<ColoredCircle color="secondary" size="xs">
38+
<icons.inProgress
39+
color={iconColors.white}
40+
size={iconSizes.xs}
41+
/>
42+
</ColoredCircle>
43+
</div>
4044
)}
4145
</If>
4246
</div>
@@ -46,12 +50,14 @@ export const RunStatus: React.FC<{ run: TRun }> = ({ run }) => {
4650
</FlexBox>
4751

4852
<FlexBox alignItems="center">
49-
<div data-tip data-for={run?.status}>
53+
<div data-tip data-for={run?.status} style={{ margin: '0 auto 0 auto' }}>
5054
<If condition={run?.status === runStatus.FAILED}>
5155
{() => (
52-
<ColoredCircle color="red" size="xs">
53-
<icons.close color={iconColors.white} size={iconSizes.xs} />
54-
</ColoredCircle>
56+
<div style={{ marginLeft: '-24px' }}>
57+
<ColoredCircle color="red" size="xs">
58+
<icons.close color={iconColors.white} size={iconSizes.xs} />
59+
</ColoredCircle>
60+
</div>
5561
)}
5662
</If>
5763
</div>
@@ -61,12 +67,14 @@ export const RunStatus: React.FC<{ run: TRun }> = ({ run }) => {
6167
</FlexBox>
6268

6369
<FlexBox alignItems="center">
64-
<div data-tip data-for={run?.status}>
70+
<div data-tip data-for={run?.status} style={{ margin: '0 auto 0 auto' }}>
6571
<If condition={run?.status === runStatus.CACHED}>
6672
{() => (
67-
<ColoredCircle color="mustard" size="xs">
68-
<icons.cached color={iconColors.white} size={iconSizes.xs} />
69-
</ColoredCircle>
73+
<div style={{ marginLeft: '-24px' }}>
74+
<ColoredCircle color="mustard" size="xs">
75+
<icons.cached color={iconColors.white} size={iconSizes.xs} />
76+
</ColoredCircle>
77+
</div>
7078
)}
7179
</If>
7280
</div>

‎src/ui/layouts/runs/RunsTable/HeaderCols/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export const useHeaderCols = ({
119119
size="small"
120120
style={{ color: '#22BBDD', textDecoration: 'underline' }}
121121
>
122-
{run.pipeline.name}:{run.pipeline?.version}
122+
{run.pipeline.name} ( v{run?.pipeline?.version} )
123123
</Paragraph>
124124
),
125125
},

‎src/ui/layouts/stackComponents/BasePage.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
2-
import { Redirect, useHistory } from 'react-router-dom';
2+
import { Redirect } from 'react-router-dom';
33
import { AppRoute } from '../../../routes';
4-
import { Box, FlexBox, IfElse, PrimaryButton } from '../../components';
4+
import { Box, FlexBox, IfElse } from '../../components';
55
import { AuthenticatedLayout } from '../common/layouts/AuthenticatedLayout';
66
import { SidebarContainer } from '../common/layouts/SidebarContainer';
77
import { Tabs } from '../common/Tabs';
88
import Header from './Header';
99
import Stacks from './Stacks';
1010
import Component from './Component';
11-
import { routePaths } from '../../../routes/routePaths';
12-
import { useLocationPath, useSelector } from '../../hooks';
13-
import { workspaceSelectors } from '../../../redux/selectors';
11+
// import { routePaths } from '../../../routes/routePaths';
12+
// import { useLocationPath, useSelector } from '../../hooks';
13+
// import { workspaceSelectors } from '../../../redux/selectors';
1414

1515
export const BasePage: React.FC<{
1616
tabPages: TabPage[];
@@ -30,9 +30,9 @@ export const BasePage: React.FC<{
3030
headerWithButtons,
3131
children,
3232
}) => {
33-
const history = useHistory();
34-
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
35-
const locationPath = useLocationPath();
33+
// const history = useHistory();
34+
// const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
35+
// const locationPath = useLocationPath();
3636
return (
3737
<>
3838
<AuthenticatedLayout>
@@ -86,7 +86,7 @@ export const BasePage: React.FC<{
8686
</Box>
8787
</FlexBox.Row>
8888
</SidebarContainer>
89-
{!fromRegisterComponent && !fromConfigureComponent && (
89+
{/* {!fromRegisterComponent && !fromConfigureComponent && (
9090
<FlexBox
9191
style={{
9292
position: 'fixed',
@@ -110,7 +110,7 @@ export const BasePage: React.FC<{
110110
</PrimaryButton>
111111
</Box>
112112
</FlexBox>
113-
)}
113+
)} */}
114114
</AuthenticatedLayout>
115115
</>
116116
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,14 @@ export const RegisterComponents: React.FC = () => {
6262
{
6363
name: camelCaseToParagraph(locationPath.split('/')[4]),
6464
clickable: true,
65-
to: routePaths.stackComponents.base(
65+
to: routePaths.stackComponents.registerComponents(
6666
locationPath.split('/')[4],
6767
workspace as string,
6868
),
6969
},
7070
{
7171
name: flavor.name,
72-
clickable: true,
72+
clickable: false,
7373
to: routePaths.stackComponents.configureComponent(
7474
locationPath.split('/')[4],
7575
workspace as string,

0 commit comments

Comments
 (0)