@kumologica/sdk 3.0.0

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

@@ -0,0 +1,570 @@
+RED.library = (function() {
+  var exportToLibraryDialog;
+  var elementPrefix = 'node-input-';
+
+  var _librarySaveConfirm =
+    '<div id="node-dialog-library-save-confirm" class="hide"><form class="form-horizontal"><div style="text-align: center; padding-top: 30px;" id="node-dialog-library-save-content"></div></form></div>';
+  var _librarySave =
+    '<div id="node-dialog-library-save" class="hide"><form class="form-horizontal"><div class="form-row"><label for="node-dialog-library-save-folder" data-i18n="[append]library.folder"><i class="fa fa-folder-open"></i> </label><input type="text" id="node-dialog-library-save-folder" data-i18n="[placeholder]library.folderPlaceholder"></div><div class="form-row"><label for="node-dialog-library-save-filename" data-i18n="[append]library.filename"><i class="fa fa-file"></i> </label><input type="text" id="node-dialog-library-save-filename" data-i18n="[placeholder]library.filenamePlaceholder"></div></form></div>';
+  var _libraryLookup =
+    '<div id="node-dialog-library-lookup" class="hide"><form class="form-horizontal"><div class="form-row"><ul id="node-dialog-library-breadcrumbs" class="breadcrumb"><li class="active"><a href="#" data-i18n="[append]library.breadcrumb"></a></li></ul></div><div class="form-row"><div style="vertical-align: top; display: inline-block; height: 100%; width: 30%; padding-right: 20px;"><div id="node-select-library" style="border: 1px solid #999; width: 100%; height: 100%; overflow:scroll;"><ul></ul></div></div><div style="vertical-align: top; display: inline-block;width: 65%; height: 100%;"><div style="height: 100%; width: 95%;" class="node-text-editor" id="node-select-library-text" ></div></div></div></form></div>';
+
+  // TODO: Commenting this out, as it is getting invoked in other part and it is not relevant this code anymore
+  function loadFlowLibrary() {
+    // console.log('loadFlowLibrary invoked');
+    // $.getJSON('library/flows', function(data) {
+    //   console.log(data);
+    //   var buildMenu = function(data, root) {
+    //     var i;
+    //     var li;
+    //     var a;
+    //     var ul = document.createElement('ul');
+    //     if (root === '') {
+    //       ul.id = 'menu-item-import-library-submenu';
+    //     }
+    //     ul.className = 'dropdown-menu';
+    //     if (data.d) {
+    //       for (i in data.d) {
+    //         if (data.d.hasOwnProperty(i)) {
+    //           li = document.createElement('li');
+    //           li.className = 'dropdown-submenu pull-left';
+    //           a = document.createElement('a');
+    //           a.href = '#';
+    //           var label = i
+    //             .replace(/^@.*\//, '')
+    //             .replace(/^kumologica-core-contrib-/, '')
+    //             .replace(/^kumologica-core-node-/, '')
+    //             .replace(/-/g, ' ')
+    //             .replace(/_/g, ' ');
+    //           a.innerText = label;
+    //           li.appendChild(a);
+    //           li.appendChild(
+    //             buildMenu(data.d[i], root + (root !== '' ? '/' : '') + i)
+    //           );
+    //           ul.appendChild(li);
+    //         }
+    //       }
+    //     }
+    //     if (data.f) {
+    //       for (i in data.f) {
+    //         if (data.f.hasOwnProperty(i)) {
+    //           li = document.createElement('li');
+    //           a = document.createElement('a');
+    //           a.href = '#';
+    //           a.innerText = data.f[i];
+    //           a.flowName = root + (root !== '' ? '/' : '') + data.f[i];
+    //           a.onclick = function() {
+    //             $.get('library/flows/' + this.flowName, function(data) {
+    //               RED.view.importNodes(data);
+    //             });
+    //           };
+    //           li.appendChild(a);
+    //           ul.appendChild(li);
+    //         }
+    //       }
+    //     }
+    //     return ul;
+    //   };
+    //   var examples;
+    //   if (data.d && data.d._examples_) {
+    //     examples = data.d._examples_;
+    //     delete data.d._examples_;
+    //   }
+    //   var menu = buildMenu(data, '');
+    //   $('#menu-item-import-examples').remove();
+    //   if (examples) {
+    //     RED.menu.addItem('menu-item-import', {
+    //       id: 'menu-item-import-examples',
+    //       label: RED._('menu.label.examples'),
+    //       options: []
+    //     });
+    //     $('#menu-item-import-examples-submenu').replaceWith(
+    //       buildMenu(examples, '_examples_')
+    //     );
+    //   }
+    //   //TODO: need an api in RED.menu for this
+    //   $('#menu-item-import-library-submenu').replaceWith(menu);
+    // });
+  }
+
+  function createUI(options) {
+    var libraryData = {};
+    var selectedLibraryItem = null;
+    var libraryEditor = null;
+    elementPrefix = options.elementPrefix || 'node-input-';
+
+    // Orion editor has set/getText
+    // ACE editor has set/getValue
+    // normalise to set/getValue
+    if (options.editor.setText) {
+      // Orion doesn't like having pos passed in, so proxy the call to drop it
+      options.editor.setValue = function(text, pos) {
+        options.editor.setText.call(options.editor, text);
+      };
+    }
+    if (options.editor.getText) {
+      options.editor.getValue = options.editor.getText;
+    }
+
+    function buildFileListItem(item) {
+      var li = document.createElement('li');
+      li.onmouseover = function(e) {
+        $(this).addClass('list-hover');
+      };
+      li.onmouseout = function(e) {
+        $(this).removeClass('list-hover');
+      };
+      return li;
+    }
+
+    function buildFileList(root, data) {
+      var ul = document.createElement('ul');
+      var li;
+      for (var i = 0; i < data.length; i++) {
+        var v = data[i];
+        if (typeof v === 'string') {
+          // directory
+          li = buildFileListItem(v);
+          li.onclick = (function() {
+            var dirName = v;
+            return function(e) {
+              var bcli = $(
+                '<li class="active"><span class="divider">/</span> </li>'
+              );
+              $('<a href="#"></a>')
+                .text(dirName)
+                .appendTo(bcli)
+                .click(function(e) {
+                  $(this)
+                    .parent()
+                    .nextAll()
+                    .remove();
+                  $.getJSON('library/' + options.url + root + dirName, function(
+                    data
+                  ) {
+                    $('#node-select-library')
+                      .children()
+                      .first()
+                      .replaceWith(buildFileList(root + dirName + '/', data));
+                  });
+                  e.stopPropagation();
+                });
+              var bc = $('#node-dialog-library-breadcrumbs');
+              $('.active', bc).removeClass('active');
+              bc.append(bcli);
+              $.getJSON('library/' + options.url + root + dirName, function(
+                data
+              ) {
+                $('#node-select-library')
+                  .children()
+                  .first()
+                  .replaceWith(buildFileList(root + dirName + '/', data));
+              });
+            };
+          })();
+          $('<i class="fa fa-folder"></i>').appendTo(li);
+          $('<span>')
+            .text(' ' + v)
+            .appendTo(li);
+          ul.appendChild(li);
+        } else {
+          // file
+          li = buildFileListItem(v);
+          li.innerText = v.name;
+          li.onclick = (function() {
+            var item = v;
+            return function(e) {
+              $('.list-selected', ul).removeClass('list-selected');
+              $(this).addClass('list-selected');
+              $.get('library/' + options.url + root + item.fn, function(data) {
+                selectedLibraryItem = item;
+                libraryEditor.setValue(data, -1);
+              });
+            };
+          })();
+          ul.appendChild(li);
+        }
+      }
+      return ul;
+    }
+
+    $('#' + elementPrefix + 'name')
+      .css('width', 'calc(100% - 52px)')
+      .after(
+        '<div class="btn-group" style="margin-left:5px;">' +
+          '<a id="node-input-' +
+          options.type +
+          '-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>' +
+          '<ul class="dropdown-menu pull-right" role="menu">' +
+          '<li><a id="node-input-' +
+          options.type +
+          '-menu-open-library" tabindex="-1" href="#">' +
+          'Open Library' +
+          '</a></li>' +
+          '<li><a id="node-input-' +
+          options.type +
+          '-menu-save-library" tabindex="-1" href="#">' +
+          'Save to Library...' +
+          '</a></li>' +
+          '</ul></div>'
+      );
+
+    $('#node-input-' + options.type + '-menu-open-library').click(function(e) {
+      $('#node-select-library')
+        .children()
+        .remove();
+      var bc = $('#node-dialog-library-breadcrumbs');
+      bc.children()
+        .first()
+        .nextAll()
+        .remove();
+      libraryEditor.setValue('', -1);
+
+      $.getJSON('library/' + options.url, function(data) {
+        $('#node-select-library').append(buildFileList('/', data));
+        $('#node-dialog-library-breadcrumbs a').click(function(e) {
+          $(this)
+            .parent()
+            .nextAll()
+            .remove();
+          $('#node-select-library')
+            .children()
+            .first()
+            .replaceWith(buildFileList('/', data));
+          e.stopPropagation();
+        });
+        $('#node-dialog-library-lookup').dialog('open');
+      });
+
+      e.preventDefault();
+    });
+
+    $('#node-input-' + options.type + '-menu-save-library').click(function(e) {
+      //var found = false;
+      var name = $('#' + elementPrefix + 'name')
+        .val()
+        .replace(/(^\s*)|(\s*$)/g, '');
+
+      //var buildPathList = function(data,root) {
+      //    var paths = [];
+      //    if (data.d) {
+      //        for (var i in data.d) {
+      //            var dn = root+(root==""?"":"/")+i;
+      //            var d = {
+      //                label:dn,
+      //                files:[]
+      //            };
+      //            for (var f in data.d[i].f) {
+      //                d.files.push(data.d[i].f[f].fn.split("/").slice(-1)[0]);
+      //            }
+      //            paths.push(d);
+      //            paths = paths.concat(buildPathList(data.d[i],root+(root==""?"":"/")+i));
+      //        }
+      //    }
+      //    return paths;
+      //};
+      $('#node-dialog-library-save-folder').attr('value', '');
+
+      var filename = name.replace(/[^\w-]/g, '-');
+      if (filename === '') {
+        filename = 'unnamed-' + options.type;
+      }
+      $('#node-dialog-library-save-filename').attr('value', filename + '.js');
+
+      //var paths = buildPathList(libraryData,"");
+      //$("#node-dialog-library-save-folder").autocomplete({
+      //        minLength: 0,
+      //        source: paths,
+      //        select: function( event, ui ) {
+      //            $("#node-dialog-library-save-filename").autocomplete({
+      //                    minLength: 0,
+      //                    source: ui.item.files
+      //            });
+      //        }
+      //});
+
+      $('#node-dialog-library-save').dialog('open');
+      e.preventDefault();
+    });
+
+    libraryEditor = ace.edit('node-select-library-text');
+    libraryEditor.setTheme('ace/theme/tomorrow');
+    if (options.mode) {
+      libraryEditor.getSession().setMode(options.mode);
+    }
+    libraryEditor.setOptions({
+      readOnly: true,
+      highlightActiveLine: false,
+      highlightGutterLine: false
+    });
+    libraryEditor.renderer.$cursorLayer.element.style.opacity = 0;
+    libraryEditor.$blockScrolling = Infinity;
+
+    $('#node-dialog-library-lookup').dialog({
+      title: `${options.type} library`,
+      modal: true,
+      autoOpen: false,
+      width: 800,
+      height: 450,
+      buttons: [
+        {
+          text: 'Cancel',
+          click: function() {
+            $(this).dialog('close');
+          }
+        },
+        {
+          text: 'Load',
+          class: 'primary',
+          click: function() {
+            if (selectedLibraryItem) {
+              for (var i = 0; i < options.fields.length; i++) {
+                var field = options.fields[i];
+                $('#' + elementPrefix + field).val(selectedLibraryItem[field]);
+              }
+              options.editor.setValue(libraryEditor.getValue(), -1);
+            }
+            $(this).dialog('close');
+          }
+        }
+      ],
+      open: function(e) {
+        var form = $('form', this);
+        form.height(form.parent().height() - 30);
+        $('#node-select-library-text').height('100%');
+        $('.form-row:last-child', form)
+          .children()
+          .height(form.height() - 60);
+      },
+      resize: function(e) {
+        var form = $('form', this);
+        form.height(form.parent().height() - 30);
+        $('.form-row:last-child', form)
+          .children()
+          .height(form.height() - 60);
+      }
+    });
+
+    function saveToLibrary(overwrite) {
+      var name = $('#' + elementPrefix + 'name')
+        .val()
+        .replace(/(^\s*)|(\s*$)/g, '');
+      if (name === '') {
+        name = `Unnamed ${options.type}`;
+      }
+      var filename = $('#node-dialog-library-save-filename')
+        .val()
+        .replace(/(^\s*)|(\s*$)/g, '');
+      var pathname = $('#node-dialog-library-save-folder')
+        .val()
+        .replace(/(^\s*)|(\s*$)/g, '');
+      if (filename === '' || !/.+\.js$/.test(filename)) {
+        RED.notify('Invalid filename', 'warning');
+        return;
+      }
+      var fullpath = pathname + (pathname === '' ? '' : '/') + filename;
+      if (!overwrite) {
+        //var pathnameParts = pathname.split("/");
+        //var exists = false;
+        //var ds = libraryData;
+        //for (var pnp in pathnameParts) {
+        //    if (ds.d && pathnameParts[pnp] in ds.d) {
+        //        ds = ds.d[pathnameParts[pnp]];
+        //    } else {
+        //        ds = null;
+        //        break;
+        //    }
+        //}
+        //if (ds && ds.f) {
+        //    for (var f in ds.f) {
+        //        if (ds.f[f].fn == fullpath) {
+        //            exists = true;
+        //            break;
+        //        }
+        //    }
+        //}
+        //if (exists) {
+        //    $("#node-dialog-library-save-content").html(RED._("library.dialogSaveOverwrite",{libraryType:options.type,libraryName:fullpath}));
+        //    $("#node-dialog-library-save-confirm").dialog( "open" );
+        //    return;
+        //}
+      }
+      var queryArgs = [];
+      var data = {};
+      for (var i = 0; i < options.fields.length; i++) {
+        var field = options.fields[i];
+        if (field == 'name') {
+          data.name = name;
+        } else {
+          data[field] = $('#' + elementPrefix + field).val();
+        }
+      }
+
+      data.text = options.editor.getValue();
+      $.ajax({
+        url: 'library/' + options.url + '/' + fullpath,
+        type: 'POST',
+        data: JSON.stringify(data),
+        contentType: 'application/json; charset=utf-8'
+      })
+        .done(function(data, textStatus, xhr) {
+          RED.notify(`Saved ${options.type}`, 'success');
+        })
+        .fail(function(xhr, textStatus, err) {
+          if (xhr.status === 401) {
+            RED.notify('Save failed: user not authorized', 'error');
+          } else {
+            RED.notify(`Save failed: ${xht.responseText}`, 'error');
+          }
+        });
+    }
+    $('#node-dialog-library-save-confirm').dialog({
+      title: 'Save to Library...',
+      modal: true,
+      autoOpen: false,
+      width: 530,
+      height: 230,
+      buttons: [
+        {
+          text: 'Cancel',
+          click: function() {
+            $(this).dialog('close');
+          }
+        },
+        {
+          text: 'Save',
+          class: 'primary',
+          click: function() {
+            saveToLibrary(true);
+            $(this).dialog('close');
+          }
+        }
+      ]
+    });
+    $('#node-dialog-library-save').dialog({
+      title: 'Save to Library...',
+      modal: true,
+      autoOpen: false,
+      width: 530,
+      height: 230,
+      buttons: [
+        {
+          text: 'Cancel',
+          click: function() {
+            $(this).dialog('close');
+          }
+        },
+        {
+          text: 'Save',
+          class: 'primary',
+          click: function() {
+            saveToLibrary(false);
+            $(this).dialog('close');
+          }
+        }
+      ]
+    });
+  }
+
+  function exportFlow() {
+    //TODO: don't rely on the main dialog
+    var nns = RED.nodes.createExportableNodeSet(RED.view.selection().nodes);
+    $('#node-input-library-filename').attr('nodes', JSON.stringify(nns));
+    exportToLibraryDialog.dialog('open');
+  }
+
+  return {
+    init: function() {
+      $(_librarySave).appendTo(document.body);
+      $(_librarySaveConfirm).appendTo(document.body);
+      $(_libraryLookup).appendTo(document.body);
+
+      RED.actions.add('core:library-export', exportFlow);
+
+      RED.events.on('view:selection-changed', function(selection) {
+        if (!selection.nodes) {
+          RED.menu.setDisabled('menu-item-export-library', true);
+        } else {
+          RED.menu.setDisabled('menu-item-export-library', false);
+        }
+      });
+
+      if (RED.settings.theme('menu.menu-item-import-library') !== false) {
+        loadFlowLibrary();
+      }
+
+      exportToLibraryDialog = $(
+        '<div id="library-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>'
+      )
+        .appendTo('body')
+        .dialog({
+          modal: true,
+          autoOpen: false,
+          width: 500,
+          resizable: false,
+          title: 'Export nodes to library',
+          buttons: [
+            {
+              id: 'library-dialog-cancel',
+              text: 'Cancel',
+              click: function() {
+                $(this).dialog('close');
+              }
+            },
+            {
+              id: 'library-dialog-ok',
+              class: 'primary',
+              text: 'Export',
+              click: function() {
+                //TODO: move this to RED.library
+                var flowName = $('#node-input-library-filename').val();
+                flowName = flowName.trim();
+                if (flowName === '' || flowName.endsWith('/')) {
+                  RED.notify('Invalid file name', 'warning');
+                } else {
+                  $.ajax({
+                    url: 'library/flows/' + flowName,
+                    type: 'POST',
+                    data: $('#node-input-library-filename').attr('nodes'),
+                    contentType: 'application/json; charset=utf-8'
+                  })
+                    .done(function() {
+                      //RED.library.loadFlowLibrary();
+                      //RED.notify(RED._('library.savedNodes'), 'success');
+                    })
+                    .fail(function(xhr, textStatus, err) {
+                      if (xhr.status === 401) {
+                        RED.notify('Save failed: user not authorized','error');
+                      } else {
+                        RED.notify(`Save failed ${xhr.responseText}`,'error');
+                      }
+                    });
+                }
+                $(this).dialog('close');
+              }
+            }
+          ],
+          open: function(e) {
+            $(this)
+              .parent()
+              .find('.ui-dialog-titlebar-close')
+              .hide();
+          },
+          close: function(e) {}
+        });
+      exportToLibraryDialog.children('.dialog-form').append(
+        $(
+          '<div class="form-row">' +
+          '<label for="node-input-library-filename" data-i18n="[append]editor:library.filename"><i class="fa fa-file"></i> </label>' +
+          '<input type="text" id="node-input-library-filename" data-i18n="[placeholder]editor:library.fullFilenamePlaceholder">' +
+          '<input type="text" style="display: none;" />' + // Second hidden input to prevent submit on Enter
+            '</div>'
+        )
+      );
+    },
+    create: createUI,
+    loadFlowLibrary: loadFlowLibrary,
+
+    export: exportFlow
+  };
+})();

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

