From 11c8e80ea9f0e4474507b9b7aa912aba25362161 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 May 2015 11:38:22 +0200 Subject: [PATCH] Working on new query editor for influxdb 0.9, #1525 --- public/app/directives/all.js | 2 +- .../{graphiteSegment.js => metric.segment.js} | 13 +- .../graphite/partials/query.editor.html | 4 +- .../plugins/datasource/graphite/queryCtrl.js | 17 +- .../plugins/datasource/influxdb/funcEditor.js | 2 +- .../influxdb/partials/query.editor.html | 59 +++++-- .../plugins/datasource/influxdb/queryCtrl.js | 147 +++++++----------- public/css/less/grafana.less | 7 + public/test/specs/graphiteTargetCtrl-specs.js | 6 +- 9 files changed, 132 insertions(+), 125 deletions(-) rename public/app/directives/{graphiteSegment.js => metric.segment.js} (92%) diff --git a/public/app/directives/all.js b/public/app/directives/all.js index 4ab92d111d6..cd294c3df25 100644 --- a/public/app/directives/all.js +++ b/public/app/directives/all.js @@ -12,7 +12,7 @@ define([ './bootstrap-tagsinput', './bodyClass', './variableValueSelect', - './graphiteSegment', + './metric.segment', './grafanaVersionCheck', './dropdown.typeahead', './topnav', diff --git a/public/app/directives/graphiteSegment.js b/public/app/directives/metric.segment.js similarity index 92% rename from public/app/directives/graphiteSegment.js rename to public/app/directives/metric.segment.js index c8ad131e6c7..5510dea6657 100644 --- a/public/app/directives/graphiteSegment.js +++ b/public/app/directives/metric.segment.js @@ -9,7 +9,7 @@ function (angular, app, _, $) { angular .module('grafana.directives') - .directive('graphiteSegment', function($compile, $sce) { + .directive('metricSegment', function($compile, $sce) { var inputTemplate = ''; @@ -17,6 +17,12 @@ function (angular, app, _, $) { var buttonTemplate = ''; return { + scope: { + segment: "=", + getAltSegments: "&", + onValueChanged: "&" + }, + link: function($scope, elem) { var $input = $(inputTemplate); var $button = $(buttonTemplate); @@ -46,7 +52,7 @@ function (angular, app, _, $) { segment.expandable = true; segment.fake = false; } - $scope.segmentValueChanged(segment, $scope.$index); + $scope.onValueChanged(); }); }; @@ -69,7 +75,8 @@ function (angular, app, _, $) { if (options) { return options; } $scope.$apply(function() { - $scope.getAltSegments($scope.$index).then(function() { + $scope.getAltSegments().then(function(altSegments) { + $scope.altSegments = altSegments; options = _.map($scope.altSegments, function(alt) { return alt.value; }); // add custom values diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 48446049e65..dcbbdc69a8a 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -74,7 +74,9 @@ ng-show="showTextEditor" /> - + +
diff --git a/public/app/plugins/datasource/influxdb/queryCtrl.js b/public/app/plugins/datasource/influxdb/queryCtrl.js index 00e12ea05bd..e78c100b5c5 100644 --- a/public/app/plugins/datasource/influxdb/queryCtrl.js +++ b/public/app/plugins/datasource/influxdb/queryCtrl.js @@ -7,19 +7,39 @@ function (angular, _) { var module = angular.module('grafana.controllers'); - module.controller('InfluxQueryCtrl', function($scope, $timeout, $sce, templateSrv, $q) { + module.controller('InfluxQueryCtrl', function($scope, $timeout, $sce, templateSrv) { + + $scope.functionList = [ + 'count', 'mean', 'sum', 'min', + 'max', 'mode', 'distinct', 'median', + 'derivative', 'stddev', 'first', 'last', + 'difference' + ]; + + $scope.functionMenu = _.map($scope.functionList, function(func) { + return { text: func, click: "changeFunction('" + func + "');" }; + }); $scope.init = function() { - $scope.segments = $scope.target.segments || []; + var target = $scope.target; + target.function = target.function || 'mean'; - $scope.functionsSelect = [ - 'count', 'mean', 'sum', 'min', - 'max', 'mode', 'distinct', 'median', - 'derivative', 'stddev', 'first', 'last', - 'difference' - ]; + if (!target.measurement) { + $scope.measurementSegment = MetricSegment.newSelectMeasurement(); + } else { + $scope.measurementSegment = new MetricSegment(target.measurement); + } + }; - checkOtherSegments(0); + $scope.changeFunction = function(func) { + $scope.target.function = func; + $scope.$parent.get_data(); + }; + + $scope.measurementChanged = function() { + $scope.target.measurement = $scope.measurementSegment.value; + console.log('measurement updated', $scope.target.measurement); + $scope.$parent.get_data(); }; $scope.toggleQueryMode = function () { @@ -35,103 +55,44 @@ function (angular, _) { $scope.panel.targets.push(clone); }; - $scope.getAltSegments = function (index) { - $scope.altSegments = []; - - var measurement = $scope.segments[0].value; - var queryType, query; - if (index === 0) { - queryType = 'MEASUREMENTS'; - query = 'SHOW MEASUREMENTS'; - } else if (index % 2 === 1) { - queryType = 'TAG_KEYS'; - query = 'SHOW TAG KEYS FROM "' + measurement + '"'; - } else { - queryType = 'TAG_VALUES'; - query = 'SHOW TAG VALUES FROM "' + measurement + '" WITH KEY = ' + $scope.segments[$scope.segments.length - 2].value; - } - - console.log('getAltSegments: query' , query); - - return $scope.datasource.metricFindQuery(query, queryType).then(function(results) { + $scope.getMeasurements = function () { + // var measurement = $scope.segments[0].value; + // var queryType, query; + // if (index === 0) { + // queryType = 'MEASUREMENTS'; + // query = 'SHOW MEASUREMENTS'; + // } else if (index % 2 === 1) { + // queryType = 'TAG_KEYS'; + // query = 'SHOW TAG KEYS FROM "' + measurement + '"'; + // } else { + // queryType = 'TAG_VALUES'; + // query = 'SHOW TAG VALUES FROM "' + measurement + '" WITH KEY = ' + $scope.segments[$scope.segments.length - 2].value; + // } + // + // console.log('getAltSegments: query' , query); + // + console.log('get measurements'); + return $scope.datasource.metricFindQuery('SHOW MEASUREMENTS', 'MEASUREMENTS').then(function(results) { console.log('get alt segments: response', results); - $scope.altSegments = _.map(results, function(segment) { + var measurements = _.map(results, function(segment) { return new MetricSegment({ value: segment.text, expandable: segment.expandable }); }); _.each(templateSrv.variables, function(variable) { - $scope.altSegments.unshift(new MetricSegment({ + measurements.unshift(new MetricSegment({ type: 'template', value: '$' + variable.name, expandable: true, })); }); + + return measurements; }, function(err) { $scope.parserError = err.message || 'Failed to issue metric query'; + return []; }); }; - $scope.segmentValueChanged = function (segment, segmentIndex) { - delete $scope.parserError; - - if (segment.expandable) { - return checkOtherSegments(segmentIndex + 1).then(function () { - setSegmentFocus(segmentIndex + 1); - $scope.targetChanged(); - }); - } - else { - $scope.segments = $scope.segments.splice(0, segmentIndex + 1); - } - - setSegmentFocus(segmentIndex + 1); - $scope.targetChanged(); - }; - - $scope.targetChanged = function() { - if ($scope.parserError) { - return; - } - - $scope.target.measurement = ''; - $scope.target.tags = {}; - $scope.target.measurement = $scope.segments[0].value; - - for (var i = 1; i+1 < $scope.segments.length; i += 2) { - var key = $scope.segments[i].value; - $scope.target.tags[key] = $scope.segments[i+1].value; - } - - $scope.$parent.get_data(); - }; - - function checkOtherSegments(fromIndex) { - if (fromIndex === 0) { - $scope.segments.push(MetricSegment.newSelectMetric()); - return; - } - - if ($scope.segments.length === 0) { - throw('should always have a scope segment?'); - } - - if (_.last($scope.segments).fake) { - return $q.when([]); - } else if ($scope.segments.length % 2 === 1) { - $scope.segments.push(MetricSegment.newSelectTag()); - return $q.when([]); - } else { - $scope.segments.push(MetricSegment.newSelectTagValue()); - return $q.when([]); - } - } - - function setSegmentFocus(segmentIndex) { - _.each($scope.segments, function(segment, index) { - segment.focus = segmentIndex === index; - }); - } - function MetricSegment(options) { if (options === '*' || options.value === '*') { this.value = '*'; @@ -153,8 +114,8 @@ function (angular, _) { this.html = $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value)); } - MetricSegment.newSelectMetric = function() { - return new MetricSegment({value: 'select metric', fake: true}); + MetricSegment.newSelectMeasurement = function() { + return new MetricSegment({value: 'select measurement', fake: true}); }; MetricSegment.newSelectTag = function() { diff --git a/public/css/less/grafana.less b/public/css/less/grafana.less index 9efdf3dd360..9be157f80d0 100644 --- a/public/css/less/grafana.less +++ b/public/css/less/grafana.less @@ -337,3 +337,10 @@ text-overflow: ellipsis; } } + +.query-keyword { + font-weight: bold; + color: @blue; +} + + diff --git a/public/test/specs/graphiteTargetCtrl-specs.js b/public/test/specs/graphiteTargetCtrl-specs.js index a5217376098..31916cc2802 100644 --- a/public/test/specs/graphiteTargetCtrl-specs.js +++ b/public/test/specs/graphiteTargetCtrl-specs.js @@ -141,13 +141,15 @@ define([ ctx.scope.target.target = 'test.count'; ctx.scope.datasource.metricFindQuery.returns(ctx.$q.when([])); ctx.scope.init(); - ctx.scope.getAltSegments(1); + ctx.scope.getAltSegments(1).then(function(results) { + ctx.altSegments = results; + }); ctx.scope.$digest(); ctx.scope.$parent = { get_data: sinon.spy() }; }); it('should have no segments', function() { - expect(ctx.scope.altSegments.length).to.be(0); + expect(ctx.altSegments.length).to.be(0); }); });