Skip to content

Commit 6d27dfd

Browse files
talhainvenxiontalhainvenxion
committed
added run config
1 parent 50c2d27 commit 6d27dfd

File tree

15 files changed

+221
-31
lines changed

15 files changed

+221
-31
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"react-dom": "^16.13.1",
5252
"react-flow-renderer": "^10.3.16",
5353
"react-joyride": "^2.5.3",
54+
"react-json-pretty": "^2.2.0",
5455
"react-outside-click-handler": "^1.3.0",
5556
"react-redux": "^7.2.1",
5657
"react-router-dom": "^5.2.0",
@@ -78,7 +79,6 @@
7879
"tslint": "tsc",
7980
"all": "eslint './src/**/*.ts*' & react-scripts test --all & tsc"
8081
},
81-
8282
"browserslist": {
8383
"production": [
8484
">0.2%",

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

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

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { FlexBox, Box, EditField, Paragraph } from '../../components';
3+
import styles from './index.module.scss';
4+
import { titleCase } from '../../../utils';
5+
import JSONPretty from 'react-json-pretty';
6+
7+
export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
8+
runConfiguration,
9+
}) => {
10+
const getFormElement: any = (elementName: any, elementSchema: any) => {
11+
if (typeof elementSchema === 'string') {
12+
return (
13+
<Box marginVertical={'md'} style={{ width: '40%' }}>
14+
<EditField
15+
disabled
16+
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
17+
// onChangeText={(e: any) => onPressEnter(e, 'string', elementName)}
18+
label={titleCase(elementName)}
19+
optional={false}
20+
defaultValue={elementSchema}
21+
placeholder=""
22+
hasError={false}
23+
className={styles.field}
24+
/>
25+
</Box>
26+
);
27+
}
28+
29+
if (typeof elementSchema === 'object' && elementSchema !== null) {
30+
return (
31+
<Box style={{ width: '40%' }}>
32+
<Paragraph size="body" style={{ color: 'black' }}>
33+
<label htmlFor={elementName}>{titleCase(elementName)}</label>
34+
</Paragraph>
35+
<Box
36+
padding={'md'}
37+
marginVertical={'md'}
38+
className={styles.JSONPretty}
39+
>
40+
<JSONPretty
41+
style={{ fontSize: '16px', fontFamily: 'Rubik' }}
42+
id="json-pretty"
43+
data={elementSchema}
44+
></JSONPretty>
45+
</Box>
46+
</Box>
47+
);
48+
}
49+
50+
if (typeof elementSchema === 'boolean' || elementSchema === null) {
51+
return (
52+
<Box marginVertical={'md'} style={{ width: '40%' }}>
53+
<Box>
54+
{console.log(elementSchema, elementName, 'asdasdasda2222sdasd')}
55+
<FlexBox.Row justifyContent="space-between">
56+
<Paragraph>{titleCase(elementName)}</Paragraph>
57+
<label className={styles.switch}>
58+
<input
59+
disabled
60+
type="checkbox"
61+
defaultChecked={elementSchema}
62+
/>
63+
<span className={`${styles.slider} ${styles.round}`}></span>
64+
</label>
65+
</FlexBox.Row>
66+
</Box>
67+
</Box>
68+
);
69+
}
70+
};
71+
72+
return (
73+
<>
74+
{Object.keys(runConfiguration).map((key, ind) => (
75+
// <Col xs={6} key={ind}>
76+
<>{getFormElement(key, runConfiguration[key])}</>
77+
// </Col>
78+
))}
79+
</>
80+
);
81+
};

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import { iconColors, iconSizes } from '../../../../../constants';
1111

1212
import styles from './index.module.scss';
1313
import { useService } from './useService';
14+
import { NonEditableRunConfig } from '../../../NonEditableRunConfig';
1415

