Handle resize message in Agent dashboard tab (#1908)

* Resize related changes WIP

* Resize table control better on resize

* Update DashboardTab to use inherited Disposable

* Set forceFitColumns to false

src/sql/base/browser/ui/panel/tab.component.ts

@@ -5,8 +5,9 @@
 import { Component, Input, ContentChild, OnDestroy, TemplateRef, ChangeDetectorRef, forwardRef, Inject } from '@angular/core';
 
 import { Action } from 'vs/base/common/actions';
+import { Disposable } from 'vs/base/common/lifecycle';
 
-export abstract class TabChild {
+export abstract class TabChild extends Disposable {
 	public abstract layout(): void;
 }
 
@@ -19,7 +20,7 @@ export abstract class TabChild {
 	`
 })
 export class TabComponent implements OnDestroy {
-	@ContentChild(TabChild) private _child: TabChild;
+	private _child: TabChild;
 	@ContentChild(TemplateRef) templateRef;
 	@Input() public title: string;
 	@Input() public canClose: boolean;
@@ -31,6 +32,14 @@ export class TabComponent implements OnDestroy {
 	private rendered = false;
 	private destroyed: boolean = false;
 
+
+	@ContentChild(TabChild) private set child(tab: TabChild) {
+		this._child = tab;
+		if (this.active && this._child) {
+			this._child.layout();
+		}
+	}
+
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
 	) { }
@@ -78,6 +87,8 @@ export class TabComponent implements OnDestroy {
 	}
 
 	public layout() {
+		if (this._child) {
 			this._child.layout();
 		}
 	}
+}

src/sql/base/browser/ui/table/media/table.css

@@ -84,7 +84,7 @@
 {
     border: 1px solid #BFBDBD;
     font-size: 8pt;
-    height: 400px;
+    height: 250px;
     margin-top: 6px;
     overflow: scroll;
     padding: 4px;

src/sql/parts/dashboard/common/interfaces.ts

@@ -32,22 +32,10 @@ export abstract class DashboardTab extends TabChild implements OnDestroy {
 	public enableEdit(): void {
 		// no op
 	}
-
-	private _toDispose: IDisposable[] = [];
-
 	constructor() {
 		super();
 	}
 
-	public dispose(): void {
-		this._toDispose = dispose(this._toDispose);
-	}
-
-	protected _register<T extends IDisposable>(t: T): T {
-		this._toDispose.push(t);
-		return t;
-	}
-
 	ngOnDestroy() {
 		this.dispose();
 	}

src/sql/parts/dashboard/dashboardEditor.ts

@@ -71,6 +71,7 @@ export class DashboardEditor extends BaseEditor {
 	 * To be called when the container of this editor changes size.
 	 */
 	public layout(dimension: DOM.Dimension): void {
+		this._dashboardService.layout(dimension);
 	}
 
 	public setInput(input: DashboardInput, options: EditorOptions): TPromise<void> {

src/sql/parts/jobManagement/agent/agentView.component.ts

@@ -11,6 +11,7 @@ import { Component, Inject, forwardRef, ChangeDetectorRef, ViewChild, Injectable
 import { AgentJobInfo } from 'sqlops';
 import { PanelComponent, IPanelOptions, NavigationBarLayout } from 'sql/base/browser/ui/panel/panel.component';
 import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
+import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 
 
 export const DASHBOARD_SELECTOR: string = 'agentview-component';
@@ -49,7 +50,8 @@ export class AgentViewComponent {
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef,
-		@Inject(IJobManagementService) jobManagementService: IJobManagementService) {
+		@Inject(IJobManagementService) jobManagementService: IJobManagementService,
+		@Inject(IDashboardService) dashboardService: IDashboardService,) {
 		this._expanded = new Map<string, string>();
 
 		let self = this;

src/sql/parts/jobManagement/common/media/jobs.css

@@ -32,23 +32,11 @@ jobhistory-component {
 }
 
 .jobview-grid {
-    height: 94.7%;
+    height: calc(100% - 75px);
 	width : 100%;
     display: block;
 }
 
-.vs-dark #jobsDiv .slick-header-column {
-	background: #333333 !important;
-}
-
-#jobsDiv .slick-header-column {
-	background-color: transparent !important;
-	background: white !important;
-    border: 0px !important;
-    font-weight: bold;
-    font-size: larger;
-}
-
 .vs-dark #agentViewDiv .slick-header-column {
 	background: #333333 !important;
 }
@@ -58,7 +46,6 @@ jobhistory-component {
 	background: white !important;
     border: 0px !important;
     font-weight: bold;
-    font-size: larger;
 }
 
 .vs-dark #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
@@ -164,7 +151,7 @@ jobhistory-component {
 }
 
 #jobsDiv .preload {
-  font-size: 18px;
+  font-size: 13px;
 }
 
 #jobsDiv .dynamic-cell-detail > :first-child {
@@ -299,19 +286,20 @@ table.jobprevruns > tbody {
 
 
 #alertsDiv .jobalertsview-grid {
-    height: 94.7%;
+    height: calc(100% - 75px);
 	width : 100%;
     display: block;
 }
 
 #operatorsDiv .joboperatorsview-grid {
-    height: 94.7%;
+    height: calc(100% - 75px);
 	width : 100%;
     display: block;
+    overflow: scroll;
 }
 
 #proxiesDiv .jobproxiesview-grid {
-    height: 94.7%;
+    height: calc(100% - 75px);
 	width : 100%;
     display: block;
 }

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

@@ -12,4 +12,4 @@
 
 <div #actionbarContainer class="actionbar-container"></div>
 
-<div #jobalertsgrid class="jobview-grid"></div>
+<div #jobalertsgrid class="jobalertsview-grid"></div>

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

@@ -29,6 +29,7 @@ import { IAction } from 'vs/base/common/actions';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 
 export const VIEW_SELECTOR: string = 'jobalertsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -73,8 +74,9 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
 		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
-		@Inject(IKeybindingService)  keybindingService: IKeybindingService) {
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService,
-		super(commonService, contextMenuService, keybindingService, instantiationService);
+		@Inject(IDashboardService) _dashboardService: IDashboardService) {
+		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
@@ -85,7 +87,14 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
 	 }
 
 	public layout() {
-		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
+		let height = dom.getContentHeight(this._gridEl.nativeElement) - 10;
+		if (height < 0) {
+			height = 0;
+		}
+
+		this._table.layout(new dom.Dimension(
+			dom.getContentWidth(this._gridEl.nativeElement),
+			height));
 	}
 
 	onFirstVisible() {

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

@@ -16,8 +16,10 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Taskbar } from '../../../base/browser/ui/taskbar/taskbar';
 import { JobsRefreshAction } from 'sql/parts/jobManagement/common/jobActions';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
+import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 
-export abstract class JobManagementView extends Disposable implements AfterContentChecked {
+export abstract class JobManagementView extends TabChild implements AfterContentChecked {
 	protected isVisible: boolean = false;
 	protected isInitialized: boolean = false;
 	protected isRefreshing: boolean = false;
@@ -32,10 +34,16 @@ export abstract class JobManagementView extends Disposable implements AfterConte
 
 	constructor(
 		protected _commonService: CommonServiceInterface,
+		protected _dashboardService: IDashboardService,
 		protected _contextMenuService: IContextMenuService,
 		protected _keybindingService: IKeybindingService,
 		protected _instantiationService: IInstantiationService) {
 		super();
+
+		let self = this;
+		this._dashboardService.onLayout((d) => {
+			self.layout();
+		});
 	}
 
 	ngAfterContentChecked() {

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

@@ -34,6 +34,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IAction } from 'vs/base/common/actions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 
 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -99,8 +100,9 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
 		@Inject(IKeybindingService)  keybindingService: IKeybindingService,
+		@Inject(IDashboardService) _dashboardService: IDashboardService
 	) {
-		super(commonService, contextMenuService, keybindingService, instantiationService);
+		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService);
 		let jobCacheObjectMap = this._jobManagementService.jobCacheObjectMap;
 		this._serverName = commonService.connectionManagementService.connectionInfo.connectionProfile.serverName;
 		let jobCache = jobCacheObjectMap[this._serverName];
@@ -121,7 +123,15 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 	}
 
 	public layout() {
-		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
+		let jobsViewToolbar = $('jobsview-component .actionbar-container').get(0);
+		let statusBar = $('.part.statusbar').get(0);
+		if (jobsViewToolbar && statusBar) {
+			let toolbarBottom = jobsViewToolbar.getBoundingClientRect().bottom;
+			let statusTop = statusBar.getBoundingClientRect().top;
+			this._table.layout(new dom.Dimension(
+				dom.getContentWidth(this._gridEl.nativeElement),
+				statusTop - toolbarBottom));
+		}
 	}
 
 	onFirstVisible() {
@@ -141,7 +151,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 			enableColumnReorder: false,
 			rowHeight: ROW_HEIGHT,
 			enableCellNavigation: true,
-			forceFitColumns: true
+			forceFitColumns: false
 		};
 
 		this.dataView = new Slick.Data.DataView({ inlineFilters: false });
@@ -328,7 +338,6 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		this.dataView.beginUpdate();
 		this.dataView.setItems(jobViews);
 		this.dataView.setFilter((item) => this.filter(item));
-
 		this.dataView.endUpdate();
 		this._table.autosizeColumns();
 		this._table.resizeCanvas();
@@ -341,17 +350,6 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 		});
 
 		const self = this;
-		$(window).resize(() => {
-			let jobsViewToolbar = $('jobsview-component .actionbar-container').get(0);
-			let statusBar = $('.part.statusbar').get(0);
-			if (jobsViewToolbar && statusBar) {
-				let toolbarBottom = jobsViewToolbar.getBoundingClientRect().bottom;
-				let statusTop = statusBar.getBoundingClientRect().top;
-				$('agentview-component #jobsDiv .jobview-grid').css('height', statusTop - toolbarBottom);
-				self._table.resizeCanvas();
-			}
-		});
-
 		this._table.grid.onColumnsResized.subscribe((e, data: any) => {
 			let nameWidth: number = data.grid.getColumnWidths()[1];
 			// adjust job name when resized

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

@@ -29,6 +29,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IAction } from 'vs/base/common/actions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 
 export const VIEW_SELECTOR: string = 'joboperatorsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -73,9 +74,10 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
 		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
-		@Inject(IKeybindingService)  keybindingService: IKeybindingService
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService,
+		@Inject(IDashboardService) _dashboardService: IDashboardService
 	) {
-		super(commonService, contextMenuService, keybindingService, instantiationService);
+		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
@@ -86,7 +88,14 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
 	}
 
 	public layout() {
-		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
+		let height = dom.getContentHeight(this._gridEl.nativeElement) - 10;
+		if (height < 0) {
+			height = 0;
+		}
+
+		this._table.layout(new dom.Dimension(
+			dom.getContentWidth(this._gridEl.nativeElement),
+			height));
 	}
 
 	onFirstVisible() {

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

@@ -29,6 +29,7 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import { IAction } from 'vs/base/common/actions';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IDashboardService } from 'sql/services/dashboard/common/dashboardService';
 
 export const VIEW_SELECTOR: string = 'jobproxiesview-component';
 export const ROW_HEIGHT: number = 45;
@@ -75,9 +76,10 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
 		@Inject(IInstantiationService) instantiationService: IInstantiationService,
 		@Inject(forwardRef(() => CommonServiceInterface)) commonService: CommonServiceInterface,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
-		@Inject(IKeybindingService)  keybindingService: IKeybindingService
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService,
+		@Inject(IDashboardService) _dashboardService: IDashboardService
 	) {
-		super(commonService, contextMenuService, keybindingService, instantiationService);
+		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
@@ -88,7 +90,14 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
 	}
 
 	public layout() {
-		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
+		let height = dom.getContentHeight(this._gridEl.nativeElement) - 10;
+		if (height < 0) {
+			height = 0;
+		}
+
+		this._table.layout(new dom.Dimension(
+			dom.getContentWidth(this._gridEl.nativeElement),
+			height));
 	}
 
 	onFirstVisible() {

src/sql/services/dashboard/common/dashboardService.ts

@@ -6,7 +6,7 @@
 
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { Event } from 'vs/base/common/event';
-
+import * as DOM from 'vs/base/browser/dom';
 import * as sqlops from 'sqlops';
 
 export const IDashboardService = createDecorator<IDashboardService>('dashboardService');
@@ -16,8 +16,11 @@ export interface IDashboardService {
 	_serviceBrand: any;
 	readonly onDidOpenDashboard: Event<sqlops.DashboardDocument>;
 	readonly onDidChangeToDashboard: Event<sqlops.DashboardDocument>;
+	readonly onLayout: Event<DOM.Dimension>;
 
 	openDashboard(document: sqlops.DashboardDocument): void;
 
 	changeToDashboard(document: sqlops.DashboardDocument): void;
+
+	layout(dimension: DOM.Dimension): void;
 }

src/sql/services/dashboard/common/dashboardServiceImpl.ts

@@ -5,9 +5,8 @@
 'use strict';
 
 import { IDashboardService } from './dashboardService';
-
 import { Event, Emitter } from 'vs/base/common/event';
-
+import * as DOM from 'vs/base/browser/dom';
 import * as sqlops from 'sqlops';
 
 export class DashboardService implements IDashboardService {
@@ -18,6 +17,9 @@ export class DashboardService implements IDashboardService {
 	private _onDidChangeToDashboard = new Emitter<sqlops.DashboardDocument>();
 	public readonly onDidChangeToDashboard: Event<sqlops.DashboardDocument> = this._onDidChangeToDashboard.event;
 
+	private _onLayout = new Emitter<DOM.Dimension>();
+	public readonly onLayout: Event<DOM.Dimension> = this._onLayout.event;
+
 	public openDashboard(document: sqlops.DashboardDocument): void {
 		this._onDidOpenDashboard.fire(document);
 	}
@@ -25,4 +27,8 @@ export class DashboardService implements IDashboardService {
 	public changeToDashboard(document: sqlops.DashboardDocument): void {
 		this._onDidChangeToDashboard.fire(document);
 	}
+
+	public layout(dimension: DOM.Dimension): void {
+		this._onLayout.fire(dimension);
+	}
 }