diff --git a/public/app/core/directives/rebuild_on_change.ts b/public/app/core/directives/rebuild_on_change.ts index 847903f22ff..b807d5bc50d 100644 --- a/public/app/core/directives/rebuild_on_change.ts +++ b/public/app/core/directives/rebuild_on_change.ts @@ -32,31 +32,38 @@ function rebuildOnChange($animate) { priority: 600, restrict: 'E', link: function(scope, elem, attrs, ctrl, transclude) { - var childScope, previousElements; - var uncompiledHtml; + var block, childScope, previousElements; function cleanUp() { + if (previousElements) { + previousElements.remove(); + previousElements = null; + } if (childScope) { childScope.$destroy(); childScope = null; - elem.empty(); + } + if (block) { + previousElements = getBlockNodes(block.clone); + $animate.leave(previousElements).then(function() { + previousElements = null; + }); + block = null; } } 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; - } - + if (childScope && value !== oldValue) { cleanUp(); + } + + if (!childScope && (value || attrs.showNull)) { transclude(function(clone, newScope) { childScope = newScope; + clone[clone.length++] = document.createComment(' end rebuild on change '); + block = {clone: clone}; $animate.enter(clone, elem.parent(), elem); }); - } else { cleanUp(); } diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index 96a119c8b48..47fe256e7cf 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -5,4 +5,5 @@ define([ './panel_loader', './query_ctrl', './panel_editor_tab', + './query_editor_row', ], function () {}); diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 148d8647f28..14f5a59490b 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -164,12 +164,12 @@ class MetricsPanelCtrl extends PanelCtrl { }; issueQueries(datasource) { + this.updateTimeRange(); + if (!this.panel.targets || this.panel.targets.length === 0) { return this.$q.when([]); } - this.updateTimeRange(); - var metricsQuery = { range: this.range, rangeRaw: this.rangeRaw, diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html new file mode 100644 index 00000000000..9df0dcdbc51 --- /dev/null +++ b/public/app/features/panel/partials/query_editor_row.html @@ -0,0 +1,56 @@ +
+ + + + + + +
+
diff --git a/public/app/features/panel/query_ctrl.ts b/public/app/features/panel/query_ctrl.ts index 5227febed2f..236d55e3bda 100644 --- a/public/app/features/panel/query_ctrl.ts +++ b/public/app/features/panel/query_ctrl.ts @@ -8,6 +8,7 @@ export class QueryCtrl { datasource: any; panelCtrl: any; panel: any; + hasRawMode: boolean; constructor(public $scope, private $injector) { this.panel = this.panelCtrl.panel; diff --git a/public/app/features/panel/query_editor_row.ts b/public/app/features/panel/query_editor_row.ts new file mode 100644 index 00000000000..252fc38fe0d --- /dev/null +++ b/public/app/features/panel/query_editor_row.ts @@ -0,0 +1,18 @@ +/// + +import angular from 'angular'; +import $ from 'jquery'; + +var module = angular.module('grafana.directives'); + +/** @ngInject **/ +function queryEditorRowDirective() { + return { + restrict: 'E', + templateUrl: 'public/app/features/panel/partials/query_editor_row.html', + transclude: true, + scope: { ctrl: "=" }, + }; +} + +module.directive('queryEditorRow', queryEditorRowDirective); diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index bf2ef7bdfed..f7b1672cd97 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,10 +1,12 @@
- - - - +
+ + + + +
diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 2557dfbf0a2..c78062b1cb0 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -1,61 +1,7 @@ -
- - -
    -
  • - {{ctrl.target.refId}} -
    • -
  • - - - -
    • -
+ - + -
-
+ + diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts index f6afe8a6d13..01c61ad2a40 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.ts +++ b/public/app/plugins/datasource/graphite/query_ctrl.ts @@ -17,6 +17,7 @@ export class GraphiteQueryCtrl extends QueryCtrl { segments: any[]; parserError: string; + /** @ngInject **/ constructor($scope, $injector, private uiSegmentSrv, private templateSrv) { super($scope, $injector); diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index cb51f28ff0e..e65d716e832 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -1,118 +1,82 @@ + + +
  • + Query +
    • +
  • + +
    • +
  • + Metric +
    • +
  • + +
    • + +     +
    - + -
      -
    • - {{ctrl.target.refId}} -
      • -
    • - - - -
      • -
    - - - -
    +
    - +
    +
  • + Resolution +
    • +
  • + +
    • +
  • + + + +
    • + -
    - - -
    +