fixed the grid layout schema and fixed layout bugs (#847)

* fixed the grid layout schema and fixed layout bugs

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

@@ -5,7 +5,7 @@
 
 import 'vs/css!./dashboardGridContainer';
 
-import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter, OnChanges } from '@angular/core';
+import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
@@ -19,6 +19,7 @@ import { ConfigurationTarget } from 'vs/platform/configuration/common/configurat
 import * as objects from 'vs/base/common/objects';
 import Event, { Emitter } from 'vs/base/common/event';
 import { concat } from 'rxjs/operator/concat';
+import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
 
 export interface GridCellConfig {
 	id?: string;
@@ -42,7 +43,7 @@ export interface GridWebviewConfig extends GridCellConfig {
 	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardGridContainer.component.html')),
 	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardGridContainer) }]
 })
-export class DashboardGridContainer extends DashboardTab implements OnDestroy, OnChanges {
+export class DashboardGridContainer extends DashboardTab implements OnDestroy {
 	@Input() private tab: TabConfig;
 	private _contents: GridCellConfig[];
 	private _onResize = new Emitter<void>();
@@ -105,7 +106,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 		let content = this.getContent(row, col);
 		let colspan: string = '1';
 		if (content && content.colspan) {
-			colspan = content.colspan;
+			colspan = this.convertToNumber(content.colspan, this.cols.length).toString();
 		}
 		return colspan;
 	}
@@ -113,7 +114,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 	protected getRowspan(row: number, col: number): string {
 		let content = this.getContent(row, col);
 		if (content && (content.rowspan)) {
-			return content.rowspan;
+			return this.convertToNumber(content.rowspan, this.rows.length).toString();
 		} else {
 			return '1';
 		}
@@ -122,7 +123,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 	protected getWidgetWidth(row: number, col: number): string {
 		let content = this.getContent(row, col);
 		let colspan = this.getColspan(row, col);
-		let columnCount = this.covertToNumber(colspan, this.cols.length);
+		let columnCount = this.convertToNumber(colspan, this.cols.length);
 
 		return columnCount * this.cellWidth + 'px';
 	}
@@ -130,12 +131,12 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 	protected getWidgetHeight(row: number, col: number): string {
 		let content = this.getContent(row, col);
 		let rowspan = this.getRowspan(row, col);
-		let rowCount = this.covertToNumber(rowspan, this.rows.length);
+		let rowCount = this.convertToNumber(rowspan, this.rows.length);
 
 		return rowCount * this.cellHeight + 'px';
 	}
 
-	private covertToNumber(value: string, maxNumber: number): number {
+	private convertToNumber(value: string, maxNumber: number): number {
 		if (value === '*') {
 			return maxNumber;
 		}
@@ -147,6 +148,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 	}
 
 	@ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>;
+	@ViewChildren(WebviewContent) private _webViews: QueryList<WebviewContent>;
 	constructor(
 		@Inject(forwardRef(() => DashboardServiceInterface)) protected dashboardService: DashboardServiceInterface,
 		@Inject(forwardRef(() => ElementRef)) protected _el: ElementRef,
@@ -158,7 +160,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 	protected init() {
 	}
 
-	ngOnChanges() {
+	ngOnInit() {
 		if (this.tab.container) {
 			this._contents = Object.values(this.tab.container)[0];
 			this._contents.forEach(widget => {
@@ -177,8 +179,6 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 			});
 			this.rows = this.createIndexes(this._contents.map(w => w.row));
 			this.cols = this.createIndexes(this._contents.map(w => w.col));
-
-			this._cd.detectChanges();
 		}
 	}
 
@@ -205,6 +205,11 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
 				item.layout();
 			});
 		}
+		if (this._webViews) {
+			this._webViews.forEach(item => {
+				item.layout();
+			});
+		}
 	}
 
 	public refresh(): void {

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

@@ -163,6 +163,7 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 
 	public handleTabChange(tab: TabComponent): void {
 		let localtab = this._tabs.find(i => i.id === tab.identifier);
+		this._cd.detectChanges();
 		localtab.layout();
 	}
 }

src/sql/parts/dashboard/pages/dashboardPageContribution.ts

@@ -75,10 +75,46 @@ export function generateDashboardGridLayoutSchema(type?: 'database' | 'server',
 		type: 'object',
 		properties: {
 			name: {
-				type: 'string'
+				type: 'string',
+				description: localize('dashboardpage.tabName', "The title of the container")
 			},
-			icon: {
-				type: 'string'
+			row: {
+				type: 'number',
+				description: localize('dashboardpage.rowNumber', "The row of the component in the grid")
+			},
+			rowspan: {
+				type: 'string',
+				description: localize('dashboardpage.rowSpan', "The rowspan of the component in the grid. Default value is 1. Use '*' to set to number of rows in the grid.")
+			},
+			col: {
+				type: 'number',
+				description: localize('dashboardpage.colNumber', "The column of the component in the grid")
+			},
+			colspan: {
+				type: 'string',
+				description: localize('dashboardpage.colspan', "The colspan of the component in the grid. Default value is 1. Use '*' to set to number of columns in the grid.")
+			},
+			widget: {
+				anyOf: [
+					{
+						type: 'object',
+						properties: schemas,
+						minItems: 1,
+						maxItems: 1
+					}
+				]
+			},
+			webview: {
+				anyOf: [
+					{
+						type: 'object',
+						properties: {
+							id: {
+								type: 'string',
+							}
+						}
+					}
+				]
 			},
 			when: {
 				description: localize('sqlops.extension.contributes.widget.when', 'Condition which must be true to show this item'),