diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.html b/src/sql/parts/jobManagement/views/jobHistory.component.html index e1bc3c38df..3aaef5cb8c 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.html +++ b/src/sql/parts/jobManagement/views/jobHistory.component.html @@ -77,7 +77,7 @@
-
+
@@ -89,7 +89,9 @@

No Previous Runs Available

-
+
+
+
@@ -154,8 +156,8 @@ -
- +
+

No Steps Available

diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.ts b/src/sql/parts/jobManagement/views/jobHistory.component.ts index f5b7fe33df..1d2aef7f52 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.ts +++ b/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); - } - - 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)); } } } diff --git a/src/sql/parts/jobManagement/views/jobHistory.css b/src/sql/parts/jobManagement/views/jobHistory.css index 3f100393a6..ab68b21412 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.css +++ b/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%; - 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; -} +} \ No newline at end of file diff --git a/src/sql/parts/jobManagement/views/jobStepsView.component.html b/src/sql/parts/jobManagement/views/jobStepsView.component.html index e33afdd7a6..2ed7bad2db 100644 --- a/src/sql/parts/jobManagement/views/jobStepsView.component.html +++ b/src/sql/parts/jobManagement/views/jobStepsView.component.html @@ -22,4 +22,6 @@ -
\ No newline at end of file +
+
+
diff --git a/src/sql/parts/jobManagement/views/jobStepsView.component.ts b/src/sql/parts/jobManagement/views/jobStepsView.component.ts index 7a92babbc0..bcf2b6597d 100644 --- a/src/sql/parts/jobManagement/views/jobStepsView.component.ts +++ b/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); + } } } diff --git a/src/sql/parts/jobManagement/views/jobStepsView.css b/src/sql/parts/jobManagement/views/jobStepsView.css index 7daeccfaee..15a84c81da 100644 --- a/src/sql/parts/jobManagement/views/jobStepsView.css +++ b/src/sql/parts/jobManagement/views/jobStepsView.css @@ -78,5 +78,6 @@ } jobstepsview-component { - padding-top: 10px; -} \ No newline at end of file + display: flex; + flex-direction: column; +} diff --git a/src/sql/parts/jobManagement/views/jobStepsViewTree.ts b/src/sql/parts/jobManagement/views/jobStepsViewTree.ts index ac03318b61..e9bbc8b193 100644 --- a/src/sql/parts/jobManagement/views/jobStepsViewTree.ts +++ b/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);