@kumologica/sdk 3.0.0

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

@@ -0,0 +1,673 @@
+var cloudredobject = {};
+function createEnvironment() {
+  var table = document.getElementById('myTable');
+  var env = document.getElementById('environment').value;
+  var profilename = document.getElementById('selectNumber').value;
+  if (env == 'local') {
+    window.alert('Environment local cannot be created');
+  } else {
+    var row = table.insertRow(-1);
+    var cell1 = row.insertCell(0);
+    var cell2 = row.insertCell(1);
+    var cell3 = row.insertCell(2);
+    var cell4 = row.insertCell(3);
+    cell1.innerHTML =
+      '<td style="margin:auto; display:block;"><input type="radio" id="' +
+      env +
+      '" name="myradio" value="current" onclick="setCurrentEnvironment(this)"></td>';
+    cell2.innerHTML =
+      '<td style="margin:auto; display:block;">' + env + '</td>';
+    cell3.innerHTML =
+      '<td style="margin:auto; display:block;">' + profilename + '</td>';
+    cell4.innerHTML =
+      '<td style="margin:auto; display:block;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>.btn {background-color: DodgerBlue; border: none; color: black; padding: 4px 10px; font-size: 11px; cursor: pointer; } </style><button class="btn" id="' +
+      env +
+      '" onclick="deleteEnvironment(this)"><i class="fa fa-close"></i></button></td>';
+    var environment_list = RED.settings.get('cloudred') || {};
+    if (environment_list.length != 0) {
+      var env_array = environment_list.environment;
+      var objstr = JSON.stringify({
+        envname: env,
+        profile: profilename,
+        status: ''
+      });
+      var obj = JSON.parse(objstr);
+      env_array.push(obj);
+      var envstr = JSON.stringify(env_array);
+      environment_list.environment = JSON.parse(envstr);
+      RED.settings.set('cloudred', environment_list);
+    } else {
+      var env_array = [];
+      var objstr = JSON.stringify({
+        envname: env,
+        profile: profilename,
+        status: ''
+      });
+      var obj = JSON.parse(objstr);
+      env_array.push(obj);
+      var envstr = JSON.stringify(env_array);
+      environment_list.environment = JSON.parse(envstr);
+      RED.settings.set('cloudred', environment_list);
+    }
+  }
+}
+
+/**
+ * This function loads the environment list
+ */
+function loadEnvironmentList() {
+  var table = document.getElementById('myTable');
+  var environment_list = RED.settings.get('cloudred') || {};
+  env_array = environment_list.environment;
+  for (var envindex = 0; envindex < env_array.length; envindex++) {
+    var row = table.insertRow(-1);
+    var cell1 = row.insertCell(0);
+    var cell2 = row.insertCell(1);
+    var cell3 = row.insertCell(2);
+    var cell4 = row.insertCell(3);
+    if (env_array[envindex].status == 'current') {
+      cell1.innerHTML =
+        '<td style="margin:auto; display:block;"><input type="radio" id="' +
+        env_array[envindex].envname +
+        '" name="myradio" value="current" onclick="setCurrentEnvironment(this)" checked="checked"></td>';
+    } else {
+      cell1.innerHTML =
+        '<td style="margin:auto; display:block;"><input type="radio" id="' +
+        env_array[envindex].envname +
+        '" name="myradio" value="current" onclick="setCurrentEnvironment(this)"></td>';
+    }
+    cell2.innerHTML =
+      '<td style="margin:auto; display:block;">' +
+      env_array[envindex].envname +
+      '</td>';
+    cell3.innerHTML =
+      '<td style="margin:auto; display:block;">' +
+      env_array[envindex].profile +
+      '</td>';
+    if (env_array[envindex].envname == 'localhost') {
+      cell4.innerHTML = '<td style="margin:auto; display:block;"></td>';
+    } else {
+      cell4.innerHTML =
+        '<td style="margin:auto; display:block;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>.btn {background-color: DodgerBlue; border: none; color: black; padding: 4px 10px; font-size: 11px; cursor: pointer; }</style><button class="btn" id="' +
+        env_array[envindex].envname +
+        '" onclick="deleteEnvironment(this)"><i class="fa fa-close"></i></button></td>';
+    }
+  }
+}
+
+/**
+ * This function set the current environment
+ * which is selected
+ * @param {} k
+ */
+function setCurrentEnvironment(k) {
+  var environment_list = RED.settings.get('cloudred') || {};
+  var env_array = environment_list.environment;
+  var radios = document.getElementsByName('myradio');
+  for (var envindex = 0; envindex < env_array.length; envindex++) {
+    env_array[envindex].status = '';
+  }
+  var index = env_array.findIndex(function(z) {
+    return z.envname === k.id;
+  });
+  if (index !== undefined) env_array[index].status = 'current';
+  var envstr = JSON.stringify(env_array);
+  environment_list.environment = JSON.parse(envstr);
+  RED.settings.set('cloudred', environment_list);
+}
+
+/**
+ * This funtion help in deleting an
+ * environment which is selected
+ * @param {} x
+ */
+function deleteEnvironment(x) {
+  var environment_list = RED.settings.get('cloudred') || {};
+  var rows = document.getElementsByTagName('tr');
+  for (var i = rows.length; i--; ) {
+    if (rows[i].innerHTML.indexOf(x.id) !== -1) {
+      rows[i].parentNode.removeChild(rows[i]);
+    }
+  }
+  var index = environment_list.environment.findIndex(function(z) {
+    return z.envname === x.id;
+  });
+  if (index !== undefined) environment_list.environment.splice(index, 1);
+  var env_array = environment_list.environment;
+  var envstr = JSON.stringify(env_array);
+  environment_list.environment = JSON.parse(envstr);
+  RED.settings.set('cloudred', environment_list);
+}
+
+/**
+ * This function is for loading the
+ * AWS profiles
+ */
+function loadAwsProfiles() {
+  var done = function() {
+    var select = document.getElementById('selectNumber');
+    for (var i = 0; i < awsEnvProfiles.envprofile.length; i++) {
+      var opt = awsEnvProfiles.envprofile[i];
+      var el = document.createElement('option');
+      el.textContent = opt;
+      el.value = opt;
+      select.appendChild(el);
+    }
+  };
+  RED.settings.getAWSEnvprofiles(done);
+}
+
+/**
+ * This function loads the list of
+ * available memory sizes
+ */
+function loadMemoryList() {
+  var select = document.getElementById('memory');
+  var memorylist = ['128', '256', '512', '1024'];
+  for (var i = 0; i < memorylist.length; i++) {
+    var opt = memorylist[i];
+    var el = document.createElement('option');
+    el.textContent = opt;
+    el.value = opt;
+    select.appendChild(el);
+  }
+}
+
+/**
+ * This function is for saving the
+ * function details
+ */
+function savefunctiondetails() {
+  var funcname = document.getElementById('funcname').value;
+  var memory = document.getElementById('memory').value;
+  var timeout = document.getElementById('timeout').value;
+  var cloudred_function = RED.settings.get('cloudred') || {};
+  var credfunctionsetting_str = JSON.stringify({
+    name: funcname,
+    memory: memory,
+    timeout: timeout
+  });
+  var credfunctionsetting = JSON.parse(credfunctionsetting_str);
+  cloudred_function.function = credfunctionsetting;
+  RED.settings.set('cloudred', cloudred_function);
+  document.getElementById('statusdialog').innerHTML =
+    '<font color="green">Function updated</font>';
+}
+
+/**
+ * This function is for saving the profile
+ * in ~/.aws/credential file .
+ * Note : this is currently not going to be used
+ */
+// function saveEnvProfiledetails(){
+//     var profilename = document.getElementById('profilename').value
+//     var awskey = document.getElementById('awskey').value
+//     var awssecret = document.getElementById('awssecret').value
+//     var region = document.getElementById('region').value
+//     var credprofilesetting_str = JSON.stringify({"profile":{"profilename": profilename ,"awskey":awskey,"awssecret":awssecret,"region":region}})
+//     var credprofilesetting = JSON.parse(credprofilesetting_str)
+//     RED.settings.set("cloudred",credprofilesetting)
+//     awsEnvProfileInput =  {
+//         "profilename" : profilename,
+//         "region" : region,
+//         "awskey" : awskey,
+//         "awssecret" : awssecret
+//     };
+//     RED.settings.setAWSEnvprofiles(awsEnvProfileInput);
+//     document.getElementById("statusdialog").innerHTML = '<font color="green">Profile created</font>';
+// }
+
+/**
+ * For showing the hidden awskey.
+ * Note : this is currently not going to be used
+ */
+// function showawskey() {
+//   var x = document.getElementById("awskey");
+//     if (x.type === "password") {
+//       x.type = "text";
+//     } else {
+//       x.type = "password";
+//     }
+//   }
+
+/**
+ * For showing the hidden awssecret.
+ * Note : this is currently not going to be used
+ */
+// function showawssecret() {
+//     var x = document.getElementById("awssecret");
+//       if (x.type === "password") {
+//         x.type = "text";
+//       } else {
+//         x.type = "password";
+//       }
+//   }
+
+RED.userSettings = (function() {
+  var trayWidth = 700;
+  var settingsVisible = false;
+
+  var panes = [];
+
+  function addPane(options) {
+    panes.push(options);
+  }
+
+  function show(initialTab) {
+    if (settingsVisible) {
+      return;
+    }
+    if (!RED.user.hasPermission('settings.write')) {
+      RED.notify(RED._('user.errors.settings'), 'error');
+      return;
+    }
+    settingsVisible = true;
+    var tabContainer;
+
+    var trayOptions = {
+      title: RED._('menu.label.userSettings'),
+      buttons: [
+        {
+          id: 'node-dialog-ok',
+          text: RED._('common.label.close'),
+          class: 'primary',
+          click: function() {
+            RED.tray.close();
+          }
+        }
+      ],
+      resize: function(dimensions) {
+        trayWidth = dimensions.width;
+      },
+      open: function(tray) {
+        var trayBody = tray.find('.editor-tray-body');
+        var settingsContent = $('<div></div>').appendTo(trayBody);
+        var tabContainer = $('<div></div>', {
+          id: 'user-settings-tabs-container'
+        }).appendTo(settingsContent);
+
+        $('<ul></ul>', { id: 'user-settings-tabs' }).appendTo(tabContainer);
+        var settingsTabs = RED.tabs.create({
+          id: 'user-settings-tabs',
+          vertical: true,
+          onchange: function(tab) {
+            setTimeout(function() {
+              $('#user-settings-tabs-content')
+                .children()
+                .hide();
+              $('#' + tab.id).show();
+              if (tab.pane.focus) {
+                tab.pane.focus();
+              }
+            }, 50);
+          }
+        });
+        var tabContents = $('<div></div>', {
+          id: 'user-settings-tabs-content'
+        }).appendTo(settingsContent);
+
+        panes.forEach(function(pane) {
+          settingsTabs.addTab({
+            id: 'user-settings-tab-' + pane.id,
+            label: pane.title,
+            pane: pane
+          });
+          pane
+            .get()
+            .hide()
+            .appendTo(tabContents);
+        });
+        settingsContent.i18n();
+        settingsTabs.activateTab('user-settings-tab-' + (initialTab || 'view'));
+        $('#sidebar-shade').show();
+      },
+      close: function() {
+        settingsVisible = false;
+        panes.forEach(function(pane) {
+          if (pane.close) {
+            pane.close();
+          }
+        });
+        $('#sidebar-shade').hide();
+      },
+      show: function() {}
+    };
+    if (trayWidth !== null) {
+      trayOptions.width = trayWidth;
+    }
+    RED.tray.show(trayOptions);
+  }
+
+  var viewSettings = [
+    {
+      title: 'menu.label.view.grid',
+      options: [
+        {
+          setting: 'view-show-grid',
+          oldSetting: 'menu-menu-item-view-show-grid',
+          label: 'menu.label.view.showGrid',
+          toggle: true,
+          onchange: 'core:toggle-show-grid'
+        },
+        {
+          setting: 'view-snap-grid',
+          oldSetting: 'menu-menu-item-view-snap-grid',
+          label: 'menu.label.view.snapGrid',
+          toggle: true,
+          onchange: 'core:toggle-snap-grid'
+        },
+        {
+          setting: 'view-grid-size',
+          label: 'menu.label.view.gridSize',
+          type: 'number',
+          default: 20,
+          onchange: RED.view.gridSize
+        }
+      ]
+    },
+    {
+      title: 'menu.label.nodes',
+      options: [
+        {
+          setting: 'view-node-status',
+          oldSetting: 'menu-menu-item-status',
+          label: 'menu.label.displayStatus',
+          default: true,
+          toggle: true,
+          onchange: 'core:toggle-status'
+        },
+        {
+          setting: 'view-node-show-label',
+          label: 'menu.label.showNodeLabelDefault',
+          default: true,
+          toggle: true
+        }
+      ]
+    },
+    {
+      title: 'menu.label.other',
+      options: [
+        {
+          setting: 'view-show-tips',
+          oldSettings: 'menu-menu-item-show-tips',
+          label: 'menu.label.showTips',
+          toggle: true,
+          default: true,
+          onchange: 'core:toggle-show-tips'
+        }
+      ]
+    }
+  ];
+
+  var allSettings = {};
+
+  /**
+   * This function is for creating the pane for
+   * Lambda settings under User settings
+   */
+  var cloudredfuncSettings = {};
+  function createCloudredFunctionConfigPane() {
+    var pane = $(
+      '<div id="user-settings-tab-functionconfig" class="node-help"></div>'
+    );
+    cloudredfuncSettings = RED.settings.get('cloudred') || {};
+    var row1 = $('<div class="user-settings-row"></div>').appendTo(pane);
+    $(
+      '<script type="text/javascript">window.onload = loadMemoryList()</script><label for="funcname">Name</label><input type="text" name="funcname" id="funcname" value="' +
+        cloudredfuncSettings.function.name +
+        '"><br><label for="memory">Memory</label><select id="memory" placeholder="Choose Memory"><option>' +
+        cloudredfuncSettings.function.memory +
+        '</option></select><br><label for="timeout">Timeout(sec)</label><input type="text" name="timeout" id="timeout" value="' +
+        cloudredfuncSettings.function.timeout +
+        '"><br><br><input type="submit" value="Apply" onclick="savefunctiondetails()">&nbsp;&nbsp<p id="statusdialog"></p>'
+    ).appendTo(row1);
+    return pane;
+  }
+
+  /**
+   * This function is for creating the pane for
+   * creating the environments
+   */
+  function createCloudredAWSConfigPane() {
+    var pane = $(
+      '<div id="user-settings-tab-awsconfig" class="node-help"></div>'
+    );
+    var row1 = $('<div class="user-settings-row"></div>').appendTo(pane);
+    $(
+      '<script type="text/javascript">window.onload = loadAwsProfiles(); window.onload = loadEnvironmentList() </script><br><input type="text" name="environment" id="environment" placeholder="Environment" value="">&nbsp;&nbsp;<select id="selectNumber"><option>Choose a profile</option></select><br><input type="submit" value="Create" onclick="createEnvironment()"><br><br><table id="myTable" style="border: 1px solid black; width:80%"><th bgcolor="#f3f3f3" align="left">Current</th><th bgcolor="#f3f3f3" align="left">Environment</th><th bgcolor="#f3f3f3" align="left">Profile</th><th bgcolor="#f3f3f3" align="left">Remove</th></table>'
+    ).appendTo(row1);
+    return pane;
+  }
+
+  function createConfigurationsPane() {
+    var pane = $(
+      '<div id="user-settings-tab-configurations" class="node-help"></div>'
+    );
+    var title = $('<h3>Active Configurations</h3>').appendTo(pane);
+    var tableContent = `<table class="table table-sm" style="margin-top: 25px;">
+        <thead>
+        <tr> 
+            <th scope="col">Name</th>
+            <th scope="col"></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td><span style="font-size:14px; font-weight:normal">Deploy on AWS</span></td>
+            <td>
+                <div class="btn-group pull-right">
+                    <button id="bEdit" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
+                        <span class="fa fa-edit"></span>
+                    </button>
+                    <button id="bRemove" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
+                        <span class="fa fa-trash"></span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td><span style="font-size:14px; font-weight:normal">Terraform apply</span></td>
+            <td>
+            <div class="btn-group pull-right">
+                    <button id="bEdit" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
+                        <span class="fa fa-edit"></span>
+                    </button>
+                    <button id="bRemove" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
+                        <span class="fa fa-trash"></span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td><span style="font-size:14px; font-weight:normal">Terraform destroy</span></td>
+            <td>
+            <div class="btn-group pull-right">
+                    <button id="bEdit" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
+                        <span class="fa fa-edit"></span>
+                    </button>
+                    <button id="bRemove" type="button" class="btn  btn-default" onclick="alert(this);" style="display:block;float:left;">
+                        <span class="fa fa-trash"></span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        </tbody>
+    </table>`;
+    var table = $(tableContent).appendTo(title);
+    return pane;
+  }
+
+  function createViewPane() {
+    var pane = $('<div id="user-settings-tab-view" class="node-help"></div>');
+
+    var currentEditorSettings = RED.settings.get('editor') || {};
+    currentEditorSettings.view = currentEditorSettings.view || {};
+
+    viewSettings.forEach(function(section) {
+      $('<h3></h3>')
+        .text(RED._(section.title))
+        .appendTo(pane);
+      section.options.forEach(function(opt) {
+        var initialState = currentEditorSettings.view[opt.setting];
+        var row = $('<div class="user-settings-row"></div>').appendTo(pane);
+        var input;
+        if (opt.toggle) {
+          input = $(
+            '<label for="user-settings-' +
+              opt.setting +
+              '"><input id="user-settings-' +
+              opt.setting +
+              '" type="checkbox"> ' +
+              RED._(opt.label) +
+              '</label>'
+          )
+            .appendTo(row)
+            .find('input');
+          input.prop('checked', initialState);
+        } else {
+          $(
+            '<label for="user-settings-' +
+              opt.setting +
+              '">' +
+              RED._(opt.label) +
+              '</label>'
+          ).appendTo(row);
+          $(
+            '<input id="user-settings-' +
+              opt.setting +
+              '" type="' +
+              (opt.type || 'text') +
+              '">'
+          )
+            .appendTo(row)
+            .val(initialState);
+        }
+      });
+    });
+    return pane;
+  }
+
+  function setSelected(id, value) {
+    var opt = allSettings[id];
+    var currentEditorSettings = RED.settings.get('editor') || {};
+    currentEditorSettings.view = currentEditorSettings.view || {};
+    currentEditorSettings.view[opt.setting] = value;
+    RED.settings.set('editor', currentEditorSettings);
+    var callback = opt.onchange;
+    if (typeof callback === 'string') {
+      callback = RED.actions.get(callback);
+    }
+    if (callback) {
+      callback.call(opt, value);
+    }
+  }
+  function toggle(id) {
+    var opt = allSettings[id];
+    var currentEditorSettings = RED.settings.get('editor') || {};
+    currentEditorSettings.view = currentEditorSettings.view || {};
+    setSelected(id, !currentEditorSettings.view[opt.setting]);
+  }
+
+  function init() {
+    RED.actions.add('core:show-user-settings', show);
+    RED.actions.add('core:show-help', function() {
+      show('keyboard');
+    });
+
+    // Configurations Panel
+    addPane({
+      id: 'configurations',
+      title: 'Configurations',
+      get: createConfigurationsPane,
+      close: function() {}
+    });
+
+    //adding the environment pane
+    addPane({
+      id: 'awsconfig',
+      title: RED._('menu.label.cloudred.aws.panename'),
+      get: createCloudredAWSConfigPane,
+      close: function() {}
+    });
+
+    addPane({
+      id: 'view',
+      title: RED._('menu.label.view.view'),
+      get: createViewPane,
+      close: function() {
+        viewSettings.forEach(function(section) {
+          section.options.forEach(function(opt) {
+            var input = $('#user-settings-' + opt.setting);
+            if (opt.toggle) {
+              setSelected(opt.setting, input.prop('checked'));
+            } else {
+              setSelected(opt.setting, input.val());
+            }
+          });
+        });
+      }
+    });
+
+    var currentEditorSettings = RED.settings.get('editor') || {};
+    currentEditorSettings.view = currentEditorSettings.view || {};
+    var editorSettingsChanged = false;
+    viewSettings.forEach(function(section) {
+      section.options.forEach(function(opt) {
+        if (opt.oldSetting) {
+          var oldValue = RED.settings.get(opt.oldSetting);
+          if (oldValue !== undefined && oldValue !== null) {
+            currentEditorSettings.view[opt.setting] = oldValue;
+            editorSettingsChanged = true;
+            RED.settings.remove(opt.oldSetting);
+          }
+        }
+        allSettings[opt.setting] = opt;
+        var value = currentEditorSettings.view[opt.setting];
+        if (
+          (value === null || value === undefined) &&
+          opt.hasOwnProperty('default')
+        ) {
+          value = opt.default;
+          currentEditorSettings.view[opt.setting] = value;
+          editorSettingsChanged = true;
+        }
+
+        if (opt.onchange) {
+          var callback = opt.onchange;
+          if (typeof callback === 'string') {
+            callback = RED.actions.get(callback);
+          }
+          if (callback) {
+            callback.call(opt, value);
+          }
+        }
+      });
+    });
+    if (editorSettingsChanged) {
+      RED.settings.set('editor', currentEditorSettings);
+    }
+
+    //Initialize cloudred object in .config.json file
+    cloudredobject = RED.settings.get('cloudred');
+    if (typeof cloudredobject == 'undefined') {
+      RED.settings.set(
+        'cloudred',
+        JSON.parse(
+          JSON.stringify({
+            function: { name: '', memory: '', timeout: '' },
+            profile: { profilename: '', awskey: '', awssecret: '', region: '' },
+            environment: [
+              { envname: 'localhost', profile: '--', status: 'current' }
+            ]
+          })
+        )
+      );
+    }
+  }
+  return {
+    init: init,
+    toggle: toggle,
+    show: show,
+    add: addPane
+  };
+})();