Skip to content

Commit 91d9482

Browse files
odeimaizodeimaiz
authored
2 bugs fixed + Some improvements (#1634)
* Responsive Toolbar * Pin icon instead of "This node" * logLevel converted to a SelectBox * 25% max for the sidepanel * osparc.ui.window.Window close with "Esc" * workaround to make the splitter usable from the beginning * remove template access rights when creating new instance * NodeStatus -> NodeStatusUI * NodeStatus tracks progress and interactiveStatus * limit the accepted strings in interactiveStatus
1 parent df488dd commit 91d9482

File tree

16 files changed

+168
-73
lines changed

16 files changed

+168
-73
lines changed

‎services/web/client/source/class/osparc/component/service/NodeStatus.js renamed to ‎services/web/client/source/class/osparc/component/service/NodeStatusUI.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Authors: Ignacio Pascual (ignapas)
66
*/
77

8-
qx.Class.define("osparc.component.service.NodeStatus", {
8+
qx.Class.define("osparc.component.service.NodeStatusUI", {
99
extend: qx.ui.basic.Atom,
1010

1111
construct: function(node) {
@@ -53,7 +53,7 @@ qx.Class.define("osparc.component.service.NodeStatus", {
5353
},
5454

5555
__setupInteractive: function() {
56-
this.__node.bind("interactiveStatus", this.__label, "value", {
56+
this.__node.getStatus().bind("interactiveStatus", this.__label, "value", {
5757
converter: status => {
5858
if (status === "ready") {
5959
return this.tr("Ready");
@@ -72,7 +72,7 @@ qx.Class.define("osparc.component.service.NodeStatus", {
7272
}
7373
});
7474

75-
this.__node.bind("interactiveStatus", this.__icon, "source", {
75+
this.__node.getStatus().bind("interactiveStatus", this.__icon, "source", {
7676
converter: status => {
7777
if (status === "ready") {
7878
return "@FontAwesome5Solid/check/12";
@@ -108,7 +108,7 @@ qx.Class.define("osparc.component.service.NodeStatus", {
108108

109109
__setupFilepicker: function() {
110110
const node = this.__node;
111-
this.__node.bind("progress", this.__icon, "source", {
111+
this.__node.getStatus().bind("progress", this.__icon, "source", {
112112
converter: progress => {
113113
if (progress === 100) {
114114
return "@FontAwesome5Solid/check/12";
@@ -124,7 +124,7 @@ qx.Class.define("osparc.component.service.NodeStatus", {
124124
}
125125
});
126126

127-
this.__node.bind("progress", this.__label, "value", {
127+
this.__node.getStatus().bind("progress", this.__label, "value", {
128128
converter: progress => {
129129
if (progress === 100) {
130130
const outInfo = node.getOutputValues().outFile;

‎services/web/client/source/class/osparc/component/widget/NodeInput.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ qx.Class.define("osparc.component.widget.NodeInput", {
9393
height: 10,
9494
margin: 3
9595
});
96-
node.bind("progress", progressBar, "value");
96+
node.getStatus().bind("progress", progressBar, "value");
9797

9898
nodeUILayout.add(header);
9999
nodeUILayout.add(new qx.ui.core.Spacer(), {

‎services/web/client/source/class/osparc/component/widget/NodesTree.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ qx.Class.define("osparc.component.widget.NodesTree", {
8484
return control || this.base(arguments, id);
8585
},
8686

87+
__getToolbarButtons: function(toolbar) {
88+
const toolBarChildren = toolbar.getChildren();
89+
return toolBarChildren.filter(toolBarChild => toolBarChild instanceof qx.ui.toolbar.Button);
90+
},
91+
8792
__buildToolbar: function() {
8893
const iconSize = 14;
8994
const toolbar = this.__toolBar = new qx.ui.toolbar.ToolBar();
@@ -134,6 +139,16 @@ qx.Class.define("osparc.component.widget.NodesTree", {
134139
osparc.utils.Utils.setIdToWidget(deleteButton, "deleteServiceBtn");
135140
toolbar.add(deleteButton);
136141

142+
const toolBarBtns = this.__getToolbarButtons(toolbar);
143+
let btnsWidth = 11;
144+
toolBarBtns.forEach(toolBarBtn => {
145+
const pad = 5;
146+
const spa = 10;
147+
const width = toolBarBtn.getSizeHint().width + pad + spa;
148+
btnsWidth += width;
149+
});
150+
this.__toolbarInitMinWidth = btnsWidth;
151+
137152
return toolbar;
138153
},
139154

@@ -314,11 +329,31 @@ qx.Class.define("osparc.component.widget.NodesTree", {
314329
this.__deleteNode();
315330
}
316331
}, this);
332+
317333
this.addListener("keypress", function(keyEvent) {
318334
if (keyEvent.getKeyIdentifier() === "F2") {
319335
this.__openItemRenamer();
320336
}
321337
}, this);
338+
339+
this.__toolBar.addListener("resize", () => {
340+
const toolBarBtns = this.__getToolbarButtons(this.__toolBar);
341+
if (this.__toolBar.getBounds().width < this.__toolbarInitMinWidth) {
342+
// Hide Label
343+
toolBarBtns.forEach(toolBarBtn => {
344+
const label = toolBarBtn.getChildControl("label");
345+
label.exclude();
346+
toolBarBtn.setToolTipText(label.getValue());
347+
});
348+
} else {
349+
// Show Label
350+
toolBarBtns.forEach(toolBarBtn => {
351+
toolBarBtn.getChildControl("label").show();
352+
toolBarBtn.setToolTipText(null);
353+
});
354+
}
355+
}, this);
356+
322357
qx.event.message.Bus.getInstance().subscribe("updateStudy", () => {
323358
this.populateTree();
324359
}, this);

‎services/web/client/source/class/osparc/component/widget/logger/LoggerView.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,9 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
138138
__createFilterToolbar: function() {
139139
const toolbar = new qx.ui.toolbar.ToolBar();
140140

141-
const currentNodeButton = this.__currentNodeButton = new qx.ui.form.ToggleButton(this.tr("This node")).set({
141+
const currentNodeButton = this.__currentNodeButton = new qx.ui.form.ToggleButton().set({
142+
icon: "@FontAwesome5Solid/thumbtack/14",
143+
toolTipText: this.tr("Show logs only from current node"),
142144
appearance: "toolbar-button"
143145
});
144146
currentNodeButton.addListener("changeValue", e => {
@@ -157,31 +159,30 @@ qx.Class.define("osparc.component.widget.logger.LoggerView", {
157159
flex: 1
158160
});
159161

160-
const part = new qx.ui.toolbar.Part();
161-
const group = new qx.ui.form.RadioGroup();
162+
const logLevelSelectBox = new qx.ui.form.SelectBox().set({
163+
appearance: "toolbar-selectbox",
164+
maxWidth: 80
165+
});
162166
let logLevelSet = false;
163167
for (let i=0; i<LOG_LEVEL.length; i++) {
164168
const level = Object.keys(LOG_LEVEL[i])[0];
165169
const logLevel = LOG_LEVEL[i][level];
166170
if (level === "debug" && !osparc.data.Permissions.getInstance().canDo("study.logger.debug.read")) {
167171
continue;
168172
}
169-
const label = level.charAt(0).toUpperCase() + level.slice(1);
170-
const button = new qx.ui.form.ToggleButton(label).set({
171-
appearance: "toolbar-button"
172-
});
173-
button.logLevel = logLevel;
174-
group.add(button);
175-
part.add(button);
173+
const label = qx.lang.String.firstUp(level);
174+
const listItem = new qx.ui.form.ListItem(label);
175+
logLevelSelectBox.add(listItem);
176+
listItem.logLevel = logLevel;
176177
if (!logLevelSet) {
177178
this.setLogLevel(logLevel);
178179
logLevelSet = true;
179180
}
180181
}
181-
group.addListener("changeValue", e => {
182+
logLevelSelectBox.addListener("changeValue", e => {
182183
this.setLogLevel(e.getData().logLevel);
183184
}, this);
184-
toolbar.add(part);
185+
toolbar.add(logLevelSelectBox);
185186

186187
return toolbar;
187188
},

‎services/web/client/source/class/osparc/component/workbench/NodeUI.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
171171
this.__progressBar = this.getChildControl("progress");
172172
}
173173
if (node.isDynamic()) {
174-
const nodeStatus = new osparc.component.service.NodeStatus(node);
174+
const nodeStatus = new osparc.component.service.NodeStatusUI(node);
175175
this.__chipContainer.add(nodeStatus);
176176
}
177177
},
@@ -186,7 +186,7 @@ qx.Class.define("osparc.component.workbench.NodeUI", {
186186
this.__createUIPorts(true, metaData && metaData.inputs);
187187
this.__createUIPorts(false, metaData && metaData.outputs);
188188
if (node.isComputational() || node.isFilePicker()) {
189-
node.bind("progress", this.__progressBar, "value");
189+
node.getStatus().bind("progress", this.__progressBar, "value");
190190
}
191191
},
192192

‎services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ qx.Class.define("osparc.component.workbench.ServiceCatalog", {
4646
minWidth: 400,
4747
minHeight: 400,
4848
modal: true,
49-
contentPadding: 0
49+
contentPadding: 0,
50+
clickAwayClose: true
5051
});
5152

5253
let catalogLayout = new qx.ui.layout.VBox();

‎services/web/client/source/class/osparc/data/model/Node.js

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ qx.Class.define("osparc.data.model.Node", {
6262
this.set({
6363
key,
6464
version,
65-
nodeId: uuid || osparc.utils.Utils.uuidv4()
65+
nodeId: uuid || osparc.utils.Utils.uuidv4(),
66+
status: new osparc.data.model.NodeStatus()
6667
});
6768

6869
const metaData = this.__metaData = osparc.utils.Services.getNodeMetaData(key, version);
@@ -121,24 +122,12 @@ qx.Class.define("osparc.data.model.Node", {
121122
event: "changeServiceUrl"
122123
},
123124

124-
progress: {
125-
check: "Number",
126-
init: 0,
127-
event: "changeProgress"
128-
},
129-
130125
thumbnail: {
131126
check: "String",
132127
nullable: true,
133128
init: ""
134129
},
135130

136-
interactiveStatus: {
137-
check: "String",
138-
nullable: true,
139-
event: "changeInteractiveStatus"
140-
},
141-
142131
propsWidget: {
143132
check: "osparc.component.form.renderer.PropForm",
144133
init: null,
@@ -172,6 +161,11 @@ qx.Class.define("osparc.data.model.Node", {
172161
retrieveIFrameButton: {
173162
check: "qx.ui.form.Button",
174163
init: null
164+
},
165+
166+
status: {
167+
check: "osparc.data.model.NodeStatus",
168+
nullable: false
175169
}
176170
},
177171

@@ -358,7 +352,7 @@ qx.Class.define("osparc.data.model.Node", {
358352
}
359353

360354
if (nodeData.progress) {
361-
this.setProgress(nodeData.progress);
355+
this.getStatus().setProgress(nodeData.progress);
362356
}
363357

364358
if (nodeData.thumbnail) {
@@ -433,7 +427,7 @@ qx.Class.define("osparc.data.model.Node", {
433427
msg: errorMsg
434428
};
435429
this.fireDataEvent("showInLogger", errorMsgData);
436-
this.setInteractiveStatus("failed");
430+
this.getStatus().setInteractiveStatus("failed");
437431
osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("There was an error while starting the node."), "ERROR");
438432
});
439433
},
@@ -764,7 +758,7 @@ qx.Class.define("osparc.data.model.Node", {
764758
},
765759

766760
__getLoadingPageHeader: function() {
767-
const status = this.getInteractiveStatus();
761+
const status = this.getStatus().getInteractiveStatus();
768762
const label = this.getLabel();
769763
if (status) {
770764
const sta = status.charAt(0).toUpperCase() + status.slice(1);
@@ -776,14 +770,12 @@ qx.Class.define("osparc.data.model.Node", {
776770

777771
__initLoadingIPage: function() {
778772
const loadingPage = new osparc.ui.message.Loading(this.__getLoadingPageHeader(), [], true);
779-
[
780-
"changeLabel",
781-
"changeInteractiveStatus"
782-
].forEach(event => {
783-
this.addListener(event, e => {
784-
loadingPage.setHeader(this.__getLoadingPageHeader());
785-
}, this);
786-
});
773+
this.addListener("changeLabel", e => {
774+
loadingPage.setHeader(this.__getLoadingPageHeader());
775+
}, this);
776+
this.getStatus().addListener("changeInteractiveStatus", e => {
777+
loadingPage.setHeader(this.__getLoadingPageHeader());
778+
}, this);
787779
this.setLoadingPage(loadingPage);
788780
},
789781

@@ -941,30 +933,32 @@ qx.Class.define("osparc.data.model.Node", {
941933
};
942934
this.fireDataEvent("showInLogger", msgData);
943935

944-
this.setProgress(0);
945-
this.setInteractiveStatus("starting");
936+
const status = this.getStatus();
937+
status.setProgress(0);
938+
status.setInteractiveStatus("starting");
946939

947940
this.__nodeState();
948941
}
949942
},
950943
__onNodeState: function(data) {
951944
const serviceState = data["service_state"];
945+
const status = this.getStatus();
952946
switch (serviceState) {
953947
case "idle": {
954-
this.setInteractiveStatus("idle");
948+
status.setInteractiveStatus("idle");
955949
const interval = 1000;
956950
qx.event.Timer.once(() => this.__nodeState(), this, interval);
957951
break;
958952
}
959953
case "starting":
960954
case "pulling": {
961-
this.setInteractiveStatus(serviceState);
955+
status.setInteractiveStatus(serviceState);
962956
const interval = 5000;
963957
qx.event.Timer.once(() => this.__nodeState(), this, interval);
964958
break;
965959
}
966960
case "pending": {
967-
this.setInteractiveStatus("pending");
961+
status.setInteractiveStatus("pending");
968962
const interval = 10000;
969963
qx.event.Timer.once(() => this.__nodeState(), this, interval);
970964
break;
@@ -986,7 +980,7 @@ qx.Class.define("osparc.data.model.Node", {
986980
case "complete":
987981
break;
988982
case "failed": {
989-
this.setInteractiveStatus("failed");
983+
status.setInteractiveStatus("failed");
990984
const msg = "Service failed: " + data["service_message"];
991985
const msgData = {
992986
nodeId: this.getNodeId(),
@@ -1022,7 +1016,7 @@ qx.Class.define("osparc.data.model.Node", {
10221016
msg: errorMsg
10231017
};
10241018
this.fireDataEvent("showInLogger", errorMsgData);
1025-
this.setInteractiveStatus("failed");
1019+
this.getStatus().setInteractiveStatus("failed");
10261020
osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("There was an error while starting the node."), "ERROR");
10271021
});
10281022
},
@@ -1047,13 +1041,12 @@ qx.Class.define("osparc.data.model.Node", {
10471041
__waitForServiceReady: function(srvUrl) {
10481042
// ping for some time until it is really ready
10491043
const pingRequest = new qx.io.request.Xhr(srvUrl);
1050-
pingRequest.addListenerOnce("success", function(e) {
1051-
console.log("service ready now");
1044+
pingRequest.addListenerOnce("success", () => {
10521045
this.__serviceReadyIn(srvUrl);
10531046
}, this);
10541047
pingRequest.addListenerOnce("fail", e => {
10551048
const error = e.getTarget().getResponse();
1056-
this.setInteractiveStatus("connecting");
1049+
this.getStatus().setInteractiveStatus("connecting");
10571050
console.log("service not ready yet, waiting... " + error);
10581051
const interval = 1000;
10591052
qx.event.Timer.once(() => this.__waitForServiceReady(srvUrl), this, interval);
@@ -1062,7 +1055,7 @@ qx.Class.define("osparc.data.model.Node", {
10621055
},
10631056
__serviceReadyIn: function(srvUrl) {
10641057
this.setServiceUrl(srvUrl);
1065-
this.setInteractiveStatus("ready");
1058+
this.getStatus().setInteractiveStatus("ready");
10661059
const msg = "Service ready on " + srvUrl;
10671060
const msgData = {
10681061
nodeId: this.getNodeId(),
@@ -1071,7 +1064,7 @@ qx.Class.define("osparc.data.model.Node", {
10711064
this.fireDataEvent("showInLogger", msgData);
10721065

10731066
this.getRetrieveIFrameButton().setEnabled(true);
1074-
this.setProgress(100);
1067+
this.getStatus().setProgress(100);
10751068

10761069
// FIXME: Apparently no all services are inmediately ready when they publish the port
10771070
// ping the service until it is accessible through the platform
@@ -1151,7 +1144,7 @@ qx.Class.define("osparc.data.model.Node", {
11511144

11521145
if (this.isFilePicker()) {
11531146
nodeEntry.outputs = this.getOutputValues();
1154-
nodeEntry.progress = this.getProgress();
1147+
nodeEntry.progress = this.getStatus().getProgress();
11551148
}
11561149

11571150
if (savePosition) {

0 commit comments

Comments
 (0)