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

Agent: Scrolling (#3427)

Browse Source 
* change height calcs to proper tree height

* agent fixes

* fit step tree

* fix rendering issue

* fixed spinning wheel position

* added horizontal scrolling to steps tree

* removed typo
This commit is contained in:
Aditya Bist
2018-12-05 10:16:39 -08:00
committed by GitHub
parent 07069a64ae
commit 971b5111e7
7 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/sql/parts/jobManagement/views/jobHistory.component.html
View File

@@ -77,7 +77,7 @@
<!-- Job History details -->
<div class='history-details'>
<!-- Previous run list -->
<div class="prev-run-list-container" style="min-width: 275px; height: 75vh">
<div class="prev-run-list-container" style="min-width: 250px">
<table *ngIf="_showPreviousRuns === true">
<tr>
<td class="date-column">
@@ -89,7 +89,9 @@
</tr>
</table>
<h3 *ngIf="_showPreviousRuns === false" style="text-align: center">No Previous Runs Available</h3>
<div #table class="step-table prev-run-list" style="position: relative; height: 100%; width: 100%"></div>
<div class="step-table prev-run-list" style="position: relative; width: 100%">
<div #table style="position: absolute; width: 100%; height: 100%"></div>
</div>
</div>
<!-- Job Steps -->
<div class="job-steps" id="job-steps">
@@ -154,8 +156,8 @@
</td>
</tr>
</table>
<div #jobsteps style="height: 100%">
<jobstepsview-component *ngIf="showSteps === true"></jobstepsview-component>
<div #jobsteps style="flex: 1 1 auto; position: relative">
<jobstepsview-component *ngIf="showSteps === true" style="position: absolute; height: 100%; width: 100%"></jobstepsview-component>
</div>
<h3 *ngIf="showSteps === false">No Steps Available</h3>
</div>

14
src/sql/parts/jobManagement/views/jobHistory.component.ts
View File

@@ -23,7 +23,6 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { INotificationService } from 'vs/platform/notification/common/notification';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
@@ -141,9 +140,8 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
renderer: this._treeRenderer
}, {verticalScrollMode: ScrollbarVisibility.Visible});
this._register(attachListStyler(this._tree, this.themeService));
this._tree.layout(JobHistoryComponent.INITIAL_TREE_HEIGHT);
this._tree.layout(dom.getContentHeight(this._tableContainer.nativeElement));
this.initActionBar();
}
private loadHistory() {
@@ -293,6 +291,7 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
if (historyDetails && statusBar) {
let historyBottom = historyDetails.getBoundingClientRect().bottom;
let statusTop = statusBar.getBoundingClientRect().top;
let height: number = statusTop - historyBottom - JobHistoryComponent.HEADING_HEIGHT;
if (this._table) {
@@ -302,14 +301,7 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
}
if (this._tree) {
this._tree.layout(height);
}
if (this._jobStepsView) {
let element = this._jobStepsView.nativeElement as HTMLElement;
if (element) {
element.style.height = height + 'px';
}
this._tree.layout(dom.getContentHeight(this._tableContainer.nativeElement));
}
}
}

31
src/sql/parts/jobManagement/views/jobHistory.css
View File

