Skip to content

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

feat(plugins): more work on plugin editors,prometheus query editor is working

parent eaaf9246
Showing with 43 additions and 129 deletions
public/app/core/directives/plugin_component.ts
...@@ -35,8 +35,8 @@ function pluginDirectiveLoader($compile, datasourceSrv) { ...@@ -35,8 +35,8 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
return System.import(ds.meta.module).then(dsModule => { return System.import(ds.meta.module).then(dsModule => {
return { return {
name: 'metrics-query-editor-' + ds.meta.id, name: 'metrics-query-editor-' + ds.meta.id,
bindings: {target: "=", panelCtrl: "="}, bindings: {target: "=", panelCtrl: "=", datasource: "="},
attrs: {"target": "target", "panel-ctrl": "ctrl"}, attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
Component: dsModule.MetricsQueryEditor Component: dsModule.MetricsQueryEditor
}; };
}); });
......
public/app/core/directives/plugin_directive_loader.ts deleted 100644 → 0
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import _ from 'lodash';
import coreModule from '../core_module';
/** @ngInject */
function pluginComponentLoader($compile, datasourceSrv) {
function getPluginComponentDirective(options) {
return function() {
return {
templateUrl: options.Component.templateUrl,
restrict: 'E',
controller: options.Component,
controllerAs: 'ctrl',
bindToController: true,
scope: options.bindings,
link: (scope, elem, attrs, ctrl) => {
if (ctrl.link) {
ctrl.link(scope, elem, attrs, ctrl);
}
}
};
};
}
function getModule(scope, attrs) {
switch (attrs.type) {
case "metrics-query-editor":
let datasource = scope.target.datasource || scope.ctrl.panel.datasource;
return datasourceSrv.get(datasource).then(ds => {
if (!scope.target.refId) {
scope.target.refId = 'A';
}
return System.import(ds.meta.module).then(dsModule => {
return {
name: 'metrics-query-editor-' + ds.meta.id,
bindings: {target: "=", panelCtrl: "="},
attrs: {"target": "target", "panel-ctrl": "ctrl"},
Component: dsModule.MetricsQueryEditor
};
});
});
case 'datasource-config-view':
return System.import(scope.datasourceMeta.module).then(function(dsModule) {
return {
name: 'ds-config-' + scope.datasourceMeta.id,
bindings: {meta: "=", current: "="},
attrs: {meta: "datasourceMeta", current: "current"},
Component: dsModule.ConfigView,
};
});
}
}
function appendAndCompile(scope, elem, componentInfo) {
var child = angular.element(document.createElement(componentInfo.name));
_.each(componentInfo.attrs, (value, key) => {
child.attr(key, value);
});
$compile(child)(scope);
elem.empty();
elem.append(child);
}
function registerPluginComponent(scope, elem, attrs, componentInfo) {
if (!componentInfo.Component.registered) {
var directiveName = attrs.$normalize(componentInfo.name);
var directiveFn = getPluginComponentDirective(componentInfo);
coreModule.directive(directiveName, directiveFn);
componentInfo.Component.registered = true;
}
appendAndCompile(scope, elem, componentInfo);
}
return {
restrict: 'E',
link: function(scope, elem, attrs) {
getModule(scope, attrs).then(function (componentInfo) {
registerPluginComponent(scope, elem, attrs, componentInfo);
});
}
};
}
coreModule.directive('pluginComponent', pluginComponentLoader);
public/app/features/datasources/partials/edit.html
...@@ -42,8 +42,8 @@ ...@@ -42,8 +42,8 @@
</div> </div>
<div rebuild-on-change="datasourceMeta.id"> <div rebuild-on-change="datasourceMeta.id">
<plugin-directive-loader type="datasource-config-view"> <plugin-component type="datasource-config-view">
</plugin-directive-loader> </plugin-component>
</div> </div>
<div ng-if="testing" style="margin-top: 25px"> <div ng-if="testing" style="margin-top: 25px">
......
public/app/features/panel/query_editor.ts
...@@ -9,9 +9,8 @@ export class QueryEditorCtrl { ...@@ -9,9 +9,8 @@ export class QueryEditorCtrl {
panelCtrl: any; panelCtrl: any;
panel: any; panel: any;
constructor(private $scope, private $injector) { constructor(public $scope, private $injector) {
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
this.datasource = $scope.datasource;
if (!this.target.refId) { if (!this.target.refId) {
this.target.refId = this.getNextQueryLetter(); this.target.refId = this.getNextQueryLetter();
...@@ -44,8 +43,8 @@ export class QueryEditorCtrl { ...@@ -44,8 +43,8 @@ export class QueryEditorCtrl {
_.move(this.panel.targets, index, index + direction); _.move(this.panel.targets, index, index + direction);
} }
toggleHideQuery(target) { toggleHideQuery() {
target.hide = !target.hide; this.target.hide = !this.target.hide;
this.panelCtrl.refresh(); this.panelCtrl.refresh();
} }
} }
......
public/app/plugins/datasource/prometheus/partials/query.editor.html
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li class="tight-form-item small" ng-show="target.datasource"> <li class="tight-form-item small" ng-show="ctrl.target.datasource">
<em>{{ctrl.target.datasource}}</em> <em>{{ctrl.target.datasource}}</em>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
{{ctrl.target.refId}} {{ctrl.target.refId}}
</li> </li>
<li> <li>
<a class="tight-form-item" ng-click="ctrl.toggleHideQuery(ctrl.target);" role="menuitem"> <a class="tight-form-item" ng-click="ctrl.toggleHideQuery();" role="menuitem">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
</a> </a>
</li> </li>
...@@ -40,12 +40,12 @@ ...@@ -40,12 +40,12 @@
<li> <li>
<input type="text" <input type="text"
class="input-xxlarge tight-form-input" class="input-xxlarge tight-form-input"
ng-model="target.expr" ng-model="ctrl.target.expr"
spellcheck='false' spellcheck='false'
placeholder="query expression" placeholder="query expression"
data-min-length=0 data-items=100 data-min-length=0 data-items=100
ng-model-onblur ng-model-onblur
ng-change="refreshMetricData()"> ng-change="ctrl.refreshMetricData()">
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Metric Metric
...@@ -53,9 +53,9 @@ ...@@ -53,9 +53,9 @@
<li> <li>
<input type="text" <input type="text"
class="input-medium tight-form-input" class="input-medium tight-form-input"
ng-model="target.metric" ng-model="ctrl.target.metric"
spellcheck='false' spellcheck='false'
bs-typeahead="suggestMetrics" bs-typeahead="ctrl.suggestMetrics"
placeholder="metric name" placeholder="metric name"
data-min-length=0 data-items=100> data-min-length=0 data-items=100>
</li> </li>
...@@ -70,9 +70,9 @@ ...@@ -70,9 +70,9 @@
Legend format Legend format
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-xxlarge" ng-model="target.legendFormat" <input type="text" class="tight-form-input input-xxlarge" ng-model="ctrl.target.legendFormat"
spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000 spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
ng-model-onblur ng-change="refreshMetricData()"> ng-model-onblur ng-change="ctrl.refreshMetricData()">
</input> </input>
</li> </li>
</ul> </ul>
...@@ -86,14 +86,14 @@ ...@@ -86,14 +86,14 @@
Step Step
</li> </li>
<li> <li>
<input type="text" class="input-mini tight-form-input" ng-model="target.interval" <input type="text" class="input-mini tight-form-input" ng-model="ctrl.target.interval"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'" bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
data-placement="right" data-placement="right"
spellcheck='false' spellcheck='false'
placeholder="{{interval}}" placeholder="{{ctrl.panelCtrl.interval}}"
data-min-length=0 data-items=100 data-min-length=0 data-items=100
ng-model-onblur ng-model-onblur
ng-change="refreshMetricData()" ng-change="ctrl.refreshMetricData()"
/> />
</input> </input>
</li> </li>
...@@ -102,13 +102,13 @@ ...@@ -102,13 +102,13 @@
Resolution Resolution
</li> </li>
<li> <li>
<select ng-model="target.intervalFactor" class="tight-form-input input-mini" <select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
ng-options="r.factor as r.label for r in resolutions" ng-options="r.factor as r.label for r in ctrl.resolutions"
ng-change="refreshMetricData()"> ng-change="ctrl.refreshMetricData()">
</select> </select>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
<a href="{{linkToPrometheus()}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'"> <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
<i class="fa fa-share-square-o"></i> <i class="fa fa-share-square-o"></i>
</a> </a>
</li> </li>
......
public/app/plugins/datasource/prometheus/query_ctrl.ts
...@@ -13,6 +13,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl { ...@@ -13,6 +13,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
metric: any; metric: any;
resolutions: any; resolutions: any;
oldTarget: any; oldTarget: any;
suggestMetrics: any;
linkToPrometheus: any;
constructor($scope, $injector, private templateSrv) { constructor($scope, $injector, private templateSrv) {
super($scope, $injector); super($scope, $injector);
...@@ -27,28 +29,33 @@ class PrometheusQueryCtrl extends QueryEditorCtrl { ...@@ -27,28 +29,33 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
}); });
$scope.$on('typeahead-updated', () => { $scope.$on('typeahead-updated', () => {
$scope.$apply(this.inputMetric); this.$scope.$apply(() => {
this.refreshMetricData();
this.target.expr += this.target.metric;
this.metric = '';
this.refreshMetricData();
});
}); });
// called from typeahead so need this
// here in order to ensure this ref
this.suggestMetrics = (query, callback) => {
console.log(this);
this.datasource.performSuggestQuery(query).then(callback);
};
this.updateLink();
} }
refreshMetricData() { refreshMetricData() {
if (!_.isEqual(this.oldTarget, this.target)) { if (!_.isEqual(this.oldTarget, this.target)) {
this.oldTarget = angular.copy(this.target); this.oldTarget = angular.copy(this.target);
this.panelCtrl.refresh(); this.panelCtrl.refresh();
this.updateLink();
} }
} }
inputMetric() { updateLink() {
this.target.expr += this.target.metric;
this.metric = '';
}
suggestMetrics(query, callback) {
this.datasource.performSuggestQuery(query).then(callback);
}
linkToPrometheus() {
var range = this.panelCtrl.range; var range = this.panelCtrl.range;
var rangeDiff = Math.ceil((range.to.valueOf() - range.from.valueOf()) / 1000); var rangeDiff = Math.ceil((range.to.valueOf() - range.from.valueOf()) / 1000);
var endTime = range.to.utc().format('YYYY-MM-DD HH:mm'); var endTime = range.to.utc().format('YYYY-MM-DD HH:mm');
...@@ -61,8 +68,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl { ...@@ -61,8 +68,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
tab: 0 tab: 0
}; };
var hash = encodeURIComponent(JSON.stringify([expr])); var hash = encodeURIComponent(JSON.stringify([expr]));
return this.datasource.directUrl + '/graph#' + hash; this.linkToPrometheus = this.datasource.directUrl + '/graph#' + hash;
}; }
} }
export {PrometheusQueryCtrl}; export {PrometheusQueryCtrl};
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