Handle error when loading the dashboard (#862)

* add error tab when the tab cannot be loaded

* formatting

* changing the look for error message per Smitha request

src/sql/parts/dashboard/containers/dashboardErrorContainer.component.ts

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./dashboardErrorContainer';
+
+import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+
+import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
+import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+
+import Event, { Emitter } from 'vs/base/common/event';
+import * as nls from 'vs/nls';
+
+@Component({
+	selector: 'dashboard-error-container',
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardErrorContainer) }],
+	template: `
+		<div class="error-container">
+			<div class="icon globalError">
+			</div>
+			<div class="error-message" #errorMessage>
+			</div>
+		</div>
+	`
+})
+export class DashboardErrorContainer extends DashboardTab implements AfterViewInit {
+	@Input() private tab: TabConfig;
+	private _onResize = new Emitter<void>();
+	public readonly onResize: Event<void> = this._onResize.event;
+
+	@ViewChild('errorMessage', { read: ElementRef }) private _errorMessageContainer: ElementRef;
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) protected _cd: ChangeDetectorRef
+	) {
+		super();
+	}
+
+	ngAfterViewInit() {
+		let errorMessage = this._errorMessageContainer.nativeElement as HTMLElement;
+		errorMessage.innerHTML = nls.localize('dashboardNavSection_loadTabError', 'The {0} has an invalid content. Please contact extension owner.', this.tab.title);
+	}
+
+	public get id(): string {
+		return this.tab.id;
+	}
+
+	public get editable(): boolean {
+		return false;
+	}
+
+	public layout() {
+	}
+
+	public refresh(): void {
+	}
+}

src/sql/parts/dashboard/containers/dashboardErrorContainer.css

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+dashboard-error-container {
+	height: 100%;
+	width: 100%;
+}
+
+dashboard-error-container .error-container {
+	padding: 6px;
+	background: #D02E00;
+	color: white;
+}
+
+dashboard-error-container .error-container .icon.globalError {
+	height: 16px;
+	width: 16px;
+	float: left;
+	padding-right: 15px;
+}
+

src/sql/parts/dashboard/containers/dashboardNavSection.component.html

@@ -12,5 +12,7 @@
 		</dashboard-widget-container>
 		<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
 		</dashboard-grid-container>
+		<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
+		</dashboard-error-container>
 	</tab>
 </panel>

src/sql/parts/dashboard/containers/dashboardNavSection.component.ts

@@ -12,14 +12,12 @@ import { WidgetConfig, TabConfig, NavSectionConfig } from 'sql/parts/dashboard/c
 import { PanelComponent, IPanelOptions, NavigationBarLayout } from 'sql/base/browser/ui/panel/panel.component';
 import { TabComponent } from 'sql/base/browser/ui/panel/tab.component';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
-import { error } from 'sql/base/common/log';
 import { WIDGETS_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
 import { GRID_CONTAINER } from 'sql/parts/dashboard/containers/dashboardGridContainer.contribution';
 import * as dashboardHelper from 'sql/parts/dashboard/common/dashboardHelper';
 
 import { Registry } from 'vs/platform/registry/common/platform';
 import Event, { Emitter } from 'vs/base/common/event';
-import Severity from 'vs/base/common/severity';
 import * as nls from 'vs/nls';
 
 @Component({
@@ -90,9 +88,7 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 
 				let containerResult = dashboardHelper.getDashboardContainer(v.container);
 				if (!containerResult.result) {
-					let errorTitle = nls.localize('dashboardNavSection_loadTabError', 'There is an error while loading {0} section. ', v.title);
-					this.dashboardService.messageService.show(Severity.Error, errorTitle + containerResult.message);
-					return null;
+					return { id: v.id, title: v.title, container: { 'error-container': undefined } };
 				}
 
 				let key = Object.keys(containerResult.container)[0];
@@ -113,23 +109,18 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 				}
 				return { id: v.id, title: v.title, container: containerResult.container };
 			}).map(v => {
-				if (v) {
-					let config = v as TabConfig;
-					config.context = this.tab.context;
-					config.editable = false;
-					config.canClose = false;
-					this.addNewTab(config);
-					return config;
-				}
-				return null;
+				let config = v as TabConfig;
+				config.context = this.tab.context;
+				config.editable = false;
+				config.canClose = false;
+				this.addNewTab(config);
+				return config;
 			});
 
-			if (selectedTabs && selectedTabs[0]) {
-				// put this immediately on the stack so that is ran *after* the tab is rendered
-				setTimeout(() => {
-					this._panel.selectTab(selectedTabs[0].id);
-				});
-			}
+			// put this immediately on the stack so that is ran *after* the tab is rendered
+			setTimeout(() => {
+				this._panel.selectTab(selectedTabs[0].id);
+			});
 		}
 	}