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/modelComponents/card.component.ts

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./flexContainer';
+
+import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
+} from '@angular/core';
+
+import * as sqlops from 'sqlops';
+
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+
+@Component({
+	template: `
+		<div *ngIf="label" class="cardComponent" style="position: absolute; height: 100%; width: 100%; margin: 10px 0px 10px 0px;">
+			<span style="margin-left: 10px; display: inline-block;">
+				<div style="font-size: 11px; font-weight: lighter">{{label}}</div>
+				<div>{{value}}</div>
+			</span>
+		</div>
+	`
+})
+export default class CardComponent extends ComponentBase implements IComponent, OnDestroy {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	/// IComponent implementation
+
+	public layout(): void {
+		this._changeRef.detectChanges();
+	}
+
+	public setLayout (layout: any): void {
+		// TODO allow configuring the look and feel
+		this.layout();
+	}
+
+	// CSS-bound properties
+
+	public get label(): string {
+		return this.getPropertyOrDefault<sqlops.CardProperties, string>((props) => props.label, '');
+	}
+
+	public get value(): string {
+		return this.getPropertyOrDefault<sqlops.CardProperties, string>((props) => props.value, '');
+	}
+
+	public get actions(): sqlops.ActionDescriptor[] {
+		return this.getPropertyOrDefault<sqlops.CardProperties, sqlops.ActionDescriptor[]>((props) => props.actions, []);
+	}
+
+}

src/sql/parts/modelComponents/componentBase.ts

@@ -0,0 +1,95 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./flexContainer';
+
+import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ElementRef, Injector, OnDestroy, OnInit
+} from '@angular/core';
+
+import * as types from 'vs/base/common/types';
+
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { FlexLayout, FlexItemLayout } from 'sqlops';
+import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive';
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+
+export class ItemDescriptor<T> {
+	constructor(public descriptor: IComponentDescriptor, public config: T) {}
+}
+
+export abstract class ComponentBase implements IComponent, OnDestroy, OnInit {
+	protected properties: { [key: string]: any; } = {};
+	constructor(
+		protected _changeRef: ChangeDetectorRef) {
+	}
+
+	/// IComponent implementation
+
+	abstract descriptor: IComponentDescriptor;
+	abstract modelStore: IModelStore;
+
+	public layout(): void {
+		this._changeRef.detectChanges();
+	}
+
+	protected baseInit(): void {
+		if (this.modelStore) {
+			this.modelStore.registerComponent(this);
+		}
+	}
+
+	abstract ngOnInit(): void;
+
+	protected baseDestroy(): void {
+		if (this.modelStore) {
+			this.modelStore.unregisterComponent(this);
+		}
+	}
+
+	abstract ngOnDestroy(): void;
+
+	abstract setLayout (layout: any): void;
+
+	public setProperties(properties: { [key: string]: any; }): void {
+		if (!properties) {
+			this.properties = {};
+		}
+		this.properties = properties;
+		this.layout();
+	}
+
+	protected getProperties<TPropertyBag>(): TPropertyBag {
+		return this.properties as TPropertyBag;
+	}
+
+	protected getPropertyOrDefault<TPropertyBag, TValue>(propertyGetter: (TPropertyBag) => TValue, defaultVal: TValue) {
+		let property = propertyGetter(this.getProperties<TPropertyBag>());
+		return types.isUndefinedOrNull(property) ? defaultVal : property;
+	}
+}
+
+export abstract class ContainerBase<T> extends ComponentBase {
+	protected items: ItemDescriptor<T>[];
+
+	constructor(
+		_changeRef: ChangeDetectorRef
+	) {
+		super(_changeRef);
+		this.items = [];
+	}
+
+	/// IComponent container-related implementation
+	public addToContainer(componentDescriptor: IComponentDescriptor, config: any): void {
+		this.items.push(new ItemDescriptor(componentDescriptor, config));
+		this._changeRef.detectChanges();
+	}
+
+	public clearContainer(): void {
+		this.items = [];
+		this._changeRef.detectChanges();
+	}
+
+	abstract setLayout (layout: any): void;
+}

src/sql/parts/modelComponents/components.contribution.ts

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import FlexContainer from './flexContainer.component';
+import CardComponent from './card.component';
+import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
+import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
+
+export const FLEX_CONTAINER = 'flex-container';
+registerComponentType(FLEX_CONTAINER, ModelComponentTypes.FlexContainer, FlexContainer);
+
+export const CARD_COMPONENT = 'card-component';
+registerComponentType(CARD_COMPONENT, ModelComponentTypes.Card, CardComponent);

