IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(panels): updated influxdb editor to use panelCtrl

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-01-28 19:07:53 -05:00
parent 3c3d3c9ec6
commit 05e8c576a2
5 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/plugins/datasource/influxdb/partials/query.editor.html
View File

@ -35,7 +35,7 @@
{{target.refId}}
</li>
<li>
<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
<a class="tight-form-item" ng-click="target.hide = !target.hide; panelCtrl.refresh();" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
@ -60,7 +60,7 @@
</ul>
<div class="tight-form-flex-wrapper" ng-show="target.rawQuery">
<input type="text" class="tight-form-clear-input" ng-model="target.query" spellcheck="false" style="width: 100%;" ng-blur="get_data()"></input>
<input type="text" class="tight-form-clear-input" ng-model="target.query" spellcheck="false" style="width: 100%;" ng-blur="panelCtrl.refresh()"></input>
</div>
<div class="clearfix"></div>
@ -88,7 +88,7 @@
<span>GROUP BY</span>
</li>
<li ng-repeat="part in queryModel.groupByParts">
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeGroupByPart(part, $index)" part-updated="get_data();" get-options="getPartOptions(part)"></influx-query-part-editor>
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeGroupByPart(part, $index)" part-updated="panelCtrl.refresh();" get-options="getPartOptions(part)"></influx-query-part-editor>
</li>
<li>
<metric-segment segment="groupBySegment" get-options="getGroupByOptions()" on-change="groupByAction(part, $index)"></metric-segment>
@ -104,13 +104,13 @@
ALIAS BY
</li>
<li>
<input type="text" class="tight-form-clear-input input-xlarge" ng-model="target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="get_data()">
<input type="text" class="tight-form-clear-input input-xlarge" ng-model="target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="panelCtrl.refresh()">
</li>
<li class="tight-form-item">
Format as
</li>
<li>
<select class="input-small tight-form-input" style="width: 104px" ng-model="target.resultFormat" ng-options="f.value as f.text for f in resultFormats" ng-change="get_data()"></select>
<select class="input-small tight-form-input" style="width: 104px" ng-model="target.resultFormat" ng-options="f.value as f.text for f in resultFormats" ng-change="panelCtrl.refresh()"></select>
</li>
</ul>
<div class="clearfix"></div>

16
public/app/plugins/datasource/influxdb/partials/query.options.html
View File

@ -8,7 +8,7 @@
Group by time interval
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
<input type="text" class="input-medium tight-form-input" ng-model="ctrl.panel.interval" ng-blur="ctrl.refresh();"
spellcheck='false' placeholder="example: >10s">
</li>
<li class="tight-form-item">
@ -24,17 +24,17 @@
<i class="fa fa-info-circle"></i>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
<a ng-click="ctrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
alias patterns
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
<a ng-click="ctrl.toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking &amp; and fill
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
<a ng-click="ctrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
group by time
</a>
</li>
@ -46,7 +46,7 @@
<div class="editor-row">
<div class="pull-left" style="margin-top: 30px;">
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 1">
<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 1">
<h5>Alias patterns</h5>
<ul>
<li>$m = replaced with measurement name</li>
@ -58,7 +58,7 @@
</ul>
</div>
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 2">
<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 2">
<h5>Stacking and fill</h5>
<ul>
<li>When stacking is enabled it important that points align</li>
@ -69,7 +69,7 @@
</ul>
</div>
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 3">
<h5>Group by time</h5>
<ul>
<li>Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana</li>
@ -80,8 +80,6 @@
<li>Example: &gt;60s if you write metrics to InfluxDB every 60 seconds</li>
</ul>
</div>
</div>
</div>

36
public/app/plugins/datasource/influxdb/query_ctrl.js
View File

