move code from parts to contrib (#8319)

src/sql/workbench/contrib/dashboard/browser/contents/controlHostContent.component.html

@@ -0,0 +1,8 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+
+<agentview-component #agent *ngIf="(controlType) === 'agent'"></agentview-component>

src/sql/workbench/contrib/dashboard/browser/contents/controlHostContent.component.ts

@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./controlHostContent';
+
+import { Component, forwardRef, Input, Inject, ChangeDetectorRef, ViewChild } from '@angular/core';
+
+import { Event, Emitter } from 'vs/base/common/event';
+import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
+
+import * as azdata from 'azdata';
+import { memoize } from 'vs/base/common/decorators';
+import { AgentViewComponent } from '../../../jobManagement/browser/agentView.component';
+
+@Component({
+	templateUrl: decodeURI(require.toUrl('./controlHostContent.component.html')),
+	selector: 'controlhost-content'
+})
+export class ControlHostContent {
+	@Input() private webviewId: 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 _type: string;
+
+	/* Children components */
+	@ViewChild('agent') private _agentViewComponent: AgentViewComponent;
+
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
+	) {
+	}
+
+	public layout(): void {
+		this._agentViewComponent.layout();
+	}
+
+	public get id(): string {
+		return this.webviewId;
+	}
+
+	@memoize
+	public get connection(): azdata.connection.Connection {
+		const currentConnection = this._dashboardService.connectionManagementService.connectionInfo.connectionProfile;
+		const connection: azdata.connection.Connection = {
+			providerName: currentConnection.providerName,
+			connectionId: currentConnection.id,
+			options: currentConnection.options
+		};
+		return connection;
+	}
+
+	@memoize
+	public get serverInfo(): azdata.ServerInfo {
+		return this._dashboardService.connectionManagementService.connectionInfo.serverInfo;
+	}
+
+	public setControlType(type: string): void {
+		this._type = type;
+		this._changeRef.detectChanges();
+	}
+
+	public get controlType(): string {
+		return this._type;
+	}
+
+	public refresh() {
+		this._agentViewComponent.refresh = true;
+	}
+}

src/sql/workbench/contrib/dashboard/browser/contents/controlHostContent.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.
+ *--------------------------------------------------------------------------------------------*/
+
+controlhost-content {
+	height: 100%;
+	width : 100%;
+	display: block;
+}

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html

@@ -0,0 +1,20 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="display: flex; flex-flow: column; overflow: hidden; height: 100%; width: 100%">
+
+	<div #header>
+		<div style="display: flex; flex: 0 0; padding: 3px 0 3px 0; flex-direction: row-reverse; justify-content: space-between">
+			<span #actionbar style="flex: 0 0 auto; align-self: end"></span>
+			<span *ngIf="_config.name" style="margin-left: 5px">{{_config.name}}</span>
+			<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]" style="display: inline-block; padding: 10px; margin-left: 5px"></span>
+		</div>
+	</div>
+	<ng-template [ngIf]="!collapsed">
+		<ng-template component-host>
+		</ng-template>
+	</ng-template>
+</div>

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts

@@ -0,0 +1,273 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 'vs/css!./dashboardWidgetWrapper';
+
+import {
+	Component, Input, Inject, forwardRef, ComponentFactoryResolver, ViewChild,
+	ElementRef, OnInit, ChangeDetectorRef, ReflectiveInjector, Injector, Type, ComponentRef
+} from '@angular/core';
+
+import { ComponentHostDirective } from 'sql/workbench/contrib/dashboard/browser/core/componentHost.directive';
+import { WidgetConfig, WIDGET_CONFIG, IDashboardWidget } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
+import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/browser/insightRegistry';
+import { RefreshWidgetAction, ToggleMoreWidgetAction, DeleteWidgetAction, CollapseWidgetAction } from 'sql/workbench/contrib/dashboard/browser/core/actions';
+import { AngularDisposable } from 'sql/base/browser/lifecycle';
+
+/* Widgets */
+import { PropertiesWidgetComponent } from 'sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component';
+import { ExplorerWidget } from 'sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerWidget.component';
+import { TasksWidget } from 'sql/workbench/contrib/dashboard/browser/widgets/tasks/tasksWidget.component';
+import { InsightsWidget } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component';
+import { WebviewWidget } from 'sql/workbench/contrib/dashboard/browser/widgets/webview/webviewWidget.component';
+
+import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
+
+import { IColorTheme, IWorkbenchThemeService } 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 { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { ILogService } from 'vs/platform/log/common/log';
+import { values } from 'vs/base/common/collections';
+
+const componentMap: { [x: string]: Type<IDashboardWidget> } = {
+	'properties-widget': PropertiesWidgetComponent,
+	'explorer-widget': ExplorerWidget,
+	'tasks-widget': TasksWidget,
+	'insights-widget': InsightsWidget,
+	'webview-widget': WebviewWidget
+};
+
+@Component({
+	selector: 'dashboard-widget-wrapper',
+	templateUrl: decodeURI(require.toUrl('./dashboardWidgetWrapper.component.html'))
+})
+export class DashboardWidgetWrapper extends AngularDisposable implements OnInit {
+	@Input() private _config: WidgetConfig;
+	@Input() private collapsable = false;
+
+	private _collapseAction: CollapseWidgetAction;
+	private _collapsed = false;
+
+	public get collapsed(): boolean {
+		return this._collapsed;
+	}
+
+	public set collapsed(val: boolean) {
+		if (val === this._collapsed) {
+			return;
+		}
+		this._collapsed = val;
+		this._collapseAction.state = val;
+		this._changeref.detectChanges();
+		if (!val) {
+			this.loadWidget();
+		}
+	}
+
+	@memoize
+	public get guid(): string {
+		return generateUuid();
+	}
+
+	private _actions: Array<Action>;
+	private _component: IDashboardWidget;
+	private _actionbar: ActionBar;
+
+	@ViewChild('header', { read: ElementRef }) private header: ElementRef;
+	@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
+	@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
+
+	constructor(
+		@Inject(forwardRef(() => ComponentFactoryResolver)) private _componentFactoryResolver: ComponentFactoryResolver,
+		@Inject(forwardRef(() => ElementRef)) private _ref: ElementRef,
+		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrap: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeref: ChangeDetectorRef,
+		@Inject(forwardRef(() => Injector)) private _injector: Injector,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
+		@Inject(ILogService) private logService: ILogService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this._register(this.themeService.onDidColorThemeChange((event: IColorTheme) => {
+			this.updateTheme(event);
+		}));
+	}
+
+	ngAfterViewInit() {
+		this.updateTheme(this.themeService.getColorTheme());
+		if (this.componentHost) {
+			this.loadWidget();
+		}
+		this._changeref.detectChanges();
+		this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
+		if (this._actions) {
+			if (this.collapsable) {
+				this._collapseAction = this.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed);
+				this._actionbar.push(this._collapseAction, { icon: true, label: false });
+			}
+			this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions, this._component.actionsContext), { icon: true, label: false });
+		}
+		this.layout();
+	}
+
+	public refresh(): void {
+		if (!this.collapsed && this._component && this._component.refresh) {
+			this._component.refresh();
+		}
+	}
+
+	public layout(): void {
+		if (!this.collapsed && this._component && this._component.layout) {
+			this._component.layout();
+		}
+	}
+
+	public get id(): string {
+		return this._config.id;
+	}
+
+	public enableEdit(): void {
+		this._actionbar.push(this.instantiationService.createInstance(DeleteWidgetAction, this._config.id, this._bootstrap.getUnderlyingUri()), { icon: true, label: false });
+	}
+
+	public disableEdit(): void {
+		this._actionbar.pull(this._actionbar.length() - 1);
+	}
+
+	private loadWidget(): void {
+		if (Object.keys(this._config.widget).length !== 1) {
+			this.logService.error('Exactly 1 widget must be defined per space');
+			return;
+		}
+		const key = Object.keys(this._config.widget)[0];
+		const selector = this.getOrCreateSelector(key);
+		if (selector === undefined) {
+			this.logService.error('Could not find selector', key);
+			return;
+		}
+
+		// If _config.name is not set, set it to _config.widget.name
+		if (!this._config.name) {
+			const widget = values(this._config.widget)[0];
+			if (widget.name) {
+				this._config.name = widget.name;
+			}
+		}
+
+		const componentFactory = this._componentFactoryResolver.resolveComponentFactory(selector);
+
+		const viewContainerRef = this.componentHost.viewContainerRef;
+		viewContainerRef.clear();
+
+		const injector = ReflectiveInjector.resolveAndCreate([{ provide: WIDGET_CONFIG, useValue: this._config }], this._injector);
+		let componentRef: ComponentRef<IDashboardWidget>;
+		try {
+			componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
+			this._component = componentRef.instance;
+			const actions = componentRef.instance.actions;
+			if (componentRef.instance.refresh) {
+				actions.push(new RefreshWidgetAction(this.refresh, this));
+			}
+			if (actions !== undefined && actions.length > 0) {
+				this._actions = actions;
+				this._changeref.detectChanges();
+			}
+		} catch (e) {
+			this.logService.error('Error rendering widget', key, e);
+			return;
+		}
+		const el = <HTMLElement>componentRef.location.nativeElement;
+
+		// set widget styles to conform to its box
+		el.style.overflow = 'hidden';
+		el.style.flex = '1 1 auto';
+		el.style.position = 'relative';
+	}
+
+	/**
+	 * Attempts to get the selector for a given key, and if none is defined tries
+	 * to load it from the widget registry and configure as needed
+	 */
+	private getOrCreateSelector(key: string): Type<IDashboardWidget> {
+		let selector = componentMap[key];
+		if (selector === undefined) {
+			// Load the widget from the registry
+			const widgetRegistry = <IInsightRegistry>Registry.as(Extensions.InsightContribution);
+			const insightConfig = widgetRegistry.getRegisteredExtensionInsights(key);
+			if (insightConfig === undefined) {
+				return undefined;
+			}
+			// Save the widget for future use
+			selector = componentMap['insights-widget'];
+			delete this._config.widget[key];
+			this._config.widget['insights-widget'] = insightConfig;
+		}
+		return selector;
+	}
+
+	private updateTheme(theme: IColorTheme): void {
+		const el = <HTMLElement>this._ref.nativeElement;
+		const headerEl: HTMLElement = this.header.nativeElement;
+		let borderColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true);
+		let backgroundColor = theme.getColor(colors.editorBackground, true);
+		const foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
+		const border = theme.getColor(colors.contrastBorder, true);
+
+		if (this._config.background_color) {
+			backgroundColor = theme.getColor(this._config.background_color);
+		}
+
+		if (this._config.border === 'none') {
+			borderColor = undefined;
+		}
+
+		if (backgroundColor) {
+			el.style.backgroundColor = backgroundColor.toString();
+		}
+
+		if (foregroundColor) {
+			el.style.color = foregroundColor.toString();
+		}
+
+		let borderString = undefined;
+		if (border) {
+			borderString = border.toString();
+			el.style.borderColor = borderString;
+			el.style.borderWidth = '1px';
+			el.style.borderStyle = 'solid';
+		} else if (borderColor) {
+			borderString = borderColor.toString();
+			el.style.border = '3px solid ' + borderColor.toString();
+		} else {
+			el.style.border = 'none';
+		}
+
+		if (borderString) {
+			headerEl.style.backgroundColor = borderString;
+		} else {
+			headerEl.style.backgroundColor = '';
+		}
+
+		if (this._config.fontSize) {
+			headerEl.style.fontSize = this._config.fontSize;
+		}
+		if (this._config.fontWeight) {
+			headerEl.style.fontWeight = this._config.fontWeight;
+		}
+		if (this._config.padding) {
+			headerEl.style.padding = this._config.padding;
+		}
+	}
+}

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+dashboard-widget-wrapper .action-label {
+	padding: 7px;
+}