1516
export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
16-
const { downloadYamlFile, pipelineConfig } = useService({ runId });
17+
const { downloadYamlFile, pipelineConfig, run } = useService({ runId });
1718
const [hover, setHover] = useState(false);
1819
const dispatch = useDispatch();
1920
const handleCopy = () => {
@@ -28,6 +29,9 @@ export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
2829

2930
return (
3031
<FlexBox.Column fullWidth>
32+
<NonEditableRunConfig
33+
runConfiguration={run.pipelineConfiguration}
34+
></NonEditableRunConfig>
3135
<FlexBox
3236
marginBottom="md"
3337
alignItems="center"

‎src/ui/layouts/pipelines/RunDetail/Configuration/useService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import YAML from 'json2yaml';
66
interface ServiceInterface {
77
downloadYamlFile: () => void;
88
pipelineConfig: string;
9+
run: any;
910
}
1011

1112
export const useService = ({ runId }: { runId: TId }): ServiceInterface => {
@@ -24,5 +25,5 @@ export const useService = ({ runId }: { runId: TId }): ServiceInterface => {
2425
element.click();
2526
};
2627

27-
return { downloadYamlFile, pipelineConfig };
28+
return { downloadYamlFile, pipelineConfig, run };
2829
};

‎src/ui/layouts/runs/RunDetail/Configuration/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ import { iconColors, iconSizes } from '../../../../../constants';
1212
import styles from './index.module.scss';
1313
import { useService } from './useService';
1414

15+
import { NonEditableRunConfig } from '../../../NonEditableRunConfig';
16+
1517
export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
16-
const { downloadYamlFile, pipelineConfig } = useService({ runId });
18+
const { downloadYamlFile, pipelineConfig, run } = useService({ runId });
1719
const [hover, setHover] = useState(false);
1820
const dispatch = useDispatch();
1921
const handleCopy = () => {
@@ -28,6 +30,9 @@ export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
2830

2931
return (
3032
<FlexBox.Column fullWidth>
33+
<NonEditableRunConfig
34+
runConfiguration={run.pipelineConfiguration}
35+
></NonEditableRunConfig>
3136
<FlexBox
3237
marginBottom="md"
3338
alignItems="center"

‎src/ui/layouts/runs/RunDetail/Configuration/useService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import YAML from 'json2yaml';
66
interface ServiceInterface {
77
downloadYamlFile: () => void;
88
pipelineConfig: string;
9+
run: any;
910
}
1011

1112
export const useService = ({ runId }: { runId: TId }): ServiceInterface => {
@@ -24,5 +25,5 @@ export const useService = ({ runId }: { runId: TId }): ServiceInterface => {
2425
element.click();
2526
};
2627

27-
return { downloadYamlFile, pipelineConfig };
28+
return { downloadYamlFile, pipelineConfig, run };
2829
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const SidePopup: React.FC<{
4141
onClick={action}
4242
style={{ position: 'fixed', right: '50px' }}
4343
>
44-
Register Stack Component
44+
Register Component
4545
</PrimaryButton>
4646
</div>
4747
</Box>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ import { iconColors, iconSizes } from '../../../../../constants';
1212
import styles from './index.module.scss';
1313
import { useService } from './useService';
1414

15+
import { NonEditableRunConfig } from '../../../NonEditableRunConfig';
1516
export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
1617
const [hover, setHover] = useState(false);
17-
const { downloadYamlFile, pipelineConfig } = useService({ runId });
18+
const { downloadYamlFile, pipelineConfig, run } = useService({ runId });
1819

1920
const dispatch = useDispatch();
2021
const handleCopy = () => {
@@ -29,6 +30,9 @@ export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
2930

3031
return (
3132
<FlexBox.Column fullWidth>
33+
<NonEditableRunConfig
34+
runConfiguration={run.pipelineConfiguration}
35+
></NonEditableRunConfig>
3236
<FlexBox
3337
marginBottom="md"
3438
alignItems="center"

‎src/ui/layouts/stackComponents/RunDetail/Configuration/useService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import YAML from 'json2yaml';
66
interface ServiceInterface {
77
downloadYamlFile: () => void;
88
pipelineConfig: string;
9+
run: any;
910
}
1011

1112
export const useService = ({ runId }: { runId: TId }): ServiceInterface => {
@@ -24,5 +25,5 @@ export const useService = ({ runId }: { runId: TId }): ServiceInterface => {
2425
element.click();
2526
};
2627

27-
return { downloadYamlFile, pipelineConfig };
28+
return { downloadYamlFile, pipelineConfig, run };
2829
};

0 commit comments

Comments
 (0)