feat(graph): more work on graph panel and support for non time series

public/app/core/directives/metric_segment.js

@@ -170,6 +170,7 @@ function (_, $, coreModule) {
       },
       link: {
         pre: function postLink($scope, elem, attrs) {
+          var cachedOptions;
 
           $scope.valueToSegment = function(value) {
             var option = _.find($scope.options, {value: value});
@@ -189,13 +190,20 @@ function (_, $, coreModule) {
               });
               return $q.when(optionSegments);
             } else {
-              return $scope.getOptions();
+              return $scope.getOptions().then(function(options) {
+                cachedOptions = options;
+                return _.map(options, function(option) {
+                  return uiSegmentSrv.newSegment({value: option.text});
+                });
+              });
             }
           };
 
           $scope.onSegmentChange = function() {
-            if ($scope.options) {
-              var option = _.find($scope.options, {text: $scope.segment.value});
+            var options = $scope.options || cachedOptions;
+
+            if (options) {
+              var option = _.find(options, {text: $scope.segment.value});
               if (option && option.value !== $scope.property) {
                 $scope.property = option.value;
               } else if (attrs.custom !== 'false') {

public/app/plugins/panel/graph/axes_editor.html

@@ -49,9 +49,9 @@
 		</div>
 
     <!-- Table mode -->
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table' || ctrl.panel.xaxis.mode === 'json'">
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'custom'">
 			<label class="gf-form-label width-5">Name</label>
-      <metric-segment-model property="ctrl.panel.xaxis.name" get-options="ctrl.getXAxisNameOptions()" on-change="ctrl.xAxisOptionChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
+      <metric-segment-model property="ctrl.panel.xaxis.name" get-options="ctrl.getDataPropertyNames()" on-change="ctrl.xAxisOptionChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
 		</div>
 
 		<!-- Series mode -->

public/app/plugins/panel/graph/axes_editor.ts

@@ -40,6 +40,12 @@ export class AxesEditorCtrl {
       {text: 'Total', value: 'total'},
       {text: 'Count', value: 'count'},
     ];
+
+    if (this.panel.xaxis.mode === 'custom') {
+      if (!this.panel.xaxis.name) {
+        this.panel.xaxis.name = 'specify field';
+      }
+    }
   }
 
   setUnitFormat(axis, subItem) {
@@ -77,16 +83,14 @@ export class AxesEditorCtrl {
     }
   }
 
-  getXAxisNameOptions()  {
-    return this.$q.when([
-      {text: 'Avg', value: 'avg'}
-    ]);
-  }
+  getDataPropertyNames() {
+    var props = this.panelCtrl.processor.getDocProperties(this.panelCtrl.dataList);
+    var items = props.map(prop => {
+      return {text: prop};
+    });
+    console.log(items);
 
-  getXAxisValueOptions()  {
-    return this.$q.when(this.panelCtrl.processor.getXAxisValueOptions({
-      dataList: this.panelCtrl.dataList
-    }));
+    return this.$q.when(items);
   }
 
 }
@@ -97,7 +101,7 @@ export function axesEditorComponent() {
   return {
     restrict: 'E',
     scope: true,
-    templateUrl: 'public/app/plugins/panel/graph/tab_axes.html',
+    templateUrl: 'public/app/plugins/panel/graph/axes_editor.html',
     controller: AxesEditorCtrl,
   };
 }

public/app/plugins/panel/graph/data_processor.ts

@@ -5,6 +5,8 @@ import _ from 'lodash';
 import TimeSeries from 'app/core/time_series2';
 import {colors} from 'app/core/core';
 
+
+
 export class DataProcessor {
 
   constructor(private panel) {
@@ -64,6 +66,26 @@ export class DataProcessor {
 
   customHandler(dataItem) {
     console.log('custom', dataItem);
+    let nameField = this.panel.xaxis.name;
+    if (!nameField) {
+      throw {message: 'No field name specified to use for x-axis, check your axes settings'};
+    }
+
+  //   let valueField = this.panel.xaxis.esValueField;
+  //   let datapoints = _.map(seriesData.datapoints, (doc) => {
+  //     return [
+  //       pluckDeep(doc, valueField),  // Y value
+  //       pluckDeep(doc, xField)       // X value
+  //     ];
+  //   });
+  //
+  //   // Remove empty points
+  //   datapoints = _.filter(datapoints, (point) => {
+  //     return point[0] !== undefined;
+  //   });
+  //
+  //   var alias = valueField;
+  //   re
     return [];
   }
 
@@ -120,6 +142,21 @@ export class DataProcessor {
     }
   }
 
+  getDocProperties(dataList) {
+    if (dataList.length === 0) {
+      return [];
+    }
+
+    var firstItem = dataList[0];
+    if (firstItem.type === 'docs'){
+      if (firstItem.datapoints.length === 0) {
+        return [];
+      }
+
+      return this.getPropertiesFromDoc(firstItem.datapoints[0]);
+    }
+  }
+
   getXAxisValueOptions(options) {
     switch (this.panel.xaxis.mode) {
       case 'time': {
@@ -136,40 +173,41 @@ export class DataProcessor {
       }
     }
   }
-}
 
-// function getFieldsFromESDoc(doc) {
-//   let fields = [];
-//   let fieldNameParts = [];
-//
-//   function getFieldsRecursive(obj) {
-//     _.forEach(obj, (value, key) => {
-//       if (_.isObject(value)) {
-//         fieldNameParts.push(key);
-//         getFieldsRecursive(value);
-//       } else {
-//         let field = fieldNameParts.concat(key).join('.');
-//         fields.push(field);
-//       }
-//     });
-//     fieldNameParts.pop();
-//   }
-//
-//   getFieldsRecursive(doc);
-//   return fields;
-// }
-//
-// function pluckDeep(obj: any, property: string) {
-//   let propertyParts = property.split('.');
-//   let value = obj;
-//   for (let i = 0; i < propertyParts.length; ++i) {
-//     if (value[propertyParts[i]]) {
-//       value = value[propertyParts[i]];
-//     } else {
-//       return undefined;
-//     }
-//   }
-//   return value;
-// }
+  getPropertiesFromDoc(doc) {
+    let props = [];
+    let propParts = [];
+
+    function getPropertiesRecursive(obj) {
+      _.forEach(obj, (value, key) => {
+        if (_.isObject(value)) {
+          propParts.push(key);
+          getPropertiesRecursive(value);
+        } else {
+          let field = propParts.concat(key).join('.');
+          props.push(field);
+        }
+      });
+      propParts.pop();
+    }
+
+    getPropertiesRecursive(doc);
+    return props;
+  }
+
+  pluckDeep(obj: any, property: string) {
+    let propertyParts = property.split('.');
+    let value = obj;
+    for (let i = 0; i < propertyParts.length; ++i) {
+      if (value[propertyParts[i]]) {
+        value = value[propertyParts[i]];
+      } else {
+        return undefined;
+      }
+    }
+    return value;
+  }
+
+}
 
 

public/app/plugins/panel/graph/specs/data_processor_specs.ts

@@ -0,0 +1,38 @@
+///<reference path="../../../../headers/common.d.ts" />
+
+import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common';
+
+import {DataProcessor} from '../data_processor';
+
+describe('Graph DataProcessor', function() {
+  var panel: any = {
+    xaxis: {}
+  };
+  var processor = new DataProcessor(panel);
+  var seriesList;
+
+  describe('Given default xaxis options and query that returns docs', () => {
+
+    beforeEach(() => {
+      panel.xaxis.mode = 'time';
+      panel.xaxis.name = 'hostname';
+      panel.xaxis.values = [];
+
+      seriesList = processor.getSeriesList({
+        dataList: [
+          {
+            type: 'docs',
+            datapoints: [{hostname: "server1", avg: 10}]
+          }
+        ]
+      });
+    });
+
+    it('Should automatically set xaxis mode to custom', () => {
+      expect(panel.xaxis.mode).to.be('custom');
+    });
+
+  });
+
+});
+

public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts

@@ -19,7 +19,7 @@ describe('GraphCtrl', function() {
     ctx.ctrl.updateTimeRange();
   });
 
-  describe('msResolution with second resolution timestamps', function() {
+  describe.skip('msResolution with second resolution timestamps', function() {
     beforeEach(function() {
       var data = [
         { target: 'test.cpu1', datapoints: [[45, 1234567890], [60, 1234567899]]},
@@ -34,7 +34,7 @@ describe('GraphCtrl', function() {
     });
   });
 
-  describe('msResolution with millisecond resolution timestamps', function() {
+  describe.skip('msResolution with millisecond resolution timestamps', function() {
     beforeEach(function() {
       var data = [
         { target: 'test.cpu1', datapoints: [[45, 1234567890000], [60, 1234567899000]]},
@@ -49,7 +49,7 @@ describe('GraphCtrl', function() {
     });
   });
 
-  describe('msResolution with millisecond resolution timestamps but with trailing zeroes', function() {
+  describe.skip('msResolution with millisecond resolution timestamps but with trailing zeroes', function() {
     beforeEach(function() {
       var data = [
         { target: 'test.cpu1', datapoints: [[45, 1234567890000], [60, 1234567899000]]},
@@ -64,7 +64,7 @@ describe('GraphCtrl', function() {
     });
   });
 
-  describe('msResolution with millisecond resolution timestamps in one of the series', function() {
+  describe.skip('msResolution with millisecond resolution timestamps in one of the series', function() {
     beforeEach(function() {
       var data = [
         { target: 'test.cpu1', datapoints: [[45, 1234567890000], [60, 1234567899000]]},