Agent: features and suggestions (#3512)

* removed row highlighting overlap with scrollbars

* fixed more styling suggestions

* made async calls parallel and improved UI

* cleared style
This commit is contained in:
Aditya Bist
2018-12-10 16:36:41 -08:00
committed by GitHub
parent 8b447e361f
commit 88e24e92b5
7 changed files with 42 additions and 39 deletions

View File

@@ -304,14 +304,6 @@ table.jobprevruns > tbody {
background-image: url('refresh_inverse.svg');
}
.agent-actionbar-container .monaco-action-bar > ul.actions-container {
padding-top: 10px;
}
jobsview-component .agent-actionbar-container {
height: 40px;
}
.agent-actionbar-container .monaco-action-bar > ul.actions-container > li.action-item {
padding-left: 20px;
}
@@ -414,4 +406,11 @@ jobsview-component .jobview-grid .slick-cell.error-row {
#proxiesDiv .proxyview-proxynameindicatordisabled {
width: 5px;
background: red;
}
#jobsDiv jobsview-component .monaco-toolbar.carbon-taskbar,
#operatorsDiv joboperatorsview-component .monaco-toolbar.carbon-taskbar,
#alertsDiv jobalertsview-component .monaco-toolbar.carbon-taskbar,
#proxiesDiv jobproxiesview-component .monaco-toolbar.carbon-taskbar {
margin: 10px 0px 10px 0px;
}

View File

@@ -156,8 +156,8 @@
</td>
</tr>
</table>
<div #jobsteps style="flex: 1 1 auto; position: relative">
<jobstepsview-component *ngIf="showSteps === true" style="position: absolute; height: 100%; width: 100%"></jobstepsview-component>
<div #jobsteps *ngIf="showSteps === true" style="flex: 1 1 auto; position: relative">
<jobstepsview-component *ngIf="showSteps === true"></jobstepsview-component>
</div>
<h3 *ngIf="showSteps === false">No Steps Available</h3>
</div>

View File

@@ -65,7 +65,6 @@ export class JobHistoryComponent extends JobManagementView implements OnInit {
private _agentJobInfo: sqlops.AgentJobInfo;
private _noJobsAvailable: boolean = false;
private static readonly INITIAL_TREE_HEIGHT: number = 780;
private static readonly HEADING_HEIGHT: number = 24;
constructor(

View File

@@ -7,7 +7,6 @@
.all-jobs {
display: inline;
font-size: 15px;
padding-bottom: 15px;
}
.overview-container .overview-tab .resultsViewCollapsible {
@@ -266,14 +265,22 @@ jobhistory-component > .jobhistory-heading-container > .icon.in-progress {
padding-left: 20px;
}
jobhistory-component > .agent-actionbar-container .monaco-action-bar > ul.actions-container {
jobhistory-component > .agent-actionbar-container {
border-top: 3px solid #f4f4f4;
}
.vs-dark jobhistory-component > .agent-actionbar-container .monaco-action-bar > ul.actions-container {
.vs-dark jobhistory-component > .agent-actionbar-container {
border-top: 3px solid #444444;
}
.hc-black jobhistory-component > .agent-actionbar-container .monaco-action-bar > ul.actions-container {
.hc-black jobhistory-component > .agent-actionbar-container {
border-top: 3px solid #2b56f2;
}
jobhistory-component .step-table.prev-run-list .monaco-tree-wrapper .monaco-tree-row {
width: 96%;
}
jobhistory-component .agent-actionbar-container > .monaco-toolbar.carbon-taskbar {
margin: 10px 0px 5px 0px;
}

View File

@@ -80,4 +80,11 @@
jobstepsview-component {
display: flex;
flex-direction: column;
position: absolute;
height: 100%;
width: 100%;
}
jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row {
width: 99.2%;
}

View File

@@ -591,7 +591,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
private async curateJobHistory(jobs: sqlops.AgentJobInfo[], ownerUri: string) {
const self = this;
jobs.forEach(async (job) => {
await Promise.all(jobs.map(async (job) => {
await this._jobManagementService.getJobHistory(ownerUri, job.jobId, job.name).then(async(result) => {
if (result) {
self.jobSteps[job.jobId] = result.steps ? result.steps : [];
@@ -622,32 +622,23 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
}
}
});
});
}));
}
private createJobChart(jobId: string, jobHistories: sqlops.AgentJobHistoryInfo[]): void {
let chartHeights = this.getChartHeights(jobHistories);
let runCharts = [];
for (let i = 0; i < jobHistories.length; i++) {
for (let i = 0; i < chartHeights.length; i++) {
let runGraph = $(`table#${jobId}.jobprevruns > tbody > tr > td > div.bar${i}`);
if (jobHistories && jobHistories.length > 0) {
runGraph.css('height', chartHeights[i]);
let bgColor = jobHistories[i].runStatus === 0 ? 'red' : 'green';
runGraph.css('background', bgColor);
runGraph.hover((e) => {
let currentTarget = e.currentTarget;
currentTarget.title = jobHistories[i].runDuration;
});
if (runGraph.get(0)) {
runCharts.push(runGraph.get(0).outerHTML);
}
} else {
runGraph.css('height', '5px');
runGraph.css('background', 'red');
runGraph.hover((e) => {
let currentTarget = e.currentTarget;
currentTarget.title = 'Job not run.';
});
runGraph.css('height', chartHeights[i]);
let bgColor = jobHistories[i].runStatus === 0 ? 'red' : 'green';
runGraph.css('background', bgColor);
runGraph.hover((e) => {
let currentTarget = e.currentTarget;
currentTarget.title = jobHistories[i].runDuration;
});
if (runGraph.get(0)) {
runCharts.push(runGraph.get(0).outerHTML);
}
}
if (runCharts.length > 0) {
@@ -658,7 +649,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
// chart height normalization logic
private getChartHeights(jobHistories: sqlops.AgentJobHistoryInfo[]): string[] {
if (!jobHistories || jobHistories.length === 0) {
return ['5px', '5px', '5px', '5px', '5px'];
return [];
}
let maxDuration: number = 0;
jobHistories.forEach(history => {