diff --git a/monkey_island/cc/ui/src/components/pages/ConfigurePage.js b/monkey_island/cc/ui/src/components/pages/ConfigurePage.js index 8ccf711d2..94359d967 100644 --- a/monkey_island/cc/ui/src/components/pages/ConfigurePage.js +++ b/monkey_island/cc/ui/src/components/pages/ConfigurePage.js @@ -10,7 +10,9 @@ class ConfigurePageComponent extends React.Component { this.state = { schema: {}, configuration: {}, - saved: false + saved: false, + sections: [], + selectedSection: '' }; } @@ -19,7 +21,12 @@ class ConfigurePageComponent extends React.Component { .then(res => res.json()) .then(res => this.setState({ schema: res.schema, - configuration: res.configuration + configuration: res.configuration, + sections: Object.keys(res.schema.properties) + .map(key => { + return {key: key, title: res.schema.properties[key].title} + }), + selectedSection: 'monkey' })); } @@ -40,6 +47,12 @@ class ConfigurePageComponent extends React.Component { }); }; + setSelectedSection = (event) => { + this.setState({ + selectedSection: event.target.value + }); + }; + render() { return ( @@ -48,9 +61,20 @@ class ConfigurePageComponent extends React.Component { This configuration will only apply on new infections. -
+ + + + { this.state.selectedSection ? + + : ''} + { this.state.saved ?

Configuration saved successfully.

: ''} diff --git a/monkey_island/cc/ui/src/styles/App.css b/monkey_island/cc/ui/src/styles/App.css index 64aeb0699..01dc1a8b0 100644 --- a/monkey_island/cc/ui/src/styles/App.css +++ b/monkey_island/cc/ui/src/styles/App.css @@ -140,6 +140,18 @@ body { background: #666; } +/* + * Configuration Page + */ + +.rjsf .form-group .form-group { + margin-left: 2em; +} + +.rjsf #root__title { + display: none; +} + /* * Run Monkey Page */