Skip to content

Commit

Permalink
✨ FE: Deprecated services (#3386)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Sep 27, 2022
1 parent 733e0f2 commit bb286b9
Show file tree
Hide file tree
Showing 12 changed files with 127 additions and 65 deletions.
3 changes: 1 addition & 2 deletions services/static-webserver/client/source/class/osparc/component/node/BaseNodeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,11 +304,10 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
const buttonsIcon = this.__inputsButton.getChildControl("icon");
if (waiting) {
this.__inputsButton.setIcon("@FontAwesome5Solid/circle-notch/14");
osparc.utils.Utils.addClass(buttonsIcon.getContentElement(), "rotate");
} else {
this.__inputsButton.setIcon("@FontAwesome5Solid/sign-in-alt/14");
osparc.utils.Utils.removeClass(buttonsIcon.getContentElement(), "rotate");
}
osparc.utils.StatusUI.updateIconAnimation(buttonsIcon);
this.__enableIframeContent(!waiting);
},

Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/component/node/NodeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ qx.Class.define("osparc.component.node.NodeView", {
this._mainView.bind("backgroundColor", nodeOutputs, "backgroundColor");
this._outputsLayout.add(nodeOutputs);

const outputFilesBtn = new qx.ui.form.Button(this.tr("Artifacts"), "@FontAwesome5Solid/folder-open/14").set({
const outputFilesBtn = new qx.ui.form.Button(this.tr("Service data"), "@FontAwesome5Solid/folder-open/14").set({
allowGrowX: false
});
osparc.utils.Utils.setIdToWidget(outputFilesBtn, "nodeOutputFilesBtn");
Expand Down
3 changes: 2 additions & 1 deletion services/static-webserver/client/source/class/osparc/component/workbench/BaseNodeUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,8 @@ qx.Class.define("osparc.component.workbench.BaseNodeUI", {
TITLE: 1, // from qooxdoo
LOCK: 2,
MARKER: 3,
MENU: 4
DEPRECATED: 4,
MENU: 5
},

captionHeight: function() {
Expand Down
25 changes: 25 additions & 0 deletions services/static-webserver/client/source/class/osparc/component/workbench/NodeUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,16 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
});
control.addListener("tap", () => this.fireDataEvent("markerClicked", this.getNode().getNodeId()));
break;
case "deprecated-icon":
control = new qx.ui.basic.Image().set({
source: "@MaterialIcons/update/14",
padding: 4
});
this.getChildControl("captionbar").add(control, {
row: 0,
column: osparc.component.workbench.BaseNodeUI.CAPTION_POS.DEPRECATED
});
break;
case "chips": {
control = new qx.ui.container.Composite(new qx.ui.layout.Flow(3, 3).set({
alignY: "middle"
Expand Down Expand Up @@ -243,6 +253,21 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
};
node.addListener("changeMarker", () => updateMarker());
updateMarker();

if (node.isDeprecated()) {
const deprecatedIcon = this.getChildControl("deprecated-icon");
deprecatedIcon.set({
textColor: "failed-red"
});
const deprecatedTTMsg = node.isDynamic() ? osparc.utils.Services.DEPRECATED_DYNAMIC_INSTRUCTIONS : osparc.utils.Services.DEPRECATED_COMPUTATIONAL_INSTRUCTIONS;
const toolTip = new qx.ui.tooltip.ToolTip().set({
label: osparc.utils.Services.DEPRECATED_SERVICE + "<br>" + deprecatedTTMsg,
icon: "@FontAwesome5Solid/exclamation-triangle/12",
rich: true,
maxWidth: 250
});
deprecatedIcon.setToolTip(toolTip);
}
},

__applyType: function(type) {
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/CardBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
updateStudy.show();
updateStudy.set({
toolTipText: this.tr("Service(s) deprecated, please update"),
textColor: "red"
textColor: "failed-red"
});
} else {
osparc.utils.Study.isWorkbenchUpdatable(workbench)
Expand Down
64 changes: 42 additions & 22 deletions services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {

if (this.__workbenchUIConnected === null) {
workbenchUI.addListener("changeSelectedNode", e => {
// one click
const nodeId = e.getData();
if (nodeId) {
studyTreeItem.resetSelection();
Expand All @@ -509,33 +510,38 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
}
});
workbenchUI.addListener("nodeSelected", e => {
studyTreeItem.resetSelection();
// double click
const nodeId = e.getData();
this.__nodesTree.nodeSelected(nodeId);
const workbench = this.getStudy().getWorkbench();
const node = workbench.getNode(nodeId);
this.__populateSecondPanel(node);
this.__openIframeTab(node);
this.__loggerView.setCurrentNodeId(nodeId);
if (nodeId) {
studyTreeItem.resetSelection();
this.__nodesTree.nodeSelected(nodeId);
const workbench = this.getStudy().getWorkbench();
const node = workbench.getNode(nodeId);
this.__populateSecondPanel(node);
this.__openIframeTab(node);
this.__loggerView.setCurrentNodeId(nodeId);
}
}, this);
}

nodesTree.addListener("fullscreenNode", e => {
studyTreeItem.resetSelection();
const nodeId = e.getData();
const workbench = this.getStudy().getWorkbench();
const node = workbench.getNode(nodeId);
if (node) {
this.__populateSecondPanel(node);
this.__openIframeTab(node);
node.getLoadingPage().maximizeIFrame(true);
node.getIFrame().maximizeIFrame(true);
}
this.__loggerView.setCurrentNodeId(nodeId);
const nodeUI = workbenchUI.getNodeUI(nodeId);
if (nodeUI) {
if (nodeUI.classname.includes("NodeUI")) {
workbenchUI.activeNodeChanged(nodeUI);
if (nodeId) {
studyTreeItem.resetSelection();
const workbench = this.getStudy().getWorkbench();
const node = workbench.getNode(nodeId);
if (node) {
this.__populateSecondPanel(node);
this.__openIframeTab(node);
node.getLoadingPage().maximizeIFrame(true);
node.getIFrame().maximizeIFrame(true);
}
this.__loggerView.setCurrentNodeId(nodeId);
const nodeUI = workbenchUI.getNodeUI(nodeId);
if (nodeUI) {
if (nodeUI.classname.includes("NodeUI")) {
workbenchUI.activeNodeChanged(nodeUI);
}
}
}
}, this);
Expand Down Expand Up @@ -1040,12 +1046,26 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
this.__outputsPage.add(nodeOutputs);
}

const outputFilesBtn = new qx.ui.form.Button(this.tr("Artifacts"), "@FontAwesome5Solid/folder-open/14").set({
const outputFilesBtn = new qx.ui.form.Button(this.tr("Service data"), "@FontAwesome5Solid/folder-open/14").set({
allowGrowX: false
});
osparc.utils.Utils.setIdToWidget(outputFilesBtn, "nodeOutputFilesBtn");
outputFilesBtn.addListener("execute", () => osparc.component.node.BaseNodeView.openNodeDataManager(node));
this.__outputsPage.add(outputFilesBtn);

if (node.hasOutputs() && node.isDynamic() && node.isDeprecated()) {
this.__outputsPage.add(new qx.ui.core.Spacer(null, 20));

const chip = osparc.utils.StatusUI.createServiceDeprecatedChip();
this.__outputsPage.add(chip);

const deprecatedMsg = new qx.ui.basic.Label(osparc.utils.Services.DEPRECATED_DYNAMIC_INSTRUCTIONS).set({
rich: true
});
this.__outputsPage.add(deprecatedMsg);

this.getChildControl("side-panel-right-tabs").setSelection([this.__outputsPage]);
}
},

getLogger: function() {
Expand Down
9 changes: 1 addition & 8 deletions services/static-webserver/client/source/class/osparc/navigation/BreadcrumbsSlideshow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,7 @@ qx.Class.define("osparc.navigation.BreadcrumbsSlideshow", {
const check = node.isDynamic() ? "interactive" : "output";
node.getStatus().bind(check, statusIcon, "source", {
converter: output => osparc.utils.StatusUI.getIconSource(output),
onUpdate: (source, target) => {
const elem = target.getContentElement();
if (target.getSource() && target.getSource().includes("circle-notch")) {
osparc.utils.Utils.addClass(elem, "rotate");
} else {
osparc.utils.Utils.removeClass(elem, "rotate");
}
}
onUpdate: (_, target) => osparc.utils.StatusUI.updateIconAnimation(target)
});
node.getStatus().bind(check, statusIcon, "textColor", {
converter: output => osparc.utils.StatusUI.getColor(output)
Expand Down
9 changes: 1 addition & 8 deletions services/static-webserver/client/source/class/osparc/servicecard/Large.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,14 +182,7 @@ qx.Class.define("osparc.servicecard.Large", {
__createDeprecated: function() {
const isDeprecated = osparc.utils.Services.isDeprecated(this.getService());
if (isDeprecated) {
const chip = new osparc.ui.basic.Chip().set({
label: this.tr("Service deprecated"),
icon: "@FontAwesome5Solid/exclamation-triangle/12",
textColor: "contrasted-text-dark",
backgroundColor: "failed-red",
allowGrowX: false
});
return chip;
return osparc.utils.StatusUI.createServiceDeprecatedChip();
}
return null;
},
Expand Down
6 changes: 1 addition & 5 deletions services/static-webserver/client/source/class/osparc/ui/basic/NodeStatusUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,13 +119,9 @@ qx.Class.define("osparc.ui.basic.NodeStatusUI", {
this.getNode().getStatus().bind("interactive", this.__icon, "source", {
converter: state => osparc.utils.StatusUI.getIconSource(state),
onUpdate: (source, target) => {
osparc.utils.StatusUI.updateIconAnimation(this.__icon);
const props = qx.util.PropertyUtil.getProperties(osparc.data.model.NodeStatus);
const state = source.getInteractive();
if (target.getSource() && target.getSource().includes("circle-notch")) {
osparc.utils.Utils.addClass(this.__icon.getContentElement(), "rotate");
} else {
osparc.utils.Utils.removeClass(this.__icon.getContentElement(), "rotate");
}
if (props["interactive"]["check"].includes(state)) {
target.setTextColor(osparc.utils.StatusUI.getColor(state));
} else {
Expand Down
19 changes: 15 additions & 4 deletions services/static-webserver/client/source/class/osparc/ui/message/Loading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ qx.Class.define("osparc.ui.message.Loading", {
},

statics: {
LOGO_WIDTH: 260
LOGO_WIDTH: 260,
STATUS_ICON_SIZE: 32
},

members: {
Expand All @@ -92,13 +93,14 @@ qx.Class.define("osparc.ui.message.Loading", {
});

const atom = this.__header = new qx.ui.basic.Atom().set({
icon: "@FontAwesome5Solid/circle-notch/32",
icon: "@FontAwesome5Solid/circle-notch/"+this.self().STATUS_ICON_SIZE,
font: "nav-bar-label",
alignX: "center",
gap: 15,
allowGrowX: false
});
atom.getChildControl("icon").getContentElement().addClass("rotate");
const icon = atom.getChildControl("icon");
osparc.utils.StatusUI.updateIconAnimation(icon);

const messages = this.__messages = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({
alignX: "center"
Expand Down Expand Up @@ -143,8 +145,17 @@ qx.Class.define("osparc.ui.message.Loading", {
}
},

__applyHeader: function(value, old) {
__applyHeader: function(value) {
this.__header.setLabel(value);
const words = value.split(" ");
if (words.length) {
const state = words[0];
const iconSource = osparc.utils.StatusUI.getIconSource(state.toLowerCase(), this.self().STATUS_ICON_SIZE);
if (iconSource) {
this.__header.setIcon(iconSource);
osparc.utils.StatusUI.updateIconAnimation(this.__header.getChildControl("icon"));
}
}
},

__applyMessages: function(msgs, old) {
Expand Down
4 changes: 4 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 @@ -305,6 +305,10 @@ qx.Class.define("osparc.utils.Services", {
return false;
},

DEPRECATED_SERVICE: qx.locale.Manager.tr("Service deprecated"),
DEPRECATED_DYNAMIC_INSTRUCTIONS: qx.locale.Manager.tr("Please, download the Service data and upload them to an updated version"),
DEPRECATED_COMPUTATIONAL_INSTRUCTIONS: qx.locale.Manager.tr("Please, instantiate an updated version"),

getFilePicker: function() {
return this.self().getLatest(this.servicesCached, "simcore/services/frontend/file-picker");
},
Expand Down
46 changes: 33 additions & 13 deletions services/static-webserver/client/source/class/osparc/utils/StatusUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ qx.Class.define("osparc.utils.StatusUI", {
});
},

getIconSource: function(state) {
getIconSource: function(state, size = 12) {
switch (state) {
// computationals
case "UNKNOWN":
Expand All @@ -52,50 +52,59 @@ qx.Class.define("osparc.utils.StatusUI", {
case "PENDING":
case "STARTED":
case "RETRY":
return "@FontAwesome5Solid/circle-notch/12";
return "@FontAwesome5Solid/circle-notch/"+size;
case "SUCCESS":
return "@FontAwesome5Solid/check/12";
return "@FontAwesome5Solid/check/"+size;
case "FAILED":
case "ABORTED":
return "@FontAwesome5Solid/exclamation-circle/12";
return "@FontAwesome5Solid/exclamation-circle/"+size;

// dynamics
case "idle":
return "";
case "ready":
return "@FontAwesome5Solid/check/12";
return "@FontAwesome5Solid/check/"+size;
case "starting":
case "pending":
case "pulling":
case "connecting":
return "@FontAwesome5Solid/circle-notch/12";
return "@FontAwesome5Solid/circle-notch/"+size;
case "deprecated":
case "failed":
return "@FontAwesome5Solid/exclamation-circle/12";
return "@FontAwesome5Solid/exclamation-circle/"+size;

// ports
case "modified":
return "@FontAwesome5Solid/exclamation-circle/12";
return "@FontAwesome5Solid/exclamation-circle/"+size;
case "up-to-date":
return "@FontAwesome5Solid/check/12";
return "@FontAwesome5Solid/check/"+size;
case "running":
return "@FontAwesome5Solid/circle-notch/12";
return "@FontAwesome5Solid/circle-notch/"+size;

// outputs
case "busy":
return "@FontAwesome5Solid/circle-notch/12";
return "@FontAwesome5Solid/circle-notch/"+size;
case "out-of-date":
return "@FontAwesome5Solid/exclamation-circle/12";
return "@FontAwesome5Solid/exclamation-circle/"+size;
/*
case "up-to-date":
return "@FontAwesome5Solid/check/12";
return "@FontAwesome5Solid/check/"+size;
*/

default:
return "";
}
},

updateIconAnimation: function(target) {
const elem = target.getContentElement();
if (target.getSource() && target.getSource().includes("circle-notch")) {
osparc.utils.Utils.addClass(elem, "rotate");
} else {
osparc.utils.Utils.removeClass(elem, "rotate");
}
},

getLabelValue: function(state) {
switch (state) {
// computationals
Expand Down Expand Up @@ -195,6 +204,17 @@ qx.Class.define("osparc.utils.StatusUI", {
default:
return "no-border";
}
},

createServiceDeprecatedChip: function() {
const chip = new osparc.ui.basic.Chip().set({
label: osparc.utils.Services.DEPRECATED_SERVICE,
icon: "@FontAwesome5Solid/exclamation-triangle/12",
textColor: "contrasted-text-dark",
backgroundColor: "failed-red",
allowGrowX: false
});
return chip;
}
}
});

0 comments on commit bb286b9

Please sign in to comment.