feat: more work on metrics tab reworkings

docker/blocks/graphite/fig

@@ -4,7 +4,6 @@ graphite:
     - "8080:80"
     - "8080:80"
     - "2003:2003"
     - "2003:2003"
   volumes:
   volumes:
-    - /var/docker/gfdev/graphite:/opt/graphite/storage/whisper
     - /etc/localtime:/etc/localtime:ro
     - /etc/localtime:/etc/localtime:ro
     - /etc/timezone:/etc/timezone:ro
     - /etc/timezone:/etc/timezone:ro
 
 

public/app/core/directives/plugin_component.ts

@@ -109,7 +109,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
               baseUrl: ds.meta.baseUrl,
               baseUrl: ds.meta.baseUrl,
               name: 'query-ctrl-' + 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.panelCtrl", datasource: "datasource"},
               Component: dsModule.QueryCtrl
               Component: dsModule.QueryCtrl
             };
             };
           });
           });
@@ -127,7 +127,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
               baseUrl: ds.meta.baseUrl,
               baseUrl: ds.meta.baseUrl,
               name: 'query-options-ctrl-' + ds.meta.id,
               name: 'query-options-ctrl-' + ds.meta.id,
               bindings: {panelCtrl: "="},
               bindings: {panelCtrl: "="},
-              attrs: {"panel-ctrl": "ctrl"},
+              attrs: {"panel-ctrl": "ctrl.panelCtrl"},
               Component: dsModule.QueryOptionsCtrl
               Component: dsModule.QueryOptionsCtrl
             };
             };
           });
           });

public/app/features/panel/all.js

@@ -5,6 +5,5 @@ define([
   './query_ctrl',
   './query_ctrl',
   './panel_editor_tab',
   './panel_editor_tab',
   './query_editor_row',
   './query_editor_row',
-  './metrics_ds_selector',
   './query_troubleshooter',
   './query_troubleshooter',
 ], function () {});
 ], function () {});

public/app/features/panel/metrics_panel_ctrl.ts

@@ -10,6 +10,7 @@ import * as rangeUtil from 'app/core/utils/rangeutil';
 import * as dateMath from 'app/core/utils/datemath';
 import * as dateMath from 'app/core/utils/datemath';
 
 
 import {Subject} from 'vendor/npm/rxjs/Subject';
 import {Subject} from 'vendor/npm/rxjs/Subject';
+import {metricsTabDirective} from './metrics_tab';
 
 
 class MetricsPanelCtrl extends PanelCtrl {
 class MetricsPanelCtrl extends PanelCtrl {
   scope: any;
   scope: any;
@@ -61,7 +62,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
   }
 
 
   private onInitMetricsPanelEditMode() {
   private onInitMetricsPanelEditMode() {
-    this.addEditorTab('Metrics', 'public/app/partials/metrics.html');
+    this.addEditorTab('Metrics', metricsTabDirective);
     this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
     this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
   }
   }
 
 

public/app/features/panel/metrics_ds_selector.ts → public/app/features/panel/metrics_tab.ts

 ///<reference path="../../headers/common.d.ts" />
 ///<reference path="../../headers/common.d.ts" />
 
 
-import angular from 'angular';
 import _ from 'lodash';
 import _ from 'lodash';
-import appEvents  from 'app/core/app_events';
+import {DashboardModel} from '../dashboard/model';
 
 
-var module = angular.module('grafana.directives');
-
-var template = `
-
-<div class="gf-form-group">
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <label class="gf-form-label">
-        <i class="icon-gf icon-gf-datasources"></i>
-      </label>
-      <label class="gf-form-label">
-        Data Source
-      </label>
-
-      <metric-segment segment="ctrl.dsSegment"
-                      get-options="ctrl.getOptions(true)"
-                      on-change="ctrl.datasourceChanged()"></metric-segment>
-    </div>
-
-    <div class="gf-form gf-form--offset-1">
-      <button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
-        <i class="fa fa-plus"></i>&nbsp;
-        Add Query
-      </button>
-
-      <div class="dropdown" ng-if="ctrl.current.meta.mixed">
-        <metric-segment segment="ctrl.mixedDsSegment"
-                        get-options="ctrl.getOptions(false)"
-                        on-change="ctrl.mixedDatasourceChanged()"></metric-segment>
-      </div>
-    </div>
-
-  </div>
-</div>
-`;
-
-
-export class MetricsDsSelectorCtrl {
+export class MetricsTabCtrl {
   dsSegment: any;
   dsSegment: any;
   mixedDsSegment: any;
   mixedDsSegment: any;
   dsName: string;
   dsName: string;
+  panel: any;
   panelCtrl: any;
   panelCtrl: any;
   datasources: any[];
   datasources: any[];
   current: any;
   current: any;
-  lastResponse: any;
-  responseData: any;
-  showResponse: boolean;
+  nextRefId: string;
+  dashboard: DashboardModel;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor($scope, private uiSegmentSrv, datasourceSrv) {
   constructor($scope, private uiSegmentSrv, datasourceSrv) {
+    this.panelCtrl = $scope.ctrl;
+    $scope.ctrl = this;
+
+    this.panel = this.panelCtrl.panel;
+    this.dashboard = this.panelCtrl.dashboard;
     this.datasources = datasourceSrv.getMetricSources();
     this.datasources = datasourceSrv.getMetricSources();
 
 
     var dsValue = this.panelCtrl.panel.datasource || null;
     var dsValue = this.panelCtrl.panel.datasource || null;
@@ -70,9 +37,9 @@ export class MetricsDsSelectorCtrl {
 
 
     this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
     this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
     this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true});
     this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true});
+    this.nextRefId = this.getNextQueryLetter();
   }
   }
 
 
