Agent layout fixes (#1559)

* added layout to agent

* formatting

* formatting
This commit is contained in:
Anthony Dresser
2018-06-07 14:57:50 -07:00
committed by GitHub
parent e9747a61ac
commit 0a839c7321
5 changed files with 52 additions and 42 deletions

View File

@@ -242,4 +242,8 @@ export class PanelComponent extends Disposable {
this.selectTab(this._mru[0]); this.selectTab(this._mru[0]);
} }
} }
public layout() {
this._activeTab.layout();
}
} }

View File

@@ -72,4 +72,8 @@ export class TabComponent implements OnDestroy {
return false; return false;
} }
} }
public layout() {
this._child.layout();
}
} }

View File

@@ -44,6 +44,7 @@ export class ControlHostContent {
} }
public layout(): void { public layout(): void {
this._agentViewComponent.layout();
} }
public get id(): string { public get id(): string {

View File

@@ -7,7 +7,7 @@ import 'vs/css!../common/media/jobs';
import 'sql/parts/dashboard/common/dashboardPanelStyles'; import 'sql/parts/dashboard/common/dashboardPanelStyles';
import * as nls from 'vs/nls'; 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 * as Utils from 'sql/parts/connection/common/utils';
import { RefreshWidgetAction, EditDashboardAction } from 'sql/parts/dashboard/common/actions'; import { RefreshWidgetAction, EditDashboardAction } from 'sql/parts/dashboard/common/actions';
import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -49,7 +49,7 @@ export class AgentViewComponent {
}; };
constructor( constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef){ @Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef) {
this._expanded = new Map<string, string>(); this._expanded = new Map<string, string>();
} }
@@ -103,4 +103,8 @@ export class AgentViewComponent {
public setExpanded(jobId: string, errorMessage: string) { public setExpanded(jobId: string, errorMessage: string) {
this._expanded.set(jobId, errorMessage); this._expanded.set(jobId, errorMessage);
} }
public layout() {
this._panel.layout();
}
} }

View File

