@kumologica/sdk 3.3.0-beta9 → 3.4.0-beta3

package/src/app/ui/editor-client/src/sass/ui/common/searchBox.scss

@@ -20,8 +20,7 @@
 }
 
 .red-ui-searchBox-container {
-  border-radius: 5px;
-  border: 1px solid #d1cece;
+  border-radius: 3px;
   position: relative;
   i {
     font-size: 15px;

package/src/app/ui/editor-client/src/sass/ui-settings.scss

@@ -20,11 +20,13 @@
   position: absolute;
   width: 950px;
   background: #ecebeb;
-  left: 36%;
-  margin-left: -250px;
-  top: 0px;
+  left: 50%;
+  margin-left: -360px;
+  top: -36px;
   border: 1px solid $primary-border-color;
+  border-radius: 6px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+
 }
 
 .option {

package/src/app/ui/editor-client/src/vendor/jqtree/jqtree.css

@@ -47,6 +47,9 @@ ul.jqtree-tree {
 
     ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left {
             margin-right: 0.5em;
+            margin-left: 1em;
+            color: grey;
+            font-size: smaller;
         }
 
     ul.jqtree-tree .jqtree-toggler.jqtree-toggler-right {
@@ -68,10 +71,27 @@ ul.jqtree-tree {
     ul.jqtree-tree .jqtree-title-button-left {
         margin-left: 1.5em;
     }
-
+    .jqtree-title-emptyfolder {
+        width: 100%;
+        margin-left: 2.5em !important;
+        color: #605d5d !important;
+        text-transform: uppercase;
+        font-weight: bold;
+        letter-spacing: 0.02em;
+        font-size: smaller;
+        overflow: hidden;
+        user-select: none;
+    }
     ul.jqtree-tree .jqtree-title-button-left.jqtree-title-folder {
         width: 100%;
         margin-left: 0;
+        color: #605d5d;
+        text-transform: uppercase;
+        font-weight: bold;
+        letter-spacing: 0.02em;
+        font-size: smaller;
+        overflow: hidden;
+        user-select: none;
     }
 
     ul.jqtree-tree li.jqtree-folder {

package/src/app/ui/editor-client/templates/index.mst

@@ -58,62 +58,33 @@
         
         <!-- project information -->
         <div id="right" class="left-shadow">
-
-            <!-- welcome button -->
-            <div id="btn-welcome" class="header-btn" style="margin: 0px 100px 0 20px">
-                <i class="icofont-home" style="font-size:18px;"></i></span>
-            </div> 
-
-            <!-- search button -->
-            <div id="btn-search" class="header-btn">
-                <i class="icofont-search-folder" style="font-size:18px"></i>
-            </div> 
-
-            <div class="header-btn-separator"></div>
-            <!-- import / export -->
-            <div id="import-btn" class="header-btn">
-                <i class="icofont-download" style="font-size:17px;"></i></span>
-            </div>
-
-            <div class="header-btn-separator"></div>
-            
-            <div id="export-btn" class="header-btn" style="margin-right: 100px">
-                <i class="icofont-upload-alt" style="font-size:17px;"></i></span>
-            </div>
- 
-            <div id="btn-settings" class="header-btn" style="margin-right:5px">
-                <i class="icofont-settings" style="font-size:17px;"></i></span>
-            </div> 
-
             <!-- check project information when server running -->
             <div id="projectIndicator" style="text-align: center;">
                 <div id="projectInformation">
+                    <i class="fa fa-search"></i>
                     <span id="project-title">Initializing...</span>
-                    <!-- <div style="justify-content: center;margin-top: -5px;">
-                        <i id="project-status-color" class="fa fa-circle" style="font-size: 8px;margin-right: 2px; display: none"></i> 
-                        <span class="project-status"> </span>
-                    </div> -->
                 </div>
                 <!-- check project information when server is deploying new flow version -->
                 <div id="projectDeployingInformation" style="height: 100%; padding-top: 3px">
-                    <div style="width: 40%; text-align: end;"> 
+                    <span style="display: flex; width: 100%; justify-content: center; font-size:13px">
+                     <div style="margin-top: -1px; margin-right: 5px"> 
                         <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw" style="font-size: 11px;"></i>
                         <span class="sr-only"></span>
                     </div>
-                    <span  style="width: 55%; padding-left:3px; text-align:start;font-size:13px">Deploying...</span>
+                    Deploying...
+                    </span>
                 </div>
 
                 <div class="progressbarWrapper">
                     <div class="progressbar"></div>
                 </div>
-            </div>
-            <div id="projectInfoExpand" style="position: relative; top: 3px; left: -19px; color: #ecebeb">
-                <i class="fa fa-caret-down"></i>
-            </div>
-            <div class="btn-aux">
-                <div id="btn-deploy" class="header-btn" style="display:none">
-                    <i class="icofont-save" style="font-size:15px"></i>
-                </div> 
+                
+                <div class="btn-aux">
+                    <div id="btn-deploy" class="header-btn" style="display:none">
+                        <i class="icofont-save" style="font-size:15px"></i>
+                    </div> 
+                </div>
+
             </div>
 
             <!-- for the time being, keep it here, as it plays an important role in orchestrating some actions like palette and sidebars
@@ -126,6 +97,82 @@
 </div>
 
 <div id="main-container" class="hide">
+
+   <div id="palette">
+        <img src="red/images/spin.svg" class="palette-spinner hide"/>
+        <div id="palette-options">
+            <div id="palette-option-nodes">
+                <a id="palette-option-nodes-a" class="palette-option-button-selected" href="#">
+                    <span>Nodes</span>  
+                </a>
+                <a id="palette-option-projectnav-a" class="palette-option-button" href="#" style="display:none">
+                    <span>Navigator</span> 
+                </a>
+                <a id="palette-option-explorer-a" class="palette-option-button" href="#">
+                    <span>Explorer</span> 
+                </a>
+
+            </div>
+        </div>
+
+        <!-- EXPLORER -->
+        <div id="palette-explorer" style="display:none">
+            <!-- a. Current Project -->
+            <div id="palette-explorer-top">
+                <div id="exp-open-project">
+                    <!-- controlled by palette-explorer -->
+                </div>
+
+                <div id="exp-open-project-createTab">
+                    <!-- controlled by palette-explorer -->
+                </div>
+
+                <ul id="palette-explorer-context-menu" class="jqtree-contextmenu dropdown-menu">
+                    <li data-item="open"><a>Open in Editor...</a></li>
+                    <li class="context-menu-item context-menu-separator context-menu-not-selectable"></li>
+                    <li data-item="delete"><a>Delete</a></li>
+                </ul>
+            </div>
+
+
+            <!-- b. Projects in Workspace -->
+            <div id="palette-explorer-bottom">
+                <div id="exp-workspace">
+                    <!-- controlled by palette-explorer -->
+                </div>
+
+                <div id="exp-workspace-addFolder">
+                    <!-- controlled by palette-explorer -->
+                </div>
+
+                <ul id="palette-workspace-context-menu" class="jqtree-contextmenu dropdown-menu">
+                    <li data-item="open"><a>Open</a></li>
+                    <li data-item="openLocation"><a>Open Location...</a></li>
+                    <li class="context-menu-item context-menu-separator context-menu-not-selectable"></li>
+                    <li data-item="removeFromWorkspace"><a>Remove from workspace</a></li>
+                </ul>
+            </div>
+
+        </div>
+
+        <!-- NODES -->
+        <div id="palette-nodes">
+            <div id="palette-search" class="palette-search hide">
+                <input type="text" placeholder="Filter nodes"></input>
+            </div>
+            <div id="palette-container" class="palette-scroll hide"></div>
+            
+            <div id="palette-footer" style="display:flex; height: 40px; border:none; justify-content: center; overflow: hidden;">
+                <div style="display: flex; width:90%;height: 32px; padding-top:3px;">
+                <a id="launch-node-library" class="sidebar-header-button" style="padding: 8px 20px; width: 100%;" href="#">
+                    <i class="fa fa-plus" style="margin-right:3px; font-size: 11px"></i>  
+                    Add more nodes
+                </a>
+                </div>
+            </div>
+        </div>
+        <div id="palette-shade" class="hide"></div>
+    </div>
     
     <div id="workspace" class="left-shadow">
         <ul id="workspace-tabs"></ul>
@@ -190,44 +237,7 @@
     
     <!-- <div id="editor-stack"></div> -->
 
-    <div id="palette">
-        <img src="red/images/spin.svg" class="palette-spinner hide"/>
-        <div id="palette-options">
-            <div id="palette-option-nodes">
-                <a id="palette-option-nodes-a" class="palette-option-button-selected" href="#">
-                    <span>Nodes</span>  
-                </a>
-                <a id="palette-option-projectnav-a" class="palette-option-button" href="#">
-                    <span>Navigator</span> 
-                </a>
-            </div>
-        </div>
-        <div id="palette-projectnav" style="display: none">
-            <div id="projectnav"></div>
-            <div id="projectbtnnav"></div>
-            <ul id="palette-context-menu" class="jqtree-contextmenu dropdown-menu">
-                <li data-item="open"><a>Open in Workspace</a></li>
-                <li class="context-menu-item context-menu-separator context-menu-not-selectable"></li>
-                <li data-item="delete"><a>Delete</a></li>
-            </ul>
-        </div>
-        <div id="palette-nodes">
-            <div id="palette-search" class="palette-search hide">
-                <input type="text" placeholder="Filter nodes"></input>
-            </div>
-            <div id="palette-container" class="palette-scroll hide"></div>
-            
-            <div id="palette-footer" style="display:flex; height: 40px; border:none; justify-content: center; overflow: hidden;">
-                <div style="display: flex; width:90%;height: 32px; padding-top:3px;">
-                <a id="launch-node-library" class="sidebar-header-button" style="padding: 8px 20px; width: 100%;" href="#">
-                    <i class="fa fa-plus" style="margin-right:3px; font-size: 11px"></i>  
-                    Add more nodes
-                </a>
-                </div>
-            </div>
-        </div>
-        <div id="palette-shade" class="hide"></div>
-    </div>
+ 
 
    
     <div id="sidebar"> 

package/src/server/DesignerServer.js

@@ -0,0 +1,161 @@
+const {
+    AbstractServerfulServer,
+    ConfigBuilder,
+    PLATFORMS
+} = require('@kumologica/runtime');
+const tcpPortUsed = require('tcp-port-used');
+
+/**
+ * This class will encapsulate the adminApp and FlowApp into two servers.
+ * It will be the one running on the development box of the user (either local or remote),
+ * and it will serve all the functioanlity to the Kumologica Cloud Editor.
+ */
+
+class DesignerServer {
+    
+    /**
+    * @param {Object} options - Configuration options.
+    * @param {string} options.flowPath - The path of the flow.
+    * @param {boolean} options.safe - A boolean indicating safety.
+    * @param {Object} options.cliParams - Command line parameters as an object.
+    * @param {Object} options.editorApi - API object for the editor.
+    * @param {Object} options.startupEmitter - EventEmitter object for handling events.
+    */
+    constructor(options) {
+
+        if (!options.flowPath) {
+            console.log(
+                '[ERROR] Flow is not defined. Make sure you pass the flow file to the constructor of FlowBuilder'
+            );
+            os.exit(1);
+        }
+
+        this.editorApi = options.editorApi;
+        this.startupEmitter = options.startupEmitter;
+
+        this.config = ConfigBuilder.getInstance().buildConfig(
+            options.flowPath,
+            PLATFORMS.LOCAL,
+            options.cliParams
+        );
+    }
+
+    async start() {
+        // Check if port passed by parameter is available otherwise allocate a new one
+        this.config.port = await this.allocatePort(this.config.port);
+        this.flowServer = new AbstractServerfulServer(this.config, this.editorApi, this.startupEmitter);
+
+        await this.flowServer.start();
+        this.flowServer.log.debug(`Runtime Configuration:${JSON.stringify(this.config, null, 2)}`);
+    }
+
+    async allocatePort(port) {
+        let inUse = await tcpPortUsed.check(port);
+        if (inUse){
+            let newPort = port + 1;
+            console.log(`> Port: ${port} in use. Trying with port: ${newPort}...`);
+            return await this.allocatePort(newPort);
+        } else{
+            return port;
+        }
+    }
+
+    getListeningPort() {
+        return this.flowServer.serverSettings.port;
+    }
+
+    async stop() {
+        await this.flowServer.stop();
+    }
+
+    /**
+     * The express application for HTTP Nodes
+     */
+     get httpNode() {
+        return this.flowServer.httpNode.expressApp;
+    }
+
+
+
+    /**
+     * Pointer to the internal HTTP Server upon which all the express applications (Nodes and Admin) are deployed upon
+     *
+     * @readonly
+     */
+    get server() {
+        return this.flowServer.server;
+    }
+
+    /**
+     * Access to internal runtime api
+     */
+    get runtime() {
+        return this.flowServer.runtime;
+    }
+
+
+
+    /**
+     *
+     * Returns the version of the runtime lib used internally
+     * @readonly
+     * @static
+     */
+    static get version() {
+        return AbstractServerfulServer.version;
+    }
+
+    /**
+     * This provides access to the internal settings module of the
+     * runtime.
+     * This is the object derived from the server settings.
+     */
+    get settings() {
+        return this.flowServer._.settings;
+    }
+
+    /**
+     * EventEmitter use to publish and subscribe to internal runtime events
+     * For example:
+     *  runtime.events.on(
+     *     'runtime-event',
+     *     (flowStarted = async data => {
+     *       if (data.id === 'flow-started') {
+     *         runtime.events.removeListener('runtime-event', flowStarted);
+     *
+     * @readonly
+     */
+    get events() {
+        return this.flowServer.events;
+    }
+
+    get eventTypes() {
+        return this.flowServer.runtimeEventTypes;
+    }
+
+    /**
+     * This provides access to the internal nodes module of the
+     * runtime. The details of this API remain undocumented as they should not
+     * be used directly.
+     *
+     * Most administrative actions should be performed use the runtime api
+     * under [node.runtime]
+     */
+    get nodes() {
+        return this.flowServer._.nodes;
+    }
+
+    get log() {
+        return this.flowServer.log;
+    }
+
+    get util() {
+        return this.flowServer.util;
+    }
+
+
+}
+
+module.exports = {
+    DesignerServer,
+};

package/src/server/certificate.pem

@@ -0,0 +1,23 @@
+-----BEGIN CERTIFICATE-----
+MIIDzTCCArWgAwIBAgIUXLMSHyKFumGMi8osuoeVxSE3LuowDQYJKoZIhvcNAQEL
+BQAwdjELMAkGA1UEBhMCQVUxDDAKBgNVBAgMA05TVzEPMA0GA1UEBwwGU3lkbmV5
+MRswGQYDVQQKDBJLdW1vbG9naWNhIFB0eSBMdGQxEzARBgNVBAsMCkt1bW9sb2dp
+Y2ExFjAUBgNVBAMMDUROUzpsb2NhbGhvc3QwHhcNMjMxMDA5MjEzNTU0WhcNMjQx
+MDA4MjEzNTU0WjB2MQswCQYDVQQGEwJBVTEMMAoGA1UECAwDTlNXMQ8wDQYDVQQH
+DAZTeWRuZXkxGzAZBgNVBAoMEkt1bW9sb2dpY2EgUHR5IEx0ZDETMBEGA1UECwwK
+S3Vtb2xvZ2ljYTEWMBQGA1UEAwwNRE5TOmxvY2FsaG9zdDCCASIwDQYJKoZIhvcN
+AQEBBQADggEPADCCAQoCggEBAM3wwlHZnTwtnA28bTbrKGW7SZQrldOe621AOrpK
+dWQ1E7DeRWn6Pu/HZNSMPs44CgwJE+WTFSd+Hezq9Rs6ek366z2pw2MlugFqsl4u
+UxVqU9qfBuhvN9CNhXUKZ215hbdldRcOBdWpMz/SFbwJ9kQbqSP9OfVj7Nfy1Qtf
+jYco6UAUPpSHoP6r7IZUavaBb0CrKB1owxdWm3Gz8OfcMJ7i7QdoSfeXzd3/+xTc
+IIad/Bc8eHTenkXc1T3yTIoHzDnXSeSrO46PqfjU094Jbh30BkHFTpeAx6p/Zg4d
+kJjn1KF7Kdf+rHwFpPI4HDjny0kCP/YWAPydOHpin1+DbKECAwEAAaNTMFEwHQYD
+VR0OBBYEFKxX7B5kDPPQnWiq05Mw7q6jOKa/MB8GA1UdIwQYMBaAFKxX7B5kDPPQ
+nWiq05Mw7q6jOKa/MA8GA1UdEwEB/wQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEB
+AKWZmO+uOa3pH+xPY7aTppwlCW37UhjSO3kxNpEd38iFAHhP8N2kaMVKtpmSAgoH
+hcTvptU9OIlVOzmcL15rt450tGl4K2MnoVFm7f4X4LjHrYuUccI3pNzR75OXlxZm
+wsBHkZf/u0Yzq1xnUeyILZckF73JfmF4PN+NhU0YusSo3QechKPSgyWxMPTjoXk4
+zZ/iiyz+xAQZKpgaI7RArC6FXsYCqKY7nzcK6JGfS+zj8tCWCL+bCgffyzS4Q2JA
+q79RRvwObrNMIk3XN6TchUKqQCL5NGUYV9g+FR7nc5BfowR+96J3I3Z35uIM/wgO
+36aBP9gSmkL9p4bPiqdefjI=
+-----END CERTIFICATE-----

package/src/server/private-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDN8MJR2Z08LZwN
+vG026yhlu0mUK5XTnuttQDq6SnVkNROw3kVp+j7vx2TUjD7OOAoMCRPlkxUnfh3s
+6vUbOnpN+us9qcNjJboBarJeLlMValPanwbobzfQjYV1CmdteYW3ZXUXDgXVqTM/
+0hW8CfZEG6kj/Tn1Y+zX8tULX42HKOlAFD6Uh6D+q+yGVGr2gW9AqygdaMMXVptx
+s/Dn3DCe4u0HaEn3l83d//sU3CCGnfwXPHh03p5F3NU98kyKB8w510nkqzuOj6n4
+1NPeCW4d9AZBxU6XgMeqf2YOHZCY59SheynX/qx8BaTyOBw458tJAj/2FgD8nTh6
+Yp9fg2yhAgMBAAECggEAFQDlEKv9GVIdhFkfWmaJbDa5vl7jnP2sTSwr0Swe5OV0
+6KkCs1hOau4PHo5fKXEVtTyHxvZFRg3ax3r/HJPOPX3F2DgkMUx7uAFFx805tAlw
+G+/0KGiPbLnCTrmM6uFl/dpfIsbPWYc0LuIiTVdGwpN/oKgG7TwPv8aIa+yG5q3a
+ok6D658isEIIvzNuP7SyF5ZLJb7p0IvZygAiQoASKYjapwwyqbRIGECTLUDl7tcK
+Mn5VkIfILqs6ajzaNEweEk0NK7SOQ1zkgH7gchdoDTP/gVc5oC+wKakRKSsZpqvm
+SX7pv17kmZCKj4VwrqFqN66NGilF4GUxkmHSvmwRQQKBgQDrjNHP6HPnGtWUJjwj
+AAkH1Yq37Mvt93wOjjkMXY6srIf+hm2IkxvnQFDleEg0sP/MfoEhnoJdarzV+2Yi
+ddhhm+cWr9oFnTrPOq5qLrL9yQGgU8JjVTp9hRrjWt2fCKKKNSnd29LXbG0Zol1n
+hscenRsuZ/Y+wASBBIZeBPt1VQKBgQDf0dsWzkb10KjOSxlzgU+8lnfPyUaYyJ5A
+rSxKUYdmeHHAZNWdeHDNKf2y4TWUhP8fc6L6WNYssVLRjLml+Zen9Uv88aYV7Toz
+2lzqpMW7/XeA14oVGwEuq9tJeGkL/+UyUSenqlZFL+Cyh3dsYcUHBLrqnVpu+/sm
+ZQgHIKqaHQKBgQCXryAxjZSNn1coRxL0ywIFvHrPBDsyq+uEiAuurdTB13zf5/tD
+NtCCM4Wkr7d3zv961YAcgTGcLK8b8P+Nc2v7N2Ux095HPT/w0O4eTKJREY7tiuKk
+Cu9Wg0+UVyBeWDYrYB7s0rFMrnL3TfpuP3mcejlVwfbt48NCvgI1K2ou3QKBgH7J
+vWd04MO9OPLrnfZNiWLWhfaCGWjRNLyEnPNYrfABSMbpGA1FPfkq0Vl0tEp28KLb
+ebaBfooAxV6Jbl00P5HYpfwa06/WG8Nl7n7Jam3szraA4urDym6q0eUTvcYbZrWT
+PXiASLCWx526mY8e72LjbhMboi/+tC3yy5JmEd6NAoGAawp26rHYwisiFaxt45Np
+Vbi4iIbjlwBvqcXww3oRTkJjB9CBniUzEYi1VQwqwrS3EMb8jsmpitAmn8sY33qL
+WHS4Ms/AQx5C1eVBPcmeHRScFOD/983zJ0Dqw/eIxKDu7Ay81yDc83vCApcuAeuH
+SHQhAebA262hZ4WmfytL9Tc=
+-----END PRIVATE KEY-----