-
   getOptions(includeBuiltin) {
   getOptions(includeBuiltin) {
     return Promise.resolve(this.datasources.filter(value => {
     return Promise.resolve(this.datasources.filter(value => {
       return includeBuiltin || !value.meta.builtIn;
       return includeBuiltin || !value.meta.builtIn;
@@ -86,7 +53,6 @@ export class MetricsDsSelectorCtrl {
     if (ds) {
     if (ds) {
       this.current = ds;
       this.current = ds;
       this.panelCtrl.setDatasource(ds);
       this.panelCtrl.setDatasource(ds);
-      this.responseData = null;
     }
     }
   }
   }
 
 
@@ -100,22 +66,27 @@ export class MetricsDsSelectorCtrl {
     }
     }
   }
   }
 
 
+  getNextQueryLetter() {
+    return this.dashboard.getNextQueryLetter(this.panel);
+  }
+
   addDataQuery() {
   addDataQuery() {
-    var target: any = {isNew: true};
+    var target: any = {
+      isNew: true,
+      refId: this.getNextQueryLetter()
+    };
     this.panelCtrl.panel.targets.push(target);
     this.panelCtrl.panel.targets.push(target);
+    this.nextRefId = this.getNextQueryLetter();
   }
   }
 }
 }
 
 
-module.directive('metricsDsSelector', function() {
+/** @ngInject **/
+export function metricsTabDirective() {
+  'use strict';
   return {
   return {
     restrict: 'E',
     restrict: 'E',
-    template: template,
-    controller: MetricsDsSelectorCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    transclude: true,
-    scope: {
-      panelCtrl: "="
-    }
+    scope: true,
+    templateUrl: 'public/app/partials/metrics.html',
+    controller: MetricsTabCtrl,
   };
   };
-});
+}

public/app/partials/metrics.html

 
 
-<metrics-ds-selector panel-ctrl="ctrl"></metrics-ds-selector>
+<div class="gf-form-group">
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label">
+        <i class="icon-gf icon-gf-datasources"></i>
+      </label>
+
+      <label class="gf-form-label">
+        Data Source
+      </label>
+
+      <metric-segment segment="ctrl.dsSegment"
+                      get-options="ctrl.getOptions(true)"
+                      on-change="ctrl.datasourceChanged()"></metric-segment>
+    </div>
+	</div>
+</div>
 
 
 <div class="query-editor-rows gf-form-group">
 <div class="query-editor-rows gf-form-group">
   <div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
   <div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
@@ -7,16 +23,40 @@
       <plugin-component type="query-ctrl">
       <plugin-component type="query-ctrl">
       </plugin-component>
       </plugin-component>
     </rebuild-on-change>
     </rebuild-on-change>
-  </div>
-</div>
+	</div>
 
 
-<query-troubleshooter panel-ctrl="ctrl"></query-troubleshooter>
+	<div class="gf-form-query">
+		<div class="gf-form gf-form-query-letter-cell">
+			<label class="gf-form-label">
+				<span class="gf-form-query-letter-cell-carret">
+					<i class="fa fa-caret-down"></i>
+				</span>
+				<span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span>
+			</label>
+					<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
+						Add Query
+					</button>
 
 
-<div class="gf-form-group">
-  <rebuild-on-change property="ctrl.panel.datasource" show-null="true">
-    <plugin-component type="query-options-ctrl">
-    </plugin-component>
-  </rebuild-on-change>
+					<div class="dropdown" ng-if="ctrl.current.meta.mixed">
+						<metric-segment segment="ctrl.mixedDsSegment" get-options="ctrl.getOptions(false)" on-change="ctrl.mixedDatasourceChanged()"></metric-segment>
+					</div>
+			</div>
+	</div>
 </div>
 </div>
 
 
+<query-troubleshooter panel-ctrl="ctrl.panelCtrl"></query-troubleshooter>
+
+<collapse-box title="Advanced Options & Data source help">
+	<collapse-box-body>
+
+		<div class="gf-form-group">
+			<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
+				<plugin-component type="query-options-ctrl">
+				</plugin-component>
+			</rebuild-on-change>
+		</div>
+
+	</collapse-box-body>
+</collapse-box>
+
 <div class="clearfix"></div>
 <div class="clearfix"></div>