@@ -0,0 +1,116 @@
+RED.logviewer = (function() {
+    const DEFAULT_HEIGHT = 180;
+    const MAX_HEIGHT = 900;
+    const { eventEmitter } = window.__kumologica.editor.terminal;
+    let activeTerminalHeight;
+
+    const workspaceTerminal = 'workspace-terminal';
+    let $workspaceTerminal = $(`#${workspaceTerminal}`);
+
+    const activeTerminalID = 'terminal-output';
+    let $activeTerminalID = $(`#${activeTerminalID}`); 
+
+    let scrollPos = 0;
+
+    function setupTerminalSeparator() {
+        let newHeight;
+        $('#terminal-separator').draggable({
+          axis: 'y',
+          start: function (event, ui) {
+            activeTerminalHeight = $activeTerminalID.height();
+            //$('#terminal-separator').css('top', '4px');
+          },
+          drag: function (event, ui) {
+            // update the height of terminal window
+            newHeight = activeTerminalHeight - ui.position.top;
+            $activeTerminalID.height(newHeight);
+    
+            // Keep the separator in his original place
+            ui.position.top = 0;
+          },
+          stop: function (event, ui) {
+            activeTerminalHeight = newHeight;
+            // $('#terminal-separator').css('top', '4px');
+          },
+        });
+    }
+
+    function resetScroll() {
+        scrollPos = 0;
+    }
+
+    function adjustScroll() {
+        console.log('[logviewer] Adjusting scroll...');
+        scrollPos = scrollPos + 100;
+        $activeTerminalID.scrollTop(scrollPos);
+    }
+
+    function subscribeLogEvents() {
+        eventEmitter.on('terminal-output', (data) => {
+            const lines = data.split('\n');
+            for (var i = 0; i < lines.length; i++) {
+              if (lines[i]) {
+                $(`<span class="log-line"> ${lines[i]}</span></br>`).appendTo($activeTerminalID);
+                adjustScroll();
+              }
+            }
+            
+        })
+    }
+
+    function init() {
+        // Init header
+        $('#terminal-tab-output').addClass('terminal-tab-selected');
+
+        // set default height for the terminal
+        $activeTerminalID.height(DEFAULT_HEIGHT);
+        
+        // Place the terminal separator
+        setupTerminalSeparator();
+
+        // Subscribe to log events
+        subscribeLogEvents();
+
+        // Log buttons actions        
+        $('#btn-terminal-max').click((e) => {
+            var chartHeight = $('#chart').height();
+            var terminalHeight = $('#terminal-header').height();
+            var extraHeight = 50; // 6 separator, 10 margin
+      
+            var deltaToGrow = chartHeight - terminalHeight + extraHeight;
+            var currentHeight = $(`#${activeTerminalID}`).height();
+      
+            $(`#${activeTerminalID}`).height(currentHeight + deltaToGrow);
+      
+            // update the height of the xterm-screen
+            activeTerminalHeight = MAX_HEIGHT;
+            // Change the icon to minimize
+            $('#btn-terminal-max').hide();
+            $('#btn-terminal-min').show();
+          });
+      
+        $('#btn-terminal-min').click((e) => {
+            $activeTerminalID.height(DEFAULT_HEIGHT);
+            // update the height of the xterm-screen
+            activeTerminalHeight = DEFAULT_HEIGHT;
+            // Change the icon to minimize
+            $('#btn-terminal-min').hide();
+            $('#btn-terminal-max').show();
+        });
+    
+        $('#btn-terminal-close').click((e) => {
+            $('#shelve-middle').click();
+        });
+    
+        $('#btn-clear-logs').click((e) => {
+            e.preventDefault();
+            $activeTerminalID.empty();
+            resetScroll();
+          });
+    
+    }
+
+    return {
+        init: init
+    }
+})();