Merge "Refactoring of single table and generic actionbar"
This commit is contained in:
Jenkins
Gerrit Code Review
commit
8f877fdcc2
@ -67,14 +67,8 @@ angular.module('bansho.config', [])
|
||||
return developmentConfig;
|
||||
};
|
||||
|
||||
this.loadByTemplate = function (templateName, destination) {
|
||||
var viewsConfig = config.data;
|
||||
|
||||
angular.forEach(viewsConfig, function (conf, view) {
|
||||
if (conf.template === templateName) {
|
||||
destination[view] = conf;
|
||||
}
|
||||
});
|
||||
this.getConfigData = function (templateName) {
|
||||
return config.data[templateName];
|
||||
};
|
||||
|
||||
this.readConfig = function () {
|
||||
|
||||
@ -7,6 +7,27 @@
|
||||
"refreshInterval": 30,
|
||||
"template": "dashboard",
|
||||
"components": [
|
||||
{
|
||||
"type": "actionbar",
|
||||
"config": {
|
||||
"components": [
|
||||
"filter",
|
||||
"acknowledge",
|
||||
"downtime",
|
||||
"recheck",
|
||||
"more",
|
||||
"search-filter"
|
||||
],
|
||||
"tableId": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"extra_components": [
|
||||
{
|
||||
"type": "tactical",
|
||||
"config": {
|
||||
@ -188,12 +209,27 @@
|
||||
"liveHosts": {
|
||||
"title": "Hosts",
|
||||
"refreshInterval": 30,
|
||||
"template": "single_table",
|
||||
"template": "tables",
|
||||
"components": [
|
||||
{
|
||||
"type": "actionbar",
|
||||
"config": {
|
||||
"components": [
|
||||
"filter",
|
||||
"acknowledge",
|
||||
"downtime",
|
||||
"recheck",
|
||||
"more",
|
||||
"search-filter"
|
||||
],
|
||||
"tableId": [0]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "table",
|
||||
"config": {
|
||||
"title": "Hosts",
|
||||
"tableId": 0,
|
||||
"cells": {
|
||||
"text": [
|
||||
"Host",
|
||||
@ -229,12 +265,27 @@
|
||||
"liveServices": {
|
||||
"title": "Services",
|
||||
"refreshInterval": 30,
|
||||
"template": "single_table",
|
||||
"template": "tables",
|
||||
"components": [
|
||||
{
|
||||
"type": "actionbar",
|
||||
"config": {
|
||||
"components": [
|
||||
"filter",
|
||||
"acknowledge",
|
||||
"downtime",
|
||||
"recheck",
|
||||
"more",
|
||||
"search-filter"
|
||||
],
|
||||
"tableId": [0]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "table",
|
||||
"config": {
|
||||
"title": "Services",
|
||||
"tableId": 0,
|
||||
"cells": {
|
||||
"text": [
|
||||
"Host",
|
||||
@ -249,7 +300,6 @@
|
||||
"status_last_check"
|
||||
]
|
||||
},
|
||||
"headerFollow": true,
|
||||
"inputSource": {
|
||||
"service": "surveilStatus",
|
||||
"config": {
|
||||
@ -259,9 +309,9 @@
|
||||
},
|
||||
"isWrappable": false,
|
||||
"noRepeatCell": "host",
|
||||
"checkColumn": true,
|
||||
"containsActionBar": true
|
||||
|
||||
"headerFollow": true,
|
||||
"containsActionBar": true,
|
||||
"checkColumn": true
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -269,12 +319,24 @@
|
||||
"liveEvents": {
|
||||
"title": "Events",
|
||||
"refreshInterval": 30,
|
||||
"template": "single_table",
|
||||
"template": "tables",
|
||||
"components": [
|
||||
{
|
||||
"type": "actionbar",
|
||||
"config": {
|
||||
"components": [
|
||||
"filter",
|
||||
"more",
|
||||
"search-filter"
|
||||
],
|
||||
"tableId": [0]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "table",
|
||||
"config": {
|
||||
"title": "Hosts",
|
||||
"tableId": 0,
|
||||
"cells": {
|
||||
"text": [
|
||||
"Event type",
|
||||
|
||||
@ -1,90 +1,4 @@
|
||||
<menu class="filters">
|
||||
<ul class="filters__list clearfix">
|
||||
<li class="filters__item filters__item--problems">
|
||||
<button class="filters__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#filtersProblems"
|
||||
aria-expanded="false"
|
||||
aria-controls="filtersProblems">
|
||||
<span>{{activeFilter.text}}</span>
|
||||
<i class="ico-down-dir"></i>
|
||||
</button>
|
||||
|
||||
<div class="filters__panel collapse" id="filtersProblems">
|
||||
<ul class="filters__sublist">
|
||||
<li class="filters__subitem" ng-repeat="actionbarFilter in actionbarFilters" ng-click="activateFilter($index)">
|
||||
<a class="filters__link state--current" ng-if="actionbarFilter === activeFilter">{{actionbarFilter.text}}</a>
|
||||
<a class="filters__link" ng-if="actionbarFilter !== activeFilter">{{actionbarFilter.text}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="filters__item filters__item--recheck">
|
||||
<bansho-recheck-button table-id="tableId"></bansho-recheck-button>
|
||||
</li>
|
||||
<li class="filters__item filters__item--acknowledge" data-mover="true">
|
||||
<button class="filters__button" type="button" ng-click="switchAcknowledgeForm()">
|
||||
<span class="visuallyhidden">Acknowledge</span>
|
||||
<i class="ico-thumbs-up"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="filters__item filters__item--downtime" data-mover="true">
|
||||
<button class="filters__button" type="button" ng-click="switchDowntimeForm()">
|
||||
<span class="visuallyhidden">Downtime</span>
|
||||
<i class="ico-clock"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="filters__item filters__item--more clearfix">
|
||||
<button class="filters__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#filtersMore"
|
||||
aria-expanded="false"
|
||||
aria-controls="filtersMore">
|
||||
<span>More</span>
|
||||
<i class="ico-down-dir"></i>
|
||||
</button>
|
||||
|
||||
<div class="filters__panel collapse" id="filtersMore">
|
||||
<ul class="filters__sublist">
|
||||
<li class="filters__subitem">
|
||||
<a class="filters__link" href="#">More I</a>
|
||||
</li>
|
||||
<li class="filters__subitem">
|
||||
<a class="filters__link" href="#">More II</a>
|
||||
</li>
|
||||
<li class="filters__subitem">
|
||||
<a class="filters__link" href="#">More III</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="filters__item clearfix">
|
||||
<input id="filter__search" type="search" placeholder="Filter hosts, services, ..." ng-model="searchFilter" data-ng-change="searchFilterChange()"/>
|
||||
</li>
|
||||
<li class="filters__item filters__item--settings">
|
||||
<button class="filters__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#filtersSettings"
|
||||
aria-expanded="false"
|
||||
aria-controls="filtersSettings">
|
||||
<span class="visuallyhidden">Filters Settings</span>
|
||||
<i class="ico-cog"></i>
|
||||
</button>
|
||||
|
||||
<div class="filters__panel collapse" id="filtersSettings">
|
||||
<ul class="filters__sublist">
|
||||
<li>...</li>
|
||||
<li>...</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<bansho-acknowledge-form ng-show="isAcknowledgeShown" is-shown="isAcknowledgeShown" table-id="tableId"> </bansho-acknowledge-form>
|
||||
|
||||
<bansho-downtime-form ng-show="isDowntimeShown" is-shown="isDowntimeShown" table-id="tableId"> </bansho-downtime-form>
|
||||
</menu>
|
||||
|
||||
@ -1,57 +1,25 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar', ['bansho.table', 'bansho.surveil', 'bansho.notifications'])
|
||||
.directive('banshoTableActionbar', function () {
|
||||
.directive('banshoActionbar', ['$compile', function ($compile) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
tableId: '='
|
||||
},
|
||||
controller: ['$scope', 'tables', function ($scope, tables) {
|
||||
$scope.isDowntimeShown = false;
|
||||
$scope.isAcknowledgeShown = false;
|
||||
templateUrl: 'components/table/actionbar/actionbar.html',
|
||||
compile: function () {
|
||||
return function (scope, element, attrs) {
|
||||
scope.components = attrs.components.split(',');
|
||||
if (angular.isArray(scope.components)) {
|
||||
angular.forEach(scope.components, function (component) {
|
||||
var banshoDirective = "<bansho-actionbar-" + component + " table-id='[" + scope.tableId + "]'" + "/>";
|
||||
|
||||
$scope.switchDowntimeForm = function () {
|
||||
$scope.isAcknowledgeShown = false;
|
||||
$scope.isDowntimeShown = !$scope.isDowntimeShown;
|
||||
element.append(banshoDirective);
|
||||
$compile(element.contents())(scope);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.switchAcknowledgeForm = function () {
|
||||
$scope.isDowntimeShown = false;
|
||||
$scope.isAcknowledgeShown = !$scope.isAcknowledgeShown;
|
||||
};
|
||||
|
||||
$scope.actionbarFilters = [{
|
||||
text: "All",
|
||||
name: "all"
|
||||
},
|
||||
{
|
||||
text: "All OK",
|
||||
name: "all_ok"
|
||||
},
|
||||
{
|
||||
text: "All Acknowledged",
|
||||
name: "all_acknowledged"
|
||||
},
|
||||
{
|
||||
text: "All in Downtime",
|
||||
name: "all_downtime"
|
||||
}];
|
||||
|
||||
$scope.activeFilter = $scope.actionbarFilters[0];
|
||||
$scope.activateFilter = function (item) {
|
||||
$scope.activeFilter = $scope.actionbarFilters[item];
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
console.log("not yet implemented");
|
||||
});
|
||||
};
|
||||
|
||||
$scope.searchFilterChange = function () {
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
tables.setSearchFilter(tableId, $scope.searchFilter);
|
||||
});
|
||||
};
|
||||
}],
|
||||
templateUrl: 'components/table/actionbar/actionbar.html'
|
||||
}
|
||||
};
|
||||
});
|
||||
}]);
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<h4 id="acknowledgeModalLabel">Acknowlege</h4>
|
||||
<form data-ng-submit="acknowledgeProblems()">
|
||||
<div>
|
||||
<label for="author">Author :</label>
|
||||
<input type="text" id="acknowledge-author" ng-model="attrs.author">
|
||||
</div>
|
||||
<div>
|
||||
<label for="sticky">Sticky :</label>
|
||||
<input type="checkbox"
|
||||
id="acknowledge-sticky"
|
||||
ng-model="attrs.sticky"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0">
|
||||
</div>
|
||||
<div>
|
||||
<label for="notify">Notify :</label>
|
||||
<input type="checkbox"
|
||||
id="acknowledge-notify"
|
||||
ng-model="attrs.notify"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0">
|
||||
</div >
|
||||
<div>
|
||||
<label for="persistent">Persistent :</label>
|
||||
<input type="checkbox"
|
||||
id="acknowledge-persistent"
|
||||
ng-model="attrs.persistent"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0">
|
||||
</div>
|
||||
<div>
|
||||
<label for="comment">Comment :</label>
|
||||
<input type="message-text" id="acknowledge-comment" ng-model="attrs.comment">
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" ng-click="isShown = !isShown">Close</button>
|
||||
<button type="button" ng-click="acknowledgeProblems()">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -1,27 +0,0 @@
|
||||
<h4>Downtime</h4>
|
||||
<form ng-submit="sendDowntime()">
|
||||
<div>
|
||||
<label for="author">Author :</label>
|
||||
<input type="text" id="author" ng-model="attrs.author">
|
||||
</div>
|
||||
<div>
|
||||
<label for="comment">Comment :</label>
|
||||
<input type="message-text" id="comment" ng-model="attrs.comment">
|
||||
</div>
|
||||
<div>
|
||||
<label for="duration">Duration :</label>
|
||||
<input type="number" id="duration" ng-model="attrs.duration">
|
||||
</div>
|
||||
<div>
|
||||
<label for="start_time">Start time :</label>
|
||||
<input type="number" id="start_time" ng-model="attrs.start_time">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end_time">End time :</label>
|
||||
<input type="number" id="end_time" ng-model="attrs.end_time">
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" ng-click="isShown = !isShown">Close</button>
|
||||
<button type="submit">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -1,4 +0,0 @@
|
||||
<button class="filters__button" type="button" ng-click="sendRecheck()">
|
||||
<span class="visuallyhidden">Recheck</span>
|
||||
<i class="ico-arrows-cw"></i>
|
||||
</button>
|
||||
@ -0,0 +1,48 @@
|
||||
<li class="filters__item filters__item--acknowledge" data-mover="true">
|
||||
<button class="filters__button" type="button" ng-click="switchAcknowledgeFormShown()">
|
||||
<span class="visuallyhidden">Acknowledge</span>
|
||||
<i class="ico-thumbs-up"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<div ng-show="isAcknowledgeFormShown">
|
||||
<h4 id="acknowledgeModalLabel">Acknowlege</h4>
|
||||
<form>
|
||||
<div>
|
||||
<label for="author">Author :</label>
|
||||
<input type="text" id="acknowledge-author" ng-model="attrs.author">
|
||||
</div>
|
||||
<div>
|
||||
<label for="sticky">Sticky :</label>
|
||||
<input type="checkbox"
|
||||
id="acknowledge-sticky"
|
||||
ng-model="attrs.sticky"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0">
|
||||
</div>
|
||||
<div>
|
||||
<label for="notify">Notify :</label>
|
||||
<input type="checkbox"
|
||||
id="acknowledge-notify"
|
||||
ng-model="attrs.notify"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0">
|
||||
</div >
|
||||
<div>
|
||||
<label for="persistent">Persistent :</label>
|
||||
<input type="checkbox"
|
||||
id="acknowledge-persistent"
|
||||
ng-model="attrs.persistent"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0">
|
||||
</div>
|
||||
<div>
|
||||
<label for="comment">Comment :</label>
|
||||
<input type="message-text" id="acknowledge-comment" ng-model="attrs.comment">
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" ng-click="switchAcknowledgeFormShown()">Close</button>
|
||||
<button type="button" ng-click="acknowledgeProblems()">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -0,0 +1,45 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar')
|
||||
.directive('banshoActionbarAcknowledge', [function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'components/table/actionbar/component_acknowledge/acknowledge.html',
|
||||
scope: {
|
||||
tableId: '='
|
||||
},
|
||||
controller: ['$scope', 'tables', 'surveilActions', 'notifications',
|
||||
function ($scope, tables, surveilActions, notifications) {
|
||||
$scope.isAcknowledgeFormShown = false;
|
||||
$scope.switchAcknowledgeFormShown = function () {
|
||||
$scope.isAcknowledgeFormShown = !$scope.isAcknowledgeFormShown;
|
||||
};
|
||||
|
||||
$scope.acknowledgeProblems = function () {
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
tables.forEachCheckedEntry(tableId, function (entry) {
|
||||
var service_description;
|
||||
|
||||
if ('description' in entry) {
|
||||
service_description = entry.description;
|
||||
}
|
||||
|
||||
surveilActions.acknowledge(entry.host_name, service_description, $scope.attrs).then(function (data) {
|
||||
notifications.push('success', 'Acknowledgement', 'Acknowledged ' + entry.host_name);
|
||||
},
|
||||
function (error) {
|
||||
notifications.push('error', 'Acknowledgement', 'Could not acknowledge ' + entry.host_name);
|
||||
});
|
||||
});
|
||||
|
||||
tables.setAllCheckTable(tableId, false);
|
||||
});
|
||||
|
||||
$scope.isAcknowledgeFormShown = false;
|
||||
};
|
||||
}
|
||||
]
|
||||
};
|
||||
}]);
|
||||
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<li class="filters__item filters__item--downtime" data-mover="true">
|
||||
<button class="filters__button" type="button" ng-click="switchDowntimeFormShown()">
|
||||
<span class="visuallyhidden">Downtime</span>
|
||||
<i class="ico-clock"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<div data-ng-show="isDowntimeFormShown">
|
||||
<h4>Downtime</h4>
|
||||
<form ng-submit="sendDowntime()">
|
||||
<div>
|
||||
<label for="author">Author :</label>
|
||||
<input type="text" id="author" ng-model="attrs.author">
|
||||
</div>
|
||||
<div>
|
||||
<label for="comment">Comment :</label>
|
||||
<input type="message-text" id="comment" ng-model="attrs.comment">
|
||||
</div>
|
||||
<div>
|
||||
<label for="duration">Duration :</label>
|
||||
<input type="number" id="duration" ng-model="attrs.duration">
|
||||
</div>
|
||||
<div>
|
||||
<label for="start_time">Start time :</label>
|
||||
<input type="number" id="start_time" ng-model="attrs.start_time">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end_time">End time :</label>
|
||||
<input type="number" id="end_time" ng-model="attrs.end_time">
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" ng-click="switchDowntimeFormShown()">Close</button>
|
||||
<button type="submit">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar')
|
||||
.directive('banshoActionbarDowntime', [function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'components/table/actionbar/component_downtime/downtime.html',
|
||||
scope: {
|
||||
tableId: '='
|
||||
},
|
||||
controller: ['$scope', 'tables', 'surveilActions', 'notifications',
|
||||
function ($scope, tables, surveilActions, notifications) {
|
||||
$scope.isDowntimeFormShown = false;
|
||||
$scope.switchDowntimeFormShown = function () {
|
||||
$scope.isDowntimeFormShown = !$scope.isDowntimeFormShown;
|
||||
};
|
||||
|
||||
$scope.sendDowntime = function () {
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
tables.forEachCheckedEntry(tableId, function (entry) {
|
||||
var service_description;
|
||||
|
||||
if ('description' in entry) {
|
||||
service_description = entry.description;
|
||||
}
|
||||
|
||||
surveilActions.downtime(entry.host_name, service_description, $scope.attrs).then(function (data) {
|
||||
notifications.push('success', 'Downtime', 'Added downtime for ' + entry.host_name);
|
||||
},
|
||||
function (error) {
|
||||
notifications.push('error', 'Downtime', 'Could not add downtime for ' + entry.host_name);
|
||||
});
|
||||
});
|
||||
|
||||
tables.setAllCheckTable(tableId, false);
|
||||
});
|
||||
|
||||
$scope.isDowntimeFormShown = false;
|
||||
};
|
||||
}
|
||||
]
|
||||
};
|
||||
}]);
|
||||
20
app/components/table/actionbar/component_filter/filter.html
Normal file
20
app/components/table/actionbar/component_filter/filter.html
Normal file
@ -0,0 +1,20 @@
|
||||
<li class="filters__item filters__item--more clearfix">
|
||||
<button class="filters__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#filtersProblems"
|
||||
aria-expanded="false"
|
||||
aria-controls="filtersProblems">
|
||||
<span>{{activeFilter.text}}</span>
|
||||
<i class="ico-down-dir"></i>
|
||||
</button>
|
||||
|
||||
<div class="filters__panel collapse" id="filtersProblems">
|
||||
<ul class="filters__sublist">
|
||||
<li class="filters__subitem" ng-repeat="actionbarFilter in possibleFilters" ng-click="activateFilter($index)">
|
||||
<a class="filters__link state--current" ng-if="actionbarFilter === activeFilter">{{actionbarFilter.text}}</a>
|
||||
<a class="filters__link" ng-if="actionbarFilter !== activeFilter">{{actionbarFilter.text}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
39
app/components/table/actionbar/component_filter/filter.js
Normal file
39
app/components/table/actionbar/component_filter/filter.js
Normal file
@ -0,0 +1,39 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar')
|
||||
.directive('banshoActionbarFilter', [function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
scope: {
|
||||
'tableId': '='
|
||||
},
|
||||
templateUrl: 'components/table/actionbar/component_filter/filter.html',
|
||||
controller: ['$scope', 'tables', function ($scope, tables) {
|
||||
$scope.possibleFilters = [
|
||||
{
|
||||
text: "All",
|
||||
name: "all"
|
||||
},
|
||||
{
|
||||
text: "All OK",
|
||||
name: "all_ok"
|
||||
},
|
||||
{
|
||||
text: "All Acknowledged",
|
||||
name: "all_acknowledged"
|
||||
},
|
||||
{
|
||||
text: "All in Downtime",
|
||||
name: "all_downtime"
|
||||
}];
|
||||
|
||||
$scope.activeFilter = $scope.possibleFilters[0];
|
||||
$scope.activateFilter = function (item) {
|
||||
$scope.activeFilter = $scope.possibleFilters[item];
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
console.log("not yet implemented");
|
||||
});
|
||||
};
|
||||
}]
|
||||
};
|
||||
}]);
|
||||
25
app/components/table/actionbar/component_more/more.html
Normal file
25
app/components/table/actionbar/component_more/more.html
Normal file
@ -0,0 +1,25 @@
|
||||
<li class="filters__item filters__item--more clearfix">
|
||||
<button class="filters__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#filtersMore"
|
||||
aria-expanded="false"
|
||||
aria-controls="filtersMore">
|
||||
<span>More</span>
|
||||
<i class="ico-down-dir"></i>
|
||||
</button>
|
||||
|
||||
<div class="filters__panel collapse" id="filtersMore">
|
||||
<ul class="filters__sublist">
|
||||
<li class="filters__subitem">
|
||||
<a class="filters__link" href="#">More I</a>
|
||||
</li>
|
||||
<li class="filters__subitem">
|
||||
<a class="filters__link" href="#">More II</a>
|
||||
</li>
|
||||
<li class="filters__subitem">
|
||||
<a class="filters__link" href="#">More III</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
13
app/components/table/actionbar/component_more/more.js
Normal file
13
app/components/table/actionbar/component_more/more.js
Normal file
@ -0,0 +1,13 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar')
|
||||
.directive('banshoActionbarMore', [function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
'tableId': '='
|
||||
},
|
||||
templateUrl: 'components/table/actionbar/component_more/more.html',
|
||||
controller: ['$scope', 'tables', function ($scope, tables) {}]
|
||||
};
|
||||
}]);
|
||||
@ -0,0 +1,6 @@
|
||||
<li class="filters__item filters__item--recheck">
|
||||
<button class="filters__button" type="button" ng-click="sendRecheck()">
|
||||
<span class="visuallyhidden">Recheck</span>
|
||||
<i class="ico-arrows-cw"></i>
|
||||
</button>
|
||||
</li>
|
||||
36
app/components/table/actionbar/component_recheck/recheck.js
Normal file
36
app/components/table/actionbar/component_recheck/recheck.js
Normal file
@ -0,0 +1,36 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar')
|
||||
.directive('banshoActionbarRecheck', [function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
scope: {
|
||||
'tableId': '='
|
||||
},
|
||||
templateUrl: 'components/table/actionbar/component_recheck/recheck.html',
|
||||
controller: ['$scope', 'tables', 'surveilActions', 'notifications',
|
||||
function ($scope, tables, surveilActions, notifications) {
|
||||
$scope.sendRecheck = function () {
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
tables.forEachCheckedEntry(tableId, function (entry) {
|
||||
var service_description;
|
||||
|
||||
if ('description' in entry) {
|
||||
service_description = entry.description;
|
||||
}
|
||||
|
||||
surveilActions.recheck(entry.host_name, service_description).then(function (data) {
|
||||
notifications.push('success', 'Recheck', 'Scheduled recheck for ' + entry.host_name);
|
||||
},
|
||||
function (error) {
|
||||
notifications.push('error', 'Recheck', 'Could not schedule recheck for ' + entry.host_name);
|
||||
});
|
||||
});
|
||||
|
||||
tables.setAllCheckTable(tableId, false);
|
||||
});
|
||||
};
|
||||
}
|
||||
]
|
||||
};
|
||||
}]);
|
||||
@ -0,0 +1,21 @@
|
||||
<li class="filters__item clearfix">
|
||||
<input id="filter__search" type="search" placeholder="Filter hosts, services, ..." ng-model="searchFilter" data-ng-change="searchFilterChange()"/>
|
||||
</li>
|
||||
<li class="filters__item filters__item--settings">
|
||||
<button class="filters__button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#filtersSettings"
|
||||
aria-expanded="false"
|
||||
aria-controls="filtersSettings">
|
||||
<span class="visuallyhidden">Filters Settings</span>
|
||||
<i class="ico-cog"></i>
|
||||
</button>
|
||||
<div class="filters__panel collapse" id="filtersSettings">
|
||||
<ul class="filters__sublist">
|
||||
<li>...</li>
|
||||
<li>...</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.table.actionbar')
|
||||
.directive('banshoActionbarSearchFilter', [function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
'tableId': '='
|
||||
},
|
||||
templateUrl: 'components/table/actionbar/component_search_filter/search_filter.html',
|
||||
controller: ['$scope', 'tables', function ($scope, tables) {
|
||||
$scope.searchFilterChange = function () {
|
||||
angular.forEach($scope.tableId, function (tableId) {
|
||||
tables.setSearchFilter(tableId, $scope.searchFilter);
|
||||
});
|
||||
};
|
||||
}]
|
||||
};
|
||||
}]);
|
||||
@ -143,16 +143,14 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||
},
|
||||
compile: function () {
|
||||
return function (scope, element, attrs) {
|
||||
|
||||
var template = 'components/table/table.html',
|
||||
conf;
|
||||
conf = {};
|
||||
|
||||
if (!attrs.cellsText || !attrs.cellsName || !attrs.inputSource || !attrs.isWrappable) {
|
||||
throw new Error('<bansho-table> "cells-text", "cells-name", "inputSource" and "is-wrappable" attributes must be defined');
|
||||
}
|
||||
|
||||
// Create table configuration
|
||||
conf = {};
|
||||
conf.cells = { 'text': [], 'name': [] };
|
||||
conf.cells.text = attrs.cellsText.split(',');
|
||||
conf.cells.name = attrs.cellsName.split(',');
|
||||
@ -165,7 +163,6 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||
|
||||
tables.addTable(scope.tableId, conf);
|
||||
|
||||
//tableGlobalConfig.tableId = attrs.tableId;
|
||||
scope.checkColumn = scope.$eval(attrs.checkColumn);
|
||||
|
||||
if (!!attrs.refreshInterval) {
|
||||
@ -206,6 +203,7 @@ angular.module('bansho.table', ['bansho.surveil',
|
||||
|
||||
.value('TableConfigObj', function (config) {
|
||||
this.title = config.title;
|
||||
this.tableId = config.tableId;
|
||||
this.CellsText = config.cells.text.join();
|
||||
this.CellsName = config.cells.name.join();
|
||||
this.InputSource = config.inputSource;
|
||||
|
||||
@ -66,7 +66,12 @@
|
||||
|
||||
<!-- Table components -->
|
||||
<script src="components/table/actionbar/actionbar.js"></script>
|
||||
<script src="components/table/actionbar/actions/actions.js"></script>
|
||||
<script src="components/table/actionbar/component_acknowledge/acknowledge.js"></script>
|
||||
<script src="components/table/actionbar/component_downtime/downtime.js"></script>
|
||||
<script src="components/table/actionbar/component_filter/filter.js"></script>
|
||||
<script src="components/table/actionbar/component_more/more.js"></script>
|
||||
<script src="components/table/actionbar/component_recheck/recheck.js"></script>
|
||||
<script src="components/table/actionbar/component_search_filter/search_filter.js"></script>
|
||||
<script src="components/table/table.js"></script>
|
||||
<script src="components/table/cell_status_duration/cell_status_duration.js"></script>
|
||||
|
||||
@ -103,7 +108,7 @@
|
||||
<script src="components/drupal/drupal_info/drupal_info.js"></script>
|
||||
<script src="routing_view/routing_view.js"></script>
|
||||
<script src="templates/dashboard/dashboard.js"></script>
|
||||
<script src="templates/single_table/single_table.js"></script>
|
||||
<script src="templates/tables/tables.js"></script>
|
||||
<script src="templates/host/host.js"></script>
|
||||
<script src="templates/service/service.js"></script>
|
||||
<script src="templates/drupal_dashboard/drupal_dashboard.js"></script>
|
||||
|
||||
@ -18,10 +18,9 @@ angular.module('bansho.view', ['ngRoute',
|
||||
});
|
||||
}])
|
||||
|
||||
.controller('ViewCtrl', ['$scope', '$rootScope', '$location', '$routeParams', '$window', '$timeout', 'viewsTemplate', 'loadConfig', 'authService', 'configManager',
|
||||
function ($scope, $rootScope, $location, $routeParams, $window, $timeout, viewsTemplate, loadConfig, authService, configManager) {
|
||||
var templateName,
|
||||
templateUrl;
|
||||
.controller('ViewCtrl', ['$scope', '$rootScope', '$location', '$routeParams', '$window', '$timeout', 'viewsTemplate', 'loadConfig',
|
||||
function ($scope, $rootScope, $location, $routeParams, $window, $timeout, viewsTemplate, loadConfig) {
|
||||
var templateName;
|
||||
|
||||
if (!$rootScope.isAuthenticated) {
|
||||
$location.path('/login');
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<bansho-table-actionbar table-id="[0,1,2,3]"></bansho-table-actionbar>
|
||||
<bansho-components refresh="refresh" components="components"></bansho-components>
|
||||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="problems tab-pane active" id="openProblems">
|
||||
|
||||
@ -9,29 +9,25 @@ angular.module('bansho.view.dashboard', ['ngRoute',
|
||||
'bansho.surveil'
|
||||
])
|
||||
|
||||
.value('dashboardConfig', {})
|
||||
|
||||
.controller('DashboardCtrl', ['$scope', '$routeParams', '$interval', 'configManager', 'dashboardConfig', 'TableConfigObj', 'TacticalConfigObj', 'surveilStatus', 'promisesManager',
|
||||
function ($scope, $routeParams, $interval, configManager, dashboardConfig, TableConfigObj, TacticalConfigObj, surveilStatus, promisesManager) {
|
||||
.controller('DashboardCtrl', ['$scope', '$routeParams', '$interval', 'configManager', 'TableConfigObj', 'TacticalConfigObj', 'surveilStatus', 'promisesManager',
|
||||
function ($scope, $routeParams, $interval, configManager, TableConfigObj, TacticalConfigObj, surveilStatus, promisesManager) {
|
||||
var components = [],
|
||||
component,
|
||||
config,
|
||||
viewName = $scope.viewName,
|
||||
pageConfig = configManager.getConfigData(viewName),
|
||||
i = 0,
|
||||
getData;
|
||||
|
||||
if (jQuery.isEmptyObject(dashboardConfig)) {
|
||||
configManager.loadByTemplate('dashboard', dashboardConfig);
|
||||
}
|
||||
|
||||
$scope.dashboardTitle = dashboardConfig[viewName].title;
|
||||
$scope.dashboardTemplate = dashboardConfig[viewName].template;
|
||||
$scope.dashboardRefreshInterval = dashboardConfig[viewName].refreshInterval;
|
||||
$scope.dashboardTitle = pageConfig.title;
|
||||
$scope.dashboardTemplate = pageConfig.template;
|
||||
$scope.dashboardRefreshInterval = pageConfig.refreshInterval;
|
||||
|
||||
$scope.dashboardTactical = [];
|
||||
$scope.dashboardTables = [];
|
||||
|
||||
components = dashboardConfig[viewName].components;
|
||||
$scope.components = pageConfig.components;
|
||||
components = pageConfig.extra_components;
|
||||
|
||||
for (i = 0; i < components.length; i += 1) {
|
||||
component = components[i];
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
<article ng-controller="SingleTableCtrl" id="tactical">
|
||||
|
||||
<section class="main__content tabpanel">
|
||||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="problems tab-pane active" id="openProblems">
|
||||
<header class="main__content__header clearfix">
|
||||
<h2 class="main__content__title">{{singleTableTitle}}</h2>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<bansho-table-actionbar data-ng-if="tableConfig.ContainsActionBar" data-table-id="[0]" ></bansho-table-actionbar>
|
||||
|
||||
<bansho-table cells-name="{{tableConfig.CellsName}}"
|
||||
cells-text="{{tableConfig.CellsText}}"
|
||||
input-source="{{tableConfig.InputSource}}"
|
||||
filters="{{tableConfig.Filters}}"
|
||||
is-wrappable="{{tableConfig.IsWrappable}}"
|
||||
check-column="{{tableConfig.CheckColumn}}"
|
||||
no-repeat-cell="{{tableConfig.NoRepeatCell}}"
|
||||
header-follow="{{tableConfig.HeaderFollow}}"
|
||||
refresh-interval="{{singleTableRefreshInterval}}"
|
||||
table-id="0"></bansho-table>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
@ -1,25 +0,0 @@
|
||||
/*global jQuery */
|
||||
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.view.singleTable', ['ngRoute',
|
||||
'bansho.tactical.status_overview',
|
||||
'bansho.tactical.current_health',
|
||||
'bansho.tactical.top_alert_producers',
|
||||
'bansho.table'
|
||||
])
|
||||
|
||||
.value('singleTableConfig', {})
|
||||
|
||||
.controller('SingleTableCtrl', ['$scope', '$routeParams', 'singleTableConfig', 'TableConfigObj', 'configManager',
|
||||
function ($scope, $routeParams, singleTableConfig, TableConfigObj, configManager) {
|
||||
var viewName = $scope.viewName;
|
||||
|
||||
if (jQuery.isEmptyObject(singleTableConfig)) {
|
||||
configManager.loadByTemplate('single_table', singleTableConfig);
|
||||
}
|
||||
|
||||
$scope.tableConfig = new TableConfigObj(singleTableConfig[viewName].components[0].config);
|
||||
$scope.singleTableTitle = singleTableConfig[viewName].title;
|
||||
$scope.singleTableRefreshInterval = singleTableConfig[viewName].refreshInterval;
|
||||
}]);
|
||||
5
app/templates/tables/tables.html
Normal file
5
app/templates/tables/tables.html
Normal file
@ -0,0 +1,5 @@
|
||||
<article ng-controller="TablesCtrl">
|
||||
<section class="main__content tabpanel">
|
||||
<bansho-components refresh="refresh" components="components"></bansho-components>
|
||||
</section>
|
||||
</article>
|
||||
58
app/templates/tables/tables.js
Normal file
58
app/templates/tables/tables.js
Normal file
@ -0,0 +1,58 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('bansho.view.singleTable', ['ngRoute',
|
||||
'bansho.tactical.status_overview',
|
||||
'bansho.tactical.current_health',
|
||||
'bansho.tactical.top_alert_producers',
|
||||
'bansho.table'
|
||||
])
|
||||
|
||||
.controller('TablesCtrl', ['$scope', 'configManager',
|
||||
function ($scope, configManager) {
|
||||
var pageConfig = configManager.getConfigData($scope.viewName);
|
||||
|
||||
$scope.pageTitle = pageConfig.title;
|
||||
$scope.refresh = pageConfig.refreshInterval;
|
||||
$scope.components = pageConfig.components;
|
||||
}])
|
||||
|
||||
.directive('banshoComponents', ['$compile', function ($compile) {
|
||||
return {
|
||||
restrict: "E",
|
||||
replace: true,
|
||||
scope: {
|
||||
components: '=',
|
||||
refresh: '='
|
||||
},
|
||||
template: "<span></span>",
|
||||
link: function (scope, element, attrs) {
|
||||
if (angular.isArray(scope.components)) {
|
||||
angular.forEach(scope.components, function (component) {
|
||||
var banshoDirective = "<bansho-" + component.type + " table-id='[" + component.config.tableId + "]'",
|
||||
config = component.config;
|
||||
|
||||
if (component.type === "actionbar") {
|
||||
banshoDirective +=
|
||||
" components='" + config.components + "'";
|
||||
} else if (component.type === "table") {
|
||||
banshoDirective +=
|
||||
" cells-name='" + config.cells.name + "'" +
|
||||
" cells-text='" + config.cells.text + "'" +
|
||||
" input-source='" + JSON.stringify(config.inputSource) + "'" +
|
||||
" is-wrappable='" + config.isWrappable + "'" +
|
||||
" no-repeat-cell='" + config.noRepeatCell + "'" +
|
||||
" check-column='" + config.checkColumn + "'" +
|
||||
" contains-actionbar='" + config.containsActionBar + "'" +
|
||||
" header-follow='" + config.headerFollow + "'" +
|
||||
" refresh-interval='" + scope.refresh + "'";
|
||||
}
|
||||
|
||||
banshoDirective += "/>";
|
||||
|
||||
element.append(banshoDirective);
|
||||
$compile(element.contents())(scope);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}]);
|
||||
Loading…
x
Reference in New Issue
Block a user