fixes for metrics tab when data source was not found

public/app/features/panel/metrics_tab.ts

@@ -9,7 +9,7 @@ export class MetricsTabCtrl {
   panel: any;
   panelCtrl: any;
   datasources: any[];
-  current: any;
+  datasourceInstance: any;
   nextRefId: string;
   dashboard: DashboardModel;
   panelDsValue: any;
@@ -29,23 +29,26 @@ export class MetricsTabCtrl {
     this.panel = this.panelCtrl.panel;
     this.dashboard = this.panelCtrl.dashboard;
     this.datasources = datasourceSrv.getMetricSources();
-    this.panelDsValue = this.panelCtrl.panel.datasource || null;
+    this.panelDsValue = this.panelCtrl.panel.datasource;
 
     for (let ds of this.datasources) {
       if (ds.value === this.panelDsValue) {
-        this.current = ds;
+        this.datasourceInstance = ds;
       }
     }
 
     this.addQueryDropdown = {text: 'Add Query', value: null, fake: true};
+
     // update next ref id
     this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
     this.updateDatasourceOptions();
   }
 
   updateDatasourceOptions() {
-    this.hasQueryHelp = this.current.meta.hasQueryHelp;
-    this.queryOptions = this.current.meta.queryOptions;
+    if (this.datasourceInstance) {
+      this.hasQueryHelp = this.datasourceInstance.meta.hasQueryHelp;
+      this.queryOptions = this.datasourceInstance.meta.queryOptions;
+    }
   }
 
   getOptions(includeBuiltin) {
@@ -61,7 +64,7 @@ export class MetricsTabCtrl {
       return;
     }
 
-    this.current = option.datasource;
+    this.datasourceInstance = option.datasource;
     this.panelCtrl.setDatasource(option.datasource);
     this.updateDatasourceOptions();
   }
@@ -85,7 +88,7 @@ export class MetricsTabCtrl {
     this.queryTroubleshooterOpen = false;
     this.helpOpen = !this.helpOpen;
 
-    this.backendSrv.get(`/api/plugins/${this.current.meta.id}/markdown/query_help`).then(res => {
+    this.backendSrv.get(`/api/plugins/${this.datasourceInstance.meta.id}/markdown/query_help`).then(res => {
       var md = new Remarkable();
       this.helpHtml = this.$sce.trustAsHtml(md.render(res));
     });

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

@@ -73,7 +73,7 @@
 	</div>
 </div>
 
-<div class="query-editor-rows gf-form-group">
+<div class="query-editor-rows gf-form-group" ng-if="ctrl.datasourceInstance">
 	<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
 		<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
 			<plugin-component type="query-ctrl">
@@ -89,11 +89,11 @@
 				</span>
 				<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
 			</label>
-			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.current.meta.mixed">
+			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed">
 				Add Query
 			</button>
 
-			<div class="dropdown" ng-if="ctrl.current.meta.mixed">
+			<div class="dropdown" ng-if="ctrl.datasourceInstance.meta.mixed">
 				<gf-form-dropdown model="ctrl.addQueryDropdown" get-options="ctrl.getOptions(false)" on-change="ctrl.addMixedQuery($option)">
 				</gf-form-dropdown>
 			</div>

public/sass/components/_alerts.scss

@@ -44,8 +44,8 @@
   min-width: 400px;
   max-width: 600px;
   position: fixed;
-  right: 20px;
-  top: 56px;
+  right: 10px;
+  top: 60px;
 }
 
 .alert-close {