progress on influxdb datasource and target editor

src/app/controllers/all.js

@@ -8,4 +8,5 @@ define([
   './metricKeys',
   './graphiteTarget',
   './graphiteImport',
+  './influxTargetCtrl',
 ], function () {});

src/app/controllers/influxTargetCtrl.js

@@ -0,0 +1,24 @@
+define([
+  'angular'
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('kibana.controllers');
+
+  module.controller('InfluxTargetCtrl', function($scope) {
+
+    $scope.init = function() {
+      if (!$scope.target.function) {
+        $scope.target.function = 'mean';
+      }
+    };
+
+    $scope.duplicate = function() {
+      var clone = angular.copy($scope.target);
+      $scope.panel.targets.push(clone);
+    };
+
+  });
+
+});

src/app/panels/graphite/module.js

@@ -244,6 +244,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       var graphiteQuery = {
         range: $scope.rangeUnparsed,
+        interval: $scope.interval,
         targets: $scope.panel.targets,
         format: $scope.panel.renderer === 'png' ? 'png' : 'json',
         maxDataPoints: $scope.panel.span * 50,
@@ -307,7 +308,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       if (datapoints && datapoints.length > 0) {
         var last = moment.utc(datapoints[datapoints.length - 1][1] * 1000);
         var from = moment.utc($scope.range.from);
-        if (last - from < -1000) {
+        if (last - from < -10000) {
           $scope.datapointsOutside = true;
         }
       }

src/app/partials/graphite/editor.html

@@ -53,7 +53,7 @@
         </ul>
 
         <input  type="text"
-                class="grafana-target-text-input"
+                class="grafana-target-text-input span12"
                 ng-model="target.target"
                 focus-me="showTextEditor"
                 spellcheck='false'

src/app/partials/influxdb/editor.html

@@ -1 +1,92 @@
-<h5>InfluxDB<h5>
+<h5>InfluxDB queries<h5>
+
+<div class="editor-row">
+
+  <div  ng-repeat="target in panel.targets"
+        class="grafana-target"
+        ng-class="{'grafana-target-hidden': target.hide}"
+        ng-controller="InfluxTargetCtrl"
+        ng-init="init()">
+
+    <div class="grafana-target-inner-wrapper">
+      <div class="grafana-target-inner">
+        <ul class="grafana-target-controls">
+          <li class="dropdown">
+            <a  class="pointer dropdown-toggle"
+                data-toggle="dropdown"
+                tabindex="1">
+              <i class="icon-cog"></i>
+            </a>
+            <ul class="dropdown-menu pull-right" role="menu">
+              <li role="menuitem">
+                <a  tabindex="1"
+                    ng-click="duplicate()">
+                  Duplicate
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <a class="pointer" tabindex="1" ng-click="removeTarget(target)">
+              <i class="icon-remove"></i>
+            </a>
+          </li>
+        </ul>
+
+        <ul class="grafana-target-controls-left">
+          <li>
+            <a  class="grafana-target-segment"
+                ng-click="target.hide = !target.hide; get_data();"
+                role="menuitem">
+              <i class="icon-eye-open"></i>
+            </a>
+          </li>
+        </ul>
+
+        <ul class="grafana-segment-list" role="menu">
+          <li>
+            <a class="grafana-target-segment">
+              From series
+            </a>
+          </li>
+          <li>
+            <input type="text"
+                   class="input-medium grafana-target-segment-input"
+                   ng-model="target.series"
+                   spellcheck='false'
+                   placeholder="series name"
+                   ng-model-onblur ng-change="targetTextChanged()" >
+          </li>
+          <li>
+            <a class="grafana-target-segment">
+              Select
+            </a>
+          </li>
+          <li>
+            <input type="text"
+                   class="input-medium grafana-target-segment-input"
+                   ng-model="target.column"
+                   placeholder="value column"
+                   spellcheck='false'
+                   ng-model-onblur ng-change="targetTextChanged()" >
+          </li>
+          <li>
+            <a class="grafana-target-segment">
+              Function
+            </a>
+          </li>
+          <li>
+            <select class="input-small grafana-target-segment-input" ng-model="target.function" ng-options="f for f in ['mean', 'sum']" ></select>
+          </li>
+        </ul>
+
+
+        <div class="clearfix"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="editor-row" style="margin-top: 20px" ng-show="editor.index == 1">
+  <button class="btn btn-success pull-right" ng-click="add_target(panel.target)">Add target</button>
+</div>

src/app/services/influxdb/influxdbDatasource.js

@@ -15,15 +15,30 @@ function (angular, _) {
       this.url = datasource.url;
       this.username = datasource.username;
       this.password = datasource.password;
+
+      this.templateSettings = {
+        interpolate : /\[\[([\s\S]+?)\]\]/g,
+      };
     }
 
-    InfluxDatasource.prototype.query = function() {
+    InfluxDatasource.prototype.query = function(options) {
+      var target = options.targets[0];
 
-      var q = "select value from request_count where time > now() - 1h group by time(1m)";
+      var template = "select [[func]]([[column]]) from [[series]] where [[timeFilter]] group by time([[interval]])";
+      var templateData = {
+        series: target.series,
+        column: target.column,
+        func: target.function,
+        timeFilter: getTimeFilter(options),
+        interval: options.interval
+      };
+
+      var query = _.template(template, templateData, this.templateSettings);
+      console.log(query);
 
       var output = { data: [] };
 
-      return this.doInfluxRequest(q).then(function(results) {
+      return this.doInfluxRequest(query).then(function(results) {
 
         _.each(results.data, function(series) {
           var timeCol = series.columns.indexOf('time');
@@ -38,10 +53,11 @@ function (angular, _) {
             var target = series.name + "." + column;
             var datapoints = [];
 
-            for(var i=0; i < series.points.length; i++) {
+            var i, y;
+            for(i = series.points.length - 1, y = 0; i >= 0; i--, y++) {
               var t = Math.floor(series.points[i][timeCol] / 1000);
               var v = series.points[i][index];
-              datapoints[i] = [v,t];
+              datapoints[y] = [v,t];
             }
 
             output.data.push({ target:target, datapoints:datapoints });
@@ -69,6 +85,10 @@ function (angular, _) {
       return $http(options);
     };
 
+    function getTimeFilter(options) {
+      return "time > now() - 6h";
+    }
+
 
     return InfluxDatasource;
 

src/css/less/grafana.less

@@ -318,15 +318,32 @@
 
 input[type=text].grafana-target-text-input {
   padding: 5px 7px;
-  border: 1px solid @grafanaTargetSegmentBorder;
+  border: none;
   margin: 0px;
   background: transparent;
-  width: 80%;
   float: left;
   color: @grafanaTargetColor;
   border-radius: 0;
 }
 
+input[type=text].grafana-target-segment-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 22px;
+  line-height: 22px;
+}
+
+select.grafana-target-segment-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 30px;
+  line-height: 30px;
+}
+
 .grafana-target .dropdown {
   padding: 0; margin: 0;
 }