Snapshots in frontend

services/web/client/source/class/osparc/component/form/renderer/PropForm.js

@@ -88,10 +88,10 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
         const paramsMenuBtn = this.__getParamsMenuButton(field.key).set({
           visibility: "excluded"
         });
-        osparc.data.model.Sweeper.isSweeperEnabled()
-          .then(isSweeperEnabled => {
+        osparc.utils.Utils.isDevelopmentPlatform()
+          .then(areParamsEnabled => {
             field.bind("visibility", paramsMenuBtn, "visibility", {
-              converter: visibility => (visibility === "visible" && isSweeperEnabled) ? "visible" : "excluded"
+              converter: visibility => (visibility === "visible" && areParamsEnabled) ? "visible" : "excluded"
             });
           });
         return paramsMenuBtn;

services/web/client/source/class/osparc/component/snapshots/Snapshots.js

@@ -0,0 +1,112 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.component.snapshots.Snapshots", {
+  extend: osparc.ui.table.Table,
+
+  construct: function(primaryStudy) {
+    this.__primaryStudy = primaryStudy;
+
+    const model = this.__initModel();
+
+    this.base(arguments, model, {
+      initiallyHiddenColumns: [
+        this.self().T_POS.STUDY_ID.col,
+        this.self().T_POS.SNAPSHOT_ID.col,
+        this.self().T_POS.PARENT_ID.col
+      ],
+      statusBarVisible: false
+    });
+
+    this.setColumnWidth(this.self().T_POS.NAME.col, 220);
+    this.setColumnWidth(this.self().T_POS.DATE.col, 130);
+
+    this.__populateSnapshotsTable();
+  },
+
+  statics: {
+    T_POS: {
+      STUDY_ID: {
+        col: 0,
+        label: "StudyId"
+      },
+      NAME: {
+        col: 1,
+        label: qx.locale.Manager.tr("Snapshot Name")
+      },
+      DATE: {
+        col: 2,
+        label: qx.locale.Manager.tr("Created At")
+      },
+      SNAPSHOT_ID: {
+        col: 3,
+        label: "SnapshotId"
+      },
+      PARENT_ID: {
+        col: 4,
+        label: "ParentId"
+      }
+    }
+  },
+
+  members: {
+    __primaryStudy: null,
+
+    getRowData: function(rowIdx) {
+      return this.getTableModel().getRowDataAsMap(rowIdx);
+    },
+
+    __initModel: function() {
+      const model = new qx.ui.table.model.Simple();
+
+      const cols = [];
+      Object.keys(this.self().T_POS).forEach(colKey => {
+        const idx = this.self().T_POS[colKey].col;
+        const label = this.self().T_POS[colKey].label;
+        cols.splice(idx, 0, label);
+      });
+      model.setColumns(cols);
+
+      return model;
+    },
+
+    __populateSnapshotsTable: function() {
+      const columnModel = this.getTableColumnModel();
+      columnModel.setDataCellRenderer(this.self().T_POS.STUDY_ID.col, new qx.ui.table.cellrenderer.String());
+      columnModel.setDataCellRenderer(this.self().T_POS.NAME.col, new qx.ui.table.cellrenderer.String());
+      columnModel.setDataCellRenderer(this.self().T_POS.DATE.col, new qx.ui.table.cellrenderer.Date());
+      columnModel.setDataCellRenderer(this.self().T_POS.SNAPSHOT_ID.col, new qx.ui.table.cellrenderer.String());
+      columnModel.setDataCellRenderer(this.self().T_POS.PARENT_ID.col, new qx.ui.table.cellrenderer.String());
+
+      this.__primaryStudy.getSnapshots()
+        .then(snapshots => {
+          const rows = [];
+          snapshots.reverse().forEach(snapshot => {
+            const row = [];
+            row[this.self().T_POS.STUDY_ID.col] = snapshot["project_uuid"];
+            row[this.self().T_POS.NAME.col] = snapshot["label"];
+            const date = new Date(snapshot["created_at"]);
+            row[this.self().T_POS.DATE.col] = osparc.utils.Utils.formatDateAndTime(date);
+            row[this.self().T_POS.SNAPSHOT_ID.col] = snapshot["id"];
+            row[this.self().T_POS.PARENT_ID.col] = snapshot["parent_uuid"];
+            rows.push(row);
+          });
+          this.getTableModel().setData(rows, false);
+        });
+    }
+  }
+});

services/web/client/source/class/osparc/component/snapshots/SnapshotsView.js

