mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-25 09:35:37 -05:00
move code from parts to contrib (#8319)
This commit is contained in:
Anthony Dresser
224
src/sql/workbench/contrib/queryPlan/browser/media/qp.css
Normal file
224
src/sql/workbench/contrib/queryPlan/browser/media/qp.css
Normal file
@@ -0,0 +1,224 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
div.qp-node {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
div.qp-statement-header {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
div.qp-node,
|
||||
div.qp-tt {
|
||||
font-size: 11px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.qp-node>div {
|
||||
font-family: Monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div[class|='qp-icon'] {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qp-tt {
|
||||
top: 4em;
|
||||
left: 2em;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
.qp-tt div,
|
||||
.qp-tt table {
|
||||
font-family: Sans-Serif;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.qp-tt table {
|
||||
border-width: 0px;
|
||||
border-spacing: 0px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qp-tt td,
|
||||
.qp-tt th {
|
||||
font-size: 11px;
|
||||
border-bottom: solid 1px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.qp-tt td {
|
||||
text-align: right;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.qp-tt th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.qp-bold,
|
||||
.qp-tt-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.qp-tt-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.qp-icon-Catchall{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-ArithmeticExpression{background: url('qp_icons.png') -0px -0px }
|
||||
.qp-icon-Assert{background: url('qp_icons.png') -32px -0px }
|
||||
.qp-icon-Assign{background: url('qp_icons.png') -64px -0px }
|
||||
.qp-icon-Bitmap{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-BookmarkLookup{background: url('qp_icons.png') -128px -0px }
|
||||
.qp-icon-ClusteredIndexDelete{background: url('qp_icons.png') -160px -0px }
|
||||
.qp-icon-ClusteredIndexInsert{background: url('qp_icons.png') -192px -0px }
|
||||
.qp-icon-ClusteredIndexScan{background: url('qp_icons.png') -224px -0px }
|
||||
.qp-icon-ClusteredIndexSeek{background: url('qp_icons.png') -256px -0px }
|
||||
.qp-icon-KeyLookup{background: url('qp_icons.png') -256px -0px }
|
||||
.qp-icon-ClusteredIndexUpdate{background: url('qp_icons.png') -288px -0px }
|
||||
.qp-icon-Collapse{background: url('qp_icons.png') -0px -32px }
|
||||
.qp-icon-ComputeScalar{background: url('qp_icons.png') -32px -32px }
|
||||
.qp-icon-Concatenation{background: url('qp_icons.png') -64px -32px }
|
||||
.qp-icon-ConstantScan{background: url('qp_icons.png') -96px -32px }
|
||||
.qp-icon-Convert{background: url('qp_icons.png') -128px -32px }
|
||||
.qp-icon-CursorCatchall{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-Declare{background: url('qp_icons.png') -160px -32px }
|
||||
.qp-icon-Delete{background: url('qp_icons.png') -288px -160px }
|
||||
.qp-icon-DistributeStreams{background: url('qp_icons.png') -224px -32px }
|
||||
.qp-icon-Dynamic{background: url('qp_icons.png') -256px -32px }
|
||||
.qp-icon-EagerSpool{background: url('qp_icons.png') -192px -160px }
|
||||
.qp-icon-FetchQuery{background: url('qp_icons.png') -288px -32px }
|
||||
.qp-icon-Filter{background: url('qp_icons.png') -0px -64px }
|
||||
.qp-icon-GatherStreams{background: url('qp_icons.png') -32px -64px }
|
||||
.qp-icon-HashMatch{background: url('qp_icons.png') -64px -64px }
|
||||
.qp-icon-HashMatchRoot{background: url('qp_icons.png') -64px -64px }
|
||||
.qp-icon-HashMatchTeam{background: url('qp_icons.png') -64px -64px }
|
||||
.qp-icon-If{background: url('qp_icons.png') -96px -64px }
|
||||
.qp-icon-Insert{background: url('qp_icons.png') -0px -192px }
|
||||
.qp-icon-InsertedScan{background: url('qp_icons.png') -128px -64px }
|
||||
.qp-icon-Intrinsic{background: url('qp_icons.png') -160px -64px }
|
||||
.qp-icon-IteratorCatchall{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-Keyset{background: url('qp_icons.png') -192px -64px }
|
||||
.qp-icon-LanguageElementCatchall{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-LazySpool{background: url('qp_icons.png') -192px -160px }
|
||||
.qp-icon-LogRowScan{background: url('qp_icons.png') -224px -64px }
|
||||
.qp-icon-MergeInterval{background: url('qp_icons.png') -256px -64px }
|
||||
.qp-icon-MergeJoin{background: url('qp_icons.png') -288px -64px }
|
||||
.qp-icon-NestedLoops{background: url('qp_icons.png') -0px -96px }
|
||||
.qp-icon-NonclusteredIndexDelete{background: url('qp_icons.png') -32px -96px }
|
||||
.qp-icon-NonclusteredIndexInsert{background: url('qp_icons.png') -64px -96px }
|
||||
.qp-icon-IndexScan{background: url('qp_icons.png') -96px -96px }
|
||||
.qp-icon-IndexSeek{background: url('qp_icons.png') -128px -96px }
|
||||
.qp-icon-NonclusteredIndexSpool{background: url('qp_icons.png') -160px -96px }
|
||||
.qp-icon-NonclusteredIndexUpdate{background: url('qp_icons.png') -192px -96px }
|
||||
.qp-icon-OnlineIndexInsert{background: url('qp_icons.png') -224px -96px }
|
||||
.qp-icon-ParameterTableScan{background: url('qp_icons.png') -256px -96px }
|
||||
.qp-icon-PopulationQuery{background: url('qp_icons.png') -288px -96px }
|
||||
.qp-icon-RdiLookup{background: url('qp_icons.png') -0px -128px }
|
||||
.qp-icon-RefreshQuery{background: url('qp_icons.png') -32px -128px }
|
||||
.qp-icon-RemoteDelete{background: url('qp_icons.png') -64px -128px }
|
||||
.qp-icon-RemoteInsert{background: url('qp_icons.png') -96px -128px }
|
||||
.qp-icon-RemoteQuery{background: url('qp_icons.png') -128px -128px }
|
||||
.qp-icon-RemoteScan{background: url('qp_icons.png') -160px -128px }
|
||||
.qp-icon-RemoteUpdate{background: url('qp_icons.png') -192px -128px }
|
||||
.qp-icon-RepartitionStreams{background: url('qp_icons.png') -224px -128px }
|
||||
.qp-icon-Result{background: url('qp_icons.png') -256px -128px }
|
||||
.qp-icon-RowCountSpool{background: url('qp_icons.png') -288px -128px }
|
||||
.qp-icon-Segment{background: url('qp_icons.png') -0px -160px }
|
||||
.qp-icon-Sequence{background: url('qp_icons.png') -32px -160px }
|
||||
.qp-icon-Sequenceproject{background: url('qp_icons.png') -64px -160px }
|
||||
.qp-icon-Snapshot{background: url('qp_icons.png') -96px -160px }
|
||||
.qp-icon-Sort{background: url('qp_icons.png') -128px -160px }
|
||||
.qp-icon-Split{background: url('qp_icons.png') -160px -160px }
|
||||
.qp-icon-Spool{background: url('qp_icons.png') -192px -160px }
|
||||
.qp-icon-Statement{background: url('qp_icons.png') -256px -128px }
|
||||
.qp-icon-StreamAggregate{background: url('qp_icons.png') -224px -160px }
|
||||
.qp-icon-Switch{background: url('qp_icons.png') -256px -160px }
|
||||
.qp-icon-TableDelete{background: url('qp_icons.png') -288px -160px }
|
||||
.qp-icon-TableInsert{background: url('qp_icons.png') -0px -192px }
|
||||
.qp-icon-TableScan{background: url('qp_icons.png') -32px -192px }
|
||||
.qp-icon-TableSpool{background: url('qp_icons.png') -64px -192px }
|
||||
.qp-icon-TableUpdate{background: url('qp_icons.png') -96px -192px }
|
||||
.qp-icon-TableValuedFunction{background: url('qp_icons.png') -128px -192px }
|
||||
.qp-icon-Top{background: url('qp_icons.png') -160px -192px }
|
||||
.qp-icon-Udx{background: url('qp_icons.png') -192px -192px }
|
||||
.qp-icon-Update{background: url('qp_icons.png') -96px -192px }
|
||||
.qp-icon-While{background: url('qp_icons.png') -224px -192px }
|
||||
.qp-icon-PopulateQuery{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-StmtCursor{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-SequenceProject{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-FastForward{background: url('qp_icons.png') -96px -0px }
|
||||
.qp-icon-SnapShot{background: url('qp_icons.png') -96px -0px }
|
||||
|
||||
/* Layout - can't touch this */
|
||||
.qp-tt {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
white-space: normal;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
div.qp-node .qp-tt,
|
||||
.qp-noCssTooltip div.qp-node:hover .qp-tt {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.qp-node:hover .qp-tt {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.qp-tt table {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.qp-node {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.qp-tr {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.qp-tr>div {
|
||||
display: table-cell;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.qp-root {
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qp-root svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
BIN
src/sql/workbench/contrib/queryPlan/browser/media/qp_icons.png
Normal file
BIN
src/sql/workbench/contrib/queryPlan/browser/media/qp_icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@@ -0,0 +1,68 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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!./media/qp';
|
||||
|
||||
import { ElementRef, Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import * as QP from 'html-query-plan';
|
||||
|
||||
import { IQueryPlanParams, IBootstrapParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
|
||||
|
||||
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
|
||||
import { registerThemingParticipant, ICssStyleCollector, ITheme } from 'vs/platform/theme/common/themeService';
|
||||
import * as colors from 'vs/platform/theme/common/colorRegistry';
|
||||
|
||||
export const QUERYPLAN_SELECTOR: string = 'queryplan-component';
|
||||
|
||||
@Component({
|
||||
selector: QUERYPLAN_SELECTOR,
|
||||
template: `
|
||||
<div #container class="fullsize" style="overflow: scroll">
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class QueryPlanComponent implements OnDestroy, OnInit {
|
||||
|
||||
private _planXml: string;
|
||||
private _disposables: Array<IDisposable> = [];
|
||||
@ViewChild('container', { read: ElementRef }) _container: ElementRef;
|
||||
|
||||
constructor(
|
||||
@Inject(IBootstrapParams) private _params: IQueryPlanParams
|
||||
) { }
|
||||
|
||||
ngOnDestroy() {
|
||||
dispose(this._disposables);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this._params) {
|
||||
this.planXml = this._params.planXml;
|
||||
}
|
||||
this._disposables.push(registerThemingParticipant(this._updateTheme));
|
||||
}
|
||||
|
||||
public set planXml(val: string) {
|
||||
this._planXml = val;
|
||||
if (this._planXml) {
|
||||
QP.showPlan(this._container.nativeElement, this._planXml, {
|
||||
jsTooltips: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _updateTheme(theme: ITheme, collector: ICssStyleCollector) {
|
||||
let backgroundColor = theme.getColor(colors.editorBackground);
|
||||
let foregroundColor = theme.getColor(colors.editorForeground);
|
||||
|
||||
if (backgroundColor) {
|
||||
collector.addRule(`div.qp-node, .qp-tt, .qp-root { background-color: ${backgroundColor} }`);
|
||||
}
|
||||
|
||||
if (foregroundColor) {
|
||||
collector.addRule(`.qp-root { color: ${foregroundColor} }`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { QueryPlanInput } from 'sql/workbench/contrib/queryPlan/common/queryPlanInput';
|
||||
import { EditorDescriptor, IEditorRegistry, Extensions } from 'vs/workbench/browser/editor';
|
||||
import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
|
||||
import { Registry } from 'vs/platform/registry/common/platform';
|
||||
import { QueryPlanEditor } from 'sql/workbench/contrib/queryPlan/browser/queryPlanEditor';
|
||||
|
||||
// Query Plan editor registration
|
||||
|
||||
const queryPlanEditorDescriptor = new EditorDescriptor(
|
||||
QueryPlanEditor,
|
||||
QueryPlanEditor.ID,
|
||||
'QueryPlan'
|
||||
);
|
||||
|
||||
Registry.as<IEditorRegistry>(Extensions.Editors)
|
||||
.registerEditor(queryPlanEditorDescriptor, [new SyncDescriptor(QueryPlanInput)]);
|
||||
@@ -0,0 +1,51 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { NgModule, Inject, forwardRef, ApplicationRef, ComponentFactoryResolver, Type } from '@angular/core';
|
||||
import { APP_BASE_HREF, CommonModule } from '@angular/common';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { providerIterator } from 'sql/workbench/services/bootstrap/browser/bootstrapService';
|
||||
import { QueryPlanComponent } from 'sql/workbench/contrib/queryPlan/browser/queryPlan.component';
|
||||
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { IBootstrapParams, ISelector } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
|
||||
|
||||
// Connection Dashboard main angular module
|
||||
export const QueryPlanModule = (params: IBootstrapParams, selector: string, instantiationService: IInstantiationService): Type<any> => {
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
QueryPlanComponent
|
||||
],
|
||||
entryComponents: [QueryPlanComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
BrowserModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: APP_BASE_HREF, useValue: '/' },
|
||||
{ provide: IBootstrapParams, useValue: params },
|
||||
{ provide: ISelector, useValue: selector },
|
||||
...providerIterator(instantiationService)
|
||||
]
|
||||
})
|
||||
class ModuleClass {
|
||||
|
||||
constructor(
|
||||
@Inject(forwardRef(() => ComponentFactoryResolver)) private _resolver: ComponentFactoryResolver,
|
||||
@Inject(ISelector) private selector: string
|
||||
) {
|
||||
}
|
||||
|
||||
ngDoBootstrap(appRef: ApplicationRef) {
|
||||
const factory = this._resolver.resolveComponentFactory(QueryPlanComponent);
|
||||
(<any>factory).factory.selector = this.selector;
|
||||
appRef.bootstrap(factory);
|
||||
}
|
||||
}
|
||||
|
||||
return ModuleClass;
|
||||
};
|
||||
116
src/sql/workbench/contrib/queryPlan/browser/queryPlan.ts
Normal file
116
src/sql/workbench/contrib/queryPlan/browser/queryPlan.ts
Normal file
@@ -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 * as QP from 'html-query-plan';
|
||||
|
||||
import { IPanelView, IPanelTab } from 'sql/base/browser/ui/panel/panel';
|
||||
|
||||
import { Dimension, clearNode } from 'vs/base/browser/dom';
|
||||
import { localize } from 'vs/nls';
|
||||
import { dispose } from 'vs/base/common/lifecycle';
|
||||
import { QueryPlanState } from 'sql/workbench/contrib/queryPlan/common/queryPlanState';
|
||||
|
||||
export class QueryPlanTab implements IPanelTab {
|
||||
public readonly title = localize('queryPlanTitle', "Query Plan");
|
||||
public readonly identifier = 'QueryPlanTab';
|
||||
public readonly view: QueryPlanView;
|
||||
|
||||
constructor() {
|
||||
this.view = new QueryPlanView();
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
dispose(this.view);
|
||||
}
|
||||
|
||||
public clear() {
|
||||
this.view.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export class QueryPlanView implements IPanelView {
|
||||
private qp: QueryPlan;
|
||||
private xml: string;
|
||||
private container = document.createElement('div');
|
||||
private _state: QueryPlanState;
|
||||
|
||||
public render(container: HTMLElement): void {
|
||||
container.appendChild(this.container);
|
||||
this.container.style.overflow = 'scroll';
|
||||
if (!this.qp) {
|
||||
this.qp = new QueryPlan(this.container);
|
||||
if (this.xml) {
|
||||
this.qp.xml = this.xml;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.container.remove();
|
||||
this.qp = undefined;
|
||||
this.container = undefined;
|
||||
}
|
||||
|
||||
public layout(dimension: Dimension): void {
|
||||
this.container.style.width = dimension.width + 'px';
|
||||
this.container.style.height = dimension.height + 'px';
|
||||
}
|
||||
|
||||
public focus() {
|
||||
this.container.focus();
|
||||
}
|
||||
|
||||
public clear() {
|
||||
if (this.qp) {
|
||||
this.qp.xml = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
public showPlan(xml: string) {
|
||||
if (this.qp) {
|
||||
this.qp.xml = xml;
|
||||
} else {
|
||||
this.xml = xml;
|
||||
}
|
||||
if (this.state) {
|
||||
this.state.xml = xml;
|
||||
}
|
||||
}
|
||||
|
||||
public set state(val: QueryPlanState) {
|
||||
this._state = val;
|
||||
if (this.state.xml) {
|
||||
this.showPlan(this.state.xml);
|
||||
}
|
||||
}
|
||||
|
||||
public get state(): QueryPlanState {
|
||||
return this._state;
|
||||
}
|
||||
}
|
||||
|
||||
export class QueryPlan {
|
||||
private _xml: string;
|
||||
constructor(private container: HTMLElement) {
|
||||
}
|
||||
|
||||
public set xml(xml: string) {
|
||||
this._xml = xml;
|
||||
clearNode(this.container);
|
||||
if (this.xml) {
|
||||
QP.showPlan(this.container, this._xml, {
|
||||
jsTooltips: false
|
||||
});
|
||||
(<any>this.container.querySelectorAll('div.qp-tt')).forEach(toolTip => {
|
||||
toolTip.classList.add('monaco-editor');
|
||||
toolTip.classList.add('monaco-editor-hover');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public get xml(): string {
|
||||
return this._xml;
|
||||
}
|
||||
}
|
||||
116
src/sql/workbench/contrib/queryPlan/browser/queryPlanEditor.ts
Normal file
116
src/sql/workbench/contrib/queryPlan/browser/queryPlanEditor.ts
Normal file
@@ -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 * as DOM from 'vs/base/browser/dom';
|
||||
import { EditorOptions } from 'vs/workbench/common/editor';
|
||||
import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
|
||||
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { QueryPlanInput } from 'sql/workbench/contrib/queryPlan/common/queryPlanInput';
|
||||
import { QueryPlanModule } from 'sql/workbench/contrib/queryPlan/browser/queryPlan.module';
|
||||
import { bootstrapAngular } from 'sql/workbench/services/bootstrap/browser/bootstrapService';
|
||||
import { IQueryPlanParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
|
||||
import { QUERYPLAN_SELECTOR } from 'sql/workbench/contrib/queryPlan/browser/queryPlan.component';
|
||||
import { CancellationToken } from 'vs/base/common/cancellation';
|
||||
import { IStorageService } from 'vs/platform/storage/common/storage';
|
||||
|
||||
export class QueryPlanEditor extends BaseEditor {
|
||||
|
||||
public static ID: string = 'workbench.editor.queryplan';
|
||||
|
||||
constructor(
|
||||
@ITelemetryService telemetryService: ITelemetryService,
|
||||
@IThemeService themeService: IThemeService,
|
||||
@IInstantiationService private instantiationService: IInstantiationService,
|
||||
@IStorageService storageService: IStorageService
|
||||
) {
|
||||
super(QueryPlanEditor.ID, telemetryService, themeService, storageService);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called to create the editor in the parent element.
|
||||
*/
|
||||
public createEditor(parent: HTMLElement): void {
|
||||
//Enable scrollbars when drawing area is larger than viewport
|
||||
parent.style.overflow = 'auto';
|
||||
//Set background of parent to white (same as .qp-root from src\sql\parts\grid\load\css\qp.css)
|
||||
//This is because the bottom-most tooltips can extend past the drawing area, which causes the
|
||||
//scrolling area to have gaps on the bottom and left. So if the colors aren't matched then
|
||||
//these gaps show up as different colors and look bad.
|
||||
//Another option would be to check the tooltip positions and reposition them if necessary
|
||||
//during the load - but changing the background color was the simplest and least error prone
|
||||
//(plus it's probable that we won't be using this control in the future anyways if development)
|
||||
//continues on the Query plan feature
|
||||
parent.style.background = '#fff';
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets focus on this editor. Specifically, it sets the focus on the hosted text editor.
|
||||
*/
|
||||
public focus(): void {
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
|
||||
* To be called when the container of this editor changes size.
|
||||
*/
|
||||
public layout(dimension: DOM.Dimension): void {
|
||||
}
|
||||
|
||||
public async setInput(input: QueryPlanInput, options: EditorOptions): Promise<void> {
|
||||
if (this.input instanceof QueryPlanInput && this.input.matches(input)) {
|
||||
return Promise.resolve(undefined);
|
||||
}
|
||||
await input.resolve();
|
||||
if (!input.hasInitialized) {
|
||||
this.bootstrapAngular(input);
|
||||
}
|
||||
this.revealElementWithTagName(input.uniqueSelector, this.getContainer());
|
||||
|
||||
return super.setInput(input, options, CancellationToken.None);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reveal the child element with the given tagName and hide all other elements.
|
||||
*/
|
||||
private revealElementWithTagName(tagName: string, parent: HTMLElement): void {
|
||||
let elementToReveal: HTMLElement;
|
||||
|
||||
for (let i = 0; i < parent.children.length; i++) {
|
||||
let child: HTMLElement = <HTMLElement>parent.children[i];
|
||||
if (child.tagName && child.tagName.toLowerCase() === tagName && !elementToReveal) {
|
||||
elementToReveal = child;
|
||||
} else {
|
||||
child.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if (elementToReveal) {
|
||||
elementToReveal.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the angular components and record for this input that we have done so
|
||||
*/
|
||||
private bootstrapAngular(input: QueryPlanInput): void {
|
||||
// Get the bootstrap params and perform the bootstrap
|
||||
let params: IQueryPlanParams = {
|
||||
planXml: input.planXml
|
||||
};
|
||||
|
||||
let uniqueSelector = bootstrapAngular(this.instantiationService,
|
||||
QueryPlanModule,
|
||||
this.getContainer(),
|
||||
QUERYPLAN_SELECTOR,
|
||||
params);
|
||||
input.setUniqueSelector(uniqueSelector);
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
124
src/sql/workbench/contrib/queryPlan/browser/topOperations.ts
Normal file
124
src/sql/workbench/contrib/queryPlan/browser/topOperations.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { Dimension } from 'vs/base/browser/dom';
|
||||
import { localize } from 'vs/nls';
|
||||
import { Disposable } from 'vs/base/common/lifecycle';
|
||||
|
||||
import { Table } from 'sql/base/browser/ui/table/table';
|
||||
import { PlanXmlParser } from 'sql/workbench/contrib/queryPlan/common/planXmlParser';
|
||||
import { IPanelView, IPanelTab } from 'sql/base/browser/ui/panel/panel';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { attachTableStyler } from 'sql/platform/theme/common/styler';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
|
||||
import { TopOperationsState } from 'sql/workbench/contrib/queryPlan/common/topOperationsState';
|
||||
|
||||
const topOperationColumns: Array<Slick.Column<any>> = [
|
||||
{ name: localize('topOperations.operation', "Operation"), field: 'operation', sortable: true },
|
||||
{ name: localize('topOperations.object', "Object"), field: 'object', sortable: true },
|
||||
{ name: localize('topOperations.estCost', "Est Cost"), field: 'estCost', sortable: true },
|
||||
{ name: localize('topOperations.estSubtreeCost', "Est Subtree Cost"), field: 'estSubtreeCost', sortable: true },
|
||||
{ name: localize('topOperations.actualRows', "Actual Rows"), field: 'actualRows', sortable: true },
|
||||
{ name: localize('topOperations.estRows', "Est Rows"), field: 'estRows', sortable: true },
|
||||
{ name: localize('topOperations.actualExecutions', "Actual Executions"), field: 'actualExecutions', sortable: true },
|
||||
{ name: localize('topOperations.estCPUCost', "Est CPU Cost"), field: 'estCPUCost', sortable: true },
|
||||
{ name: localize('topOperations.estIOCost', "Est IO Cost"), field: 'estIOCost', sortable: true },
|
||||
{ name: localize('topOperations.parallel', "Parallel"), field: 'parallel', sortable: true },
|
||||
{ name: localize('topOperations.actualRebinds', "Actual Rebinds"), field: 'actualRebinds', sortable: true },
|
||||
{ name: localize('topOperations.estRebinds', "Est Rebinds"), field: 'estRebinds', sortable: true },
|
||||
{ name: localize('topOperations.actualRewinds', "Actual Rewinds"), field: 'actualRewinds', sortable: true },
|
||||
{ name: localize('topOperations.estRewinds', "Est Rewinds"), field: 'estRewinds', sortable: true },
|
||||
{ name: localize('topOperations.partitioned', "Partitioned"), field: 'partitioned', sortable: true }
|
||||
];
|
||||
|
||||
export class TopOperationsTab extends Disposable implements IPanelTab {
|
||||
public readonly title = localize('topOperationsTitle', "Top Operations");
|
||||
public readonly identifier = 'TopOperationsTab';
|
||||
public readonly view: TopOperationsView;
|
||||
|
||||
constructor(@IInstantiationService instantiationService: IInstantiationService) {
|
||||
super();
|
||||
this.view = this._register(instantiationService.createInstance(TopOperationsView));
|
||||
}
|
||||
|
||||
public clear() {
|
||||
this.view.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export class TopOperationsView extends Disposable implements IPanelView {
|
||||
private _state: TopOperationsState;
|
||||
private table: Table<any>;
|
||||
private container = document.createElement('div');
|
||||
private dataView = new TableDataView();
|
||||
|
||||
constructor(@IThemeService private themeService: IThemeService) {
|
||||
super();
|
||||
this.table = new Table(this.container, {
|
||||
columns: topOperationColumns,
|
||||
dataProvider: this.dataView,
|
||||
sorter: (args) => {
|
||||
this.dataView.sort(args);
|
||||
}
|
||||
});
|
||||
this._register(this.table);
|
||||
this._register(attachTableStyler(this.table, this.themeService));
|
||||
}
|
||||
|
||||
public render(container: HTMLElement): void {
|
||||
container.appendChild(this.container);
|
||||
}
|
||||
|
||||
public layout(dimension: Dimension): void {
|
||||
this.table.layout(dimension);
|
||||
}
|
||||
|
||||
public focus(): void {
|
||||
this.table.focus();
|
||||
}
|
||||
|
||||
public clear() {
|
||||
this.dataView.clear();
|
||||
}
|
||||
|
||||
public showPlan(xml: string) {
|
||||
this.state.xml = xml;
|
||||
this.dataView.clear();
|
||||
let parser = new PlanXmlParser(xml);
|
||||
let operations = parser.topOperations;
|
||||
let data = operations.map(i => {
|
||||
return {
|
||||
operation: i.title,
|
||||
object: i.indexObject.title,
|
||||
estCost: i.estimatedOperatorCost,
|
||||
estSubtreeCost: i.subtreeCost,
|
||||
actualRows: i.runtimeInfo.actualRows,
|
||||
estRows: i.estimateRows,
|
||||
actualExecutions: i.runtimeInfo.actualExecutions,
|
||||
estCPUCost: i.estimateCpu,
|
||||
estIOCost: i.estimateIo,
|
||||
parallel: i.parallel,
|
||||
actualRebinds: '',
|
||||
estRebinds: i.estimateRebinds,
|
||||
actualRewinds: '',
|
||||
estRewinds: i.estimateRewinds,
|
||||
partitioned: i.partitioned
|
||||
};
|
||||
});
|
||||
this.dataView.push(data);
|
||||
}
|
||||
|
||||
public set state(val: TopOperationsState) {
|
||||
this._state = val;
|
||||
if (this.state.xml) {
|
||||
this.showPlan(this.state.xml);
|
||||
}
|
||||
}
|
||||
|
||||
public get state(): TopOperationsState {
|
||||
return this._state;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user