src/sql/parts/modelComponents/flexContainer.component.ts

@@ -0,0 +1,86 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./flexContainer';
+
+import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
+} from '@angular/core';
+
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { FlexLayout, FlexItemLayout } from 'sqlops';
+
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
+import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
+
+class FlexItem {
+	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {}
+}
+
+@Component({
+	template: `
+		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent">
+			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.order]="getItemOrder(item)" >
+				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+				</model-component-wrapper>
+			</div>
+		</div>
+	`
+})
+export default class FlexContainer extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _flexFlow: string;
+	private _justifyContent: string;
+
+	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
+
+	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+		this._flexFlow = '';	// default
+		this._justifyContent = '';	// default
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+
+	/// IComponent implementation
+
+	public layout(): void {
+		if (this._componentWrappers) {
+			this._componentWrappers.forEach(wrapper => {
+				wrapper.layout();
+			});
+		}
+	}
+
+	public setLayout (layout: FlexLayout): void {
+		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
+		this._justifyContent= layout.justifyContent ? layout.justifyContent : '';
+		this.layout();
+	}
+
+	// CSS-bound properties
+	public get flexFlow(): string {
+		return this._flexFlow;
+	}
+
+	public get justifyContent(): string {
+		return this._justifyContent;
+	}
+
+	private getItemFlex(item: FlexItem): string {
+		return item.config ? item.config.flex : '';
+	}
+	private getItemOrder(item: FlexItem): number {
+		return item.config ? item.config.order : 0;
+	}
+}

src/sql/parts/modelComponents/flexContainer.css

@@ -0,0 +1,4 @@
+
+.flexContainer {
+	display: flex
+}

src/sql/parts/modelComponents/interfaces.ts

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { InjectionToken } from '@angular/core';
+
+import * as sqlops from 'sqlops';
+
+/**
+ * An instance of a model-backed component. This will be a UI element
+ *
+ * @export
+ * @interface IComponent
+ */
+export interface IComponent {
+	descriptor: IComponentDescriptor;
+	modelStore: IModelStore;
+	layout();
+	clearContainer?: () => void;
+	addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
+	setLayout?: (layout: any) => void;
+	setProperties?: (properties: { [key: string]: any; }) => void;
+}
+
+export const COMPONENT_CONFIG = new InjectionToken<IComponentConfig>('component_config');
+
+export interface IComponentConfig {
+	descriptor: IComponentDescriptor;
+	modelStore: IModelStore;
+}
+
+/**
+ * Defines a component and can be used to map from the model-backed version of the
+ * world to the frontend UI;
+ *
+ * @export
+ * @interface IComponentDescriptor
+ */
+export interface IComponentDescriptor {
+	/**
+	 * The type of this component. Used to map to the correct angular selector
+	 * when loading the component
+	 */
+	type: string;
+	/**
+	 * A unique ID for this component
+	 */
+	id: string;
+}
+
+export interface IModelStore {
+	/**
+	 * Creates and saves the reference of a component descriptor.
+	 * This can be used during creation of a component later
+	 */
+	createComponentDescriptor(type: string, createComponentDescriptor): IComponentDescriptor;
+	/**
+	 * gets the descriptor for a previously created component ID
+	 */
+	getComponentDescriptor(componentId: string): IComponentDescriptor;
+	registerComponent(component: IComponent): void;
+	unregisterComponent(component: IComponent): void;
+	getComponent(componentId: string): IComponent;
+	/**
+	 * Runs on a component immediately if the component exists, or runs on
+	 * registration of the component otherwise
+	 *
+	 * @param {string} componentId unique identifier of the component
+	 * @param {(component: IComponent) => void} action some action to perform
+	 * @memberof IModelStore
+	 */
+	eventuallyRunOnComponent<T>(componentId: string, action: (component: IComponent) => T): Promise<T>;
+}

src/sql/parts/modelComponents/modelComponentWrapper.component.ts

