Agent UI fixes (#1510)

* added ellipses for long job names

* fixed resizing crash in jobs history page

* added some more ui fixes

* changed minWidths to widths

* code review comments
This commit is contained in:
Aditya Bist
2018-05-30 10:53:36 -07:00
committed by GitHub
parent 83842ee9e1
commit 05d7e24e66
5 changed files with 43 additions and 23 deletions

View File

@@ -11,6 +11,7 @@ export class AgentJobUtilities {
public static startIconClass: string = 'action-label icon runJobIcon';
public static stopIconClass: string = 'action-label icon stopJobIcon';
public static jobMessageLength: number = 110;
public static convertToStatusString(status: number): string {
switch(status) {

View File

@@ -76,7 +76,7 @@ jobhistory-component {
background: green;
}
#jobsDiv .jobview-jobnameindicatorfailure {
#jobsDiv .slick-cell.l1.r1 .jobview-jobnameindicatorfailure {
width: 5px;
background: red;
}
@@ -86,15 +86,23 @@ jobhistory-component {
background: orange;
}
#jobsDiv .jobview-jobnameindicatorunknown {
#jobsDiv .jobview-grid .jobview-jobnameindicatorunknown {
width: 5px;
background: yellow;
background: grey;
}
#jobsDiv .jobview-jobnametext {
#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext {
width: 100%;
}
#jobsDiv .jobview-grid .slick-cell.l1.r1 .jobview-jobnametext {
text-overflow: ellipsis;
width: 200px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
#jobsDiv .job-with-error {
border-bottom: none;
}

View File

@@ -79,4 +79,4 @@
jobstepsview-component {
padding-top: 10px;
}
}

View File

@@ -27,6 +27,7 @@ import { OEAction } from 'sql/parts/objectExplorer/viewlet/objectExplorerActions
import { Builder, $, withElementById } from 'vs/base/browser/builder';
import { AgentJobHistoryInfo } from 'sqlops';
import { Agent } from 'vs/base/node/request';
import { AgentJobUtilities } from 'sql/parts/jobManagement/common/agentJobUtilities';
export class JobStepsViewRow {
public stepID: string;
@@ -111,7 +112,7 @@ export class JobStepsViewRenderer implements tree.IRenderer {
private _statusIcon: HTMLElement;
public getHeight(tree: tree.ITree, element: JobStepsViewRow): number {
return 22;
return 22 * Math.ceil(element.message.length/AgentJobUtilities.jobMessageLength);
}
public getTemplateId(tree: tree.ITree, element: JobStepsViewRow | JobStepsViewModel): string {

View File

@@ -53,14 +53,14 @@ export class JobsViewComponent implements AfterContentChecked {
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.lastRun','Last Run'), field: 'lastRun', minWidth: 150, id: 'lastRun' },
{ name: nls.localize('jobColumns.nextRun','Next Run'), field: 'nextRun', minWidth: 150, id: 'nextRun' },
{ name: nls.localize('jobColumns.enabled','Enabled'), field: 'enabled', minWidth: 70, id: 'enabled' },
{ name: nls.localize('jobColumns.status','Status'), field: 'currentExecutionStatus', minWidth: 60, id: 'currentExecutionStatus' },
{ name: nls.localize('jobColumns.category','Category'), field: 'category', minWidth: 150, id: 'category' },
{ name: nls.localize('jobColumns.runnable','Runnable'), field: 'runnable', minWidth: 50, id: 'runnable' },
{ name: nls.localize('jobColumns.schedule','Schedule'), field: 'hasSchedule', minWidth: 50, id: 'hasSchedule' },
{ name: nls.localize('jobColumns.lastRunOutcome', 'Last Run Outcome'), field: 'lastRunOutcome', minWidth: 150, id: 'lastRunOutcome' },
{ 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' },
];
private rowDetail: RowDetailView;
@@ -228,16 +228,26 @@ export class JobsViewComponent implements AfterContentChecked {
this._cd.detectChanges();
const self = this;
this._tabHeight = $('agentview-component #jobsDiv .jobview-grid').get(0).clientHeight;
$(window).resize((e) => {
let currentTabHeight = $('agentview-component #jobsDiv .jobview-grid').get(0).clientHeight;
if (currentTabHeight < self._tabHeight) {
$('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`);
self._table.resizeCanvas();
$(window).resize(() => {
let currentTab = $('agentview-component #jobsDiv .jobview-grid').get(0);
if (currentTab) {
let currentTabHeight = currentTab.clientHeight;
if (currentTabHeight < self._tabHeight) {
$('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`);
self._table.resizeCanvas();
}
self._tabHeight = currentTabHeight;
}
self._tabHeight = currentTabHeight;
});
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`);
// adjust error message when resized
$('#jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext').css('width', '100%');
});
this.loadJobHistories();
}