diff --git a/src/sql/base/browser/ui/panel/tab.component.ts b/src/sql/base/browser/ui/panel/tab.component.ts index 470d504f1a..99aafad3cf 100644 --- a/src/sql/base/browser/ui/panel/tab.component.ts +++ b/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() { - this._child.layout(); + if (this._child) { + this._child.layout(); + } } } diff --git a/src/sql/base/browser/ui/table/media/table.css b/src/sql/base/browser/ui/table/media/table.css index c010fd47ef..2ec7a7b4ac 100644 --- a/src/sql/base/browser/ui/table/media/table.css +++ b/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; diff --git a/src/sql/parts/dashboard/common/interfaces.ts b/src/sql/parts/dashboard/common/interfaces.ts index 8748e0a704..8189abd40d 100644 --- a/src/sql/parts/dashboard/common/interfaces.ts +++ b/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: T): T { - this._toDispose.push(t); - return t; - } - ngOnDestroy() { this.dispose(); } diff --git a/src/sql/parts/dashboard/dashboardEditor.ts b/src/sql/parts/dashboard/dashboardEditor.ts index 97e9ba7534..670855fdd2 100644 --- a/src/sql/parts/dashboard/dashboardEditor.ts +++ b/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 { diff --git a/src/sql/parts/jobManagement/agent/agentView.component.ts b/src/sql/parts/jobManagement/agent/agentView.component.ts index f47fb63e20..7f159a31d6 100644 --- a/src/sql/parts/jobManagement/agent/agentView.component.ts +++ b/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(); let self = this; diff --git a/src/sql/parts/jobManagement/common/media/jobs.css b/src/sql/parts/jobManagement/common/media/jobs.css index 68d8d63f16..818df082b6 100644 --- a/src/sql/parts/jobManagement/common/media/jobs.css +++ b/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; } diff --git a/src/sql/parts/jobManagement/views/alertsView.component.html b/src/sql/parts/jobManagement/views/alertsView.component.html index c033e8a89a..f6c318521e 100644 --- a/src/sql/parts/jobManagement/views/alertsView.component.html +++ b/src/sql/parts/jobManagement/views/alertsView.component.html @@ -12,4 +12,4 @@
-
+
diff --git a/src/sql/parts/jobManagement/views/alertsView.component.ts b/src/sql/parts/jobManagement/views/alertsView.component.ts index 7301e24e18..c399d49548 100644 --- a/src/sql/parts/jobManagement/views/alertsView.component.ts +++ b/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) { - super(commonService, contextMenuService, keybindingService, instantiationService); + @Inject(IKeybindingService) keybindingService: IKeybindingService, + @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() { diff --git a/src/sql/parts/jobManagement/views/jobManagementView.ts b/src/sql/parts/jobManagement/views/jobManagementView.ts index 8669196864..f50b09cfcc 100644 --- a/src/sql/parts/jobManagement/views/jobManagementView.ts +++ b/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() { diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts index 48a16e4a4c..a4043d566c 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.ts +++ b/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 diff --git a/src/sql/parts/jobManagement/views/operatorsView.component.ts b/src/sql/parts/jobManagement/views/operatorsView.component.ts index 538135f0a2..60cfe91010 100644 --- a/src/sql/parts/jobManagement/views/operatorsView.component.ts +++ b/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() { diff --git a/src/sql/parts/jobManagement/views/proxiesView.component.ts b/src/sql/parts/jobManagement/views/proxiesView.component.ts index c988b1a951..4dfc18652b 100644 --- a/src/sql/parts/jobManagement/views/proxiesView.component.ts +++ b/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() { diff --git a/src/sql/services/dashboard/common/dashboardService.ts b/src/sql/services/dashboard/common/dashboardService.ts index efe786e788..7f29050ee9 100644 --- a/src/sql/services/dashboard/common/dashboardService.ts +++ b/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('dashboardService'); @@ -16,8 +16,11 @@ export interface IDashboardService { _serviceBrand: any; readonly onDidOpenDashboard: Event; readonly onDidChangeToDashboard: Event; + readonly onLayout: Event; openDashboard(document: sqlops.DashboardDocument): void; changeToDashboard(document: sqlops.DashboardDocument): void; + + layout(dimension: DOM.Dimension): void; } diff --git a/src/sql/services/dashboard/common/dashboardServiceImpl.ts b/src/sql/services/dashboard/common/dashboardServiceImpl.ts index 1b1d00a933..afe9902e65 100644 --- a/src/sql/services/dashboard/common/dashboardServiceImpl.ts +++ b/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(); public readonly onDidChangeToDashboard: Event = this._onDidChangeToDashboard.event; + private _onLayout = new Emitter(); + public readonly onLayout: Event = 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); + } }