Merge pull request #326 from guardicore/feature/325-notification-when-done

[CR] Added a notification when infection is done

monkey/monkey_island/cc/ui/package.json

@@ -6,6 +6,7 @@
     "clean": "rimraf dist/*",
     "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
     "dist": "webpack --mode production",
+    "dev": "webpack --mode development",
     "lint": "eslint ./src",
     "posttest": "npm run lint",
     "release:major": "npm version major && npm publish && git push --follow-tags",
@@ -100,6 +101,7 @@
     "sass-loader": "^7.1.0",
     "sha3": "^2.0.0",
     "react-spinners": "^0.5.4",
-    "@emotion/core": "^10.0.10"
+    "@emotion/core": "^10.0.10",
+    "react-desktop-notification": "^1.0.9"
   }
 }

monkey/monkey_island/cc/ui/src/components/Main.js

@@ -14,6 +14,8 @@ import ReportPage from 'components/pages/ReportPage';
 import LicensePage from 'components/pages/LicensePage';
 import AuthComponent from 'components/AuthComponent';
 import LoginPageComponent from 'components/pages/LoginPage';
+import Notifier from "react-desktop-notification"
+
 
 import 'normalize.css/normalize.css';
 import 'react-data-components/css/table-twbs.css';
@@ -25,6 +27,7 @@ import VersionComponent from "./side-menu/VersionComponent";
 let logoImage = require('../images/monkey-icon.svg');
 let infectionMonkeyImage = require('../images/infection-monkey.svg');
 let guardicoreLogoImage = require('../images/guardicore-logo.png');
+let notificationIcon = require('../images/notification-logo-512x512.png');
 
 class AppComponent extends AuthComponent {
   updateStatus = () => {
@@ -50,6 +53,7 @@ class AppComponent extends AuthComponent {
               }
               if (isChanged) {
                 this.setState({completedSteps: res['completed_steps']});
+                this.showInfectionDoneNotification();
               }
             });
         }
@@ -194,6 +198,20 @@ class AppComponent extends AuthComponent {
       </Router>
     );
   }
+
+  showInfectionDoneNotification() {
+    if (this.state.completedSteps.infection_done) {
+      let hostname = window.location.hostname;
+      let url = `https://${hostname}:5000/report`;
+      console.log("Trying to show notification. URL: " + url + " | icon: " + notificationIcon);
+
+      Notifier.start(
+        "Monkey Island",
+        "Infection is done! Click here to go to the report page.",
+        url,
+        notificationIcon);
+    }
+  }
 }
 
 AppComponent.defaultProps = {};