From 0a839c73211f71ea07a8ddd32d0df4a4408a1c69 Mon Sep 17 00:00:00 2001 From: Anthony Dresser Date: Thu, 7 Jun 2018 14:57:50 -0700 Subject: [PATCH] Agent layout fixes (#1559) * added layout to agent * formatting * formatting --- .../base/browser/ui/panel/panel.component.ts | 4 + .../base/browser/ui/panel/tab.component.ts | 4 + .../contents/controlHostContent.component.ts | 1 + .../agent/agentView.component.ts | 10 ++- .../jobManagement/views/jobsView.component.ts | 75 +++++++++---------- 5 files changed, 52 insertions(+), 42 deletions(-) diff --git a/src/sql/base/browser/ui/panel/panel.component.ts b/src/sql/base/browser/ui/panel/panel.component.ts index de8e462392..e4eebd8bd5 100644 --- a/src/sql/base/browser/ui/panel/panel.component.ts +++ b/src/sql/base/browser/ui/panel/panel.component.ts @@ -242,4 +242,8 @@ export class PanelComponent extends Disposable { this.selectTab(this._mru[0]); } } + + public layout() { + this._activeTab.layout(); + } } diff --git a/src/sql/base/browser/ui/panel/tab.component.ts b/src/sql/base/browser/ui/panel/tab.component.ts index 04473ed2d3..d3e2c68200 100644 --- a/src/sql/base/browser/ui/panel/tab.component.ts +++ b/src/sql/base/browser/ui/panel/tab.component.ts @@ -72,4 +72,8 @@ export class TabComponent implements OnDestroy { return false; } } + + public layout() { + this._child.layout(); + } } diff --git a/src/sql/parts/dashboard/contents/controlHostContent.component.ts b/src/sql/parts/dashboard/contents/controlHostContent.component.ts index 5041cbf87d..08dabd90a7 100644 --- a/src/sql/parts/dashboard/contents/controlHostContent.component.ts +++ b/src/sql/parts/dashboard/contents/controlHostContent.component.ts @@ -44,6 +44,7 @@ export class ControlHostContent { } public layout(): void { + this._agentViewComponent.layout(); } public get id(): string { diff --git a/src/sql/parts/jobManagement/agent/agentView.component.ts b/src/sql/parts/jobManagement/agent/agentView.component.ts index 5f4d5cee41..454626e660 100644 --- a/src/sql/parts/jobManagement/agent/agentView.component.ts +++ b/src/sql/parts/jobManagement/agent/agentView.component.ts @@ -7,7 +7,7 @@ import 'vs/css!../common/media/jobs'; import 'sql/parts/dashboard/common/dashboardPanelStyles'; import * as nls from 'vs/nls'; -import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, Injectable} from '@angular/core'; +import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, Injectable } from '@angular/core'; import * as Utils from 'sql/parts/connection/common/utils'; import { RefreshWidgetAction, EditDashboardAction } from 'sql/parts/dashboard/common/actions'; import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService'; @@ -49,8 +49,8 @@ export class AgentViewComponent { }; constructor( - @Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef){ - this._expanded = new Map(); + @Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef) { + this._expanded = new Map(); } /** @@ -103,4 +103,8 @@ export class AgentViewComponent { public setExpanded(jobId: string, errorMessage: string) { this._expanded.set(jobId, errorMessage); } + + public layout() { + this._panel.layout(); + } } diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts index 2ec3418099..d5af28075e 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.ts +++ b/src/sql/parts/jobManagement/views/jobsView.component.ts @@ -12,37 +12,29 @@ import 'vs/css!../common/media/jobs'; import 'vs/css!sql/media/icons/common-icons'; import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core'; -import { FieldType, IObservableCollection, CollectionChange, SlickGrid } from 'angular2-slickgrid'; import * as sqlops from 'sqlops'; import * as vscode from 'vscode'; -import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService'; -import { IDisposable } from 'vs/base/common/lifecycle'; -import * as themeColors from 'vs/workbench/common/theme'; -import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import * as nls from 'vs/nls'; +import * as dom from 'vs/base/browser/dom'; -import { IGridDataSet } from 'sql/parts/grid/common/interfaces'; import { Table } from 'sql/base/browser/ui/table/table'; -import { attachTableStyler } from 'sql/common/theme/styler'; -import { JobHistoryComponent } from './jobHistory.component'; import { AgentViewComponent } from '../agent/agentView.component'; import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowdetailview'; import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService'; import { AgentJobUtilities } from '../common/agentJobUtilities'; -import * as Utils from 'sql/parts/connection/common/utils'; import { IJobManagementService } from '../common/interfaces'; -import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; -import { DashboardPage } from 'sql/parts/dashboard/common/dashboardPage.component'; +import { TabChild } from 'sql/base/browser/ui/panel/tab.component'; export const JOBSVIEW_SELECTOR: string = 'jobsview-component'; @Component({ selector: JOBSVIEW_SELECTOR, - templateUrl: decodeURI(require.toUrl('./jobsView.component.html')) + templateUrl: decodeURI(require.toUrl('./jobsView.component.html')), + providers: [{ provide: TabChild, useExisting: forwardRef(() => JobsViewComponent) }], }) export class JobsViewComponent implements AfterContentChecked { @@ -52,14 +44,14 @@ export class JobsViewComponent implements AfterContentChecked { private _disposables = new Array(); private columns: Array> = [ - { name: nls.localize('jobColumns.name','Name'), field: 'name', formatter: this.renderName, width: 200 , id: 'name' }, - { name: nls.localize('jobColumns.lastRun','Last Run'), field: 'lastRun', width: 150, id: 'lastRun' }, - { name: nls.localize('jobColumns.nextRun','Next Run'), field: 'nextRun', width: 150, id: 'nextRun' }, - { name: nls.localize('jobColumns.enabled','Enabled'), field: 'enabled', width: 70, id: 'enabled' }, - { name: nls.localize('jobColumns.status','Status'), field: 'currentExecutionStatus', width: 60, id: 'currentExecutionStatus' }, - { name: nls.localize('jobColumns.category','Category'), field: 'category', width: 150, id: 'category' }, - { name: nls.localize('jobColumns.runnable','Runnable'), field: 'runnable', width: 50, id: 'runnable' }, - { name: nls.localize('jobColumns.schedule','Schedule'), field: 'hasSchedule', width: 50, id: 'hasSchedule' }, + { name: nls.localize('jobColumns.name', 'Name'), field: 'name', formatter: this.renderName, width: 200, id: 'name' }, + { name: nls.localize('jobColumns.lastRun', 'Last Run'), field: 'lastRun', width: 150, id: 'lastRun' }, + { name: nls.localize('jobColumns.nextRun', 'Next Run'), field: 'nextRun', width: 150, id: 'nextRun' }, + { name: nls.localize('jobColumns.enabled', 'Enabled'), field: 'enabled', width: 70, id: 'enabled' }, + { name: nls.localize('jobColumns.status', 'Status'), field: 'currentExecutionStatus', width: 60, id: 'currentExecutionStatus' }, + { name: nls.localize('jobColumns.category', 'Category'), field: 'category', width: 150, id: 'category' }, + { name: nls.localize('jobColumns.runnable', 'Runnable'), field: 'runnable', width: 50, id: 'runnable' }, + { name: nls.localize('jobColumns.schedule', 'Schedule'), field: 'hasSchedule', width: 50, id: 'hasSchedule' }, { name: nls.localize('jobColumns.lastRunOutcome', 'Last Run Outcome'), field: 'lastRunOutcome', width: 150, id: 'lastRunOutcome' }, ]; @@ -97,6 +89,10 @@ export class JobsViewComponent implements AfterContentChecked { this._isCloud = this._dashboardService.connectionManagementService.connectionInfo.serverInfo.isCloud; } + public layout() { + this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement))); + } + ngAfterContentChecked() { if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) { this.isVisible = true; @@ -193,11 +189,11 @@ export class JobsViewComponent implements AfterContentChecked { }); this._table.registerPlugin(this.rowDetail); - this.rowDetail.onBeforeRowDetailToggle.subscribe(function(e, args) { + this.rowDetail.onBeforeRowDetailToggle.subscribe(function (e, args) { }); - this.rowDetail.onAfterRowDetailToggle.subscribe(function(e, args) { + this.rowDetail.onAfterRowDetailToggle.subscribe(function (e, args) { }); - this.rowDetail.onAsyncEndUpdate.subscribe(function(e, args) { + this.rowDetail.onAsyncEndUpdate.subscribe(function (e, args) { }); this.dataView.beginUpdate(); @@ -207,15 +203,15 @@ export class JobsViewComponent implements AfterContentChecked { this._table.resizeCanvas(); let expandedJobs = this._agentViewComponent.expanded; let expansions = 0; - for (let i = 0; i < jobs.length; i++){ + for (let i = 0; i < jobs.length; i++) { let job = jobs[i]; if (job.lastRunOutcome === 0 && !expandedJobs.get(job.jobId)) { - this.expandJobRowDetails(i+expandedJobs.size); - this.addToStyleHash(i+expandedJobs.size); + this.expandJobRowDetails(i + expandedJobs.size); + this.addToStyleHash(i + expandedJobs.size); this._agentViewComponent.setExpanded(job.jobId, 'Loading Error...'); } else if (job.lastRunOutcome === 0 && expandedJobs.get(job.jobId)) { - this.expandJobRowDetails(i+expansions); - this.addToStyleHash(i+expansions); + this.expandJobRowDetails(i + expansions); + this.addToStyleHash(i + expansions); expansions++; } } @@ -233,7 +229,7 @@ export class JobsViewComponent implements AfterContentChecked { if (currentTab) { let currentTabHeight = currentTab.clientHeight; if (currentTabHeight < self._tabHeight) { - $('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight-22}px`); + $('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight - 22}px`); self._table.resizeCanvas(); } else { $('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight}px`); @@ -245,14 +241,14 @@ export class JobsViewComponent implements AfterContentChecked { this._table.grid.onColumnsResized.subscribe((e, data: any) => { let nameWidth: number = data.grid.getColumnWidths()[1]; // adjust job name when resized - $('#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext').css('width', `${nameWidth-10}px`); + $('#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext').css('width', `${nameWidth - 10}px`); // adjust error message when resized $('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%'); }); this.loadJobHistories(); } - private setRowWithErrorClass(hash: {[index: number]: {[id: string]: string;}}, row: number, errorClass: string) { + private setRowWithErrorClass(hash: { [index: number]: { [id: string]: string; } }, row: number, errorClass: string) { hash[row] = { '_detail_selector': errorClass, 'id': errorClass, @@ -271,13 +267,14 @@ export class JobsViewComponent implements AfterContentChecked { } private addToStyleHash(row: number) { - let hash : { + let hash: { [index: number]: { - [id: string]: string; - }} = {}; + [id: string]: string; + } + } = {}; hash = this.setRowWithErrorClass(hash, row, 'job-with-error'); - hash = this.setRowWithErrorClass(hash, row+1, 'error-row'); - this._table.grid.setCellCssStyles('error-row'+row.toString(), hash); + hash = this.setRowWithErrorClass(hash, row + 1, 'error-row'); + this._table.grid.setCellCssStyles('error-row' + row.toString(), hash); } private renderName(row, cell, value, columnDef, dataContext) { @@ -348,7 +345,7 @@ export class JobsViewComponent implements AfterContentChecked { let jobName: string; let cell = args.grid.getCellNode(row, 1); if (this.isErrorRow(cell)) { - jobName = args.grid.getCellNode(row-1, 1).innerText.trim(); + jobName = args.grid.getCellNode(row - 1, 1).innerText.trim(); } else { jobName = cell.innerText.trim(); } @@ -365,10 +362,10 @@ export class JobsViewComponent implements AfterContentChecked { self.jobHistories[job.jobId] = result.jobs; self._jobCacheObject.setJobHistory(job.jobId, result.jobs); if (self._agentViewComponent.expanded.has(job.jobId)) { - let jobHistory = self._jobCacheObject.getJobHistory(job.jobId)[result.jobs.length-1]; + let jobHistory = self._jobCacheObject.getJobHistory(job.jobId)[result.jobs.length - 1]; let item = self.dataView.getItemById(job.jobId + '.error'); let noStepsMessage = nls.localize('jobsView.noSteps', 'No Steps available for this job.'); - let errorMessage = jobHistory ? jobHistory.message: noStepsMessage; + let errorMessage = jobHistory ? jobHistory.message : noStepsMessage; item['name'] = nls.localize('jobsView.error', 'Error: ') + errorMessage; self._agentViewComponent.setExpanded(job.jobId, item['name']); self.dataView.updateItem(job.jobId + '.error', item);