Refresh master with initial release/0.24 snapshot (#332)

* Initial port of release/0.24 source code

* Fix additional headers

* Fix a typo in launch.json

src/sql/parts/dashboard/common/dashboardPage.component.ts

@@ -3,22 +3,33 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Component, Inject, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core';
-import { NgGridConfig } from 'angular2-grid';
+import 'vs/css!./dashboardPage';
+
+import { Component, Inject, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { ConnectionManagementInfo } from 'sql/parts/connection/common/connectionManagementInfo';
 import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
 import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
+import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
+import { IPropertiesConfig } from 'sql/parts/dashboard/pages/serverDashboardPage.contribution';
 
 import { Registry } from 'vs/platform/registry/common/platform';
 import * as types from 'vs/base/common/types';
 import { Severity } from 'vs/platform/message/common/message';
-import { IDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
+import * as nls from 'vs/nls';
+import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { addDisposableListener, getContentHeight, EventType } from 'vs/base/browser/dom';
 import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import * as colors from 'vs/platform/theme/common/colorRegistry';
-import * as nls from 'vs/nls';
+import * as themeColors from 'vs/workbench/common/theme';
+import { generateUuid } from 'vs/base/common/uuid';
+import * as objects from 'vs/base/common/objects';
+import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 
 /**
  * @returns whether the provided parameter is a JavaScript Array and each element in the array is a number.
@@ -27,14 +38,56 @@ function isNumberArray(value: any): value is number[] {
 	return types.isArray(value) && (<any[]>value).every(elem => types.isNumber(elem));
 }
 
+/**
+ * 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: 'dashboard-page',
-	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/common/dashboardPage.component.html')),
-	host: {
-		class: 'dashboard-page'
-	}
+	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/common/dashboardPage.component.html'))
 })
-export abstract class DashboardPage {
+export abstract class DashboardPage extends Disposable implements OnDestroy {
 
 	protected SKELETON_WIDTH = 5;
 	protected widgets: Array<WidgetConfig> = [];
@@ -60,55 +113,124 @@ export abstract class DashboardPage {
 		'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 _themeDispose: IDisposable;
+	private _originalConfig: WidgetConfig[];
+	private _editDispose: Array<IDisposable> = [];
+	private _scrollableElement: ScrollableElement;
+
+	private _widgetConfigLocation: string;
+	private _propertiesConfigLocation: string;
 
-	@ViewChild('propertyContainer', { read: ElementRef }) private propertyContainer: ElementRef;
 	@ViewChild('properties') private _properties: DashboardWidgetWrapper;
+	@ViewChild(NgGrid) private _grid: NgGrid;
+	@ViewChild('scrollable', { read: ElementRef }) private _scrollable: ElementRef;
+	@ViewChild('scrollContainer', { read: ElementRef }) private _scrollContainer: ElementRef;
+	@ViewChild('propertiesContainer', { read: ElementRef }) private _propertiesContainer: ElementRef;
 	@ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>;
+	@ViewChildren(NgGridItem) private _items: QueryList<NgGridItem>;
 
 	// a set of config modifiers
 	private readonly _configModifiers: Array<(item: Array<WidgetConfig>) => Array<WidgetConfig>> = [
 		this.removeEmpty,
 		this.initExtensionConfigs,
-		this.validateGridConfig,
 		this.addProvider,
 		this.addEdition,
 		this.addContext,
 		this.filterWidgets
 	];
 
+	private readonly _gridModifiers: Array<(item: Array<WidgetConfig>) => Array<WidgetConfig>> = [
+		this.validateGridConfig
+	];
+
 	constructor(
-		@Inject(forwardRef(() => DashboardServiceInterface)) protected dashboardService: DashboardServiceInterface
-	) { }
+		@Inject(forwardRef(() => DashboardServiceInterface)) protected dashboardService: DashboardServiceInterface,
+		@Inject(forwardRef(() => ElementRef)) protected _el: ElementRef,
+		@Inject(forwardRef(() => ChangeDetectorRef)) protected _cd: ChangeDetectorRef
+	) {
+		super();
+	}
 
 	protected init() {
 		if (!this.dashboardService.connectionManagementService.connectionInfo) {
 			this.dashboardService.messageService.show(Severity.Warning, nls.localize('missingConnectionInfo', 'No connection information could be found for this dashboard'));
 		} else {
-			let tempWidgets = this.dashboardService.getSettings(this.context).widgets;
+			let tempWidgets = this.dashboardService.getSettings<Array<WidgetConfig>>([this.context, 'widgets'].join('.'));
+			this._widgetConfigLocation = 'default';
+			this._originalConfig = objects.clone(tempWidgets);
 			let properties = this.getProperties();
 			this._configModifiers.forEach((cb) => {
 				tempWidgets = cb.apply(this, [tempWidgets]);
 				properties = properties ? cb.apply(this, [properties]) : undefined;
 			});
+			this._gridModifiers.forEach(cb => {
+				tempWidgets = cb.apply(this, [tempWidgets]);
+			});
 			this.widgets = tempWidgets;
 			this.propertiesWidget = properties ? properties[0] : undefined;
 		}
 	}
 
-	protected baseInit(): void {
-		let self = this;
-		self._themeDispose = self.dashboardService.themeService.onDidColorThemeChange((event: IColorTheme) => {
-			self.updateTheme(event);
+	ngAfterViewInit(): void {
+		this._register(this.dashboardService.themeService.onDidColorThemeChange(this.updateTheme, this));
+		this.updateTheme(this.dashboardService.themeService.getColorTheme());
+		let container = this._scrollContainer.nativeElement as HTMLElement;
+		let scrollable = this._scrollable.nativeElement as HTMLElement;
+		container.removeChild(scrollable);
+		this._scrollableElement = new ScrollableElement(scrollable, {
+			horizontal: ScrollbarVisibility.Hidden,
+			vertical: ScrollbarVisibility.Auto,
+			useShadows: false
 		});
-		self.updateTheme(self.dashboardService.themeService.getColorTheme());
+
+		this._scrollableElement.onScroll(e => {
+			scrollable.style.bottom = e.scrollTop + 'px';
+		});
+
+		container.appendChild(this._scrollableElement.getDomNode());
+		let initalHeight = getContentHeight(scrollable);
+		this._scrollableElement.setScrollDimensions({
+			scrollHeight: getContentHeight(scrollable),
+			height: getContentHeight(container)
+		});
+
+		this._register(addDisposableListener(window, EventType.RESIZE, () => {
+			this._scrollableElement.setScrollDimensions({
+				scrollHeight: getContentHeight(scrollable),
+				height: getContentHeight(container)
+			});
+		}));
+
+		// unforunately because of angular rendering behavior we need to do a double check to make sure nothing changed after this point
+		setTimeout(() => {
+			let currentheight = getContentHeight(scrollable);
+			if (initalHeight !== currentheight) {
+				this._scrollableElement.setScrollDimensions({
+					scrollHeight: getContentHeight(scrollable),
+					height: getContentHeight(container)
+				});
+			}
+		}, 100);
+	}
+
+	private updateTheme(theme: IColorTheme): void {
+		let el = this._propertiesContainer.nativeElement as HTMLElement;
+		let border = theme.getColor(colors.contrastBorder, true);
+		let borderColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true);
+
+		if (border) {
+			el.style.borderColor = border.toString();
+			el.style.borderBottomWidth = '1px';
+			el.style.borderBottomStyle = 'solid';
+		} else if (borderColor) {
+			el.style.borderBottom = '1px solid ' + borderColor.toString();
+		} else {
+			el.style.border = 'none';
+		}
 
 	}
 
-	protected baseDestroy(): void {
-		if (this._themeDispose) {
-			this._themeDispose.dispose();
-		}
+	ngOnDestroy() {
+		this.dispose();
 	}
 
 	protected abstract propertiesWidget: WidgetConfig;
@@ -215,10 +337,14 @@ export abstract class DashboardPage {
 	 * @param config Array of widgets to validate
 	 */
 	protected validateGridConfig(config: WidgetConfig[]): Array<WidgetConfig> {
-		return config.map((widget) => {
+		return config.map((widget, index) => {
 			if (widget.gridItemConfig === undefined) {
 				widget.gridItemConfig = {};
 			}
+			const id = generateUuid();
+			widget.gridItemConfig.payload = { id };
+			widget.id = id;
+			this._originalConfig[index].id = id;
 			return widget;
 		});
 	}
@@ -246,6 +372,12 @@ export abstract class DashboardPage {
 							sizey: insightConfig.gridItemConfig.y
 						};
 					}
+					if (config.gridItemConfig && !config.gridItemConfig.sizex && insightConfig.gridItemConfig && insightConfig.gridItemConfig.x) {
+						config.gridItemConfig.sizex = insightConfig.gridItemConfig.x;
+					}
+					if (config.gridItemConfig && !config.gridItemConfig.sizey && insightConfig.gridItemConfig && insightConfig.gridItemConfig.y) {
+						config.gridItemConfig.sizey = insightConfig.gridItemConfig.y;
+					}
 				}
 			}
 			return config;
@@ -253,7 +385,8 @@ export abstract class DashboardPage {
 	}
 
 	private getProperties(): Array<WidgetConfig> {
-		let properties = this.dashboardService.getSettings(this.context).properties;
+		let properties = this.dashboardService.getSettings<IPropertiesConfig[]>([this.context, 'properties'].join('.'));
+		this._propertiesConfigLocation = 'default';
 		if (types.isUndefinedOrNull(properties)) {
 			return [this.propertiesWidget];
 		} else if (types.isBoolean(properties)) {
@@ -271,18 +404,6 @@ export abstract class DashboardPage {
 		}
 	}
 
-	private updateTheme(theme: IColorTheme): void {
-		let propsEl: HTMLElement = this.propertyContainer.nativeElement;
-		let widgetShadowColor = theme.getColor(colors.widgetShadow);
-		if (widgetShadowColor) {
-			// Box shadow on bottom only.
-			// The below settings fill the shadow across the whole page
-			propsEl.style.boxShadow = `-5px 5px 10px -5px ${widgetShadowColor}`;
-			propsEl.style.marginRight = '-10px';
-			propsEl.style.marginBottom = '5px';
-		}
-	}
-
 	public refresh(refreshConfig: boolean = false): void {
 		if (refreshConfig) {
 			this.init();
@@ -297,4 +418,85 @@ export abstract class DashboardPage {
 			}
 		}
 	}
+
+	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 = this.widgets.findIndex(i => i.id === e);
+				this.widgets.splice(index, 1);
+
+				index = this._originalConfig.findIndex(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._scrollableElement.setScrollDimensions({
+					scrollHeight: getContentHeight(this._scrollable.nativeElement),
+					height: getContentHeight(this._scrollContainer.nativeElement)
+				});
+				let event = e.getEventOutput();
+				let config = this._originalConfig.find(i => i.id === event.payload.id);
+
+				if (!config.gridItemConfig) {
+					config.gridItemConfig = {};
+				}
+				config.gridItemConfig.sizex = e.sizex;
+				config.gridItemConfig.sizey = e.sizey;
+
+				let component = this._widgets.find(i => i.id === event.payload.id);
+
+				component.layout();
+				this._rewriteConfig();
+			})));
+			this._editDispose.push(subscriptionToDisposable(this._grid.onDragStop.subscribe((e: NgGridItem) => {
+				this._scrollableElement.setScrollDimensions({
+					scrollHeight: getContentHeight(this._scrollable.nativeElement),
+					height: getContentHeight(this._scrollContainer.nativeElement)
+				});
+				let event = e.getEventOutput();
+				this._items.forEach(i => {
+					let config = this._originalConfig.find(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._widgets.forEach(i => {
+				if (i.id) {
+					i.enableEdit();
+				}
+			});
+		}
+	}
+
+	private _rewriteConfig(): void {
+		let writeableConfig = objects.clone(this._originalConfig);
+
+		writeableConfig.forEach(i => {
+			delete i.id;
+		});
+		let target: ConfigurationTarget = ConfigurationTarget.USER;
+		this.dashboardService.writeSettings(this.context, writeableConfig, target);
+	}
 }