Feat/model backed ui (#1145)

This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers.
#1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation.

Features:
- Supports defining a FlexContainer that maps to a flexbox-based layout.
- Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it.
- Has a sample project which shows how to use the API and was used for verification

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

@@ -39,7 +39,7 @@ export class DashboardErrorContainer extends DashboardTab implements AfterViewIn
 
 	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);
+		errorMessage.innerHTML = nls.localize('dashboardNavSection_loadTabError', 'The "{0}" section has invalid content. Please contact extension owner.', this.tab.title);
 	}
 
 	public get id(): string {

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

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+*  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!./dashboardWebviewContainer';
+
+import { Component, forwardRef, Input, AfterContentInit, ViewChild } from '@angular/core';
+
+import Event, { Emitter } from 'vs/base/common/event';
+
+import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
+import { ModelViewContent } from 'sql/parts/modelComponents/modelViewContent.component';
+
+@Component({
+	selector: 'dashboard-modelview-container',
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardModelViewContainer) }],
+	template: `
+		<modelview-content [modelViewId]="tab.id">
+		</modelview-content>
+	`
+})
+export class DashboardModelViewContainer extends DashboardTab implements AfterContentInit {
+	@Input() private tab: TabConfig;
+
+	private _onResize = new Emitter<void>();
+	public readonly onResize: Event<void> = this._onResize.event;
+
+	@ViewChild(ModelViewContent) private _modelViewContent: ModelViewContent;
+	constructor() {
+		super();
+	}
+
+	ngAfterContentInit(): void {
+		this._register(this._modelViewContent.onResize(() => {
+			this._onResize.fire();
+		}));
+	}
+
+	public layout(): void {
+		this._modelViewContent.layout();
+	}
+
+	public get id(): string {
+		return this.tab.id;
+	}
+
+	public get editable(): boolean {
+		return this.tab.editable;
+	}
+
+	public refresh(): void {
+		// no op
+	}
+}

src/sql/parts/dashboard/containers/dashboardModelViewContainer.contribution.ts

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { IJSONSchema } from 'vs/base/common/jsonSchema';
+import * as nls from 'vs/nls';
+
+import { registerContainerType, registerNavSectionContainerType } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
+
+export const MODELVIEW_CONTAINER = 'modelview-container';
+
+let modelviewSchema: IJSONSchema = {
+	type: 'null',
+	description: nls.localize('dashboard.container.modelview', "The model-backed view that will be displayed in this tab."),
+	default: null
+};
+
+registerContainerType(MODELVIEW_CONTAINER, modelviewSchema);
+registerNavSectionContainerType(MODELVIEW_CONTAINER, modelviewSchema);

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

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+dashboard-modelview-container {
+	height: 100%;
+	width : 100%;
+	display: block;
+}

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

@@ -11,6 +11,8 @@
 		</dashboard-webview-container>
 		<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
 		</dashboard-widget-container>
+		<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
+		</dashboard-modelview-container>
 		<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
 		</dashboard-grid-container>
 		<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">