src/sql/workbench/contrib/dashboard/browser/contents/webviewContent.component.ts

@@ -0,0 +1,116 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./webviewContent';
+
+import { Component, forwardRef, Input, OnInit, Inject, ElementRef } from '@angular/core';
+
+import { Event, Emitter } from 'vs/base/common/event';
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { addDisposableListener, EventType } from 'vs/base/browser/dom';
+import { memoize } from 'vs/base/common/decorators';
+import { DashboardServiceInterface } from 'sql/workbench/contrib/dashboard/browser/services/dashboardServiceInterface.service';
+import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
+import { IDashboardWebview, IDashboardViewService } from 'sql/platform/dashboard/browser/dashboardViewService';
+import { AngularDisposable } from 'sql/base/browser/lifecycle';
+
+import * as azdata from 'azdata';
+import { WebviewElement, IWebviewService } from 'vs/workbench/contrib/webview/browser/webview';
+
+@Component({
+	template: '',
+	selector: 'webview-content'
+})
+export class WebviewContent extends AngularDisposable implements OnInit, IDashboardWebview {
+	@Input() private webviewId: 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;
+	private _webview: WebviewElement;
+	private _html: string;
+
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private readonly _dashboardService: DashboardServiceInterface,
+		@Inject(forwardRef(() => ElementRef)) private readonly _el: ElementRef,
+		@Inject(IDashboardViewService) private readonly dashboardViewService: IDashboardViewService,
+		@Inject(IWebviewService) private readonly webviewService: IWebviewService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this.dashboardViewService.registerWebview(this);
+		this._createWebview();
+		this._register(addDisposableListener(window, EventType.RESIZE, e => {
+			this.layout();
+		}));
+	}
+
+	public layout(): void {
+		// no op
+	}
+
+	public get id(): string {
+		return this.webviewId;
+	}
+
+	@memoize
+	public get connection(): azdata.connection.Connection {
+		const currentConnection = this._dashboardService.connectionManagementService.connectionInfo.connectionProfile;
+		const connection: azdata.connection.Connection = {
+			providerName: currentConnection.providerName,
+			connectionId: currentConnection.id,
+			options: currentConnection.options
+		};
+		return connection;
+	}
+
+	@memoize
+	public get serverInfo(): azdata.ServerInfo {
+		return this._dashboardService.connectionManagementService.connectionInfo.serverInfo;
+	}
+
+	public setHtml(html: string): void {
+		this._html = html;
+		if (this._webview) {
+			this._webview.html = html;
+		}
+	}
+
+	public sendMessage(message: string): void {
+		if (this._webview) {
+			this._webview.sendMessage(message);
+		}
+	}
+
+	private _createWebview(): void {
+		if (this._webview) {
+			this._webview.dispose();
+		}
+
+		if (this._onMessageDisposable) {
+			this._onMessageDisposable.dispose();
+		}
+
+		this._webview = this.webviewService.createWebview(this.id,
+			{},
+			{
+				allowScripts: true
+			});
+
+		this._webview.mountTo(this._el.nativeElement);
+
+		this._onMessageDisposable = this._webview.onMessage(e => {
+			this._onMessage.fire(e);
+		});
+		if (this._html) {
+			this._webview.html = this._html;
+		}
+	}
+}

