Agent: Scrolling (#3427)

* 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

src/sql/parts/jobManagement/views/jobHistory.component.html

@@ -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%">
+		<div #jobsteps style="flex: 1 1 auto; position: relative">
-			<jobstepsview-component *ngIf="showSteps === true"></jobstepsview-component>
+			<jobstepsview-component *ngIf="showSteps === true" style="position: absolute; height: 100%; width: 100%"></jobstepsview-component>
 		</div>
 		<h3 *ngIf="showSteps === false">No Steps Available</h3>
 	</div>

src/sql/parts/jobManagement/views/jobHistory.component.ts

@@ -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);
+				this._tree.layout(dom.getContentHeight(this._tableContainer.nativeElement));
-			}
-
-			if (this._jobStepsView) {
-				let element = this._jobStepsView.nativeElement as HTMLElement;
-				if (element) {
-					element.style.height = height + 'px';
-				}
 			}
 		}
 	}

src/sql/parts/jobManagement/views/jobHistory.css

@@ -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%;
+	flex-direction: column;
-	width: 90%;
+	width: 100%;
-	overflow-y: scroll;
 }
 
 .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 {
+.step-table {
-	white-space: normal;
+	flex: 1 1 auto;
-	min-height: 40px !important;
 }
 
-jobhistory-component .jobhistory-heading-container {
+.prev-run-list-container {
-	display: -webkit-box;
+	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;
-}
+}

src/sql/parts/jobManagement/views/jobStepsView.component.html

@@ -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>

src/sql/parts/jobManagement/views/jobStepsView.component.ts

@@ -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);
+		}
 	}
 }
 

src/sql/parts/jobManagement/views/jobStepsView.css

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

src/sql/parts/jobManagement/views/jobStepsViewTree.ts

@@ -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);