Skip to content

Commit

Permalink
🎨 Frontend aesthetics: S4L logo, Sharee Permissions and Life Cycle vi…
Browse files Browse the repository at this point in the history 
…ew (#4303)
  • Loading branch information
@odeimaiz
odeimaiz authored Jun 5, 2023
1 parent e44b0d3 commit 1d15b8d
Show file tree
Hide file tree
Showing 15 changed files with 135 additions and 83 deletions.
16 changes: 8 additions & 8 deletions ...s/static-webserver/client/source/class/osparc/component/metadata/ServicesInStudyUpdate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
continue;
}
const node = studyData["workbench"][nodeId];
const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node["key"], node["version"]);
if (latestCompatibleMetadata["version"] !== node["version"]) {
if (osparc.utils.Services.isUpdatable(node)) {
const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node["key"], node["version"]);
this.self().updateService(studyData, nodeId, latestCompatibleMetadata["version"]);
}
}
Expand Down Expand Up @@ -182,13 +182,12 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
const node = workbench[nodeId];
const nodeMetadata = osparc.utils.Services.getMetaData(node["key"], node["version"]);
const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(this._services, node["key"], node["version"]);
const latestMetadata = osparc.utils.Services.getLatest(this._services, node["key"]);
if (latestCompatibleMetadata === null) {
osparc.component.message.FlashMessenger.logAs(this.tr("Some service information could not be retrieved"), "WARNING");
break;
}
const autoUpdatable = node["version"] !== latestCompatibleMetadata["version"];
if (autoUpdatable) {
const isUpdatable = osparc.utils.Services.isUpdatable(node);
if (isUpdatable) {
updatableServices.push(nodeId);
}
const currentVersionLabel = new qx.ui.basic.Label(node["version"]).set({
Expand All @@ -209,6 +208,7 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
column: this.self().GRID_POS.COMPATIBLE_VERSION
});

const latestMetadata = osparc.utils.Services.getLatest(this._services, node["key"]);
const latestVersionLabel = new qx.ui.basic.Label(latestMetadata["version"]).set({
font: "text-14"
});
Expand All @@ -220,15 +220,15 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
if (osparc.data.Permissions.getInstance().canDo("study.service.update") && canIWriteStudy) {
const updateButton = new osparc.ui.form.FetchButton(null, "@MaterialIcons/update/14");
updateButton.set({
enabled: autoUpdatable
enabled: isUpdatable
});
if (latestCompatibleMetadata["version"] === node["version"]) {
updateButton.setLabel(this.tr("Up-to-date"));
}
if (latestCompatibleMetadata["version"] !== latestMetadata["version"]) {
updateButton.setLabel(this.tr("Update manually"));
}
if (autoUpdatable) {
if (isUpdatable) {
updateButton.set({
backgroundColor: "strong-main",
label: this.tr("Update")
Expand All @@ -240,7 +240,7 @@ qx.Class.define("osparc.component.metadata.ServicesInStudyUpdate", {
column: this.self().GRID_POS.UPDATE_BUTTON
});

anyUpdatable |= autoUpdatable;
anyUpdatable |= isUpdatable;
}
}

Expand Down
136 changes: 95 additions & 41 deletions services/static-webserver/client/source/class/osparc/component/node/LifeCycleView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,76 +43,130 @@ qx.Class.define("osparc.component.node.LifeCycleView", {

members: {
__applyNode: function(node) {
if (node.isDeprecated() || node.isRetired()) {
if (node.isUpdatable() || node.isDeprecated() || node.isRetired()) {
this.__populateLayout();
}
},

__populateLayout: function() {
this._removeAll();

this.__addTitle();
this.__addChip();
this.__addDeprecationDate();

if (this.getNode().isUpdatable()) {
this.__addAutoUpdatableSection();
} else {
this.__addNonAutoUpdatableSection();
}
},

__addTitle: function() {
this._add(new qx.ui.basic.Label(this.tr("Update Service")).set({
font: "text-14"
}));
},

__addChip: function() {
const node = this.getNode();

const chip = node.isDeprecated() ? osparc.utils.StatusUI.createServiceDeprecatedChip() : osparc.utils.StatusUI.createServiceRetiredChip();
this._add(chip);
let chip = null;
if (node.isRetired()) {
chip = osparc.utils.StatusUI.createServiceRetiredChip();
} else if (node.isDeprecated()) {
chip = osparc.utils.StatusUI.createServiceDeprecatedChip();
}
if (chip) {
this._add(chip);
}
},

__addDeprecationDate: function() {
const node = this.getNode();

if (node.isDeprecated()) {
const deprecateDateLabel = new qx.ui.basic.Label(osparc.utils.Services.getDeprecationDateText(node.getMetaData())).set({
rich: true
});
this._add(deprecateDateLabel);
}
},

__addAutoUpdatableSection: function() {
this.__addAutoUpdatableInstructions();
this.__addAutoUpdateButtonsSection();
},

__addAutoUpdatableInstructions: function() {
const node = this.getNode();

const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node.getKey(), node.getVersion());
const autoUpdatable = node.getVersion() !== latestCompatibleMetadata["version"];
if (autoUpdatable) {
const instructionsMsg = node.isDeprecated() ? osparc.utils.Services.DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS : osparc.utils.Services.RETIRED_AUTOUPDATABLE_INSTRUCTIONS;
let instructionsMsg = null;
if (node.isRetired()) {
instructionsMsg = osparc.utils.Services.RETIRED_AUTOUPDATABLE_INSTRUCTIONS;
} else if (node.isUpdatable() || node.isDeprecated()) {
instructionsMsg = osparc.utils.Services.DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS;
}
if (instructionsMsg) {
const instructionsLabel = new qx.ui.basic.Label(instructionsMsg).set({
rich: true
});
this._add(instructionsLabel);
}
},

const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));

const stopButton = new qx.ui.form.Button().set({
label: this.tr("Stop"),
icon: "@FontAwesome5Solid/stop/14",
enabled: false
});
node.getStatus().bind("interactive", stopButton, "enabled", {
converter: state => state === "ready"
});
node.attachExecuteHandlerToStopButton(stopButton);
buttonsLayout.add(stopButton);
__addAutoUpdateButtonsSection: function() {
const node = this.getNode();

const updateButton = new osparc.ui.form.FetchButton().set({
label: this.tr("Update"),
icon: "@MaterialIcons/update/14",
backgroundColor: "strong-main"
});
stopButton.bind("enabled", updateButton, "enabled", {
converter: enabled => !enabled && autoUpdatable
});
updateButton.addListener("execute", () => {
updateButton.setFetching(true);
node.setVersion(latestCompatibleMetadata["version"]);
setTimeout(() => node.getStatus().setInteractive("idle"), osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
setTimeout(() => {
updateButton.setFetching(false);
node.requestStartNode();
this.fireEvent("versionChanged");
}, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL*2);
});
const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));

const stopButton = new qx.ui.form.Button().set({
label: this.tr("Stop"),
icon: "@FontAwesome5Solid/stop/14",
enabled: false
});
node.getStatus().bind("interactive", stopButton, "enabled", {
converter: state => state === "ready"
});
node.attachExecuteHandlerToStopButton(stopButton);
buttonsLayout.add(stopButton);

const updateButton = new osparc.ui.form.FetchButton().set({
label: this.tr("Update"),
icon: "@MaterialIcons/update/14",
backgroundColor: "strong-main"
});
const isUpdatable = this.getNode().isUpdatable();
node.getStatus().bind("interactive", updateButton, "enabled", {
converter: state => ["idle", "failed", "deprecated", "retired"].includes(state) && isUpdatable
});
updateButton.addListener("execute", () => {
updateButton.setFetching(true);
const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(null, node.getKey(), node.getVersion());
node.setVersion(latestCompatibleMetadata["version"]);
setTimeout(() => node.getStatus().setInteractive("idle"), osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
setTimeout(() => {
updateButton.setFetching(false);
node.requestStartNode();
this.fireEvent("versionChanged");
}, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL*2);
});

buttonsLayout.add(updateButton);

this._add(buttonsLayout);
},

buttonsLayout.add(updateButton);
__addNonAutoUpdatableSection: function() {
const node = this.getNode();

this._add(buttonsLayout);
} else {
const instructionsMsg = node.isDeprecated() ? osparc.utils.Services.DEPRECATED_DYNAMIC_INSTRUCTIONS : osparc.utils.Services.RETIRED_DYNAMIC_INSTRUCTIONS;
let instructionsMsg = null;
if (node.isRetired()) {
instructionsMsg = osparc.utils.Services.RETIRED_DYNAMIC_INSTRUCTIONS;
} else if (node.isUpdatable() || node.isDeprecated()) {
instructionsMsg = osparc.utils.Services.DEPRECATED_DYNAMIC_INSTRUCTIONS;
}
if (instructionsMsg) {
const instructionsLabel = new qx.ui.basic.Label(instructionsMsg).set({
rich: true
});
Expand Down
5 changes: 4 additions & 1 deletion services/static-webserver/client/source/class/osparc/component/share/CollaboratorsStudy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,11 +181,14 @@ qx.Class.define("osparc.component.share.CollaboratorsStudy", {
const noAccessible = values.filter(value => value["accessible"] === false);
if (noAccessible.length) {
const shareePermissions = new osparc.component.share.ShareePermissions(noAccessible);
osparc.ui.window.Window.popUpInWindow(shareePermissions, this.tr("Sharee permissions"), 500, 500, "@FontAwesome5Solid/exclamation-triangle/14").set({
const win = osparc.ui.window.Window.popUpInWindow(shareePermissions, this.tr("Sharee permissions"), 500, 500, "@FontAwesome5Solid/exclamation-triangle/14").set({
clickAwayClose: false,
resizable: true,
showClose: true
});
win.getChildControl("icon").set({
textColor: "warning-yellow"
});
}
});
},
Expand Down
7 changes: 6 additions & 1 deletion services/static-webserver/client/source/class/osparc/component/share/ShareePermissions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ qx.Class.define("osparc.component.share.ShareePermissions", {
}));

const grid = new qx.ui.layout.Grid(20, 10);
grid.setColumnAlign(0, "center", "middle");
grid.setColumnAlign(1, "center", "middle");
const layout = new qx.ui.container.Composite(grid);
this._add(layout);
for (let i=0; i<shareesData.length; i++) {
Expand All @@ -41,9 +43,12 @@ qx.Class.define("osparc.component.share.ShareePermissions", {

const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
shareeData["inaccessible_services"].forEach(inaccessibleService => {
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
alignY: "middle"
});
const metaData = osparc.utils.Services.getMetaData(inaccessibleService.key, inaccessibleService.version);
const infoButton = new qx.ui.form.Button(null, "@MaterialIcons/info_outline/14");
infoButton.setAppearance("strong-button");
infoButton.addListener("execute", () => {
const moreOpts = new osparc.dashboard.ResourceMoreOptions(metaData);
const title = this.tr("Service Info");
Expand Down
9 changes: 4 additions & 5 deletions services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,16 +110,15 @@ qx.Class.define("osparc.dashboard.Dashboard", {
buildLayout: this.__createStudyBrowser
}];
if (permissions.canDo("dashboard.templates.read")) {
const templatesTab = {
tabs.push({
id: "templatesTabBtn",
label: osparc.product.Utils.getTemplateAlias({
plural: true,
allUpperCase: true
}),
icon: "@FontAwesome5Solid/copy/"+tabIconSize,
buildLayout: this.__createTemplateBrowser
};
tabs.push(templatesTab);
});
}
if (permissions.canDo("dashboard.services.read")) {
tabs.push({
Expand All @@ -134,8 +133,8 @@ qx.Class.define("osparc.dashboard.Dashboard", {
id: "dataTabBtn",
label: this.tr("DATA"),
icon: "@FontAwesome5Solid/folder/"+tabIconSize,
buildLayout: this.__createDataBrowser}
);
buildLayout: this.__createDataBrowser
});
}
tabs.forEach(({id, label, icon, buildLayout}) => {
const tabPage = new qx.ui.tabview.Page(label, icon).set({
Expand Down
8 changes: 8 additions & 0 deletions services/static-webserver/client/source/class/osparc/data/model/Node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,10 @@ qx.Class.define("osparc.data.model.Node", {
return (metaData && metaData.type && metaData.type === "computational");
},

isUpdatable: function(metaData) {
return osparc.utils.Services.isUpdatable(metaData);
},

isDeprecated: function(metaData) {
return osparc.utils.Services.isDeprecated(metaData);
},
Expand Down Expand Up @@ -373,6 +377,10 @@ qx.Class.define("osparc.data.model.Node", {
return osparc.data.model.Node.isComputational(this.getMetaData());
},

isUpdatable: function() {
return osparc.data.model.Node.isUpdatable(this.getMetaData());
},

isDeprecated: function() {
return osparc.data.model.Node.isDeprecated(this.getMetaData());
},
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1114,7 +1114,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
outputFilesBtn.addListener("execute", () => osparc.component.node.BaseNodeView.openNodeDataManager(node));
this.__outputsPage.add(outputFilesBtn);

if (node.isDynamic() && (node.isDeprecated() || node.isRetired())) {
if (node.isDynamic() && (node.isUpdatable() || node.isDeprecated() || node.isRetired())) {
this.__nodeOptionsPage.getChildControl("button").show();
const lifeCycleView = new osparc.component.node.LifeCycleView(node);
node.addListener("versionChanged", () => this.__populateSecondPanel(node));
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/product/Utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ qx.Class.define("osparc.product.Utils", {
const product = qx.core.Environment.get("product.name");
switch (product) {
case "s4l":
logosPath = lightLogo ? "osparc/s4l_zmt-white.svg" : "osparc/s4l_zmt-black.svg";
logosPath = lightLogo ? "osparc/s4l-white.png" : "osparc/s4l-black.png";
break;
case "s4llite":
logosPath = lightLogo ? "osparc/s4llite-white.png" : "osparc/s4llite-black.png";
Expand Down
5 changes: 5 additions & 0 deletions services/static-webserver/client/source/class/osparc/utils/Services.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,11 @@ qx.Class.define("osparc.utils.Services", {
DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS: qx.locale.Manager.tr("Please Stop the Service and then Update it"),
RETIRED_AUTOUPDATABLE_INSTRUCTIONS: qx.locale.Manager.tr("Please Update the Service"),

isUpdatable: function(metadata) {
const latestCompatibleMetadata = this.getLatestCompatible(null, metadata["key"], metadata["version"]);
return latestCompatibleMetadata && metadata["version"] !== latestCompatibleMetadata["version"];
},

isDeprecated: function(metadata) {
if (metadata && "deprecated" in metadata && ![null, undefined].includes(metadata["deprecated"])) {
const deprecationTime = new Date(metadata["deprecated"]);
Expand Down
7 changes: 2 additions & 5 deletions services/static-webserver/client/source/class/osparc/utils/Study.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,8 @@ qx.Class.define("osparc.utils.Study", {
filtered.push(srv);
}
});
const updatable = filtered.some(srv => {
const latestCompatibleMetadata = osparc.utils.Services.getLatestCompatible(allServices, srv["key"], srv["version"]);
return latestCompatibleMetadata && srv["version"] !== latestCompatibleMetadata["version"];
});
resolve(updatable);
const isUpdatable = filtered.some(srv => osparc.utils.Services.isUpdatable(srv));
resolve(isUpdatable);
});
});
},
Expand Down
Binary file added services/static-webserver/client/source/resource/osparc/s4l-black.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added services/static-webserver/client/source/resource/osparc/s4l-white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 0 additions & 9 deletions services/static-webserver/client/source/resource/osparc/s4l_zmt-black.svg
View file

This file was deleted.

Loading

0 comments on commit 1d15b8d

Please sign in to comment.