Agent: Added highlighting for jobs (#1588)

* added highlighting for jobs

* cleaner code with theme compatibility

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

@@ -49,12 +49,12 @@ jobhistory-component {
     font-size: larger;
 }
 
-.vs-dark #jobsDiv .slick-cell {
+.vs-dark #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-	background:#333333 !important;
+    background:#333333;
 }
 
-#jobsDiv .slick-cell {
+#jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
-    background: white !important;
+    background: white;
     border-right: transparent !important;
     border-left: transparent !important;
     line-height: 33px !important;
@@ -207,6 +207,18 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od
     background: none;
 }
 
+#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
+#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
+#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered {
+    background: #dcdcdc !important;
+}
+
+.vs-dark #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
+.vs-dark #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
+.vs-dark #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+    background: #444444 !important;
+}
+
 table.jobprevruns div.bar1, table.jobprevruns div.bar2, table.jobprevruns div.bar3,
 table.jobprevruns div.bar4, table.jobprevruns div.bar5 {
     padding-top: 3px;

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

@@ -29,6 +29,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
+export const ROW_HEIGHT: number = 45;
 
 @Component({
 	selector: JOBSVIEW_SELECTOR,
@@ -146,8 +147,16 @@ export class JobsViewComponent implements AfterContentChecked {
 			column.rerenderOnResize = true;
 			return column;
 		});
-		// create the table
+		let options = <Slick.GridOptions<any>>{
-		this.dataView = new Slick.Data.DataView();
+			syncColumnCellResize: true,
+			enableColumnReorder: false,
+			rowHeight: ROW_HEIGHT,
+			enableCellNavigation: true,
+			forceFitColumns: true
+		};
+
+		this.dataView = new Slick.Data.DataView({ inlineFilters: false });
+
 		let rowDetail = new RowDetailView({
 			cssClass: '_detail_selector',
 			process: (job) => {
@@ -354,6 +363,44 @@ export class JobsViewComponent implements AfterContentChecked {
 				self.createJobChart(job.jobId, previousRuns);
 			});
 		});
+		$('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e) => {
+			// highlight the error row as well if a failing job row is hovered
+			if (e.currentTarget.children.item(0).classList.contains('job-with-error')) {
+				let target = $(e.currentTarget);
+				let targetChildren = $(e.currentTarget.children);
+				let siblings = target.nextAll().toArray();
+				let top = parseInt(target.css('top'), 10);
+				for (let i = 0; i < siblings.length; i++) {
+					let sibling = siblings[i];
+					let siblingTop = parseInt($(sibling).css('top'), 10);
+					if (siblingTop === top + ROW_HEIGHT) {
+						$(sibling.children).addClass('hovered');
+						sibling.onmouseenter = (e) => {
+							targetChildren.addClass('hovered');
+						};
+						sibling.onmouseleave = (e) => {
+							targetChildren.removeClass('hovered');
+						}
+						break;
+					}
+				}
+			}
+		}, (e) => {
+			// switch back to original background
+			if (e.currentTarget.children.item(0).classList.contains('job-with-error')) {
+				let target = $(e.currentTarget);
+				let siblings = target.nextAll().toArray();
+				let top = parseInt(target.css('top'), 10);
+				for (let i = 0; i < siblings.length; i++) {
+					let sibling = siblings[i];
+					let siblingTop = parseInt($(sibling).css('top'), 10);
+					if (siblingTop === top + ROW_HEIGHT) {
+						$(sibling.children).removeClass('hovered');
+						break;
+					}
+				}
+			}
+		});
 		// cache the dataview for future use
 		this._jobCacheObject.dataView = this.dataView;
 		this.filterValueMap['start'] = [[], this.dataView.getItems()];