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(plugins): more work on plugin editors,prometheus query editor is working

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-02 10:19:15 +01:00
parent eaaf9246b7
commit efdd4a6682
6 changed files with 43 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/directives/plugin_component.ts
View File

@@ -35,8 +35,8 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
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"},
bindings: {target: "=", panelCtrl: "=", datasource: "="},
attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
Component: dsModule.MetricsQueryEditor
};
});

92
public/app/core/directives/plugin_directive_loader.ts
View File

@@ -1,92 +0,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);

4
public/app/features/datasources/partials/edit.html
View File

@@ -42,8 +42,8 @@
</div>
<div rebuild-on-change="datasourceMeta.id">
<plugin-directive-loader type="datasource-config-view">
</plugin-directive-loader>
<plugin-component type="datasource-config-view">
</plugin-component>
</div>
<div ng-if="testing" style="margin-top: 25px">

7
public/app/features/panel/query_editor.ts
View File

@@ -9,9 +9,8 @@ export class QueryEditorCtrl {
panelCtrl: any;
panel: any;
constructor(private $scope, private $injector) {
constructor(public $scope, private $injector) {
this.panel = this.panelCtrl.panel;
this.datasource = $scope.datasource;
if (!this.target.refId) {
this.target.refId = this.getNextQueryLetter();
@@ -44,8 +43,8 @@ export class QueryEditorCtrl {
_.move(this.panel.targets, index, index + direction);
}
toggleHideQuery(target) {
target.hide = !target.hide;
toggleHideQuery() {
this.target.hide = !this.target.hide;
this.panelCtrl.refresh();
}
}

30
public/app/plugins/datasource/prometheus/partials/query.editor.html
View File

@@ -1,6 +1,6 @@
<div class="tight-form">
<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>
</li>
<li class="tight-form-item">
@@ -27,7 +27,7 @@
{{ctrl.target.refId}}
</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>
</a>
</li>
@@ -40,12 +40,12 @@
<li>
<input type="text"
class="input-xxlarge tight-form-input"
ng-model="target.expr"
ng-model="ctrl.target.expr"
spellcheck='false'
placeholder="query expression"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()">
ng-change="ctrl.refreshMetricData()">
</li>
<li class="tight-form-item">
Metric
@@ -53,9 +53,9 @@
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.metric"
ng-model="ctrl.target.metric"
spellcheck='false'
bs-typeahead="suggestMetrics"
bs-typeahead="ctrl.suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100>
</li>
@@ -70,9 +70,9 @@
Legend format
</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
ng-model-onblur ng-change="refreshMetricData()">
ng-model-onblur ng-change="ctrl.refreshMetricData()">
</input>
</li>
</ul>
@@ -86,14 +86,14 @@
Step
</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'"
data-placement="right"
spellcheck='false'
placeholder="{{interval}}"
placeholder="{{ctrl.panelCtrl.interval}}"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
ng-change="ctrl.refreshMetricData()"
/>
</input>
</li>
@@ -102,13 +102,13 @@
Resolution
</li>
<li>
<select ng-model="target.intervalFactor" class="tight-form-input input-mini"
ng-options="r.factor as r.label for r in resolutions"
ng-change="refreshMetricData()">
<select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
ng-options="r.factor as r.label for r in ctrl.resolutions"
ng-change="ctrl.refreshMetricData()">
</select>
</li>
<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>
</a>
</li>

35
public/app/plugins/datasource/prometheus/query_ctrl.ts
View File

@@ -13,6 +13,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
metric: any;
resolutions: any;
oldTarget: any;
suggestMetrics: any;
linkToPrometheus: any;
constructor($scope, $injector, private templateSrv) {
super($scope, $injector);
@@ -27,28 +29,33 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
});
$scope.$on('typeahead-updated', () => {
$scope.$apply(this.inputMetric);
this.refreshMetricData();
this.$scope.$apply(() => {
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() {
if (!_.isEqual(this.oldTarget, this.target)) {
this.oldTarget = angular.copy(this.target);
this.panelCtrl.refresh();
this.updateLink();
}
}
inputMetric() {
this.target.expr += this.target.metric;
this.metric = '';
}
suggestMetrics(query, callback) {
this.datasource.performSuggestQuery(query).then(callback);
}
linkToPrometheus() {
updateLink() {
var range = this.panelCtrl.range;
var rangeDiff = Math.ceil((range.to.valueOf() - range.from.valueOf()) / 1000);
var endTime = range.to.utc().format('YYYY-MM-DD HH:mm');
@@ -61,8 +68,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
tab: 0
};
var hash = encodeURIComponent(JSON.stringify([expr]));
return this.datasource.directUrl + '/graph#' + hash;
};
this.linkToPrometheus = this.datasource.directUrl + '/graph#' + hash;
}
}
export {PrometheusQueryCtrl};