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';
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);
......
public/app/core/directives/rebuild_on_change.ts
......@@ -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();
}
});
}
};
......
public/app/features/datasources/partials/edit.html
......@@ -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>
......
public/app/partials/metrics.html
<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&#45;on&#45;change property="ctrl.panel.datasource" show&#45;null="true"> -->
<!-- <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&#45;component> -->
<!-- </rebuild&#45;on&#45;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">
......
public/app/plugins/datasource/graphite/module.ts
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([
......
public/app/plugins/datasource/graphite/partials/query.options.html
<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>
......
public/app/plugins/datasource/prometheus/module.ts
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
};
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