Skip to content

Commit 540c447

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #182 from zenml-io/create-stack-flow
Create stack flow
2 parents 706cd68 + 9e06896 commit 540c447

File tree

5 files changed

+357
-24
lines changed

5 files changed

+357
-24
lines changed

‎src/ui/layouts/NonEditableConfig/index.module.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import '../../globalStyles.scss';
2+
3+
.field {
4+
background: rgba(168, 168, 168, 0.1);
5+
border: 1px solid #C9CBD0;
6+
border-radius: 4px;
7+
}
8+
9+
.switch {
10+
position: relative;
11+
display: inline-block;
12+
width: 38px;
13+
height: 20px;
14+
}
15+
16+
.switch input {
17+
opacity: 0;
18+
width: 0;
19+
height: 0;
20+
}
21+
22+
.slider {
23+
position: absolute;
24+
cursor: pointer;
25+
top: 0;
26+
left: 0;
27+
right: 0;
28+
bottom: 0;
29+
background-color: #ccc;
30+
-webkit-transition: .4s;
31+
transition: .4s;
32+
}
33+
34+
.slider:before {
35+
position: absolute;
36+
content: "";
37+
height: 17px;
38+
width: 17px;
39+
left: 1px;
40+
bottom: 2px;
41+
background-color: white;
42+
-webkit-transition: .4s;
43+
transition: .4s;
44+
}
45+
46+
input:checked + .slider {
47+
background-color: $primaryColor;
48+
}
49+
50+
input:focus + .slider {
51+
box-shadow: 0 0 1px $primaryColor;
52+
}
53+
54+
input:checked + .slider:before {
55+
-webkit-transform: translateX(19px);
56+
-ms-transform: translateX(19px);
57+
transform: translateX(19px);
58+
}
59+
60+
/* Rounded sliders */
61+
.slider.round {
62+
border-radius: 34px;
63+
}
64+
65+
.slider.round:before {
66+
border-radius: 50%;
67+
}

‎src/ui/layouts/NonEditableConfig/index.tsx‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import React from 'react';
2+
import {
3+
FlexBox,
4+
Box,
5+
EditField,
6+
Paragraph,
7+
Container,
8+
FullWidthSpinner,
9+
} from '../../components';
10+
import styles from './index.module.scss';
11+
import { useService } from './useService';
12+
13+
export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
14+
const { flavor } = useService({
15+
details,
16+
});
17+
console.log(
18+
details?.configuration,
19+
'flavoflavorr',
20+
flavor?.config_schema?.properties,
21+
);
22+
23+
const titleCase = (s: any) =>
24+
s.replace(/^_*(.)|_+(.)/g, (s: any, c: string, d: string) =>
25+
c ? c.toUpperCase() : ' ' + d.toUpperCase(),
26+
);
27+
28+
const getFormElement: any = (elementName: any, elementSchema: any) => {
29+
if (typeof elementSchema === 'string') {
30+
return (
31+
<Box marginVertical={'md'} style={{ width: '100%' }}>
32+
<EditField
33+
disabled
34+
onChangeText={() => console.log('')}
35+
label={titleCase(elementName)}
36+
optional={false}
37+
value={elementSchema}
38+
placeholder=""
39+
hasError={false}
40+
className={styles.field}
41+
/>
42+
</Box>
43+
);
44+
}
45+
if (typeof elementSchema === 'object') {
46+
return (
47+
<Box marginVertical={'xl'} style={{ width: '100%' }}>
48+
<Paragraph size="body" style={{ color: 'black' }}>
49+
<label htmlFor={elementName}>{titleCase(elementName)}</label>
50+
</Paragraph>
51+
{Object.keys(elementSchema).length < 1 && (
52+
<FlexBox.Row>
53+
<EditField
54+
disabled
55+
onChangeText={() => console.log('')}
56+
label="Key"
57+
optional={false}
58+
value={''}
59+
placeholder=""
60+
hasError={false}
61+
className={styles.field}
62+
/>
63+
<div style={{ width: '10%' }}></div>
64+
<EditField
65+
disabled
66+
// marginRight={'md'}
67+
onChangeText={() => console.log('')}
68+
label="Value"
69+
// optional={true}
70+
value={''}
71+
placeholder=""
72+
hasError={false}
73+
className={styles.field}
74+
/>
75+
</FlexBox.Row>
76+
)}
77+
{Object.entries(elementSchema).map(([key, value]) => (
78+
<FlexBox.Row>
79+
<EditField
80+
disabled
81+
onChangeText={() => console.log('')}
82+
label="Key"
83+
optional={false}
84+
value={key}
85+
placeholder=""
86+
hasError={false}
87+
className={styles.field}
88+
/>
89+
<div style={{ width: '10%' }}></div>
90+
<EditField
91+
disabled
92+
// marginRight={'md'}
93+
onChangeText={() => console.log('')}
94+
label="Value"
95+
// optional={true}
96+
value={value}
97+
placeholder=""
98+
hasError={false}
99+
className={styles.field}
100+
/>
101+
</FlexBox.Row>
102+
))}
103+
</Box>
104+
);
105+
}
106+
if (typeof elementSchema === 'boolean') {
107+
return (
108+
<Box marginVertical={'md'} style={{ width: '100%' }}>
109+
<Box>
110+
<FlexBox.Row justifyContent="space-between">
111+
<Paragraph>{titleCase(elementName)}</Paragraph>
112+
<label className={styles.switch}>
113+
<input type="checkbox" checked={elementSchema} />
114+
<span className={`${styles.slider} ${styles.round}`}></span>
115+
</label>
116+
</FlexBox.Row>
117+
</Box>
118+
</Box>
119+
);
120+
}
121+
};
122+
123+
if (flavor === undefined) {
124+
return <FullWidthSpinner color="black" size="md" />;
125+
}
126+
// const values = [...flavor?.config_schema?.properties];
127+
128+
let result = Object.keys(flavor?.config_schema?.properties).reduce(function (
129+
r: any,
130+
name: any,
131+
) {
132+
return (
133+
(r[name] =
134+
flavor?.config_schema?.properties[name].type === 'string' &&
135+
flavor?.config_schema?.properties[name].default === undefined
136+
? ''
137+
: flavor?.config_schema?.properties[name].default),
138+
r
139+
);
140+
},
141+
{});
142+
143+
const mappedObject = {
144+
...result,
145+
...details?.configuration,
146+
};
147+
148+
return (
149+
<FlexBox.Column marginTop="xl" fullWidth>
150+
<FlexBox.Row>
151+
<Container>
152+
<Box style={{ width: '80%' }}>
153+
<EditField
154+
disabled
155+
onChangeText={() => console.log('')}
156+
label={'Flavor Name'}
157+
optional={false}
158+
value={details.flavor}
159+
placeholder=""
160+
hasError={false}
161+
className={styles.field}
162+
/>
163+
</Box>
164+
<FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
165+
<Paragraph>Share Component with public</Paragraph>
166+
<label className={styles.switch}>
167+
<input type="checkbox" checked={details.is_shared} />
168+
<span className={`${styles.slider} ${styles.round}`}></span>
169+
</label>
170+
</FlexBox.Row>
171+
</Container>
172+
{/* <Container>
173+
174+
</Container> */}
175+
</FlexBox.Row>
176+
<FlexBox.Row style={{ width: '80%' }}>
177+
<Container>
178+
{/* <Row>
179+
<Col xs={5}>
180+
181+
</Col>
182+
<Col xs={5} style={{ marginLeft: '100px' }}>
183+
<FlexBox.Row justifyContent="space-between">
184+
<Paragraph>Share Component with public</Paragraph>
185+
<label className={styles.switch}>
186+
<input type="checkbox" checked={details.isShared} />
187+
<span className={`${styles.slider} ${styles.round}`}></span>
188+
</label>
189+
</FlexBox.Row>
190+
</Col>
191+
</Row> */}
192+
193+
{Object.keys(mappedObject).map((key, ind) => (
194+
// <Col xs={6} key={ind}>
195+
<>{getFormElement(key, mappedObject[key])}</>
196+
// </Col>
197+
))}
198+
</Container>
199+
</FlexBox.Row>
200+
</FlexBox.Column>
201+
);
202+
};

