@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/deploy.js

@@ -0,0 +1,422 @@
+RED.deploy = (function () {
+  var deploymentTypes = {
+    full: { img: 'red/images/deploy-full-o.png' },
+    nodes: { img: 'red/images/deploy-nodes-o.png' },
+    flows: { img: 'red/images/deploy-flows-o.png' },
+  };
+
+  var ignoreDeployWarnings = {
+    unknown: false,
+    unusedConfig: false,
+    invalid: false,
+  };
+
+  var deploymentType = 'full';
+
+  var deployInflight = false;
+
+  var currentDiff = null;
+
+  let debounceSave = null;
+  let autoDeploy = false;
+  let dirty = false;
+
+  function changeDeploymentType(type) {
+    deploymentType = type;
+    $('#btn-deploy-icon').attr('src', deploymentTypes[type].img);
+  }
+
+  /**
+   * options:
+   *   type: "default" - Button with drop-down options - no further customisation available
+   *   type: "simple"  - Button without dropdown. Customisations:
+   *      label: the text to display - default: "Deploy"
+   *      icon : the icon to use. Null removes the icon. default: "red/images/deploy-full-o.png"
+   */
+  function init() {
+    // setup a debounced version for save
+    debounceSave = window.__kumologica.libs.debounce(save, 2000);
+
+    RED.actions.add('core:deploy-flows', save);
+    RED.actions.add('core:restart-flows', restart);
+
+    // Used when user modifies the description, there is no need to click save twice
+    RED.events.on('nodes:change:save-immediate', function () {
+      save(true, true, true); // save it when save button is hidden
+    });
+
+    RED.events.on('editor:autosave:on', (msg) => {
+      autoDeploy = true;
+      save(true, true, true);
+    });
+
+    RED.events.on('editor:autosave:off', (msg) => {
+      autoDeploy = false;
+    });
+
+    RED.events.on('nodes:change', function (state) {
+      // upgrade the state
+      dirty = state.dirty;
+
+      if (state.dirty && autoDeploy) {
+        // Update the project information
+        debounceSave(true, true, true);
+      } else if (state.dirty && !autoDeploy) {
+        RED.events.emit('editor:unsynced');
+      } else {
+        RED.events.emit('editor:synced');
+      }
+      RED.events.emit('deploy:finished');
+    });
+
+    var activeNotifyMessage;
+    RED.comms.subscribe('notification/runtime-deploy', function (topic, msg) {
+      if (!activeNotifyMessage) {
+        //var currentRev = RED.nodes.version();
+        RED.nodes.version(msg.revision);
+        let currentRev = RED.nodes.version();
+
+        if (
+          currentRev === null ||
+          deployInflight ||
+          currentRev === msg.revision
+        ) {
+          return;
+        }
+        var message = $('<p>').text('The flows on the server have been updated.');
+        activeNotifyMessage = RED.notify(message, {
+          modal: true,
+          fixed: true,
+          buttons: [
+            {
+              text: 'Ignore',
+              click: function () {
+                activeNotifyMessage.close();
+                activeNotifyMessage = null;
+              },
+            },
+            {
+              text: 'Review changes',
+              class: 'primary',
+              click: function () {
+                activeNotifyMessage.close();
+                var nns = RED.nodes.createCompleteNodeSet();
+                resolveConflict(nns, false);
+                activeNotifyMessage = null;
+              },
+            },
+          ],
+        });
+      }
+    });
+  }
+
+  function getNodeInfo(node) {
+    var tabLabel = '';
+    if (node.z) {
+      var tab = RED.nodes.workspace(node.z);
+      if (!tab) {
+        tab = RED.nodes.subflow(node.z);
+        tabLabel = tab.name;
+      } else {
+        tabLabel = tab.label;
+      }
+    }
+    var label = RED.utils.getNodeLabel(node, node.id);
+    return { tab: tabLabel, type: node.type, label: label };
+  }
+  function sortNodeInfo(A, B) {
+    if (A.tab < B.tab) {
+      return -1;
+    }
+    if (A.tab > B.tab) {
+      return 1;
+    }
+    if (A.type < B.type) {
+      return -1;
+    }
+    if (A.type > B.type) {
+      return 1;
+    }
+    if (A.name < B.name) {
+      return -1;
+    }
+    if (A.name > B.name) {
+      return 1;
+    }
+    return 0;
+  }
+
+  function resolveConflict(currentNodes, activeDeploy) {
+    var message = $('<div>');
+    $('<p data-i18n="deploy.confirm.conflict"></p>').appendTo(message);
+    var conflictCheck = $(
+      '<div id="node-dialog-confirm-deploy-conflict-checking" class="node-dialog-confirm-conflict-row">' +
+        '<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>' +
+        '</div>'
+    ).appendTo(message);
+    var conflictAutoMerge = $(
+      '<div class="node-dialog-confirm-conflict-row">' +
+        '<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>' +
+        '</div>'
+    )
+      .hide()
+      .appendTo(message);
+    var conflictManualMerge = $(
+      '<div id="node-dialog-confirm-deploy-conflict-manual-merge" class="node-dialog-confirm-conflict-row">' +
+        '<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>' +
+        '</div>'
+    )
+      .hide()
+      .appendTo(message);
+
+    message.i18n();
+    currentDiff = null;
+    var buttons = [
+      {
+        text: 'Cancel',
+        click: function () {
+          conflictNotification.close();
+        },
+      },
+      {
+        id: 'node-dialog-confirm-deploy-review',
+        text: 'Review changes',
+        class: 'primary disabled',
+        click: function () {
+          if (!$('#node-dialog-confirm-deploy-review').hasClass('disabled')) {
+            RED.diff.showRemoteDiff();
+            conflictNotification.close();
+          }
+        },
+      },
+      {
+        id: 'node-dialog-confirm-deploy-merge',
+        text: 'Merge',
+        class: 'primary disabled',
+        click: function () {
+          if (!$('#node-dialog-confirm-deploy-merge').hasClass('disabled')) {
+            RED.diff.mergeDiff(currentDiff);
+            conflictNotification.close();
+          }
+        },
+      },
+    ];
+    if (activeDeploy) {
+      buttons.push({
+        id: 'node-dialog-confirm-deploy-overwrite',
+        text: 'Ignore & deploy',
+        class: 'primary',
+        click: function () {
+          save(true, activeDeploy);
+          conflictNotification.close();
+        },
+      });
+    }
+    var conflictNotification = RED.notify(message, {
+      modal: true,
+      fixed: true,
+      width: 600,
+      buttons: buttons,
+    });
+
+    var now = Date.now();
+    RED.diff.getRemoteDiff(function (diff) {
+      var ellapsed = Math.max(1000 - (Date.now() - now), 0);
+      currentDiff = diff;
+      setTimeout(function () {
+        conflictCheck.hide();
+        var d = Object.keys(diff.conflicts);
+        if (d.length === 0) {
+          conflictAutoMerge.show();
+          $('#node-dialog-confirm-deploy-merge').removeClass('disabled');
+        } else {
+          conflictManualMerge.show();
+        }
+        $('#node-dialog-confirm-deploy-review').removeClass('disabled');
+      }, ellapsed);
+    });
+  }
+  function cropList(list) {
+    if (list.length > 5) {
+      var remainder = list.length - 5;
+      list = list.slice(0, 5);
+      list.push(`= ${remainder} more`);
+    }
+    return list;
+  }
+  function sanitize(html) {
+    return html
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+  function restart() {
+    var startTime = Date.now();
+    $('.deploy-button-content').css('opacity', 0);
+    $('.save-button-spinner').show();
+    var deployWasEnabled = !$('#btn-save').hasClass('disabled');
+    $('#btn-save').addClass('disabled');
+    deployInflight = true;
+    // $('#header-shade').show();
+    // $('#editor-shade').show();
+    // $('#palette-shade').show();
+    // $('#sidebar-shade').show();
+
+    $.ajax({
+      url: 'flows',
+      type: 'POST',
+      headers: {
+        'kumologica-core-Deployment-Type': 'reload',
+      },
+    })
+      .done(function (data, textStatus, xhr) {
+        if (deployWasEnabled) {
+          $('#btn-save').removeClass('disabled');
+        }
+        RED.notify(
+          '<p>' + 'Flow restarted' + '</p>',
+          'success'
+        );
+      })
+      .fail(function (xhr, textStatus, err) {
+        if (deployWasEnabled) {
+          $('#btn-save').removeClass('disabled');
+        }
+        if (xhr.status === 401) {
+          RED.notify('Deployed failed: User not authorized');
+        } else if (xhr.status === 409) {
+          RED.notify('Deploy failed: Server running a most recent version of the flow')
+          // resolveConflict(nns, true);
+        } else if (xhr.responseText) {
+          RED.notify(`Deploy failed: ${xhr.responseText}`);
+        } else {
+          RED.notify(`Deploy failed: No response from server`);
+        }
+      })
+      .always(function () {
+        deployInflight = false;
+        var delta = Math.max(0, 300 - (Date.now() - startTime));
+        setTimeout(function () {
+          $('.deploy-button-content').css('opacity', 1);
+          $('.save-button-spinner').hide();
+          // $('#header-shade').hide();
+          // $('#editor-shade').hide();
+          // $('#palette-shade').hide();
+          // $('#sidebar-shade').hide();
+        }, delta);
+      });
+  }
+
+  /**
+   *
+   * @param {*} skipValidation
+   * @param {*} force
+   * @param {*} debounce - set to ignore whether the save button needs to be visible or not
+   */
+  function save(skipValidation, force, invisible) {
+    console.log('[deploy] save method invoked!. dirty=? force=?', dirty, force);
+
+    // Update the available test cases
+    RED.sidebar.test.refreshTab(true); // true - keep the sidebar hidden if not displayed
+    
+    if (dirty) {
+      RED.header.changeProjectStatus('Deploying...');
+      var nns = RED.nodes.createCompleteNodeSet();
+      var data = { flows: nns };
+
+      if (!force) {
+        data.rev = RED.nodes.version();
+      }
+
+      deployInflight = true;
+      console.log('[deploy] Deploying...');
+      $.ajax({
+        url: 'flows',
+        type: 'POST',
+        data: JSON.stringify(data),
+        contentType: 'application/json; charset=utf-8',
+        headers: {
+          'kumologica-core-Deployment-Type': deploymentType,
+        },
+      })
+        .done(function (data, textStatus, xhr) {
+          RED.nodes.dirty(false);
+          RED.nodes.version(data.rev);
+          RED.nodes.originalFlow(nns);
+
+          //TODO: #javier notify header to indicate the status of the project, `saving ....`
+          RED.nodes.eachNode(function (node) {
+            if (node.changed) {
+              node.dirty = true;
+              node.changed = false;
+            }
+            if (node.moved) {
+              node.dirty = true;
+              node.moved = false;
+            }
+            if (node.credentials) {
+              delete node.credentials;
+            }
+          });
+
+          RED.nodes.eachConfig(function (confNode) {
+            confNode.changed = false;
+            if (confNode.credentials) {
+              delete confNode.credentials;
+            }
+          });
+          RED.nodes.eachSubflow(function (subflow) {
+            subflow.changed = false;
+          });
+          RED.nodes.eachWorkspace(function (ws) {
+            ws.changed = false;
+          });
+          // Once deployed, cannot undo back to a clean state
+          RED.history.markAllDirty();
+          RED.view.redraw();
+          RED.events.emit('deploy');
+        })
+        .fail(function (xhr, textStatus, err) {
+          console.log('[deploy] Deployment failed due to: ', err);
+          RED.nodes.dirty(true);
+
+          if (xhr.status === 401) {
+            RED.notify('Deploy failed: user not authorized', 'error');
+          } else if (xhr.status === 409) {
+            resolveConflict(nns, true);
+          } else if (xhr.responseText) {
+            RED.notify(`Deploy failed: ${xhr.responseText}`, 'error');
+          } else {
+            RED.notify('Deploy failed: no response from server', 'error');
+          }
+        })
+        .always(function () {
+          // Rehidrate the breakpoints
+          window.__kumologica.debugger.redrawBreakpoints();
+          
+          deployInflight = false;
+          // var delta = Math.max(0, 300 - (Date.now() - startTime));
+          setTimeout(function () {
+            $('.deploy-button-content').css('opacity', 1);
+            $('.save-button-spinner').hide();
+            RED.header.changeProjectStatus('running');
+          }, 600);
+        });
+
+      //setTimeout(() => RED.header.changeProjectStatus('running'), 500);
+    } else {
+      // Notify the requestor of the deployment, that it is nothing to deploy
+      console.log('[deploy] Nothing to deploy!!')
+      RED.events.emit('deploy:finished');
+    }
+  }
+
+  return {
+    init: init,
+    setDeployInflight: function (state) {
+      deployInflight = state;
+    },
+    save: save,
+  };
+})();