@kumologica/sdk 3.0.0

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

@@ -0,0 +1,852 @@
+
+RED.sidebar.azure = (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_AZURE_PROFILE = 'Select azure profile...';
+    var DEFINE_AZURE_PROFILE = 'Define azure profile';
+    
+    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-azure';
+  
+      RED.actions.add('core:show-azure-tab', show);
+  
+      var stackContainer = $('<div>', {
+        class: 'sidebar-node-info-stack',
+      }).appendTo(content);
+  
+      let headerContentHtml = `
+      <div class="sidebar-title-wrapper">
+        <span>Deploy: Azure</span>
+      </div>
+      <div id="azure-sidebar-header" class="sidebar-header">
+          <div id="azure-instrumentation" class="node-info">
+            <div id="azure-profiles-wrapper">
+              <span style="padding-left: 3px">Profiles</span>
+              <select id="azure-sidebar-profiles" class="palette-textinput" style="padding: 0px;">
+                <option value="Select azure profile..." style="color:#3988CB !important">Click to select one...</option>
+              </select>
+            </div>  
+  
+            <div id="azure-wrapper">
+              <!-- connect btn -->
+              <div>
+              <a id="azure-sidebar-connect-btn" class="sidebar-header-button" href="#">
+                <i id="azure-sidebar-connect-icon" class="fa fa-circle" style="color: red"></i>  
+                Connect
+              </a>
+              </div>
+   
+              <!-- deploy btn -->
+              <div style="margin-right: 4px;">
+              <a id="azure-sidebar-deploy-btn" class="sidebar-header-button" href="#">
+                <i id="azure-sidebar-deploy-icon" class="fa fa-cloud-upload"></i>  
+                Deploy
+              </a>
+              </div>
+              <!-- export btn -->
+              <div id="azure-options-dropdown">
+                <a id="azure-sidebar-export-btn" class="sidebar-header-button" href="#">
+                  <i class="fa fa-ellipsis-h"></i>  
+                </a>
+              </div>
+              <div id="azure-options-dropdown-content">
+                <span class="option-disabled">Generate script...</span>
+                <span id="azure-exportCloudFormationBtn" class="option">AWS CloudFormation</span>
+                <span id="azure-exportServerlessBtn" class="option">Serverless</span>
+              </div>        
+            </div>
+          </div>
+          <table hidden id="azure-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>azure profile has not been configured</span></p>
+            </td>
+  
+            <td style="border: 0px solid white; padding: 3px;">
+              <a id="azure-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="azure-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="azure-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();
+  
+      environmentSection = sections.add({
+        title: 'environment',
+        collapsible: true,
+      });
+      
+      // tags section
+      tagsSection = sections.add({
+        title: 'tags',
+        collapsible: true,
+      });
+      
+      RED.sidebar.addTab({
+        id: 'azure',
+        label: 'azure',
+        name: 'Azure Deployer',
+        iconClass: 'fa fa-windows',
+        action: 'core:show-azure-tab',
+        content: content,
+        pinned: true,
+        enableOnEdit: true,
+        onchange: onchange,
+        onsame: onsame
+      });
+         
+      // Function content init
+     // let fnOsType = $('#azure-fn-os-type').val();
+     // let fnLocation = $('#azure-fn-location').val();
+      //let fnHostingPlan = $('#azure-fn-hosting-plan').val();
+      
+      let functionSectionHtml = `
+      <table class="node-info">
+        <tr class="node-info-node-row">
+          <td>Application Name</td>
+          <td colspan="2" style="background: white"><input style="width:100%" id="azure-fn-application-name" class="palette-textinput" pattern="[a-zA-Z0-9-_]{1,64}" type="text"></td>
+        </tr>
+        <tr class="node-info-node-row">
+              <td>Funcion Name</td>
+              <td colspan="2" style="background: white"><input style="width:100%" id="azure-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="azure-fn-description" class="palette-textinput" type="text"></td>
+          </tr>
+          <tr class="node-info-node-row">
+              <td>Resource Group Name</td>
+              <td colspan="2" style="background: white"><input style="width:100%" id="azure-fn-resource-group-name" class="palette-textinput" type="text" placeholder=" optional"></td>
+          </tr>
+          <tr class="node-info-node-row">
+              <td>Service Plan Id</td>
+              <td colspan="2" style="background: white"><input style="width:100%" id="azure-fn-service-plan-id" class="palette-textinput" type="text" placeholder=" optional"></td>
+          </tr>
+          <tr class="node-info-node-row">
+              <td>Location</td>
+              <td colspan="2" style="background: white"><input style="width:100%" id="azure-fn-location" list="azure-locations-dataList" class="palette-textinput" type="text" />
+              <datalist id="azure-locations-dataList">
+                <option value="Asia">
+                <option value="Asia Pacific">
+                <option value="Australia">
+                <option value="Australia Central">
+                <option value="Australia Central 2">
+                <option value="Australia East">
+                <option value="Australia Southeast">
+                <option value="Brazil">
+                <option value="Brazil South">
+                <option value="Brazil Southeast">
+                <option value="Canada">
+                <option value="Canada Central">
+                <option value="Canada East">
+                <option value="Central India">
+                <option value="Central US">
+                <option value="Central US (Stage)">
+                <option value="Central US EUAP">
+                <option value="East Asia">
+                <option value="East Asia (Stage)">
+                <option value="East US">
+                <option value="East US (Stage)">
+                <option value="East US 2">
+                <option value="East US 2 (Stage)">
+                <option value="East US 2 EUAP">
+                <option value="Europe">
+                <option value="France Central">
+                <option value="France South">
+                <option value="Germany North">
+                <option value="Germany West Central">
+                <option value="Global">
+                <option value="India">
+                <option value="Japan">
+                <option value="Japan East">
+                <option value="Japan West">
+                <option value="Jio India West">
+                <option value="Korea Central">
+                <option value="Korea South">
+                <option value="North Central US">
+                <option value="North Central US (Stage)">
+                <option value="North Europe">
+                <option value="Norway East">
+                <option value="Norway West">
+                <option value="South Africa North">
+                <option value="South Africa West">
+                <option value="South Central US">
+                <option value="South Central US (Stage)">
+                <option value="South India">
+                <option value="Southeast Asia">
+                <option value="Southeast Asia (Stage)">
+                <option value="Switzerland North">
+                <option value="Switzerland West">
+                <option value="UAE Central">
+                <option value="UAE North">
+                <option value="UK South">
+                <option value="UK West">
+                <option value="United Kingdom">
+                <option value="United States">
+                <option value="West Central US">
+                <option value="West Europe">
+                <option value="West India">
+                <option value="West US">
+                <option value="West US (Stage)">
+                <option value="West US 2">
+                <option value="West US 2 (Stage)">
+                <option value="West US 3">
+              </datalist>
+              </td>
+          </tr>
+          <tr class="node-info-node-row">
+              <td>OS Type</td>
+              <td colspan="2" style="background: white">
+                <select type="text" id="azure-fn-os-type" class="palette-textinput" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                  <option value="windows">Windows</option>
+                  <option value="linux">Linux</option>
+                </select>
+              </td>
+          </tr>
+          <tr class="node-info-node-row">
+              <td>Hosting Plan</td>
+              <td colspan="2" style="background: white">
+                <select type="text" id="azure-fn-hosting-plan" class="palette-textinput" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                  <option value="consumtion">Consumption</option>
+                  <option value="premium">Premium</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="azure-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="azure-fn-env" style="display:flex; flex-direction: column">
+            <table id="azure-fn-env-table" class="node-info" style="table-layout: fixed">
+              
+            </table>
+          </div>
+      </div>
+      `;
+      $(environmentSectionHtml).appendTo(environmentSection.content);
+      environmentSection.container.show();
+  
+      // Tags section init
+      let tagsSectionHtml = `
+      <div style="display:flex; flex-direction: column; justify-content: flex-start;">
+          <div style="display:flex; justify-content: flex-end; padding:6px">
+            <a id="azure-add-tag" href="#" class="editor-button editor-button-small red-ui-editableList-addButton">
+                <i class="fa fa-plus"></i> Add
+            </a>
+          </div>
+          <div id="azure-fn-tags" style="display:flex; flex-direction: column">
+            <table id="azure-fn-tags-table" class="node-info" style="table-layout: fixed">
+              
+            </table>
+          </div>
+      </div>
+      `;
+      $(tagsSectionHtml).appendTo(tagsSection.content);
+      tagsSection.container.show();
+ 
+      // Tooltips
+      RED.popover.tooltip($('#azure-sidebar-deploy-btn'), 'Deploy to azure');
+      RED.popover.tooltip($('#azure-options-dropdown'), 'Other azure Operations');
+      RED.popover.tooltip($('#azure-sidebar-connect-btn'), 'Connect to azure');
+    }
+  
+    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) {
+      $('#azure-fn-name').val(sanitizeLambdaName(name));
+    }
+  
+    function setValues(params) {
+      if (!initialised) {
+        parameters = params;
+        return;
+      }
+      
+      if (params && (params.name || params.functionName)) {
+        setLambdaName(params.name || params.functionName);
+      } else {
+        if (window.__kumologica.settings.projectFlowName) {  
+          setLambdaName(window.__kumologica.settings.projectFlowName);
+        }
+      }
+      if (!params || !params["azure-application-name"] || params["azure-application-name"].length == 0) {
+        console.log(`setting app name: gen ###${sanitizeLambdaName(window.__kumologica.settings.projectFlowName.replace('flow', 'app'))}###`);
+        $('#azure-fn-application-name').val(sanitizeLambdaName(window.__kumologica.settings.projectFlowName.replace('flow', 'app')));
+      }
+
+      if (!params) {
+        return;
+      }
+
+      // params available beyond this point
+      if (params.profile) {
+        setProfile(params.profile);
+      }
+      
+      if (params["azure-application-name"] && params["azure-application-name"].length > 0) {
+        console.log(`setting app: ###${params["azure-application-name"]}###`);
+        $('#azure-fn-application-name').val(params["azure-application-name"]);
+      }
+      
+      if (params["hosting-plan"]) {
+        $('#azure-fn-hosting-plan').val(params["hosting-plan"]);
+      }
+      if (params["resource-group-name"]) {
+        $('#azure-fn-resource-group-name').val(params["resource-group-name"]);
+      }
+      if (params["service-plan-id"]) {
+        $('#azure-fn-service-plan-id').val(params["service-plan-id"]);
+      }
+      if (params["os-type"]) {
+        $('#azure-fn-os-type').val(params["os-type"]);
+      }
+      if (params.location) {
+        $('#azure-fn-location').val(params.location);
+      }
+      if (params.description) {
+        $('#azure-fn-description').val(params.description);
+      }
+      
+      if (params.environment && params.environment.length > 0) {
+        let environmentTable = $('#azure-fn-env-table');
+        let env = JSON.parse(params.environment);
+
+        for (let key in env) {
+          $(`
+          <tr class="node-info-node-row">
+            <td style="background: white; width:46%"><input id="azure-fn-env-key" class="palette-textinput" type="text" placeholder="key" style="width:100%" value="${key}"></td>
+            <td style="background: white; width:46%"><input id="azure-fn-env-val" class="palette-textinput" type="text" placeholder="value" style="width:100%" value="${env[key]}"></td>
+            <td id="azure-fn-env-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+          </tr>`).appendTo(environmentTable);
+        }
+      }
+
+      if (params.tags && params.tags.length > 0) {
+        let t = JSON.parse(params.tags);
+        for (let key in t) {
+          $(`
+            <tr class="node-info-node-row">
+              <td style="background: white; width:46%"><input id="azure-fn-tag-key" class="palette-textinput" type="text" placeholder="key" style="width:100%" value="${key}"></td>
+              <td style="background: white; width:46%"><input id="azure-fn-tag-val" class="palette-textinput" type="text" placeholder="value" style="width:100%" value="${t[key]}"></td>
+              <td id="azure-fn-tag-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+            </tr>`).appendTo($('#azure-fn-tags-table'));
+        }
+      }
+    }
+  
+    function getValues() {
+      // Basic information
+      let fnProfile = getProfile();
+      let fnName = $('#azure-fn-name').val();
+      let fnApplicationName = $('#azure-fn-application-name').val();
+      let fnDescription = $('#azure-fn-description').val();
+      let fnOsType = $('#azure-fn-os-type').val();
+      let fnLocation = $('#azure-fn-location').val();
+      let fnHostingPlan = $('#azure-fn-hosting-plan').val();
+      let fnResourceGroupName = $('#azure-fn-resource-group-name').val();
+      let fnServicePlanId= $('#azure-fn-service-plan-id').val();
+   
+      // Environment variables
+      let environment = {};
+      let envvarRows = $('#azure-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[key] = value;
+      });
+  
+      console.log(`tab environment: ${JSON.stringify(environment)}`);
+      // tags
+      let tags = {};
+      let tagsRows = $('#azure-fn-tags-table tr');
+
+      tagsRows.map((index, row) => {
+        let tagsrow = $(row).find('td').find('input');
+        let key = $(tagsrow[0]).val();
+        let value = $(tagsrow[1]).val();
+        tags[key]=value;
+      });
+
+      // returned structure must comply with cli parameters
+      return {
+        profile: fnProfile,
+        "azure-application-name": fnApplicationName,
+        functionName: fnName,
+        description: fnDescription,
+        "os-type": fnOsType,
+        "hosting-plan": fnHostingPlan,
+        "location": fnLocation,
+        "resource-group-name": fnResourceGroupName,
+        "service-plan-id": fnServicePlanId,
+        environment: JSON.stringify(environment),
+        tags: JSON.stringify(tags)
+      };
+    }
+  
+    function fillProfiles() {
+      try {
+        const profiles = window.__kumologica.azure.listProfiles();
+        let dropdown = $('#azure-sidebar-profiles');
+  
+        if (profiles.length > 0) {
+          dropdown.empty();
+          dropdown.append($('<option disabled>Available azure Profiles</option>'));
+        }
+        profiles.forEach(function (profile) {
+          dropdown.append($('<option></option>').val(profile).text(profile));
+        });
+  
+        // in case azure-config.json was loaded already and
+        // setValues could not select correct profile, doing it now
+        if (window.__kumologica.azure.profile) {
+          setProfile(window.__kumologica.azure.profile);
+        }
+      } catch (Error) {
+        console.log(`error: ${Error}`);
+        showProfileError();
+      }
+    }
+  
+    function getProfile() {
+      return $('#azure-sidebar-profiles').find(':selected').val();
+    }
+  
+    function setProfile(profile) {
+      window.__kumologica.azure.profile = profile;
+  
+      // Show the body if profile is set to existing profile
+      if (profile != SELECT_AZURE_PROFILE && 
+        $('#azure-sidebar-profiles').find('option[value=' + profile + ']').length) {
+        
+        $(`#azure-sidebar-profiles option[value='${SELECT_AZURE_PROFILE}']`).remove();
+        $('#azure-sidebar-profiles').val(profile);
+      } else {
+        $('#azure-sidebar-profiles').val(SELECT_AZURE_PROFILE);
+      }
+    }
+  
+  
+    function showProfileError() {
+      $('#azure-sidebar-error').show();
+    }
+  
+    RED.events.on('settings:azure-config-changed', function() {
+      fillProfiles();
+    });
+    
+    // event triggered when azure-config.json file has been loaded
+    RED.events.on('azure-config', function () {
+      if (!$('#azure-fn-name').val() &&
+        window.__kumologica.settings.projectFlowName
+      ) {
+        setLambdaName(window.__kumologica.settings.projectFlowName);
+      }
+  
+      if (window.__kumologica.settings.azureConfig ) {
+        const params = window.__kumologica.settings.azureConfig.getAzureConfig();
+        setValues(params);
+      } else {
+        console.log('kumologica.settings.azureConfig not present');
+      }
+    });
+  
+    function initJs() {
+      fillProfiles();
+  
+      // Initialize fields with default values
+      if (window.__kumologica.settings.projectFlowName) {
+
+        setLambdaName(window.__kumologica.settings.projectFlowName);
+        
+        if (!$('#azure-fn-application-name').val()) {
+          console.log(`setting app name: gen ***${sanitizeLambdaName(window.__kumologica.settings.projectFlowName.replace('flow', 'app'))}###`);
+          $('#azure-fn-application-name').val(sanitizeLambdaName(window.__kumologica.settings.projectFlowName.replace('flow', 'app')));
+        }
+      }
+
+      $('#azure-fn-description').val('kumologica flow');
+ 
+      $('#azure-fn-service-plan-id, #azure-fn-resource-group-name, #azure-fn-hosting-plan, #azure-fn-location, #azure-fn-os-type, #azure-fn-application-name, #azure-fn-description, #azure-fn-name').change(function () {
+        saveSettings();
+      });
+  
+      $('#azure-fn-name').change(function () {
+        this.value = sanitizeLambdaName(this.value);
+      });
+
+      $('#azure-sidebar-profiles').change(function () {
+        
+        if (this.value) {
+          $('#azure-sidebar-body').show();
+        }
+        saveSettings();
+  
+        if (this.value != SELECT_AZURE_PROFILE) {
+          $(`#azure-sidebar-profiles option[value='${SELECT_AZURE_PROFILE}']`).remove();
+          window.__kumologica.azure.profile = this.value;
+          disconnectFromazure();
+        }
+      });
+  
+      // Attach the environment variables
+      $('#azure-add-environment-variable').click((e) => {
+        let environmentTable = $('#azure-fn-env-table');
+        let environmentRowHtml = `
+          <tr class="node-info-node-row">
+            <td style="background: white; width:46%"><input id="azure-fn-env-key" class="palette-textinput" type="text" placeholder="key" style="width:100%"></td>
+            <td style="background: white; width:46%"><input id="azure-fn-env-val" class="palette-textinput" type="text" placeholder="value" style="width:100%"></td>
+            <td id="azure-fn-env-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+          </tr>`;
+        $(environmentRowHtml).appendTo(environmentTable);
+  
+        $('#azure-fn-env-table')
+          .find('input')
+          .each(function () {
+            $(this).change(function () {
+              saveSettings();
+            });
+          });
+      });
+  
+      $('#azure-fn-env-table')
+        .find('input')
+        .each(function () {
+          $(this).change(function () {
+            saveSettings();
+          });
+        });
+  
+      $('#azure-fn-env-table').on('click', '.removeRow', function () {
+        $(this).parent().remove();
+        saveSettings();
+      });
+  
+          // Attach tag
+    $('#azure-add-tag').click((e) => {
+      let tagsTable = $('#azure-fn-tags-table');
+      let tagsRowHtml = `
+        <tr class="node-info-node-row">
+          <td style="background: white; width:46%"><input id="azure-fn-tag-key" class="palette-textinput" type="text" placeholder="key" style="width:100%"></td>
+          <td style="background: white; width:46%"><input id="azure-fn-tag-val" class="palette-textinput" type="text" placeholder="value" style="width:100%"></td>
+          <td id="azure-fn-tags-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+        </tr>`;
+      $(tagsRowHtml).appendTo(tagsTable);
+
+      $('#azure-fn-tags-table')
+        .find('input')
+        .each(function () {
+          $(this).change(function () {
+            saveSettings();
+          });
+        });
+    });
+
+
+    $('#azure-fn-tags-table').on('click', '.removeRow', function () {
+      $(this).parent().remove();
+      saveSettings();
+    });
+
+      // Close export menu when click in the window
+      $('.sidebar-azure').click(function (e) {
+        $('#azure-options-dropdown-content').hide();
+      });
+  
+      // Connect to AWS button
+      $('#azure-sidebar-connect-btn').click((e) => {
+        e.preventDefault();
+        connectToazure();
+      });
+  
+      // Deploy to azure button
+      $('#azure-sidebar-deploy-btn').click((e) => {
+        e.preventDefault();
+        deploy();
+      });
+  
+      // Export cloudformation script
+      $('#azure-exportCloudFormationBtn').click((e) => {
+        e.preventDefault();
+        hideMenu();
+        exportScript(window.__kumologica.cloud.provider.aws);
+      });
+  
+      // Export serverless script
+      $('#azure-exportServerlessBtn').click((e) => {
+        e.preventDefault();
+        hideMenu();
+        exportScript(window.__kumologica.cloud.provider.serverless);
+      });
+  
+      $('#azure-options-dropdown').click((e) => {
+        e.stopPropagation();
+  
+        $('#azure-sidebar-export-btn').toggleClass('dropdown-selected');
+  
+        $('#azure-options-dropdown-content').toggle();
+      });
+  
+      initialised = true;
+      if (parameters) {
+        setValues(parameters);
+      }
+  
+      connectUIDisconnected();
+    }
+  
+    function hideMenu() {
+      $('#azure-sidebar-export-btn').removeClass('dropdown-selected');
+      $('#azure-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 connectToazure() {
+      profile = getProfile();
+  
+      if (!profile || profile == SELECT_AZURE_PROFILE) {
+        RED.notify(`<strong>Error</strong>: Please select azure profile before connecting to azure account.`, 'error');
+        return;
+      }
+  
+      //if (window.__kumologica.azure.isLoggedIn(profile)) {
+       // RED.notify(`<strong>Information</strong>: Already connected to ${profile} azure account.`, 'info');
+       // return;
+      //}
+  
+      connectUIConnecting();
+      
+      try {
+        await window.__kumologica.azure.login(profile);
+       } catch (err) {
+        connectUIDisconnected();
+  
+        RED.notify(`<strong>Error</strong>: ${err.stderr? err.stderr: err}`, 'error');
+        return;
+      }
+      connectUIConnected();
+    }
+  
+    function disconnectFromazure() {
+      window.__kumologica.azure.logout();
+      connectUIDisconnected();
+    }
+  
+    function connectUIDisconnected() {
+      // show connect button
+      $('#azure-sidebar-connect-btn').show();
+      if ($('#azure-sidebar-connect-btn') && $('#azure-sidebar-connect-btn').html()) { 
+        $('#azure-sidebar-connect-btn').html($('#azure-sidebar-connect-btn').html().replace('Connecting', 'Connect'));
+      }
+      $('#azure-sidebar-connect-icon').attr({'class': 'fa fa-circle'});
+      $('#azure-sidebar-connect-icon').css({'color': 'red'});
+      // hide deploy and export buttons 
+      $('#azure-sidebar-deploy-btn').hide();
+      $('#azure-sidebar-export-btn').hide();
+      $('#azure-sidebar-body').hide();
+    }
+  
+    function connectUIConnecting() {
+      $('#azure-sidebar-connect-icon').attr({'class': 'fa fa-spinner fa-spin'});
+      $('#azure-sidebar-connect-icon').css({'color': 'black'});
+    }
+  
+    function connectUIConnected() {
+      // hide connect button
+      $('#azure-sidebar-connect-btn').hide();
+      //$('#azure-sidebar-connect-btn').html($('#azure-sidebar-connect-btn').html().replace('Connect', 'Connected'));
+      //$('#azure-sidebar-connect-icon').attr({'class': 'fa fa-circle'});
+      //$('#azure-sidebar-connect-icon').css({'color': 'green'});
+  
+      // show deploy and options buttons 
+      $('#azure-sidebar-deploy-btn').show();
+  
+      // dont show until functionality implemented
+      //$('#azure-sidebar-export-btn').show();
+      $('#azure-sidebar-body').show();
+    }
+  
+    function deployingUIDeploying() {
+      $('#azure-sidebar-deploy-icon').attr({'class': 'fa fa-spinner fa-spin'});
+    }
+    function deployingUINotDeploying() {
+      $('#azure-sidebar-deploy-icon').attr({'class': 'fa fa-cloud-upload'});
+    }
+  
+    async function deploy() {
+  
+      const profile = getProfile();
+      if (!profile || profile == SELECT_AZURE_PROFILE) {
+        RED.notify(`Please select azure profile before deploying flows.`, 'error');
+        return;
+      }
+  
+      if (deployState == DEPLOYING) {
+        RED.notify(`<strong>Information</strong>: Already deploying to azure.`, 'info');
+        return;
+      }
+      
+      RED.deploy.save();
+  
+      deployingUIDeploying();
+      deployState = DEPLOYING;
+  
+      $('#workspace-terminal').show();
+  
+      let params = getValues();
+      
+      try {
+        await window.__kumologica.azure.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.azureConfig.setAzureConfig(getValues());
+    }
+  
+    function show() {
+      RED.sidebar.show('azure');
+    }
+  
+    function init() {
+      initHTML();
+      initJs();
+    }
+    
+    return {
+      init: init,
+      show: show,
+    };
+  })();