@@ -0,0 +1,92 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2021 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.component.snapshots.SnapshotsView", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(study) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.VBox(10));
+
+    if (study.hasSnapshots()) {
+      this.__primaryStudy = study;
+      const snapshotsSection = this.__buildSnapshotsSection();
+      this._add(snapshotsSection, {
+        flex: 1
+      });
+    }
+  },
+
+  events: {
+    "openSnapshot": "qx.event.type.Data"
+  },
+
+  members: {
+    __snapshotsSection: null,
+    __snapshotsTable: null,
+    __selectedSnapshot: null,
+    __openSnapshotBtn: null,
+
+    __buildSnapshotsSection: function() {
+      const snapshotsSection = this.__snapshotsSection = new qx.ui.groupbox.GroupBox(this.tr("Snapshots")).set({
+        layout: new qx.ui.layout.VBox(5)
+      });
+
+      this.__rebuildSnapshotsTable();
+
+      const openSnapshotBtn = this.__openSnapshotBtn = this.__createOpenSnapshotBtn();
+      openSnapshotBtn.setEnabled(false);
+      snapshotsSection.addAt(openSnapshotBtn, 2);
+      openSnapshotBtn.addListener("execute", () => {
+        if (this.__selectedSnapshot) {
+          this.fireDataEvent("openSnapshot", this.__selectedSnapshot);
+        }
+      });
+
+      return snapshotsSection;
+    },
+
+    __rebuildSnapshotsTable: function() {
+      if (this.__snapshotsTable) {
+        this.__snapshotsSection.remove(this.__snapshotsTable);
+      }
+
+      const snapshotsTable = this.__snapshotsTable = new osparc.component.snapshots.Snapshots(this.__primaryStudy);
+      snapshotsTable.addListener("cellTap", e => {
+        if (this.__openSnapshotBtn) {
+          this.__openSnapshotBtn.setEnabled(true);
+        }
+        const selectedRow = e.getRow();
+        this.__selectedSnapshot = snapshotsTable.getRowData(selectedRow);
+      });
+
+      this.__snapshotsSection.addAt(snapshotsTable, 1, {
+        flex: 1
+      });
+
+      return snapshotsTable;
+    },
+
+    __createOpenSnapshotBtn: function() {
+      const openSnapshotBtn = new qx.ui.form.Button(this.tr("Open Snapshot")).set({
+        allowGrowX: false
+      });
+      return openSnapshotBtn;
+    }
+  }
+});

services/web/client/source/class/osparc/component/snapshots/TakeSnapshotView.js

@@ -0,0 +1,113 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2021 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.component.snapshots.TakeSnapshotView", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(study) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.VBox(10));
+
+    this.set({
+      study
+    });
+
+    this.__buildForm();
+  },
+
+  events: {
+    "takeSnapshot": "qx.event.type.Event",
+    "cancel": "qx.event.type.Event"
+  },
+
+  properties: {
+    study: {
+      check: "osparc.data.model.Study",
+      init: null,
+      nullable: false
+    }
+  },
+
+  members: {
+    __form: null,
+
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "label":
+          control = new qx.ui.form.TextField();
+          break;
+        case "save-data":
+          control = new qx.ui.form.CheckBox().set({
+            value: false,
+            enabled: false
+          });
+          break;
+        case "cancel-button": {
+          control = new qx.ui.form.Button(this.tr("Cancel")).set({
+            allowGrowX: false
+          });
+          const commandEsc = new qx.ui.command.Command("Enter");
+          control.setCommand(commandEsc);
+          control.addListener("execute", () => this.fireEvent("cancel"));
+          break;
+        }
+        case "ok-button": {
+          control = new qx.ui.form.Button(this.tr("OK")).set({
+            allowGrowX: false
+          });
+          const commandEnter = new qx.ui.command.Command("Enter");
+          control.setCommand(commandEnter);
+          control.addListener("execute", () => {
+            // releaseCapture to make sure all changes are applied
+            this.__renderer.releaseCapture();
+            this.fireEvent("takeSnapshot");
+          });
+          break;
+        }
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __buildForm: function() {
+      const form = this.__form = new qx.ui.form.Form();
+      const renderer = this.__renderer = new qx.ui.form.renderer.Single(form);
+      this._add(renderer);
+
+      const study = this.getStudy();
+
+      const label = this.getChildControl("label");
+      form.add(label, "Label", null, "label");
+      label.setValue(study.getName());
+
+      // buttons
+      const cancelButton = this.getChildControl("cancel-button");
+      form.addButton(cancelButton);
+      const okButton = this.getChildControl("ok-button");
+      form.addButton(okButton);
+    },
+
+    getLabel: function() {
+      return this.__form.getItem("label").getValue();
+    },
+
+    getSaveData: function() {
+      return this.__form.getItem("save-data").getValue();
+    }
+  }
+});