Resolved #19 - Zabbix IT services metrics.

zabbix/datasource.js

@@ -94,6 +94,7 @@ function (angular, _, kbn) {
       // Create request for each target
       var promises = _.map(options.targets, function(target) {
 
+        if (!target.ITService) {
           // Don't show undefined and hidden targets
           if (target.hide || !target.group || !target.host
             || !target.application || !target.item) {
@@ -181,6 +182,15 @@ function (angular, _, kbn) {
                 }
               }
             });
+        } else {
+          // Don't show undefined and hidden targets
+          if (target.hide || !target.itservice || !target.slaProperty) {
+            return [];
+          } else {
+            return this.zabbixAPI.getSLA(target.itservice.serviceid, from, to)
+              .then(_.bind(zabbixHelperSrv.handleSLAResponse, zabbixHelperSrv, target.itservice, target.slaProperty));
+          }
+        }
       }, this);
 
       return $q.all(_.flatten(promises)).then(function (results) {

zabbix/helperFunctions.js

@@ -109,6 +109,35 @@ function (angular, _) {
       });
     };
 
+    /**
+     * Convert Zabbix API service.getsla response to Grafana format
+     *
+     * @param itservice
+     * @param slaProperty
+     * @param slaObject
+     * @returns {{target: *, datapoints: *[]}}
+     */
+    this.handleSLAResponse = function (itservice, slaProperty, slaObject) {
+      var targetSLA = slaObject[itservice.serviceid].sla[0];
+      if (slaProperty.property === 'status') {
+        var targetStatus = slaObject[itservice.serviceid].status;
+        return {
+          target: itservice.name + ' ' + slaProperty.name,
+          datapoints: [
+            [targetStatus, targetSLA.to * 1000]
+          ]
+        };
+      } else {
+        return {
+          target: itservice.name + ' ' + slaProperty.name,
+          datapoints: [
+            [targetSLA[slaProperty.property], targetSLA.from * 1000],
+            [targetSLA[slaProperty.property], targetSLA.to * 1000]
+          ]
+        };
+      }
+    };
+
     /**
      * Expand item parameters, for example:
      * CPU $2 time ($3) --> CPU system time (avg1)

zabbix/partials/query.editor.html

@@ -16,6 +16,16 @@
               <i class="fa fa-bars"></i>
             </a>
             <ul class="dropdown-menu pull-right" role="menu">
+              <!-- Switch to IT Services editor -->
+              <li role="menuitem" ng-hide="target.mode == 1">
+                <a class="pointer" tabindex="1"
+                   ng-click="switchEditorMode(1)">IT services</a>
+              </li>
+              <li role="menuitem" ng-show="target.mode">
+                <a class="pointer" tabindex="1"
+                   ng-click="switchEditorMode(0)">Items</a>
+              </li>
+              <li class="divider" role="menuitem"></li>
               <li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
               <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up</a></li>
               <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
@@ -42,7 +52,30 @@
         </li>
       </ul>
 
-      <ul class="tight-form-list" role="menu">
+      <!-- IT Service editor -->
+      <ul class="tight-form-list" role="menu" ng-show="target.mode == 1">
+        <li class="tight-form-item input-small">IT Service</li>
+        <li>
+          <select class="tight-form-input input-large"
+                  ng-change="selectITService()"
+                  ng-model="target.itservice"
+                  bs-tooltip="target.itservice.name.length > 25 ? target.itservice.name : ''"
+                  ng-options="itservice.name for itservice in itserviceList track by itservice.name">
+            <option value="">-- Select IT service --</option>
+          </select>
+        </li>
+        <li class="tight-form-item input-medium">IT service property</li>
+        <li>
+          <select class="tight-form-input input-medium"
+                  ng-change="selectITService()"
+                  ng-model="target.slaProperty"
+                  ng-options="slaProperty.name for slaProperty in slaPropertyList track by slaProperty.name">
+            <option value="">-- Property --</option>
+          </select>
+        </li>
+      </ul>
+
+      <ul class="tight-form-list" role="menu" ng-hide="target.mode">
         <!-- Alias -->
         <li>
           <input type="text"
@@ -55,7 +88,6 @@
         <!-- Select Host Group -->
         <li class="tight-form-item input-small" style="width: 5em">Group</li>
         <li>
-          <label>
           <select class="tight-form-input input-large"
                   ng-change="selectHostGroup()"
                   ng-model="target.group"
@@ -63,7 +95,6 @@
                   ng-options="group.visible_name ? group.visible_name : group.name for group in metric.groupList track by group.name">
             <option value="">-- Select host group --</option>
           </select>
-          </label>
           <a bs-tooltip="target.errors.metric"
              style="color: rgb(229, 189, 28)"
              ng-show="target.errors.metric">
@@ -73,7 +104,6 @@
         <!-- Select Host -->
         <li class="tight-form-item input-small" style="width: 3em">Host</li>
         <li>
-          <label>
           <select class="tight-form-input input-large"
                   ng-change="selectHost()"
                   ng-model="target.host"
@@ -81,7 +111,6 @@
                   ng-options="host.visible_name ? host.visible_name : host.name for host in metric.hostList track by host.name">
             <option value="">-- Select host --</option>
           </select>
-          </label>
           <a bs-tooltip="target.errors.metric"
              style="color: rgb(229, 189, 28)"
              ng-show="target.errors.metric">
@@ -105,7 +134,9 @@
       </ul>
 
       <div class="clearfix"></div>
+    </div>
 
+    <div class="tight-form" ng-hide="target.mode">
       <ul class="tight-form-list" role="menu">
         <li class="tight-form-item" style="min-width: 15px; text-align: center">&nbsp</li>
         <li class="tight-form-item">
@@ -116,15 +147,13 @@
         <!-- Select Application -->
         <li class="tight-form-item input-small" style="width: 5em">Application</li>
         <li>
-          <label>
           <select class="tight-form-input input-large"
-                    ng-select="selectApplication()"
+                  ng-change="selectApplication()"
                   ng-model="target.application"
                   bs-tooltip="target.application.name.length > 15 ? target.application.name : ''"
                   ng-options="app.visible_name ? app.visible_name : app.name for app in metric.applicationList track by app.name">
             <option value="">-- Select application --</option>
           </select>
-          </label>
           <a bs-tooltip="target.errors.metric"
              style="color: rgb(229, 189, 28)"
              ng-show="target.errors.metric">
@@ -134,7 +163,6 @@
         <!-- Select Item -->
         <li class="tight-form-item input-small" style="width: 3em">Item</li>
         <li>
-          <label>
           <select class="tight-form-input input-large"
                   ng-change="selectItem()"
                   ng-model="target.item"
@@ -142,7 +170,6 @@
                   ng-options="item.name for item in metric.itemList track by item.name">
             <option value="">-- Select item --</option>
           </select>
-          </label>
           <a bs-tooltip="target.errors.metric"
              style="color: rgb(229, 189, 28)"
              ng-show="target.errors.metric">
@@ -178,6 +205,7 @@
                  ng-blur="targetBlur()">
         </li>
       </ul>
+
       <div class="clearfix"></div>
     </div>
 
@@ -213,7 +241,17 @@
       </li>
       <li class="tight-form-item">
         <a ng-click="toggleEditorHelp(1)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-          max data points
+          Max data points
+        </a>
+      </li>
+      <li class="tight-form-item">
+        <a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+          IT services
+        </a>
+      </li>
+      <li class="tight-form-item">
+        <a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+          IT service property
         </a>
       </li>
     </ul>
@@ -237,5 +275,23 @@
       </ul>
     </div>
 
+    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 2">
+      <h5>IT services</h5>
+      <p>
+        Select "IT services" in targets menu to activate IT services mode.
+      </p>
+    </div>
+
+    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
+      <h5>IT service property</h5>
+      <ul>
+        <li>Zabbix returns the following availability information about IT service</li>
+        <li>Status - current status of the IT service</li>
+        <li>SLA - SLA for the given time interval</li>
+        <li>OK time - time the service was in OK state, in seconds</li>
+        <li>Problem time - time the service was in problem state, in seconds</li>
+        <li>Down time - time the service was in scheduled downtime, in seconds</li>
+      </ul>
+    </div>
   </div>
 </div>

zabbix/queryCtrl.js

@@ -2,17 +2,28 @@ define([
     'angular',
     'lodash',
     './helperFunctions'
-],
+  ],
-function (angular, _) {
+  function (angular, _) {
     'use strict';
 
     var module = angular.module('grafana.controllers');
     var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
-  module.controller('ZabbixAPIQueryCtrl', function($scope, $sce, templateSrv, zabbixHelperSrv) {
+    module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv) {
 
-    $scope.init = function() {
+      $scope.init = function () {
         $scope.targetLetters = targetLetters;
+        if ($scope.target.mode === 1) {
+          $scope.slaPropertyList = [
+            {name: "Status", property: "status"},
+            {name: "SLA", property: "sla"},
+            {name: "OK time", property: "okTime"},
+            {name: "Problem time", property: "problemTime"},
+            {name: "Down time", property: "downtimeTime"}
+          ];
+          $scope.itserviceList = [{name: "test"}];
+          $scope.updateITServiceList();
+        } else {
           $scope.metric = {
             hostGroupList: [],
             hostList: [{name: '*', visible_name: 'All'}],
@@ -27,10 +38,22 @@ function (angular, _) {
           $scope.updateItemList();
 
           setItemAlias();
+        }
 
         $scope.target.errors = validateTarget($scope.target);
       };
 
+      /**
+       * Switch query editor to specified mode.
+       * Modes:
+       *  0 - items
+       *  1 - IT services
+       */
+      $scope.switchEditorMode = function (mode) {
+        $scope.target.mode = mode;
+        $scope.init();
+      };
+
       /**
        * Take alias from item name by default
        */
