Feature/agent finishes (#1237)

* added icons for steps and fixed bugs in jobs view page

* put svgs in common folder

* added steps header logo

* added full path for import

* changed codes to text

* removed cat id, changed bools to yes/no and fixed steps theme

* localized the strings

* set the jobs table column widths

* added indicators for failure, unknown and canceled jobs in jobs view

* fixed jobs panel style and jobs view scrolling

* fixed jobs view page styling

* fixed job history tree size rows

* made error messages copy-able

* made job history tree work with keyboard

* fixed previous runs header

* added space between date and status in job history list

* fixed history list min width and set scrolling for jobs history page

* added scrolling when app is resized

* added scrollbars and tooltip for name

* added error handling, tab handling and other issues

src/sql/base/browser/ui/table/plugins/rowDetailView.ts

@@ -269,10 +269,22 @@ export class RowDetailView {
 		return item;
 	}
 
+	public getErrorItem(parent, offset) {
+		let item: any = {};
+		item.id = parent.id + '.' + offset;
+		item._collapsed = true;
+		item._isPadding = false;
+		item._parent = parent;
+		item._offset = offset;
+		item.jobId = parent.jobId;
+		item.name = parent.message ? parent.message : 'Error';
+		return item;
+	}
+
 	//////////////////////////////////////////////////////////////
 	//create the detail ctr node. this belongs to the dev & can be custom-styled as per
 	//////////////////////////////////////////////////////////////
-	public applyTemplateNewLineHeight(item) {
+	public applyTemplateNewLineHeight(item, showError = false) {
 		// the height seems to be calculated by the template row count (how many line of items does the template have)
 		let rowCount = this._options.panelRows;
 
@@ -284,11 +296,14 @@ export class RowDetailView {
 
 		let idxParent = this._dataView.getIdxById(item.id);
 		for (let idx = 1; idx <= item._sizePadding; idx++) {
-			this._dataView.insertItem(idxParent + idx, this.getPaddingItem(item, idx));
+			if (showError) {
+				this._dataView.insertItem(idxParent + idx, this.getErrorItem(item, 'error'));
+			} else {
+				this._dataView.insertItem(idxParent + idx, this.getPaddingItem(item, idx));
+			}
 		}
 	}
 
-
 	public getColumnDefinition() {
 		return {
 			id: this._options.columnId,

src/sql/parts/jobManagement/agent/agentView.component.ts

@@ -38,6 +38,7 @@ export class AgentViewComponent {
 	private _jobId: string = null;
 	private _agentJobInfo: AgentJobInfo = null;
 	private _refresh: boolean = undefined;
+	private _expanded: Map<string, string>;
 
 	public jobsIconClass: string = 'jobsview-icon';
 
@@ -50,6 +51,7 @@ export class AgentViewComponent {
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef){
+			this._expanded = new Map<string, string>();
 	}
 
 	/**
@@ -71,6 +73,10 @@ export class AgentViewComponent {
 		return this._refresh;
 	}
 
+	public get expanded(): Map<string, string> {
+		return this._expanded;
+	}
+
 	/**
 	 * Public Setters
 	 */
@@ -94,4 +100,8 @@ export class AgentViewComponent {
 		this._refresh = value;
 		this._cd.detectChanges();
 	}
+
+	public setExpanded(jobId: string, errorMessage: string) {
+		this._expanded.set(jobId, errorMessage);
+	}
 }

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

@@ -27,12 +27,15 @@ jobhistory-component {
 }
 
 #jobsDiv .jobview-grid {
-    padding-top: 15px;
-    height: 100%;
+    height: 96%;
 	width : 100%;
     display: block;
 }
 
+#jobsDiv .jobview-grid > .monaco-table > div[class^="slickgrid_"] {
+    overflow: scroll !important;
+}
+
 .vs-dark #jobsDiv .slick-header-column {
 	background: #333333 !important;
 }
@@ -54,7 +57,6 @@ jobhistory-component {
     border-right: transparent !important;
     border-left: transparent !important;
     line-height: 33px !important;
-    vertical-align: middle;
 }
 
 #jobsDiv .jobview-joblist {
@@ -92,6 +94,25 @@ jobhistory-component {
     width: 100%;
 }
 
+#jobsDiv .job-with-error {
+    border-bottom: none;
+}
+
+#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell.l1.r1.error-row {
+    width: 100%;
+    opacity: 1;
+    font-weight: 700;
+    color: orangered;
+}
+
+#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell.error-row {
+    opacity: 0;
+}
+
+#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell._detail_selector.error-row {
+    opacity: 1;
+}
+
 #jobsDiv .jobview-splitter {
     height: 1px;
     width: 100%;
