diff --git a/src/sql/parts/jobManagement/common/media/jobs.css b/src/sql/parts/jobManagement/common/media/jobs.css index f751462eb1..8bc31f2d52 100644 --- a/src/sql/parts/jobManagement/common/media/jobs.css +++ b/src/sql/parts/jobManagement/common/media/jobs.css @@ -49,12 +49,12 @@ jobhistory-component { font-size: larger; } -.vs-dark #jobsDiv .slick-cell { - background:#333333 !important; +.vs-dark #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { + background:#333333; } -#jobsDiv .slick-cell { - background: white !important; +#jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { + 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; diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts index 10b4851071..ff3b79511a 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.ts +++ b/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 - this.dataView = new Slick.Data.DataView(); + let options = >{ + 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()];