Agent: features and suggestions (#3512)

* removed row highlighting overlap with scrollbars

* fixed more styling suggestions

* made async calls parallel and improved UI

* cleared style

extensions/agent/src/data/alertData.ts

@@ -69,7 +69,7 @@ export class AlertData implements IAgentDialogData {
 			this.eventDescriptionKeyword = alertInfo.eventDescriptionKeyword;
 			this.eventSource = alertInfo.eventSource;
 			this.hasNotification = alertInfo.hasNotification;
-			this.includeEventDescription = alertInfo.includeEventDescription.toString();
+			this.includeEventDescription = alertInfo.includeEventDescription ? alertInfo.includeEventDescription.toString() : null;
 			this.isEnabled = alertInfo.isEnabled;
 			this.jobId = alertInfo.jobId;
 			this.lastOccurrenceDate = alertInfo.lastOccurrenceDate;
@@ -82,7 +82,7 @@ export class AlertData implements IAgentDialogData {
 			this.databaseName = alertInfo.databaseName;
 			this.countResetDate = alertInfo.countResetDate;
 			this.categoryName = alertInfo.categoryName;
-			this.alertType = alertInfo.alertType.toString();
+			this.alertType = alertInfo.alertType ? alertInfo.alertType.toString() : null;
 			this.wmiEventNamespace = alertInfo.wmiEventNamespace;
 			this.wmiEventQuery = alertInfo.wmiEventQuery;
 		}

src/sql/parts/jobManagement/common/media/jobs.css

@@ -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;
 }
@@ -415,3 +407,10 @@ jobsview-component .jobview-grid .slick-cell.error-row {
     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;
+}

src/sql/parts/jobManagement/views/jobHistory.component.html

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

src/sql/parts/jobManagement/views/jobHistory.component.ts

@@ -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(

src/sql/parts/jobManagement/views/jobHistory.css

@@ -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;
+}

src/sql/parts/jobManagement/views/jobStepsView.css

@@ -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%;
 }

src/sql/parts/jobManagement/views/jobsView.component.ts

@@ -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,15 +622,14 @@ 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);
@@ -641,14 +640,6 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 			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.';
-				});
-			}
 		}
 		if (runCharts.length > 0) {
 			this._jobCacheObject.setRunChart(jobId, runCharts);
@@ -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 => {