Skip to content

Commit 661f229

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Friendlier logger (#6907)
1 parent c74f4b0 commit 661f229

File tree

9 files changed

+66
-61
lines changed

9 files changed

+66
-61
lines changed

‎services/static-webserver/client/source/class/osparc/theme/ColorDark.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
118118
"border-invalid": "failed-red",
119119
"border-disabled": "background-main",
120120

121-
// separator
122-
"border-separator": "fab-background",
123-
124121
// tooltip
125122
"tooltip": "flash_message_bg",
126123
"tooltip-text": "text",
@@ -133,11 +130,11 @@ qx.Theme.define("osparc.theme.ColorDark", {
133130

134131
// used in table code
135132
"table-header-cell": "background-main",
136-
"table-row-background-focused-selected": "background-main-4",
137-
"table-row-background-focused": "background-main-3",
138-
"table-row-background-selected": "background-main-4",
139133
"table-row-background-even": "background-main",
140134
"table-row-background-odd": "background-main",
135+
"table-row-background-focused": "background-main-1",
136+
"table-row-background-focused-selected": "background-main-2",
137+
"table-row-background-selected": "background-main-2",
141138

142139
// foreground
143140
"table-row-selected": "c12",

‎services/static-webserver/client/source/class/osparc/theme/ColorLight.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
119119
"border-invalid": "failed-red",
120120
"border-disabled": "background-main",
121121

122-
// separator
123-
"border-separator": "background-main-3",
124-
125122
// tooltip
126123
"tooltip": "flash_message_bg",
127124
"tooltip-text": "text",
@@ -135,11 +132,11 @@ qx.Theme.define("osparc.theme.ColorLight", {
135132

136133
// used in table code
137134
"table-header-cell": "background-main",
138-
"table-row-background-focused-selected": "background-main-4",
139-
"table-row-background-focused": "background-main-3",
140-
"table-row-background-selected": "background-main-4",
141135
"table-row-background-even": "background-main",
142136
"table-row-background-odd": "background-main",
137+
"table-row-background-focused": "background-main-1",
138+
"table-row-background-focused-selected": "background-main-2",
139+
"table-row-background-selected": "background-main-2",
143140

144141
// foreground
145142
"table-row-selected": "c12",

‎services/static-webserver/client/source/class/osparc/theme/mixin/Color.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ qx.Theme.define("osparc.theme.mixin.Color", {
4646

4747
"status_icon": "rgba(255, 255, 255, 1)",
4848

49+
// separator
50+
"border-separator": "product-color",
51+
4952
"visual-blue": "#007fd4", // Visual Studio blue
5053

5154
"logger-warning-message": "warning-yellow",

‎services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExpandSelection.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,33 @@
1818
qx.Class.define("osparc.ui.table.rowrenderer.ExpandSelection", {
1919
extend: qx.ui.table.rowrenderer.Default,
2020

21+
construct: function(_, expandableColPos = 2) {
22+
this.base(arguments);
23+
24+
this.__expandableColPos = expandableColPos;
25+
},
26+
2127
members: {
28+
__expandableColPos: null,
29+
2230
// overridden
2331
updateDataRowElement : function(rowInfo, rowElem) {
2432
this.base(arguments, rowInfo, rowElem);
2533

26-
const messageCellPos = 2;
27-
// extend collapse row
2834
const style = rowElem.style;
29-
if (rowInfo.selected) {
30-
let messageDiv = rowElem.children.item(messageCellPos)
31-
if (rowElem.children.item(messageCellPos).children.length) {
32-
messageDiv = rowElem.children.item(messageCellPos).children.item(0);
33-
}
34-
const extendedHeight = messageDiv.getBoundingClientRect().height + "px";
35-
style.height = extendedHeight;
36-
Array.from(rowElem.children).forEach(child => child.style.height = extendedHeight);
37-
} else {
38-
style.height = "19px";
35+
36+
const rowClicked = () => {
37+
// switch it's expanded if it was already expanded
38+
rowInfo.expanded = !rowInfo.expanded;
39+
40+
const messageDiv = rowElem.children.item(this.__expandableColPos);
41+
const expandedHeight = messageDiv.scrollHeight;
42+
const newHeight = (rowInfo.expanded ? expandedHeight : 19) + "px";
43+
style.height = newHeight
44+
Array.from(rowElem.children).forEach(child => child.style.height = newHeight);
3945
}
46+
rowElem.removeEventListener("click", rowClicked);
47+
rowElem.addEventListener("click", rowClicked);
4048
}
4149
}
4250
});

‎services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
*
2727
* <pre class='javascript'>
2828
* let tableModel = this.__logModel = new osparc.widget.logger.LoggerTable();
29-
* tableModel.setColumns(["Timestamp", "Origin", "Message"], ["time", "who", "whatRich"]);
29+
* tableModel.setColumns(["Level", "Time", "Origin", "Message"], ["level", "time", "who", "whatRich"]);
3030
* let custom = {
3131
* tableColumnModel : function(obj) {
3232
* return new qx.ui.table.columnmodel.Resize(obj);
@@ -49,19 +49,18 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
4949
this.base(arguments);
5050

5151
this.setColumns([
52+
"",
5253
"Time",
5354
"Origin",
5455
"Message"
5556
], [
57+
"level",
5658
"time",
5759
"who",
5860
"msgRich"
5961
]);
6062

6163
this.__rawData = [];
62-
63-
const themeManager = qx.theme.manager.Meta.getInstance();
64-
themeManager.addListener("changeTheme", () => this.__themeChanged());
6564
},
6665

6766
properties: {
@@ -79,22 +78,21 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
7978
},
8079

8180
statics: {
82-
addColorTag: function(msg, color) {
83-
return ("<font color=" + color +">" + msg + "</font>");
84-
},
85-
86-
getLevelColor: function(logLevel) {
87-
const colorManager = qx.theme.manager.Color.getInstance();
88-
let logColor = null;
81+
getLevelIcon: function(logLevel) {
8982
const logLevels = osparc.widget.logger.LoggerView.LOG_LEVELS;
90-
Object.keys(logLevels).forEach(logLevelKey => {
91-
const logString = logLevelKey.toLowerCase();
92-
const logNumber = logLevels[logLevelKey];
93-
if (logNumber === logLevel) {
94-
logColor = colorManager.resolve("logger-"+logString+"-message");
95-
}
96-
});
97-
return logColor ? logColor : colorManager.resolve("logger-info-message");
83+
let iconSource = "";
84+
switch (logLevel) {
85+
case logLevels.INFO:
86+
iconSource = "osparc/circle-info-solid.svg";
87+
break;
88+
case logLevels.WARNING:
89+
iconSource = "osparc/circle-exclamation-solid.svg";
90+
break;
91+
case logLevels.ERROR:
92+
iconSource = "osparc/circle-xmark-solid.svg";
93+
break;
94+
}
95+
return iconSource;
9896
}
9997
},
10098

@@ -112,10 +110,10 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
112110

113111
addRows: function(newRows) {
114112
newRows.forEach(newRow => {
115-
const levelColor = this.self().getLevelColor(newRow.logLevel);
113+
newRow["level"] = this.self().getLevelIcon(newRow.logLevel);
116114
newRow["time"] = osparc.utils.Utils.formatTime(newRow.timeStamp, true);
117115
newRow["who"] = newRow.label;
118-
newRow["msgRich"] = this.self().addColorTag(newRow.msg, levelColor);
116+
newRow["msgRich"] = newRow.msg.replaceAll("\n", "<br>");
119117
this.__rawData.push(newRow);
120118
});
121119
},
@@ -129,15 +127,6 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
129127
});
130128
},
131129

132-
__themeChanged: function() {
133-
this.__rawData.forEach(row => {
134-
const levelColor = this.self().getLevelColor(row.logLevel);
135-
row["time"] = osparc.utils.Utils.formatTime(row.timeStamp, true);
136-
row["who"] = row.label;
137-
row["msgRich"] = this.self().addColorTag(row.msg, levelColor);
138-
});
139-
},
140-
141130
clearTable: function() {
142131
const rawLength = this.__rawData.length;
143132
this.__rawData = [];

‎services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,10 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
8282

8383
statics: {
8484
POS: {
85-
TIMESTAMP: 0,
86-
ORIGIN: 1,
87-
MESSAGE: 2
85+
LOG_LEVEL: 0,
86+
TIMESTAMP: 1,
87+
ORIGIN: 2,
88+
MESSAGE: 3,
8889
},
8990

9091
LOG_LEVELS: {
@@ -152,6 +153,11 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
152153
}
153154
case "log-level": {
154155
const toolbar = this.getChildControl("toolbar");
156+
const minLogLevelLabel = new qx.ui.basic.Label().set({
157+
value: this.tr("Min log-level"),
158+
alignY: "middle",
159+
});
160+
toolbar.add(minLogLevelLabel);
155161
control = new qx.ui.form.SelectBox().set({
156162
appearance: "toolbar-selectbox",
157163
maxWidth: 80
@@ -275,18 +281,20 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
275281
// alwaysUpdateCells
276282
osparc.utils.Utils.setIdToWidget(table, "logsViewer");
277283
const colModel = table.getTableColumnModel();
284+
colModel.setDataCellRenderer(this.self().POS.LOG_LEVEL, new qx.ui.table.cellrenderer.Image(14, 14));
278285
colModel.setDataCellRenderer(this.self().POS.TIMESTAMP, new osparc.ui.table.cellrenderer.Html().set({
279286
defaultCellStyle: "user-select: text"
280287
}));
281-
colModel.setDataCellRenderer(this.self().POS.ORIGIN, new qx.ui.table.cellrenderer.Html());
288+
colModel.setDataCellRenderer(this.self().POS.ORIGIN, new osparc.ui.table.cellrenderer.Html());
282289
colModel.setDataCellRenderer(this.self().POS.MESSAGE, new osparc.ui.table.cellrenderer.Html().set({
283290
defaultCellStyle: "user-select: text; text-wrap: wrap"
284291
}));
285-
let resizeBehavior = colModel.getBehavior();
292+
const resizeBehavior = colModel.getBehavior();
293+
resizeBehavior.setWidth(this.self().POS.LOG_LEVEL, 35);
286294
resizeBehavior.setWidth(this.self().POS.TIMESTAMP, 80);
287295
resizeBehavior.setWidth(this.self().POS.ORIGIN, 100);
288296

289-
table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(table));
297+
table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(table, this.self().POS.MESSAGE));
290298

291299
this.__applyFilters();
292300

@@ -398,12 +406,12 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
398406
const msgLogs = [];
399407
msgs.forEach(msg => {
400408
const msgLog = {
409+
logLevel,
401410
timeStamp: new Date(),
402411
nodeId,
403412
label,
404413
msg,
405414
tooltip: msg,
406-
logLevel
407415
};
408416
msgLogs.push(msgLog);
409417
});

‎services/static-webserver/client/source/resource/osparc/circle-exclamation-solid.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎services/static-webserver/client/source/resource/osparc/circle-info-solid.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎services/static-webserver/client/source/resource/osparc/circle-xmark-solid.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)