diff --git a/src/panel-triggers/module.js b/src/panel-triggers/module.js index 2218490..2062b7e 100644 --- a/src/panel-triggers/module.js +++ b/src/panel-triggers/module.js @@ -12,6 +12,7 @@ */ import _ from 'lodash'; +import $ from 'jquery'; import moment from 'moment'; import * as utils from '../datasource-zabbix/utils'; import {MetricsPanelCtrl} from 'app/plugins/sdk'; @@ -48,7 +49,9 @@ var panelDefaults = { showEvents: { text: 'Problems', value: '1' }, triggerSeverity: defaultSeverity, okEventColor: 'rgba(0, 245, 153, 0.45)', - ackEventColor: 'rgba(0, 0, 0, 0)' + ackEventColor: 'rgba(0, 0, 0, 0)', + scroll: true, + pageSize: null }; var triggerStatusMap = { @@ -69,6 +72,8 @@ class TriggerPanelCtrl extends MetricsPanelCtrl { this.triggerStatusMap = triggerStatusMap; this.defaultTimeFormat = defaultTimeFormat; + this.pageIndex = 0; + // Load panel defaults // _.cloneDeep() need for prevent changing shared defaultSeverity. // Load object "by value" istead "by reference". @@ -222,6 +227,9 @@ class TriggerPanelCtrl extends MetricsPanelCtrl { // Notify panel that request is finished self.setTimeQueryEnd(); self.loading = false; + + this.panel.triggerList = this.triggerList; + this.render(); }); }); }); @@ -244,6 +252,89 @@ class TriggerPanelCtrl extends MetricsPanelCtrl { }); }); } + + render() { + return super.render(this.table); + } + + link(scope, elem, attrs, ctrl) { + var data; + var panel = ctrl.panel; + var pageCount = 0; + // var formaters = []; + data = ctrl.panel.triggerList; + + function getTableHeight() { + var panelHeight = ctrl.height; + + if (pageCount > 1) { + panelHeight -= 26; + } + + return (panelHeight - 31) + 'px'; + } + + // function appendTableRows(tbodyElem) { + // var renderer = new TableRenderer(panel, data, ctrl.dashboard.isTimezoneUtc(), ctrl.$sanitize); + // tbodyElem.empty(); + // tbodyElem.html(renderer.render(ctrl.pageIndex)); + // } + + function switchPage(e) { + var el = $(e.currentTarget); + ctrl.pageIndex = (parseInt(el.text(), 10)-1); + renderPanel(); + } + + function appendPaginationControls(footerElem) { + footerElem.empty(); + + var pageSize = panel.pageSize || 5; + pageCount = Math.ceil(ctrl.panel.triggerList.length / pageSize); + if (pageCount === 1) { + return; + } + + var startPage = Math.max(ctrl.pageIndex - 3, 0); + var endPage = Math.min(pageCount, startPage + 9); + + var paginationList = $(''); + + for (var i = startPage; i < endPage; i++) { + var activeClass = i === ctrl.pageIndex ? 'active' : ''; + var pageLinkElem = $('
  • ' + (i+1) + '
  • '); + paginationList.append(pageLinkElem); + } + + footerElem.append(paginationList); + } + + function renderPanel() { + var panelElem = elem.parents('.panel'); + var rootElem = elem.find('.triggers-panel-scroll'); + // var tbodyElem = elem.find('tbody'); + var footerElem = elem.find('.triggers-panel-footer'); + + elem.css({'font-size': panel.fontSize}); + panelElem.addClass('triggers-panel-wrapper'); + + // appendTableRows(tbodyElem); + appendPaginationControls(footerElem); + + rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' }); + } + + elem.on('click', '.triggers-panel-page-link', switchPage); + + var unbindDestroy = scope.$on('$destroy', function() { + elem.off('click', '.triggers-panel-page-link'); + unbindDestroy(); + }); + + ctrl.events.on('render', () => { + renderPanel(); + }); + } } TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';