@@ -12,37 +12,29 @@ import 'vs/css!../common/media/jobs';
import 'vs/css!sql/media/icons/common-icons'; import 'vs/css!sql/media/icons/common-icons';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core'; 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 sqlops from 'sqlops';
import * as vscode from 'vscode'; 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 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 { 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 { AgentViewComponent } from '../agent/agentView.component';
import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowdetailview'; import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowdetailview';
import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService'; import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService';
import { AgentJobUtilities } from '../common/agentJobUtilities'; import { AgentJobUtilities } from '../common/agentJobUtilities';
import * as Utils from 'sql/parts/connection/common/utils';
import { IJobManagementService } from '../common/interfaces'; import { IJobManagementService } from '../common/interfaces';
import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.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'; export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
@Component({ @Component({
selector: JOBSVIEW_SELECTOR, 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 { export class JobsViewComponent implements AfterContentChecked {
@@ -52,14 +44,14 @@ export class JobsViewComponent implements AfterContentChecked {
private _disposables = new Array<vscode.Disposable>(); private _disposables = new Array<vscode.Disposable>();
private columns: Array<Slick.Column<any>> = [ private columns: Array<Slick.Column<any>> = [
{ name: nls.localize('jobColumns.name','Name'), field: 'name', formatter: this.renderName, width: 200 , id: 'name' }, { 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.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.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.enabled', 'Enabled'), field: 'enabled', width: 70, id: 'enabled' },
{ name: nls.localize('jobColumns.status','Status'), field: 'currentExecutionStatus', width: 60, id: 'currentExecutionStatus' }, { 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.category', 'Category'), field: 'category', width: 150, id: 'category' },
{ name: nls.localize('jobColumns.runnable','Runnable'), field: 'runnable', width: 50, id: 'runnable' }, { 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.schedule', 'Schedule'), field: 'hasSchedule', width: 50, id: 'hasSchedule' },
{ name: nls.localize('jobColumns.lastRunOutcome', 'Last Run Outcome'), field: 'lastRunOutcome', width: 150, id: 'lastRunOutcome' }, { 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; 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() { ngAfterContentChecked() {
if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) { if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) {
this.isVisible = true; this.isVisible = true;
@@ -193,11 +189,11 @@ export class JobsViewComponent implements AfterContentChecked {
}); });
this._table.registerPlugin(<any>this.rowDetail); this._table.registerPlugin(<any>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(); this.dataView.beginUpdate();
@@ -207,15 +203,15 @@ export class JobsViewComponent implements AfterContentChecked {
this._table.resizeCanvas(); this._table.resizeCanvas();
let expandedJobs = this._agentViewComponent.expanded; let expandedJobs = this._agentViewComponent.expanded;
let expansions = 0; let expansions = 0;
for (let i = 0; i < jobs.length; i++){ for (let i = 0; i < jobs.length; i++) {
let job = jobs[i]; let job = jobs[i];
if (job.lastRunOutcome === 0 && !expandedJobs.get(job.jobId)) { if (job.lastRunOutcome === 0 && !expandedJobs.get(job.jobId)) {
this.expandJobRowDetails(i+expandedJobs.size); this.expandJobRowDetails(i + expandedJobs.size);
this.addToStyleHash(i+expandedJobs.size); this.addToStyleHash(i + expandedJobs.size);
this._agentViewComponent.setExpanded(job.jobId, 'Loading Error...'); this._agentViewComponent.setExpanded(job.jobId, 'Loading Error...');
} else if (job.lastRunOutcome === 0 && expandedJobs.get(job.jobId)) { } else if (job.lastRunOutcome === 0 && expandedJobs.get(job.jobId)) {
this.expandJobRowDetails(i+expansions); this.expandJobRowDetails(i + expansions);
this.addToStyleHash(i+expansions); this.addToStyleHash(i + expansions);
expansions++; expansions++;
} }
} }
@@ -233,7 +229,7 @@ export class JobsViewComponent implements AfterContentChecked {
if (currentTab) { if (currentTab) {
let currentTabHeight = currentTab.clientHeight; let currentTabHeight = currentTab.clientHeight;
if (currentTabHeight < self._tabHeight) { 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(); self._table.resizeCanvas();
} else { } else {
$('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight}px`); $('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) => { this._table.grid.onColumnsResized.subscribe((e, data: any) => {
let nameWidth: number = data.grid.getColumnWidths()[1]; let nameWidth: number = data.grid.getColumnWidths()[1];
// adjust job name when resized // 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 // adjust error message when resized
$('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%'); $('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%');
}); });
this.loadJobHistories(); 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] = { hash[row] = {
'_detail_selector': errorClass, '_detail_selector': errorClass,
'id': errorClass, 'id': errorClass,
@@ -271,13 +267,14 @@ export class JobsViewComponent implements AfterContentChecked {
} }
private addToStyleHash(row: number) { private addToStyleHash(row: number) {
let hash : { let hash: {
[index: number]: { [index: number]: {
[id: string]: string; [id: string]: string;
}} = {}; }
} = {};
hash = this.setRowWithErrorClass(hash, row, 'job-with-error'); hash = this.setRowWithErrorClass(hash, row, 'job-with-error');
hash = this.setRowWithErrorClass(hash, row+1, 'error-row'); hash = this.setRowWithErrorClass(hash, row + 1, 'error-row');
this._table.grid.setCellCssStyles('error-row'+row.toString(), hash); this._table.grid.setCellCssStyles('error-row' + row.toString(), hash);
} }
private renderName(row, cell, value, columnDef, dataContext) { private renderName(row, cell, value, columnDef, dataContext) {
@@ -348,7 +345,7 @@ export class JobsViewComponent implements AfterContentChecked {
let jobName: string; let jobName: string;
let cell = args.grid.getCellNode(row, 1); let cell = args.grid.getCellNode(row, 1);
if (this.isErrorRow(cell)) { if (this.isErrorRow(cell)) {
jobName = args.grid.getCellNode(row-1, 1).innerText.trim(); jobName = args.grid.getCellNode(row - 1, 1).innerText.trim();
} else { } else {
jobName = cell.innerText.trim(); jobName = cell.innerText.trim();
} }
@@ -365,10 +362,10 @@ export class JobsViewComponent implements AfterContentChecked {
self.jobHistories[job.jobId] = result.jobs; self.jobHistories[job.jobId] = result.jobs;
self._jobCacheObject.setJobHistory(job.jobId, result.jobs); self._jobCacheObject.setJobHistory(job.jobId, result.jobs);
if (self._agentViewComponent.expanded.has(job.jobId)) { 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 item = self.dataView.getItemById(job.jobId + '.error');
let noStepsMessage = nls.localize('jobsView.noSteps', 'No Steps available for this job.'); 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; item['name'] = nls.localize('jobsView.error', 'Error: ') + errorMessage;
self._agentViewComponent.setExpanded(job.jobId, item['name']); self._agentViewComponent.setExpanded(job.jobId, item['name']);
self.dataView.updateItem(job.jobId + '.error', item); self.dataView.updateItem(job.jobId + '.error', item);