Compatibility with Grafana 4

[michaelroth]

It seems that the latest version (1.0.1) of kairosdb-datasource is not compatible with Grafana 4.
If I try to add kairosdb metrics to a graph it looks weird. It is just a display problem, so I think it has to do with css, are there any changes in Grafana 4 ?

[jifwin]

Hi
I am going to upgrade the plugin to support Grafana 4, but first it needs a cleanup and refactoring for Grafana 3. Stay tuned.

[samuelbenhamou]

Just did a few adaptations on the metric_names_suggestions branch to get it to display a bit more nicely on Grafana 4 while waiting for the real deal:

diff --git a/partials/query.editor.html `b/partials/query.editor.html
index e3e30bc..4a2251f 100644
--- a/partials/query.editor.html
+++ b/partials/query.editor.html
@@ -1,9 +1,7 @@
 <query-editor-row query-ctrl="ctrl" can-collapse="false">
-  <div class="tight-form">
-    <ul class="tight-form-list">
-      <li class="tight-form-item">Metric</li>
-      <li>
-        <input type="text" class="input-large tight-form-input"
+  <div class="gf-form">
+      <label class="gf-form-label width-12">Metric</label>
+        <input type="text" class="input-large gf-form-input"
         ng-model="ctrl.target.metric"
         spellcheck="false"
         bs-typeahead="ctrl.suggestMetrics"
@@ -15,47 +13,45 @@
           ng-show="ctrl.target.errors.metric">
           <i class="fa fa-warning"></i>
         </a>
-      </li>
-      <li  class="tight-form-item">
+      <label  class="gf-form-label width-88888">
         &nbsp;Peak filter
         <input class="input-medium" type="checkbox" ng-model="ctrl.target.exOuter" ng-change="ctrl.targetBlur()">
-      </li>
-       </ul>
+      </label>
        <div class="clearfix"></div>
   </div>
 
   <!-- TAGS -->
-  <div class="tight-form">
-    <ul class="tight-form-list" role="menu">
-      <li class="tight-form-item">
+  <div class="gf-form">
+  <div class="gf-form-inline">
+      <label class="gf-form-label width-12">
         Tags
-      </li>
-      <li ng-repeat="(key, value) in ctrl.target.tags track by $index" class="tight-form-item">
+      </label>
+      <label ng-repeat="(key, value) in ctrl.target.tags track by $index" class="gf-form-label width-12">
         {{key}}&nbsp;=&nbsp;{{value}}
         <a ng-click="ctrl.removeFilterTag(key)">
           <i class="fa fa-remove"></i>
         </a>
-      </li>
+      </label>
 
+        <select class="input-medium gf-form-input"
           ng-change="ctrl.changeHorAggregationInput()"
           ng-model="ctrl.target.currentHorizontalAggregatorName"
           ng-options="f for f in ['avg','dev','max','min','rate','sampler','count','sum','least_squares','percentile','scale','div', 'first', 'gaps', 'last', 'diff', 'trim']"></select>
-      </li>
+      </span>
 
       <!-- Different parameters -->
-      <li ng-show="ctrl.target.hasSamplingRate" class="tight-form-item">
+      <label ng-show="ctrl.target.hasSamplingRate" class="gf-form-label width-12">
         every
-      </li>
-      <li ng-show="ctrl.target.hasSamplingRate">
+      </label>
+      <span ng-show="ctrl.target.hasSamplingRate">
         <input type="text"
-        class="input-mini tight-form-input"
+        class="input-mini gf-form-input"
         bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
         placeholder="{{interval}}"
         ng-model="ctrl.target.horAggregator.samplingRate"
@@ -234,24 +244,24 @@
           ng-show="ctrl.target.errors.horAggregator.samplingRate">
           <i class="fa fa-warning"></i>
         </a>
-      </li>
+      </span>
 
-      <li ng-show="ctrl.target.hasUnit" class="tight-form-item">
+      <label ng-show="ctrl.target.hasUnit" class="gf-form-label width-12">
         every
-      </li>
-      <li ng-show="ctrl.target.hasUnit">
-        <select class="input-medium tight-form-input"
+      </label>
+      <span ng-show="ctrl.target.hasUnit">
+        <select class="input-medium gf-form-input"
           ng-model="ctrl.target.horAggregator.unit"
           ng-init="ctrl.target.horAggregator.unit='millisecond'"
           ng-options="f for f in ['millisecond','second','minute','hour','day','week','month','year']"></select>
-      </li>
+      </span>
 
-      <li ng-show="ctrl.target.hasFactor" class="tight-form-item">
+      <label ng-show="ctrl.target.hasFactor" class="gf-form-label width-12">
         by
-      </li>
-      <li ng-show="ctrl.target.hasFactor">
+      </label>
+      <span ng-show="ctrl.target.hasFactor">
         <input type="text"
-        class="input-mini tight-form-input"
+        class="input-mini gf-form-input"
         ng-model="ctrl.target.horAggregator.factor"
         ng-init="ctrl.target.horAggregator.factor='1'"
         spellcheck='false'
@@ -261,14 +271,14 @@
           ng-show="ctrl.target.errors.horAggregator.factor">
           <i class="fa fa-warning"></i>
         </a>
-      </li>
+      </span>
 
-      <li ng-show="ctrl.target.hasPercentile" class="tight-form-item">
+      <label ng-show="ctrl.target.hasPercentile" class="gf-form-label width-12">
         percentile
-      </li>
-      <li ng-show="ctrl.target.hasPercentile">
+      </label>
+      <span ng-show="ctrl.target.hasPercentile">
         <input type="text"
-        class="input-mini tight-form-input"
+        class="input-mini gf-form-input"
         ng-model="ctrl.target.horAggregator.percentile"
         ng-init="ctrl.target.horAggregator.percentile='0.75'"
         spellcheck='false'
@@ -278,42 +288,42 @@
           ng-show="ctrl.target.errors.horAggregator.percentile">
           <i class="fa fa-warning"></i>
         </a>
-      </li>
+      </span>
 
-      <li ng-show="ctrl.target.hasTrim" class="tight-form-item">
+      <label ng-show="ctrl.target.hasTrim" class="gf-form-label width-12">
         by
-      </li>
-      <li ng-show="ctrl.target.hasTrim">
-        <select class="input-medium tight-form-input"
+      </label>
+      <span ng-show="ctrl.target.hasTrim">
+        <select class="input-medium gf-form-input"
           ng-model="ctrl.target.horAggregator.trim"
           ng-init="ctrl.target.horAggregator.trim='both'"
           ng-options="f for f in ['both','first','last']"></select>
-      </li>
+      </span>
 
-      <li class="tight-form-item" ng-show="ctrl.target.addHorizontalAggregatorMode">
+      <label class="gf-form-label width-2.5" ng-show="ctrl.target.addHorizontalAggregatorMode">
         <a ng-click="ctrl.addHorizontalAggregator()">
           <i ng-hide="ctrl.target.isAggregatorValid" class="fa fa-remove"></i>
           <i ng-show="ctrl.target.isAggregatorValid" class="fa fa-plus-circle"></i>
         </a>
-      </li>
-    </ul>
+      </label>
     <div class="clearfix"></div>
   </div>
+  </div>
 
   <!-- ALIAS -->
-  <div class="tight-form">
-    <ul class="tight-form-list">
-      <li class="tight-form-item">Alias</li>
-      <li>
-        <select class="input-small tight-form-input ng-pristine ng-valid ng-not-empty" ng-change="ctrl.targetBlur()" 
+  <div class="gf-form">
+  <div class="gf-form-inline">
+      <label class="gf-form-label width-12">Alias</label>
+      <span>
+        <select class="input-smagl gf-form-input ng-pristine ng-valid ng-not-empty" ng-change="ctrl.targetBlur()" 
           ng-model="ctrl.target.aliasMode" ng-options="o for o in ['default', 'custom']"/>
-      </li>
-      <li>
         spellcheck='false' ng-blur="ctrl.targetBlur()" ng-readonly="ctrl.target.aliasMode!='custom'"
         ng-style="ctrl.target.aliasMode!='custom' && {color : 'gray'}">
-      </li>
-      <li class="tight-form-item">
+      </span>
+      <label class="gf-form-label width-2">
         <i class="fa fa-question-circle ng-scope text-left" data-placement="right" data-html="true"
            bs-tooltip="'Expression used for metric and group aliasing <br />
            The following variables are available to differentiate the data groups: <br />
@@ -321,10 +331,10 @@
            $_value_group_[n] -> The group number in the nth value groupby <br />
            $_time_group_[n] -> The group number in the nth time groupby <br />'">
         </i>
-      </li>
-    </ul>
+      </label>
   <div class="clearfix"></div>
   </div>
+  </div>
 
 </query-editor-row>
 
diff --git a/query_ctrl.js b/query_ctrl.js
index ff80572..cf3a023 100644
--- a/query_ctrl.js
+++ b/query_ctrl.js
@@ -140,7 +140,7 @@ function (angular, _, sdk) {
           if (!this.target.groupByTags) {
             this.target.groupByTags = [];
           }
-          if (!_.contains(this.target.groupByTags, this.target.groupBy.tagKey)) {
+          if (!_.includes(this.target.groupByTags, this.target.groupBy.tagKey)) {
             this.target.groupByTags.push(this.target.groupBy.tagKey);
             this.targetBlur();
           }
@@ -297,15 +297,15 @@ function (angular, _, sdk) {
     };
 
     KairosDBQueryCtrl.prototype.changeHorAggregationInput = function() {
-      this.target.hasSamplingRate = _.contains(
+      this.target.hasSamplingRate = _.includes(
           ['avg','dev','max','min','sum','least_squares','count','percentile', 'first', 'gaps', 'last'],
           this.target.currentHorizontalAggregatorName);
-      this.target.hasUnit = _.contains(['sampler','rate'], this.target.currentHorizontalAggregatorName);
-      this.target.hasFactor = _.contains(['div','scale'], this.target.currentHorizontalAggregatorName);
+      this.target.hasUnit = _.includes(['sampler','rate'], this.target.currentHorizontalAggregatorName);
+      this.target.hasFactor = _.includes(['div','scale'], this.target.currentHorizontalAggregatorName);
 
-      this.target.hasNothing = _.contains(['diff'], this.target.currentHorizontalAggregatorName);
+      this.target.hasNothing = _.includes(['diff'], this.target.currentHorizontalAggregatorName);
       this.target.hasPercentile = 'percentile' === this.target.currentHorizontalAggregatorName;
-      this.target.hasTrim = _.contains(['trim'], this.target.currentHorizontalAggregatorName);
+      this.target.hasTrim = _.includes(['trim'], this.target.currentHorizontalAggregatorName);
       this.validateHorizontalAggregator();
     }; 

[jifwin]

Could you please submit a PR and check it is compliant with recent changes?

[samuelbenhamou]

from the master branch ? Cause initially what led me to use the other one was the fact that it did not run correctly

[jifwin]

Ahh...right, we should have another branch for Grafana 4 for now. Please use https://github.com/grafana/kairosdb-datasource/tree/grafana4 branch.

[samuelbenhamou]

module.js gets a 404...as in the old master branch...as it is not present in the tree

[jifwin]

The problem is that there was a migration to typescript and now gruntfile is missing and installation instructions miss grunting too. I'm going to work on that soon.

[jifwin]

I updated the installation. Clone grafana4 branch, gruntify and then it should work fine.

[samuelbenhamou]

damn, should have dropped an eye here before doing stuff on my own. generated the missing files from the opentsdb tree...will look at what you did

[OskarKjellin]

Is there any support for grafana4? From what I can see, master and the grafan4 branch are equal

[samuelbenhamou]

Hi,
I submitted a PR a few days ago to help them support it.
So far on my side it seems to be working correctly and you could eventually check it : https://github.com/samuelbenhamou/kairosdb-datasource

On a side note I also used this https://github.com/skbohra/grafana/tree/grafana-kairosdb-alerting a base to rebuild grafana and support alerting with Kairos:
https://github.com/samuelbenhamou/grafana
If you want to use it you have to make sure your plugin.json has the id "kairosdb" and not the original one.

Regards

[OskarKjellin]

I tried it @samuelbenhamou and it seems to be working

[jifwin]

#40