Skip to content

Commit c0e0037

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Enh: Show deleting files progress (#7466)
1 parent bcc60b5 commit c0e0037

File tree

14 files changed

+209
-117
lines changed

14 files changed

+209
-117
lines changed

‎services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

+7-14
Original file line numberDiff line numberDiff line change
@@ -1924,8 +1924,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
19241924
.catch(err => {
19251925
const msg = osparc.data.Resources.getErrorMsg(JSON.parse(err.response)) || this.tr("Something went wrong while exporting the study");
19261926
osparc.FlashMessenger.logError(err, msg);
1927-
})
1928-
.finally(() => osparc.task.TasksContainer.getInstance().removeTaskUI(exportTaskUI));
1927+
});
19291928
},
19301929

19311930
__importStudy: function(file) {
@@ -1983,26 +1982,22 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
19831982
.then(studyData => this._updateStudyData(studyData))
19841983
.catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while fetching the study")))
19851984
.finally(() => {
1986-
osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
19871985
this._resourcesContainer.removeNonResourceCard(importingStudyCard);
19881986
});
19891987
} else if (req.status == 400) {
1990-
osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
19911988
this._resourcesContainer.removeNonResourceCard(importingStudyCard);
19921989
const msg = osparc.data.Resources.getErrorMsg(JSON.parse(req.response)) || this.tr("Something went wrong while importing the study");
19931990
osparc.FlashMessenger.logError(msg);
19941991
}
19951992
});
19961993
req.addEventListener("error", e => {
19971994
// transferFailed
1998-
osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
19991995
this._resourcesContainer.removeNonResourceCard(importingStudyCard);
20001996
const msg = osparc.data.Resources.getErrorMsg(e) || this.tr("Something went wrong while importing the study");
20011997
osparc.FlashMessenger.logError(msg);
20021998
});
20031999
req.addEventListener("abort", e => {
20042000
// transferAborted
2005-
osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
20062001
this._resourcesContainer.removeNonResourceCard(importingStudyCard);
20072002
const msg = osparc.data.Resources.getErrorMsg(e) || this.tr("Something went wrong while importing the study");
20082003
osparc.FlashMessenger.logError(msg);
@@ -2134,30 +2129,28 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
21342129
const cardTitle = this.tr("Duplicating ") + studyName;
21352130
const duplicatingStudyCard = this._addTaskCard(task, cardTitle, osparc.task.Duplicate.ICON);
21362131
if (duplicatingStudyCard) {
2137-
this.__attachDuplicateEventHandler(task, duplicateTaskUI);
2132+
this.__attachDuplicateEventHandler(task);
21382133
}
21392134
},
21402135

2141-
__attachDuplicateEventHandler: function(task, taskUI) {
2136+
__attachDuplicateEventHandler: function(task) {
21422137
const finished = (msg, msgLevel) => {
21432138
if (msg) {
21442139
osparc.FlashMessenger.logAs(msg, msgLevel);
21452140
}
2146-
osparc.store.PollTasks.getInstance().removeTask(task);
2147-
osparc.task.TasksContainer.getInstance().removeTaskUI(taskUI);
21482141
this._removeTaskCard(task);
21492142
};
21502143

2151-
task.addListener("taskAborted", () => {
2152-
const msg = this.tr("Duplication cancelled");
2153-
finished(msg, "WARNING");
2154-
});
21552144
task.addListener("resultReceived", e => {
21562145
const msg = this.tr("Duplication completed");
21572146
finished(msg, "INFO");
21582147
const duplicatedStudyData = e.getData();
21592148
this._updateStudyData(duplicatedStudyData);
21602149
});
2150+
task.addListener("taskAborted", () => {
2151+
const msg = this.tr("Duplication cancelled");
2152+
finished(msg, "WARNING");
2153+
});
21612154
task.addListener("pollingError", e => {
21622155
const err = e.getData();
21632156
const msg = this.tr("Something went wrong while duplicating the study<br>") + err.message;

‎services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js

+6-8
Original file line numberDiff line numberDiff line change
@@ -363,24 +363,18 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
363363
const cardTitle = this.tr("Publishing ") + studyName;
364364
const toTemplateCard = this._addTaskCard(task, cardTitle, osparc.task.ToTemplate.ICON);
365365
if (toTemplateCard) {
366-
this.__attachToTemplateEventHandler(task, toTemplateTaskUI, toTemplateCard);
366+
this.__attachToTemplateEventHandler(task, toTemplateCard);
367367
}
368368
},
369369

370-
__attachToTemplateEventHandler: function(task, taskUI, toTemplateCard) {
370+
__attachToTemplateEventHandler: function(task, toTemplateCard) {
371371
const finished = (msg, msgLevel) => {
372372
if (msg) {
373373
osparc.FlashMessenger.logAs(msg, msgLevel);
374374
}
375-
osparc.store.PollTasks.getInstance().removeTask(task);
376-
osparc.task.TasksContainer.getInstance().removeTaskUI(taskUI);
377375
this._resourcesContainer.removeNonResourceCard(toTemplateCard);
378376
};
379377

380-
task.addListener("taskAborted", () => {
381-
const msg = this.tr("Study to Template cancelled");
382-
finished(msg, "WARNING");
383-
});
384378
task.addListener("updateReceived", e => {
385379
const updateData = e.getData();
386380
if ("task_progress" in updateData && toTemplateCard) {
@@ -398,6 +392,10 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
398392
finished(msg, "INFO");
399393
this.reloadResources();
400394
});
395+
task.addListener("taskAborted", () => {
396+
const msg = this.tr("Study to Template cancelled");
397+
finished(msg, "WARNING");
398+
});
401399
task.addListener("pollingError", e => {
402400
const err = e.getData();
403401
const msg = this.tr("Something went wrong while publishing the study<br>") + err.message;

‎services/static-webserver/client/source/class/osparc/data/PollTask.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -176,10 +176,8 @@ qx.Class.define("osparc.data.PollTask", {
176176
fetch(abortPath, {
177177
method: "DELETE"
178178
})
179-
.then(() => this.fireEvent("taskAborted"))
180-
.catch(err => {
181-
throw err;
182-
});
179+
.catch(err => osparc.FlashMessenger.logError(err))
180+
.finally(() => this.fireEvent("taskAborted"));
183181
}
184182
}
185183
}

‎services/static-webserver/client/source/class/osparc/file/FileLabelWithActions.js

+52-1
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,60 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
225225
const interval = 1000;
226226
pollTasks.createPollingTask(fetchPromise, interval)
227227
.then(task => {
228+
const taskUI = new osparc.task.TaskUI();
229+
taskUI.setIcon("@FontAwesome5Solid/trash/14");
230+
taskUI.setTitle(this.tr("Deleting files"));
231+
taskUI.setTask(task);
232+
osparc.task.TasksContainer.getInstance().addTaskUI(taskUI);
233+
234+
const progressWindow = new osparc.ui.window.Progress(
235+
this.tr("Delete files"),
236+
"@FontAwesome5Solid/trash/14",
237+
this.tr("Deleting files..."),
238+
);
239+
if (task.getAbortHref()) {
240+
const cancelButton = progressWindow.addCancelButton();
241+
cancelButton.setLabel(this.tr("Ignore"));
242+
const abortButton = new qx.ui.form.Button().set({
243+
label: this.tr("Cancel"),
244+
center: true,
245+
minWidth: 100,
246+
});
247+
abortButton.addListener("execute", () => task.abortRequested());
248+
progressWindow.addButton(abortButton);
249+
abortButton.set({
250+
appearance: "danger-button",
251+
});
252+
}
253+
progressWindow.open();
254+
255+
const finished = (msg, msgLevel) => {
256+
if (msg) {
257+
osparc.FlashMessenger.logAs(msg, msgLevel);
258+
}
259+
progressWindow.close();
260+
};
261+
262+
task.addListener("updateReceived", e => {
263+
const data = e.getData();
264+
if (data["task_progress"]) {
265+
if ("message" in data["task_progress"] && data["task_progress"]["message"]) {
266+
progressWindow.setMessage(data["task_progress"]["message"]);
267+
}
268+
if ("percent" in data["task_progress"]) {
269+
progressWindow.setProgress(data["task_progress"]["percent"]*100);
270+
}
271+
}
272+
}, this);
228273
task.addListener("resultReceived", e => {
229274
this.fireDataEvent("pathsDeleted", paths);
230-
osparc.FlashMessenger.logAs(this.tr("Items successfully deleted"), "INFO");
275+
finished(this.tr("Items successfully deleted"), "INFO");
276+
});
277+
task.addListener("taskAborted", () => finished(this.tr("Deletion aborted"), "WARNING"));
278+
task.addListener("pollingError", e => {
279+
const err = e.getData();
280+
const msg = this.tr("Something went wrong while deleting the files<br>") + err.message;
281+
finished(msg, "ERROR");
231282
});
232283
})
233284
.catch(err => osparc.FlashMessenger.logError(err, this.tr("Unsuccessful files deletion")));

‎services/static-webserver/client/source/class/osparc/store/PollTasks.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ qx.Class.define("osparc.store.PollTasks", {
5555
});
5656
},
5757

58-
removeTask: function(task) {
58+
__removeTask: function(task) {
5959
const tasks = this.getTasks();
6060
const index = tasks.findIndex(t => t.getTaskId() === task.getTaskId());
6161
if (index > -1) {
@@ -68,6 +68,8 @@ qx.Class.define("osparc.store.PollTasks", {
6868
const index = tasks.findIndex(t => t.getTaskId() === taskData["task_id"]);
6969
if (index === -1) {
7070
const task = new osparc.data.PollTask(taskData, interval);
71+
task.addListener("resultReceived", () => this.__removeTask(task), this);
72+
task.addListener("taskAborted", () => this.__removeTask(task), this);
7173
tasks.push(task);
7274
return task;
7375
}

‎services/static-webserver/client/source/class/osparc/task/Duplicate.js

+4-17
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,14 @@ qx.Class.define("osparc.task.Duplicate", {
1919
extend: osparc.task.TaskUI,
2020

2121
construct: function(studyName) {
22-
this.__studyName = studyName;
23-
2422
this.base(arguments);
23+
24+
this.setIcon(this.self().ICON+"/14");
25+
this.setTitle(this.tr("Duplicating:"));
26+
this.setSubtitle(studyName);
2527
},
2628

2729
statics: {
2830
ICON: "@FontAwesome5Solid/copy"
2931
},
30-
31-
members: {
32-
__studyName: null,
33-
34-
// overridden
35-
_buildLayout: function() {
36-
this.setIcon(this.self().ICON+"/14");
37-
this.getChildControl("title");
38-
this.getChildControl("subtitle");
39-
this.getChildControl("stop");
40-
41-
this.setTitle(this.tr("Duplicating:"));
42-
this.setSubtitle(this.__studyName);
43-
}
44-
}
4532
});

‎services/static-webserver/client/source/class/osparc/task/Export.js

+4-16
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,14 @@ qx.Class.define("osparc.task.Export", {
1919
extend: osparc.task.TaskUI,
2020

2121
construct: function(study) {
22-
this.__study = study;
23-
2422
this.base(arguments);
23+
24+
this.setIcon(this.self().ICON+"/14");
25+
this.setTitle(this.tr("Exporting:"));
26+
this.setSubtitle(study.name);
2527
},
2628

2729
statics: {
2830
ICON: "@FontAwesome5Solid/cloud-download-alt"
2931
},
30-
31-
members: {
32-
__study: null,
33-
34-
// overridden
35-
_buildLayout: function() {
36-
this.setIcon(this.self().ICON+"/14");
37-
this.getChildControl("title");
38-
this.getChildControl("subtitle");
39-
this.getChildControl("stop");
40-
41-
this.setTitle(this.tr("Exporting ") + this.__study.name);
42-
}
43-
}
4432
});

‎services/static-webserver/client/source/class/osparc/task/Import.js

+8-12
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,15 @@
1818
qx.Class.define("osparc.task.Import", {
1919
extend: osparc.task.TaskUI,
2020

21+
construct: function(studyName) {
22+
this.base(arguments);
23+
24+
this.setIcon(this.self().ICON+"/14");
25+
this.setTitle(this.tr("Importing..."));
26+
this.setSubtitle(studyName);
27+
},
28+
2129
statics: {
2230
ICON: "@FontAwesome5Solid/cloud-upload-alt"
2331
},
24-
25-
members: {
26-
// overridden
27-
_buildLayout: function() {
28-
this.setIcon(this.self().ICON+"/14");
29-
this.getChildControl("title");
30-
this.getChildControl("subtitle");
31-
this.getChildControl("stop");
32-
33-
this.setTitle(this.tr("Importing Study"));
34-
}
35-
}
3632
});

‎services/static-webserver/client/source/class/osparc/task/TaskUI.js

+26-5
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,16 @@ qx.Class.define("osparc.task.TaskUI", {
9393
row: 1
9494
});
9595
break;
96+
case "progress":
97+
control = new qx.ui.basic.Label("").set({
98+
alignY: "middle",
99+
});
100+
this._add(control, {
101+
column: 2,
102+
row: 0,
103+
rowSpan: 2
104+
});
105+
break;
96106
case "stop":
97107
control = new qx.ui.basic.Image("@MaterialIcons/close/16").set({
98108
width: 25,
@@ -101,7 +111,7 @@ qx.Class.define("osparc.task.TaskUI", {
101111
alignY: "middle"
102112
});
103113
this._add(control, {
104-
column: 2,
114+
column: 3,
105115
row: 0,
106116
rowSpan: 2
107117
});
@@ -111,6 +121,19 @@ qx.Class.define("osparc.task.TaskUI", {
111121
},
112122

113123
__applyTask: function(task) {
124+
task.addListener("updateReceived", e => {
125+
const data = e.getData();
126+
if (data["task_progress"]) {
127+
if ("message" in data["task_progress"] && !this.getChildControl("subtitle").getValue()) {
128+
this.getChildControl("subtitle").setValue(data["task_progress"]["message"]);
129+
}
130+
if ("percent" in data["task_progress"]) {
131+
const progress = data["task_progress"]["percent"];
132+
this.getChildControl("progress").setValue(progress*100 + "%");
133+
}
134+
}
135+
}, this);
136+
114137
const stopButton = this.getChildControl("stop");
115138
task.bind("abortHref", stopButton, "visibility", {
116139
converter: abortHref => abortHref ? "visible" : "excluded"
@@ -138,11 +161,9 @@ qx.Class.define("osparc.task.TaskUI", {
138161
this.getChildControl("icon").setSource(source);
139162
},
140163

141-
/**
142-
* @abstract
143-
*/
144164
_buildLayout: function() {
145-
throw new Error("Abstract method called!");
165+
this.getChildControl("title");
166+
this.getChildControl("subtitle");
146167
}
147168
}
148169
});

‎services/static-webserver/client/source/class/osparc/task/TasksButton.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ qx.Class.define("osparc.task.TasksButton", {
106106
}
107107
}
108108
const tasks = osparc.task.TasksContainer.getInstance();
109-
tasks.setTasksContainerPosition(bounds.left+bounds.width, osparc.navigation.NavigationBar.HEIGHT+3);
109+
tasks.setTasksContainerPosition(
110+
bounds.left + bounds.width - osparc.task.TaskUI.MAX_WIDTH,
111+
osparc.navigation.NavigationBar.HEIGHT + 14
112+
);
110113
tasks.getTasksContainer().show();
111114
document.addEventListener("mousedown", tapListener);
112115
},

‎services/static-webserver/client/source/class/osparc/task/TasksContainer.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,12 @@ qx.Class.define("osparc.task.TasksContainer", {
4646
}
4747
this.__tasks.push(taskUI);
4848
this.__tasksContainer.addAt(taskUI, 0);
49+
50+
taskUI.getTask().addListener("resultReceived", () => this.__removeTaskUI(taskUI), this);
51+
taskUI.getTask().addListener("taskAborted", () => this.__removeTaskUI(taskUI), this);
4952
},
5053

51-
removeTaskUI: function(taskUI) {
54+
__removeTaskUI: function(taskUI) {
5255
if (this.__tasks.indexOf(taskUI) > -1) {
5356
this.__tasks.remove(taskUI);
5457
}
@@ -69,7 +72,7 @@ qx.Class.define("osparc.task.TasksContainer", {
6972
const root = qx.core.Init.getApplication().getRoot();
7073
if (root && root.getBounds()) {
7174
this.__tasksContainer.setLayoutProperties({
72-
left: x-osparc.task.TaskUI.MAX_WIDTH,
75+
left: x,
7376
top: y
7477
});
7578
}

0 commit comments

Comments
 (0)