Skip to content

Commit

Permalink
🎨 Frontend: Usage table: show root_parent_project_name instead of…
Browse files Browse the repository at this point in the history 
… ``project_name`` (ITISFoundation#5908)
  • Loading branch information
@odeimaiz
odeimaiz authored Jun 4, 2024
1 parent 0538066 commit 36ae834
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 58 deletions.
71 changes: 59 additions & 12 deletions services/static-webserver/client/source/class/osparc/desktop/credits/UsageTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ qx.Class.define("osparc.desktop.credits.UsageTable", {

const columnModel = this.getTableColumnModel();

columnModel.setDataCellRenderer(6, new qx.ui.table.cellrenderer.Number());
columnModel.setDataCellRenderer(this.self().COLS.COST.column, new qx.ui.table.cellrenderer.Number());

if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {
columnModel.setColumnVisible(6, false);
columnModel.setColumnVisible(7, false);
columnModel.setColumnVisible(this.self().COLS.COST.column, false);
columnModel.setColumnVisible(this.self().COLS.USER.column, false);
}
columnModel.setColumnVisible(2, false)
columnModel.setColumnVisible(this.self().COLS.SERVICE.column, false);

// Array [0, 1, ..., N] where N is column_count - 1 (default column order)
this.__columnOrder = [...Array(columnModel.getOverallColumnCount()).keys()]
Expand All @@ -62,12 +62,59 @@ qx.Class.define("osparc.desktop.credits.UsageTable", {
}
}, this)

columnModel.setColumnWidth(0, 130)
columnModel.setColumnWidth(1, 130)
columnModel.setColumnWidth(3, 130)
columnModel.setColumnWidth(4, 70)
columnModel.setColumnWidth(5, 70)
columnModel.setColumnWidth(6, 56)
columnModel.setColumnWidth(7, 130)
Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));
},

statics: {
COLS: {
PROJECT: {
id: "project",
column: 0,
label: osparc.product.Utils.getStudyAlias({firstUpperCase: true}),
width: 140
},
NODE: {
id: "node",
column: 1,
label: qx.locale.Manager.tr("Node"),
width: 140
},
SERVICE: {
id: "service",
column: 2,
label: qx.locale.Manager.tr("Service"),
width: 140
},
START: {
id: "start",
column: 3,
label: qx.locale.Manager.tr("Start"),
width: 130
},
DURATION: {
id: "duration",
column: 4,
label: qx.locale.Manager.tr("Duration"),
width: 70
},
STATUS: {
id: "status",
column: 5,
label: qx.locale.Manager.tr("Status"),
width: 70
},
COST: {
id: "cost",
column: 6,
label: qx.locale.Manager.tr("Credits"),
width: 56
},
USER: {
id: "user",
column: 7,
label: qx.locale.Manager.tr("User"),
width: 140
}
}
}
})
});
89 changes: 43 additions & 46 deletions services/static-webserver/client/source/class/osparc/desktop/credits/UsageTableModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,28 @@
* Copyright: 2024 IT'IS Foundation - https://itis.swiss
* License: MIT - https://opensource.org/licenses/MIT
* Authors: Ignacio Pascual (ignapas)
* Odei Maiz (odeimaiz)
*/
const SERVER_MAX_LIMIT = 49
const COLUMN_ID_TO_DB_COLUMN_MAP = {
0: "project_name",
1: "node_name",
2: "service_key",
3: "started_at",
5: "service_run_status",
6: "credit_cost",
7: "user_email"
}


