🎨 [Frontend] Friendlier logger (ITISFoundation#6907)

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

@@ -118,9 +118,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "border-invalid": "failed-red",
     "border-disabled": "background-main",
 
-    // separator
-    "border-separator": "fab-background",
-
     // tooltip
     "tooltip": "flash_message_bg",
     "tooltip-text": "text",
@@ -133,11 +130,11 @@ qx.Theme.define("osparc.theme.ColorDark", {
 
     // used in table code
     "table-header-cell": "background-main",
-    "table-row-background-focused-selected": "background-main-4",
-    "table-row-background-focused": "background-main-3",
-    "table-row-background-selected": "background-main-4",
     "table-row-background-even": "background-main",
     "table-row-background-odd": "background-main",
+    "table-row-background-focused": "background-main-1",
+    "table-row-background-focused-selected": "background-main-2",
+    "table-row-background-selected": "background-main-2",
 
     // foreground
     "table-row-selected": "c12",

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

@@ -119,9 +119,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "border-invalid": "failed-red",
     "border-disabled": "background-main",
 
-    // separator
-    "border-separator": "background-main-3",
-
     // tooltip
     "tooltip": "flash_message_bg",
     "tooltip-text": "text",
@@ -135,11 +132,11 @@ qx.Theme.define("osparc.theme.ColorLight", {
 
     // used in table code
     "table-header-cell": "background-main",
-    "table-row-background-focused-selected": "background-main-4",
-    "table-row-background-focused": "background-main-3",
-    "table-row-background-selected": "background-main-4",
     "table-row-background-even": "background-main",
     "table-row-background-odd": "background-main",
+    "table-row-background-focused": "background-main-1",
+    "table-row-background-focused-selected": "background-main-2",
+    "table-row-background-selected": "background-main-2",
 
     // foreground
     "table-row-selected": "c12",

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

@@ -46,6 +46,9 @@ qx.Theme.define("osparc.theme.mixin.Color", {
 
     "status_icon": "rgba(255, 255, 255, 1)",
 
+    // separator
+    "border-separator": "product-color",
+
     "visual-blue": "#007fd4", // Visual Studio blue
 
     "logger-warning-message": "warning-yellow",

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

@@ -18,25 +18,33 @@
 qx.Class.define("osparc.ui.table.rowrenderer.ExpandSelection", {
   extend: qx.ui.table.rowrenderer.Default,
 
+  construct: function(_, expandableColPos = 2) {
+    this.base(arguments);
+
+    this.__expandableColPos = expandableColPos;
+  },
+
   members: {
+    __expandableColPos: null,
+
     // overridden
     updateDataRowElement : function(rowInfo, rowElem) {
       this.base(arguments, rowInfo, rowElem);
 
-      const messageCellPos = 2;
-      // extend collapse row
       const style = rowElem.style;
-      if (rowInfo.selected) {
-        let messageDiv = rowElem.children.item(messageCellPos)
-        if (rowElem.children.item(messageCellPos).children.length) {
-          messageDiv = rowElem.children.item(messageCellPos).children.item(0);
-        }
-        const extendedHeight = messageDiv.getBoundingClientRect().height + "px";
-        style.height = extendedHeight;
-        Array.from(rowElem.children).forEach(child => child.style.height = extendedHeight);
-      } else {
-        style.height = "19px";
+
+      const rowClicked = () => {
+        // switch it's expanded if it was already expanded
+        rowInfo.expanded = !rowInfo.expanded;
+
+        const messageDiv = rowElem.children.item(this.__expandableColPos);
+        const expandedHeight = messageDiv.scrollHeight;
+        const newHeight = (rowInfo.expanded ? expandedHeight : 19) + "px";
+        style.height = newHeight
+        Array.from(rowElem.children).forEach(child => child.style.height = newHeight);
       }
+      rowElem.removeEventListener("click", rowClicked);
+      rowElem.addEventListener("click", rowClicked);
     }
   }
 });

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

@@ -26,7 +26,7 @@
  *
  * <pre class='javascript'>
  *   let tableModel = this.__logModel = new osparc.widget.logger.LoggerTable();
- *   tableModel.setColumns(["Timestamp", "Origin", "Message"], ["time", "who", "whatRich"]);
+ *   tableModel.setColumns(["Level", "Time", "Origin", "Message"], ["level", "time", "who", "whatRich"]);
  *   let custom = {
  *     tableColumnModel : function(obj) {
  *       return new qx.ui.table.columnmodel.Resize(obj);
@@ -49,19 +49,18 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
     this.base(arguments);
 
     this.setColumns([
+      "",
       "Time",
       "Origin",
       "Message"
     ], [
+      "level",
       "time",
       "who",
       "msgRich"
     ]);
 
     this.__rawData = [];
-
-    const themeManager = qx.theme.manager.Meta.getInstance();
-    themeManager.addListener("changeTheme", () => this.__themeChanged());
   },
 
   properties: {
@@ -79,22 +78,21 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
   },
 
   statics: {
-    addColorTag: function(msg, color) {
-      return ("<font color=" + color +">" + msg + "</font>");
-    },
-
-    getLevelColor: function(logLevel) {
-      const colorManager = qx.theme.manager.Color.getInstance();
-      let logColor = null;
+    getLevelIcon: function(logLevel) {
       const logLevels = osparc.widget.logger.LoggerView.LOG_LEVELS;
-      Object.keys(logLevels).forEach(logLevelKey => {
-        const logString = logLevelKey.toLowerCase();
-        const logNumber = logLevels[logLevelKey];
-        if (logNumber === logLevel) {
-          logColor = colorManager.resolve("logger-"+logString+"-message");
-        }
-      });
-      return logColor ? logColor : colorManager.resolve("logger-info-message");
+      let iconSource = "";
+      switch (logLevel) {
+        case logLevels.INFO:
+          iconSource = "osparc/circle-info-solid.svg";
+          break;
+        case logLevels.WARNING:
+          iconSource = "osparc/circle-exclamation-solid.svg";
+          break;
+        case logLevels.ERROR:
+          iconSource = "osparc/circle-xmark-solid.svg";
+          break;
+      }
+      return iconSource;
     }
   },
 
@@ -112,10 +110,10 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
 
     addRows: function(newRows) {
       newRows.forEach(newRow => {
-        const levelColor = this.self().getLevelColor(newRow.logLevel);
+        newRow["level"] = this.self().getLevelIcon(newRow.logLevel);
         newRow["time"] = osparc.utils.Utils.formatTime(newRow.timeStamp, true);
         newRow["who"] = newRow.label;
-        newRow["msgRich"] = this.self().addColorTag(newRow.msg, levelColor);
+        newRow["msgRich"] = newRow.msg.replaceAll("\n", "<br>");
         this.__rawData.push(newRow);
       });
     },
@@ -129,15 +127,6 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
       });
     },
 
-    __themeChanged: function() {
-      this.__rawData.forEach(row => {
-        const levelColor = this.self().getLevelColor(row.logLevel);
-        row["time"] = osparc.utils.Utils.formatTime(row.timeStamp, true);
-        row["who"] = row.label;
-        row["msgRich"] = this.self().addColorTag(row.msg, levelColor);
-      });
-    },
-
     clearTable: function() {
       const rawLength = this.__rawData.length;
       this.__rawData = [];

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

@@ -82,9 +82,10 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
 
   statics: {
     POS: {
-      TIMESTAMP: 0,
-      ORIGIN: 1,
-      MESSAGE: 2
+      LOG_LEVEL: 0,
+      TIMESTAMP: 1,
+      ORIGIN: 2,
+      MESSAGE: 3,
     },
 
     LOG_LEVELS: {
@@ -152,6 +153,11 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
         }
         case "log-level": {
           const toolbar = this.getChildControl("toolbar");
+          const minLogLevelLabel = new qx.ui.basic.Label().set({
+            value: this.tr("Min log-level"),
+            alignY: "middle",
+          });
+          toolbar.add(minLogLevelLabel);
           control = new qx.ui.form.SelectBox().set({
             appearance: "toolbar-selectbox",
             maxWidth: 80
@@ -275,18 +281,20 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
       // alwaysUpdateCells
       osparc.utils.Utils.setIdToWidget(table, "logsViewer");
       const colModel = table.getTableColumnModel();
+      colModel.setDataCellRenderer(this.self().POS.LOG_LEVEL, new qx.ui.table.cellrenderer.Image(14, 14));
       colModel.setDataCellRenderer(this.self().POS.TIMESTAMP, new osparc.ui.table.cellrenderer.Html().set({
         defaultCellStyle: "user-select: text"
       }));
-      colModel.setDataCellRenderer(this.self().POS.ORIGIN, new qx.ui.table.cellrenderer.Html());
+      colModel.setDataCellRenderer(this.self().POS.ORIGIN, new osparc.ui.table.cellrenderer.Html());
       colModel.setDataCellRenderer(this.self().POS.MESSAGE, new osparc.ui.table.cellrenderer.Html().set({
         defaultCellStyle: "user-select: text; text-wrap: wrap"
       }));
-      let resizeBehavior = colModel.getBehavior();
+      const resizeBehavior = colModel.getBehavior();
+      resizeBehavior.setWidth(this.self().POS.LOG_LEVEL, 35);
       resizeBehavior.setWidth(this.self().POS.TIMESTAMP, 80);
       resizeBehavior.setWidth(this.self().POS.ORIGIN, 100);
 
-      table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(table));
+      table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(table, this.self().POS.MESSAGE));
 
       this.__applyFilters();
 
@@ -398,12 +406,12 @@ qx.Class.define("osparc.widget.logger.LoggerView", {
       const msgLogs = [];
       msgs.forEach(msg => {
         const msgLog = {
+          logLevel,
           timeStamp: new Date(),
           nodeId,
           label,
           msg,
           tooltip: msg,
-          logLevel
         };
         msgLogs.push(msgLog);
       });