Modularize tactical view

app/components/ng-justgage/ng-justgage.js

@@ -0,0 +1,45 @@
+angular.module("ngJustGage", [])
+  .directive('justGage', ['$timeout', function ($timeout) {
+    return {
+      restrict: 'EA',
+      scope: {
+        id: '@',
+        class: '@',
+        min: '=',
+        max: '=',
+        title: '@',
+        value: '=',
+        options: '='
+      },
+      template: '<div id="{{id}}-justgage" class="{{class}}"></div>',
+      link: function (scope,element,attrs) {
+        $timeout(function () {
+          var options = {
+            id: scope.id + '-justgage',
+            min: scope.min,
+            max: scope.max,
+            title: scope.title,
+            value: scope.value
+          }
+          if ( scope.options ) {
+              for (var key in scope.options) {
+                  options[key]=scope.options[key];
+              }
+          }
+          var graph = new JustGage(options);
+
+          scope.$watch('max', function (updatedMax) {
+            if (updatedMax !== undefined) {
+              graph.refresh(scope.value, updatedMax);
+            }
+          }, true);
+
+          scope.$watch('value', function (updatedValue) {
+            if (updatedValue !== undefined) {
+              graph.refresh(updatedValue);
+            }
+          }, true);
+        });
+      }
+    };
+  }]);

app/index.html

@@ -21,17 +21,29 @@
 
   <!-- Application -->
   <script src="app.js"></script>
-  <script src="components/live/notifications.js"></script>
+    <!-- COMPONENTS -->
+    <script src="components/live/notifications.js"></script>
+    <script src="components/ng-justgage/ng-justgage.js"></script>
   <!-- MODULES -->
-  <!-- Sidebar -->>
+    <!-- Sidebar -->>
-  <script src="sidebar/sidebar.js"></script>
+    <script src="sidebar/sidebar.js"></script>
-  <link rel="stylesheet" href="sidebar/sidebar.css">
+    <link rel="stylesheet" href="sidebar/sidebar.css">
-  <!-- Navbar -->
+    <!-- Navbar -->
-  <script src="navbar/navbar.js"></script>
+    <script src="navbar/navbar.js"></script>
-  <link rel="stylesheet" href="navbar/navbar.css">
+    <link rel="stylesheet" href="navbar/navbar.css">
-  <script src="tactical/tactical.js"></script>
+    <!-- Tactical -->
+    <script src="tactical/tactical.js"></script>
+    <link rel="stylesheet" href="tactical/tactical.css">
+      <!-- Status Overview -->
+      <script src="tactical/status_overview/status_overview.js"></script>
+      <!-- CurrentHealth -->
+      <script src="tactical/current_health/current_health.js"></script>
+      <!-- TopAlertProducers -->
+      <script src="tactical/top_alert_producers/top_alert_producers.js"></script>
 
   <script src="bower_components/jquery/dist/jquery.min.js"></script>
+  <script src="bower_components/raphael/raphael-min.js"></script>
+  <script src="bower_components/justgage-toorshia/justgage.js"></script>
   <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
   <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
 </head>

app/tactical/current_health/current_health.html

@@ -0,0 +1,17 @@
+<div ng-app="adagios.tactical.current_health" ng-controller="TacticalCurrentHealth" class="row">
+  <table>
+    <thead>
+      <tr>
+        <th>
+          Current Health
+        </th>
+      </tr>
+    </thead>
+  </table>
+  <div class="col-md-6">
+    <just-gage id="allservices" class="someClass" min=0 max=100 value=services title="ALL SERVICES"></just-gage>
+  </div>
+  <div class="col-md-6">
+    <just-gage id="allhosts" class="someClass" min=0 max=100 value=hosts title="ALL HOSTS"></just-gage>
+  </div>
+</div>

app/tactical/current_health/current_health.js

