configuration page - split view to top level "sections"

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 (
       <Col xs={8}>
@@ -48,9 +61,20 @@ class ConfigurePageComponent extends React.Component {
           <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
           This configuration will only apply on new infections.
         </div>
-        <Form schema={this.state.schema}
-              formData={this.state.configuration}
-              onSubmit={this.onSubmit}/>
+
+        <select value={this.state.selectedSection} onChange={this.setSelectedSection}
+                className="form-control input-lg" style={{'margin-bottom': '1em'}}>
+          {this.state.sections.map(section =>
+            <option value={section.key}>{section.title}</option>
+          )}
+        </select>
+
+        { this.state.selectedSection ?
+          <Form schema={this.state.schema.properties[this.state.selectedSection]}
+                formData={this.state.configuration}
+                onSubmit={this.onSubmit}/>
+          : ''}
+
         { this.state.saved ?
           <p>Configuration saved successfully.</p>
           : ''}

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
  */