ux: metrics tab add query feature

public/app/features/panel/metrics_tab.ts

@@ -62,11 +62,17 @@ export class MetricsTabCtrl {
   mixedDatasourceChanged() {
     var target: any = {isNew: true};
     var ds = _.find(this.datasources, {name: this.mixedDsSegment.value});
+
     if (ds) {
       target.datasource = ds.name;
-      this.panelCtrl.addDataQuery(target);
-      this.mixedDsSegment.value = '';
+      this.panelCtrl.addQuery(target);
     }
+
+    // metric segments are really bad, requires hacks to update
+    const segment = this.uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true, fake: true});
+    this.mixedDsSegment.value = segment.value;
+    this.mixedDsSegment.html = segment.html;
+    this.mixedDsSegment.text = segment.text;
   }
 
   addQuery() {

public/app/features/panel/partials/metrics_tab.html

@@ -14,39 +14,32 @@
 				</span>
 				<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
 			</label>
-					<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
-						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>
+      <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
+        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>
 
-<query-troubleshooter panel-ctrl="ctrl.panelCtrl"></query-troubleshooter>
-
-<collapse-box title="Data Source: {{ctrl.dsSegment.value}}">
-	<collapse-box-body>
-
-		<div class="gf-form-group">
-			<div class="gf-form-inline">
-				<div class="gf-form">
-					<label class="gf-form-label">
-						Panel Data Source
-					</label>
-					<metric-segment segment="ctrl.dsSegment" get-options="ctrl.getOptions(true)" on-change="ctrl.datasourceChanged()"></metric-segment>
-				</div>
-			</div>
-		</div>
-
-		<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
-			<plugin-component type="query-options-ctrl">
-			</plugin-component>
-		</rebuild-on-change>
-
-	</collapse-box-body>
-</collapse-box>
+<!-- <query&#45;troubleshooter panel&#45;ctrl="ctrl.panelCtrl"></query&#45;troubleshooter> -->
+
+<div class="gf-form-group">
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label">
+        Panel Data Source
+      </label>
+      <metric-segment segment="ctrl.dsSegment" get-options="ctrl.getOptions(true)" on-change="ctrl.datasourceChanged()"></metric-segment>
+    </div>
+  </div>
+</div>
 
-<div class="clearfix"></div>
+<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
+  <plugin-component type="query-options-ctrl">
+  </plugin-component>
+</rebuild-on-change>
+</div>