🎨 [Frontend] Credits summary: Show time (#6356)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js

@@ -84,9 +84,10 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", {
     },
 
     __handleOutsideEvent: function(event) {
+      const offset = 30;
       if (
-        !osparc.utils.Utils.isMouseOnElement(this.__creditsContainer, event) &&
-        !osparc.utils.Utils.isMouseOnElement(this, event)
+        !osparc.utils.Utils.isMouseOnElement(this.__creditsContainer, event, offset) &&
+        !osparc.utils.Utils.isMouseOnElement(this, event, offset)
       ) {
         this.__hideCreditsContainer();
       }

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsPerService.js

@@ -61,20 +61,31 @@ qx.Class.define("osparc.desktop.credits.CreditsPerService", {
           this._removeAll();
           if (entries && entries.length) {
             let totalCredits = 0;
-            entries.forEach(entry => totalCredits+= entry["osparc_credits"]);
+            let totalHours = 0;
+            entries.forEach(entry => {
+              totalHours += entry["running_time_in_hours"]
+              totalCredits+= entry["osparc_credits"]
+            });
             let datas = [];
             entries.forEach(entry => {
               datas.push({
                 service: entry["service_key"],
                 credits: -1*entry["osparc_credits"],
-                percentage: 100*entry["osparc_credits"]/totalCredits,
+                hours: entry["running_time_in_hours"],
+                percentageHours: totalHours ? 100*entry["running_time_in_hours"]/totalHours : 0,
+                percentageCredits: totalCredits ? 100*entry["osparc_credits"]/totalCredits : 0,
               });
             });
-            datas.sort((a, b) => b.percentage - a.percentage);
+            datas.sort((a, b) => {
+              if (b.credits !== a.credits) {
+                return b.credits - a.credits;
+              }
+              return b.hours - a.hours;
+            });
             // top 5 services
             datas = datas.slice(0, 5);
             datas.forEach(data => {
-              const uiEntry = new osparc.desktop.credits.CreditsServiceListItem(data.service, data.credits, data.percentage);
+              const uiEntry = new osparc.desktop.credits.CreditsServiceListItem(data.service, data.credits, data.hours, totalCredits === 0 ? data.percentageHours : data.percentageCredits);
               this._add(uiEntry);
             });
           } else {

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsServiceListItem.js

@@ -18,14 +18,15 @@
 qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
   extend: osparc.ui.list.ListItem,
 
-  construct: function(serviceKey, credits, percentage) {
+  construct: function(serviceKey, credits, hours, percentage) {
     this.base(arguments);
 
     const layout = this._getLayout();
     layout.setSpacingX(12);
     layout.setSpacingY(4);
     layout.setColumnFlex(this.self().GRID.ICON.column, 0);
     layout.setColumnFlex(this.self().GRID.NAME.column, 1);
+    layout.setColumnFlex(this.self().GRID.TIME.column, 0);
     layout.setColumnFlex(this.self().GRID.CREDITS.column, 0);
 
     const icon = this.getChildControl("icon");
@@ -43,6 +44,7 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
       maximum: 100,
       value: percentage
     });
+    this.getChildControl("time").setValue(hours + " h");
     this.getChildControl("credits").setValue(credits + " used");
   },
 
@@ -61,10 +63,15 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
         column: 1,
         row: 1
       },
-      CREDITS: {
+      TIME: {
         column: 2,
         row: 0,
         rowSpan: 2
+      },
+      CREDITS: {
+        column: 3,
+        row: 0,
+        rowSpan: 2
       }
     }
   },
@@ -109,6 +116,13 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
           });
           this._add(control, this.self().GRID.PERCENTAGE);
           break;
+        case "time":
+          control = new qx.ui.basic.Label().set({
+            font: "text-14",
+            alignY: "middle"
+          });
+          this._add(control, this.self().GRID.TIME);
+          break;
         case "credits":
           control = new qx.ui.basic.Label().set({
             font: "text-14",

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsSummary.js

@@ -26,7 +26,8 @@ qx.Class.define("osparc.desktop.credits.CreditsSummary", {
     this.set({
       appearance: "floating-menu",
       padding: 8,
-      maxWidth: this.self().WIDTH
+      maxWidth: this.self().WIDTH,
+      zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,
     });
     osparc.utils.Utils.setIdToWidget(this, "creditsSummary");
 
@@ -41,7 +42,7 @@ qx.Class.define("osparc.desktop.credits.CreditsSummary", {
 
   statics: {
     BILLING_CENTER_BUTTON_SIZE: 26,
-    WIDTH: 300,
+    WIDTH: 350,
     TIME_RANGES: [{
       key: 1,
       label: "Today"