UI code style improved

monkey/monkey_island/cc/ui/src/components/attack/techniques/T1197.js

@@ -21,12 +21,25 @@ class T1210 extends React.Component {
       ]
   }
 
-  static renderMachine = (val) => {
+  static renderMachine(val){
     return (
       <span>{val.ip_addr} {(val.domain_name ? " (".concat(val.domain_name, ")") : "")}</span>
     )
   };
 
+  renderExploitedMachines(){
+    if (this.props.data.bits_jobs.length === 0){
+      return (<div />)
+    } else {
+      return (<ReactTable
+                columns={this.columns}
+                data={this.props.data.bits_jobs}
+                showPagination={false}
+                defaultPageSize={this.props.data.bits_jobs.length}
+              />)
+    }
+  }
+
   render() {
     return (
       <div className="data-table-container">
@@ -35,12 +48,7 @@ class T1210 extends React.Component {
           {this.props.data.bits_jobs.length > 0 ? <div>BITS jobs were used in these machines: </div> : ''}
         </div>
         <br/>
-        <ReactTable
+        {this.renderExploitedMachines()}
-          columns={this.columns}
-          data={this.props.data.bits_jobs}
-          showPagination={false}
-          defaultPageSize={this.props.data.bits_jobs.length}
-        />
       </div>
     );
   }

monkey/monkey_island/cc/ui/src/components/attack/techniques/T1210.js

@@ -1,70 +1,67 @@
 import React from 'react';
 import '../../../styles/Collapse.scss'
-import {Link} from "react-router-dom";
 import ReactTable from "react-table";
 
 
-let renderMachine = function (val) {
-  return (
-    <span>{val.ip_addr} {(val.domain_name ? " (".concat(val.domain_name, ")") : "")}</span>
-  )
-};
-
-let renderEndpoint = function (val) {
-  return (
-    <span>{(val.vulnerable_urls.length !== 0 ? val.vulnerable_urls[0] : val.vulnerable_ports[0])}</span>
-  )
-};
-
-let formatScanned = function (data){
-  let result = [];
-  for(let service in data.machine.services){
-    let scanned_service = {'machine': data.machine,
-                           'time': data.time,
-                           'service': {'port': [data.machine.services[service].port],
-                                       'display_name': data.machine.services[service].display_name}};
-    result.push(scanned_service)
-  }
-  return result
-};
-
-const scanColumns = [
-  {
-    columns: [
-      {Header: 'Machine', id: 'machine', accessor: x => renderMachine(x.machine),
-        style: { 'whiteSpace': 'unset' }, width: 200},
-      {Header: 'Time', id: 'time', accessor: x => x.time, style: { 'whiteSpace': 'unset' }, width: 170},
-      {Header: 'Port', id: 'port', accessor: x =>x.service.port, style: { 'whiteSpace': 'unset' }},
-      {Header: 'Service', id: 'service', accessor: x => x.service.display_name, style: { 'whiteSpace': 'unset' }}
-      ]
-  }
-];
-
-const exploitColumns = [
-  {
-    columns: [
-      {Header: 'Machine', id: 'machine', accessor: x => renderMachine(x.machine),
-        style: { 'whiteSpace': 'unset' }, width: 200},
-      {Header: 'Time', id: 'time', accessor: x => x.time, style: { 'whiteSpace': 'unset' }, width: 170},
-      {Header: 'Port/url', id: 'port', accessor: x =>renderEndpoint(x.service), style: { 'whiteSpace': 'unset' }},
-      {Header: 'Service', id: 'service', accessor: x => x.service.display_name, style: { 'whiteSpace': 'unset' }}
-      ]
-  }
-];
-
 class T1210 extends React.Component {
 
   constructor(props) {
     super(props);
   }
 
+  static getScanColumns() {
+    return ([{
+      columns: [
+        {Header: 'Machine', id: 'machine', accessor: x => this.renderMachine(x.machine),
+          style: { 'whiteSpace': 'unset' }, width: 200},
+        {Header: 'Time', id: 'time', accessor: x => x.time, style: { 'whiteSpace': 'unset' }, width: 170},
+        {Header: 'Port', id: 'port', accessor: x =>x.service.port, style: { 'whiteSpace': 'unset' }},
+        {Header: 'Service', id: 'service', accessor: x => x.service.display_name, style: { 'whiteSpace': 'unset' }}
+        ]
+  }])}
+
+  static getExploitColumns() {
+    return ([{
+      columns: [
+        {Header: 'Machine', id: 'machine', accessor: x => this.renderMachine(x.machine),
+          style: { 'whiteSpace': 'unset' }, width: 200},
+        {Header: 'Time', id: 'time', accessor: x => x.time, style: { 'whiteSpace': 'unset' }, width: 170},
+        {Header: 'Port/url', id: 'port', accessor: x =>this.renderEndpoint(x.service), style: { 'whiteSpace': 'unset' }},
+        {Header: 'Service', id: 'service', accessor: x => x.service.display_name, style: { 'whiteSpace': 'unset' }}
+        ]
+    }])};
+
+  static renderMachine(val){
+    return (
+      <span>{val.ip_addr} {(val.domain_name ? " (".concat(val.domain_name, ")") : "")}</span>
+    )
+  };
+
+  static renderEndpoint(val){
+    return (
+      <span>{(val.vulnerable_urls.length !== 0 ? val.vulnerable_urls[0] : val.vulnerable_ports[0])}</span>
+    )
+  };
+
+  static formatScanned(data){
+    let result = [];
+    for(let service in data.machine.services){
+      let scanned_service = {'machine': data.machine,
+                             'time': data.time,
+                             'service': {'port': [data.machine.services[service].port],
+                                         'display_name': data.machine.services[service].display_name}};
+      result.push(scanned_service)
+    }
+    return result
+  };
+
   renderScannedServices(data) {
     return (
       <div>
         <br/>
         <div>Found services: </div>
         <ReactTable
-            columns={scanColumns}
+            columns={T1210.getScanColumns()}
             data={data}
             showPagination={false}
             defaultPageSize={data.length}
@@ -78,7 +75,7 @@ class T1210 extends React.Component {
         <br/>
         <div>Exploited services: </div>
         <ReactTable
-            columns={exploitColumns}
+            columns={T1210.getExploitColumns()}
             data={data}
             showPagination={false}
             defaultPageSize={data.length}
@@ -87,7 +84,7 @@ class T1210 extends React.Component {
   }
 
   render() {
-    let scanned_services = this.props.data.scanned_services.map(formatScanned).flat();
+    let scanned_services = this.props.data.scanned_services.map(T1210.formatScanned).flat();
     return (
       <div>
         <div>{this.props.data.message}</div>
@@ -95,9 +92,6 @@ class T1210 extends React.Component {
           this.renderScannedServices(scanned_services) : ''}
         {this.props.data.exploited_services.length > 0 ?
           this.renderExploitedServices(this.props.data.exploited_services) : ''}
-        <div className="attack-report footer-text">
-          To get more info about scanned and exploited machines view <Link to="/report">standard report.</Link>
-        </div>
       </div>
     );
   }

monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js

@@ -59,21 +59,21 @@ class AttackReportPageComponent extends AuthComponent {
   onToggle = technique =>
     this.setState(state => ({ collapseOpen: state.collapseOpen === technique ? null : technique }));
 
-  getTechniqueCollapse(tech_id){
+  getComponentClass(tech_id){
     switch (this.state.report[tech_id].status) {
       case 'SCANNED':
-        var className = 'collapse-info';
+        return 'collapse-info';
-        break;
       case 'USED':
-        var className = 'collapse-danger';
+        return 'collapse-danger';
-        break;
       default:
-        var className = 'collapse-default';
+        return 'collapse-default';
     }
+  }
 
+  getTechniqueCollapse(tech_id){
     return (
       <div key={tech_id} className={classNames("collapse-item", { "item--active": this.state.collapseOpen === tech_id })}>
-        <button className={classNames("btn-collapse", className)} onClick={() => this.onToggle(tech_id)}>
+        <button className={classNames("btn-collapse", this.getComponentClass(tech_id))} onClick={() => this.onToggle(tech_id)}>
           <span>{this.state.report[tech_id].title}</span>
           <span>
               <i className={classNames("fa", this.state.collapseOpen === tech_id ? "fa-chevron-down" : "fa-chevron-up")}></i>
@@ -102,6 +102,23 @@ class AttackReportPageComponent extends AuthComponent {
     );
   }
 
+  renderLegend() {
+    return( <div id="header" className="row justify-content-between attack-legend">
+              <Col xs={4}>
+                <i className="fa fa-circle icon-default"></i>
+                <span> - Unscanned</span>
+              </Col>
+              <Col xs={4}>
+                <i className="fa fa-circle icon-info"></i>
+                <span> - Scanned</span>
+              </Col>
+              <Col xs={4}>
+                <i className="fa fa-circle icon-danger"></i>
+                <span> - Used</span>
+              </Col>
+            </div>)
+  }
+
   generateReportContent(){
     let content = [];
     Object.keys(this.state.report).forEach((tech_id) => {
@@ -109,20 +126,7 @@ class AttackReportPageComponent extends AuthComponent {
     });
     return (
       <div>
-        <div id="header" className="row justify-content-between attack-legend">
+        {this.renderLegend()}
-          <Col xs={4}>
-            <i className="fa fa-circle icon-default"></i>
-            <span> - Unscanned</span>
-          </Col>
-          <Col xs={4}>
-            <i className="fa fa-circle icon-info"></i>
-            <span> - Scanned</span>
-          </Col>
-          <Col xs={4}>
-            <i className="fa fa-circle icon-danger"></i>
-            <span> - Used</span>
-          </Col>
-        </div>
         <section className="app">{content}</section>
       </div>
     )