Improved display of post breach actions

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

@@ -2,30 +2,39 @@ import React from 'react';
 import ReactTable from 'react-table'
 
 let renderArray = function(val) {
-  return <div>{val.map(x => <div>{x}</div>)}</div>;
+  return <span>{val.map(x => <span> {x}</span>)}</span>;
 };
 
 let renderIpAddresses = function (val) {
-  return <div>{renderArray(val.ip_addresses)} {(val.domain_name ? " (".concat(val.domain_name, ")") : "")} </div>;
+  return <span> {renderArray(val.ip_addresses)} {(val.domain_name ? " (".concat(val.domain_name, ")") : "")} </span>;
 };
 
-let renderPostBreach = function (machine, pbaList) {
-  if (pbaList.length === 0){
-    return
-  } else {
-      return <div>Machine: {machine.label}<br/>
-             {pbaList.map(x => <div>Name: {x.name}<br/>
-                                    Command: {x.command}<br/>
-                                    Output: {x.output}<br/></div>)}
-                                    </div>;
-  }
+let renderMachine = function (data) {
+  return <div>{data.label} ( {renderIpAddresses(data)} )</div>
+};
+
+const subColumns = [
+  {id: 'pba_name', Header: "Name", accessor: x => x.name, style: { 'white-space': 'unset' }},
+  {id: 'pba_output', Header: "Output", accessor: x => x.output, style: { 'white-space': 'unset' }}
+];
+
+let renderDetails = function (data) {
+  let defaultPageSize = data.length > pageSize ? pageSize : data.length;
+  let showPagination = data.length > pageSize;
+  return <ReactTable
+                  data={data}
+                  columns={subColumns}
+                  defaultPageSize={defaultPageSize}
+                  showPagination={showPagination}
+                  style={{"background-color": "#ededed"}}
+                />
 };
 
 const columns = [
   {
     Header: 'Post breach actions',
     columns: [
-      {id: 'post_breach_actions', accessor: x => renderPostBreach(x, x.pba_results)}
+      {id: 'pba_machine', Header:'Machine', accessor: x => renderMachine(x)}
     ]
   }
 ];
@@ -38,17 +47,24 @@ class PostBreachComponent extends React.Component {
   }
 
   render() {
-    let defaultPageSize = this.props.data.length > pageSize ? pageSize : this.props.data.length;
-    let showPagination = this.props.data.length > pageSize;
+    let pbaMachines = this.props.data.filter(function(value, index, arr){
+        return ( value.pba_results !== "None" && value.pba_results.length);
+    });
+    let defaultPageSize = pbaMachines.length > pageSize ? pageSize : pbaMachines.length;
+    let showPagination = pbaMachines > pageSize;
     return (
       <div className="data-table-container">
         <ReactTable
           columns={columns}
-          data={this.props.data}
+          data={pbaMachines}
           showPagination={showPagination}
           defaultPageSize={defaultPageSize}
+          SubComponent={row => {
+            return renderDetails(row.original.pba_results);
+          }}
         />
       </div>
+
     );
   }
 }