@@ -177,17 +177,17 @@ table.step-list tr.step-row td {
}
.history-details {
height: 100%;
flex: 1 1 auto;
display: flex;
}
.history-details > .job-steps {
display: block;
flex: 1 1 auto;
display: flex;
border-left: 3px solid #f4f4f4;
padding-left: 10px;
height: 100%;
width: 90%;
overflow-y: scroll;
flex-direction: column;
width: 100%;
}
.vs-dark .history-details > .job-steps {
@@ -241,13 +241,22 @@ table.step-list tr.step-row td {
width: 140px;
}
.steps-tree .monaco-tree .monaco-tree-row {
white-space: normal;
min-height: 40px !important;
.step-table {
flex: 1 1 auto;
}
jobhistory-component .jobhistory-heading-container {
display: -webkit-box;
.prev-run-list-container {
display: flex;
flex-direction: column;
}
jobhistory-component {
display: flex;
flex-direction: column;
}
jobhistory-component > .jobhistory-heading-container {
display: flex;
}
jobhistory-component > .jobhistory-heading-container > .icon.in-progress {
@@ -267,4 +276,4 @@ jobhistory-component > .agent-actionbar-container .monaco-action-bar > ul.action
.hc-black jobhistory-component > .agent-actionbar-container .monaco-action-bar > ul.actions-container {
border-top: 3px solid #2b56f2;
}
}

4
src/sql/parts/jobManagement/views/jobStepsView.component.html
View File

@@ -22,4 +22,6 @@
</td>
</tr>
</table>
<div class='steps-tree' #table style="height: 100%; width: 100%"></div>
<div class='steps-tree' style="flex: 1 1 auto; position: relative">
<div #table style="position: absolute; height: 100%; width: 100%" ></div>
</div>

21
src/sql/parts/jobManagement/views/jobStepsView.component.ts
View File

@@ -5,6 +5,7 @@
import 'vs/css!./jobStepsView';
import * as dom from 'vs/base/browser/dom';
import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, Injectable, AfterContentChecked } from '@angular/core';
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
@@ -20,7 +21,6 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
export const JOBSTEPSVIEW_SELECTOR: string = 'jobstepsview-component';
@@ -36,7 +36,6 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
private _treeDataSource = new JobStepsViewDataSource();
private _treeRenderer = new JobStepsViewRenderer();
private _treeFilter = new JobStepsViewFilter();
private _pageSize = 1024;
@ViewChild('table') private _tableContainer: ElementRef;
@@ -57,17 +56,8 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
ngAfterContentChecked() {
if (this._jobHistoryComponent.stepRows.length > 0) {
this._treeDataSource.data = this._jobHistoryComponent.stepRows;
if (!this._tree) {
this._tree = new Tree(this._tableContainer.nativeElement, {
controller: this._treeController,
dataSource: this._treeDataSource,
filter: this._treeFilter,
renderer: this._treeRenderer
}, { verticalScrollMode: ScrollbarVisibility.Visible });
this._register(attachListStyler(this._tree, this.themeService));
}
this._tree.layout(this._pageSize);
this._tree.setInput(new JobStepsViewModel());
this.layout();
$('jobstepsview-component .steps-tree .monaco-tree').attr('tabIndex', '-1');
$('jobstepsview-component .steps-tree .monaco-tree-row').attr('tabIndex', '0');
}
@@ -79,7 +69,8 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
dataSource: this._treeDataSource,
filter: this._treeFilter,
renderer: this._treeRenderer
}, {verticalScrollMode: ScrollbarVisibility.Visible});
}, {verticalScrollMode: ScrollbarVisibility.Visible, horizontalScrollMode: ScrollbarVisibility.Visible });
this.layout();
this._register(attachListStyler(this._tree, this.themeService));
}
@@ -87,6 +78,10 @@ export class JobStepsViewComponent extends JobManagementView implements OnInit,
}
public layout() {
if (this._tree) {
let treeheight = dom.getContentHeight(this._tableContainer.nativeElement);
this._tree.layout(treeheight);
}
}
}

5
src/sql/parts/jobManagement/views/jobStepsView.css
View File

@@ -78,5 +78,6 @@
}
jobstepsview-component {
padding-top: 10px;
}
display: flex;
flex-direction: column;
}

4
src/sql/parts/jobManagement/views/jobStepsViewTree.ts
View File

@@ -5,6 +5,7 @@
import * as DOM from 'vs/base/browser/dom';
import { $ } from 'vs/base/browser/builder';
import * as tree from 'vs/base/parts/tree/browser/tree';
import * as TreeDefaults from 'vs/base/parts/tree/browser/treeDefaults';
import { Promise, TPromise } from 'vs/base/common/winjs.base';
@@ -86,7 +87,7 @@ export class JobStepsViewRenderer implements tree.IRenderer {
private _statusIcon: HTMLElement;
public getHeight(tree: tree.ITree, element: JobStepsViewRow): number {
return 22 * Math.ceil(element.message.length/JobManagementUtilities.jobMessageLength);
return 40;
}
public getTemplateId(tree: tree.ITree, element: JobStepsViewRow | JobStepsViewModel): string {
@@ -118,6 +119,7 @@ export class JobStepsViewRenderer implements tree.IRenderer {
let stepMessageCol: HTMLElement = DOM.$('div');
stepMessageCol.className = 'tree-message-col';
stepMessageCol.innerText = element.message;
$(templateData.label).empty();
templateData.label.appendChild(stepIdCol);
templateData.label.appendChild(stepNameCol);
templateData.label.appendChild(stepMessageCol);