@@ -0,0 +1,150 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!sql/media/icons/common-icons';
+
+import {
+	Component, Input, Inject, forwardRef, ComponentFactoryResolver, AfterContentInit, ViewChild,
+	ElementRef, OnInit, ChangeDetectorRef, OnDestroy, ReflectiveInjector, Injector, Type, ComponentRef
+} from '@angular/core';
+
+import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive';
+import { error } from 'sql/base/common/log';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { IComponent, IComponentConfig, IComponentDescriptor, IModelStore, COMPONENT_CONFIG } from './interfaces';
+import { Extensions, IComponentRegistry } from 'sql/platform/dashboard/common/modelComponentRegistry';
+
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import * as colors from 'vs/platform/theme/common/colorRegistry';
+import * as themeColors from 'vs/workbench/common/theme';
+import { Action } from 'vs/base/common/actions';
+import { Registry } from 'vs/platform/registry/common/platform';
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
+import { memoize } from 'vs/base/common/decorators';
+import { generateUuid } from 'vs/base/common/uuid';
+import * as nls from 'vs/nls';
+
+const componentRegistry = <IComponentRegistry> Registry.as(Extensions.ComponentContribution);
+
+@Component({
+	selector: 'model-component-wrapper',
+	template: `
+		<ng-template component-host>
+		</ng-template>
+	`
+})
+export class ModelComponentWrapper extends AngularDisposable implements OnInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	@memoize
+	public get guid(): string {
+		return generateUuid();
+	}
+
+	private _componentInstance: IComponent;
+
+	@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
+
+	constructor(
+		@Inject(forwardRef(() => ComponentFactoryResolver)) private _componentFactoryResolver: ComponentFactoryResolver,
+		@Inject(forwardRef(() => ElementRef)) private _ref: ElementRef,
+		@Inject(forwardRef(() => DashboardServiceInterface)) private _bootstrap: DashboardServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeref: ChangeDetectorRef,
+		@Inject(forwardRef(() => Injector)) private _injector: Injector
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		let self = this;
+		this._register(self._bootstrap.themeService.onDidColorThemeChange((event: IColorTheme) => {
+			self.updateTheme(event);
+		}));
+	}
+
+	ngAfterViewInit() {
+		this.updateTheme(this._bootstrap.themeService.getColorTheme());
+		if (this.componentHost) {
+			this.loadComponent();
+		}
+		this._changeref.detectChanges();
+		this.layout();
+	}
+
+	public layout(): void {
+		if (this._componentInstance && this._componentInstance.layout) {
+			this._componentInstance.layout();
+		}
+	}
+
+	public get id(): string {
+		return this._componentInstance.descriptor.id;
+	}
+
+	private get componentConfig(): IComponentConfig {
+		return {
+			descriptor: this.descriptor,
+			modelStore: this.modelStore
+		};
+	}
+
+
+	private loadComponent(): void {
+		if (!this.descriptor || !this.descriptor.type) {
+			error('No descriptor or type defined for this component');
+			return;
+		}
+
+		let selector = componentRegistry.getCtorFromId(this.descriptor.type);
+
+		if (selector === undefined) {
+			error('No selector defined for type {0}', this.descriptor.type);
+			return;
+		}
+
+		let componentFactory = this._componentFactoryResolver.resolveComponentFactory(selector);
+
+		let viewContainerRef = this.componentHost.viewContainerRef;
+		viewContainerRef.clear();
+
+		let injector = ReflectiveInjector.resolveAndCreate([{ provide: COMPONENT_CONFIG, useValue: this.componentConfig }], this._injector);
+		let componentRef: ComponentRef<IComponent>;
+		try {
+			componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
+			this._componentInstance = componentRef.instance;
+			this._componentInstance.descriptor = this.descriptor;
+			this._componentInstance.modelStore = this.modelStore;
+			this._changeref.detectChanges();
+		} catch (e) {
+			error('Error rendering component: {0}', e);
+			return;
+		}
+		let el = <HTMLElement>componentRef.location.nativeElement;
+
+		// set widget styles to conform to its box
+		el.style.overflow = 'hidden';
+		el.style.position = 'relative';
+	}
+
+	private updateTheme(theme: IColorTheme): void {
+		// TODO handle theming appropriately
+		let el = <HTMLElement>this._ref.nativeElement;
+		let borderColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true);
+		let backgroundColor = theme.getColor(colors.editorBackground, true);
+		let foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
+		let border = theme.getColor(colors.contrastBorder, true);
+
+		if (backgroundColor) {
+			el.style.backgroundColor = backgroundColor.toString();
+		}
+
+		if (foregroundColor) {
+			el.style.color = foregroundColor.toString();
+		}
+
+	}
+}

src/sql/parts/modelComponents/modelStore.ts

