🎨 [Frontend] Mock: Job Manager

services/static-webserver/client/source/class/osparc/Application.js

@@ -569,7 +569,7 @@ qx.Class.define("osparc.Application", {
     },
 
     __closeAllAndToLoginPage: function() {
-      osparc.data.PollTasks.getInstance().removeTasks();
+      osparc.store.PollTasks.getInstance().removeTasks();
       osparc.MaintenanceTracker.getInstance().stopTracker();
       osparc.CookieExpirationTracker.getInstance().stopTracker();
       osparc.NewUITracker.getInstance().stopTracker();

services/static-webserver/client/source/class/osparc/dashboard/GridButtonPlaceholder.js → services/static-webserver/client/source/class/osparc/dashboard/GridButtonTaskPlaceholder.js

@@ -15,7 +15,7 @@
 
 ************************************************************************ */
 
-qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
+qx.Class.define("osparc.dashboard.GridButtonTaskPlaceholder", {
   extend: osparc.dashboard.GridButtonBase,
 
   construct: function() {

services/static-webserver/client/source/class/osparc/dashboard/ListButtonPlaceholder.js → services/static-webserver/client/source/class/osparc/dashboard/ListButtonTaskPlaceholder.js

@@ -15,7 +15,7 @@
 
 ************************************************************************ */
 
-qx.Class.define("osparc.dashboard.ListButtonPlaceholder", {
+qx.Class.define("osparc.dashboard.ListButtonTaskPlaceholder", {
   extend: osparc.dashboard.ListButtonBase,
 
   construct: function() {

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

@@ -177,6 +177,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       return (card instanceof osparc.dashboard.GridButtonItem || card instanceof osparc.dashboard.ListButtonItem);
     },
 
+    isCardTaskPlaceholder: function(card) {
+      return (card instanceof osparc.dashboard.GridButtonTaskPlaceholder || card instanceof osparc.dashboard.ListButtonTaskPlaceholder);
+    },
+
     createToolbarRadioButton: function(label, icon, toolTipText, pos) {
       const rButton = new qx.ui.toolbar.RadioButton().set({
         label,
@@ -474,8 +478,26 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       }
     },
 
-    _taskDataReceived: function(taskData) {
-      throw new Error("Abstract method called!");
+    _addTaskCard: function(task, cardTitle, cardIcon) {
+      if (task) {
+        const taskPlaceholders = this._resourcesContainer.getCards().filter(card => osparc.dashboard.ResourceBrowserBase.isCardTaskPlaceholder(card));
+        if (taskPlaceholders.find(taskPlaceholder => taskPlaceholder.getTask() === task)) {
+          return null;
+        }
+      }
+
+      const isGrid = this._resourcesContainer.getMode() === "grid";
+      const taskCard = isGrid ? new osparc.dashboard.GridButtonTaskPlaceholder() : new osparc.dashboard.ListButtonTaskPlaceholder();
+      taskCard.setTask(task);
+      taskCard.buildLayout(
+        cardTitle,
+        cardIcon + (isGrid ? "/60" : "/24"),
+        null,
+        true
+      );
+      taskCard.subscribeToFilterGroup("searchBarFilter");
+      this._resourcesContainer.addNonResourceCard(taskCard);
+      return taskCard;
     },
 
     _populateCardMenu: function(card) {

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

@@ -251,12 +251,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         return;
       }
 
-      osparc.data.Resources.get("tasks")
-        .then(tasks => {
-          if (tasks && tasks.length) {
-            this.__tasksReceived(tasks);
-          }
-        });
+      this.__tasksToCards();
 
       this._loadingResourcesBtn.setFetching(true);
       this._loadingResourcesBtn.setVisibility("visible");
@@ -1889,18 +1884,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return this._resourcesList.find(study => study.uuid === id);
     },
 
-    __createDuplicateCard: function(studyName) {
-      const isGrid = this._resourcesContainer.getMode() === "grid";
-      const duplicatingStudyCard = isGrid ? new osparc.dashboard.GridButtonPlaceholder() : new osparc.dashboard.ListButtonPlaceholder();
-      duplicatingStudyCard.buildLayout(
-        this.tr("Duplicating ") + studyName,
-        osparc.task.Duplicate.ICON + (isGrid ? "60" : "24"),
-        null,
-        true
-      );
-      return duplicatingStudyCard;
-    },
-
     __duplicateStudy: function(studyData) {
       const text = this.tr("Duplicate process started and added to the background tasks");
       osparc.FlashMessenger.logAs(text, "INFO");
@@ -1915,54 +1898,53 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       };
       const fetchPromise = osparc.data.Resources.fetch("studies", "duplicate", params, options);
       const interval = 1000;
-      const pollTasks = osparc.data.PollTasks.getInstance();
+      const pollTasks = osparc.store.PollTasks.getInstance();
       pollTasks.createPollingTask(fetchPromise, interval)
         .then(task => this.__taskDuplicateReceived(task, studyData["name"]))
         .catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while duplicating")));
     },
 
     __exportStudy: function(studyData) {
-      const exportTask = new osparc.task.Export(studyData);
-      exportTask.start();
-      exportTask.setSubtitle(this.tr("Preparing files"));
+      const exportTaskUI = new osparc.task.Export(studyData);
+      exportTaskUI.setSubtitle(this.tr("Preparing files"));
+
+      osparc.task.TasksContainer.getInstance().addTaskUI(exportTaskUI);
+
       const text = this.tr("Exporting process started and added to the background tasks");
       osparc.FlashMessenger.logAs(text, "INFO");
 
       const url = window.location.href + "v0/projects/" + studyData["uuid"] + ":xport";
       const progressCB = () => {
         const textSuccess = this.tr("Download started");
-        exportTask.setSubtitle(textSuccess);
+        exportTaskUI.setSubtitle(textSuccess);
       };
       osparc.utils.Utils.downloadLink(url, "POST", null, progressCB)
         .catch(err => {
           const msg = osparc.data.Resources.getErrorMsg(JSON.parse(err.response)) || this.tr("Something went wrong while exporting the study");
           osparc.FlashMessenger.logError(err, msg);
         })
-        .finally(() => {
-          exportTask.stop();
-        });
+        .finally(() => osparc.task.TasksContainer.getInstance().removeTaskUI(exportTaskUI));
     },
 
     __importStudy: function(file) {
       const uploadingLabel = this.tr("Uploading file");
-      const importTask = new osparc.task.Import();
-      importTask.start();
-      importTask.setSubtitle(uploadingLabel);
+      const importTaskUI = new osparc.task.Import();
+      importTaskUI.setSubtitle(uploadingLabel);
+
+      osparc.task.TasksContainer.getInstance().addTaskUI(importTaskUI);
 
       const text = this.tr("Importing process started and added to the background tasks");
       osparc.FlashMessenger.logAs(text, "INFO");
 
-      const isGrid = this._resourcesContainer.getMode() === "grid";
-      const importingStudyCard = isGrid ? new osparc.dashboard.GridButtonPlaceholder() : new osparc.dashboard.ListButtonPlaceholder();
-      importingStudyCard.buildLayout(
-        this.tr("Importing Study..."),
-        "@FontAwesome5Solid/cloud-upload-alt/" + (isGrid ? "60" : "24"),
-        uploadingLabel,
-        true
-      );
-      importingStudyCard.subscribeToFilterGroup("searchBarFilter");
-      this._resourcesContainer.addNonResourceCard(importingStudyCard);
+      const cardTitle = this.tr("Importing Study...");
+      const cardIcon = "@FontAwesome5Solid/cloud-upload-alt";
+      const importingStudyCard = this._addTaskCard(null, cardTitle, cardIcon);
+      if (importingStudyCard) {
+        this.__attachImportEventHandler(file, importTaskUI, importingStudyCard);
+      }
+    },
 
+    __attachImportEventHandler: function(file, importTaskUI, importingStudyCard) {
       const body = new FormData();
       body.append("fileName", file);
 
@@ -1975,7 +1957,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           if (percentComplete === 100) {
             const processingLabel = this.tr("Processing study");
             importingStudyCard.getChildControl("state-label").setValue(processingLabel);
-            importTask.setSubtitle(processingLabel);
+            importTaskUI.setSubtitle(processingLabel);
             importingStudyCard.getChildControl("progress-bar").exclude();
           }
         } else {
@@ -1987,7 +1969,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         if (req.status == 200) {
           const processingLabel = this.tr("Processing study");
           importingStudyCard.getChildControl("state-label").setValue(processingLabel);
-          importTask.setSubtitle(processingLabel);
+          importTaskUI.setSubtitle(processingLabel);
           importingStudyCard.getChildControl("progress-bar").exclude();
           const data = JSON.parse(req.responseText);
           const params = {
@@ -1999,26 +1981,26 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
             .then(studyData => this._updateStudyData(studyData))
             .catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while fetching the study")))
             .finally(() => {
-              importTask.stop();
+              osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
               this._resourcesContainer.removeNonResourceCard(importingStudyCard);
             });
         } else if (req.status == 400) {
-          importTask.stop();
+          osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
           this._resourcesContainer.removeNonResourceCard(importingStudyCard);
           const msg = osparc.data.Resources.getErrorMsg(JSON.parse(req.response)) || this.tr("Something went wrong while importing the study");
           osparc.FlashMessenger.logError(msg);
         }
       });
       req.addEventListener("error", e => {
         // transferFailed
-        importTask.stop();
+        osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
         this._resourcesContainer.removeNonResourceCard(importingStudyCard);
         const msg = osparc.data.Resources.getErrorMsg(e) || this.tr("Something went wrong while importing the study");
         osparc.FlashMessenger.logError(msg);
       });
       req.addEventListener("abort", e => {
         // transferAborted
-        importTask.stop();
+        osparc.task.TasksContainer.getInstance().removeTaskUI(importTaskUI);
         this._resourcesContainer.removeNonResourceCard(importingStudyCard);
         const msg = osparc.data.Resources.getErrorMsg(e) || this.tr("Something went wrong while importing the study");
         osparc.FlashMessenger.logError(msg);
@@ -2133,42 +2115,33 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     // TASKS //
-    __tasksReceived: function(tasks) {
-      tasks.forEach(taskData => this._taskDataReceived(taskData));
-    },
-
-    _taskDataReceived: function(taskData) {
-      // a bit hacky
-      if (taskData["task_id"].includes("from_study") && !taskData["task_id"].includes("as_template")) {
-        const interval = 1000;
-        const pollTasks = osparc.data.PollTasks.getInstance();
-        const task = pollTasks.addTask(taskData, interval);
-        if (task === null) {
-          return;
-        }
-        // ask backend for studyData?
+    __tasksToCards: function() {
+      const tasks = osparc.store.PollTasks.getInstance().getDuplicateStudyTasks();
+      tasks.forEach(task => {
         const studyName = "";
         this.__taskDuplicateReceived(task, studyName);
-      }
+      });
     },
 
     __taskDuplicateReceived: function(task, studyName) {
       const duplicateTaskUI = new osparc.task.Duplicate(studyName);
       duplicateTaskUI.setTask(task);
-      duplicateTaskUI.start();
-      const duplicatingStudyCard = this.__createDuplicateCard(studyName);
-      duplicatingStudyCard.setTask(task);
-      duplicatingStudyCard.subscribeToFilterGroup("searchBarFilter");
-      this._resourcesContainer.addNonResourceCard(duplicatingStudyCard);
-      this.__attachDuplicateEventHandler(task, duplicateTaskUI, duplicatingStudyCard);
+
+      osparc.task.TasksContainer.getInstance().addTaskUI(duplicateTaskUI);
+
+      const cardTitle = this.tr("Duplicating ") + studyName;
+      const duplicatingStudyCard = this._addTaskCard(task, cardTitle, osparc.task.Duplicate.ICON);
+      if (duplicatingStudyCard) {
+        this.__attachDuplicateEventHandler(task, duplicateTaskUI, duplicatingStudyCard);
+      }
     },
 
     __attachDuplicateEventHandler: function(task, taskUI, duplicatingStudyCard) {
       const finished = (msg, msgLevel) => {
         if (msg) {
           osparc.FlashMessenger.logAs(msg, msgLevel);
         }
-        taskUI.stop();
+        osparc.task.TasksContainer.getInstance().removeTaskUI(taskUI);
         this._resourcesContainer.removeNonResourceCard(duplicatingStudyCard);
       };
 

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

@@ -75,6 +75,8 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
     },
 
     __reloadTemplates: function() {
+      this.__tasksToCards();
+
       osparc.data.Resources.getInstance().getAllPages("templates")
         .then(templates => this.__setResourcesToList(templates))
         .catch(err => {
@@ -349,7 +351,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
         if (msg) {
           osparc.FlashMessenger.logAs(msg, msgLevel);
         }
-        taskUI.stop();
+        osparc.task.TasksContainer.getInstance().removeTaskUI(taskUI);
         this._resourcesContainer.removeNonResourceCard(toTemplateCard);
       };
 
@@ -380,43 +382,26 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
       });
     },
 
-    _taskDataReceived: function(taskData) {
-      // a bit hacky
-      if (taskData["task_id"].includes("from_study") && taskData["task_id"].includes("as_template")) {
-        const interval = 1000;
-        const pollTasks = osparc.data.PollTasks.getInstance();
-        const task = pollTasks.addTask(taskData, interval);
-        if (task === null) {
-          return;
-        }
-        // ask backend for studyData?
+    __tasksToCards: function() {
+      const tasks = osparc.store.PollTasks.getInstance().getPublishTemplateTasks();
+      tasks.forEach(task => {
         const studyName = "";
         this.taskToTemplateReceived(task, studyName);
-      }
+      });
     },
 
     taskToTemplateReceived: function(task, studyName) {
       const toTemplateTaskUI = new osparc.task.ToTemplate(studyName);
       toTemplateTaskUI.setTask(task);
-      toTemplateTaskUI.start();
-      const toTemplateCard = this.__createToTemplateCard(studyName);
-      toTemplateCard.setTask(task);
-      this.__attachToTemplateEventHandler(task, toTemplateTaskUI, toTemplateCard);
-    },
 
-    __createToTemplateCard: function(studyName) {
-      const isGrid = this._resourcesContainer.getMode() === "grid";
-      const toTemplateCard = isGrid ? new osparc.dashboard.GridButtonPlaceholder() : new osparc.dashboard.ListButtonPlaceholder();
-      toTemplateCard.buildLayout(
-        this.tr("Publishing ") + studyName,
-        osparc.task.ToTemplate.ICON + (isGrid ? "60" : "24"),
-        null,
-        true
-      );
-      toTemplateCard.subscribeToFilterGroup("searchBarFilter");
-      this._resourcesContainer.addNonResourceCard(toTemplateCard);
-      return toTemplateCard;
-    }
+      osparc.task.TasksContainer.getInstance().addTaskUI(toTemplateTaskUI);
+
+      const cardTitle = this.tr("Publishing ") + studyName;
+      const toTemplateCard = this._addTaskCard(task, cardTitle, osparc.task.ToTemplate.ICON);
+      if (toTemplateCard) {
+        this.__attachToTemplateEventHandler(task, toTemplateTaskUI, toTemplateCard);
+      }
+    },
     // TASKS //
   }
 });