diff --git a/src/sql/base/browser/ui/table/table.ts b/src/sql/base/browser/ui/table/table.ts index 66727906f4..ab16ddb381 100644 --- a/src/sql/base/browser/ui/table/table.ts +++ b/src/sql/base/browser/ui/table/table.ts @@ -111,8 +111,8 @@ export class Table implements IThemable { return this._grid.getSelectedRows(); } - onSelectedRowsChanged(fn: (e: Slick.EventData, data: Slick.OnSelectedRowsChangedEventArgs) => any): IDisposable - onSelectedRowsChanged(fn: (e: DOMEvent, data: Slick.OnSelectedRowsChangedEventArgs) => any): IDisposable + onSelectedRowsChanged(fn: (e: Slick.EventData, data: Slick.OnSelectedRowsChangedEventArgs) => any): IDisposable; + onSelectedRowsChanged(fn: (e: DOMEvent, data: Slick.OnSelectedRowsChangedEventArgs) => any): IDisposable; onSelectedRowsChanged(fn: any): IDisposable { this._grid.onSelectedRowsChanged.subscribe(fn); return { @@ -164,8 +164,8 @@ export class Table 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'; diff --git a/src/sql/parts/dashboard/widgets/insights/views/tableInsight.component.ts b/src/sql/parts/dashboard/widgets/insights/views/tableInsight.component.ts new file mode 100644 index 0000000000..d7b85b1b5c --- /dev/null +++ b/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: '' +}) +export default class TableInsight implements IInsightsView, OnInit { + private table: Table; + private dataView: TableDataView; + private columns: Slick.Column[]; + + 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[] { + return columns.map(col => { + return >{ + name: col, + id: col, + field: col + }; + }); +} diff --git a/src/sql/parts/dashboard/widgets/insights/views/tableInsight.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/tableInsight.contribution.ts new file mode 100644 index 0000000000..819f1549be --- /dev/null +++ b/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); diff --git a/src/typings/globals/slickgrid/index.d.ts b/src/typings/globals/slickgrid/index.d.ts index ac92b43c44..d6d46c5ed2 100644 --- a/src/typings/globals/slickgrid/index.d.ts +++ b/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. **/ diff --git a/src/vs/workbench/workbench.main.ts b/src/vs/workbench/workbench.main.ts index df94d8b24f..0e1296f6da 100644 --- a/src/vs/workbench/workbench.main.ts +++ b/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 */