diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js index fda2ccd25a4..64a3784c276 100644 --- a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js +++ b/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", diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js index c1a6bfb5783..6b798200e18 100644 --- a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js +++ b/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", diff --git a/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js b/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js index 1254122ad44..95883e8284f 100644 --- a/services/static-webserver/client/source/class/osparc/theme/mixin/Color.js +++ b/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", diff --git a/services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExpandSelection.js b/services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExpandSelection.js index 60a0469c4c8..9e19c172db9 100644 --- a/services/static-webserver/client/source/class/osparc/ui/table/rowrenderer/ExpandSelection.js +++ b/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); } } }); diff --git a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js b/services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js index ddadf44332d..a6110b2714c 100644 --- a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js +++ b/services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js @@ -26,7 +26,7 @@ * * 
  *   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 ("" + msg + "");
-    },
-
-    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", "
");
         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 = [];
diff --git a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js b/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js
index 7eb6bbb4081..c9a1795bf4a 100644
--- a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerView.js
+++ b/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);
       });
diff --git a/services/static-webserver/client/source/resource/osparc/circle-exclamation-solid.svg b/services/static-webserver/client/source/resource/osparc/circle-exclamation-solid.svg
new file mode 100644
index 00000000000..fa80fe70833
--- /dev/null
+++ b/services/static-webserver/client/source/resource/osparc/circle-exclamation-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/services/static-webserver/client/source/resource/osparc/circle-info-solid.svg b/services/static-webserver/client/source/resource/osparc/circle-info-solid.svg
new file mode 100644
index 00000000000..64e1e26721a
--- /dev/null
+++ b/services/static-webserver/client/source/resource/osparc/circle-info-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/services/static-webserver/client/source/resource/osparc/circle-xmark-solid.svg b/services/static-webserver/client/source/resource/osparc/circle-xmark-solid.svg
new file mode 100644
index 00000000000..e7074e6aadf
--- /dev/null
+++ b/services/static-webserver/client/source/resource/osparc/circle-xmark-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file