@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/tab-kumohub.js

@@ -0,0 +1,800 @@
+RED.sidebar.kumohub = (function () {
+  marked.setOptions({
+    renderer: new marked.Renderer(),
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: true,
+    smartLists: true,
+    smartypants: false,
+  });
+
+  var content;
+  var sections;
+  var functionSection;
+  var environmentSection;
+  var initialised = false;
+  var parameters;
+  var SELECT_KUMOHUB_PROFILE = 'Select Kumohub profile...';
+  var DEFINE_KUMOHUB_PROFILE = 'Define Kumohub profile';
+  let workspaces; // workspaces from kumohub.io
+  // store for workspace, storage, policy from profile before kumohub login
+  let profileWorkspace; 
+  let profileStage;
+  let profilePolicy;
+
+  const DEPLOYING = 'DEPLOYING';
+  const NOTDEPLOYING = 'NOTDEPLOYING';
+  let deployState = NOTDEPLOYING;
+  
+  function initCss() {
+    $('<style>')
+      .text(
+        `
+    select {
+      outline: 1.5px solid #ccc;
+    }
+    select:focus {
+      outline: 1.5px solid #ccc; 
+      outline-offset: 0px;
+    }
+    .invalid {
+      border: 1px solid red;
+    }
+    
+    .valid {
+      border: 1px solid green;
+    }
+    datalist {
+      max-height: 300px;
+      overflow-y: auto !important;
+    }
+    .editor-button-xsmall {
+      height: 16px;
+      min-width: 16px;
+      line-height: 14px;
+      font-size: 10px;
+      border-radius: 2px;
+      padding: 0 2px;
+  }
+    `
+      )
+      .appendTo(document.head);
+  }
+
+  function initHTML() {
+    initCss();
+    content = document.createElement('div');
+    content.className = 'sidebar-kumohub';
+
+    RED.actions.add('core:show-kumohub-tab', show);
+
+    var stackContainer = $('<div>', {
+      class: 'sidebar-node-info-stack',
+    }).appendTo(content);
+
+    let headerContentHtml = `
+    <div class="sidebar-title-wrapper">
+      <span>Deploy: Kumohub</span>
+    </div>
+    <div id="kumohub-sidebar-header" class="sidebar-header">
+        <div id="kumohub-instrumentation" class="node-info">
+          <div id="kumohub-profiles-wrapper">
+            <span style="padding-left: 3px">Profiles</span>
+            <select id="kumohub-sidebar-profiles" class="palette-textinput" style="padding: 0px;">
+              <option value="Select Kumohub profile..." style="color:#3988CB !important">Click to select one...</option>
+            </select>
+          </div>  
+
+          <div id="kumohub-wrapper">
+            <!-- connect btn -->
+            <div>
+            <a id="kumohub-sidebar-connect-btn" class="sidebar-header-button" href="#">
+              <i id="kumohub-sidebar-connect-icon" class="fa fa-circle" style="color: red"></i>  
+              Connect
+            </a>
+            </div>
+ 
+            <!-- deploy btn -->
+            <div style="margin-right: 4px;">
+            <a id="kumohub-sidebar-deploy-btn" class="sidebar-header-button" href="#">
+              <i id="kumohub-sidebar-deploy-icon" class="fa fa-cloud-upload"></i>  
+              Deploy
+            </a>
+            </div>
+            <!-- export btn -->
+            <div id="kumohub-options-dropdown">
+              <a id="kumohub-sidebar-export-btn" class="sidebar-header-button" href="#">
+                <i class="fa fa-ellipsis-h"></i>  
+              </a>
+            </div>
+            <div id="kumohub-options-dropdown-content">
+              <span class="option-disabled">Generate script...</span>
+              <span id="kumohub-exportCloudFormationBtn" class="option">AWS CloudFormation</span>
+              <span id="kumohub-exportServerlessBtn" class="option">Serverless</span>
+            </div>        
+          </div>
+        </div>
+        <table hidden id="kumohub-sidebar-error" class="node-info" style="margin: 0px;">
+        <tr>
+          <td style="border: 0px solid white; padding: 3px; width: 100%;">
+            <p style="font-size: 12px; margin: 0px; text-align: center; color:red;"><span>Kumohub profile has not been configured</span></p>
+          </td>
+
+          <td style="border: 0px solid white; padding: 3px;">
+            <a id="kumohub-sidebar-error-help-btn" class="editor-button editor-button-xsmall" href="https://docs.kumologica.com/docs/guide/GettingStarted.html#installation" target="_blank">
+              <i class="fa fa-question"></i>  
+            </a>
+          </td>
+          
+          <td style="border: 0px solid white; padding: 3px 6px 3px 3px;">
+            <a id="kumohub-sidebar-error-close-btn" class="editor-button editor-button-xsmall" href="#">
+              <i class="fa fa-times"></i></a>
+          </td>
+        </tr>
+      </table> 
+    </div>
+    `;
+
+    $(headerContentHtml).appendTo(stackContainer);
+
+    let bodyContainer = $(`<div id="kumohub-sidebar-body" style="display:none"></div>`);
+    bodyContainer.appendTo(stackContainer);
+
+    sections = RED.stack
+      .create({
+        container: bodyContainer,
+      })
+      .hide();
+
+    // function section
+    functionSection = sections.add({
+      title: 'function',
+      collapsible: true,
+    });
+    functionSection.expand();
+
+    // environment section
+    environmentSection = sections.add({
+      title: 'environment',
+      collapsible: true,
+    });
+    //environmentSection.expand();
+
+    RED.sidebar.addTab({
+      id: 'kumohub',
+      label: 'Kumohub',
+      name: 'Kumohub Deployer',
+      iconClass: 'fa fa-cloud',
+      action: 'core:show-kumohub-tab',
+      content: content,
+      pinned: true,
+      enableOnEdit: true,
+      onchange: onchange,
+      onsame: onsame
+    });
+       
+    // Function content init
+    let functionSectionHtml = `
+    <table class="node-info">
+        <tr class="node-info-node-row">
+            <td>Service Name</td>
+            <td colspan="2" style="background: white"><input style="width:100%" id="kumohub-fn-name" class="palette-textinput" pattern="[a-zA-Z0-9-_]{1,64}" type="text"></td>
+        </tr>
+       <tr class="node-info-node-row">
+            <td>Description</td>
+            <td colspan="2" style="background: white"><input style="width:100%" id="kumohub-fn-description" class="palette-textinput" type="text"></td>
+        </tr>
+        <tr class="node-info-node-row">
+            <td>Memory (MB)</td>
+            <td colspan="2" style="background: white"><input id="kumohub-fn-memory" class="palette-textinput" type="number" min="128" max="1536"></td>
+        </tr>
+        <tr class="node-info-node-row">
+            <td>Timeout (s)</td>
+            <td colspan="2" style="background: white"><input id="kumohub-fn-timeout" class="palette-textinput" type="number" min="5" max="900"></td>
+        </tr>
+        <tr class="node-info-node-row">
+            <td>Workspace</td>
+            <td colspan="2" style="background: white">
+              <select type="text" class="palette-textinput" id="kumohub-fn-workspace" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                <option value="UNDEFINED" selected="true">Undefined</option>
+              </select>
+            </td>
+        </tr>
+
+        <tr class="node-info-node-row">
+            <td>Stage</td>
+            <td colspan="2" style="background: white">
+              <select type="text" class="palette-textinput" id="kumohub-fn-stage" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                <option value="UNDEFINED" selected="true">Undefined</option>
+              </select>
+            </td>
+        </tr>
+
+        <tr class="node-info-node-row">
+            <td>Policy</td>
+            <td colspan="2" style="background: white">
+              <select type="text" class="palette-textinput" id="kumohub-fn-policy" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                <option value="Public" selected="true">Public</option>
+              </select>
+            </td>
+        </tr>
+      </table>
+    `;
+    $(functionSectionHtml).appendTo(functionSection.content);
+    functionSection.container.show();
+
+    // Environment section init
+    let environmentSectionHtml = `
+    <div style="display:flex; flex-direction: column; justify-content: flex-start;">
+        <div style="display:flex; justify-content: flex-end; padding:6px">
+          <a id="kumohub-add-environment-variable" href="#" class="editor-button editor-button-small red-ui-editableList-addButton">
+              <i class="fa fa-plus"></i> Add
+          </a>
+        </div>
+        <div id="kumohub-fn-env" style="display:flex; flex-direction: column">
+          <table id="kumohub-fn-env-table" class="node-info" style="table-layout: fixed">
+            
+          </table>
+        </div>
+    </div>
+    `;
+    $(environmentSectionHtml).appendTo(environmentSection.content);
+    environmentSection.container.show();
+
+    // Tooltips
+    RED.popover.tooltip($('#kumohub-sidebar-deploy-btn'), 'Deploy to Kumohub');
+    RED.popover.tooltip($('#kumohub-options-dropdown'), 'Other Kumohub Operations');
+    RED.popover.tooltip($('#kumohub-sidebar-connect-btn'), 'Connect to Kumohub');
+  }
+
+  function onchange(){
+    RED.actions.invoke('core:show-sidebar');
+  }
+
+  function onsame(){
+      RED.actions.invoke('core:hide-sidebar');
+  }
+
+  function sanitizeLambdaName(name) {
+    return name
+      .replace('.json', '')
+      .trim()
+      .replace(/^@/, '')
+      .replace(/[^a-zA-Z0-9-_]/g, '_')
+      .substr(0, 140);
+  }
+
+  function setLambdaName(name) {
+    $('#kumohub-fn-name').val(sanitizeLambdaName(name));
+  }
+
+  function setValues(params) {
+    console.log(`set values`);
+
+    // storing for setting it up after login to kumohub
+    profileWorkspace = params.workspace || params.account; 
+    profileStage = params.stage;
+    profilePolicy = params.policy;
+    console.log(`profile stored: ${profileWorkspace}  - ${profileStage} - ${profilePolicy}`);
+
+    if (!initialised) {
+      parameters = params;    
+      return;
+    }
+
+    if (params && (params.name || params.functionName)) {
+      setLambdaName(params.name || params.functionName || params["service-name"]);
+    } else {
+      if (window.__kumologica.settings.projectFlowName) {
+        setLambdaName(window.__kumologica.settings.projectFlowName);
+      }
+    }
+    if (!params) {
+      return;
+    }
+    if (params.profile) {
+      setProfile(params.profile);
+    }
+    if (params.description) {
+      $('#kumohub-fn-description').val(params.description);
+    }
+    if (params.memory) {
+      $('#kumohub-fn-memory').val(params.memory);
+    }
+    if (params.timeout) {
+      $('#kumohub-fn-timeout').val(params.timeout);
+    }
+    if (params.account) {
+      $('#kumohub-fn-workspace').val(params.workspace || params.account);
+      fillStages('#kumohub-fn-workspace').val();
+    }
+    if (params.workspace) {
+      $('#kumohub-fn-workspace').val(params.workspace);
+      fillStages('#kumohub-fn-workspace').val();
+    }
+
+    if (params.stage) {
+      $('#kumohub-fn-stage').val(params.stage);
+    }
+    if (params.policy) {
+      $('#kumohub-fn-policy').val(params.policy);
+    }
+
+    if (params.environment && params.environment.length > 0) {
+      let environmentTable = $('#kumohub-fn-env-table');
+
+      params.environment.forEach(function (e, i) {
+        $(`
+          <tr class="node-info-node-row">
+            <td style="background: white; width:46%"><input id="kumohub-fn-env-key" class="palette-textinput" type="text" placeholder="key" style="width:100%" value="${e.key}"></td>
+            <td style="background: white; width:46%"><input id="kumohub-fn-env-val" class="palette-textinput" type="text" placeholder="value" style="width:100%" value="${e.value}"></td>
+            <td id="kumohub-fn-env-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+          </tr>`).appendTo(environmentTable);
+      });
+    }
+  }
+
+  function getValues() {
+    // Basic information
+    let fnProfile = getProfile();
+    let fnName = $('#kumohub-fn-name').val();
+    let fnDescription = $('#kumohub-fn-description').val();
+    let fnMemory = $('#kumohub-fn-memory').val();
+    let fnTimeout = $('#kumohub-fn-timeout').val();
+    let fnStage = $('#kumohub-fn-stage').val();
+    let fnAccount = $('#kumohub-fn-account').val();
+    let fnWorkspace = $('#kumohub-fn-workspace').val();
+    let fnPolicy = $('#kumohub-fn-policy').val();
+ 
+    // Environment variables
+    let environment = [];
+    let envvarRows = $('#kumohub-fn-env-table tr');
+
+    envvarRows.map((index, row) => {
+      let envvar = $(row).find('td').find('input');
+      let key = $(envvar[0]).val();
+      let value = $(envvar[1]).val();
+      environment.push({ key, value });
+    });
+
+    return {
+      profile: fnProfile,
+      "service-name": fnName,
+      description: fnDescription,
+      memory: fnMemory,
+      timeout: fnTimeout,
+      workspace: fnWorkspace || fnAccount,
+      stage: fnStage,
+      environment: environment,
+      policy: fnPolicy
+    };
+  }
+
+  function fillWorkspaces() {
+    let dropdown = $('#kumohub-fn-workspace');
+
+    if (workspaces.length > 0) {
+      dropdown.empty();
+    }
+    workspaces.forEach(function (w) {
+      dropdown.append($('<option></option>').val(w.name).text(w.name));
+    });
+
+    if (profileWorkspace) {
+        $('#kumohub-fn-workspace').val(profileWorkspace);
+        fillStages(profileWorkspace);
+    }
+  }
+  
+  function fillStages(fnWorkspace) {
+      
+    let dropdown = $('#kumohub-fn-stage');
+    if (fnWorkspace == "UNDEFINED") {
+      //dropdown.append($('<option></option>').val("UNDEFINED").text("Undefined"));
+      return;
+    }
+    let ws = workspaces.find(w => w.name === fnWorkspace);
+  
+    if (ws) {
+      dropdown.empty();
+      if (ws.stages && ws.stages.length > 0) {
+        ws.stages.forEach(function (s) {
+          dropdown.append($('<option></option>').val(s.name).text(s.name));
+        });
+        if (profileStage) {
+           $('#kumohub-fn-stage').val(profileStage);
+           fillPolicies(fnWorkspace, profileStage);
+        }
+      } else {
+        dropdown.append($('<option></option>').val("UNDEFINED").text("Undefined"));
+      }
+
+    }
+  }
+    
+  function fillPolicies(workspace, stage) {
+      
+    let dropdown = $('#kumohub-fn-policy');
+    if (workspace == "UNDEFINED") {
+      //dropdown.append($('<option></option>').val("UNDEFINED").text("Undefined"));
+      return;
+    }
+    let ws = workspaces.find(w => w.name === workspace);
+  
+    if (ws) {
+      let st = ws.stages.find(s => s.name === stage);
+      if (st && st.policies) {
+        dropdown.empty();
+
+        if (st.policies && st.policies.length > 0) {
+          st.policies.forEach(function (p) {
+            dropdown.append($('<option></option>').val(p.name).text(p.name));
+          });
+          if (profilePolicy) {
+            $('#kumohub-fn-policy').val(profilePolicy);
+          }
+        } else {
+          dropdown.append($('<option></option>').val("Public").text("Public"));
+        }
+      }
+    }
+  }
+
+  function fillProfiles() {
+    try {
+      const profiles = window.__kumologica.kumohub.listProfiles();
+      let dropdown = $('#kumohub-sidebar-profiles');
+
+      if (profiles.length > 0) {
+        dropdown.empty();
+        dropdown.append($('<option disabled>Available Kumohub Profiles</option>'));
+      }
+      profiles.forEach(function (profile) {
+        dropdown.append($('<option></option>').val(profile).text(profile));
+      });
+
+      // in case kumohub-config.json was loaded already and
+      // setValues could not select correct profile, doing it now
+      if (window.__kumologica.kumohub.profile) {
+        setProfile(window.__kumologica.kumohub.profile);
+      }
+    } catch (Error) {
+      console.log(`error: ${Error}`);
+      showProfileError();
+    }
+  }
+
+  function getProfile() {
+    return $('#kumohub-sidebar-profiles').find(':selected').val();
+  }
+
+  function setProfile(profile) {
+    window.__kumologica.kumohub.profile = profile;
+
+    // Show the body if profile is set to existing profile
+    if (profile != SELECT_KUMOHUB_PROFILE && 
+      $('#kumohub-sidebar-profiles').find('option[value=' + profile + ']').length) {
+      
+      $(`#kumohub-sidebar-profiles option[value='${SELECT_KUMOHUB_PROFILE}']`).remove();
+      $('#kumohub-sidebar-profiles').val(profile);
+    } else {
+      $('#kumohub-sidebar-profiles').val(SELECT_KUMOHUB_PROFILE);
+    }
+  }
+
+
+  function showProfileError() {
+    $('#kumohub-sidebar-error').show();
+  }
+
+  RED.events.on('settings:cloud-config-changed', function() {
+    fillProfiles();
+  });
+  
+  // event triggered when kumohub-config.json file has been loaded
+  RED.events.on('kumohub-config', function () {
+    if (!$('#kumohub-fn-name').val() &&
+      window.__kumologica.settings.projectFlowName
+    ) {
+      setLambdaName(window.__kumologica.settings.projectFlowName);
+    }
+
+    if (window.__kumologica.settings.kumohubConfig ) {
+      const params = window.__kumologica.settings.kumohubConfig.getKumohubConfig();
+
+      setValues(params);
+
+    } else {
+      console.log('kumologica.settings.kumohubConfig not present');
+    }
+  });
+
+  function initJs() {
+    fillProfiles();
+
+    // Initialize fields with default values
+    if (window.__kumologica.settings.projectFlowName) {
+      setLambdaName(window.__kumologica.settings.projectFlowName);
+    }
+
+    $('#kumohub-fn-description').val('kumologica flow');
+    $('#kumohub-fn-memory').val('512');
+    $('#kumohub-fn-timeout').val('20');
+
+    $('#kumohub-fn-timeout, #kumohub-fn-workspace, #kumohub-fn-stage, #kumohub-fn-policy, #kumohub-fn-memory, #kumohub-fn-description, #kumohub-fn-name').change(function () {
+      saveSettings();
+    });
+
+    $('#kumohub-fn-name').change(function () {
+      this.value = sanitizeLambdaName(this.value);
+    });
+
+    $('#kumohub-fn-workspace').on('change', function() {
+      fillStages( this.value );
+    });
+
+    $('#kumohub-fn-stage').on('change', function() {
+      fillPolicies($('#kumohub-fn-workspace').val(), this.value);
+    });
+    
+    $('#kumohub-sidebar-profiles').change(function () {
+      
+      if (this.value) {
+        $('#kumohub-sidebar-body').show();
+      }
+      saveSettings();
+
+      if (this.value != SELECT_KUMOHUB_PROFILE) {
+        $(`#kumohub-sidebar-profiles option[value='${SELECT_KUMOHUB_PROFILE}']`).remove();
+        window.__kumologica.kumohub.profile = this.value;
+        disconnectFromKumohub();
+      }
+    });
+
+    // Attach the environment variables
+    $('#kumohub-add-environment-variable').click((e) => {
+      let environmentTable = $('#kumohub-fn-env-table');
+      let environmentRowHtml = `
+        <tr class="node-info-node-row">
+          <td style="background: white; width:46%"><input id="kumohub-fn-env-key" class="palette-textinput" type="text" placeholder="key" style="width:100%"></td>
+          <td style="background: white; width:46%"><input id="kumohub-fn-env-val" class="palette-textinput" type="text" placeholder="value" style="width:100%"></td>
+          <td id="kumohub-fn-env-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+        </tr>`;
+      $(environmentRowHtml).appendTo(environmentTable);
+
+      $('#kumohub-fn-env-table')
+        .find('input')
+        .each(function () {
+          $(this).change(function () {
+            saveSettings();
+          });
+        });
+    });
+
+    $('#kumohub-fn-env-table')
+      .find('input')
+      .each(function () {
+        $(this).change(function () {
+          saveSettings();
+        });
+      });
+
+    $('#kumohub-fn-env-table').on('click', '.removeRow', function () {
+      $(this).parent().remove();
+      saveSettings();
+    });
+
+    // Close export menu when click in the window
+    $('.sidebar-kumohub').click(function (e) {
+      $('#kumohub-options-dropdown-content').hide();
+    });
+
+    // Connect to AWS button
+    $('#kumohub-sidebar-connect-btn').click((e) => {
+      e.preventDefault();
+      connectToKumohub();
+    });
+
+    // Deploy to kumohub button
+    $('#kumohub-sidebar-deploy-btn').click((e) => {
+      e.preventDefault();
+      deploy();
+    });
+
+    // Export cloudformation script
+    $('#kumohub-exportCloudFormationBtn').click((e) => {
+      e.preventDefault();
+      hideMenu();
+      exportScript(window.__kumologica.cloud.provider.aws);
+    });
+
+    // Export serverless script
+    $('#kumohub-exportServerlessBtn').click((e) => {
+      e.preventDefault();
+      hideMenu();
+      exportScript(window.__kumologica.cloud.provider.serverless);
+    });
+
+    $('#kumohub-options-dropdown').click((e) => {
+      e.stopPropagation();
+
+      $('#kumohub-sidebar-export-btn').toggleClass('dropdown-selected');
+
+      $('#kumohub-options-dropdown-content').toggle();
+    });
+
+    initialised = true;
+    if (parameters) {
+      setValues(parameters);
+    }
+
+    connectUIDisconnected();
+  }
+
+  function hideMenu() {
+    $('#kumohub-sidebar-export-btn').removeClass('dropdown-selected');
+    $('#kumohub-options-dropdown-content').hide();
+  }
+
+  async function exportScript(provider) {
+    
+    $('#workspace-terminal').show();
+    try {
+      await window.__kumologica.cloud.generateScript(
+        provider,
+        RED.header.getCurrentProjectInfo(),
+        getValues()
+      );
+    } catch (Error) {
+      handleError(Error);
+    }
+  }
+
+  async function connectToKumohub() {
+    profile = getProfile();
+
+    if (!profile || profile == SELECT_KUMOHUB_PROFILE) {
+      RED.notify(`<strong>Error</strong>: Please select Kumohub profile before connecting to Kumohub account.`, 'error');
+      return;
+    }
+
+    if (window.__kumologica.kumohub.isLoggedIn(profile)) {
+      RED.notify(`<strong>Information</strong>: Already connected to ${profile} Kumohub account.`, 'info');
+      return;
+    }
+
+    connectUIConnecting();
+    
+    try {
+      await window.__kumologica.kumohub.login(profile);
+      workspaces = await window.__kumologica.kumohub.getWorkspaces(profile);
+
+      fillWorkspaces(profileWorkspace);
+     } catch (err) {
+      connectUIDisconnected();
+
+      RED.notify(`<strong>Error</strong>: ${err.stderr? err.stderr: err}`, 'error');
+      return;
+    }
+    connectUIConnected();
+  }
+
+  function disconnectFromKumohub() {
+    window.__kumologica.kumohub.logout();
+    connectUIDisconnected();
+  }
+
+  function connectUIDisconnected() {
+    // show connect button
+    $('#kumohub-sidebar-connect-btn').show();
+    if ($('#kumohub-sidebar-connect-btn') && $('#kumohub-sidebar-connect-btn').html()) { 
+      $('#kumohub-sidebar-connect-btn').html($('#kumohub-sidebar-connect-btn').html().replace('Connecting', 'Connect'));
+    }
+    $('#kumohub-sidebar-connect-icon').attr({'class': 'fa fa-circle'});
+    $('#kumohub-sidebar-connect-icon').css({'color': 'red'});
+    // hide deploy and export buttons 
+    $('#kumohub-sidebar-deploy-btn').hide();
+    $('#kumohub-sidebar-export-btn').hide();
+    $('#kumohub-sidebar-body').hide();
+  }
+
+  function connectUIConnecting() {
+    $('#kumohub-sidebar-connect-icon').attr({'class': 'fa fa-spinner fa-spin'});
+    $('#kumohub-sidebar-connect-icon').css({'color': 'black'});
+  }
+
+  function connectUIConnected() {
+    // hide connect button
+    $('#kumohub-sidebar-connect-btn').hide();
+    //$('#kumohub-sidebar-connect-btn').html($('#kumohub-sidebar-connect-btn').html().replace('Connect', 'Connected'));
+    //$('#kumohub-sidebar-connect-icon').attr({'class': 'fa fa-circle'});
+    //$('#kumohub-sidebar-connect-icon').css({'color': 'green'});
+
+    // show deploy and options buttons 
+    $('#kumohub-sidebar-deploy-btn').show();
+
+    // dont show until functionality implemented
+    //$('#kumohub-sidebar-export-btn').show();
+    $('#kumohub-sidebar-body').show();
+  }
+
+  function deployingUIDeploying() {
+    $('#kumohub-sidebar-deploy-icon').attr({'class': 'fa fa-spinner fa-spin'});
+  }
+  function deployingUINotDeploying() {
+    $('#kumohub-sidebar-deploy-icon').attr({'class': 'fa fa-cloud-upload'});
+  }
+
+  async function deploy() {
+
+    const profile = getProfile();
+    if (!profile || profile == SELECT_KUMOHUB_PROFILE) {
+      RED.notify(`Please select kumohub profile before deploying flows.`, 'error');
+      return;
+    }
+
+    if (deployState == DEPLOYING) {
+      RED.notify(`<strong>Information</strong>: Already deploying to Kumohub.`, 'info');
+      return;
+    }
+    
+    RED.deploy.save();
+
+    deployingUIDeploying();
+    deployState = DEPLOYING;
+
+    $('#workspace-terminal').show();
+
+    let params = getValues();
+  
+    let envs = params.environment;
+    
+    if (envs) {
+      let variables = {Variables: {}};
+      
+      envs.forEach(function(e) {
+        variables.Variables[e.key] = e.value;  
+      });
+      params.environment = {};
+      params.environment = JSON.stringify(variables);
+    };
+
+    try {
+      await window.__kumologica.kumohub.deploy(
+        RED.header.getCurrentProjectInfo(),
+        params
+      ); 
+
+    } catch (Error) {
+      handleError(Error);
+    }
+
+    deployState = NOTDEPLOYING;
+    deployingUINotDeploying();
+  }
+
+  function handleError(error) {
+    let msg = error.toString();
+    RED.notify(msg, 'error');
+  }
+
+  function saveSettings() {
+    window.__kumologica.settings.kumohubConfig.setKumohubConfig(getValues());
+  }
+
+  function show() {
+    RED.sidebar.show('kumohub');
+  }
+
+  function init() {
+    initHTML();
+    initJs();
+  }
+  
+  return {
+    init: init,
+    show: show,
+  };
+})();