mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(plugins): more progress on plugin editors
This commit is contained in:
parent
356f7b9db6
commit
21f6c07686
@ -5,7 +5,7 @@ import _ from 'lodash';
|
||||
|
||||
import coreModule from '../core_module';
|
||||
|
||||
function pluginDirectiveLoader($compile, datasourceSrv) {
|
||||
function pluginDirectiveLoader($compile, datasourceSrv, $rootScope) {
|
||||
|
||||
function getPluginComponentDirective(options) {
|
||||
return function() {
|
||||
@ -27,30 +27,53 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
|
||||
|
||||
function getModule(scope, attrs) {
|
||||
switch (attrs.type) {
|
||||
case "metrics-query-editor":
|
||||
// QueryCtrl
|
||||
case "query-ctrl": {
|
||||
let datasource = scope.target.datasource || scope.ctrl.panel.datasource;
|
||||
return datasourceSrv.get(datasource).then(ds => {
|
||||
scope.datasource = ds;
|
||||
|
||||
return System.import(ds.meta.module).then(dsModule => {
|
||||
return {
|
||||
name: 'metrics-query-editor-' + ds.meta.id,
|
||||
name: 'query-ctrl-' + ds.meta.id,
|
||||
bindings: {target: "=", panelCtrl: "=", datasource: "="},
|
||||
attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
|
||||
Component: dsModule.QueryCtrl
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
// QueryOptionsCtrl
|
||||
case "query-options-ctrl": {
|
||||
return datasourceSrv.get(scope.ctrl.panel.datasource).then(ds => {
|
||||
return System.import(ds.meta.module).then((dsModule): any => {
|
||||
if (!dsModule.QueryOptionsCtrl) {
|
||||
return {notFound: true};
|
||||
}
|
||||
|
||||
case 'datasource-config-view':
|
||||
return {
|
||||
name: 'query-options-ctrl-' + ds.meta.id,
|
||||
bindings: {panelCtrl: "="},
|
||||
attrs: {"panel-ctrl": "ctrl"},
|
||||
Component: dsModule.QueryOptionsCtrl
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
// ConfigCtrl
|
||||
case 'datasource-config-ctrl': {
|
||||
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,
|
||||
Component: dsModule.ConfigCtrl,
|
||||
};
|
||||
});
|
||||
}
|
||||
default: {
|
||||
$rootScope.appEvent('alert-error', ['Plugin component error', 'could not find component '+ attrs.type]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,6 +90,11 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
|
||||
}
|
||||
|
||||
function registerPluginComponent(scope, elem, attrs, componentInfo) {
|
||||
if (componentInfo.notFound) {
|
||||
elem.empty();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!componentInfo.Component.registered) {
|
||||
var directiveName = attrs.$normalize(componentInfo.name);
|
||||
var directiveFn = getPluginComponentDirective(componentInfo);
|
||||
|
@ -23,9 +23,11 @@ function getBlockNodes(nodes) {
|
||||
return blockNodes || nodes;
|
||||
}
|
||||
|
||||
function rebuildOnChange($compile) {
|
||||
function rebuildOnChange($animate) {
|
||||
|
||||
return {
|
||||
multiElement: true,
|
||||
terminal: true,
|
||||
transclude: true,
|
||||
priority: 600,
|
||||
restrict: 'E',
|
||||
@ -33,23 +35,31 @@ function rebuildOnChange($compile) {
|
||||
var childScope, previousElements;
|
||||
var uncompiledHtml;
|
||||
|
||||
scope.$watch(attrs.property, function rebuildOnChangeAction(value) {
|
||||
|
||||
function cleanUp() {
|
||||
if (childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = null;
|
||||
elem.empty();
|
||||
}
|
||||
}
|
||||
|
||||
if (value || attrs.ignoreNull) {
|
||||
if (!childScope) {
|
||||
transclude(function(clone, newScope) {
|
||||
childScope = newScope;
|
||||
elem.append($compile(clone)(childScope));
|
||||
});
|
||||
scope.$watch(attrs.property, function rebuildOnChangeAction(value, oldValue) {
|
||||
if (value || attrs.showNull) {
|
||||
// if same value and we have childscope
|
||||
// ignore this double event
|
||||
if (value === oldValue && childScope) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
cleanUp();
|
||||
transclude(function(clone, newScope) {
|
||||
childScope = newScope;
|
||||
$animate.enter(clone, elem.parent(), elem);
|
||||
});
|
||||
|
||||
} else {
|
||||
cleanUp();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
|
||||
<rebuild-on-change property="datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-view">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
|
||||
|
@ -1,10 +1,10 @@
|
||||
<div class="editor-row">
|
||||
|
||||
<div class="tight-form-container">
|
||||
<rebuild-on-change property="ctrl.panel.datasource" ignore-null="true">
|
||||
<plugin-component type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
<!-- <rebuild-on-change property="ctrl.panel.datasource" show-null="true"> -->
|
||||
<!-- <plugin-component type="query-ctrl" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}"> -->
|
||||
<!-- </plugin-component> -->
|
||||
<!-- </rebuild-on-change> -->
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0 0 0">
|
||||
@ -28,7 +28,11 @@
|
||||
|
||||
</div>
|
||||
|
||||
<metrics-query-options></metrics-query-options>
|
||||
<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
|
||||
<plugin-component type="query-options-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="editor-row" style="margin-top: 30px">
|
||||
|
@ -1,14 +1,20 @@
|
||||
import {GraphiteDatasource} from './datasource';
|
||||
import {GraphiteQueryCtrl} from './query_ctrl';
|
||||
|
||||
class GraphiteConfigView {
|
||||
class GraphiteConfigCtrl {
|
||||
static templateUrl = 'public/app/plugins/datasource/graphite/partials/config.html';
|
||||
}
|
||||
|
||||
class GraphiteQueryOptionsCtrl {
|
||||
static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.options.html';
|
||||
}
|
||||
|
||||
|
||||
export {
|
||||
GraphiteDatasource as Datasource,
|
||||
GraphiteQueryCtrl as QueryCtrl,
|
||||
GraphiteConfigView as ConfigView
|
||||
GraphiteConfigCtrl as ConfigCtrl,
|
||||
GraphiteQueryOptionsCtrl as QueryOptionsCtrl,
|
||||
};
|
||||
|
||||
// define([
|
||||
|
@ -1,5 +1,4 @@
|
||||
<section class="grafana-metric-options">
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item tight-form-item-icon">
|
||||
@ -11,7 +10,7 @@
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-mini tight-form-input"
|
||||
ng-model="ctrl.panel.cacheTimeout"
|
||||
ng-model="ctrl.panelCtrl.panel.cacheTimeout"
|
||||
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
|
||||
data-placement="right"
|
||||
spellcheck='false'
|
||||
@ -23,10 +22,10 @@
|
||||
<li>
|
||||
<input type="text"
|
||||
class="input-mini tight-form-input"
|
||||
ng-model="ctrl.panel.maxDataPoints"
|
||||
ng-model="ctrl.panelCtrl.panel.maxDataPoints"
|
||||
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
|
||||
data-placement="right"
|
||||
ng-model-onblur ng-change="ctrl.refresh()"
|
||||
ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
|
||||
spellcheck='false'
|
||||
placeholder="auto"></input>
|
||||
</li>
|
||||
@ -39,27 +38,27 @@
|
||||
<i class="fa fa-info-circle"></i>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<a ng-click="ctrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
shorter legend names
|
||||
</a>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<a ng-click="ctrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
series as parameters
|
||||
</a>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<a ng-click="ctrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
stacking
|
||||
</a>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<a ng-click="ctrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
templating
|
||||
</a>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<a ng-click="ctrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
|
||||
max data points
|
||||
</a>
|
||||
</li>
|
||||
@ -71,7 +70,7 @@
|
||||
<div class="editor-row">
|
||||
<div class="pull-left" style="margin-top: 30px;">
|
||||
|
||||
<div class="grafana-info-box span8" ng-if="ctrl.editorHelpIndex === 1">
|
||||
<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
|
||||
<h5>Shorter legend names</h5>
|
||||
<ul>
|
||||
<li>alias() function to specify a custom series name</li>
|
||||
@ -81,7 +80,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grafana-info-box span8" ng-if="ctrl.editorHelpIndex === 2">
|
||||
<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 2">
|
||||
<h5>Series as parameter</h5>
|
||||
<ul>
|
||||
<li>Some graphite functions allow you to have many series arguments</li>
|
||||
@ -99,7 +98,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 3">
|
||||
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 3">
|
||||
<h5>Stacking</h5>
|
||||
<ul>
|
||||
<li>You find the stacking option under Display Styles tab</li>
|
||||
@ -107,7 +106,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 4">
|
||||
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 4">
|
||||
<h5>Templating</h5>
|
||||
<ul>
|
||||
<li>You can use a template variable in place of metric names</li>
|
||||
@ -116,7 +115,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 5">
|
||||
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 5">
|
||||
<h5>Max data points</h5>
|
||||
<ul>
|
||||
<li>Every graphite request is issued with a maxDataPoints parameter</li>
|
||||
|
@ -1,12 +1,12 @@
|
||||
import {PrometheusDatasource} from './datasource';
|
||||
import {PrometheusQueryCtrl} from './query_ctrl';
|
||||
|
||||
class PrometheusConfigViewCtrl {
|
||||
class PrometheusConfigCtrl {
|
||||
static templateUrl = 'public/app/plugins/datasource/prometheus/partials/config.html';
|
||||
}
|
||||
|
||||
export {
|
||||
PrometheusDatasource as Datasource,
|
||||
PrometheusQueryCtrl as QueryCtrl,
|
||||
PrometheusConfigViewCtrl as ConfigView
|
||||
PrometheusConfigCtrl as ConfigCtrl
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user