@@ -0,0 +1,89 @@
+
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { Registry } from 'vs/platform/registry/common/platform';
+
+import * as sqlops from 'sqlops';
+import { IModelStore, IComponentDescriptor, IComponent } from './interfaces';
+import { Extensions, IComponentRegistry } from 'sql/platform/dashboard/common/modelComponentRegistry';
+import { Deferred } from 'sql/base/common/promise';
+
+const componentRegistry = <IComponentRegistry> Registry.as(Extensions.ComponentContribution);
+
+
+class ComponentDescriptor implements IComponentDescriptor {
+	constructor(public readonly id: string, public readonly type: string) {
+
+	}
+}
+
+export class ModelStore implements IModelStore {
+	private static baseId = 0;
+
+	private _descriptorMappings: { [x: string]: IComponentDescriptor } = {};
+	private _componentMappings: { [x: string]: IComponent } = {};
+	private _componentActions: { [x: string]: Deferred<IComponent> } = {};
+	constructor() {
+	}
+
+	public createComponentDescriptor(type: string, id: string): IComponentDescriptor {
+		let descriptor = new ComponentDescriptor(id, type);
+		this._descriptorMappings[id] = descriptor;
+		return descriptor;
+	}
+
+	getComponentDescriptor(id: string): IComponentDescriptor {
+		return this._descriptorMappings[id];
+	}
+
+	registerComponent(component: IComponent): void {
+		let id = component.descriptor.id;
+		this._componentMappings[id] = component;
+		this.runPendingActions(id, component);
+	}
+
+	unregisterComponent(component: IComponent): void {
+		let id = component.descriptor.id;
+		this._componentMappings[id] = undefined;
+		this._componentActions[id] = undefined;
+		// TODO notify model for cleanup
+	}
+
+	getComponent(componentId: string): IComponent {
+		return this._componentMappings[componentId];
+	}
+
+	eventuallyRunOnComponent<T>(componentId: string, action: (component: IComponent) => T): Promise<T> {
+		let component = this.getComponent(componentId);
+		if (component) {
+			return Promise.resolve(action(component));
+		} else {
+			return this.addPendingAction(componentId, action);
+		}
+	}
+
+	private addPendingAction<T>(componentId: string, action: (component: IComponent) => T): Promise<T> {
+		// We create a promise and chain it onto a tracking promise whose resolve method
+		// will only be called once the component is created
+		let deferredPromise = this._componentActions[componentId];
+		if (!deferredPromise) {
+			deferredPromise = new Deferred();
+			this._componentActions[componentId] = deferredPromise;
+		}
+		let promise = deferredPromise.promise.then((component) => {
+			return action(component);
+		});
+		return promise;
+	}
+
+	private runPendingActions(componentId: string, component: IComponent) {
+		let promiseTracker = this._componentActions[componentId];
+		if (promiseTracker) {
+			promiseTracker.resolve(component);
+		}
+	}
+}

src/sql/parts/modelComponents/modelViewContent.component.ts

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+*  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!./modelViewContent';
+
+import { Component, forwardRef, Input, OnInit, Inject, ChangeDetectorRef, ElementRef } from '@angular/core';
+
+import Event, { Emitter } from 'vs/base/common/event';
+import { Parts } from 'vs/workbench/services/part/common/partService';
+import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
+import { addDisposableListener, EventType } from 'vs/base/browser/dom';
+import { memoize } from 'vs/base/common/decorators';
+import nls = require('vs/nls');
+
+import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { IModelView } from 'sql/services/model/modelViewService';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+
+import * as sqlops from 'sqlops';
+import { ViewBase } from 'sql/parts/modelComponents/viewBase';
+
+@Component({
+	selector: 'modelview-content',
+	template: `
+		<div *ngIf="rootDescriptor">
+			<model-component-wrapper [descriptor]="rootDescriptor" [modelStore]="modelStore">
+			</model-component-wrapper>
+		</div>
+	`
+})
+export class ModelViewContent extends ViewBase implements OnInit, IModelView {
+	@Input() private modelViewId: string;
+
+	private _onResize = new Emitter<void>();
+	public readonly onResize: Event<void> = this._onResize.event;
+	private _onMessage = new Emitter<string>();
+	public readonly onMessage: Event<string> = this._onMessage.event;
+
+	private _onMessageDisposable: IDisposable;
+
+	constructor(
+		@Inject(forwardRef(() => DashboardServiceInterface)) private _dashboardService: DashboardServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef
+	) {
+		super(changeRef);
+	}
+
+	ngOnInit() {
+		this._dashboardService.dashboardViewService.registerModelView(this);
+		this._register(addDisposableListener(window, EventType.RESIZE, e => {
+			this.layout();
+		}));
+	}
+
+	public layout(): void {
+	}
+
+	public get id(): string {
+		return this.modelViewId;
+	}
+
+	@memoize
+	public get connection(): sqlops.connection.Connection {
+		let currentConnection = this._dashboardService.connectionManagementService.connectionInfo.connectionProfile;
+		let connection: sqlops.connection.Connection = {
+			providerName: currentConnection.providerName,
+			connectionId: currentConnection.id,
+			options: currentConnection.options
+		};
+		return connection;
+	}
+
+	@memoize
+	public get serverInfo(): sqlops.ServerInfo {
+		return this._dashboardService.connectionManagementService.connectionInfo.serverInfo;
+	}
+}

