Add 'enable scroll' control and page size input.

This commit is contained in:
Alexander Zobnin
2017-02-02 13:35:51 +03:00
parent c21a7c38d7
commit 17306c5f73
27 changed files with 160 additions and 4551 deletions

View File

@@ -1,122 +0,0 @@
'use strict';
var _angular = require('angular');
var _angular2 = _interopRequireDefault(_angular);
var _jquery = require('jquery');
var _jquery2 = _interopRequireDefault(_jquery);
var _tetherDrop = require('tether-drop');
var _tetherDrop2 = _interopRequireDefault(_tetherDrop);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @ngInject */
_angular2.default.module('grafana.directives').directive('ackTooltip', function ($sanitize, $compile) {
var buttonTemplate = '<a bs-tooltip="\'Acknowledges ({{trigger.acknowledges.length}})\'"' + '<i ng-class="' + "{'fa fa-comments': trigger.acknowledges.length, " + "'fa fa-comments-o': !trigger.acknowledges.length, " + '}"></i></a>';
return {
scope: {
ack: "=",
trigger: "=",
onAck: "=",
context: "="
},
link: function link(scope, element) {
var acknowledges = scope.ack;
var $button = (0, _jquery2.default)(buttonTemplate);
$button.appendTo(element);
$button.click(function () {
var tooltip = '<div>';
if (acknowledges && acknowledges.length) {
tooltip += '<table class="table"><thead><tr>' + '<th class="ack-time">Time</th>' + '<th class="ack-user">User</th>' + '<th class="ack-comments">Comments</th>' + '</tr></thead><tbody>';
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = acknowledges[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var ack = _step.value;
tooltip += '<tr><td>' + ack.time + '</td>' + '<td>' + ack.user + '</td>' + '<td>' + ack.message + '</td></tr>';
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
tooltip += '</tbody></table>';
} else {
tooltip += 'Add acknowledge';
}
var addAckButtonTemplate = '<div class="ack-add-button">' + '<button id="add-acknowledge-btn"' + 'class="btn btn-mini btn-inverse gf-form-button">' + '<i class="fa fa-plus"></i>' + '</button></div>';
tooltip += addAckButtonTemplate;
tooltip += '</div>';
var drop = new _tetherDrop2.default({
target: element[0],
content: tooltip,
position: "bottom left",
classes: 'drop-popover ack-tooltip',
openOn: 'hover',
hoverCloseDelay: 500,
tetherOptions: {
constraints: [{ to: 'window', pin: true, attachment: "both" }]
}
});
drop.open();
drop.on('close', closeDrop);
(0, _jquery2.default)('#add-acknowledge-btn').on('click', onAddAckButtonClick);
function onAddAckButtonClick() {
var inputTemplate = '<div class="ack-input-group">' + '<input type="text" id="ack-message">' + '<button id="send-ack-button"' + 'class="btn btn-mini btn-inverse gf-form-button">' + 'Acknowledge </button>' + '<button id="cancel-ack-button"' + 'class="btn btn-mini btn-inverse gf-form-button">' + 'Cancel' + '</button></input></div>';
var $input = (0, _jquery2.default)(inputTemplate);
var $addAckButton = (0, _jquery2.default)('.ack-tooltip .ack-add-button');
$addAckButton.replaceWith($input);
(0, _jquery2.default)('.ack-tooltip #cancel-ack-button').on('click', onAckCancelButtonClick);
(0, _jquery2.default)('.ack-tooltip #send-ack-button').on('click', onAckSendlButtonClick);
}
function onAckCancelButtonClick() {
(0, _jquery2.default)('.ack-tooltip .ack-input-group').replaceWith(addAckButtonTemplate);
(0, _jquery2.default)('#add-acknowledge-btn').on('click', onAddAckButtonClick);
}
function onAckSendlButtonClick() {
var message = (0, _jquery2.default)('.ack-tooltip #ack-message')[0].value;
var onAck = scope.onAck.bind(scope.context);
onAck(scope.trigger, message).then(function () {
closeDrop();
});
}
function closeDrop() {
setTimeout(function () {
drop.destroy();
});
}
});
$compile(element.contents())(scope);
}
};
});

View File

@@ -1,225 +0,0 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
* Grafana-Zabbix
* Zabbix plugin for Grafana.
* http://github.com/alexanderzobnin/grafana-zabbix
*
* Trigger panel.
* This feature sponsored by CORE IT
* http://www.coreit.fr
*
* Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
* Licensed under the Apache License, Version 2.0
*/
exports.triggerPanelEditor = triggerPanelEditor;
var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var _utils = require('../datasource-zabbix/utils');
var utils = _interopRequireWildcard(_utils);
require('../datasource-zabbix/css/query-editor.css!');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var TriggerPanelEditorCtrl = function () {
/** @ngInject */
function TriggerPanelEditorCtrl($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
var _this = this;
_classCallCheck(this, TriggerPanelEditorCtrl);
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.datasourceSrv = datasourceSrv;
this.templateSrv = templateSrv;
this.popoverSrv = popoverSrv;
// Map functions for bs-typeahead
this.getGroupNames = _lodash2.default.partial(getMetricNames, this, 'groupList');
this.getHostNames = _lodash2.default.partial(getMetricNames, this, 'hostList');
this.getApplicationNames = _lodash2.default.partial(getMetricNames, this, 'appList');
// Update metric suggestion when template variable was changed
$rootScope.$on('template-variable-value-updated', function () {
return _this.onVariableChange();
});
this.ackFilters = ['all triggers', 'unacknowledged', 'acknowledged'];
this.sortByFields = [{ text: 'last change', value: 'lastchange' }, { text: 'severity', value: 'priority' }];
this.showEventsFields = [{ text: 'All', value: [0, 1] }, { text: 'OK', value: [0] }, { text: 'Problems', value: 1 }];
// Load scope defaults
var scopeDefaults = {
metric: {},
inputStyles: {},
oldTarget: _lodash2.default.cloneDeep(this.panel.triggers)
};
_lodash2.default.defaults(this, scopeDefaults);
// Set default datasource
this.datasources = _lodash2.default.map(this.getZabbixDataSources(), 'name');
if (!this.panel.datasource) {
this.panel.datasource = this.datasources[0];
}
// Load datasource
this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
_this.datasource = datasource;
_this.zabbix = datasource.zabbix;
_this.queryBuilder = datasource.queryBuilder;
_this.initFilters();
_this.panelCtrl.refresh();
});
}
_createClass(TriggerPanelEditorCtrl, [{
key: 'initFilters',
value: function initFilters() {
return Promise.all([this.suggestGroups(), this.suggestHosts(), this.suggestApps()]);
}
}, {
key: 'suggestGroups',
value: function suggestGroups() {
var _this2 = this;
return this.zabbix.getAllGroups().then(function (groups) {
_this2.metric.groupList = groups;
return groups;
});
}
}, {
key: 'suggestHosts',
value: function suggestHosts() {
var _this3 = this;
var groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
return this.zabbix.getAllHosts(groupFilter).then(function (hosts) {
_this3.metric.hostList = hosts;
return hosts;
});
}
}, {
key: 'suggestApps',
value: function suggestApps() {
var _this4 = this;
var groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
var hostFilter = this.datasource.replaceTemplateVars(this.panel.triggers.host.filter);
return this.zabbix.getAllApps(groupFilter, hostFilter).then(function (apps) {
_this4.metric.appList = apps;
return apps;
});
}
}, {
key: 'onVariableChange',
value: function onVariableChange() {
if (this.isContainsVariables()) {
this.targetChanged();
}
}
/**
* Check query for template variables
*/
}, {
key: 'isContainsVariables',
value: function isContainsVariables() {
var _this5 = this;
return _lodash2.default.some(['group', 'host', 'application'], function (field) {
return utils.isTemplateVariable(_this5.panel.triggers[field].filter, _this5.templateSrv.variables);
});
}
}, {
key: 'targetChanged',
value: function targetChanged() {
this.initFilters();
this.panelCtrl.refresh();
}
}, {
key: 'parseTarget',
value: function parseTarget() {
this.initFilters();
var newTarget = _lodash2.default.cloneDeep(this.panel.triggers);
if (!_lodash2.default.isEqual(this.oldTarget, this.panel.triggers)) {
this.oldTarget = newTarget;
this.panelCtrl.refresh();
}
}
}, {
key: 'refreshTriggerSeverity',
value: function refreshTriggerSeverity() {
_lodash2.default.each(this.triggerList, function (trigger) {
trigger.color = this.panel.triggerSeverity[trigger.priority].color;
trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
});
this.panelCtrl.refresh();
}
}, {
key: 'datasourceChanged',
value: function datasourceChanged() {
this.panelCtrl.refresh();
}
}, {
key: 'changeTriggerSeverityColor',
value: function changeTriggerSeverityColor(trigger, color) {
this.panel.triggerSeverity[trigger.priority].color = color;
this.refreshTriggerSeverity();
}
}, {
key: 'isRegex',
value: function isRegex(str) {
return utils.isRegex(str);
}
}, {
key: 'isVariable',
value: function isVariable(str) {
return utils.isTemplateVariable(str, this.templateSrv.variables);
}
}, {
key: 'getZabbixDataSources',
value: function getZabbixDataSources() {
var ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
return _lodash2.default.filter(this.datasourceSrv.getMetricSources(), function (datasource) {
return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
});
}
}]);
return TriggerPanelEditorCtrl;
}();
// Get list of metric names for bs-typeahead directive
function getMetricNames(scope, metricList) {
return _lodash2.default.uniq(_lodash2.default.map(scope.metric[metricList], 'name'));
}
function triggerPanelEditor() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/editor.html',
controller: TriggerPanelEditorCtrl
};
}

