diff --git a/alerta/api/v2/templates/index.html b/alerta/api/v2/templates/index.html index 472275ff..2b14f445 100644 --- a/alerta/api/v2/templates/index.html +++ b/alerta/api/v2/templates/index.html @@ -75,11 +75,11 @@ </td> <td> <div align="right"> - <select id="status-select" class="btn" name="status" onchange="updateStatus(this.value)" style="width:150px"> - <option value="open">Open</option> - <option value="ack">Ack</option> - <option value="closed">Closed</option> - </select> + <div id="status-select" class="btn-group" data-toggle="buttons-checkbox"> + <button type="button" class="status-select btn active" value="open">Open</button> + <button type="button" class="status-select btn" value="ack">Ack</button> + <button type="button" class="status-select btn" value="closed">Closed</button> + </div> <select id="limit-select" class="btn" name="limit" onchange="updateLimit(this.value)" style="width:150px"> <option value="0">No limit</option> <option value="10">Only 10</option> @@ -312,6 +312,7 @@ var api_port = {{ config['api_port'] }}; </script> +<script src="assets/bootstrap/js/bootstrap-button.js"></script> <script src="/alerta/dashboard/v2/assets/js/console.js"></script> {% block initialiser %} diff --git a/dashboard/v2/assets/bootstrap/js/bootstrap-button.js b/dashboard/v2/assets/bootstrap/js/bootstrap-button.js new file mode 100644 index 00000000..ce459916 --- /dev/null +++ b/dashboard/v2/assets/bootstrap/js/bootstrap-button.js @@ -0,0 +1,105 @@ +/* ============================================================ + * bootstrap-button.js v2.3.2 + * http://twitter.github.com/bootstrap/javascript.html#buttons + * ============================================================ + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* BUTTON PUBLIC CLASS DEFINITION + * ============================== */ + + var Button = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, $.fn.button.defaults, options) + } + + Button.prototype.setState = function (state) { + var d = 'disabled' + , $el = this.$element + , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' + + state = state + 'Text' + data.resetText || $el.data('resetText', $el[val]()) + + $el[val](data[state] || this.options[state]) + + // push to event loop to allow forms to submit + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) + } + + Button.prototype.toggle = function () { + var $parent = this.$element.closest('[data-toggle="buttons-radio"]') + + $parent && $parent + .find('.active') + .removeClass('active') + + this.$element.toggleClass('active') + } + + + /* BUTTON PLUGIN DEFINITION + * ======================== */ + + var old = $.fn.button + + $.fn.button = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('button') + , options = typeof option == 'object' && option + if (!data) $this.data('button', (data = new Button(this, options))) + if (option == 'toggle') data.toggle() + else if (option) data.setState(option) + }) + } + + $.fn.button.defaults = { + loadingText: 'loading...' + } + + $.fn.button.Constructor = Button + + + /* BUTTON NO CONFLICT + * ================== */ + + $.fn.button.noConflict = function () { + $.fn.button = old + return this + } + + + /* BUTTON DATA-API + * =============== */ + + $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { + var $btn = $(e.target) + if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + $btn.button('toggle') + }) + +}(window.jQuery); \ No newline at end of file diff --git a/dashboard/v2/assets/js/console.js b/dashboard/v2/assets/js/console.js index aa882a3a..8a0aab03 100644 --- a/dashboard/v2/assets/js/console.js +++ b/dashboard/v2/assets/js/console.js @@ -299,7 +299,7 @@ function updateAlertsTable(env_filter, asiFilters) { "aaSorting": [ [0, 'asc'], [2, 'asc'] - ], + ] }); if (autoRefresh) { @@ -498,6 +498,32 @@ $('.status-indicator-count').click(function () { Alerta.highlightStatusIndicator(statusIndicator); }); +var status_buttons = { + 'open': true, + 'ack': false, + 'closed': false +}; + +$('body').on('click', '#status-select .btn', function() { + if ($(this).hasClass('active')) { + status_buttons[$(this).attr("value")] = false; + } else { + status_buttons[$(this).attr("value")] = true; + } + + var status_array = []; + for (var key in status_buttons) { + if (status_buttons[key]) { + status_array.push('status=' + key); + } + } + status = '&' + status_array.join('&'); + + updateStatusCounts(gEnvFilter, false); + updateAllIndicators(gEnvFilter, lookup, false); + refreshAlerts(false); +}); + function updateStatus(s) { status = '&status=' + s; updateStatusCounts(gEnvFilter, false);