@@ -0,0 +1,18 @@
+
+angular.module('adagios.tactical.current_health', ['ngRoute',
+                                                   'ngJustGage'
+                                    ])
+.controller('TacticalCurrentHealth', ['$scope', '$http',
+        function($scope, $http) {
+            $scope.hosts =  75.2;
+            $scope.services = 94.4;
+    }])
+
+.directive('currenthealth', function() {
+  return {
+    restrict: 'E',
+    templateUrl: "tactical/current_health/current_health.html"
+  };
+});
+
+

app/tactical/status_overview/status_overview.html

@@ -0,0 +1,39 @@
+<table ng-app="adagios.tactical.status_overview" ng-controller="TacticalStatusOverViewCtrl"  class="table">
+  <thead>
+    <tr>
+      <th>
+        Status overview
+      </th>
+      <th>
+          #
+      </th>
+      <th>
+          <i class="fa fa-bell"></i>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+          HOSTS
+      </td>
+      <td>
+          {{ hosts.count }}
+      </td>
+      <td class="alerts">
+          {{ hosts.problems }}
+      </td>
+    </tr>  
+    <tr>
+      <td>
+          SERVICES
+      </td>
+      <td>
+          {{ services.count }}
+      </td>
+      <td class="alerts">
+          {{ services.problems }}
+      </td>
+    </tr>
+  </tbody>
+</table>

app/tactical/status_overview/status_overview.js

@@ -0,0 +1,19 @@
+
+angular.module('adagios.tactical.status_overview', ['ngRoute'
+                                    ])
+.controller('TacticalStatusOverViewCtrl', ['$scope', '$http',
+        function($scope, $http) {
+            $scope.hosts = {"count": 104,
+                            "problems": 14};
+            $scope.services = {"count": 1126,
+                               "problems": 42};
+    }])
+
+.directive('statusoverview', function() {
+  return {
+    restrict: 'E',
+    templateUrl: "tactical/status_overview/status_overview.html"
+  };
+});
+
+

app/tactical/tactical-controller.js

@@ -1,17 +0,0 @@
-
-tactical_app.controller('TacticalCtrl', ['$scope', '$http',
-        function($scope, $http) {
-            $scope.toto = "pl";
-
-/*            $http.get('/core/config').success(function(data) {
-                $scope.config = data;
-            });
-
-
-        $scope.save = function(config) {
-            $http.post('/core/config', config).success(function(data) {
-                messageCenterService.add(data.state, data.message);
-            });
-        }
-*/
-    }]);

app/tactical/tactical.html

@@ -1,25 +1,19 @@
-<link rel="stylesheet" href="tactical/tactical.css">
-
-
-
-
 <div ng-app="adagios.tactical" ng-controller="TacticalCtrl" id="tactical" class="container-fluid">
 
 
     <h2>Tactical Overview</h2>
-    {{ toto }}
 
     <div id="summary" class="jumbotron">
 
       <div class="row">
         <div class="col-md-4">
-          div ng-include src="'partials/pages/tactical/summary/status_overview.html'"/div
+          <statusoverview></statusoverview>
         </div>
         <div class="col-md-4">
-          div ng-include src="'partials/pages/tactical/summary/current_health.html'"/div
+          <currenthealth></currenthealth>
         </div>
         <div class="col-md-4">
-          div ng-include src="'partials/pages/tactical/summary/top_alert_producers.html'"/div
+          <topalertproducers></topalertproducers>
         </div>
       </div>
 

app/tactical/tactical.js

@@ -1,29 +1,17 @@
 
-var tactical_app = angular.module('adagios.tactical', ['ngRoute'
+angular.module('adagios.tactical', ['ngRoute',
-                                    ]);
+                                    'adagios.tactical.status_overview',
+                                    'adagios.tactical.current_health',
+                                    'adagios.tactical.top_alert_producers'
+                                    ])
 
-tactical_app.config(['$routeProvider', function($routeProvider) {
+.config(['$routeProvider', function($routeProvider) {
-        }]);
-
-
-tactical_app.config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/tactical', {templateUrl: 'tactical/tactical.html', controller: 'TacticalCtrl'});
-}]);
+}])
 
