From f0c43f8bb538c9df82233b65e58e34d9c56406b8 Mon Sep 17 00:00:00 2001
From: Barak Argaman <barak@guardicore.com>
Date: Thu, 14 Sep 2017 00:58:56 +0300
Subject: [PATCH] configuration page - split view to top level "sections"

---
 .../ui/src/components/pages/ConfigurePage.js  | 34 ++++++++++++++++---
 monkey_island/cc/ui/src/styles/App.css        | 12 +++++++
 2 files changed, 41 insertions(+), 5 deletions(-)

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 (
       <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>
           : ''}
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
  */