diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts index 8bc28b8a57d..b221c8577fa 100644 --- a/public/app/core/components/info_popover.ts +++ b/public/app/core/components/info_popover.ts @@ -11,11 +11,6 @@ export function infoPopover() { template: '', transclude: true, link: function(scope, elem, attrs, ctrl, transclude) { - // var inputElem = elem.prev(); - // if (inputElem.length === 0) { - // console.log('Failed to find input element for popover'); - // return; - // } var offset = attrs.offset || '0 -10px'; var position = attrs.position || 'right middle'; diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index b3ec16e541f..2f978e65345 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -5,4 +5,5 @@ define([ './query_ctrl', './panel_editor_tab', './query_editor_row', + './metrics_ds_selector', ], function () {}); diff --git a/public/app/features/panel/metrics_ds_selector.ts b/public/app/features/panel/metrics_ds_selector.ts new file mode 100644 index 00000000000..f93ee5ad15a --- /dev/null +++ b/public/app/features/panel/metrics_ds_selector.ts @@ -0,0 +1,104 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; + +var module = angular.module('grafana.directives'); + +var template = ` +
+
+
+ + + + +
+ +
+ + +
+ + + +
+
+
+
+`; + + +export class MetricsDsSelectorCtrl { + dsSegment: any; + dsName: string; + panelCtrl: any; + datasources: any[]; + current: any; + + /** @ngInject */ + constructor(private uiSegmentSrv, datasourceSrv) { + this.datasources = datasourceSrv.getMetricSources(); + + for (let ds of this.datasources) { + if (ds.value === this.panelCtrl.panel.datasource) { + this.current = ds; + } + } + + this.dsSegment = uiSegmentSrv.newSegment(this.current.name); + } + + getOptions() { + return Promise.resolve(this.datasources.map(value => { + return this.uiSegmentSrv.newSegment(value.name); + })); + } + + datasourceChanged() { + var ds = _.findWhere(this.datasources, {name: this.dsSegment.value}); + if (ds) { + this.current = ds; + this.panelCtrl.setDatasource(ds); + } + } + + addDataQuery(datasource) { + var target: any = {}; + + if (datasource) { + target.datasource = datasource.name; + } + + this.panelCtrl.panel.targets.push(target); + } +} + +module.directive('metricsDsSelector', function() { + return { + restrict: 'E', + template: template, + controller: MetricsDsSelectorCtrl, + bindToController: true, + controllerAs: 'ctrl', + transclude: true, + scope: { + panelCtrl: "=" + } + }; +}); diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index e8c16fd9ab7..9ff63785273 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -27,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl { resolution: any; timeInfo: any; skipDataOnInit: boolean; - datasources: any[]; dataStream: any; dataSubscription: any; @@ -52,7 +51,6 @@ class MetricsPanelCtrl extends PanelCtrl { private onInitMetricsPanelEditMode() { this.addEditorTab('Metrics', 'public/app/partials/metrics.html'); this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html'); - this.datasources = this.datasourceSrv.getMetricSources(); } private onMetricsPanelRefresh() { @@ -249,16 +247,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.datasource = null; this.refresh(); } - - addDataQuery(datasource) { - var target: any = {}; - - if (datasource) { - target.datasource = datasource.name; - } - - this.panel.targets.push(target); - } } export {MetricsPanelCtrl}; diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html index 75df55a73da..722c7c27b6f 100644 --- a/public/app/features/panel/partials/query_editor_row.html +++ b/public/app/features/panel/partials/query_editor_row.html @@ -15,8 +15,9 @@
+
diff --git a/public/app/features/panel/query_ctrl.ts b/public/app/features/panel/query_ctrl.ts index 66370595252..199b070aaa7 100644 --- a/public/app/features/panel/query_ctrl.ts +++ b/public/app/features/panel/query_ctrl.ts @@ -10,9 +10,11 @@ export class QueryCtrl { panel: any; hasRawMode: boolean; error: string; + collapsed: boolean; constructor(public $scope, private $injector) { this.panel = this.panelCtrl.panel; + this.collapsed = true; if (!this.target.refId) { this.target.refId = this.getNextQueryLetter(); diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index 54955a8e274..0f2f808f891 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,56 +1,19 @@ -
- -
-
- - - - -
-
- -
- - -
- - - -
- -
- - - - - +
+
+ + + + +
-
+ -
- - - -
- -
+
+ + + +
+ diff --git a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html index 017f5cf1a42..87616acd6fc 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html @@ -1,17 +1,21 @@ - -
  • - Query -
    • -
  • - -
    • -
  • - Alias -
    • -
  • - -
    • -     + + +
    +
      +
    • + Query +
      • +
    • + +
      • +
    • + Alias +
      • +
    • + +
      • +
    +
    -
    - -
    +
    + +
    -
    -
    -
    - +
    - - -
    +
    + +
    -
    - +
    -
    - -
    -
    +
    +
    + -
    -
    + + +
    -
    -
    - -
    +
    + -
    - - -
    +
    + +
    +
    -
    - -
    +
    +
    -
    -
    +
    +
    + +
    -
    -
    - +
    + + +
    - - +
    + +
    - -
    +
    +
    -
    -
    +
    +
    + -
    + + -
    -
    - - -
    -
    - -
    - -
    -
    -
    -
    + +
    + +
    +
    +
    + +
    +
    + + +
    +
    + +
    + +
    +
    +
    +
    +
    diff --git a/public/app/plugins/datasource/influxdb/partials/query.options.html b/public/app/plugins/datasource/influxdb/partials/query.options.html index 1e3a08eb556..e2b5e522541 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.options.html +++ b/public/app/plugins/datasource/influxdb/partials/query.options.html @@ -38,7 +38,7 @@
    -
    +
    Alias patterns
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index a732661106b..94cc795d9eb 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -8,8 +8,8 @@ $gf-form-margin: 0.25rem; text-align: left; position: relative; - .cr1 { - margin-left: 8px; + &--offset-1 { + margin-left: $spacer; } } @@ -162,9 +162,11 @@ $gf-form-margin: 0.25rem; } .gf-form-btn { - margin-right: $gf-form-margin; padding: $input-padding-y $input-padding-x; + margin-right: $gf-form-margin; line-height: $input-line-height; + font-size: $font-size-sm; + flex-shrink: 0; flex-grow: 0; } diff --git a/public/sass/components/_query_part.scss b/public/sass/components/_query_part.scss index a2543e1a75c..1e2fb9622c2 100644 --- a/public/sass/components/_query_part.scss +++ b/public/sass/components/_query_part.scss @@ -9,8 +9,3 @@ } } -.query-part-name { -} - -.query-part-parameters { -}