src/sql/workbench/contrib/dashboard/browser/contents/webviewContent.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.
+ *--------------------------------------------------------------------------------------------*/
+
+webview-content {
+	height: 100%;
+	width : 100%;
+	display: block;
+}

src/sql/workbench/contrib/dashboard/browser/contents/widgetContent.component.html

@@ -0,0 +1,14 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div class="scroll-container" #scrollContainer>
+	<div class="scrollable" #scrollable>
+		<div [ngGrid]="gridConfig" *ngIf="widgets" >
+			<dashboard-widget-wrapper *ngFor="let widget of widgets" [(ngGridItem)]="widget.gridItemConfig" [_config]="widget">
+			</dashboard-widget-wrapper>
+		</div>
+	</div>
+</div>

src/sql/workbench/contrib/dashboard/browser/contents/widgetContent.component.ts

@@ -0,0 +1,273 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./widgetContent';
+
+import { Component, Inject, Input, forwardRef, ViewChild, ViewChildren, QueryList, ChangeDetectorRef, ElementRef, AfterViewInit } from '@angular/core';
+import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
+
+import { DashboardServiceInterface } from 'sql/workbench/contrib/dashboard/browser/services/dashboardServiceInterface.service';
+import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
+import { WidgetConfig } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
+import { DashboardWidgetWrapper } from 'sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component';
+import { subscriptionToDisposable, AngularDisposable } from 'sql/base/browser/lifecycle';
+
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
+import * as objects from 'vs/base/common/objects';
+import { Event, Emitter } from 'vs/base/common/event';
+import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { getContentHeight, addDisposableListener, EventType } from 'vs/base/browser/dom';
+import { find, firstIndex } from 'vs/base/common/arrays';
+
+/**
+ * Sorting function for dashboard widgets
+ * In order of priority;
+ * If neither have defined grid positions, they are equivalent
+ * If a has a defined grid position and b does not; a should come first
+ * If both have defined grid positions and have the same row; the one with the smaller col position should come first
+ * If both have defined grid positions but different rows (it doesn't really matter in this case) the lowers row should come first
+ */
+function configSorter(a, b): number {
+	if ((!a.gridItemConfig || !a.gridItemConfig.col)
+		&& (!b.gridItemConfig || !b.gridItemConfig.col)) {
+		return 0;
+	} else if (!a.gridItemConfig || !a.gridItemConfig.col) {
+		return 1;
+	} else if (!b.gridItemConfig || !b.gridItemConfig.col) {
+		return -1;
+	} else if (a.gridItemConfig.row === b.gridItemConfig.row) {
+		if (a.gridItemConfig.col < b.gridItemConfig.col) {
+			return -1;
+		}
+
+		if (a.gridItemConfig.col === b.gridItemConfig.col) {
+			return 0;
+		}
+
+		if (a.gridItemConfig.col > b.gridItemConfig.col) {
+			return 1;
+		}
+	} else {
+		if (a.gridItemConfig.row < b.gridItemConfig.row) {
+			return -1;
+		}
+
+		if (a.gridItemConfig.row === b.gridItemConfig.row) {
+			return 0;
+		}
+
+		if (a.gridItemConfig.row > b.gridItemConfig.row) {
+			return 1;
+		}
+	}
+
+	return void 0; // this should never be reached
+}
+
+@Component({
+	selector: 'widget-content',
+	templateUrl: decodeURI(require.toUrl('./widgetContent.component.html'))
+})
+export class WidgetContent extends AngularDisposable implements AfterViewInit {
+	@Input() private widgets: WidgetConfig[];
+	@Input() private originalConfig: WidgetConfig[];
+	@Input() private context: string;
+	@Input() private scrollContent = true;
+
+	private _scrollableElement: ScrollableElement;
+
+	private _onResize = new Emitter<void>();
+	public readonly onResize: Event<void> = this._onResize.event;
+
+	protected SKELETON_WIDTH = 5;
+	protected gridConfig: NgGridConfig = {
+		'margins': [10],            //  The size of the margins of each item. Supports up to four values in the same way as CSS margins. Can be updated using setMargins()
+		'draggable': false,          //  Whether the items can be dragged. Can be updated using enableDrag()/disableDrag()
+		'resizable': false,          //  Whether the items can be resized. Can be updated using enableResize()/disableResize()
+		'max_cols': this.SKELETON_WIDTH,              //  The maximum number of columns allowed. Set to 0 for infinite. Cannot be used with max_rows
+		'max_rows': 0,              //  The maximum number of rows allowed. Set to 0 for infinite. Cannot be used with max_cols
+		'visible_cols': 0,          //  The number of columns shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_cols
+		'visible_rows': 0,          //  The number of rows shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_rows
+		'min_cols': 0,              //  The minimum number of columns allowed. Can be any number greater than or equal to 1.
+		'min_rows': 0,              //  The minimum number of rows allowed. Can be any number greater than or equal to 1.
+		'col_width': 250,           //  The width of each column
+		'row_height': 250,          //  The height of each row
+		'cascade': 'left',            //  The direction to cascade grid items ('up', 'right', 'down', 'left')
+		'min_width': 100,           //  The minimum width of an item. If greater than col_width, this will update the value of min_cols
+		'min_height': 100,          //  The minimum height of an item. If greater than row_height, this will update the value of min_rows
+		'fix_to_grid': false,       //  Fix all item movements to the grid
+		'auto_style': true,         //  Automatically add required element styles at run-time
+		'auto_resize': false,       //  Automatically set col_width/row_height so that max_cols/max_rows fills the screen. Only has effect is max_cols or max_rows is set
+		'maintain_ratio': false,    //  Attempts to maintain aspect ratio based on the colWidth/rowHeight values set in the config
+		'prefer_new': false,        //  When adding new items, will use that items position ahead of existing items
+		'limit_to_screen': true,   //  When resizing the screen, with this true and auto_resize false, the grid will re-arrange to fit the screen size. Please note, at present this only works with cascade direction up.
+	};
+
+	private _editDispose: Array<IDisposable> = [];
+
+	@ViewChild(NgGrid) private _grid: NgGrid;
+	@ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>;
+	@ViewChildren(NgGridItem) private _items: QueryList<NgGridItem>;
+	@ViewChild('scrollable', { read: ElementRef }) private _scrollable: ElementRef;
+	@ViewChild('scrollContainer', { read: ElementRef }) private _scrollContainer: ElementRef;
+
+	protected dashboardService: DashboardServiceInterface;
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) protected commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) protected _cd: ChangeDetectorRef
+	) {
+		super();
+		this.dashboardService = commonService as DashboardServiceInterface;
+	}
+
+	ngAfterViewInit() {
+		if (this.scrollContent) {
+			const container = this._scrollContainer.nativeElement as HTMLElement;
+			const scrollable = this._scrollable.nativeElement as HTMLElement;
+			container.removeChild(scrollable);
+
+			this._scrollableElement = new ScrollableElement(scrollable, {
+				horizontal: ScrollbarVisibility.Hidden,
+				vertical: ScrollbarVisibility.Auto,
+				useShadows: false
+			});
+
+			this._scrollableElement.onScroll(e => {
+				scrollable.style.bottom = e.scrollTop + 'px';
+			});
+
+			container.appendChild(this._scrollableElement.getDomNode());
+			const initalHeight = getContentHeight(scrollable);
+			this._scrollableElement.setScrollDimensions({
+				scrollHeight: getContentHeight(scrollable),
+				height: getContentHeight(container)
+			});
+
+			this._register(addDisposableListener(window, EventType.RESIZE, () => {
+				this.resetScrollDimensions();
+			}));
+
+			// unforunately because of angular rendering behavior we need to do a double check to make sure nothing changed after this point
+			setTimeout(() => {
+				const currentheight = getContentHeight(scrollable);
+				if (initalHeight !== currentheight) {
+					this._scrollableElement.setScrollDimensions({
+						scrollHeight: currentheight,
+						height: getContentHeight(container)
+					});
+				}
+			}, 200);
+		}
+	}
+
+	public layout() {
+		if (this._widgets) {
+			this._widgets.forEach(item => {
+				item.layout();
+			});
+		}
+		this._grid.triggerResize();
+		if (this.scrollContent) {
+			this.resetScrollDimensions();
+		}
+	}
+
+	private resetScrollDimensions() {
+		const container = this._scrollContainer.nativeElement as HTMLElement;
+		const scrollable = this._scrollable.nativeElement as HTMLElement;
+
+		this._scrollableElement.setScrollDimensions({
+			scrollHeight: getContentHeight(scrollable),
+			height: getContentHeight(container)
+		});
+	}
+
+	public refresh(): void {
+		if (this._widgets) {
+			this._widgets.forEach(item => {
+				item.refresh();
+			});
+		}
+	}
+
+	public enableEdit(): void {
+		if (this._grid.dragEnable) {
+			this._grid.disableDrag();
+			this._grid.disableResize();
+			this._editDispose.forEach(i => i.dispose());
+			this._widgets.forEach(i => {
+				if (i.id) {
+					i.disableEdit();
+				}
+			});
+			this._editDispose = [];
+		} else {
+			this._grid.enableResize();
+			this._grid.enableDrag();
+			this._editDispose.push(this.dashboardService.onDeleteWidget(e => {
+				let index = firstIndex(this.widgets, i => i.id === e);
+				this.widgets.splice(index, 1);
+
+				index = firstIndex(this.originalConfig, i => i.id === e);
+				this.originalConfig.splice(index, 1);
+
+				this._rewriteConfig();
+				this._cd.detectChanges();
+			}));
+			this._editDispose.push(subscriptionToDisposable(this._grid.onResizeStop.subscribe((e: NgGridItem) => {
+				this._onResize.fire();
+				const event = e.getEventOutput();
+				const config = find(this.originalConfig, i => i.id === event.payload.id);
+
+				if (!config.gridItemConfig) {
+					config.gridItemConfig = {};
+				}
+				config.gridItemConfig.sizex = e.sizex;
+				config.gridItemConfig.sizey = e.sizey;
+
+				const component = this._widgets.find(i => i.id === event.payload.id);
+
+				component.layout();
+				this._rewriteConfig();
+				this.resetScrollDimensions();
+			})));
+			this._editDispose.push(subscriptionToDisposable(this._grid.onDragStop.subscribe((e: NgGridItem) => {
+				this._onResize.fire();
+				const event = e.getEventOutput();
+				this._items.forEach(i => {
+					const config = find(this.originalConfig, j => j.id === i.getEventOutput().payload.id);
+					if ((config.gridItemConfig && config.gridItemConfig.col) || config.id === event.payload.id) {
+						if (!config.gridItemConfig) {
+							config.gridItemConfig = {};
+						}
+						config.gridItemConfig.col = i.col;
+						config.gridItemConfig.row = i.row;
+					}
+				});
+				this.originalConfig.sort(configSorter);
+
+				this._rewriteConfig();
+				this.resetScrollDimensions();
+			})));
+			this._widgets.forEach(i => {
+				if (i.id) {
+					i.enableEdit();
+				}
+			});
+		}
+	}
+
+	private _rewriteConfig(): void {
+		const writeableConfig = objects.deepClone(this.originalConfig);
+
+		writeableConfig.forEach(i => {
+			delete i.id;
+		});
+		const target: ConfigurationTarget = ConfigurationTarget.USER;
+		this.dashboardService.writeSettings([this.context, 'widgets'].join('.'), writeableConfig, target);
+	}
+}

src/sql/workbench/contrib/dashboard/browser/contents/widgetContent.css

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+widget-content {
+	height: 100%;
+	width: 100%;
+}
+
+.scroll-container {
+	height: 100%;
+	width: 100%;
+}
+
+.scrollable {
+	position: relative;
+}