src/sql/parts/modelComponents/modelViewContent.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.
+ *--------------------------------------------------------------------------------------------*/
+
+modelview-content {
+	height: 100%;
+	width : 100%;
+	display: block;
+}

src/sql/parts/modelComponents/viewBase.ts

@@ -0,0 +1,94 @@
+
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+import { ChangeDetectorRef } from '@angular/core';
+
+import { Registry } from 'vs/platform/registry/common/platform';
+import nls = require('vs/nls');
+
+import * as sqlops from 'sqlops';
+import { IModelStore, IComponentDescriptor, IComponent } from './interfaces';
+import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
+import { IModelView } from 'sql/services/model/modelViewService';
+import { Extensions, IComponentRegistry } from 'sql/platform/dashboard/common/modelComponentRegistry';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { ModelStore } from 'sql/parts/modelComponents/modelStore';
+
+const componentRegistry = <IComponentRegistry> Registry.as(Extensions.ComponentContribution);
+
+/**
+ * Provides common logic required for any implementation that hooks to a model provided by
+ * the extension host
+ */
+export abstract class ViewBase extends AngularDisposable implements IModelView {
+	protected readonly modelStore: IModelStore;
+	protected rootDescriptor: IComponentDescriptor;
+	constructor(protected changeRef: ChangeDetectorRef) {
+		super();
+		this.modelStore = new ModelStore();
+	}
+
+	// Properties needed by the model view code
+	abstract id: string;
+	abstract connection: sqlops.connection.Connection;
+	abstract serverInfo: sqlops.ServerInfo;
+
+	initializeModel(rootComponent: IComponentShape): void {
+		let descriptor = this.defineComponent(rootComponent);
+		this.rootDescriptor = descriptor;
+		// Kick off the build by detecting changes to the model
+		this.changeRef.detectChanges();
+	}
+
+	private defineComponent(component: IComponentShape): IComponentDescriptor {
+		let typeId = componentRegistry.getIdForTypeMapping(component.type);
+		if (!typeId) {
+			// failure case
+			throw new Error(nls.localize('componentTypeNotRegistered', "Could not find component for type {0}", ModelComponentTypes[component.type]));
+		}
+		let descriptor = this.modelStore.createComponentDescriptor(typeId, component.id);
+		this.setProperties(component.id, component.properties);
+		this.setLayout(component.id, component.layout);
+		if (component.itemConfigs) {
+			for(let item of component.itemConfigs) {
+				this.addToContainer(component.id, item);
+			}
+		}
+		return descriptor;
+	}
+
+	clearContainer(componentId: string): void {
+		this.queueAction(componentId, (component)  => component.clearContainer());
+	}
+
+	addToContainer(containerId: string, itemConfig: IItemConfig): void {
+		// Do not return the promise as this should be non-blocking
+		this.queueAction(containerId, (component)  => {
+			let childDescriptor = this.defineComponent(itemConfig.componentShape);
+			component.addToContainer(childDescriptor, itemConfig.config);
+		});
+	}
+
+	setLayout(componentId: string, layout: any): void {
+		if (!layout) {
+			return;
+		}
+		this.queueAction(componentId, (component)  => component.setLayout(layout));
+	}
+
+	setProperties(componentId: string, properties: { [key: string]: any; }): void {
+		if (!properties) {
+			return;
+		}
+		this.queueAction(componentId, (component)  => component.setProperties(properties));
+	}
+
+	private queueAction<T>(componentId: string, action: (component: IComponent) => T): void {
+		this.modelStore.eventuallyRunOnComponent(componentId, action).catch(err => {
+			// TODO add error handling
+		});
+	}
+}