@@ -40,7 +63,7 @@ function (angular, _) {
         }
       }
 
-    $scope.targetBlur = function() {
+      $scope.targetBlur = function () {
         setItemAlias();
         $scope.target.errors = validateTarget($scope.target);
         if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
@@ -49,10 +72,21 @@ function (angular, _) {
         }
       };
 
+      /**
+       * Call when IT service is selected.
+       */
+      $scope.selectITService = function () {
+        $scope.target.errors = validateTarget($scope.target);
+        if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
+          $scope.oldTarget = angular.copy($scope.target);
+          $scope.get_data();
+        }
+      };
+
       /**
        * Call when host group selected
        */
-    $scope.selectHostGroup = function() {
+      $scope.selectHostGroup = function () {
         $scope.updateHostList();
         $scope.updateAppList();
         $scope.updateItemList();
@@ -67,7 +101,7 @@ function (angular, _) {
       /**
        * Call when host selected
        */
-    $scope.selectHost = function() {
+      $scope.selectHost = function () {
         $scope.updateAppList();
         $scope.updateItemList();
 
@@ -81,7 +115,7 @@ function (angular, _) {
       /**
        * Call when application selected
        */
-    $scope.selectApplication = function() {
+      $scope.selectApplication = function () {
         $scope.updateItemList();
 
         $scope.target.errors = validateTarget($scope.target);
@@ -94,7 +128,7 @@ function (angular, _) {
       /**
        * Call when item selected
        */
-    $scope.selectItem = function() {
+      $scope.selectItem = function () {
         setItemAlias();
         $scope.target.errors = validateTarget($scope.target);
         if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
@@ -103,12 +137,12 @@ function (angular, _) {
         }
       };
 
-    $scope.duplicate = function() {
+      $scope.duplicate = function () {
         var clone = angular.copy($scope.target);
         $scope.panel.targets.push(clone);
       };
 
-    $scope.moveMetricQuery = function(fromIndex, toIndex) {
+      $scope.moveMetricQuery = function (fromIndex, toIndex) {
         _.move($scope.panel.targets, fromIndex, toIndex);
       };
 
@@ -116,10 +150,20 @@ function (angular, _) {
       // SUGGESTION QUERIES
       //////////////////////////////
 
+      /**
+       * Update list of IT services
+       */
+      $scope.updateITServiceList = function () {
+        $scope.datasource.zabbixAPI.getITService().then(function (iteservices) {
+          $scope.itserviceList = [];
+          $scope.itserviceList = $scope.itserviceList.concat(iteservices);
+        });
+      };
+
       /**
        * Update list of host groups
        */
-    $scope.updateGroupList = function() {
+      $scope.updateGroupList = function () {
         $scope.datasource.zabbixAPI.performHostGroupSuggestQuery().then(function (groups) {
           $scope.metric.groupList = [{name: '*', visible_name: 'All'}];
           addTemplatedVariables($scope.metric.groupList);
@@ -130,7 +174,7 @@ function (angular, _) {
       /**
        * Update list of hosts
        */
-    $scope.updateHostList = function() {
+      $scope.updateHostList = function () {
         var groups = $scope.target.group ? zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.group.name)) : undefined;
         if (groups) {
           $scope.datasource.zabbixAPI.hostFindQuery(groups).then(function (hosts) {
@@ -144,7 +188,7 @@ function (angular, _) {
       /**
        * Update list of host applications
        */
-    $scope.updateAppList = function() {
+      $scope.updateAppList = function () {
         var groups = $scope.target.group ? zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.group.name)) : undefined;
         var hosts = $scope.target.host ? zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.host.name)) : undefined;
         if (groups && hosts) {
@@ -162,10 +206,11 @@ function (angular, _) {
       /**
        * Update list of items
        */
-    $scope.updateItemList = function() {
+      $scope.updateItemList = function () {
         var groups = $scope.target.group ? zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.group.name)) : undefined;
         var hosts = $scope.target.host ? zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.host.name)) : undefined;
-      var apps = $scope.target.application ? zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.application.name)) : undefined;
+        var apps = $scope.target.application ?
+                     zabbixHelperSrv.splitMetrics(templateSrv.replace($scope.target.application.name)) : undefined;
         if (groups && hosts && apps) {
           $scope.datasource.zabbixAPI.itemFindQuery(groups, hosts, apps).then(function (items) {
             // Show only unique item names
@@ -187,7 +232,7 @@ function (angular, _) {
        * @param {Array} metricList List of metrics which variables add to
        */
       function addTemplatedVariables(metricList) {
-      _.each(templateSrv.variables, function(variable) {
+        _.each(templateSrv.variables, function (variable) {
           metricList.push({
             name: '$' + variable.name,
             templated: true
@@ -209,4 +254,4 @@ function (angular, _) {
 
     });
 
-});
+  });

zabbix/zabbixAPIWrapper.js

@@ -245,8 +245,8 @@ function (angular, _) {
     /**
      * Get the list of hosts
      *
-     * @param  {array} groupids
+     * @param  {string|string[]} groupids
-     * @return {array}          array of Zabbix host objects
+     * @return {Object}          array of Zabbix host objects
      */
     p.performHostSuggestQuery = function(groupids) {
       var params = {
@@ -269,7 +269,7 @@ function (angular, _) {
      *
      * @param  {array} hostids
      * @param  {array} groupids
-     * @return {array}          array of Zabbix application objects
+     * @return {Object}          array of Zabbix application objects
      */
     p.performAppSuggestQuery = function(hostids, /* optional */ groupids) {
       var params = {
@@ -289,10 +289,10 @@ function (angular, _) {
     /**
      * Items request
      *
-     * @param  {string or Array} hostids          ///////////////////////////
+     * @param  {string|string[]} hostids          ///////////////////////////
-     * @param  {string or Array} applicationids   // Zabbix API parameters //
+     * @param  {string|string[]} applicationids   // Zabbix API parameters //
-     * @param  {string or Array} groupids         ///////////////////////////
+     * @param  {string|string[]} groupids         ///////////////////////////
-     * @return {string or Array}                  Array of Zabbix API item objects
+     * @return {string|string[]}                  Array of Zabbix API item objects
      */
     p.performItemSuggestQuery = function(hostids, applicationids, /* optional */ groupids) {
       var params = {
@@ -508,6 +508,25 @@ function (angular, _) {
       });
     };
 
+    p.getITService = function(/* optional */ serviceids) {
+      var params = {
+        output: 'extend',
+        serviceids: serviceids
+      };
+      return this.performZabbixAPIRequest('service.get', params);
+    };
+
+    p.getSLA = function(serviceids, from, to) {
+      var params = {
+        serviceids: serviceids,
+        intervals: [{
+          from: from,
+          to: to
+        }]
+      };
+      return this.performZabbixAPIRequest('service.getsla', params);
+    };
+
     return ZabbixAPI;
 
   });