View File

@@ -1,302 +0,0 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PanelCtrl = exports.TriggerPanelCtrl = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
var _utils = require('../datasource-zabbix/utils');
var utils = _interopRequireWildcard(_utils);
var _sdk = require('app/plugins/sdk');
var _editor = require('./editor');
require('./ack-tooltip.directive');
require('./css/panel_triggers.css!');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Grafana-Zabbix
* Zabbix plugin for Grafana.
* http://github.com/alexanderzobnin/grafana-zabbix
*
* Trigger panel.
* This feature sponsored by CORE IT
* http://www.coreit.fr
*
* Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
* Licensed under the Apache License, Version 2.0
*/
var defaultSeverity = [{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true }, { priority: 3, severity: 'Average', color: '#C15C17', show: true }, { priority: 4, severity: 'High', color: '#BF1B00', show: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true }];
var panelDefaults = {
datasource: null,
triggers: {
group: { filter: "" },
host: { filter: "" },
application: { filter: "" },
trigger: { filter: "" }
},
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
limit: 10,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
triggerSeverity: defaultSeverity,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
var triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
};
var defaultTimeFormat = "DD MMM YYYY HH:mm:ss";
var TriggerPanelCtrl = function (_MetricsPanelCtrl) {
_inherits(TriggerPanelCtrl, _MetricsPanelCtrl);
/** @ngInject */
function TriggerPanelCtrl($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv) {
_classCallCheck(this, TriggerPanelCtrl);
var _this = _possibleConstructorReturn(this, (TriggerPanelCtrl.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl)).call(this, $scope, $injector));
_this.datasourceSrv = datasourceSrv;
_this.templateSrv = templateSrv;
_this.contextSrv = contextSrv;
_this.triggerStatusMap = triggerStatusMap;
_this.defaultTimeFormat = defaultTimeFormat;
// Load panel defaults
// _.cloneDeep() need for prevent changing shared defaultSeverity.
// Load object "by value" istead "by reference".
_lodash2.default.defaults(_this.panel, _lodash2.default.cloneDeep(panelDefaults));
_this.triggerList = [];
_this.refreshData();
return _this;
}
/**
* Override onInitMetricsPanelEditMode() method from MetricsPanelCtrl.
* We don't need metric editor from Metrics Panel.
*/
_createClass(TriggerPanelCtrl, [{
key: 'onInitMetricsPanelEditMode',
value: function onInitMetricsPanelEditMode() {
this.addEditorTab('Options', _editor.triggerPanelEditor, 2);
}
}, {
key: 'refresh',
value: function refresh() {
this.onMetricsPanelRefresh();
}
}, {
key: 'onMetricsPanelRefresh',
value: function onMetricsPanelRefresh() {
// ignore fetching data if another panel is in fullscreen
if (this.otherPanelInFullscreenMode()) {
return;
}
this.refreshData();
}
}, {
key: 'refreshData',
value: function refreshData() {
// clear loading/error state
delete this.error;
this.loading = true;
this.setTimeQueryStart();
var self = this;
// Load datasource
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
var zabbix = datasource.zabbix;
var showEvents = self.panel.showEvents.value;
var triggerFilter = self.panel.triggers;
// Replace template variables
var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
var getTriggers = zabbix.getTriggers(groupFilter, hostFilter, appFilter, showEvents);
return getTriggers.then(function (triggers) {
return _lodash2.default.map(triggers, function (trigger) {
var triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
var timestamp = _moment2.default.unix(trigger.lastchangeUnix);
if (self.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
if (trigger.value === '1') {
// Problem state
triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = self.panel.okEventColor;
}
triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
});
}).then(function (triggerList) {
// Request acknowledges for trigger
var eventids = _lodash2.default.map(triggerList, function (trigger) {
return trigger.lastEvent.eventid;
});
return zabbix.getAcknowledges(eventids).then(function (events) {
// Map events to triggers
_lodash2.default.each(triggerList, function (trigger) {
var event = _lodash2.default.find(events, function (event) {
return event.eventid === trigger.lastEvent.eventid;
});
if (event) {
trigger.acknowledges = _lodash2.default.map(event.acknowledges, function (ack) {
var timestamp = _moment2.default.unix(ack.clock);
if (self.panel.customLastChangeFormat) {
ack.time = timestamp.format(self.panel.lastChangeFormat);
} else {
ack.time = timestamp.format(self.defaultTimeFormat);
}
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (self.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = self.panel.ackEventColor;
}
}
});
// Filter triggers by description
var triggerFilter = self.panel.triggers.trigger.filter;
if (triggerFilter) {
triggerList = filterTriggers(triggerList, triggerFilter);
}
// Filter acknowledged triggers
if (self.panel.showTriggers === 'unacknowledged') {
triggerList = _lodash2.default.filter(triggerList, function (trigger) {
return !trigger.acknowledges;
});
} else if (self.panel.showTriggers === 'acknowledged') {
triggerList = _lodash2.default.filter(triggerList, 'acknowledges');
} else {
triggerList = triggerList;
}
// Filter triggers by severity
triggerList = _lodash2.default.filter(triggerList, function (trigger) {
return self.panel.triggerSeverity[trigger.priority].show;
});
// Sort triggers
if (self.panel.sortTriggersBy.value === 'priority') {
triggerList = _lodash2.default.sortBy(triggerList, 'priority').reverse();
} else {
triggerList = _lodash2.default.sortBy(triggerList, 'lastchangeUnix').reverse();
}
// Limit triggers number
self.triggerList = triggerList.slice(0, self.panel.limit);
// Notify panel that request is finished
self.setTimeQueryEnd();
self.loading = false;
});
});
});
}
}, {
key: 'switchComment',
value: function switchComment(trigger) {
trigger.showComment = !trigger.showComment;
}
}, {
key: 'acknowledgeTrigger',
value: function acknowledgeTrigger(trigger, message) {
var _this2 = this;
var eventid = trigger.lastEvent.eventid;
var grafana_user = this.contextSrv.user.name;
var ack_message = grafana_user + ' (Grafana): ' + message;
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
var zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message).then(function () {
_this2.refresh();
});
});
}
}]);
return TriggerPanelCtrl;
}(_sdk.MetricsPanelCtrl);
TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
function filterTriggers(triggers, triggerFilter) {
if (utils.isRegex(triggerFilter)) {
return _lodash2.default.filter(triggers, function (trigger) {
return utils.buildRegex(triggerFilter).test(trigger.description);
});
} else {
return _lodash2.default.filter(triggers, function (trigger) {
return trigger.description === triggerFilter;
});
}
}
exports.TriggerPanelCtrl = TriggerPanelCtrl;
exports.PanelCtrl = TriggerPanelCtrl;