@kumologica/sdk 3.0.0

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

@@ -0,0 +1,422 @@
+RED.uiSettings = (function(){
+    let ipcRenderer        = window.__kumologica.electron.ipcRenderer;
+    let cloudConfigStore   = window.__kumologica.settings.cloudConfigStore;
+    let networkConfigStore = window.__kumologica.settings.networkConfigStore
+    let shell      = window.__kumologica.electron.shell;
+    let dialog     = null;
+    let visible    = false;
+    let cmInstance = null;
+    let totalHeightAvailable;
+
+    function createDialog() {
+        // remove if previous dialog exist
+        $('#ui-settings').remove();
+
+        // load content of config credentials file: ~/.kumologica/credentials
+        let cloudConfigContent = cloudConfigStore.readCloudConfigFile();
+
+        // load content of config credentials file: ~/.kumologica/settings
+        let proxySettings = networkConfigStore.getProxyDetails();
+
+        dialog = $('<div>', {
+            id: 'ui-settings',
+            class: 'ui-settings',
+        }).appendTo('#main-container');
+
+        // Programmatically calculate the height of the ui-settings window
+        totalHeightAvailable = $('#main-container').height();
+        let offset = 74;
+        $('#ui-settings').height(totalHeightAvailable - offset);
+
+        let wrapperDiv = $('<div>', {
+            class: 'ui-settings-body'
+        }).appendTo(dialog);
+
+        // Left pannel of settings
+        let optionsDiv = $(`
+        <div id="ui-settings-options">
+            <div id="ui-settings-creds" class="ui-settings-option ui-settings-option-selected">
+                <span class="settingsOptionLabel">
+                    <i class="icofont-key" style="position:relative;top: -1px;margin-right: 6px"></i>
+                    Cloud Profiles
+                </span>
+            </div>
+            <div id="ui-settings-network" class="ui-settings-option">
+              <span class="settingsOptionLabel">
+                <i class="icofont-web" style="position:relative;top: -1px;margin-right: 6px"></i>
+                Network
+              </span>
+            </div>
+        </div>
+        `).appendTo(wrapperDiv);
+
+        // Right pannel of settings
+        let optionsBodyDiv = $(`
+        <div id="ui-settings-optionsbody">
+        </div>
+        `).appendTo(wrapperDiv)
+
+        let credsDiv = $(`
+        <div id="settings-creds-body">
+          <div>
+              <div class="settingsTitle">Cloud Profiles</div>
+              <div class="settingsSubtitle">
+                  Configure all of your cloud profile settings that can be used by this designer to support testing or deploying.
+
+                  <a href="http://as.com" target="_blank">Learn more</a>
+              </div>
+              <div id="fileLocationPath">
+                <span id="settingFilePath">${cloudConfigStore.getCloudConfigFileFullPath()}</span>
+              </div>
+              <textarea id="settings-editor" rows="20">
+              </textarea>
+          </div>
+          <div class="editor-tray-toolbar" style="top: 16px !important">
+              <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only secondary" role="button" aria-disabled="false" id="save-creds-cancel">Cancel</button>
+              <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only primary" role="button" aria-disabled="false" id="save-creds-ok">Save</button>
+          </div>
+        </div>
+        `).appendTo(optionsBodyDiv);
+
+        let networkDiv = $(`
+        <div id="settings-network-body" style="display:none">
+          <div>
+              <div class="settingsTitle">Proxy Server Settings</div>
+              <div class="settingsSubtitle">
+                  Configure the proxy settings used by the designer. Flows will use the proxy specified on the nodes instead.
+              </div>
+              <form id="proxy-options-div">
+                <input type="radio" id="proxy-option-default" name="proxy-option" style="margin:0"> Use default operating system settings<br>
+                <input type="radio" id="proxy-option-custom" name="proxy-option" style="margin:0"> Use custom proxy settings<br>
+              </form>
+              <div id="proxy-custom-details">
+                <div class="option"><label>Server</label><input type="text" id="proxy-server" style="width:93%" /></div>
+                <div class="option"><label>Port</label><input type="text" id="proxy-port" /></div>
+              </div>
+              <div id="proxy-auth">
+                <div id="proxyCredsRequiredBox" style="display: flex">
+                  <input type="checkbox" id="proxyAuthRequired" style="margin-right: 3px">
+                    <label>Proxy server requires username and password</label>
+                </div>
+                <div id="proxyCredsBox" style="padding-left: 40px">
+                  <div class="option"><label>Username</label><input type="text" id="proxy-auth-username" style="width:50%" /></div>
+                  <div class="option"><label>Password</label><input type="password" id="proxy-auth-password" style="width:50%"/></div>
+                </div>
+              </div>
+          </div>
+          <div class="editor-tray-toolbar" style="top: 4px !important">
+              <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only secondary" role="button" aria-disabled="false" id="save-network-cancel">Cancel</button>
+              <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only primary" role="button" aria-disabled="false" id="save-network-ok">Save</button>
+          </div>
+        </div>
+        `).appendTo(optionsBodyDiv);
+
+        // Initialize the editor of the cloud credentials
+        initEditor(cloudConfigContent);
+        $('#settings-editor').click();
+
+        // Initialize the proxy details
+        initProxySettings(proxySettings);
+        handleProxySettingsEvent();
+
+        // Initialize the toolbar
+        $('#save-creds-ok').click(e=> {
+          saveSettings();
+        });
+
+        $('#save-creds-cancel').click(e => {
+          cancelSettings();
+        });
+        
+        $('#save-network-ok').click(e=> {
+          saveSettings()
+        });
+
+        $('#save-network-cancel').click(e => {
+          cancelSettings()
+        })
+    }
+
+    function saveSettings() {
+      // Save cloud creds details
+      cloudConfigStore.writeCloudConfigFile(cmInstance.getValue());
+      RED.events.emit('settings:cloud-config-changed');
+      
+      // Save proxy details
+      networkConfigStore.saveProxyDetails(
+        $('#proxy-option-custom').is(':checked'), // custom clicked?
+        $('#proxy-server').val(), // host
+        $('#proxy-port').val(), // port
+        $('#proxyAuthRequired').is(':checked'), // authentication clicked?
+        $('#proxy-auth-username').val(), // username
+        $('#proxy-auth-password').val() // password
+      );
+      hide();
+    }
+
+    function cancelSettings() {
+      hide();
+    }
+
+    function selectProxyCustom() {
+      setTimeout(() => {
+        $('#proxy-option-custom').prop('checked', true);
+        $('#proxy-option-default').prop('checked', false);
+      }, 50);
+
+      $('#proxy-server').prop('readonly', false);
+      $('#proxy-port').prop('readonly', false);
+    }
+
+    function selectProxyDefault(){
+      setTimeout(() => {
+        $('#proxy-option-custom').prop('checked', false);
+        $('#proxy-option-default').prop('checked', true);
+      }, 50);
+      
+      $('#proxy-server').prop('readonly', true);
+      $('#proxy-port').prop('readonly', true);
+    }
+
+    function selectProxyAuth() {
+      setTimeout(() => {
+        let isChecked = $('#proxyAuthRequired').is(':checked');
+        if (isChecked){
+          $('#proxyAuthRequired').prop('checked', false);
+          $('#proxy-auth-username').prop('readonly', true);
+          $('#proxy-auth-password').prop('readonly', true);
+        } else {
+          $('#proxyAuthRequired').prop('checked', true);
+          $('#proxy-auth-username').prop('readonly', false);
+          $('#proxy-auth-password').prop('readonly', false);
+        }
+      }, 50);
+    }
+
+    function handleProxySettingsEvent(){
+      $('#proxy-option-default').click( () => {
+       RED.events.emit('settings:select-proxy-default');
+       return false;
+      });
+
+      $('#proxy-option-custom').click( () => {
+        RED.events.emit('settings:select-proxy-custom');
+        return false;
+      });
+
+      $('#proxyAuthRequired').click( function(e){
+        RED.events.emit('settings:select-proxy-auth');
+        return false;
+      });
+    }
+
+    function initProxySettings(proxySettings){
+      // console.log('[ui-settings] initProxySettings with settings:', proxySettings);
+      // Proxy server
+      if (proxySettings.custom){
+        $('#proxy-option-custom').prop('checked', true);
+        $('#proxy-option-default').prop('checked', false);
+        $('#proxy-server').val(proxySettings.host);
+        $('#proxy-port').val(proxySettings.port || '8080');
+      } else {
+        $('#proxy-option-default').prop('checked', true);
+        $('#proxy-option-custom').prop('checked', false);
+        $('#proxy-server').prop('readonly', true);
+        $('#proxy-port').prop('readonly', true);
+      }
+      // Proxy auth
+      if (proxySettings.authentication){
+        $('#proxyAuthRequired').prop('checked', true);
+        $('#proxy-auth-username').val(proxySettings.username);
+        $('#proxy-auth-password').val(proxySettings.password);
+      } else {
+        $('#proxyAuthRequired').prop('checked', false);
+        $('#proxy-auth-username').prop('readonly', true);
+        $('#proxy-auth-password').prop('readonly', true);
+      }
+
+      RED.events.on('settings:select-proxy-custom', selectProxyCustom);
+      RED.events.on('settings:select-proxy-default', selectProxyDefault);
+      RED.events.on('settings:select-proxy-auth', selectProxyAuth);
+    }
+
+    function initEditor(contentBody) {
+
+        CodeMirror.defineMode("properties", function() {
+            return {
+              token: function(stream, state) {
+                var sol = stream.sol() || state.afterSection;
+                var eol = stream.eol();
+          
+                state.afterSection = false;
+          
+                if (sol) {
+                  if (state.nextMultiline) {
+                    state.inMultiline = true;
+                    state.nextMultiline = false;
+                  } else {
+                    state.position = "def";
+                  }
+                }
+          
+                if (eol && ! state.nextMultiline) {
+                  state.inMultiline = false;
+                  state.position = "def";
+                }
+          
+                if (sol) {
+                  while(stream.eatSpace()) {}
+                }
+          
+                var ch = stream.next();
+          
+                if (sol && (ch === "#" || ch === "!" || ch === ";")) {
+                  state.position = "comment";
+                  stream.skipToEnd();
+                  return "comment";
+                } else if (sol && ch === "[") {
+                  state.afterSection = true;
+                  stream.skipTo("]"); stream.eat("]");
+                  return "header";
+                } else if (ch === "=") {
+                  state.position = "quote";
+                  return null;
+                } else if (ch === "\\" && state.position === "quote") {
+                  if (stream.eol()) {  // end of line?
+                    // Multiline value
+                    state.nextMultiline = true;
+                  }
+                }
+          
+                return state.position;
+              },
+          
+              startState: function() {
+                return {
+                  position : "def",       // Current position, "def", "quote" or "comment"
+                  nextMultiline : false,  // Is the next line multiline value
+                  inMultiline : false,    // Is the current line a multiline value
+                  afterSection : false    // Did we just open a section
+                };
+              }
+          
+            };
+          });
+          cmInstance = CodeMirror.fromTextArea(document.getElementById('settings-editor'), { 
+            theme: "monokai",
+            lineWrapping: true,
+            mode: 'properties'
+          });
+        // reset the listenere
+        cmInstance.off("change");
+
+        cmInstance.getDoc().setValue(contentBody);
+        cmInstance.focus();
+        //console.log(`lineCount: ${cmInstance.lineCount()}`)
+        // Set the cursor at the end of existing content
+        cmInstance.setCursor(cmInstance.lineCount(), 0);
+        let codeMirrorHeight = totalHeightAvailable - 300;
+
+        cmInstance.setSize(null, codeMirrorHeight);
+        // cmInstance.refresh();
+        setTimeout(function() {
+            cmInstance.refresh();
+           }, 100);
+
+        cmInstance.on("change", function(cm, change){
+          // enable the save button
+          $('#save-creds-ok').removeClass('disabled');
+        })
+    }
+
+    function show(){
+        // Disable the search dialog if opened
+        RED.actions.invoke('core:search:close');
+        RED.actions.invoke('core:project-info:close');
+        if (!visible){
+            RED.keyboard.add('*', 'escape', () => hide() );
+
+            createDialog();
+            dialog.slideDown(300);
+            visible = true;
+
+            initJs();
+        }
+
+    }
+
+    function hide(){
+        if (visible){
+            $('#main-container').off('click');
+            RED.keyboard.remove('escape');
+            visible = false;
+            if (dialog !== null) {
+                dialog.slideUp(200, function () {
+                  // searchInput.searchBox('value', '');
+                });
+              }
+        }
+    }
+
+    function initJs() {
+      $('#ui-settings').click( e=> {
+        e.preventDefault();
+        if ($(e.target).is('a')){
+          shell.openExternal(e.target.href);
+        }
+        e.stopImmediatePropagation();
+      });
+
+      $('#main-container').click((e)=> {
+          hide();
+      });
+
+      $('#ui-settings-creds').click((e)=> {
+        resetWindows();
+        $('#ui-settings-creds').addClass('ui-settings-option-selected');
+        $('#settings-creds-body').show();
+      });
+
+      $('#ui-settings-network').click ((e) => {
+        resetWindows();
+        $('#ui-settings-network').addClass('ui-settings-option-selected');
+        $('#settings-network-body').show();
+      });
+    }
+
+    function resetWindows() {
+      $('#settings-creds-body').hide();
+      $('#settings-network-body').hide();
+      $('#ui-settings-creds').removeClass('ui-settings-option-selected');
+      $('#ui-settings-network').removeClass('ui-settings-option-selected');
+    }
+
+    function getProxyHeader() {
+      // Read the proxy details
+      let proxyHeader = undefined;
+      let proxySettings = networkConfigStore.getProxyDetails();
+      let { custom, host, port, authentication, username, password } = proxySettings;
+      if (custom){
+        proxyHeader = `${host}:${port}`;
+        if (proxySettings.authentication){
+          proxyHeader = `${username}:${password}@${proxyHeader}`
+        }
+        proxyHeader = `http://${proxyHeader}`;
+      } 
+
+      return proxyHeader;
+    }
+
+    function init() {
+        RED.actions.add('core:settings:open', show);
+        RED.actions.add('core:settings:close', hide);
+    }
+
+
+    return {
+        init: init,
+        show: show,
+        hide: hide,
+        getProxyHeader: getProxyHeader,
+    }
+})();

