Merge pull request #14975 from grafana/default-datasource-query-editor

Fix for default datasource query editor

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

@@ -197,7 +197,7 @@ export class QueriesTab extends PureComponent<Props, State> {
           <div className="query-editor-rows">
             {panel.targets.map((query, index) => (
               <QueryEditorRow
-                datasourceName={query.datasource || panel.datasource}
+                dataSourceValue={query.datasource || panel.datasource}
                 key={query.refId}
                 panel={panel}
                 query={query}

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -18,11 +18,12 @@ interface Props {
   onAddQuery: (query?: DataQuery) => void;
   onRemoveQuery: (query: DataQuery) => void;
   onMoveQuery: (query: DataQuery, direction: number) => void;
-  datasourceName: string | null;
+  dataSourceValue: string | null;
   inMixedMode: boolean;
 }
 
 interface State {
+  loadedDataSourceValue: string | null | undefined;
   datasource: DataSourceApi | null;
   isCollapsed: boolean;
   angularScope: AngularQueryComponentScope | null;
@@ -36,6 +37,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     datasource: null,
     isCollapsed: false,
     angularScope: null,
+    loadedDataSourceValue: undefined,
   };
 
   componentDidMount() {
@@ -61,14 +63,14 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const dataSourceSrv = getDatasourceSrv();
     const datasource = await dataSourceSrv.get(query.datasource || panel.datasource);
 
-    this.setState({ datasource });
+    this.setState({ datasource, loadedDataSourceValue: this.props.dataSourceValue });
   }
 
   componentDidUpdate() {
-    const { datasource } = this.state;
+    const { loadedDataSourceValue } = this.state;
 
     // check if we need to load another datasource
-    if (datasource && datasource.name !== this.props.datasourceName) {
+    if (loadedDataSourceValue !== this.props.dataSourceValue) {
       if (this.angularQueryEditor) {
         this.angularQueryEditor.destroy();
         this.angularQueryEditor = null;
@@ -178,7 +180,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   }
 
   render() {
-    const { query, datasourceName, inMixedMode } = this.props;
+    const { query, inMixedMode } = this.props;
     const { datasource, isCollapsed } = this.state;
     const isDisabled = query.hide;
 
@@ -202,7 +204,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
             {isCollapsed && <i className="fa fa-caret-right" />}
             {!isCollapsed && <i className="fa fa-caret-down" />}
             <span>{query.refId}</span>
-            {inMixedMode && <em className="query-editor-row__context-info"> ({datasourceName})</em>}
+            {inMixedMode && <em className="query-editor-row__context-info"> ({datasource.name})</em>}
             {isDisabled && <em className="query-editor-row__context-info"> Disabled</em>}
           </div>
           <div className="query-editor-row__collapsed-text" onClick={this.onToggleEditMode}>

public/app/features/dashboard/panel_model.ts

@@ -62,7 +62,7 @@ const mustKeepProps: { [str: string]: boolean } = {
 const defaults: any = {
   gridPos: { x: 0, y: 0, h: 3, w: 6 },
   datasource: null,
-  targets: [{}],
+  targets: [{ refId: 'A' }],
   cachedPluginOptions: {},
   transparent: false,
 };
@@ -83,7 +83,7 @@ export class PanelModel {
   collapsed?: boolean;
   panels?: any;
   soloMode?: boolean;
-  targets: any[];
+  targets: DataQuery[];
   datasource: string;
   thresholds?: any;
 
@@ -118,6 +118,18 @@ export class PanelModel {
 
     // defaults
     _.defaultsDeep(this, _.cloneDeep(defaults));
+    // queries must have refId
+    this.ensureQueryIds();
+  }
+
+  ensureQueryIds() {
+    if (this.targets) {
+      for (const query of this.targets) {
+        if (!query.refId) {
+          query.refId = this.getNextQueryLetter();
+        }
+      }
+    }
   }
 
   getOptions(panelDefaults) {
@@ -243,7 +255,7 @@ export class PanelModel {
   addQuery(query?: Partial<DataQuery>) {
     query = query || { refId: 'A' };
     query.refId = this.getNextQueryLetter();
-    this.targets.push(query);
+    this.targets.push(query as DataQuery);
   }
 
   getNextQueryLetter(): string {

public/app/features/dashboard/specs/panel_model.test.ts

@@ -9,6 +9,10 @@ describe('PanelModel', () => {
       model = new PanelModel({
         type: 'table',
         showColumns: true,
+        targets: [
+          {refId: 'A'},
+          {noRefId: true}
+        ]
       });
     });
 
@@ -20,6 +24,10 @@ describe('PanelModel', () => {
       expect(model.showColumns).toBe(true);
     });
 
+    it('should add missing refIds', () => {
+      expect(model.targets[1].refId).toBe('B');
+    });
+
     it('getSaveModel should remove defaults', () => {
       const saveModel = model.getSaveModel();
       expect(saveModel.gridPos).toBe(undefined);