UI code style improved

2019-05-07 12:55:51 +03:00 · 2019-05-07 12:55:51 +03:00 · 079b5b75b0
parent ef68bd9201
commit 079b5b75b0
3 changed files with 89 additions and 83 deletions
--- a/monkey/monkey_island/cc/ui/src/components/attack/techniques/T1197.js
+++ b/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
-          columns={this.columns}
-          data={this.props.data.bits_jobs}
-          showPagination={false}
-          defaultPageSize={this.props.data.bits_jobs.length}
-        />
+        {this.renderExploitedMachines()}
      </div>
    );
  }
--- a/monkey/monkey_island/cc/ui/src/components/attack/techniques/T1210.js
+++ b/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>
    );
  }
--- a/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
+++ b/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';
-        break;
+        return 'collapse-info';
      case 'USED':
-        var className = 'collapse-danger';
-        break;
+        return 'collapse-danger';
      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">
-          <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>
+        {this.renderLegend()}
        <section className="app">{content}</section>
      </div>
    )