-tactical_app.controller('TacticalCtrl', ['$scope', '$http',
+
+
+.controller('TacticalCtrl', ['$scope', '$http',
         function($scope, $http) {
-            $scope.toto = "pl";
+    }])
-
-/*            $http.get('/core/config').success(function(data) {
-                $scope.config = data;
-            });
-
-
-        $scope.save = function(config) {
-            $http.post('/core/config', config).success(function(data) {
-                messageCenterService.add(data.state, data.message);
-            });
-        }
-*/
-    }]);
 

app/tactical/top_alert_producers/top_alert_producers.html

@@ -0,0 +1,22 @@
+<table ng-app="adagios.tactical.top_alert_producers" ng-controller="TacticalTopAlertProducers" class="table">
+  <thead>
+    <tr>
+      <th>
+        Top Alert Producers
+      </th>
+      <th>
+          <i class="fa fa-bell"></i>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr ng-repeat="host in hosts">
+      <td>
+          {{ host.host_name }}
+      </td>
+      <td>
+          {{ host.problems }}
+      </td>
+    </tr>  
+  </tbody>
+</table>

app/tactical/top_alert_producers/top_alert_producers.js

@@ -0,0 +1,17 @@
+
+angular.module('adagios.tactical.top_alert_producers', ['ngRoute'
+                                    ])
+.controller('TacticalTopAlertProducers', ['$scope', '$http',
+        function($scope, $http) {
+            $scope.hosts = [{"host_name": "server-01", "problems": 10},
+                            {"host_name": "server-02", "problems": 5},]
+    }])
+
+.directive('topalertproducers', function() {
+  return {
+    restrict: 'E',
+    templateUrl: "tactical/top_alert_producers/top_alert_producers.html"
+  };
+});
+
+

app/view1/view1.html

@@ -1 +0,0 @@
-<p>This is the partial for view 1.</p>

app/view1/view1.js

@@ -1,14 +0,0 @@
-'use strict';
-
-angular.module('myApp.view1', ['ngRoute'])
-
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view1', {
-    templateUrl: 'view1/view1.html',
-    controller: 'View1Ctrl'
-  });
-}])
-
-.controller('View1Ctrl', [function() {
-
-}]);

app/view1/view1_test.js

@@ -1,16 +0,0 @@
-'use strict';
-
-describe('myApp.view1 module', function() {
-
-  beforeEach(module('myApp.view1'));
-
-  describe('view1 controller', function(){
-
-    it('should ....', inject(function($controller) {
-      //spec body
-      var view1Ctrl = $controller('View1Ctrl');
-      expect(view1Ctrl).toBeDefined();
-    }));
-
-  });
-});

app/view2/view2.html

@@ -1,5 +0,0 @@
-<p>This is the partial for view 2.</p>
-<p>
-  Showing of 'interpolate' filter:
-  {{ 'Current version is v%VERSION%.' | interpolate }}
-</p>

app/view2/view2.js

@@ -1,14 +0,0 @@
-'use strict';
-
-angular.module('myApp.view2', ['ngRoute'])
-
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view2', {
-    templateUrl: 'view2/view2.html',
-    controller: 'View2Ctrl'
-  });
-}])
-
-.controller('View2Ctrl', [function() {
-
-}]);

app/view2/view2_test.js

@@ -1,16 +0,0 @@
-'use strict';
-
-describe('myApp.view2 module', function() {
-
-  beforeEach(module('myApp.view2'));
-
-  describe('view2 controller', function(){
-
-    it('should ....', inject(function($controller) {
-      //spec body
-      var view2Ctrl = $controller('View2Ctrl');
-      expect(view2Ctrl).toBeDefined();
-    }));
-
-  });
-});

bower.json

@@ -12,6 +12,7 @@
     "angular-mocks": "~1.2.x",
     "html5-boilerplate": "~4.3.0",
     "bootstrap-sass-official": "3.3.1",
-    "fontawesome": "4.2.0"
+    "fontawesome": "4.2.0",
+    "justgage-toorshia" : "master"
   }
 }