Added sec issues to ZT report as well and gridified the overview section

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Col} from 'react-bootstrap';
+import {Button, Col, Row, Grid} from 'react-bootstrap';
 import AuthComponent from '../AuthComponent';
 import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader";
 import PillarsOverview from "../report-components/zerotrust/PillarOverview";
@@ -8,6 +8,8 @@ import {SinglePillarDirectivesStatus} from "../report-components/zerotrust/Singl
 import {MonkeysStillAliveWarning} from "../report-components/common/MonkeysStillAliveWarning";
 import ReportLoader from "../report-components/common/ReportLoader";
 import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
+import {SecurityIssuesGlance} from "../report-components/common/SecurityIssuesGlance";
+import {PillarsSummary} from "../report-components/zerotrust/PillarsSummary";
 
 class ZeroTrustReportPageComponent extends AuthComponent {
 
@@ -60,12 +62,6 @@ class ZeroTrustReportPageComponent extends AuthComponent {
     if (this.stillLoadingDataFromServer()) {
       content = <ReportLoader loading={true}/>;
     } else {
-      console.log(this.state.pillars);
-      const pillarsSection = <div id="pillars-overview">
-        <h2>Pillars Overview</h2>
-        <PillarsOverview pillars={this.state.pillars}/>
-      </div>;
-
       const directivesSection = <div id="directives-overview">
         <h2>Directives status</h2>
         {
@@ -84,8 +80,19 @@ class ZeroTrustReportPageComponent extends AuthComponent {
       </div>;
 
       content = <div id="MainContentSection">
+        <h2>Overview</h2>
+        <Grid fluid={true}>
+          <Row className="show-grid">
+            <Col xs={8} sm={8} md={8} lg={8}>
+              <PillarsOverview pillars={this.state.pillars}/>
+            </Col>
+            <Col xs={4} sm={4} md={4} lg={4}>
               <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead} />
-        {pillarsSection}
+              <SecurityIssuesGlance issuesFound={this.anyIssuesFound()} />
+              <PillarsSummary pillars={this.state.pillars.summary}/>
+            </Col>
+          </Row>
+        </Grid>
         {directivesSection}
         {findingSection}
       </div>;
@@ -140,6 +147,14 @@ class ZeroTrustReportPageComponent extends AuthComponent {
         });
       });
   }
+
+  anyIssuesFound() {
+    const severe = function(finding) {
+      return (finding.status === "Conclusive" || finding.status === "Inconclusive");
+    };
+
+    return this.state.findings.some(severe);
+  }
 }
 
 export default ZeroTrustReportPageComponent;

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

@@ -26,6 +26,6 @@ export class PillarLabel extends Component {
     };
 
     const className = "label " + pillarToColor[this.props.pillar];
-    return <span className={className} style={{margin: '2px'}}><i className={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</span>
+    return <div className={className} style={{margin: '2px', display: 'inline-block'}}><i className={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</div>
   }
 }

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

@@ -21,8 +21,6 @@ const columns = [
 class PillarOverview extends Component {
   render() {
     return (<div id={this.constructor.name}>
-      <PillarsSummary pillars={this.props.pillars.summary}/>
-      <br/>
       <PaginatedTable data={this.props.pillars.grades} columns={columns} pageSize={10}/>
     </div>);
   }

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

@@ -16,13 +16,13 @@ export class PillarsSummary extends Component {
     if (this.props.pillars[status].length > 0) {
       return <Fragment>
         <h3>{status}</h3>
-        <p>
+        <div>
             {
               this.props.pillars[status].map((pillar) => {
                 return <PillarLabel key={pillar} pillar={pillar}/>
               })
             }
-        </p>
+        </div>
       </Fragment>
     }
   }