Skip to content

Commit

Permalink
PAYARA-4097 fixed grid empty cells and settings visibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbee
jbee committed Sep 18, 2019
1 parent 6314002 commit b9b28af
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 27 deletions.
2 changes: 1 addition & 1 deletion appserver/monitoring-console/webapp/src/main/webapp/mc-model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ MonitoringConsole.Model = (function() {
}
}
// give the layout a uniform row number
let maxRows = layout.map(column => column.length).reduce((acc, cur) => acc ? Math.max(acc, cur) : cur);
let maxRows = Math.max(numberOfColumns, layout.map(column => column.length).reduce((acc, cur) => acc ? Math.max(acc, cur) : cur));
for (let col = 0; col < numberOfColumns; col++) {
while (layout[col].length < maxRows) {
layout[col].push(null);
Expand Down
29 changes: 17 additions & 12 deletions appserver/monitoring-console/webapp/src/main/webapp/mc-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,16 +129,15 @@ MonitoringConsole.View = (function() {
return $('<div/>', {"class": "caption-bar"})
.append($('<h3/>', {title: 'Select '+series}).html(formatSeriesName(cell.widget))
.click(() => onWidgetToolbarClick(cell.widget)))
.append($('<button/>', { "class": "btnIcon btnClose", title:'Remove chart from page' }).html('&times;')
.click(onWidgetDelete))
.append($('<button/>', { "class": "btnIcon", title:'Enlarge this chart' }).html('&plus;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanMore(series))))
.append($('<button/>', { "class": "btnIcon", title:'Shrink this chart' }).html('&minus;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanLess(series))))
.append($('<button/>', { "class": "btnIcon", title:'Move to right' }).html('&#9655;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveRight(series))))
.append($('<button/>', { "class": "btnIcon", title:'Move to left'}).html('&#9665;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveLeft(series))));
.append(createToolbarButton('Remove chart from page', '&times;', onWidgetDelete))
.append(createToolbarButton('Enlarge this chart', '&plus;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanMore(series))))
.append(createToolbarButton('Shrink this chart', '&minus;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanLess(series))))
.append(createToolbarButton('Move to right', '&#9655;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveRight(series))))
.append(createToolbarButton('Move to left', '&#9665;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveLeft(series))));
}

function createToolbarButton(title, icon, onClick) {
return $('<button/>', { "class": "btnIcon", title: title}).html(icon).click(onClick);
}

/**
Expand Down Expand Up @@ -228,7 +227,13 @@ MonitoringConsole.View = (function() {
}

function createSettingsHeaderRow(caption) {
return $('<tr/>').append($('<th/>', {colspan: 2, text: caption}));
return $('<tr/>').append($('<th/>', {colspan: 2, text: caption}).click(function() {
let tr = $(this).closest('tr').next();
while (tr.length > 0 && !tr.children('th').length > 0) {
tr.children().toggle();
tr = tr.next();
}
}));
}

function createSettingsCheckboxRow(label, checked, onChange) {
Expand Down Expand Up @@ -342,7 +347,7 @@ MonitoringConsole.View = (function() {
td.append(createWidgetTargetContainer(cell));
tr.append(td);
} else if (cell === null) {
tr.append($("<td/>"));
tr.append($("<td/>", { 'class': 'widget', style: 'height: '+rowHeight+'px;'}));
}
}
table.append(tr);
Expand Down
3 changes: 2 additions & 1 deletion appserver/monitoring-console/webapp/src/main/webapp/monitoring-console.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ button:hover {
background-color: transparent;
font-weight: bold;
}
.btnClose {
.btnIcon:first-of-type {
margin-left: 15px;
}
button.btnIcon:hover {
Expand Down Expand Up @@ -244,6 +244,7 @@ button.btnClose + .settings {
}
.settings th {
border-bottom: 1px solid #bbb;
cursor: pointer;
}
.settings td:first-child {
width: 120px;
Expand Down
31 changes: 18 additions & 13 deletions appserver/monitoring-console/webapp/src/main/webapp/monitoring-console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ MonitoringConsole.Model = (function() {
}
}
// give the layout a uniform row number
let maxRows = layout.map(column => column.length).reduce((acc, cur) => acc ? Math.max(acc, cur) : cur);
let maxRows = Math.max(numberOfColumns, layout.map(column => column.length).reduce((acc, cur) => acc ? Math.max(acc, cur) : cur));
for (let col = 0; col < numberOfColumns; col++) {
while (layout[col].length < maxRows) {
layout[col].push(null);
Expand Down Expand Up @@ -1216,16 +1216,15 @@ MonitoringConsole.View = (function() {
return $('<div/>', {"class": "caption-bar"})
.append($('<h3/>', {title: 'Select '+series}).html(formatSeriesName(cell.widget))
.click(() => onWidgetToolbarClick(cell.widget)))
.append($('<button/>', { "class": "btnIcon btnClose", title:'Remove chart from page' }).html('&times;')
.click(onWidgetDelete))
.append($('<button/>', { "class": "btnIcon", title:'Enlarge this chart' }).html('&plus;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanMore(series))))
.append($('<button/>', { "class": "btnIcon", title:'Shrink this chart' }).html('&minus;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanLess(series))))
.append($('<button/>', { "class": "btnIcon", title:'Move to right' }).html('&#9655;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveRight(series))))
.append($('<button/>', { "class": "btnIcon", title:'Move to left'}).html('&#9665;')
.click(() => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveLeft(series))));
.append(createToolbarButton('Remove chart from page', '&times;', onWidgetDelete))
.append(createToolbarButton('Enlarge this chart', '&plus;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanMore(series))))
.append(createToolbarButton('Shrink this chart', '&minus;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.spanLess(series))))
.append(createToolbarButton('Move to right', '&#9655;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveRight(series))))
.append(createToolbarButton('Move to left', '&#9665;', () => onPageUpdate(MonitoringConsole.Model.Page.Widgets.moveLeft(series))));
}

function createToolbarButton(title, icon, onClick) {
return $('<button/>', { "class": "btnIcon", title: title}).html(icon).click(onClick);
}

/**
Expand Down Expand Up @@ -1315,7 +1314,13 @@ MonitoringConsole.View = (function() {
}

function createSettingsHeaderRow(caption) {
return $('<tr/>').append($('<th/>', {colspan: 2, text: caption}));
return $('<tr/>').append($('<th/>', {colspan: 2, text: caption}).click(function() {
let tr = $(this).closest('tr').next();
while (tr.length > 0 && !tr.children('th').length > 0) {
tr.children().toggle();
tr = tr.next();
}
}));
}

function createSettingsCheckboxRow(label, checked, onChange) {
Expand Down Expand Up @@ -1429,7 +1434,7 @@ MonitoringConsole.View = (function() {
td.append(createWidgetTargetContainer(cell));
tr.append(td);
} else if (cell === null) {
tr.append($("<td/>"));
tr.append($("<td/>", { 'class': 'widget', style: 'height: '+rowHeight+'px;'}));
}
}
table.append(tr);
Expand Down

0 comments on commit b9b28af

Please sign in to comment.