1) Injected angularjs dependencies

2) Implemented Pub/Sub Model
3) Implemented event list view in react

Signed-off-by: Neha Gupta <gnehapk@gmail.com>

Author: gnehapk

gulpfile.js

@@ -98,9 +98,10 @@ gulp.task("jsLibraries", function() {
         "node_modules/jquery/dist/jquery.min.js",
         "node_modules/bootstrap/dist/js/bootstrap.min.js", // For dropdown : temporary
         "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
+        "node_modules/angular/angular.js",
         "node_modules/react/umd/react.production.min.js",
         "node_modules/react-dom/umd/react-dom.production.min.js",
-        "node_modules/angular/angular.js",
+        "node_modules/ngreact/ngReact.min.js",
         "node_modules/angular-ui-bootstrap/dist/ui-bootstrap.min.js",
         "node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js",
         "node_modules/angular-sanitize/angular-sanitize.min.js",
@@ -115,7 +116,10 @@ gulp.task("jsLibraries", function() {
         "node_modules/angular-bootstrap-switch/dist/angular-bootstrap-switch.min.js",
         "node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js",
         "node_modules/datatables/media/js/jquery.dataTables.js",
-        "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js"
+        "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js",
+        "node_modules/q/q.js",
+        "node_modules/moment/min/moment.min.js",
+        "node_modules/react-datepicker/dist/react-datepicker.min.js"
     ])
     .pipe(uglify())
     .pipe(concat("libraries.js"))
@@ -128,7 +132,8 @@ gulp.task("cssLibraries", function() {
         "node_modules/patternfly/dist/css/patternfly.css",
         "node_modules/patternfly/dist/css/patternfly-additions.css",
         "node_modules/angular-patternfly/styles/angular-patternfly.css",
-        "node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"
+        "node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css",
+        "node_modules/react-datepicker/dist/react-datepicker.min.css"
     ])
     .pipe(postCss([autoprefixer({ browsers: browsers })]))
     .pipe(buildMode === "dev" ? noop() : minifyCSS())
@@ -215,8 +220,8 @@ gulp.task("resource", function(done) {
 gulp.task("jsbundle", ["eslint"], function() {
 
     return gulp.src(paths.jsFiles, { cwd: paths.src })
-        .pipe(babel({ presets: ["es2015"] }))
         .pipe(concat("plugin-bundle.js"))
+        .pipe(babel({ presets: ["es2015", "react"] }))
         .pipe(gulp.dest(paths.dest));
 });
 
@@ -256,7 +261,7 @@ gulp.task("watcher", ["browser-sync", "common"], function(done) {
 
     gulp.watch(filters.js, { cwd: paths.src }, function(event) {
         log("Modified:", colors.yellow(event.path));
-        runSequence("preload", "jsbundle");
+        runSequence("preload", "jsbundle", "transform");
     });
 
     gulp.watch([filters.css, filters.scss], { cwd: paths.src }, function(event) {

package.json

@@ -26,20 +26,24 @@
         "font-awesome": "^4.7.0",
         "idb-wrapper": "~1.7.1",
         "jquery": "~3.1.1",
+        "moment": "^2.22.1",
         "ngreact": "^0.5.1",
         "numeral": "~1.5.3",
         "patternfly": "~3.29.13",
         "patternfly-react": "^2.3.0",
         "react": "^16.3.2",
+        "react-datepicker": "^1.5.0",
         "react-dom": "^16.3.2",
         "redux": "^4.0.0"
     },
     "devDependencies": {
         "angular-mocks": "~1.5.8",
         "ansi-colors": "^1.1.0",
         "autoprefixer": "^7.1.3",
+        "babel-cli": "^6.26.0",
         "babel-core": "^6.26.3",
         "babel-preset-es2015": "^6.24.1",
+        "babel-preset-react": "^6.24.1",
         "babelify": "^8.0.0",
         "browser-sync": "^2.18.13",
         "browserify": "^16.2.0",

src/commons/js/index.js

@@ -11,7 +11,8 @@
         "patternfly.form",
         "patternfly.notification",
         "patternfly.table",
-        "patternfly.filters"
+        "patternfly.filters",
+        "react"
     ]);
 
     /* Setting up provider for getting config data */

src/commons/js/ng-react-ng-deps.js

@@ -4,17 +4,18 @@ export const ngDeps = {};
 
 export function injectNgDeps(deps) {
     Object.assign(ngDeps, deps);
+    window.ngDeps = ngDeps;
 };
 
 export default ngDeps;
 
 var storageModule = angular.module("TendrlModule");
 
 storageModule.run([
-    "$rootScope",
-    "$state",
-    "$q",
-    ($rootScope, $state, $q) => {
-        injectNgDeps({ $rootScope, $state, $q });
+    "$stateParams",
+    "utils",
+    "config",
+    ($stateParams, utils, config) => {
+        injectNgDeps({ $stateParams, utils, config });
     },
 ]);

src/commons/services/pub-sub.js

@@ -0,0 +1,42 @@
+const PubSubService = {
+    topics: {},
+    subscribe: function(topic, listener) {
+        var that = this;
+
+        // Create the topic's object if not yet created
+        if (!that.topics.hasOwnProperty.call(that.topics, topic)) {
+            that.topics[topic] = [];
+        }
+
+        // Add the listener to queue
+        var index = that.topics[topic].push(listener) - 1;
+
+        // Provide handle back for removal of topic
+        return {
+            remove: function() {
+                delete that.topics[topic][index];
+            }
+        };
+    },
+    publish: function(topic, info) {
+        var that = this;
+
+        // If the topic doesn't exist, or there's no listeners in queue, just leave
+        if (!that.topics.hasOwnProperty.call(that.topics, topic)) return;
+
+        // Cycle through topics queue, fire!
+        that.topics[topic].forEach(function(item) {
+            item(info != undefined ? info : {});
+        });
+    }
+};
+
+
+angular
+    .module("TendrlModule")
+    .service("pubSubService", pubSubService);
+
+/*@ngInject*/
+function pubSubService() {
+    return PubSubService;
+}

src/commons/services/vendor.js

@@ -0,0 +1,4 @@
+import React, { Component } from "react";
+import moment from "moment";
+import DatePicker from 'react-datepicker';
+require("ngreact");

src/commons/stores/events-store.js

@@ -1,15 +1,18 @@
-import React, { Component } from "react";
-import ngDeps from "../js/ng-react-ng-deps.js";
 
 const EventStore = {
+    showAlertIndication: false,
     getAlertList: function() {
         var list,
-            deferred;
+            deferred,
+            utils = window.ngDeps.utils,
+            that = this;
+
+        deferred = Q.defer();
 
-        deferred = $q.defer();
         utils.getAlertList()
             .then(function(data) {
-                $rootScope.showAlertIndication = false;
+
+                that.showAlertIndication = false;
                 list = data ? _formatAlertData(data) : [];
                 deferred.resolve(list);
             });
@@ -28,8 +31,8 @@ const EventStore = {
                 i;
 
             for (i = 0; i < len; i++) {
-                temp = {},
-                    temp.alertId = data[i].alert_id;
+                temp = {};
+                temp.alertId = data[i].alert_id;
                 temp.timeStamp = new Date(data[i].time_stamp);
                 temp.severity = severity[data[i].severity];
                 temp.nodeId = data[i].node_id;
@@ -39,8 +42,9 @@ const EventStore = {
                 temp.clusterName = data[i].tags.integration_id ? data[i].tags.integration_id : "";
                 temp.sdsName = data[i].tags.sds_name ? data[i].tags.sds_name : "";
 
-                if ((temp.severity === "error" || temp.severity === "warning") && !$rootScope.showAlertIndication) {
-                    $rootScope.showAlertIndication = true;
+                if ((temp.severity === "error" || temp.severity === "warning") && !that.showAlertIndication) {
+                    that.showAlertIndication = true;
+                    PubSubService.publish("alertIndicationChanged", that.showAlertIndication);
                 }
                 res.push(temp);
             }
@@ -49,9 +53,10 @@ const EventStore = {
     },
     getEventList: function(clusterId) {
         var list,
-            deferred;
+            deferred,
+            utils = window.ngDeps.utils;
 
-        deferred = $q.defer();
+        deferred = Q.defer();
         utils.getEventList(clusterId)
             .then(function(data) {
                 list = data ? _formatEventData(data) : [];
@@ -69,8 +74,8 @@ const EventStore = {
                 i;
 
             for (i = 0; i < len; i++) {
-                temp = {},
-                    temp.timeStamp = new Date(data[i].timestamp);
+                temp = {};
+                temp.timeStamp = moment(new Date(data[i].timestamp)).format('DD-MMM-YY HH:mm:ss');
                 temp.priority = data[i].priority;
                 temp.message = data[i].message;
                 temp.message_id = data[i].message_id;
@@ -81,13 +86,11 @@ const EventStore = {
     }
 };
 
-export default EventStore;
-
 angular
     .module("TendrlModule")
     .service("eventStore", eventStore);
 
 /*@ngInject*/
-function eventStore($state, $q, $rootScope, utils) {
+function eventStore() {
     return EventStore;
 }

src/modules/base/header/header.html

@@ -33,7 +33,7 @@
             <li class="dropdown">
                 <a data-toggle="dropdown" class="dropdown-toggle nav-item-iconic" href="" data-template="" data-animation="am-fade-and-slide-top" bs-dropdown="dropdown" title="Alerts" id="notifications" ng-click="header.setNotificationFlag()">
                     <i class="fa fa-bell"></i>
-                    <span ng-class="{'badge badge-pf-bordered':$root.showAlertIndication}"> </span>
+                    <span ng-class="{'badge badge-pf-bordered':header.showAlertIndication}"> </span>
                     <!-- in order to show the empty badge this requires a space, otherwise add a value -->
                 </a>
             </li>

src/modules/base/header/header.js

@@ -11,7 +11,7 @@
         });
 
     /*@ngInject*/
-    function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore) {
+    function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore, eventStore, pubSubService) {
 
         var vm = this,
             currentUser;
@@ -20,6 +20,7 @@
         vm.searchBy = {};
         vm.filterBy = "";
         vm.severity = "";
+        vm.showAlertIndication = eventStore.showAlertIndication;
 
         vm.notificationClose = notificationClose;
         vm.logout = logout;
@@ -47,6 +48,10 @@
             }
         });
 
+        var subscription = pubSubService.subscribe("alertIndicationChanged", function(flag) {
+           vm.showAlertIndication = flag;
+        });
+
         init();
 
         function init() {
@@ -84,7 +89,7 @@
             vm.showAlerts = false;
         }
 
-        function updateViewing (viewing, data) {
+        function updateViewing(viewing, data) {
             Notifications.setViewing(data, viewing);
         }