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(query editors): more work on query editors make over

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-04-17 16:43:13 -04:00
parent 33f7b8479e
commit 805fd18b7b
7 changed files with 176 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/panel/metrics_ds_selector.ts
View File

@ -79,7 +79,7 @@ export class MetricsDsSelectorCtrl {
} }
addDataQuery(datasource) { addDataQuery(datasource) {
var target: any = {}; var target: any = {isNew: true};
if (datasource) { if (datasource) {
target.datasource = datasource.name; target.datasource = datasource.name;

16
public/app/features/panel/partials/query_editor_row.html
View File

@ -10,14 +10,22 @@
</label> </label>
</div> </div>
<div ng-transclude class="gf-form-query-content"> <div class="gf-form-query-content" ng-if="ctrl.collapsed">
<div class="gf-form">
<label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.toggleCollapse()">
{{ctrl.collapsedText}}
</label>
</div>
</div>
<div ng-transclude class="gf-form-query-content" ng-if="!ctrl.collapsed">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label"> <label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.collapsed = !ctrl.collapsed"> <a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
<i class="fa fa-chevron-down" ng-hide="ctrl.collapsed"></i> <i class="fa fa-fw fa-chevron-down" ng-hide="ctrl.collapsed"></i>
<i class="fa fa-chevron-left" ng-show="ctrl.collapsed"></i> <i class="fa fa-fw fa-chevron-left" ng-show="ctrl.collapsed"></i>
</a> </a>
</label> </label>
<label class="gf-form-label dropdown"> <label class="gf-form-label dropdown">

36
public/app/features/panel/query_ctrl.ts
View File

@ -10,50 +10,14 @@ export class QueryCtrl {
panel: any; panel: any;
hasRawMode: boolean; hasRawMode: boolean;
error: string; error: string;
collapsed: boolean;
constructor(public $scope, private $injector) { constructor(public $scope, private $injector) {
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
this.collapsed = true;
if (!this.target.refId) {
this.target.refId = this.getNextQueryLetter();
}
}
getNextQueryLetter() {
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
return _.find(letters, refId => {
return _.every(this.panel.targets, function(other) {
return other.refId !== refId;
});
});
}
removeQuery() {
this.panel.targets = _.without(this.panel.targets, this.target);
this.panelCtrl.refresh();
};
duplicateQuery() {
var clone = angular.copy(this.target);
clone.refId = this.getNextQueryLetter();
this.panel.targets.push(clone);
}
moveQuery(direction) {
var index = _.indexOf(this.panel.targets, this.target);
_.move(this.panel.targets, index, index + direction);
} }
refresh() { refresh() {
this.panelCtrl.refresh(); this.panelCtrl.refresh();
} }
toggleHideQuery() {
this.target.hide = !this.target.hide;
this.panelCtrl.refresh();
}
} }

88
public/app/features/panel/query_editor_row.ts
View File

@ -1,17 +1,101 @@
///<reference path="../../headers/common.d.ts" /> ///<reference path="../../headers/common.d.ts" />
import angular from 'angular'; import angular from 'angular';
import $ from 'jquery'; import _ from 'lodash';
var module = angular.module('grafana.directives'); var module = angular.module('grafana.directives');
export class QueryRowCtrl {
collapsedText: string;
canCollapse: boolean;
getCollapsedText: any;
target: any;
queryCtrl: any;
panelCtrl: any;
panel: any;
collapsed: any;
constructor() {
this.panelCtrl = this.queryCtrl.panelCtrl;
this.target = this.queryCtrl.target;
this.panel = this.panelCtrl.panel;
this.toggleCollapse();
if (this.target.isNew) {
delete this.target.isNew;
this.toggleCollapse();
}
if (!this.target.refId) {
this.target.refId = this.getNextQueryLetter();
}
}
toggleHideQuery() {
this.target.hide = !this.target.hide;
this.panelCtrl.refresh();
}
getNextQueryLetter() {
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
return _.find(letters, refId => {
return _.every(this.panel.targets, function(other) {
return other.refId !== refId;
});
});
}
toggleCollapse() {
if (!this.canCollapse) {
return;
}
this.collapsed = !this.collapsed;
try {
this.collapsedText = this.queryCtrl.getCollapsedText();
} catch (e) {
var err = e.message || e.toString();
this.collapsedText = 'Error: ' + err;
}
}
toggleEditorMode() {
this.queryCtrl.toggleEditorMode();
}
removeQuery() {
this.panel.targets = _.without(this.panel.targets, this.target);
this.panelCtrl.refresh();
}
duplicateQuery() {
var clone = angular.copy(this.target);
clone.refId = this.getNextQueryLetter();
this.panel.targets.push(clone);
}
moveQuery(direction) {
var index = _.indexOf(this.panel.targets, this.target);
_.move(this.panel.targets, index, index + direction);
}
}
/** @ngInject **/ /** @ngInject **/
function queryEditorRowDirective() { function queryEditorRowDirective() {
return { return {
restrict: 'E', restrict: 'E',
controller: QueryRowCtrl,
bindToController: true,
controllerAs: "ctrl",
templateUrl: 'public/app/features/panel/partials/query_editor_row.html', templateUrl: 'public/app/features/panel/partials/query_editor_row.html',
transclude: true, transclude: true,
scope: {ctrl: "="}, scope: {
queryCtrl: "=",
canCollapse: "=",
},
}; };
} }

2
public/app/plugins/datasource/graphite/partials/query.editor.html
View File

@ -1,4 +1,4 @@
<query-editor-row ctrl="ctrl"> <query-editor-row query-ctrl="ctrl">
<div class="gf-form" ng-show="ctrl.target.textEditor"> <div class="gf-form" ng-show="ctrl.target.textEditor">
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input> <input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>

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

@ -1,98 +1,89 @@
<query-editor-row ctrl="ctrl"> <query-editor-row query-ctrl="ctrl" can-collapse="true">
<div class="gf-form" ng-if="ctrl.collapsed"> <div class="gf-form" ng-if="ctrl.target.rawQuery">
<label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.collapsed = !ctrl.collapsed"> <input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
{{ctrl.target.query}} </div>
</label>
</div>
<div ng-if="!ctrl.collapsed"> <div ng-if="!ctrl.target.rawQuery">
<div class="gf-form" ng-if="ctrl.target.rawQuery"> <div class="gf-form-inline">
<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input> <div class="gf-form">
</div> <label class="gf-form-label query-keyword width-7">FROM</label>
<div ng-if="!ctrl.target.rawQuery"> <metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
</div>
<div class="gf-form-inline"> <div class="gf-form">
<div class="gf-form"> <label class="gf-form-label query-keyword">WHERE</label>
<label class="gf-form-label query-keyword width-7">FROM</label>
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment> <div ng-repeat="segment in ctrl.tagSegments">
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment> <metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
</div> </div>
</div>
<div class="gf-form"> <div class="gf-form-filler"></div>
<label class="gf-form-label query-keyword">WHERE</label> </div>
<div ng-repeat="segment in ctrl.tagSegments"> <div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment> <div class="gf-form">
</div> <label class="gf-form-label query-keyword width-7">
</div> <span ng-show="$index === 0">SELECT</span>
</label>
</div>
<div class="gf-form-filler"></div> <div class="gf-form" ng-repeat="part in selectParts">
</div> <influx-query-part-editor
class="gf-form-label query-part"
part="part"
remove-action="ctrl.removeSelectPart(selectParts, part)"
part-updated="ctrl.selectPartUpdated(selectParts, part)"
get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
</div>
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels"> <div class="gf-form">
<div class="gf-form"> <label class="dropdown"
<label class="gf-form-label query-keyword width-7"> dropdown-typeahead="ctrl.selectMenu"
<span ng-show="$index === 0">SELECT</span> dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</label> </label>
</div> </div>
<div class="gf-form" ng-repeat="part in selectParts"> <div class="gf-form-filler"></div>
<influx-query-part-editor </div>
class="gf-form-label query-part"
part="part"
remove-action="ctrl.removeSelectPart(selectParts, part)"
part-updated="ctrl.selectPartUpdated(selectParts, part)"
get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
</div>
<div class="gf-form"> <div class="gf-form-inline">
<label class="dropdown" <div class="gf-form">
dropdown-typeahead="ctrl.selectMenu" <label class="gf-form-label query-keyword width-7">
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"> <span>GROUP BY</span>
</label> </label>
</div>
<div class="gf-form-filler"></div> <influx-query-part-editor
</div> ng-repeat="part in ctrl.queryModel.groupByParts"
part="part"
class="gf-form-label query-part"
remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
<div class="gf-form-inline"> <metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
<div class="gf-form"> </div>
<label class="gf-form-label query-keyword width-7">
<span>GROUP BY</span>
</label>
<influx-query-part-editor <div class="gf-form-filler"></div>
ng-repeat="part in ctrl.queryModel.groupByParts" </div>
part="part" </div>
class="gf-form-label query-part"
remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
</influx-query-part-editor>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment> <div class="gf-form-inline">
</div> <div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label>
<div class="gf-form-filler"></div> <input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
</div> </div>
</div> <div class="gf-form">
<label class="gf-form-label">Format as</label>
<div class="gf-form-inline"> <div class="gf-form-select-wrapper">
<div class="gf-form max-width-30"> <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
<label class="gf-form-label query-keyword width-7">ALIAS BY</label> </div>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()"> </div>
</div> <div class="gf-form-filler"></div>
<div class="gf-form"> </div>
<label class="gf-form-label">Format as</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form-filler"></div>
</div>
</div>
</query-editor-row> </query-editor-row>

5
public/app/plugins/datasource/influxdb/query_ctrl.ts
View File

@ -23,6 +23,7 @@ export class InfluxQueryCtrl extends QueryCtrl {
measurementSegment: any; measurementSegment: any;
removeTagFilterSegment: any; removeTagFilterSegment: any;
/** @ngInject **/ /** @ngInject **/
constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) { constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) {
super($scope, $injector); super($scope, $injector);
@ -316,5 +317,9 @@ export class InfluxQueryCtrl extends QueryCtrl {
return '='; return '=';
} }
} }
getCollapsedText() {
return this.queryModel.render(false);
}
} }