x/bansho
Code Issues Proposed changes

Add directive for downtime

Browse Source
This commit is contained in:
Vincent Fournier 2015-05-01 16:41:25 -04:00
parent 81df96c208
commit c00ee9410d
7 changed files with 226 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/live/surveil.js
View File

@ -361,11 +361,16 @@ angular.module('bansho.live', [])
}; };
var downtime = function (host_name, service_description, attrs) { var downtime = function (host_name, service_description, attrs) {
var data = {}; attrs.host_name = host_name;
if (service_description !== undefined) {
attrs.service_description = service_description;
}
angular.forEach(attrs, function (key, value) { return $http({
console.log(key + "; " + value); url: '/surveil/v2/actions/downtime/',
}); method: 'POST',
data: attrs
});
}; };
return { return {

270
app/components/table/actionbar/actionbar.html
View File

@ -1,141 +1,139 @@
<menu class="filters" ng-controller="TableActionbarCtrl"> <menu class="filters" ng-controller="TableActionbarCtrl">
<ul class="filters__list clearfix"> <ul class="filters__list clearfix">
<li class="filters__item filters__item--problems"> <li class="filters__item filters__item--problems">
<button class="filters__button" <button class="filters__button"
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
data-target="#filtersProblems" data-target="#filtersProblems"
aria-expanded="false" aria-expanded="false"
aria-controls="filtersProblems"> aria-controls="filtersProblems">
<span>{{ actionbarFilters.activeFilter.text }}</span> <span>{{ actionbarFilters.activeFilter.text }}</span>
<i class="ico-down-dir"></i> <i class="ico-down-dir"></i>
</button> </button>
<div class="filters__panel collapse" id="filtersProblems">
<ul class="filters__sublist">
<li class="filters__subitem" ng-repeat="actionbarFilter in actionbarFilters.possibleFilters" ng-click="activateFilter($index)">
<a class="filters__link state--current" ng-if="actionbarFilter === actionbarFilters.activeFilter">{{ actionbarFilter.text }}</a>
<a class="filters__link" ng-if="actionbarFilter !== actionbarFilters.activeFilter">{{ actionbarFilter.text }}</a>
</li>
</ul>
</div>
</li>
<li class="filters__item filters__item--recheck">
<button class="filters__button" type="button">
<span class="visuallyhidden">Recheck</span>
<i class="ico-arrows-cw"></i>
</button>
</li>
<li class="filters__item filters__item--acknowledge"
data-mover="true">
<button class="filters__button" type="button" ng-click="ackFormIsOpen = !ackFormIsOpen">
<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">
<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" ng-model="actionbarFilters.searchFilter"/>{{ actionbarFilters.searchFilter }}
</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>
<!-- Acknowledgement form --> <div class="filters__panel collapse" id="filtersProblems">
<div ng-show="ackFormIsOpen"> <ul class="filters__sublist">
<div> <li class="filters__subitem" ng-repeat="actionbarFilter in actionbarFilters.possibleFilters" ng-click="activateFilter($index)">
<h4 id="acknowledgeModalLabel">Acknowlege</h4> <a class="filters__link state--current" ng-if="actionbarFilter === actionbarFilters.activeFilter">{{ actionbarFilter.text }}</a>
</div> <a class="filters__link" ng-if="actionbarFilter !== actionbarFilters.activeFilter">{{ actionbarFilter.text }}</a>
<div> </li>
<form> </ul>
<div> </div>
<label for="author">Author :</label> </li>
<input type="text" id="acknowledge-author" ng-model="acknowledgeData.author"> <li class="filters__item filters__item--recheck">
</div> <button class="filters__button" type="button">
<div> <span class="visuallyhidden">Recheck</span>
<label for="sticky">Sticky :</label> <i class="ico-arrows-cw"></i>
<input type="checkbox" </button>
id="acknowledge-sticky" </li>
ng-model="acknowledgeData.sticky" <li class="filters__item filters__item--acknowledge" data-mover="true">
ng-true-value="1" <button class="filters__button" type="button" ng-click="ackFormIsOpen = !ackFormIsOpen">
ng-false-value="0"> <span class="visuallyhidden">Acknowledge</span>
</div> <i class="ico-thumbs-up"></i>
<div> </button>
<label for="notify">Notify :</label> </li>
<input type="checkbox" <li class="filters__item filters__item--downtime" data-mover="true">
id="acknowledge-notify" <button class="filters__button" type="button" ng-click="isDowntimeShown = !isDowntimeShown">
ng-model="acknowledgeData.notify" <span class="visuallyhidden">Downtime</span>
ng-true-value="1" <i class="ico-clock"></i>
ng-false-value="0"> </button>
</div > </li>
<div> <li class="filters__item filters__item--more clearfix">
<label for="persistent">Persistent :</label> <button class="filters__button"
<input type="checkbox" type="button"
id="acknowledge-persistent" data-toggle="collapse"
ng-model="acknowledgeData.persistent" data-target="#filtersMore"
ng-true-value="1" aria-expanded="false"
ng-false-value="0"> aria-controls="filtersMore">
</div> <span>More</span>
<div> <i class="ico-down-dir"></i>
<label for="comment">Comment :</label> </button>
<input type="message-text" id="acknowledge-comment" ng-model="acknowledgeData.comment">
</div>
</form>
</div>
<div>
<button type="button" ng-click="ackFormIsOpen = !ackFormIsOpen">Close</button>
<button type="button" ng-click="acknowledgeProblems()">Send</button>
</div>
</div> <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" ng-model="actionbarFilters.searchFilter"/>{{ actionbarFilters.searchFilter }}
</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>
<bansho-downtime_form data-ng-show="isDowntimeShown" is-shown="isDowntimeShown" selected-hosts="selected"></bansho-downtime_form> <div class="filters__panel collapse" id="filtersSettings">
<ul class="filters__sublist">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
<!-- Acknowledgement form -->
<div ng-show="ackFormIsOpen">
<div>
<h4 id="acknowledgeModalLabel">Acknowlege</h4>
</div>
<div>
<form>
<div>
<label for="author">Author :</label>
<input type="text" id="acknowledge-author" ng-model="acknowledgeData.author">
</div>
<div>
<label for="sticky">Sticky :</label>
<input type="checkbox"
id="acknowledge-sticky"
ng-model="acknowledgeData.sticky"
ng-true-value="1"
ng-false-value="0">
</div>
<div>
<label for="notify">Notify :</label>
<input type="checkbox"
id="acknowledge-notify"
ng-model="acknowledgeData.notify"
ng-true-value="1"
ng-false-value="0">
</div >
<div>
<label for="persistent">Persistent :</label>
<input type="checkbox"
id="acknowledge-persistent"
ng-model="acknowledgeData.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="acknowledgeData.comment">
</div>
</form>
</div>
<div>
<button type="button" ng-click="ackFormIsOpen = !ackFormIsOpen">Close</button>
<button type="button" ng-click="acknowledgeProblems()">Send</button>
</div>
</div>
<bansho-downtime-form ng-show="isDowntimeShown" is-shown="isDowntimeShown" selected-hosts="selected"> </bansho-downtime_form>
</menu> </menu>

22
app/components/table/actionbar/actionbar.js
View File

@ -1,9 +1,8 @@
'use strict'; 'use strict';
angular.module('bansho.table.actionbar', ['bansho.table', angular.module('bansho.table.actionbar', ['bansho.table', 'bansho.live'])
'bansho.live'])
.factory('actionbarFilters', function () { .service('actionbarFilters', function () {
var actionbarFilters = { var actionbarFilters = {
activeFilter: {}, activeFilter: {},
possibleFilters: [ possibleFilters: [
@ -54,8 +53,7 @@ angular.module('bansho.table.actionbar', ['bansho.table',
service_description = entry.description; service_description = entry.description;
} }
backendClient.acknowledge(entry.host_name, service_description, $scope.acknowledgeData) backendClient.acknowledge(entry.host_name, service_description, $scope.acknowledgeData).error(function (data) {
.error(function (data) {
throw new Error('Acknowledge request failed'); throw new Error('Acknowledge request failed');
}); });
} }
@ -107,18 +105,4 @@ angular.module('bansho.table.actionbar', ['bansho.table',
restrict: 'E', restrict: 'E',
templateUrl: 'components/table/actionbar/actionbar.html' templateUrl: 'components/table/actionbar/actionbar.html'
}; };
})
.directive('banshoDowntimeForm', function () {
return {
restrict: 'E',
templateUrl: 'components/table/actionbar/downtime_form.html',
scope: {
isShown: '=',
selectedHosts: '='
},
controller: function ($scope) {
console.log($scope.isShown)
}
};
}); });

49
app/components/table/actionbar/actions/actions.js Normal file
View File

@ -0,0 +1,49 @@
'use strict';
angular.module('bansho.table.actionbar')
.directive('banshoDowntimeForm',
['$filter', 'tablesConfig', 'actionbarFilters', 'backendClient',
function ($filter, tablesConfig, actionbarFilters, backendClient) {
return {
restrict: 'E',
templateUrl: 'components/table/actionbar/actions/downtime_form.html',
scope: {
isShown: '='
},
controller: function ($scope) {
$scope.messages = [];
$scope.sendDowntime = function () {
angular.forEach(tablesConfig, function (table) {
var entries = $filter('filter')(table.entries, actionbarFilters.searchFilter);
angular.forEach(entries, function (entry) {
var service_description = undefined;
if (entry.is_checked) {
if ('description' in entry) {
service_description = entry.description;
}
console.log($scope.attrs);
backendClient.downtime(entry.host_name, service_description, $scope.attrs).then(function (data) {
$scope.messages.push({
text: entry.host_name + " success ",
type: "success"
});
},
function (error) {
$scope.messages.push({
text: entry.host_name + " error",
type: "error"
});
});
}
});
});
}
}
}
}]);

30
app/components/table/actionbar/actions/downtime_form.html Normal file
View File

@ -0,0 +1,30 @@
<div>
<div ng-repeat="message in messages">{{message.text}} + {{message.type}}</div>
<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>
</div>

10
app/components/table/actionbar/downtime_form.html
View File

@ -1,10 +0,0 @@
<div>
<h1>Downtime form {{isShown}} </h1>
<form>
<div>
<label for="author">Author :</label>
<input type="text" id="acknowledge-author" ng-model="acknowledgeData.author">
</div>
<button type="button" ng-click="sendDowntime()">Send</button>
</form>
</div>

1
app/index.html
View File

@ -36,6 +36,7 @@
<script src="components/tactical/current_health/current_health.js"></script> <script src="components/tactical/current_health/current_health.js"></script>
<script src="components/tactical/top_alert_producers/top_alert_producers.js"></script> <script src="components/tactical/top_alert_producers/top_alert_producers.js"></script>
<script src="components/table/actionbar/actionbar.js"></script> <script src="components/table/actionbar/actionbar.js"></script>
<script src="components/table/actionbar/actions/actions.js"></script>
<script src="components/table/table.js"></script> <script src="components/table/table.js"></script>
<script src="components/table/cell_duration/cell_duration.js"></script> <script src="components/table/cell_duration/cell_duration.js"></script>
<script src="components/table/cell_host/cell_host.js"></script> <script src="components/table/cell_host/cell_host.js"></script>