Skip to content

N
nexpie-grafana-theme
Commit 21f6c076 by Torkel Ödegaard
Options

feat(plugins): more progress on plugin editors

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