x/bansho
Code Issues Proposed changes

Modularize tactical view

Browse Source
This commit is contained in:
Thibault Cohen 2014-12-17 15:35:33 -05:00
parent 83be170928
commit f26cf41c9e
18 changed files with 213 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/components/ng-justgage/ng-justgage.js Normal file
View File

@ -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);
});
}
};
}]);

28
app/index.html
View File

@ -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 -->>
<script src="sidebar/sidebar.js"></script>
<link rel="stylesheet" href="sidebar/sidebar.css">
<!-- Navbar -->
<script src="navbar/navbar.js"></script>
<link rel="stylesheet" href="navbar/navbar.css">
<script src="tactical/tactical.js"></script>
<!-- Sidebar -->>
<script src="sidebar/sidebar.js"></script>
<link rel="stylesheet" href="sidebar/sidebar.css">
<!-- Navbar -->
<script src="navbar/navbar.js"></script>
<link rel="stylesheet" href="navbar/navbar.css">
<!-- 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>

17
app/tactical/current_health/current_health.html Normal file
View File

@ -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>

18
app/tactical/current_health/current_health.js Normal file
View File

@ -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"
};
});

39
app/tactical/status_overview/status_overview.html Normal file
View File

@ -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>

19
app/tactical/status_overview/status_overview.js Normal file
View File

@ -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"
};
});

17
app/tactical/tactical-controller.js
View File

@ -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);
});
}
*/
}]);

12
app/tactical/tactical.html
View File

@ -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>

34
app/tactical/tactical.js
View File

@ -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) {
}]);
tactical_app.config(['$routeProvider', function($routeProvider) {
.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);
});
}
*/
}]);
}])

22
app/tactical/top_alert_producers/top_alert_producers.html Normal file
View File

@ -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>

17
app/tactical/top_alert_producers/top_alert_producers.js Normal file
View File

@ -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"
};
});

1
app/view1/view1.html
View File

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

14
app/view1/view1.js
View File

@ -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() {
}]);

16
app/view1/view1_test.js
View File

@ -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();
}));
});
});

5
app/view2/view2.html
View File

@ -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>

14
app/view2/view2.js
View File

@ -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() {
}]);

16
app/view2/view2_test.js
View File

@ -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();
}));
});
});

3
bower.json
View File

@ -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"
}
}