Refactor acknowledge form in a new directive
This commit is contained in:
Vincent Fournier
parent
c00ee9410d
commit
92df0d1715
|
|
@ -27,13 +27,13 @@
|
|||
</button>
|
||||
</li>
|
||||
<li class="filters__item filters__item--acknowledge" data-mover="true">
|
||||
<button class="filters__button" type="button" ng-click="ackFormIsOpen = !ackFormIsOpen">
|
||||
<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="isDowntimeShown = !isDowntimeShown">
|
||||
<button class="filters__button" type="button" ng-click="switchDowntimeForm()">
|
||||
<span class="visuallyhidden">Downtime</span>
|
||||
<i class="ico-clock"></i>
|
||||
</button>
|
||||
|
|
@ -87,53 +87,7 @@
|
|||
</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>
|
||||
<bansho-acknowledge-form ng-show="isAcknowledgeShown" is-shown="isAcknowledgeShown" selected-hosts="selected"> </bansho-acknowledge-form>
|
||||
|
||||
</div>
|
||||
|
||||
<bansho-downtime-form ng-show="isDowntimeShown" is-shown="isDowntimeShown" selected-hosts="selected"> </bansho-downtime_form>
|
||||
<bansho-downtime-form ng-show="isDowntimeShown" is-shown="isDowntimeShown" selected-hosts="selected"> </bansho-downtime-form>
|
||||
</menu>
|
||||
|
|
|
|||
|
|
@ -29,43 +29,27 @@ angular.module('bansho.table.actionbar', ['bansho.table', 'bansho.live'])
|
|||
|
||||
.controller('TableActionbarCtrl', ['$scope', '$filter', 'backendClient', 'actionbarFilters', 'tablesConfig',
|
||||
function ($scope, $filter, backendClient, actionbarFilters, tablesConfig, actionbarSelectFilter) {
|
||||
$scope.isDowntimeShown = false;
|
||||
$scope.isAcknowledgeShown = false;
|
||||
|
||||
$scope.switchDowntimeForm = function () {
|
||||
$scope.isAcknowledgeShown = false;
|
||||
|
||||
$scope.isDowntimeShown = !$scope.isDowntimeShown;
|
||||
}
|
||||
|
||||
$scope.switchAcknowledgeForm = function () {
|
||||
$scope.isDowntimeShown = false;
|
||||
|
||||
$scope.isAcknowledgeShown = !$scope.isAcknowledgeShown;
|
||||
}
|
||||
|
||||
$scope.actionbarFilters = actionbarFilters;
|
||||
$scope.actionbarFilters.activeFilter = $scope.actionbarFilters.possibleFilters[0];
|
||||
$scope.ackFormIsOpen = false;
|
||||
|
||||
$scope.acknowledgeData = {};
|
||||
$scope.acknowledgeData.author = 'anonymous';
|
||||
$scope.acknowledgeData.comment = 'No comment';
|
||||
$scope.acknowledgeData.sticky = '1';
|
||||
$scope.acknowledgeData.notify = '0';
|
||||
$scope.acknowledgeData.persistent = '1';
|
||||
|
||||
$scope.acknowledgeProblems = function () {
|
||||
angular.forEach(tablesConfig, function (tableConfig) {
|
||||
var entries = $filter('filter')(tableConfig.entries,
|
||||
$scope.actionbarFilters.searchFilter);
|
||||
|
||||
angular.forEach(entries, function (entry) {
|
||||
var service_description = undefined;
|
||||
|
||||
if (entry.is_checked) {
|
||||
if ('description' in entry) {
|
||||
service_description = entry.description;
|
||||
}
|
||||
|
||||
backendClient.acknowledge(entry.host_name, service_description, $scope.acknowledgeData).error(function (data) {
|
||||
throw new Error('Acknowledge request failed');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.activateFilter = function (item) {
|
||||
$scope.actionbarFilters.activeFilter = $scope.actionbarFilters.possibleFilters[item];
|
||||
};
|
||||
|
||||
$scope.isDowntimeShown = true;
|
||||
}])
|
||||
|
||||
.filter('actionbarSelectFilter', function () {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<h4 id="acknowledgeModalLabel">Acknowlege</h4>
|
||||
<form data-ng-submit="acknowledgeProblems()">
|
||||
<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>
|
||||
<div>
|
||||
<button type="button" ng-click="isShown = !isShown">Close</button>
|
||||
<button type="button" ng-click="acknowledgeProblems()">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -2,6 +2,41 @@
|
|||
|
||||
angular.module('bansho.table.actionbar')
|
||||
|
||||
.directive('banshoAcknowledgeForm',
|
||||
['$filter', 'tablesConfig', 'actionbarFilters', 'backendClient',
|
||||
function($filter, tablesConfig, actionbarFilters, backendClient) {
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'components/table/actionbar/actions/acknowledge_form.html',
|
||||
scope: {
|
||||
isShown: '='
|
||||
},
|
||||
controller: function ($scope) {
|
||||
$scope.acknowledgeProblems = function () {
|
||||
angular.forEach(tablesConfig, function (tableConfig) {
|
||||
var entries = $filter('filter')(tableConfig.entries,
|
||||
actionbarFilters.searchFilter);
|
||||
|
||||
angular.forEach(entries, function (entry) {
|
||||
var service_description = undefined;
|
||||
|
||||
if (entry.is_checked) {
|
||||
if ('description' in entry) {
|
||||
service_description = entry.description;
|
||||
}
|
||||
|
||||
backendClient.acknowledge(entry.host_name, service_description, $scope.acknowledgeData).error(function (data) {
|
||||
throw new Error('Acknowledge request failed');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
}])
|
||||
|
||||
.directive('banshoDowntimeForm',
|
||||
['$filter', 'tablesConfig', 'actionbarFilters', 'backendClient',
|
||||
function ($filter, tablesConfig, actionbarFilters, backendClient) {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,28 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue