@kumologica/sdk 3.0.0

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

@@ -0,0 +1,1061 @@
+ 
+RED.palette.editor = (function() {
+
+    var disabled = false;
+
+    var editorTabs;
+    var filterInput;
+    var searchInput;
+    var nodeList;
+    var packageList;
+    var loadedList = [];
+    var filteredList = [];
+    var loadedIndex = {};
+
+    var typesInUse = {};
+    var nodeEntries = {};
+    var eventTimers = {};
+    var activeFilter = "";
+
+    function semVerCompare(A,B) {
+        var aParts = A.split(".").map(function(m) { return parseInt(m);});
+        var bParts = B.split(".").map(function(m) { return parseInt(m);});
+        for (var i=0;i<3;i++) {
+            var j = aParts[i]-bParts[i];
+            if (j<0) { return -1 }
+            if (j>0) { return 1 }
+        }
+        return 0;
+    }
+
+    function delayCallback(start,callback) {
+        var delta = Date.now() - start;
+        if (delta < 300) {
+            delta = 300;
+        } else {
+            delta = 0;
+        }
+        setTimeout(function() {
+            callback();
+        },delta);
+    }
+    function changeNodeState(id,state,shade,callback) {
+        shade.show();
+        var start = Date.now();
+        $.ajax({
+            url:"nodes/"+id,
+            type: "PUT",
+            data: JSON.stringify({
+                enabled: state
+            }),
+            contentType: "application/json; charset=utf-8"
+        }).done(function(data,textStatus,xhr) {
+            delayCallback(start,function() {
+                shade.hide();
+                callback();
+            });
+        }).fail(function(xhr,textStatus,err) {
+            delayCallback(start,function() {
+                shade.hide();
+                callback(xhr);
+            });
+        })
+    }
+    function installNodeModule(id,version,callback) {
+        var requestBody = {
+            module: id
+        };
+        if (version) {
+            requestBody.version = version;
+        }
+        $.ajax({
+            url:"nodes",
+            type: "POST",
+            data: JSON.stringify(requestBody),
+            contentType: "application/json; charset=utf-8"
+        }).done(function(data,textStatus,xhr) {
+            callback();
+        }).fail(function(xhr,textStatus,err) {
+            callback(xhr);
+        });
+    }
+    function removeNodeModule(id,callback) {
+        $.ajax({
+            url:"nodes/"+id,
+            type: "DELETE"
+        }).done(function(data,textStatus,xhr) {
+            callback();
+        }).fail(function(xhr,textStatus,err) {
+            callback(xhr);
+        })
+    }
+
+    function refreshNodeModuleList() {
+        for (var id in nodeEntries) {
+            if (nodeEntries.hasOwnProperty(id)) {
+                _refreshNodeModule(id);
+            }
+        }
+    }
+
+    function refreshNodeModule(module) {
+        if (!eventTimers.hasOwnProperty(module)) {
+            eventTimers[module] = setTimeout(function() {
+                delete eventTimers[module];
+                _refreshNodeModule(module);
+            },100);
+        }
+    }
+
+
+    function getContrastingBorder(rgbColor){
+        var parts = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)[,)]/.exec(rgbColor);
+        if (parts) {
+            var r = parseInt(parts[1]);
+            var g = parseInt(parts[2]);
+            var b = parseInt(parts[3]);
+            var yiq = ((r*299)+(g*587)+(b*114))/1000;
+            if (yiq > 160) {
+                r = Math.floor(r*0.8);
+                g = Math.floor(g*0.8);
+                b = Math.floor(b*0.8);
+                return "rgb("+r+","+g+","+b+")";
+            }
+        }
+        return rgbColor;
+    }
+
+    function formatUpdatedAt(dateString) {
+        var now = new Date();
+        var d = new Date(dateString);
+        var delta = (Date.now() - new Date(dateString).getTime())/1000;
+
+        if (delta < 60) {
+            return 'seconds ago';
+        }
+        delta = Math.floor(delta/60);
+        if (delta < 10) {
+            return 'minutes ago';
+        }
+        if (delta < 60) {
+            return `${delta} minutes ago`; 
+        }
+
+        delta = Math.floor(delta/60);
+
+        if (delta < 24) {
+            return `${delta} hour ago`; 
+        }
+
+        delta = Math.floor(delta/24);
+
+        if (delta < 7) {
+            return `${delta} day ago`; 
+        }
+        var weeks = Math.floor(delta/7);
+        var days = delta%7;
+
+        if (weeks < 4) {
+            return `${weeks} week ago`;
+        }
+
+        var months = Math.floor(weeks/4);
+        weeks = weeks%4;
+
+        if (months < 12) {
+            return `${months} months ago`; 
+        }
+
+        var years = Math.floor(months/12);
+        months = months%12;
+
+        if (months === 0) {
+            return `${years} year(s) ago`;
+        } else {
+            return `${years} year(s) ${months} month(s) ago`;
+        }
+    }
+
+
+    function _refreshNodeModule(module) {
+        if (!nodeEntries.hasOwnProperty(module)) {
+            nodeEntries[module] = {info:RED.nodes.registry.getModule(module)};
+            var index = [module];
+            for (var s in nodeEntries[module].info.sets) {
+                if (nodeEntries[module].info.sets.hasOwnProperty(s)) {
+                    index.push(s);
+                    index = index.concat(nodeEntries[module].info.sets[s].types)
+                }
+            }
+            nodeEntries[module].index = index.join(",").toLowerCase();
+            nodeList.editableList('addItem', nodeEntries[module]);
+        } else {
+            var moduleInfo = nodeEntries[module].info;
+            var nodeEntry = nodeEntries[module].elements;
+            if (nodeEntry) {
+                var activeTypeCount = 0;
+                var typeCount = 0;
+                var errorCount = 0;
+                nodeEntry.errorList.empty();
+                nodeEntries[module].totalUseCount = 0;
+                nodeEntries[module].setUseCount = {};
+
+                for (var setName in moduleInfo.sets) {
+                    if (moduleInfo.sets.hasOwnProperty(setName)) {
+                        var inUseCount = 0;
+                        var set = moduleInfo.sets[setName];
+                        var setElements = nodeEntry.sets[setName];
+                        if (set.err) {
+                            errorCount++;
+                            $("<li>").text(set.err).appendTo(nodeEntry.errorList);
+                        }
+                        if (set.enabled) {
+                            activeTypeCount += set.types.length;
+                        }
+                        typeCount += set.types.length;
+                        for (var i=0;i<moduleInfo.sets[setName].types.length;i++) {
+                            var t = moduleInfo.sets[setName].types[i];
+                            inUseCount += (typesInUse[t]||0);
+                            var swatch = setElements.swatches[t];
+                            if (set.enabled) {
+                                var def = RED.nodes.getType(t);
+                                if (def && def.color) {
+                                    swatch.css({background:RED.utils.getNodeColor(t,def)});
+                                    swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
+
+                                } else {
+                                    swatch.css({background:"#eee",border:"1px dashed #999"})
+                                }
+                            } else {
+                                swatch.css({background:"#eee",border:"1px dashed #999"})
+                            }
+                        }
+                        nodeEntries[module].setUseCount[setName] = inUseCount;
+                        nodeEntries[module].totalUseCount += inUseCount;
+
+                        if (inUseCount > 0) {
+                            setElements.enableButton.text('in use');
+                            setElements.enableButton.addClass('disabled');
+                        } else {
+                            setElements.enableButton.removeClass('disabled');
+                            if (set.enabled) {
+                                setElements.enableButton.text('disable');
+                            } else {
+                                setElements.enableButton.text('enable');
+                            }
+                        }
+                        setElements.setRow.toggleClass("palette-module-set-disabled",!set.enabled);
+                    }
+                }
+
+                if (errorCount === 0) {
+                    nodeEntry.errorRow.hide()
+                } else {
+                    nodeEntry.errorRow.show();
+                }
+
+                var nodeCount = (activeTypeCount === typeCount)?typeCount:activeTypeCount+" / "+typeCount;
+                nodeEntry.setCount.text(`${nodeCount} node`);
+
+                if (nodeEntries[module].totalUseCount > 0) {
+                    nodeEntry.enableButton.text('in use');
+                    nodeEntry.enableButton.addClass('disabled');
+                    nodeEntry.removeButton.hide();
+                } else {
+                    nodeEntry.enableButton.removeClass('disabled');
+                    if (moduleInfo.local) {
+                        nodeEntry.removeButton.css('display', 'inline-block');
+                    }
+                    if (activeTypeCount === 0) {
+                        nodeEntry.enableButton.text('enable all');
+                    } else {
+                        nodeEntry.enableButton.text('disable all');
+                    }
+                    nodeEntry.container.toggleClass("disabled",(activeTypeCount === 0));
+                }
+            }
+            if (moduleInfo.pending_version) {
+                nodeEntry.versionSpan.html(moduleInfo.version+' <i class="fa fa-long-arrow-right"></i> '+moduleInfo.pending_version).appendTo(nodeEntry.metaRow)
+                nodeEntry.updateButton.text('updated').addClass('disabled').css('display', 'inline-block');
+            } else if (loadedIndex.hasOwnProperty(module)) {
+                if (semVerCompare(loadedIndex[module].version,moduleInfo.version) === 1) {
+                    nodeEntry.updateButton.show();
+                    nodeEntry.updateButton.text(`Updated version: ${loadedIndex[module].version}`);
+                } else {
+                    nodeEntry.updateButton.hide();
+                }
+            } else {
+                nodeEntry.updateButton.hide();
+            }
+        }
+
+    }
+
+    function filterChange(val) {
+        activeFilter = val.toLowerCase();
+        var visible = nodeList.editableList('filter');
+        var size = nodeList.editableList('length');
+        if (val === "") {
+            filterInput.searchBox('count');
+        } else {
+            filterInput.searchBox('count',visible+" / "+size);
+        }
+    }
+
+
+    var catalogueCount;
+    var catalogueLoadStatus = [];
+    var catalogueLoadStart;
+    var catalogueLoadErrors = false;
+
+    var activeSort = sortModulesRelevance;
+
+    function handleCatalogResponse(err,catalog,index,v) {
+        catalogueLoadStatus.push(err||v);
+        if (!err) {
+            if (v.modules) {
+                v.modules.forEach(function(m) {
+                    loadedIndex[m.id] = m;
+                    m.index = [m.id];
+                    if (m.keywords) {
+                        m.index = m.index.concat(m.keywords);
+                    }
+                    if (m.types) {
+                        m.index = m.index.concat(m.types);
+                    }
+                    if (m.updated_at) {
+                        m.timestamp = new Date(m.updated_at).getTime();
+                    } else {
+                        m.timestamp = 0;
+                    }
+                    m.index = m.index.join(",").toLowerCase();
+                })
+                loadedList = loadedList.concat(v.modules);
+            }
+            searchInput.searchBox('count',loadedList.length);
+        } else {
+            catalogueLoadErrors = true;
+        }
+        if (catalogueCount > 1) {
+            $(".palette-module-shade-status").html('Loading catalogues...') + "<br>"+catalogueLoadStatus.length+"/"+catalogueCount;
+        }
+        if (catalogueLoadStatus.length === catalogueCount) {
+            if (catalogueLoadErrors) {
+                RED.notify(`<p>Failed to load node catalogue.</p><p>Check the browser console for more information</p>`, "error", false, 8000);
+            }
+            var delta = 250-(Date.now() - catalogueLoadStart);
+            setTimeout(function() {
+                $("#palette-module-install-shade").hide();
+            },Math.max(delta,0));
+
+        }
+    }
+
+    function initInstallTab() {
+        // if (loadedList.length === 0) {
+        //     loadedList = [];
+        //     loadedIndex = {};
+        //     packageList.editableList('empty');
+
+        //     $(".palette-module-shade-status").text('Loading catalogues...');
+        //     var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json'];
+        //     catalogueLoadStatus = [];
+        //     catalogueLoadErrors = false;
+        //     catalogueCount = catalogues.length;
+        //     if (catalogues.length > 1) {
+        //         $(".palette-module-shade-status").html(RED._('palette.editor.loading')+"<br>0/"+catalogues.length);
+        //     }
+        //     $("#palette-module-install-shade").show();
+        //     catalogueLoadStart = Date.now();
+        //     var handled = 0;
+        //     catalogues.forEach(function(catalog,index) {
+        //         $.getJSON(catalog, {_: new Date().getTime()},function(v) {
+        //             handleCatalogResponse(null,catalog,index,v);
+        //             refreshNodeModuleList();
+        //         }).fail(function(jqxhr, textStatus, error) {
+        //             handleCatalogResponse(jqxhr,catalog,index);
+        //         }).always(function() {
+        //             handled++;
+        //             if (handled === catalogueCount) {
+        //                 searchInput.searchBox('change');
+        //             }
+        //         })
+        //     });
+        // }
+    }
+
+    function refreshFilteredItems() {
+        packageList.editableList('empty');
+        var currentFilter = searchInput.searchBox('value').trim();
+        if (currentFilter === ""){
+            packageList.editableList('addItem',{count:loadedList.length})
+            return;
+        }
+        filteredList.sort(activeSort);
+        for (var i=0;i<Math.min(10,filteredList.length);i++) {
+            packageList.editableList('addItem',filteredList[i]);
+        }
+        if (filteredList.length === 0) {
+            packageList.editableList('addItem',{});
+        }
+
+        if (filteredList.length > 10) {
+            packageList.editableList('addItem',{start:10,more:filteredList.length-10})
+        }
+    }
+    function sortModulesRelevance(A,B) {
+        var currentFilter = searchInput.searchBox('value').trim();
+        if (currentFilter === "") {
+            return sortModulesAZ(A,B);
+        }
+        var i = A.info.index.indexOf(currentFilter) - B.info.index.indexOf(currentFilter);
+        if (i === 0) {
+            return sortModulesAZ(A,B);
+        }
+        return i;
+    }
+    function sortModulesAZ(A,B) {
+        return A.info.id.localeCompare(B.info.id);
+    }
+    function sortModulesRecent(A,B) {
+        return -1 * (A.info.timestamp-B.info.timestamp);
+    }
+
+
+    function init() {
+        if (RED.settings.theme('palette.editable') === false) {
+            return;
+        }
+        createSettingsPane();
+
+        RED.userSettings.add({
+            id:'palette',
+            title: 'Palette',
+            get: getSettingsPane,
+            close: function() {
+                settingsPane.detach();
+            },
+            focus: function() {
+                editorTabs.resize();
+                setTimeout(function() {
+                    filterInput.focus();
+                },200);
+            }
+        })
+
+        RED.actions.add("core:manage-palette",function() {
+                RED.userSettings.show('palette');
+            });
+
+        RED.events.on('registry:module-updated', function(ns) {
+            refreshNodeModule(ns.module);
+        });
+        RED.events.on('registry:node-set-enabled', function(ns) {
+            refreshNodeModule(ns.module);
+        });
+        RED.events.on('registry:node-set-disabled', function(ns) {
+            refreshNodeModule(ns.module);
+        });
+        RED.events.on('registry:node-type-added', function(nodeType) {
+            if (!/^subflow:/.test(nodeType)) {
+                var ns = RED.nodes.registry.getNodeSetForType(nodeType);
+                refreshNodeModule(ns.module);
+            }
+        });
+        RED.events.on('registry:node-type-removed', function(nodeType) {
+            if (!/^subflow:/.test(nodeType)) {
+                var ns = RED.nodes.registry.getNodeSetForType(nodeType);
+                refreshNodeModule(ns.module);
+            }
+        });
+        RED.events.on('registry:node-set-added', function(ns) {
+            refreshNodeModule(ns.module);
+            for (var i=0;i<filteredList.length;i++) {
+                if (filteredList[i].info.id === ns.module) {
+                    var installButton = filteredList[i].elements.installButton;
+                    installButton.addClass('disabled');
+                    installButton.text('Installed');
+                    break;
+                }
+            }
+        });
+        RED.events.on('registry:node-set-removed', function(ns) {
+            var module = RED.nodes.registry.getModule(ns.module);
+            if (!module) {
+                var entry = nodeEntries[ns.module];
+                if (entry) {
+                    nodeList.editableList('removeItem', entry);
+                    delete nodeEntries[ns.module];
+                    for (var i=0;i<filteredList.length;i++) {
+                        if (filteredList[i].info.id === ns.module) {
+                            var installButton = filteredList[i].elements.installButton;
+                            installButton.removeClass('disabled');
+                            installButton.text('Install');
+                            break;
+                        }
+                    }
+                }
+            }
+        });
+        RED.events.on('nodes:add', function(n) {
+            if (!/^subflow:/.test(n.type)) {
+                typesInUse[n.type] = (typesInUse[n.type]||0)+1;
+                if (typesInUse[n.type] === 1) {
+                    var ns = RED.nodes.registry.getNodeSetForType(n.type);
+                    refreshNodeModule(ns.module);
+                }
+            }
+        })
+        RED.events.on('nodes:remove', function(n) {
+            if (typesInUse.hasOwnProperty(n.type)) {
+                typesInUse[n.type]--;
+                if (typesInUse[n.type] === 0) {
+                    delete typesInUse[n.type];
+                    var ns = RED.nodes.registry.getNodeSetForType(n.type);
+                    refreshNodeModule(ns.module);
+                }
+            }
+        })
+    }
+
+    var settingsPane;
+
+    function getSettingsPane() {
+        initInstallTab();
+        editorTabs.activateTab('nodes');
+        return settingsPane;
+    }
+
+
+
+    function createSettingsPane() {
+        settingsPane = $('<div id="user-settings-tab-palette"></div>');
+        var content = $('<div id="palette-editor">'+
+            '<ul id="palette-editor-tabs"></ul>'+
+        '</div>').appendTo(settingsPane);
+
+        editorTabs = RED.tabs.create({
+            element: settingsPane.find('#palette-editor-tabs'),
+            onchange:function(tab) {
+                content.find(".palette-editor-tab").hide();
+                tab.content.show();
+                if (filterInput) {
+                    filterInput.searchBox('value',"");
+                }
+                if (searchInput) {
+                    searchInput.searchBox('value',"");
+                }
+                if (tab.id === 'install') {
+                    if (searchInput) {
+                        searchInput.focus();
+                    }
+                } else {
+                    if (filterInput) {
+                        filterInput.focus();
+                    }
+                }
+            },
+            minimumActiveTabWidth: 110
+        });
+
+
+        var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo(content);
+
+        editorTabs.addTab({
+            id: 'nodes',
+            label: 'Nodes',
+            content: modulesTab
+        })
+
+        var filterDiv = $('<div>',{class:"palette-search"}).appendTo(modulesTab);
+        filterInput = $('<input type="text" placeholder="Filter nodes"></input>')
+            .appendTo(filterDiv)
+            .searchBox({
+                delay: 200,
+                change: function() {
+                    filterChange($(this).val());
+                }
+            });
+
+
+        nodeList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({
+            addButton: false,
+            scrollOnAdd: false,
+            sort: function(A,B) {
+                return A.info.name.localeCompare(B.info.name);
+            },
+            filter: function(data) {
+                if (activeFilter === "" ) {
+                    return true;
+                }
+
+                return (activeFilter==="")||(data.index.indexOf(activeFilter) > -1);
+            },
+            addItem: function(container,i,object) {
+                var entry = object.info;
+                if (entry) {
+                    var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container);
+                    var titleRow = $('<div class="palette-module-meta palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
+                    $('<span>').text(entry.name).appendTo(titleRow);
+                    var metaRow = $('<div class="palette-module-meta palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
+                    var versionSpan = $('<span>').text(entry.version).appendTo(metaRow);
+
+                    var errorRow = $('<div class="palette-module-meta palette-module-errors"><i class="fa fa-warning"></i></div>').hide().appendTo(headerRow);
+                    var errorList = $('<ul class="palette-module-error-list"></ul>').appendTo(errorRow);
+                    var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
+                    var setButton = $('<a href="#" class="editor-button editor-button-small palette-module-set-button"><i class="fa fa-angle-right palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
+                    var setCount = $('<span>').appendTo(setButton);
+                    var buttonGroup = $('<div>',{class:"palette-module-button-group"}).appendTo(buttonRow);
+
+                    var updateButton = $('<a href="#" class="editor-button editor-button-small"></a>').text('Update').appendTo(buttonGroup);
+                    updateButton.attr('id','up_'+Math.floor(Math.random()*1000000000));
+                    updateButton.click(function(evt) {
+                        evt.preventDefault();
+                        if ($(this).hasClass('disabled')) {
+                            return;
+                        }
+                        update(entry,loadedIndex[entry.name].version,container,function(err){});
+                    })
+
+
+                    var removeButton = $('<a href="#" class="editor-button editor-button-small"></a>').text('Remove').appendTo(buttonGroup);
+                    removeButton.attr('id','up_'+Math.floor(Math.random()*1000000000));
+                    removeButton.click(function(evt) {
+                        evt.preventDefault();
+                        remove(entry,container,function(err){});
+                    })
+                    if (!entry.local) {
+                        removeButton.hide();
+                    }
+                    var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').text('disable all').appendTo(buttonGroup);
+
+                    var contentRow = $('<div>',{class:"palette-module-content"}).appendTo(container);
+                    var shade = $('<div class="palette-module-shade hide"><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(container);
+
+                    object.elements = {
+                        updateButton: updateButton,
+                        removeButton: removeButton,
+                        enableButton: enableButton,
+                        errorRow: errorRow,
+                        errorList: errorList,
+                        setCount: setCount,
+                        container: container,
+                        shade: shade,
+                        versionSpan: versionSpan,
+                        sets: {}
+                    }
+                    setButton.click(function(evt) {
+                        evt.preventDefault();
+                        if (container.hasClass('expanded')) {
+                            container.removeClass('expanded');
+                            contentRow.slideUp();
+                        } else {
+                            container.addClass('expanded');
+                            contentRow.slideDown();
+                        }
+                    })
+
+                    var setList = Object.keys(entry.sets)
+                    setList.sort(function(A,B) {
+                        return A.toLowerCase().localeCompare(B.toLowerCase());
+                    });
+                    setList.forEach(function(setName) {
+                        var set = entry.sets[setName];
+                        var setRow = $('<div>',{class:"palette-module-set"}).appendTo(contentRow);
+                        var buttonGroup = $('<div>',{class:"palette-module-set-button-group"}).appendTo(setRow);
+                        var typeSwatches = {};
+                        set.types.forEach(function(t) {
+                            var typeDiv = $('<div>',{class:"palette-module-type"}).appendTo(setRow);
+                            typeSwatches[t] = $('<span>',{class:"palette-module-type-swatch"}).appendTo(typeDiv);
+                            $('<span>',{class:"palette-module-type-node"}).text(t).appendTo(typeDiv);
+                        })
+                        var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').appendTo(buttonGroup);
+                        enableButton.click(function(evt) {
+                            evt.preventDefault();
+                            if (object.setUseCount[setName] === 0) {
+                                var currentSet = RED.nodes.registry.getNodeSet(set.id);
+                                shade.show();
+                                var newState = !currentSet.enabled
+                                changeNodeState(set.id,newState,shade,function(xhr){
+                                    if (xhr) {
+                                        if (xhr.responseJSON) {
+                                            RED.notify(`Error found when enabling/disabling node: ${xhr.responseJSON.message}`)
+                                    
+                                        }
+                                    }
+                                });
+                            }
+                        })
+
+                        object.elements.sets[set.name] = {
+                            setRow: setRow,
+                            enableButton: enableButton,
+                            swatches: typeSwatches
+                        };
+                    });
+                    enableButton.click(function(evt) {
+                        evt.preventDefault();
+                        if (object.totalUseCount === 0) {
+                            changeNodeState(entry.name,(container.hasClass('disabled')),shade,function(xhr){
+                                if (xhr) {
+                                    if (xhr.responseJSON) {
+                                        RED.notify(`Installation '${id}' failed: ${xhr.responseJSON.message}`);
+                                    }
+                                }
+                            });
+                        }
+                    })
+                    refreshNodeModule(entry.name);
+                } else {
+                    $('<div>',{class:"red-ui-search-empty"}).text('No matches found').appendTo(container);
+                }
+            }
+        });
+
+
+
+        var installTab = $('<div>',{class:"palette-editor-tab hide"}).appendTo(content);
+
+        editorTabs.addTab({
+            id: 'install',
+            label: 'Install',
+            content: installTab
+        })
+
+        var toolBar = $('<div>',{class:"palette-editor-toolbar"}).appendTo(installTab);
+
+        var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab);
+        searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
+            .appendTo(searchDiv)
+            .searchBox({
+                delay: 300,
+                change: function() {
+                    var searchTerm = $(this).val().trim().toLowerCase();
+                    if (searchTerm.length > 0) {
+                        filteredList = loadedList.filter(function(m) {
+                            return (m.index.indexOf(searchTerm) > -1);
+                        }).map(function(f) { return {info:f}});
+                        refreshFilteredItems();
+                        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
+                    } else {
+                        searchInput.searchBox('count',loadedList.length);
+                        packageList.editableList('empty');
+                        packageList.editableList('addItem',{count:loadedList.length});
+
+                    }
+                }
+            });
+
+
+        $('<span>').text('sort ').appendTo(toolBar);
+        var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
+        var sortRelevance = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
+        var sortAZ = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
+        var sortRecent = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+
+
+        var sortOpts = [
+            {button: sortRelevance, func: sortModulesRelevance},
+            {button: sortAZ, func: sortModulesAZ},
+            {button: sortRecent, func: sortModulesRecent}
+        ]
+        sortOpts.forEach(function(opt) {
+            opt.button.click(function(e) {
+                e.preventDefault();
+                if ($(this).hasClass("selected")) {
+                    return;
+                }
+                $(".palette-editor-install-sort-option").removeClass("selected");
+                $(this).addClass("selected");
+                activeSort = opt.func;
+                refreshFilteredItems();
+            });
+        });
+
+        var refreshSpan = $('<span>').appendTo(toolBar);
+        var refreshButton = $('<a href="#" class="sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
+        refreshButton.click(function(e) {
+            e.preventDefault();
+            loadedList = [];
+            loadedIndex = {};
+            initInstallTab();
+        })
+
+        packageList = $('<ol>',{style:"position: absolute;top: 78px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
+            addButton: false,
+            scrollOnAdd: false,
+            addItem: function(container,i,object) {
+                if (object.count) {
+                    $('<div>',{class:"red-ui-search-empty"}).text(`${object.count} module available`).appendTo(container);
+                    return
+                }
+                if (object.more) {
+                    container.addClass('palette-module-more');
+                    var moreRow = $('<div>',{class:"palette-module-header palette-module"}).appendTo(container);
+                    var moreLink = $('<a href="#"></a>').text(`+ ${object.more} more`).appendTo(moreRow);
+                    moreLink.click(function(e) {
+                        e.preventDefault();
+                        packageList.editableList('removeItem',object);
+                        for (var i=object.start;i<Math.min(object.start+10,object.start+object.more);i++) {
+                            packageList.editableList('addItem',filteredList[i]);
+                        }
+                        if (object.more > 10) {
+                            packageList.editableList('addItem',{start:object.start+10, more:object.more-10})
+                        }
+                    })
+                    return;
+                }
+                if (object.info) {
+                    var entry = object.info;
+                    var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container);
+                    var titleRow = $('<div class="palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
+                    $('<span>',{class:"palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow);
+                    $('<a target="_blank" class="palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow);
+                    var descRow = $('<div class="palette-module-meta"></div>').appendTo(headerRow);
+                    $('<div>',{class:"palette-module-description"}).text(entry.description).appendTo(descRow);
+                    var metaRow = $('<div class="palette-module-meta"></div>').appendTo(headerRow);
+                    $('<span class="palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
+                    $('<span class="palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
+
+                    var duplicateType = false;
+                    if (entry.types && entry.types.length > 0) {
+
+                        for (var i=0;i<entry.types.length;i++) {
+                            var nodeset = RED.nodes.registry.getNodeSetForType(entry.types[i]);
+                            if (nodeset) {
+                                duplicateType = nodeset.module;
+                                break;
+                            }
+                        }
+                        // $('<div>',{class:"palette-module-meta"}).text(entry.types.join(",")).appendTo(headerRow);
+                    }
+
+                    var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
+                    var buttonGroup = $('<div>',{class:"palette-module-button-group"}).appendTo(buttonRow);
+                    var installButton = $('<a href="#" class="editor-button editor-button-small"></a>').text('Install').appendTo(buttonGroup);
+                    installButton.click(function(e) {
+                        e.preventDefault();
+                        if (!$(this).hasClass('disabled')) {
+                            install(entry,container,function(xhr) {});
+                        }
+                    })
+                    if (nodeEntries.hasOwnProperty(entry.id)) {
+                        installButton.addClass('disabled');
+                        installButton.text('Installed');
+                    } else if (duplicateType) {
+                        installButton.addClass('disabled');
+                        installButton.text('Conflict');
+                        RED.popover.create({
+                            target:installButton,
+                            content: `<p>This module cannot be installed as it includes a<br/>node type that has already been installed</p><p>Conflicts with <code>${duplicateType}</code></p>"`, 
+                            trigger:"hover",
+                            direction:"bottom",
+                            delay:{show:750,hide:50}
+                        })
+                    }
+
+                    object.elements = {
+                        installButton:installButton
+                    }
+                } else {
+                    $('<div>',{class:"red-ui-search-empty"}).text('No matches found').appendTo(container);
+                }
+            }
+        });
+
+        $('<div id="palette-module-install-shade" class="palette-module-shade hide"><div class="palette-module-shade-status"></div><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
+    }
+    function update(entry,version,container,done) {
+        if (RED.settings.theme('palette.editable') === false) {
+            done(new Error('Palette not editable'));
+            return;
+        }
+        var notification = RED.notify(`<p>Updating '${entry.name}'</p><p>Updating the node will require a restart of kumologica to complete the update. This must be done manually.</p>"`, { 
+            modal: true,
+            fixed: true,
+            buttons: [
+                {
+                    text: 'Cancel',
+                    click: function() {
+                        notification.close();
+                    }
+                },
+                {
+                    text: 'Update',
+                    class: "primary palette-module-install-confirm-button-update",
+                    click: function() {
+                        var spinner = RED.utils.addSpinnerOverlay(container, true);
+                        var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
+                        $('<button class="editor-button"></button>').text('View log').appendTo(buttonRow).click(function(evt) {
+                            evt.preventDefault();
+                            RED.actions.invoke("core:show-event-log");
+                        });
+                        RED.eventLog.startEvent('Install ' +" : "+entry.name+" "+version);
+                        installNodeModule(entry.name,version,function(xhr) {
+                            spinner.remove();
+                            if (xhr) {
+                                if (xhr.responseJSON) {
+                                    var notification = RED.notify(`<p>Failed to update: ${entry.name}</p><p>${xhr.responseJSON.message}</p><p>Check the log for more information</p>`, { 
+                                        type: 'error',
+                                        modal: true,
+                                        fixed: true,
+                                        buttons: [
+                                            {
+                                                text: 'Close',
+                                                click: function() {
+                                                    notification.close();
+                                                }
+                                            },{
+                                                text: 'View log',
+                                                click: function() {
+                                                    notification.close();
+                                                    RED.actions.invoke("core:show-event-log");
+                                                }
+                                            }
+                                        ]
+                                    });
+                                }
+                            }
+                            done(xhr);
+                        });
+                        notification.close();
+                    }
+                }
+            ]
+        })
+    }
+    function remove(entry,container,done) {
+        if (RED.settings.theme('palette.editable') === false) {
+            done(new Error('Palette not editable'));
+            return;
+        }
+        var notification = RED.notify(`<p>Removing '${entry.name}'</p><p>Removing the node will uninstall it from kumologica. The node may continue to use resources until kumologica is restarted.</p>`,{ 
+            modal: true,
+            fixed: true,
+            buttons: [
+                {
+                    text: 'Cancel',
+                    click: function() {
+                        notification.close();
+                    }
+                },
+                {
+                    text: 'Remove',
+                    class: "primary palette-module-install-confirm-button-remove",
+                    click: function() {
+                        var spinner = RED.utils.addSpinnerOverlay(container, true);
+                        var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
+                        $('<button class="editor-button"></button>').text('View log').appendTo(buttonRow).click(function(evt) {
+                            evt.preventDefault();
+                            RED.actions.invoke("core:show-event-log");
+                        });
+                        RED.eventLog.startEvent('Remove'+" : "+entry.name);
+                        removeNodeModule(entry.name, function(xhr) {
+                            spinner.remove();
+                            if (xhr) {
+                                if (xhr.responseJSON) {
+                                    var notification = RED.notify(`<p>Failed to remove: ${entry.name} </p><p>${xhr.responseJSON.message}</p><p>Check the log for more information</p>`,{ 
+                                        type: 'error',
+                                        modal: true,
+                                        fixed: true,
+                                        buttons: [
+                                            {
+                                                text: 'Close',
+                                                click: function() {
+                                                    notification.close();
+                                                }
+                                            },{
+                                                text: 'View log',
+                                                click: function() {
+                                                    notification.close();
+                                                    RED.actions.invoke("core:show-event-log");
+                                                }
+                                            }
+                                        ]
+                                    });                                }
+                            }
+                        })
+                        notification.close();
+                    }
+                }
+            ]
+        })
+    }
+    function install(entry,container,done) {
+        if (RED.settings.theme('palette.editable') === false) {
+            done(new Error('Palette not editable'));
+            return;
+        }
+        var buttons = [
+            {
+                text: 'Cancel',
+                click: function() {
+                    notification.close();
+                }
+            }
+        ];
+        if (entry.url) {
+            buttons.push({
+                text: 'Review',
+                class: "primary palette-module-install-confirm-button-install",
+                click: function() {
+                    var url = entry.url||"";
+                    window.open(url);
+                }
+            });
+        }
+        buttons.push({
+            text: 'Install',
+            class: "primary palette-module-install-confirm-button-install",
+            click: function() {
+                var spinner = RED.utils.addSpinnerOverlay(container, true);
+
+                var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
+                $('<button class="editor-button"></button>').text('View log').appendTo(buttonRow).click(function(evt) {
+                    evt.preventDefault();
+                    RED.actions.invoke("core:show-event-log");
+                });
+                RED.eventLog.startEvent('Install'+" : "+entry.id+" "+entry.version);
+                installNodeModule(entry.id,entry.version,function(xhr) {
+                    spinner.remove();
+                     if (xhr) {
+                         if (xhr.responseJSON) {
+                             var notification = RED.notify(`<p>Failed to install: ${entry.id}</p><p>${xhr.responseJSON.message}</p><p>Check the log for more information</p>`, { 
+                                 type: 'error',
+                                 modal: true,
+                                 fixed: true,
+                                 buttons: [
+                                     {
+                                         text: 'Close',
+                                         click: function() {
+                                             notification.close();
+                                         }
+                                     },{
+                                         text: 'View log',
+                                         click: function() {
+                                             notification.close();
+                                             RED.actions.invoke("core:show-event-log");
+                                         }
+                                     }
+                                 ]
+                             });
+                         }
+                     }
+                     done(xhr);
+                });
+                notification.close();
+            }
+        });
+
+        var notification = RED.notify(`<p>Installing '${entry.id}'</p><p>Before installing, please read the node's documentation. Some nodes have dependencies that cannot be automatically resolved and can require a restart of kumologica.</p>`, {
+            modal: true,
+            fixed: true,
+            buttons: buttons
+        })
+    }
+
+    return {
+        init: init,
+        install: install
+    }
+})();