Skip to content

N
nexpie-grafana-theme
Commit eecf844c by Torkel Ödegaard
Options

feat(plugins): migrated influxdb query editor to new plugin model

parent 05dfccbb
Showing with 436 additions and 144 deletions
public/app/core/directives/plugin_component.ts
......@@ -60,7 +60,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope) {
});
});
}
// QueryOptionsCtrl
// Annotations
case "annotations-query-ctrl": {
return System.import(scope.currentDatasource.meta.module).then(function(dsModule) {
return {
......
public/app/features/panel/metrics_panel_ctrl.ts
......@@ -38,13 +38,6 @@ class MetricsPanelCtrl extends PanelCtrl {
if (!this.panel.targets) {
this.panel.targets = [{}];
}
// hookup initial data fetch
this.$timeout(() => {
if (!this.skipDataOnInit) {
this.refresh();
}
}, 30);;
}
initEditMode() {
......@@ -182,15 +175,19 @@ class MetricsPanelCtrl extends PanelCtrl {
};
this.setTimeQueryStart();
return datasource.query(metricsQuery).then(results => {
this.setTimeQueryEnd();
try {
return datasource.query(metricsQuery).then(results => {
this.setTimeQueryEnd();
if (this.dashboard.snapshot) {
this.panel.snapshotData = results;
}
if (this.dashboard.snapshot) {
this.panel.snapshotData = results;
}
return results;
});
return results;
});
} catch (err) {
return this.$q.reject(err);
}
}
setDatasource(datasource) {
......
public/app/features/panel/partials/panel.html
<div class="panel-container" ng-class="{'panel-transparent': ctrl.panel.transparent}">
<div class="panel-header">
<span class="alert-error panel-error small pointer" config-modal="app/partials/inspector.html" ng-if="ctrl.error">
<span class="alert-error panel-error small pointer" config-modal="public/app/partials/inspector.html" ng-if="ctrl.error">
<span data-placement="top" bs-tooltip="ctrl.error">
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
</span>
......
public/app/features/panel/partials/query_editor_row.html
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li ng-show="ctrl.parserError" class="tight-form-item">
<a bs-tooltip="ctrl.parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<li ng-show="ctrl.error" class="tight-form-item">
<a bs-tooltip="ctrl.error" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
......
public/app/features/panel/query_ctrl.ts
......@@ -9,6 +9,7 @@ export class QueryCtrl {
panelCtrl: any;
panel: any;
hasRawMode: boolean;
error: string;
constructor(public $scope, private $injector) {
this.panel = this.panelCtrl.panel;
......
public/app/plugins/datasource/graphite/query_ctrl.ts
......@@ -15,7 +15,6 @@ export class GraphiteQueryCtrl extends QueryCtrl {
functions: any[];
segments: any[];
parserError: string;
/** @ngInject **/
constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
......@@ -35,7 +34,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
parseTarget() {
this.functions = [];
this.segments = [];
delete this.parserError;
this.error = null;
if (this.target.textEditor) {
return;
......@@ -49,7 +48,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
}
if (astNode.type === 'error') {
this.parserError = astNode.message + " at position: " + astNode.pos;
this.error = astNode.message + " at position: " + astNode.pos;
this.target.textEditor = true;
return;
}
......@@ -58,7 +57,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
this.parseTargeRecursive(astNode, null, 0);
} catch (err) {
console.log('error parsing target:', err.message);
this.parserError = err.message;
this.error = err.message;
this.target.textEditor = true;
}
......@@ -142,7 +141,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
}
}
}).catch(err => {
this.parserError = err.message || 'Failed to issue metric query';
this.error = err.message || 'Failed to issue metric query';
});
}
......@@ -179,13 +178,13 @@ export class GraphiteQueryCtrl extends QueryCtrl {
altSegments.unshift(this.uiSegmentSrv.newSegment('*'));
return altSegments;
}).catch(err => {
this.parserError = err.message || 'Failed to issue metric query';
this.error = err.message || 'Failed to issue metric query';
return [];
});
}
segmentValueChanged(segment, segmentIndex) {
delete this.parserError;
this.error = null;
if (this.functions.length > 0 && this.functions[0].def.fake) {
this.functions = [];
......@@ -210,7 +209,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
}
targetChanged() {
if (this.parserError) {
if (this.error) {
return;
}
......
public/app/plugins/datasource/influxdb/module.js deleted 100644 → 0
define([
'./datasource',
],
function (InfluxDatasource) {
'use strict';
function influxMetricsQueryEditor() {
return {controller: 'InfluxQueryCtrl', templateUrl: 'public/app/plugins/datasource/influxdb/partials/query.editor.html'};
}
function influxMetricsQueryOptions() {
return {templateUrl: 'public/app/plugins/datasource/influxdb/partials/query.options.html'};
}
function influxAnnotationsQueryEditor() {
return {templateUrl: 'public/app/plugins/datasource/influxdb/partials/annotations.editor.html'};
}
function influxConfigView() {
return {templateUrl: 'public/app/plugins/datasource/influxdb/partials/config.html'};
}
return {
Datasource: InfluxDatasource,
metricsQueryEditor: influxMetricsQueryEditor,
metricsQueryOptions: influxMetricsQueryOptions,
annotationsQueryEditor: influxAnnotationsQueryEditor,
configView: influxConfigView,
};
});
public/app/plugins/datasource/influxdb/module.ts 0 → 100644
import {InfluxDatasource} from './datasource';
import {InfluxQueryCtrl} from './query_ctrl';
class InfluxConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/influxdb/partials/config.html';
}
class InfluxQueryOptionsCtrl {
static templateUrl = 'public/app/plugins/datasource/influxdb/partials/query.options.html';
}
class InfluxAnnotationsQueryCtrl {
static templateUrl = 'public/app/plugins/datasource/influxdb/partials/annotations.editor.html';
}
export {
InfluxDatasource as Datasource,
InfluxQueryCtrl as QueryCtrl,
InfluxConfigCtrl as ConfigCtrl,
InfluxQueryOptionsCtrl as QueryOptionsCtrl,
InfluxAnnotationsQueryCtrl as AnnotationsQueryCtrl,
};
// define([
// './datasource',
// ],
// function (InfluxDatasource) {
// 'use strict';
//
// function influxMetricsQueryEditor() {
// return {controller: 'InfluxQueryCtrl', templateUrl: 'public/app/plugins/datasource/influxdb/partials/query.editor.html'};
// }
//
// function influxMetricsQueryOptions() {
// return {templateUrl: 'public/app/plugins/datasource/influxdb/partials/query.options.html'};
// }
//
// function influxAnnotationsQueryEditor() {
// return {templateUrl: 'public/app/plugins/datasource/influxdb/partials/annotations.editor.html'};
// }
//
// function influxConfigView() {
// return {templateUrl: 'public/app/plugins/datasource/influxdb/partials/config.html'};
// }
//
// return {
// Datasource: InfluxDatasource,
// metricsQueryEditor: influxMetricsQueryEditor,
// metricsQueryOptions: influxMetricsQueryOptions,
// annotationsQueryEditor: influxAnnotationsQueryEditor,
// configView: influxConfigView,
// };
// });
public/app/plugins/datasource/influxdb/partials/query.editor.html
<div class="">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item small" ng-show="target.datasource">
<em>{{target.datasource}}</em>
</li>
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"><a tabindex="1" ng-click="toggleQueryMode()">Switch editor mode</a></li>
<li role="menuitem"><a tabindex="1" ng-click="panelCtrl.duplicateDataQuery(target)">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="panelCtrl.moveDataQuery($index, $index-1)">Move up</a></li>
<li role="menuitem"><a tabindex="1" ng-click="panelCtrl.moveDataQuery($index, $index+1)">Move down</a></li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="panelCtrl.removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{target.refId}}
</li>
<li>
<a class="tight-form-item" ng-click="target.hide = !target.hide; panelCtrl.refresh();" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="tight-form-list" ng-hide="target.rawQuery">
<query-editor-row ctrl="ctrl">
<ul class="tight-form-list" ng-hide="ctrl.target.rawQuery">
<li class="tight-form-item query-keyword" style="width: 75px">
FROM
</li>
<li>
<metric-segment segment="policySegment" get-options="getPolicySegments()" on-change="policyChanged()"></metric-segment>
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
</li>
<li>
<metric-segment segment="measurementSegment" get-options="getMeasurements()" on-change="measurementChanged()"></metric-segment>
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
</li>
<li class="tight-form-item query-keyword" style="padding-left: 15px; padding-right: 15px;">
WHERE
</li>
<li ng-repeat="segment in tagSegments">
<metric-segment segment="segment" get-options="getTagsOrValues(segment, $index)" on-change="tagSegmentUpdated(segment, $index)"></metric-segment>
<li ng-repeat="segment in ctrl.tagSegments">
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
</li>
</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="panelCtrl.refresh()"></input>
<input type="text" class="tight-form-clear-input" ng-model="ctrl.target.query" spellcheck="false" style="width: 100%;" ng-blur="ctrl.refresh()"></input>
</div>
</query-editor-row>
<div ng-hide="ctrl.target.rawQuery">
<div class="tight-form" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span ng-show="$index === 0">SELECT</span>
</li>
<li ng-repeat="part in selectParts">
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="ctrl.removeSelectPart(selectParts, part)" part-updated="ctrl.selectPartUpdated(selectParts, part)" get-options="ctrl.getPartOptions(part)"></influx-query-part-editor>
</li>
<li class="dropdown" dropdown-typeahead="ctrl.selectMenu" dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div ng-hide="target.rawQuery">
<div class="tight-form" ng-repeat="selectParts in queryModel.selectModels">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span ng-show="$index === 0">SELECT</span>
</li>
<li ng-repeat="part in selectParts">
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeSelectPart(selectParts, part)" part-updated="selectPartUpdated(selectParts, part)" get-options="getPartOptions(part)"></influx-query-part-editor>
</li>
<li class="dropdown" dropdown-typeahead="selectMenu" dropdown-typeahead-on-select="addSelectPart(selectParts, $item, $subItem)">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<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="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>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
ALIAS BY
<span>GROUP BY</span>
</li>
<li>
<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 ng-repeat="part in ctrl.queryModel.groupByParts">
<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)"></influx-query-part-editor>
</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="panelCtrl.refresh()"></select>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
ALIAS BY
</li>
<li>
<input type="text" class="tight-form-clear-input input-xlarge" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
</li>
<li class="tight-form-item">
Format as
</li>
<li>
<select class="input-small tight-form-input" style="width: 104px" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment