Extracted common code of PagenatedTable component

monkey/monkey_island/cc/ui/src/components/report-components/common/PagenatedTable.js

@@ -0,0 +1,29 @@
+import React, {Component} from "react";
+import ReactTable from "react-table";
+
+class PagenatedTable extends Component {
+  render() {
+    if (this.props.data.length > 0) {
+      let defaultPageSize = this.props.data.length > this.props.pageSize ? this.props.pageSize : this.props.data.length;
+      let showPagination = this.props.data.length > this.props.pageSize;
+
+      return (
+        <div>
+          <ReactTable
+            columns={this.props.columns}
+            data={this.props.data}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
+        </div>
+      );
+    }
+    else {
+      return (
+        <div/>
+      );
+    }
+  }
+}
+
+export default PagenatedTable;

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js

@@ -1,9 +1,9 @@
 import React, {Component} from "react";
-import ReactTable from "react-table";
 import {Button} from "react-bootstrap";
 import {EventsModal} from "./EventsModal";
 import FileSaver from "file-saver";
 import {PillarLabel} from "./PillarLabel";
+import PagenatedTable from "../common/PagenatedTable";
 
 
 class EventsAndButtonComponent extends Component {
@@ -51,7 +51,7 @@ const columns = [
   {
     Header: 'Findings',
     columns: [
-      { Header: 'Test', accessor: 'test',
+      { Header: 'Finding', accessor: 'test',
         style: {'whiteSpace': 'unset'}  // This enables word wrap
       },
       { Header: 'Pillars', id: "pillars",
@@ -72,27 +72,12 @@ const columns = [
   }
 ];
 
-const pageSize = 10;
-
 class FindingsTable extends Component {
   render() {
-    if (this.props.findings.length > 0) {
-      let defaultPageSize = this.props.findings.length > pageSize ? pageSize : this.props.findings.length;
-      let showPagination = this.props.findings.length > pageSize;
-
     return (
-        <div>
+      <PagenatedTable data={this.props.findings} pageSize={10} columns={columns}/>
-          <ReactTable
-            columns={columns}
-            data={this.props.findings}
-            showPagination={showPagination}
-            defaultPageSize={defaultPageSize}
-          />
-        </div>
     );
   }
-    else { return (<div><pre>BAYAZ</pre></div>);}
-  }
 }
 
 

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
-import ReactTable from "react-table";
 import {PillarLabel} from "./PillarLabel";
+import PagenatedTable from "../common/PagenatedTable";
 
 const columns = [
   {
@@ -16,26 +16,9 @@ const columns = [
   }
 ];
 
-const pageSize = 10;
-
 class PillarGrades extends Component {
   render() {
-    if (this.props.pillars.length > 0) {
+    return <PagenatedTable data={this.props.pillars} columns={columns} pageSize={10}/>;
-      let defaultPageSize = this.props.pillars.length > pageSize ? pageSize : this.props.pillars.length;
-      let showPagination = this.props.pillars.length > pageSize;
-
-      return (
-        <div>
-          <ReactTable
-            columns={columns}
-            data={this.props.pillars}
-            showPagination={showPagination}
-            defaultPageSize={defaultPageSize}
-          />
-        </div>
-      );
-    }
-    else { return (<div><pre>BAYAZ</pre></div>);}
   }
 }