qx.Class.define("osparc.desktop.credits.UsageTableModel", {
extend: qx.ui.table.model.Remote,

construct(walletId, filters) {
this.base(arguments)
this.setColumns([
osparc.product.Utils.getStudyAlias({firstUpperCase: true}),
qx.locale.Manager.tr("Node"),
qx.locale.Manager.tr("Service"),
qx.locale.Manager.tr("Start"),
qx.locale.Manager.tr("Duration"),
qx.locale.Manager.tr("Status"),
qx.locale.Manager.tr("Credits"),
qx.locale.Manager.tr("User")
], [
"project",
"node",
"service",
"start",
"duration",
"status",
"cost",
"user"
])
this.base(arguments);

const usageCols = osparc.desktop.credits.UsageTable.COLS;
const colLabels = Object.values(usageCols).map(col => col.label);
const colIDs = Object.values(usageCols).map(col => col.id);

this.setColumns(colLabels, colIDs);
this.setWalletId(walletId)
if (filters) {
this.setFilters(filters)
}
this.setSortColumnIndexWithoutSortingData(3)
this.setSortColumnIndexWithoutSortingData(usageCols.START.column);
this.setSortAscendingWithoutSortingData(false)
this.setColumnSortable(4, false)
this.setColumnSortable(usageCols.DURATION.column, false);
},

properties: {
Expand All @@ -71,15 +50,30 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
}
},

statics: {
SERVER_MAX_LIMIT: 49,
COLUMN_ID_TO_DB_COLUMN_MAP: {
0: "root_parent_project_name",
1: "node_name",
2: "service_key",
3: "started_at",
// 4: (not used) SORTING BY DURATION
5: "service_run_status",
6: "credit_cost",
7: "user_email"
}
},

members: {
// overrriden
// overridden
sortByColumn(columnIndex, ascending) {
this.setOrderBy({
field: COLUMN_ID_TO_DB_COLUMN_MAP[columnIndex],
field: this.self().COLUMN_ID_TO_DB_COLUMN_MAP[columnIndex],
direction: ascending ? "asc" : "desc"
})
this.base(arguments, columnIndex, ascending)
},

// overridden
_loadRowCount() {
const endpoint = this.getWalletId() == null ? "get" : "getWithWallet"
Expand All @@ -105,13 +99,14 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
this._onRowCountLoaded(null)
})
},

// overridden
_loadRowData(firstRow, qxLastRow) {
this.setIsFetching(true)
// Please Qloocloox don't ask for more rows than there are
const lastRow = Math.min(qxLastRow, this._rowCount - 1)
// Returns a request promise with given offset and limit
const getFetchPromise = (offset, limit=SERVER_MAX_LIMIT) => {
const getFetchPromise = (offset, limit=this.self().SERVER_MAX_LIMIT) => {
const endpoint = this.getWalletId() == null ? "get" : "getWithWallet"
return osparc.data.Resources.fetch("resourceUsage", endpoint, {
url: {
Expand All @@ -128,6 +123,7 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
})
.then(rawData => {
const data = []
const usageCols = osparc.desktop.credits.UsageTable.COLS;
rawData.forEach(rawRow => {
let service = ""
if (rawRow["service_key"]) {
Expand All @@ -143,26 +139,27 @@ qx.Class.define("osparc.desktop.credits.UsageTableModel", {
}
}
data.push({
project: rawRow["project_name"] || rawRow["project_id"],
node: rawRow["node_name"] || rawRow["node_id"],
service,
start,
duration,
status: qx.lang.String.firstUp(rawRow["service_run_status"].toLowerCase()),
cost: rawRow["credit_cost"] ? rawRow["credit_cost"].toFixed(2) : "",
user: rawRow["user_email"]
// root_parent_project is the same as project if it has no parent
[usageCols.PROJECT.id]: rawRow["root_parent_project_name"] || rawRow["root_parent_project_id"] || rawRow["project_name"] || rawRow["project_id"],
[usageCols.NODE.id]: rawRow["node_name"] || rawRow["node_id"],
[usageCols.SERVICE.id]: service,
[usageCols.START.id]: start,
[usageCols.DURATION.id]: duration,
[usageCols.STATUS.id]: qx.lang.String.firstUp(rawRow["service_run_status"].toLowerCase()),
[usageCols.COST.id]: rawRow["credit_cost"] ? rawRow["credit_cost"].toFixed(2) : "",
[usageCols.USER.id]: rawRow["user_email"]
})
})
return data
})
}
// Divides the model row request into several server requests to comply with the number of rows server limit
const reqLimit = lastRow - firstRow + 1 // Number of requested rows
const nRequests = Math.ceil(reqLimit / SERVER_MAX_LIMIT)
const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT)
if (nRequests > 1) {
let requests = []
for (let i=firstRow; i <= lastRow; i += SERVER_MAX_LIMIT) {
requests.push(getFetchPromise(i, i > lastRow - SERVER_MAX_LIMIT + 1 ? reqLimit % SERVER_MAX_LIMIT : SERVER_MAX_LIMIT))
for (let i=firstRow; i <= lastRow; i += this.self().SERVER_MAX_LIMIT) {
requests.push(getFetchPromise(i, i > lastRow - this.self().SERVER_MAX_LIMIT + 1 ? reqLimit % this.self().SERVER_MAX_LIMIT : this.self().SERVER_MAX_LIMIT))
}
Promise.all(requests)
.then(responses => {
Expand Down

0 comments on commit 36ae834

Please sign in to comment.