From 785bc4f109a87a2a356a938cd28b48fa4b32ee87 Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Thu, 15 Aug 2019 10:17:38 +0300
Subject: [PATCH] Extracted the security issues glance component

---
 .../cc/ui/src/components/pages/ReportPage.js  | 16 +++-----------
 .../common/SecurityIssuesGlance.js            | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
index 4da1c0bac..12d51202d 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {Button, Col} from 'react-bootstrap';
 import BreachedServers from 'components/report-components/security/BreachedServers';
 import ScannedServers from 'components/report-components/security/ScannedServers';
@@ -16,11 +16,11 @@ import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeade
 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";
 
 let guardicoreLogoImage = require('../../images/guardicore-logo.png');
 
 
-
 class ReportPageComponent extends AuthComponent {
 
   Issue =
@@ -165,17 +165,7 @@ class ReportPageComponent extends AuthComponent {
         <h2>
           Overview
         </h2>
-        {
-          this.state.report.glance.exploited.length > 0 ?
-            (<p className="alert alert-danger">
-              <i className="glyphicon glyphicon-exclamation-sign" style={{'marginRight': '5px'}}/>
-              Critical security issues were detected!
-            </p>) :
-            (<p className="alert alert-success">
-              <i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
-              No critical security issues were detected.
-            </p>)
-        }
+        <SecurityIssuesGlance issuesFound={this.state.report.glance.exploited.length > 0}/>
         <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
         {
           this.state.report.glance.exploited.length > 0 ?
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js
new file mode 100644
index 000000000..f734a1a28
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js
@@ -0,0 +1,22 @@
+import React, {Component, Fragment} from "react";
+import * as PropTypes from "prop-types";
+
+export class SecurityIssuesGlance extends Component {
+  render() {
+    return <Fragment>
+      {
+        this.props.issuesFound ?
+          (<p className="alert alert-danger">
+            <i className="glyphicon glyphicon-exclamation-sign" style={{'marginRight': '5px'}}/>
+            Critical security issues were detected!
+          </p>) :
+          (<p className="alert alert-success">
+            <i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
+            No critical security issues were detected.
+          </p>)
+      }
+    </Fragment>
+  }
+}
+
+SecurityIssuesGlance.propTypes = {issuesFound: PropTypes.bool};