Able to use both time and range for trends config, #364

dist/datasource-zabbix/datasource.js

@@ -215,6 +215,7 @@ System.register(['lodash', 'app/core/utils/datemath', './utils', './migrations',
           // Use trends instead history since specified time
           this.trends = instanceSettings.jsonData.trends;
           this.trendsFrom = instanceSettings.jsonData.trendsFrom || '7d';
+          this.trendsRange = instanceSettings.jsonData.trendsRange || '4d';
 
           // Set cache update interval
           var ttl = instanceSettings.jsonData.cacheTTL || '1h';
@@ -251,7 +252,10 @@ System.register(['lodash', 'app/core/utils/datemath', './utils', './migrations',
             var timeTo = Math.ceil(dateMath.parse(options.range.to) / 1000);
 
             var useTrendsFrom = Math.ceil(dateMath.parse('now-' + this.trendsFrom) / 1000);
-            var useTrends = timeFrom <= useTrendsFrom && this.trends;
+            var useTrendsRange = Math.ceil(utils.parseInterval(this.trendsRange) / 1000);
+            var useTrends = this.trends && (timeFrom <= useTrendsFrom || timeTo - timeFrom >= useTrendsRange);
+
+            console.log(useTrends);
 
             // Get alerts for current panel
             if (this.alertingEnabled) {
@@ -334,10 +338,12 @@ System.register(['lodash', 'app/core/utils/datemath', './utils', './migrations',
               var getHistoryPromise = void 0;
 
               if (useTrends) {
-                var valueType = _this2.getTrendValueType(target);
+                (function () {
-                getHistoryPromise = _this2.zabbix.getTrend(items, timeFrom, timeTo).then(function (history) {
+                  var valueType = _this2.getTrendValueType(target);
-                  return responseHandler.handleTrends(history, items, valueType);
+                  getHistoryPromise = _this2.zabbix.getTrend(items, timeFrom, timeTo).then(function (history) {
-                });
+                    return responseHandler.handleTrends(history, items, valueType);
+                  });
+                })();
               } else {
                 // Use history
                 getHistoryPromise = _this2.zabbix.getHistory(items, timeFrom, timeTo).then(function (history) {
@@ -384,18 +390,20 @@ System.register(['lodash', 'app/core/utils/datemath', './utils', './migrations',
 
             // Apply aggregations
             if (aggregationFunctions.length) {
-              var dp = _.map(timeseries_data, 'datapoints');
+              (function () {
-              dp = sequence(aggregationFunctions)(dp);
+                var dp = _.map(timeseries_data, 'datapoints');
+                dp = sequence(aggregationFunctions)(dp);
 
-              var aggFuncNames = _.map(metricFunctions.getCategories()['Aggregate'], 'name');
+                var aggFuncNames = _.map(metricFunctions.getCategories()['Aggregate'], 'name');
-              var lastAgg = _.findLast(target.functions, function (func) {
+                var lastAgg = _.findLast(target.functions, function (func) {
-                return _.includes(aggFuncNames, func.def.name);
+                  return _.includes(aggFuncNames, func.def.name);
-              });
+                });
 
-              timeseries_data = [{
+                timeseries_data = [{
-                target: lastAgg.text,
+                  target: lastAgg.text,
-                datapoints: dp
+                  datapoints: dp
-              }];
+                }];
+              })();
             }
 
             // Apply alias functions
@@ -415,10 +423,12 @@ System.register(['lodash', 'app/core/utils/datemath', './utils', './migrations',
               return func.def.name === 'timeShift';
             });
             if (timeShiftFunc) {
-              var shift = timeShiftFunc.params[0];
+              (function () {
-              _.forEach(timeseries_data, function (series) {
+                var shift = timeShiftFunc.params[0];
-                series.datapoints = dataProcessor.unShiftTimeSeries(shift, series.datapoints);
+                _.forEach(timeseries_data, function (series) {
-              });
+                  series.datapoints = dataProcessor.unShiftTimeSeries(shift, series.datapoints);
+                });
+              })();
             }
           }
         }, {

dist/datasource-zabbix/partials/config.html

@@ -27,51 +27,66 @@
     </input>
   </div>
 
+  <gf-form-switch class="gf-form" label-class="width-7"
+    label="Trends"
+    checked="ctrl.current.jsonData.trends"
+    switch-class="max-width-5">
+  </gf-form-switch>
   <div class="gf-form-inline">
-    <div class="gf-form">
-      <label class="gf-form-label width-7">Trends</label>
-    </div>
-    <gf-form-switch class="gf-form" label-class="width-5"
-      label="Enable"
-      checked="ctrl.current.jsonData.trends"
-      switch-class="max-width-6">
-    </gf-form-switch>
     <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
       <span class="gf-form-label width-7">
-        Use from
+        After
+        <info-popover mode="right-normal">
+          Time after which trends will be used.
+          Best practice is to set this value to your history storage period (7d, 30d, etc).
+        </info-popover>
       </span>
       <input class="gf-form-input max-width-5"
-             type="text"
+        type="text"
-             ng-model='ctrl.current.jsonData.trendsFrom'
+        ng-model='ctrl.current.jsonData.trendsFrom'
-             placeholder="7d">
+        placeholder="7d">
+      </input>
+    </div>
+    <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
+      <span class="gf-form-label width-7">
+        Range
+        <info-popover mode="right-normal">
+          Time range width after which trends will be used instead of history.
+          It's better to set this value in range of 4 to 7 days to prevent loading large amount of history data.
+        </info-popover>
+      </span>
+      <input class="gf-form-input max-width-5" type="text" ng-model='ctrl.current.jsonData.trendsRange' placeholder="4d">
       </input>
     </div>
   </div>
 
   <div class="gf-form">
     <span class="gf-form-label width-12">
-      Cache update interval
+      Cache TTL
+      <info-popover mode="right-normal">
+        Zabbix data source caches metric names in memory. Specify how often data will be updated.
+      </info-popover>
     </span>
-    <input class="gf-form-input max-width-4"
+    <input class="gf-form-input max-width-5"
-           type="text"
+      type="text"
-           ng-model='ctrl.current.jsonData.cacheTTL'
+      ng-model='ctrl.current.jsonData.cacheTTL'
-           placeholder="1h">
+      placeholder="1h">
     </input>
   </div>
 </div>
 
 <div class="gf-form-group">
   <h3 class="page-heading">Alerting</h3>
-  <gf-form-switch class="gf-form" label-class="width-8"
+  <gf-form-switch class="gf-form" label-class="width-9"
     label="Enable alerting"
     checked="ctrl.current.jsonData.alerting">
   </gf-form-switch>
-  <gf-form-switch class="gf-form" label-class="width-8"
+  <gf-form-switch class="gf-form" label-class="width-9"
     label="Add thresholds"
     checked="ctrl.current.jsonData.addThresholds">
   </gf-form-switch>
   <div class="gf-form max-width-20">
-    <span class="gf-form-label width-8">Min severity</span>
+    <span class="gf-form-label width-9">Min severity</span>
     <div class="gf-form-select-wrapper max-width-16">
       <select class="gf-form-input" ng-model="ctrl.current.jsonData.alertingMinSeverity"
         ng-options="s.val as s.text for s in [

dist/test/datasource-zabbix/datasource.js

@@ -73,6 +73,7 @@ var ZabbixAPIDatasource = function () {
     // Use trends instead history since specified time
     this.trends = instanceSettings.jsonData.trends;
     this.trendsFrom = instanceSettings.jsonData.trendsFrom || '7d';
+    this.trendsRange = instanceSettings.jsonData.trendsRange || '4d';
 
     // Set cache update interval
     var ttl = instanceSettings.jsonData.cacheTTL || '1h';
@@ -109,7 +110,10 @@ var ZabbixAPIDatasource = function () {
       var timeTo = Math.ceil(dateMath.parse(options.range.to) / 1000);
 
       var useTrendsFrom = Math.ceil(dateMath.parse('now-' + this.trendsFrom) / 1000);
-      var useTrends = timeFrom <= useTrendsFrom && this.trends;
+      var useTrendsRange = Math.ceil(utils.parseInterval(this.trendsRange) / 1000);
+      var useTrends = this.trends && (timeFrom <= useTrendsFrom || timeTo - timeFrom >= useTrendsRange);
+
+      console.log(useTrends);
 
       // Get alerts for current panel
       if (this.alertingEnabled) {
@@ -192,10 +196,12 @@ var ZabbixAPIDatasource = function () {
         var getHistoryPromise = void 0;
 
         if (useTrends) {
-          var valueType = _this2.getTrendValueType(target);
+          (function () {
-          getHistoryPromise = _this2.zabbix.getTrend(items, timeFrom, timeTo).then(function (history) {
+            var valueType = _this2.getTrendValueType(target);
-            return _responseHandler2.default.handleTrends(history, items, valueType);
+            getHistoryPromise = _this2.zabbix.getTrend(items, timeFrom, timeTo).then(function (history) {
-          });
+              return _responseHandler2.default.handleTrends(history, items, valueType);
+            });
+          })();
         } else {
           // Use history
           getHistoryPromise = _this2.zabbix.getHistory(items, timeFrom, timeTo).then(function (history) {
@@ -242,18 +248,20 @@ var ZabbixAPIDatasource = function () {
 
       // Apply aggregations
       if (aggregationFunctions.length) {
-        var dp = _lodash2.default.map(timeseries_data, 'datapoints');
+        (function () {
-        dp = sequence(aggregationFunctions)(dp);
+          var dp = _lodash2.default.map(timeseries_data, 'datapoints');
+          dp = sequence(aggregationFunctions)(dp);
 
-        var aggFuncNames = _lodash2.default.map(metricFunctions.getCategories()['Aggregate'], 'name');
+          var aggFuncNames = _lodash2.default.map(metricFunctions.getCategories()['Aggregate'], 'name');
-        var lastAgg = _lodash2.default.findLast(target.functions, function (func) {
+          var lastAgg = _lodash2.default.findLast(target.functions, function (func) {
-          return _lodash2.default.includes(aggFuncNames, func.def.name);
+            return _lodash2.default.includes(aggFuncNames, func.def.name);
-        });
+          });
 
-        timeseries_data = [{
+          timeseries_data = [{
-          target: lastAgg.text,
+            target: lastAgg.text,
-          datapoints: dp
+            datapoints: dp
-        }];
+          }];
+        })();
       }
 
       // Apply alias functions
@@ -273,10 +281,12 @@ var ZabbixAPIDatasource = function () {
         return func.def.name === 'timeShift';
       });
       if (timeShiftFunc) {
-        var shift = timeShiftFunc.params[0];
+        (function () {
-        _lodash2.default.forEach(timeseries_data, function (series) {
+          var shift = timeShiftFunc.params[0];
-          series.datapoints = _dataProcessor2.default.unShiftTimeSeries(shift, series.datapoints);
+          _lodash2.default.forEach(timeseries_data, function (series) {
-        });
+            series.datapoints = _dataProcessor2.default.unShiftTimeSeries(shift, series.datapoints);
+          });
+        })();
       }
     }
   }, {

src/datasource-zabbix/datasource.js

@@ -31,6 +31,7 @@ class ZabbixAPIDatasource {
     // Use trends instead history since specified time
     this.trends           = instanceSettings.jsonData.trends;
     this.trendsFrom       = instanceSettings.jsonData.trendsFrom || '7d';
+    this.trendsRange      = instanceSettings.jsonData.trendsRange || '4d';
 
     // Set cache update interval
     var ttl = instanceSettings.jsonData.cacheTTL || '1h';
@@ -61,7 +62,13 @@ class ZabbixAPIDatasource {
     let timeTo = Math.ceil(dateMath.parse(options.range.to) / 1000);
 
     let useTrendsFrom = Math.ceil(dateMath.parse('now-' + this.trendsFrom) / 1000);
-    let useTrends = (timeFrom <= useTrendsFrom) && this.trends;
+    let useTrendsRange = Math.ceil(utils.parseInterval(this.trendsRange) / 1000);
+    let useTrends = this.trends && (
+      (timeFrom <= useTrendsFrom) ||
+      (timeTo - timeFrom >= useTrendsRange)
+    );
+
+    console.log(useTrends);
 
     // Get alerts for current panel
     if (this.alertingEnabled) {

src/datasource-zabbix/partials/config.html

@@ -27,51 +27,66 @@
     </input>
   </div>
 
+  <gf-form-switch class="gf-form" label-class="width-7"
+    label="Trends"
+    checked="ctrl.current.jsonData.trends"
+    switch-class="max-width-5">
+  </gf-form-switch>
   <div class="gf-form-inline">
-    <div class="gf-form">
-      <label class="gf-form-label width-7">Trends</label>
-    </div>
-    <gf-form-switch class="gf-form" label-class="width-5"
-      label="Enable"
-      checked="ctrl.current.jsonData.trends"
-      switch-class="max-width-6">
-    </gf-form-switch>
     <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
       <span class="gf-form-label width-7">
-        Use from
+        After
+        <info-popover mode="right-normal">
+          Time after which trends will be used.
+          Best practice is to set this value to your history storage period (7d, 30d, etc).
+        </info-popover>
       </span>
       <input class="gf-form-input max-width-5"
-             type="text"
+        type="text"
-             ng-model='ctrl.current.jsonData.trendsFrom'
+        ng-model='ctrl.current.jsonData.trendsFrom'
-             placeholder="7d">
+        placeholder="7d">
+      </input>
+    </div>
+    <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
+      <span class="gf-form-label width-7">
+        Range
+        <info-popover mode="right-normal">
+          Time range width after which trends will be used instead of history.
+          It's better to set this value in range of 4 to 7 days to prevent loading large amount of history data.
+        </info-popover>
+      </span>
+      <input class="gf-form-input max-width-5" type="text" ng-model='ctrl.current.jsonData.trendsRange' placeholder="4d">
       </input>
     </div>
   </div>
 
   <div class="gf-form">
     <span class="gf-form-label width-12">
-      Cache update interval
+      Cache TTL
+      <info-popover mode="right-normal">
+        Zabbix data source caches metric names in memory. Specify how often data will be updated.
+      </info-popover>
     </span>
-    <input class="gf-form-input max-width-4"
+    <input class="gf-form-input max-width-5"
-           type="text"
+      type="text"
-           ng-model='ctrl.current.jsonData.cacheTTL'
+      ng-model='ctrl.current.jsonData.cacheTTL'
-           placeholder="1h">
+      placeholder="1h">
     </input>
   </div>
 </div>
 
 <div class="gf-form-group">
   <h3 class="page-heading">Alerting</h3>
-  <gf-form-switch class="gf-form" label-class="width-8"
+  <gf-form-switch class="gf-form" label-class="width-9"
     label="Enable alerting"
     checked="ctrl.current.jsonData.alerting">
   </gf-form-switch>
-  <gf-form-switch class="gf-form" label-class="width-8"
+  <gf-form-switch class="gf-form" label-class="width-9"
     label="Add thresholds"
     checked="ctrl.current.jsonData.addThresholds">
   </gf-form-switch>
   <div class="gf-form max-width-20">
-    <span class="gf-form-label width-8">Min severity</span>
+    <span class="gf-form-label width-9">Min severity</span>
     <div class="gf-form-select-wrapper max-width-16">
       <select class="gf-form-input" ng-model="ctrl.current.jsonData.alertingMinSeverity"
         ng-options="s.val as s.text for s in [