Skip to content

Commit 32a3103

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #156 from zenml-io/register-component-ui
table updates
2 parents 56f6f8b + 94fcfa3 commit 32a3103

File tree

6 files changed

+69
-52
lines changed

6 files changed

+69
-52
lines changed

‎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: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
2222
const history = useHistory();
2323
const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
2424
return (
25-
<FlexBox alignItems="center">
25+
<FlexBox alignItems="center" style={{ marginLeft: '6rem' }}>
2626
{lastThreeRuns.map((item: any, index: number) => (
2727
<Box key={index} paddingHorizontal="xs">
2828
<>
29-
<div>
29+
<FlexBox alignItems="center">
3030
<div data-tip data-for={item.status}>
3131
<If condition={item.status === runStatus.COMPLETED}>
3232
{() => (
@@ -55,9 +55,9 @@ 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>
60+
<FlexBox alignItems="center">
6161
<div data-tip data-for={item.status}>
6262
<If condition={item.status === runStatus.RUNNING}>
6363
{() => (
@@ -86,9 +86,9 @@ 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>
91+
<FlexBox alignItems="center">
9292
<div data-tip data-for={item.runId}>
9393
<If condition={item.status === runStatus.FAILED}>
9494
{() => (
@@ -117,9 +117,9 @@ 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>
122+
<FlexBox alignItems="center">
123123
<div data-tip data-for={item.runId}>
124124
<If condition={item.status === runStatus.CACHED}>
125125
{() => (
@@ -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/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/stackComponents/RunsTable/RunStatus/index.tsx‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ export const RunStatus: React.FC<{ run: TRun }> = ({ run }) => {
1616
<div data-tip data-for={run.status}>
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/stackComponents/Stacks/List/getHeaderCols.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,8 @@ export const GetHeaderCols = ({
152152
),
153153
width: '15%',
154154
renderRow: (stackComponent: TStack) => (
155-
<FlexBox alignItems="center">
156-
<div data-tip data-for={stackComponent.flavor.name}>
155+
<FlexBox alignItems="center" style={{ marginLeft: '-24px' }}>
156+
<div data-tip data-for={stackComponent.flavor.name} style={{ margin: ' 0 auto 0 auto' }}>
157157
<img
158158
alt={stackComponent.flavor.logoUrl}
159159
src={stackComponent.flavor.logoUrl}
@@ -195,8 +195,8 @@ export const GetHeaderCols = ({
195195
),
196196
width: '15%',
197197
renderRow: (stackComponent: TStack) => (
198-
<FlexBox alignItems="center">
199-
<div data-tip data-for={stackComponent.isShared}>
198+
<FlexBox alignItems="center" style={{ marginLeft: '-24px' }}>
199+
<div data-tip data-for={stackComponent.isShared} style={{ margin: '0 auto 0 auto' }}>
200200
<Box>
201201
<FlexBox
202202
justifyContent="center"

‎src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ export const GetHeaderCols = ({
175175
width: '8%',
176176
renderRow: (stack: TStack) => (
177177
<FlexBox alignItems="center">
178-
<div data-tip data-for={stack.isShared}>
178+
<div style={{ margin: '0 auto 0 auto' }} data-tip data-for={stack.isShared}>
179179
<Box>
180180
<FlexBox
181181
justifyContent="center"
@@ -184,6 +184,7 @@ export const GetHeaderCols = ({
184184
height: '19px',
185185
width: '19px',
186186
textAlign: 'center',
187+
marginLeft: '-24px'
187188
}}
188189
>
189190
{stack.isShared ? (

0 commit comments

Comments
 (0)