‎src/ui/layouts/NonEditableConfig/useService.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useDispatch } from 'react-redux';
2+
// import { stackComponentSelectors } from '../../../redux/selectors';
3+
4+
// import YAML from 'json2yaml';
5+
import { useEffect, useState } from 'react';
6+
// import { useLocationPath } from '../../hooks';
7+
import { flavorPagesActions, flavorsActions } from '../../../redux/actions';
8+
9+
interface ServiceInterface {
10+
flavor: any;
11+
}
12+
13+
export const useService = ({ details }: { details: any }): ServiceInterface => {
14+
// const locationPath = useLocationPath();
15+
const [flavor, setFlavor] = useState();
16+
// debugger;
17+
const dispatch = useDispatch();
18+
useEffect(() => {
19+
setFetching(true);
20+
21+
dispatch(
22+
flavorsActions.getType({
23+
type: details?.type,
24+
name: details?.flavor.name,
25+
onSuccess: (res: any) => {
26+
setFlavor(res.items[0]);
27+
},
28+
onFailure: () => setFetching(false),
29+
}),
30+
);
31+
// eslint-disable-next-line react-hooks/exhaustive-deps
32+
}, []);
33+
34+
const setFetching = (fetching: boolean) => {
35+
dispatch(flavorPagesActions.setFetching({ fetching }));
36+
};
37+
// const yamlConfigObj: any = {
38+
// [stackComponent.type as string]: {
39+
// flavor: stackComponent.flavor,
40+
// name: stackComponent.name,
41+
// ...stackComponent.configuration,
42+
// },
43+
// };
44+
45+
// const stackConfig = YAML.stringify(yamlConfigObj);
46+
47+
// const downloadYamlFile = () => {
48+
// const element = document.createElement('a');
49+
50+
// const file = new Blob([stackConfig], {
51+
// type: 'text/yaml',
52+
// });
53+
// element.href = URL.createObjectURL(file);
54+
// element.download = `${stackComponent.id}-config.yaml`;
55+
// document.body.appendChild(element);
56+
// element.click();
57+
// };
58+
59+
return { flavor };
60+
};

‎src/ui/layouts/stacks/CreateStack/ListForAll/GetList/index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ export const GetList: React.FC<Props> = ({
5353
if (temp) {
5454
return {
5555
...item,
56-
flavor: {
57-
logoUrl: temp.logo_url,
58-
name: item.flavor,
59-
},
56+
logoUrl: temp.logo_url,
57+
// flavor: {
58+
// logoUrl: temp.logo_url,
59+
// name: item.flavor,
60+
// },
6061
};
6162
}
6263
return item;
@@ -107,9 +108,9 @@ export const GetList: React.FC<Props> = ({
107108
{list?.map((item: any) => (
108109
<Box marginLeft="md">
109110
<CustomStackBox
110-
image={item?.flavor?.logoUrl}
111+
image={item?.logoUrl}
111112
stackName={item.name}
112-
stackDesc={item?.flavor.name}
113+
stackDesc={item?.flavor}
113114
value={false}
114115
onCheck={() => {
115116
// var selectedList = selectedStack;

0 commit comments

Comments
 (0)