@@ -155,4 +176,10 @@ jobhistory-component {
 agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.even > .slick-cell,
 agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.odd > .slick-cell {
     cursor: pointer;
+}
+
+jobsview-component .jobview-grid > .monaco-table .slick-viewport > .grid-canvas
+
+.vs-dark .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+    border-left: 1px dotted white;
 }

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

@@ -82,7 +82,7 @@ <h1 class="job-heading">Jobs | {{this._agentJobInfo?.name}} </h1>
 <!-- Job History details -->
 <div class='history-details'>
 	<!-- Previous run list -->
-	<div style="width: 20%; overflow-y: scroll">
+	<div style="min-width: 275px">
 		<table *ngIf="_showPreviousRuns === true">
 			<tr>
 				<td class="date-column">
@@ -93,11 +93,11 @@ <h1 class="job-heading">Jobs | {{this._agentJobInfo?.name}} </h1>
 				</td>
 			</tr>
 		</table>
-		<h3 *ngIf="_showPreviousRuns === false">No Previous Runs Available</h3>
+		<h3 *ngIf="_showPreviousRuns === false" style="text-align: center">No Previous Runs Available</h3>
 		<div #table class="step-table prev-run-list" style="position: relative; height: 100%; width: 100%"></div>
 	</div>
 	<!-- Job Steps -->
-	<div class="job-steps">
+	<div class="job-steps" id="job-steps">
 		<h1 class="job-heading">
 			{{agentJobHistoryInfo?.runDate}}
 		</h1>

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./jobHistory';
-
 import { OnInit, OnChanges, Component, Inject, Input, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, Injectable } from '@angular/core';
 import { AgentJobHistoryInfo, AgentJobInfo } from 'sqlops';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -27,6 +26,8 @@ import { JobStepsViewComponent } from 'sql/parts/jobManagement/views/jobStepsVie
 import { JobStepsViewRow } from './jobStepsViewTree';
 import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService';
 import { AgentJobUtilities } from '../common/agentJobUtilities';
+import { ITreeOptions } from 'vs/base/parts/tree/browser/tree';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 
 export const DASHBOARD_SELECTOR: string = 'jobhistory-component';
 
@@ -84,7 +85,9 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 			this._jobCacheObject.serverName = serverName;
 			this._jobManagementService.addToCache(serverName, this._jobCacheObject);
 		}
-
+		$('#accordion').keypress(e => {
+			let meme = e;
+		});
 	}
 
 	ngOnInit() {
@@ -105,22 +108,24 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 			} else {
 				tree.setFocus(element, payload);
 				tree.setSelection([element], payload);
-				self.setStepsTree(element);
+					self.setStepsTree(element);
 			}
 			return true;
 		};
 		this._treeController.onKeyDown = (tree, event) => {
 			this._treeController.onKeyDownWrapper(tree, event);
 			let element = tree.getFocus();
-			self.setStepsTree(element);
+			if (element) {
+				self.setStepsTree(element);
+			}
 			return true;
-		}
+		};
 		this._tree = new Tree(this._tableContainer.nativeElement, {
 			controller: this._treeController,
 			dataSource: this._treeDataSource,
 			filter: this._treeFilter,
 			renderer: this._treeRenderer
-		});
+		}, {verticalScrollMode: ScrollbarVisibility.Visible});
 		this._register(attachListStyler(this._tree, this.bootstrapService.themeService));
 		this._tree.layout(1024);
 	}