package/src/app/ui/editor-client/src/js/ui/update-panel.js

@@ -0,0 +1,84 @@
+RED.updatePanel = (function() {
+   
+    // Listening from the main process for update events
+  let ipcRenderer = window.__kumologica.electron.ipcRenderer;
+  
+  
+  ipcRenderer.on('core:show-import-dialog', ()=> {
+    RED.actions.invoke('core:show-import-dialog');
+  });
+
+  ipcRenderer.on('core:show-export-dialog', ()=> {
+    RED.actions.invoke('core:show-export-dialog');
+  });
+
+  ipcRenderer.on('core:toggle-terminal', ()=> {
+    RED.actions.invoke('core:toggle-terminal');
+  });
+
+  ipcRenderer.on('core:toggle-palette', ()=> {
+    RED.actions.invoke('core:toggle-palette');
+  });
+
+  ipcRenderer.on('core:view-main-flow', ()=> {
+    RED.actions.invoke('core:view-main-flow');
+  });
+
+  ipcRenderer.on('core:view-test-flow', ()=> {
+    RED.actions.invoke('core:view-test-flow');
+  });
+
+  ipcRenderer.on('core:toggle-settings', ()=> {
+    RED.actions.invoke('core:toggle-settings');
+  });
+
+  ipcRenderer.on('core:search', ()=> {
+    RED.actions.invoke('core:search');
+  });
+
+
+  // app update
+  ipcRenderer.on('ui-update-available', () => {
+    ipcRenderer.removeAllListeners('ui-update-available');
+     
+    $('#update-panel').show();
+    $('#update-panel-message').html('A new update is available, do you wish to download? <br/>To update manually, you can get it from <a href="https://www.kumologica.com/download.html" target="_blank">here</a>');
+    
+    $("#btn-update-panel-close").html('Ignore');
+    $("#btn-update-panel-restart").html('Download');
+  });
+  
+  ipcRenderer.on('ui-update-downloaded', () => {
+    ipcRenderer.removeAllListeners('ui-update-downloaded');
+    $('#update-panel-message').text('Update ready to install, it will be installed on restart. Restart now?');
+    
+    $("#btn-update-panel-close").html('Close');
+    $("#btn-update-panel-restart").html('Restart');
+    
+    $('#update-panel').show();
+  });
+  
+  function init() { 
+   
+    $('#btn-update-panel-close').click(e => {
+      $('#update-panel').hide();
+    });
+  
+    $('#btn-update-panel-restart').click(e => {
+
+      $('#update-panel').hide();
+
+      if ($("#btn-update-panel-restart").html() == 'Download') {
+        ipcRenderer.send('download-app');
+      } else {
+        ipcRenderer.send('restart-app');
+      }
+    });  
+  }
+
+  return {
+    init: init
+  };
+  
+})();
+