Integrated notification panel in header
diff --git a/views/ngXosViews/synchronizerNotifier/src/css/main.css b/views/ngXosViews/synchronizerNotifier/src/css/main.css
new file mode 100644
index 0000000..94e3701
--- /dev/null
+++ b/views/ngXosViews/synchronizerNotifier/src/css/main.css
@@ -0,0 +1,13 @@
+#xosSynchronizerNotifier {
+ float: left; }
+ #xosSynchronizerNotifier .alert {
+ margin-bottom: 0px !important; }
+ #xosSynchronizerNotifier .sync-status-container {
+ position: relative; }
+ #xosSynchronizerNotifier .notification-panel {
+ position: absolute;
+ width: 200px; }
+ #xosSynchronizerNotifier sync-status .badge.success {
+ background-color: #5cb85c; }
+ #xosSynchronizerNotifier sync-status .badge.danger {
+ background-color: #d9534f; }
diff --git a/views/ngXosViews/synchronizerNotifier/src/index.html b/views/ngXosViews/synchronizerNotifier/src/index.html
new file mode 100644
index 0000000..d8bc502
--- /dev/null
+++ b/views/ngXosViews/synchronizerNotifier/src/index.html
@@ -0,0 +1,34 @@
+<!-- browserSync -->
+<!-- bower:css -->
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
+<link rel="stylesheet" href="vendor/angular-chart.js/dist/angular-chart.css" />
+<!-- endbower -->
+<!-- endcss -->
+<!-- inject:css -->
+<link rel="stylesheet" href="/css/main.css">
+<link rel="stylesheet" href="/../../../xos/core/static/xosNgLib.css">
+<!-- endinject -->
+
+<div id="xosSynchronizerNotifier">
+ <sync-status></sync-status>
+</div>
+
+<!-- bower:js -->
+<script src="vendor/jquery/dist/jquery.js"></script>
+<script src="vendor/angular/angular.js"></script>
+<script src="vendor/angular-mocks/angular-mocks.js"></script>
+<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
+<script src="vendor/angular-cookies/angular-cookies.js"></script>
+<script src="vendor/angular-animate/angular-animate.js"></script>
+<script src="vendor/angular-resource/angular-resource.js"></script>
+<script src="vendor/lodash/lodash.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
+<script src="vendor/Chart.js/Chart.js"></script>
+<script src="vendor/angular-chart.js/dist/angular-chart.js"></script>
+<script src="vendor/d3/d3.js"></script>
+<!-- endbower -->
+<!-- endjs -->
+<!-- inject:js -->
+<script src="/../../../xos/core/xoslib/static/js/vendor/ngXosHelpers.js"></script>
+<script src="/.tmp/main.js"></script>
+<!-- endinject -->
\ No newline at end of file
diff --git a/views/ngXosViews/synchronizerNotifier/src/js/main.js b/views/ngXosViews/synchronizerNotifier/src/js/main.js
new file mode 100644
index 0000000..93b8191
--- /dev/null
+++ b/views/ngXosViews/synchronizerNotifier/src/js/main.js
@@ -0,0 +1,128 @@
+'use strict';
+
+angular.module('xos.synchronizerNotifier', [
+ 'ngResource',
+ 'ngCookies',
+ 'ui.router',
+ 'xos.helpers'
+])
+.config(function($provide) {
+ $provide.decorator('$rootScope', function($delegate) {
+ var Scope = $delegate.constructor;
+ // var origBroadcast = Scope.prototype.$broadcast;
+ // var origEmit = Scope.prototype.$emit;
+ var origOn = Scope.prototype.$on;
+
+ // Scope.prototype.$broadcast = function() {
+ // // console.log("$broadcast was called on $scope " + $scope.$id + " with arguments:", arguments);
+ // return origBroadcast.apply(this, arguments);
+ // };
+ // Scope.prototype.$emit = function() {
+ // // console.log("$emit was called on $scope " + $scope.$id + " with arguments:", arguments);
+ // return origEmit.apply(this, arguments);
+ // };
+
+ Scope.prototype.$on = function(){
+ // console.log('$on', arguments, arguments[1].toString());
+ return origOn.apply(this, arguments);
+ }
+ return $delegate;
+ });
+})
+.service('Diag', function($rootScope, $http, $q, $interval){
+
+ let isRunning = false;
+
+ this.getDiags = () => {
+ let d = $q.defer();
+ $http.get('/api/core/diags')
+ .then(res => {
+ d.resolve(res.data);
+ })
+ .catch(err => {
+ d.reject(err);
+ });
+
+ return d.promise;
+ };
+
+ this.sendEvents = (diags) => {
+ diags.forEach(d => {
+ let status = JSON.parse(d.backend_register);
+ status.last_run = new Date(status.last_run * 1000);
+ $rootScope.$broadcast(`diag`, {
+ name: d.name,
+ updated: d.updated,
+ info: status,
+ status: this.getSyncStatus(status)
+ });
+ });
+ };
+
+ this.start = () => {
+ isRunning = true;
+ this.getDiags()
+ .then(diags => {
+ this.sendEvents(diags);
+ });
+ return isRunning;
+ };
+
+ this.stop = () => {
+ isRunning = false;
+ return isRunning;
+ };
+
+ this.getSyncStatus = (status) => {
+
+ let gap = 5 * 60 * 1000; /* ms */
+ // let gap = 2;
+
+ if (((new Date()) - status.last_run) > gap){
+ return false;
+ }
+ return true;
+ }
+
+ $interval(() => {
+ if(isRunning){
+ this.getDiags()
+ .then(diags => {
+ this.sendEvents(diags);
+ });
+ }
+ }, 25000);
+})
+.run(function($log){
+ $log.info('Listening for Syncronizers Events!');
+})
+.directive('syncStatus', function() {
+ return {
+ restrict: 'E',
+ scope: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/sync-status.tpl.html',
+ controller: function($log, $rootScope, Diag){
+ Diag.start();
+ // this.showNotificationPanel = true;
+ this.synchronizers = {};
+
+ this.showNoSync = true;
+
+ $rootScope.$on('diag', (e, d) => {
+ // $log.info('Received event: ', d);
+ this.synchronizers[d.name] = d;
+ this.showNoSync = false;
+ if(Object.keys(this.synchronizers).length === 0){
+ this.showNoSync = true;
+ }
+ });
+
+ }
+ }
+});
+
+angular.element(document).ready(function() {
+ angular.bootstrap('#xosSynchronizerNotifier', ['xos.synchronizerNotifier']);
+});
\ No newline at end of file
diff --git a/views/ngXosViews/synchronizerNotifier/src/sass/main.scss b/views/ngXosViews/synchronizerNotifier/src/sass/main.scss
new file mode 100644
index 0000000..1f39483
--- /dev/null
+++ b/views/ngXosViews/synchronizerNotifier/src/sass/main.scss
@@ -0,0 +1,31 @@
+@import '../../../../style/sass/lib/_variables.scss';
+
+#xosSynchronizerNotifier {
+
+ float: left;
+
+ .alert {
+ margin-bottom: 0px !important;
+ }
+
+ .sync-status-container {
+ position: relative;
+ }
+
+ .notification-panel {
+ position: absolute;
+ width: 200px;
+ }
+
+ sync-status {
+ .badge {
+ &.success {
+ background-color: $brand-success;
+ }
+
+ &.danger {
+ background-color: $brand-danger;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/views/ngXosViews/synchronizerNotifier/src/templates/sync-status.tpl.html b/views/ngXosViews/synchronizerNotifier/src/templates/sync-status.tpl.html
new file mode 100644
index 0000000..58524e7
--- /dev/null
+++ b/views/ngXosViews/synchronizerNotifier/src/templates/sync-status.tpl.html
@@ -0,0 +1,21 @@
+<div class="sync-status-container">
+ <div class="btn btn-default" ng-click="vm.showNotificationPanel = !vm.showNotificationPanel">
+ <i class="glyphicon glyphicon-inbox"></i>
+ </div>
+ <div class="notification-panel panel panel-default" ng-show="vm.showNotificationPanel">
+ <ul class="list-group" ng-show="vm.showNoSync">
+ <li class="list-group-item" ng-repeat="(syncName, syncStatus) in vm.synchronizers">
+ <span class="badge" ng-class="{success: syncStatus.status, danger: !syncStatus.status}">
+ <span ng-show="syncStatus.status"><i class="glyphicon glyphicon-ok"></i></span>
+ <span ng-hide="syncStatus.status"><i class="glyphicon glyphicon-remove"></i></span>
+ </span>
+ <b>{{syncName}}</b>
+ <br/>
+ <small><i>{{syncStatus.info.last_run | date:'mediumTime'}}</i></small>
+ </li>
+ </ul>
+ <div class="alert alert-info" ng-show="vm.showNoSync">
+ No syncronizers are running.
+ </div>
+ </div>
+</div>