diff --git a/public/app/core/directives/plugin_component.ts b/public/app/core/directives/plugin_component.ts index d4722c6d2f5..e628fbede39 100644 --- a/public/app/core/directives/plugin_component.ts +++ b/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); diff --git a/public/app/core/directives/rebuild_on_change.ts b/public/app/core/directives/rebuild_on_change.ts index 6cc7ad899c1..847903f22ff 100644 --- a/public/app/core/directives/rebuild_on_change.ts +++ b/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(); + } }); } }; diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index ad3473f0ea7..00706cb4de5 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -42,7 +42,7 @@ - + diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index 934feb1eb2c..bf2ef7bdfed 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,10 +1,10 @@
- - - - + + + +
@@ -28,7 +28,11 @@
- + + + + +
diff --git a/public/app/plugins/datasource/graphite/module.ts b/public/app/plugins/datasource/graphite/module.ts index abab560aafd..a743c0ff65a 100644 --- a/public/app/plugins/datasource/graphite/module.ts +++ b/public/app/plugins/datasource/graphite/module.ts @@ -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([ diff --git a/public/app/plugins/datasource/graphite/partials/query.options.html b/public/app/plugins/datasource/graphite/partials/query.options.html index f20b55b1348..35c95d03e88 100644 --- a/public/app/plugins/datasource/graphite/partials/query.options.html +++ b/public/app/plugins/datasource/graphite/partials/query.options.html @@ -1,5 +1,4 @@
-
  • @@ -11,7 +10,7 @@
  • @@ -39,27 +38,27 @@
  • - + shorter legend names
  • - + series as parameters
  • - + stacking
  • - + templating
  • - + max data points
  • @@ -71,7 +70,7 @@
    -
    +
    Shorter legend names
    • alias() function to specify a custom series name
    • @@ -81,7 +80,7 @@
    -
    +
    Series as parameter
    • Some graphite functions allow you to have many series arguments
    • @@ -99,7 +98,7 @@
    -
    +
    Stacking
    • You find the stacking option under Display Styles tab
    • @@ -107,7 +106,7 @@
    -
    +
    Templating
    • You can use a template variable in place of metric names
    • @@ -116,7 +115,7 @@
    -
    +
    Max data points
    • Every graphite request is issued with a maxDataPoints parameter
    • diff --git a/public/app/plugins/datasource/prometheus/module.ts b/public/app/plugins/datasource/prometheus/module.ts index ae0b6d99e9e..9af37384b4f 100644 --- a/public/app/plugins/datasource/prometheus/module.ts +++ b/public/app/plugins/datasource/prometheus/module.ts @@ -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 };