Adding mixed query

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -236,14 +236,14 @@ export class QueriesTab extends PureComponent<Props, State> {
     return isLoadingHelp ? <LoadingPlaceholder text="Loading help..." /> : helpContent;
   };
 
-  onAddQuery = (query?: DataQuery) => {
+  onAddQuery = (query?: Partial<DataQuery>) => {
     this.props.panel.addQuery(query);
     this.forceUpdate();
   };
 
   onAddQueryClick = () => {
     if (this.state.currentDS.meta.mixed) {
-      this.setState({ isAddingMixed: true })
+      this.setState({ isAddingMixed: true });
       return;
     }
 
@@ -284,8 +284,6 @@ export class QueriesTab extends PureComponent<Props, State> {
   };
 
   renderMixedPicker = () => {
-    const { currentDS } = this.state;
-
     return (
       <DataSourcePicker
         datasources={this.datasources}
@@ -299,6 +297,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
   onAddMixedQuery = datasource => {
     this.onAddQuery({ datasource: datasource.name });
+    this.component.digest();
     this.setState({ isAddingMixed: false });
   };
 
@@ -348,7 +347,11 @@ export class QueriesTab extends PureComponent<Props, State> {
                 </span>
                 <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
               </label>
-              {!isAddingMixed && <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>Add Query</button>}
+              {!isAddingMixed && (
+                <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
+                  Add Query
+                </button>
+              )}
               {isAddingMixed && this.renderMixedPicker()}
             </div>
           </div>

public/app/features/dashboard/panel_model.ts

@@ -238,9 +238,10 @@ export class PanelModel {
     this.restorePanelOptions(pluginId);
   }
 
-  addQuery(query?: DataQuery) {
+  addQuery(query?: Partial<DataQuery>) {
     query = query || { refId: 'A' };
-    (query.refId = this.getNextQueryLetter()), (query.isNew = true);
+    query.refId = this.getNextQueryLetter();
+    query.isNew = true;
 
     this.targets.push(query);
   }

public/app/plugins/datasource/prometheus/partials/query.editor.html

@@ -8,7 +8,7 @@
   </div>
 
   <div class="gf-form-inline">
-    <div class="gf-form max-width-26">
+    <div class="gf-form">
       <label class="gf-form-label width-8">Legend format</label>
       <input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat" spellcheck='false' placeholder="legend format"
         data-min-length=0 data-items=1000 ng-model-onblur ng-change="ctrl.refreshMetricData()">
@@ -58,4 +58,4 @@
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
   </div>
-</query-editor-row>
+</query-editor-row>