Skip to content

Commit 555ae81

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #160 from zenml-io/register-component-ui
ui updates
2 parents 449a2dd + 6390c0d commit 555ae81

File tree

6 files changed

+42
-42
lines changed

6 files changed

+42
-42
lines changed

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

Lines changed: 10 additions & 10 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" style={{ marginLeft: '6rem' }}>
25+
<FlexBox alignItems="center" style={{ marginLeft: '30%' }}>
2626
{lastThreeRuns.map((item: any, index: number) => (
2727
<Box key={index} paddingHorizontal="xs">
2828
<>
29-
<FlexBox alignItems="center">
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
@@ -57,8 +57,8 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
5757
</ReactTooltip>
5858
</FlexBox>
5959

60-
<FlexBox alignItems="center">
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
@@ -88,8 +88,8 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
8888
</ReactTooltip>
8989
</FlexBox>
9090

91-
<FlexBox alignItems="center">
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
@@ -119,8 +119,8 @@ export const Status: React.FC<{ pipeline: TPipeline }> = ({ pipeline }) => {
119119
</ReactTooltip>
120120
</FlexBox>
121121

122-
<FlexBox alignItems="center">
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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,8 @@ export const GetHeaderCols = ({
184184
},
185185
{
186186
render: () => (
187-
<div style={{ marginLeft: '7rem' }} >
188-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
187+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }} >
188+
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
189189
STATUS
190190
</Paragraph>
191191
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export const useHeaderCols = ({
169169
activeSorting={activeSorting}
170170
activeSortingDirection={activeSortingDirection}
171171
>
172-
<div style={{ margin: '0 auto 0 auto' }}>
172+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
173173
<Paragraph
174174
size="small"
175175
color="black"
@@ -421,7 +421,7 @@ export const useHeaderCols = ({
421421
activeSorting={activeSorting}
422422
activeSortingDirection={activeSortingDirection}
423423
>
424-
<div style={{ margin: '0 auto 0 auto' }}>
424+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
425425
<Paragraph
426426
size="small"
427427
color="black"

‎src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
EditField,
66
Paragraph,
77
Row,
8+
Col,
9+
Container,
810
} from '../../../../components';
911
import styles from './index.module.scss';
1012
import { useService } from './useService';
@@ -25,7 +27,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
2527
const getFormElement = (elementName: any, elementSchema: any) => {
2628
if (typeof elementSchema === 'string') {
2729
return (
28-
<Box style={{ width: '90%' }}>
30+
<Box style={{ width: '100%' }}>
2931
<EditField
3032
disabled
3133
onChangeText={() => console.log('')}
@@ -41,7 +43,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
4143
}
4244
if (typeof elementSchema === 'object') {
4345
return (
44-
<Box style={{ width: '90%' }}>
46+
<Box style={{ width: '100%' }}>
4547
<Paragraph size="body" style={{ color: 'black' }}>
4648
<label htmlFor={elementName}>{titleCase(elementName)}</label>
4749
</Paragraph>
@@ -78,7 +80,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
7880
return (
7981
<Box
8082
// marginVertical="md"
81-
style={{ width: '90%' }}
83+
style={{ width: '100%' }}
8284
>
8385
<Box>
8486
<FlexBox.Row justifyContent="space-between">
@@ -95,9 +97,10 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
9597
};
9698

9799
return (
98-
<FlexBox justifyContent='space-between' marginLeft='md' marginTop="xl" fullWidth>
99-
<Row>
100-
<Box style={{ width: '46%' }}>
100+
<FlexBox justifyContent='space-between' marginTop="xl" fullWidth>
101+
<Container>
102+
<Row>
103+
<Col xs={6}>
101104
<EditField
102105
disabled
103106
onChangeText={() => console.log('')}
@@ -108,28 +111,26 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
108111
hasError={false}
109112
className={styles.field}
110113
/>
111-
</Box>
112-
<Box style={{ width: '46%', marginLeft: '5%' }} marginTop='lg' >
113-
<FlexBox.Row justifyContent="space-between">
114-
<Paragraph>Share Component with public</Paragraph>
114+
</Col>
115+
<Col xs={6} >
116+
<FlexBox.Row justifyContent="space-between">
117+
<Paragraph>Share Component with public</Paragraph>
115118
<label className={styles.switch}>
116119
<input type="checkbox" checked={stackComponent.isShared} />
117120
<span className={`${styles.slider} ${styles.round}`}></span>
118121
</label>
119-
</FlexBox.Row>
120-
</Box>
121-
122-
<Row>
123-
{Object.keys(stackComponent?.configuration).map((key, ind) => (
124-
<Row key={ind} style={{ width: '50%', marginLeft: 'auto' }}>
125-
{getFormElement(key, stackComponent?.configuration[key])}
126-
</Row>
127-
))}
128-
</Row>
129-
122+
</FlexBox.Row>
123+
</Col>
124+
125+
{Object.keys(stackComponent?.configuration).map((key, ind) => (
126+
<Col xs={6} key={ind}>
127+
{getFormElement(key, stackComponent?.configuration[key])}
128+
</Col>
129+
))}
130130

131+
</Row>
132+
</Container>
131133

132-
</Row>
133134

134135
{/* <FlexBox.Row>
135136
<Box style={{ width: '40%' }}>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export const GetHeaderCols = ({
145145
activeSorting={activeSorting}
146146
activeSortingDirection={activeSortingDirection}
147147
>
148-
<div style={{ margin: '0 auto 0 auto' }}>
148+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
149149
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
150150
FLAVOR
151151
</Paragraph>
@@ -198,7 +198,7 @@ export const GetHeaderCols = ({
198198
activeSorting={activeSorting}
199199
activeSortingDirection={activeSortingDirection}
200200
>
201-
<div style={{ margin: '0 auto 0 auto' }}>
201+
<div style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
202202
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
203203
SHARED
204204
</Paragraph>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,11 +167,11 @@ export const GetHeaderCols = ({
167167
activeSorting={activeSorting}
168168
activeSortingDirection={activeSortingDirection}
169169
>
170-
<div style={{ margin: '0 auto 0 auto' }}>
171-
<Paragraph size="small" color="black" style={{ marginLeft: '-24px' }}>
170+
<Box style={{ margin: '0 auto 0 auto', textAlign: 'center' }}>
171+
<Paragraph size="small" color="black">
172172
SHARED
173173
</Paragraph>
174-
</div>
174+
</Box>
175175
</SortingHeader>
176176
),
177177
width: '8%',
@@ -186,7 +186,6 @@ export const GetHeaderCols = ({
186186
height: '19px',
187187
width: '19px',
188188
textAlign: 'center',
189-
marginLeft: '-24px'
190189
}}
191190
>
192191
{stack.isShared ? (

0 commit comments

Comments
 (0)