@@ -154,7 +159,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 		}
 	}
 
-	loadHistory() {
+	private loadHistory() {
 		const self = this;
 		let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
 		this._jobManagementService.getJobHistory(ownerUri, this._agentViewComponent.jobId).then((result) => {
@@ -172,7 +177,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 			} else {
 				self._showPreviousRuns = false;
 				self._showSteps = false;
-				this._cd.detectChanges();
+				self._cd.detectChanges();
 			}
 		});
 	}

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

@@ -177,6 +177,7 @@ table.step-list tr.step-row td {
 	padding-left: 10px;
 	height: 100%;
 	width: 90%;
+	overflow-y: scroll;
 }
 
 .history-details > .job-steps {
@@ -235,4 +236,8 @@ table.step-list tr.step-row td {
 .steps-tree .monaco-tree .monaco-tree-row {
 	white-space: normal;
 	min-height: 40px !important;
+}
+
+jobhistory-component .history-details .step-table.prev-run-list .monaco-scrollable-element {
+	overflow-y: scroll !important;
 }

src/sql/parts/jobManagement/views/jobHistoryTree.ts

@@ -143,7 +143,7 @@ export class JobHistoryRenderer implements tree.IRenderer {
 	}
 
 	public renderElement(tree: tree.ITree, element: JobHistoryRow, templateId: string, templateData: IListTemplate): void {
-		templateData.label.innerText = element.runDate + '\t\t\t' + element.runStatus;
+		templateData.label.innerHTML = element.runDate + '  ' + element.runStatus;
 		let statusClass: string;
 		if (element.runStatus === 'Succeeded') {
 			statusClass = ' job-passed';

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

@@ -19,6 +19,7 @@ import { AgentJobHistoryInfo } from 'sqlops';
 import { JobStepsViewController, JobStepsViewDataSource, JobStepsViewFilter,
 	JobStepsViewRenderer, JobStepsViewRow, JobStepsViewModel} from 'sql/parts/jobManagement/views/jobStepsViewTree';
 import { JobHistoryComponent } from 'sql/parts/jobManagement/views/jobHistory.component';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 
 export const JOBSTEPSVIEW_SELECTOR: string = 'jobstepsview-component';
 
@@ -59,7 +60,7 @@ export class JobStepsViewComponent extends Disposable implements OnInit, AfterCo
 					dataSource: this._treeDataSource,
 					filter: this._treeFilter,
 					renderer: this._treeRenderer
-				});
+				}, {verticalScrollMode: ScrollbarVisibility.Visible});
 				this._register(attachListStyler(this._tree, this.bootstrapService.themeService));
 			}
 			this._tree.layout(JobStepsViewComponent._pageSize);
@@ -74,7 +75,7 @@ export class JobStepsViewComponent extends Disposable implements OnInit, AfterCo
 			dataSource: this._treeDataSource,
 			filter: this._treeFilter,
 			renderer: this._treeRenderer
-		});
+		}, {verticalScrollMode: ScrollbarVisibility.Visible});
 		this._register(attachListStyler(this._tree, this.bootstrapService.themeService));
 	}
 }

src/sql/parts/jobManagement/views/jobStepsViewTree.ts

@@ -19,7 +19,6 @@ import * as tree from 'vs/base/parts/tree/browser/tree';
 import * as TreeDefaults from 'vs/base/parts/tree/browser/treeDefaults';
 import { Promise, TPromise } from 'vs/base/common/winjs.base';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IAction } from 'vs/base/common/actions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { generateUuid } from 'vs/base/common/uuid';

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

@@ -5,7 +5,8 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div class="job-heading-container">
-	<h1 class="job-heading">Jobs</h1>
+	<h1 class="job-heading" *ngIf="_isCloud === false">Jobs</h1>
+	<h1 class="job-heading" *ngIf="_isCloud === true">No Jobs Available</h1>
 </div>
 
-<div #jobsgrid class="jobview-grid"></div>
+<div #jobsgrid class="jobview-grid"></div>