add table insight (#976)

src/sql/base/browser/ui/table/table.ts

@@ -111,8 +111,8 @@ export class Table<T extends Slick.SlickData> implements IThemable {
 		return this._grid.getSelectedRows();
 	}
 
-	onSelectedRowsChanged(fn: (e: Slick.EventData, data: Slick.OnSelectedRowsChangedEventArgs<T>) => any): IDisposable
-	onSelectedRowsChanged(fn: (e: DOMEvent, data: Slick.OnSelectedRowsChangedEventArgs<T>) => any): IDisposable
+	onSelectedRowsChanged(fn: (e: Slick.EventData, data: Slick.OnSelectedRowsChangedEventArgs<T>) => any): IDisposable;
+	onSelectedRowsChanged(fn: (e: DOMEvent, data: Slick.OnSelectedRowsChangedEventArgs<T>) => any): IDisposable;
 	onSelectedRowsChanged(fn: any): IDisposable {
 		this._grid.onSelectedRowsChanged.subscribe(fn);
 		return {
@@ -164,8 +164,8 @@ export class Table<T extends Slick.SlickData> implements IThemable {
 		this._grid.resizeCanvas();
 	}
 
-	layout(dimension: Dimension): void
-	layout(size: number, orientation: Orientation): void
+	layout(dimension: Dimension): void;
+	layout(size: number, orientation: Orientation): void;
 	layout(sizing: number | Dimension, orientation?: Orientation): void {
 		if (sizing instanceof Dimension) {
 			this._container.style.width = sizing.width + 'px';

src/sql/parts/dashboard/widgets/insights/views/tableInsight.component.ts

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnInit } from '@angular/core';
+
+import { getContentHeight, getContentWidth } from 'vs/base/browser/dom';
+import { Dimension } from 'vs/base/browser/builder';
+
+import { IInsightsView, IInsightData } from 'sql/parts/dashboard/widgets/insights/interfaces';
+import { Table } from 'sql/base/browser/ui/table/table';
+import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
+import { DragCellSelectionModel } from '../../../../../base/browser/ui/table/plugins/dragCellSelectionModel.plugin';
+
+@Component({
+	template: '<span></span>'
+})
+export default class TableInsight implements IInsightsView, OnInit {
+	private table: Table<any>;
+	private dataView: TableDataView<any>;
+	private columns: Slick.Column<any>[];
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) private _elementRef: ElementRef
+	) { }
+
+	ngOnInit() {
+		this.createTable();
+	}
+
+	@Input() set data(data: IInsightData) {
+		if (!this.dataView) {
+			this.dataView = new TableDataView();
+			if (this.table) {
+				this.table.setData(this.dataView);
+			}
+		}
+
+		this.dataView.clear();
+		this.dataView.push(transformData(data.rows, data.columns));
+		this.columns = transformColumns(data.columns);
+
+		if (this.table) {
+			this.table.columns = this.columns;
+		} else if (this._elementRef && this._elementRef.nativeElement) {
+			this.createTable();
+		}
+	}
+
+	layout() {
+		if (this.table) {
+			this.table.layout(new Dimension(getContentWidth(this._elementRef.nativeElement), getContentHeight(this._elementRef.nativeElement)));
+		}
+	}
+
+	private createTable() {
+		if (!this.table) {
+			this.table = new Table(this._elementRef.nativeElement, this.dataView, this.columns, { showRowNumber: true });
+			this.table.setSelectionModel(new DragCellSelectionModel());
+		}
+	}
+}
+
+function transformData(rows: string[][], columns: string[]): {[key: string]: string}[] {
+	return rows.map(row => {
+		let object: {[key: string]: string} = {};
+		row.forEach((val, index) => {
+			object[columns[index]] = val;
+		});
+		return object;
+	});
+}
+
+function transformColumns(columns: string[]): Slick.Column<any>[] {
+	return columns.map(col => {
+		return <Slick.Column<any>>{
+			name: col,
+			id: col,
+			field: col
+		};
+	});
+}

src/sql/parts/dashboard/widgets/insights/views/tableInsight.contribution.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { registerInsight } from 'sql/platform/dashboard/common/insightRegistry';
+
+import TableInsight from './tableInsight.component';
+
+import { IJSONSchema } from 'vs/base/common/jsonSchema';
+import * as nls from 'vs/nls';
+
+let tableInsightSchema: IJSONSchema = {
+	type: 'null',
+	description: nls.localize('tableInsightDescription', 'Displays the results in a simple table')
+};
+
+registerInsight('table', '', tableInsightSchema, TableInsight);

src/typings/globals/slickgrid/index.d.ts

@@ -649,6 +649,11 @@ declare namespace Slick {
 		**/
 		showHeaderRow?: boolean;
 
+		/**
+		 *
+		 */
+		showRowNumber?: boolean;
+
 		/**
 		* If true, the column being resized will change its width as the mouse is dragging the resize handle. If false, the column will resize after mouse drag ends.
 		**/

src/vs/workbench/workbench.main.ts

@@ -154,6 +154,7 @@ import 'sql/parts/dashboard/widgets/insights/views/charts/types/scatterChart.con
 import 'sql/parts/dashboard/widgets/insights/views/charts/types/timeSeriesChart.contribution';
 import 'sql/parts/dashboard/widgets/insights/views/countInsight.contribution';
 import 'sql/parts/dashboard/widgets/insights/views/imageInsight.contribution';
+import 'sql/parts/dashboard/widgets/insights/views/tableInsight.contribution';
 /* Tasks */
 import 'sql/workbench/common/actions.contribution';
 /* Widgets */