ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-30 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

Change angular panel display behavior (#1344)

Browse Source 
* got it working

* remove unneeded code

* formatting

* added scrollable, dashboard tabs don't scroll correctly though

* fix all bugs I could find

* address comments
This commit is contained in:
Anthony Dresser
2018-05-10 09:27:41 -07:00
committed by GitHub
parent f4cfb4a5ef
commit 23ec6ac567
30 changed files with 282 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/sql/parts/query/views/queryOutput.component.html
View File

@@ -6,28 +6,36 @@
-->
<panel class="fullsize" [options]="panelOpt">
<tab [title]="queryComponentTitle" class="fullsize" [identifier]="resultsTabIdentifier">
<div id="queryDiv" class="fullsize">
<query-component id="queryComp" #queryComponent class="fullsize" [queryParameters]="queryParameters"></query-component>
</div>
<tab [visibilityType]="'visibility'" [title]="queryComponentTitle" class="fullsize" [identifier]="resultsTabIdentifier">
<ng-template>
<div id="queryDiv" class="fullsize">
<query-component id="queryComp" class="fullsize" [queryParameters]="queryParameters"></query-component>
</div>
</ng-template>
</tab>
<tab *ngIf="hasQueryPlan" [title]="queryPlanTitle" [identifier]="queryPlanTabIdentifier">
<div id="queryPlanDiv" class="headersVisible fullsize" style=" overflow: auto; margin-left: 2px">
<queryplan-component #queryPlanComponent class="fullsize" style="display: block"></queryplan-component>
</div>
<tab *ngIf="hasQueryPlan" [visibilityType]="'visibility'" [title]="queryPlanTitle" [identifier]="queryPlanTabIdentifier">
<ng-template>
<div id="queryPlanDiv" class="headersVisible fullsize" style=" overflow: auto; margin-left: 2px">
<queryplan-component class="fullsize" style="display: block"></queryplan-component>
</div>
</ng-template>
</tab>
<tab *ngIf="hasQueryPlan" class="fullsize" [title]="topOperationsTitle">
<div id="topOperationsDiv" class="fullsize">
<top-operations-component #topOperationsComponent class="fullsize" style="display: block" [queryParameters]="queryParameters"></top-operations-component>
</div>
<tab *ngIf="hasQueryPlan" [visibilityType]="'visibility'" class="fullsize" [title]="topOperationsTitle">
<ng-template>
<div id="topOperationsDiv" class="fullsize">
<top-operations-component class="fullsize" style="display: block" [queryParameters]="queryParameters"></top-operations-component>
</div>
</ng-template>
</tab>
<tab *ngIf="showChartView" [title]="chartViewerTitle" [identifier]="chartViewerTabIdentifier">
<div id="chartViewerDiv" class="headersVisible fullsize" >
<chart-viewer #chartViewerComponent class="fullsize" style="display: block">
</chart-viewer>
</div>
<tab *ngIf="showChartView" [visibilityType]="'visibility'" [title]="chartViewerTitle" [identifier]="chartViewerTabIdentifier">
<ng-template>
<div id="chartViewerDiv" class="headersVisible fullsize" >
<chart-viewer [dataSet]="activeDataSet" class="fullsize" style="display: block">
</chart-viewer>
</div>
</ng-template>
</tab>
</panel>

18
src/sql/parts/query/views/queryOutput.component.ts
View File

@@ -32,18 +32,16 @@ declare type PaneType = 'messages' | 'results';
selector: QUERY_OUTPUT_SELECTOR,
templateUrl: decodeURI(require.toUrl('sql/parts/query/views/queryOutput.component.html'))
})
export class QueryOutputComponent implements OnInit, OnDestroy {
export class QueryOutputComponent implements OnDestroy {
@ViewChild('queryComponent') queryComponent: QueryComponent;
@ViewChild('queryPlanComponent') queryPlanComponent: QueryPlanComponent;
@ViewChild('topOperationsComponent') topOperationsComponent: TopOperationsComponent;
@ViewChild('chartViewerComponent') chartViewerComponent: ChartViewerComponent;
@ViewChild(QueryComponent) queryComponent: QueryComponent;
@ViewChild(QueryPlanComponent) queryPlanComponent: QueryPlanComponent;
@ViewChild(TopOperationsComponent) topOperationsComponent: TopOperationsComponent;
@ViewChild(PanelComponent) private _panel: PanelComponent;
private activeDataSet: any;
// tslint:disable:no-unused-variable
private readonly queryComponentTitle: string = nls.localize('results', 'Results');
private readonly queryPlanTitle: string = nls.localize('queryPlan', 'Query Plan');
@@ -78,7 +76,7 @@ export class QueryOutputComponent implements OnInit, OnDestroy {
/**
* Called by Angular when the object is initialized
*/
public ngOnInit(): void {
public ngAfterViewInit(): void {
this._disposables.push(toDisposableSubscription(this.queryComponent.queryPlanAvailable.subscribe((xml) => {
this.hasQueryPlan = true;
this._cd.detectChanges();
@@ -90,7 +88,7 @@ export class QueryOutputComponent implements OnInit, OnDestroy {
this._disposables.push(toDisposableSubscription(this.queryComponent.showChartRequested.subscribe((dataSet) => {
this.showChartView = true;
this._cd.detectChanges();
this.chartViewerComponent.dataSet = dataSet;
this.activeDataSet = dataSet;
this._panel.selectTab(this.chartViewerTabIdentifier);
})));