UI code style improved, reset_db fixed

monkey/monkey_island/cc/app.py

@@ -100,7 +100,7 @@ def init_app(mongo_url):
 
     with app.app_context():
         database.init()
-        Database.reset_db()
+        Database.init_db()
 
     app.add_url_rule('/', 'serve_home', serve_home)
     app.add_url_rule('/<path:static_path>', 'serve_static_file', serve_static_file)

monkey/monkey_island/cc/services/database.py

@@ -23,3 +23,9 @@ class Database(object):
         AttackConfig.reset_config()
         logger.info('DB was reset')
         return jsonify(status='OK')
+
+    @staticmethod
+    def init_db():
+        if not mongo.db.collection_names():
+            Database.reset_db()
+

monkey/monkey_island/cc/ui/src/components/attack/MatrixComponent.js

@@ -96,10 +96,8 @@ class MatrixComponent extends AuthComponent {
     return {'columns': columns, 'matrixTableData': matrixTableData, 'maxTechniques': maxTechniques}
   };
 
-  render() {
-    let tableData = this.getTableData(this.props.configuration);
+  renderLegend = () => {
     return (
-      <div>
     <div id="header" className="row justify-content-between attack-legend">
       <Col xs={4}>
         <i className="fa fa-circle-thin icon-unchecked"></i>
@@ -113,7 +111,14 @@ class MatrixComponent extends AuthComponent {
         <i className="fa fa-circle icon-mandatory"></i>
         <span> - Mandatory</span>
       </Col>
-        </div>
+    </div>)
+  };
+
+  render() {
+    let tableData = this.getTableData(this.props.configuration);
+    return (
+      <div>
+        {this.renderLegend()}
         <div className={"attack-matrix"}>
           <ReactTable columns={tableData['columns']}
                       data={tableData['matrixTableData']}

monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -21,7 +21,24 @@ class ConfigurePageComponent extends AuthComponent {
     this.initialConfig = {};
     this.initialAttackConfig = {};
     this.sectionsOrder = ['attack', 'basic', 'basic_network', 'monkey', 'cnc', 'network', 'exploits', 'internal'];
-    this.uiSchemas = {
+    this.uiSchemas = ConfigurePageComponent.getUiSchemas();
+    // set schema from server
+    this.state = {
+      schema: {},
+      configuration: {},
+      attackConfig: {},
+      lastAction: 'none',
+      sections: [],
+      selectedSection: 'attack',
+      allMonkeysAreDead: true,
+      PBAwinFile: [],
+      PBAlinuxFile: [],
+      showAttackAlert: false
+    };
+  }
+
+  static getUiSchemas(){
+    return ({
       basic: {"ui:order": ["general", "credentials"]},
       basic_network: {},
       monkey: {
@@ -54,20 +71,7 @@ class ConfigurePageComponent extends AuthComponent {
       network: {},
       exploits: {},
       internal: {}
-    };
-    // set schema from server
-    this.state = {
-      schema: {},
-      configuration: {},
-      attackConfig: {},
-      lastAction: 'none',
-      sections: [],
-      selectedSection: 'attack',
-      allMonkeysAreDead: true,
-      PBAwinFile: [],
-      PBAlinuxFile: [],
-      showAttackAlert: false
-    };
+    })
   }
 
   setInitialConfig(config) {
@@ -138,7 +142,6 @@ class ConfigurePageComponent extends AuthComponent {
                    this.setState({lastAction: 'saved'})})
       .then(this.updateConfig())
       .catch(error => {
-        console.log('bad attack configuration');
         this.setState({lastAction: 'invalid_configuration'});
       });
   };
@@ -410,18 +413,29 @@ class ConfigurePageComponent extends AuthComponent {
     return pbaFile
   }
 
-  render() {
-    let displayedSchema = {};
-    if (this.state.schema.hasOwnProperty('properties') && this.state.selectedSection !== 'attack') {
-      displayedSchema = this.state.schema['properties'][this.state.selectedSection];
-      displayedSchema['definitions'] = this.state.schema['definitions'];
-    }
-    let config_content = (<Form schema={displayedSchema}
+  renderMatrix = () => {
+    return (<MatrixComponent configuration={this.state.attackConfig}
+                             submit={this.componentDidMount}
+                             reset={this.resetConfig}
+                             change={this.attackTechniqueChange}/>)
+  };
+
+
+  renderConfigContent = (displayedSchema) => {
+    return (<div>
+              {this.renderBasicNetworkWarning()}
+              <Form schema={displayedSchema}
                     uiSchema={this.uiSchemas[this.state.selectedSection]}
                     formData={this.state.configuration[this.state.selectedSection]}
                     onChange={this.onChange}
                     noValidate={true} >
-                            <div>
+                <button type="submit" className={"hidden"}>Submit</button>
+              </Form>
+            </div> )
+  };
+
+  renderRunningMonkeysWarning = () => {
+    return (<div>
               { this.state.allMonkeysAreDead ?
                 '' :
                 <div className="alert alert-warning">
@@ -430,38 +444,48 @@ class ConfigurePageComponent extends AuthComponent {
                   infections.
                 </div>
               }
-                            </div>
-                          </Form>);
-    let attack_content = (<MatrixComponent configuration={this.state.attackConfig}
-                                           submit={this.componentDidMount}
-                                           reset={this.resetConfig}
-                                           change={this.attackTechniqueChange}/>);
+            </div>)
+  };
+
+  renderBasicNetworkWarning = () => {
+    if (this.state.selectedSection === 'basic_network'){
+      return (<div className="alert alert-info">
+                <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
+                The Monkey scans its subnet if "Local network scan" is ticked. Additionally the monkey scans machines
+                according to its range class.
+              </div>)
+    } else {
+      return (<div />)
+    }
+  };
+
+  renderNav = () => {
+    return (<Nav bsStyle="tabs" justified
+                 activeKey={this.state.selectedSection} onSelect={this.setSelectedSection}
+                 style={{'marginBottom': '2em'}}>
+              {this.state.sections.map(section => <NavItem key={section.key} eventKey={section.key}>{section.title}</NavItem>)}
+            </Nav>)
+  };
+
+  render() {
+    let displayedSchema = {};
+    if (this.state.schema.hasOwnProperty('properties') && this.state.selectedSection !== 'attack') {
+      displayedSchema = this.state.schema['properties'][this.state.selectedSection];
+      displayedSchema['definitions'] = this.state.schema['definitions'];
+    }
     let content = '';
     if (this.state.selectedSection === 'attack' && Object.entries(this.state.attackConfig).length !== 0 ) {
-      content = attack_content
+      content = this.renderMatrix()
     } else if(this.state.selectedSection !== 'attack') {
-      content = config_content
+      content = this.renderConfigContent(displayedSchema)
     }
 
-
     return (
       <Col xs={12} lg={8}>
         {this.renderAttackAlertModal()}
         <h1 className="page-title">Monkey Configuration</h1>
-        <Nav bsStyle="tabs" justified
-             activeKey={this.state.selectedSection} onSelect={this.setSelectedSection}
-             style={{'marginBottom': '2em'}}>
-          {this.state.sections.map(section => <NavItem key={section.key} eventKey={section.key}>{section.title}</NavItem>)}
-        </Nav>
-        {
-          this.state.selectedSection === 'basic_network' ?
-            <div className="alert alert-info">
-              <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
-              The Monkey scans its subnet if "Local network scan" is ticked. Additionally the monkey scans machines
-              according to its range class.
-            </div>
-            : <div />
-        }
+        {this.renderNav()}
+        { this.renderRunningMonkeysWarning()}
         { content }
         <div className="text-center">
           <button type="submit" onClick={this.onSubmit} className="btn btn-success btn-lg" style={{margin: '5px'}}>