@ -15,13 +15,15 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
queryPart = queryPart.default;
module.controller('InfluxQueryCtrl', function($scope, templateSrv, $q, uiSegmentSrv) {
var panelCtrl = $scope.ctrl;
$scope.panelCtrl = panelCtrl;
$scope.init = function() {
if (!$scope.target) { return; }
$scope.target = $scope.target;
$scope.queryModel = new InfluxQuery($scope.target);
$scope.queryBuilder = new InfluxQueryBuilder($scope.target, $scope.datasource.database);
$scope.queryBuilder = new InfluxQueryBuilder($scope.target, panelCtrl.datasource.database);
$scope.groupBySegment = uiSegmentSrv.newPlusButton();
$scope.resultFormats = [
{text: 'Time series', value: 'time_series'},
@ -75,7 +77,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
$scope.getGroupByOptions = function() {
var query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
return $scope.datasource.metricFindQuery(query)
return panelCtrl.datasource.metricFindQuery(query)
.then(function(tags) {
var options = [];
if (!$scope.queryModel.hasFill()) {
@ -97,26 +99,26 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
var plusButton = uiSegmentSrv.newPlusButton();
$scope.groupBySegment.value = plusButton.value;
$scope.groupBySegment.html = plusButton.html;
$scope.get_data();
panelCtrl.refresh();
};
$scope.removeGroupByPart = function(part, index) {
$scope.queryModel.removeGroupByPart(part, index);
$scope.get_data();
panelCtrl.refresh();
};
$scope.addSelectPart = function(selectParts, cat, subitem) {
$scope.queryModel.addSelectPart(selectParts, subitem.value);
$scope.get_data();
panelCtrl.refresh();
};
$scope.removeSelectPart = function(selectParts, part) {
$scope.queryModel.removeSelectPart(selectParts, part);
$scope.get_data();
panelCtrl.refresh();
};
$scope.selectPartUpdated = function() {
$scope.get_data();
panelCtrl.refresh();
};
$scope.fixTagSegments = function() {
@ -130,19 +132,19 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
$scope.measurementChanged = function() {
$scope.target.measurement = $scope.measurementSegment.value;
$scope.get_data();
panelCtrl.refresh();
};
$scope.getPolicySegments = function() {
var policiesQuery = $scope.queryBuilder.buildExploreQuery('RETENTION POLICIES');
return $scope.datasource.metricFindQuery(policiesQuery)
return panelCtrl.datasource.metricFindQuery(policiesQuery)
.then($scope.transformToSegments(false))
.then(null, $scope.handleQueryError);
};
$scope.policyChanged = function() {
$scope.target.policy = $scope.policySegment.value;
$scope.get_data();
panelCtrl.refresh();
};
$scope.toggleQueryMode = function () {
@ -151,19 +153,19 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
$scope.getMeasurements = function () {
var query = $scope.queryBuilder.buildExploreQuery('MEASUREMENTS');
return $scope.datasource.metricFindQuery(query)
return panelCtrl.datasource.metricFindQuery(query)
.then($scope.transformToSegments(true), $scope.handleQueryError);
};
$scope.getPartOptions = function(part) {
if (part.def.type === 'field') {
var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
return $scope.datasource.metricFindQuery(fieldsQuery)
return panelCtrl.datasource.metricFindQuery(fieldsQuery)
.then($scope.transformToSegments(true), $scope.handleQueryError);
}
if (part.def.type === 'tag') {
var tagsQuery = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
return $scope.datasource.metricFindQuery(tagsQuery)
return panelCtrl.datasource.metricFindQuery(tagsQuery)
.then($scope.transformToSegments(true), $scope.handleQueryError);
}
};
@ -211,7 +213,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
addTemplateVars = true;
}
return $scope.datasource.metricFindQuery(query)
return panelCtrl.datasource.metricFindQuery(query)
.then($scope.transformToSegments(addTemplateVars))
.then(function(results) {
if (segment.type === 'key') {
@ -224,7 +226,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
$scope.getFieldSegments = function() {
var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
return $scope.datasource.metricFindQuery(fieldsQuery)
return panelCtrl.datasource.metricFindQuery(fieldsQuery)
.then($scope.transformToSegments(false))
.then(null, $scope.handleQueryError);
};
@ -234,7 +236,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
$scope.setFill = function(fill) {
$scope.target.fill = fill;
$scope.get_data();
panelCtrl.refresh();
};
$scope.tagSegmentUpdated = function(segment, index) {
@ -300,7 +302,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
});
$scope.target.tags = tags;
$scope.$parent.get_data();
panelCtrl.refresh();
};
$scope.getTagValueOperator = function(tagValue, tagOperator) {

16
public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts
View File

@ -10,14 +10,20 @@ describe('InfluxDBQueryCtrl', function() {
beforeEach(angularMocks.module('grafana.controllers'));
beforeEach(angularMocks.module('grafana.services'));
beforeEach(ctx.providePhase());
beforeEach(ctx.createControllerPhase('InfluxQueryCtrl'));
beforeEach(angularMocks.inject(($rootScope, $controller, $q) => {
ctx.$q = $q;
ctx.scope = $rootScope.$new();
ctx.scope.ctrl = {panel: ctx.panel};
ctx.panelCtrl = ctx.scope.ctrl;
ctx.controller = $controller('InfluxQueryCtrl', {$scope: ctx.scope});
}));
beforeEach(function() {
ctx.scope.target = {};
ctx.scope.$parent = { get_data: sinon.spy() };
ctx.scope.datasource = ctx.datasource;
ctx.scope.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([]));
ctx.panelCtrl.refresh = sinon.spy();
ctx.panelCtrl.datasource = ctx.datasource;
ctx.panelCtrl.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([]));
});
describe('init', function() {

4
public/test/specs/helpers.js
View File

@ -44,7 +44,7 @@ define([
self.$browser = $browser;
self.$q = $q;
self.panel = {type: 'test'};
self.dashboard = {};
self.dashboard = {meta: {}};
$rootScope.appEvent = sinon.spy();
$rootScope.onAppEvent = sinon.spy();
@ -67,7 +67,7 @@ define([
self.scope.contextSrv = {};
self.scope.panel = {};
self.scope.row = { panels:[] };
self.scope.dashboard = {};
self.scope.dashboard = {meta: {}};
self.scope.dashboardMeta = {};
self.scope.dashboardViewState = new DashboardViewStateStub();
self.scope.appEvent = sinon.spy();