Agent: Added highlighting for jobs (#1588)

* added highlighting for jobs

* cleaner code with theme compatibility
This commit is contained in:
Aditya Bist
2018-06-18 10:55:40 -07:00
committed by GitHub
parent 6590d5f58a
commit c1d850804c
2 changed files with 65 additions and 6 deletions

View File

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

View File

@@ -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 = <Slick.GridOptions<any>>{
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()];