@openziti/ziti-console-lib 0.12.11 → 1.0.1

package/assets/html/configs.htm

@@ -1,238 +0,0 @@
-    <!-- General Page Layout HTML -->  
-    <div class="header">
-        <div class="title">
-            <span data-i18n="Manage"></span>
-            <span data-i18n="Configurations"></span>
-        </div>
-        <div class="bread">
-            <span data-i18n="ZitiNetwork"></span>
-            <span class="secondary">/</span>
-            <span data-i18n="Manage"></span>
-            <span data-i18n="Configurations"></span>
-        </div>
-        {{html.line}}
-        {{html.tabServices}}
-    </div>
-    {{html.add}}
-    {{html.search}}
-    <div class="area data" data-defined="table">
-        {{html.noitems}}
-        <div class="table">
-            <div class="head grid fives">
-                <div class="col">
-                    <div class="selector all"></div>
-                </div>
-                <div class="col sort asc" data-by="name">
-                    <span data-i18n="Name"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="Type"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop sort" data-by="createdAt">
-                    <span data-i18n="Created"></span>
-                </div>
-                <div class="col"></div>
-            </div>
-            <div class="rows" data-defined="rows">
-                <!-- This area will be replaced by data rows -->
-            </div>
-        </div>
-    </div>
-    <div class="nodata" data-defined="empty">
-        <span data-i18n="No"></span>
-        <span data-i18n="Configuration"></span>
-        <span data-i18n="NoneDefined"></span>
-        <span data-i18n="Configuration"></span>.
-    </div>
-
-    <!-- Template HTML will be used to display rows of data -->
-    <div id="RowTemplate" class="row grid fives template" data-defined="template">
-        <div class="col">
-            <div class="selector" data-id="{{id}}"></div>
-        </div>
-        <div class="col" data-id="{{id}}"><a href="javascript:page.edit('{{id}}');">{{name}}</a></div>
-        <div class="col desktop" data-id="{{id}}">{{configType.name}}</div>
-        <div class="col desktop" data-id="{{id}}">{{moment.createdAt}}</div>
-        <div class="col allowOver">
-            <div class="dots" data-id="{{id}}">...
-                <div class="gridMenu" data-id="{{id}}">
-                    <div class="gridAction" data-id="{{id}}" data-action="edit">Edit</div>
-                    <div class="gridAction" data-id="{{id}}" data-action="delete">Delete</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Modification Modals -->
-    <div id="AddModal" class="modal box full">
-        <div class="sized">
-            <div class="close icon-close"></div>
-            <div class="title adding">
-                <span data-i18n="Create"></span>
-                <span data-i18n="Configuration"></span>
-                <div class="jsonButton">{ <span data-i18n="JSON"></span> }</div>
-            </div>
-            <div class="subtitle adding">
-                <span data-i18n="AddNew"></span>
-                <span data-i18n="Configuration"></span>
-                <span data-i18n="ByComplete"></span>
-            </div>
-            <div class="title editing">
-                <span data-i18n="Edit"></span>
-                <span data-i18n="Configuration"></span>
-                <div class="jsonButton">{ <span data-i18n="JSON"></span> }</div>
-            </div>
-            <div class="subtitle editing">
-                <span data-i18n="Change"></span>
-                <span data-i18n="Configuration"></span>
-                <span data-i18n="Details"></span>
-            </div>
-            <label for="Name" data-i18n="Name"></label>
-            <input id="Name" data-bind="data.name" type="text" maxlength="500" data-i18n="EnterName" data-restrict="empty" />
-            <label for="Types" data-i18n="Types"></label>
-            <select id="Types" data-bind="data.configTypeId" data-default=""></select>
-            <div id="SchemaList"></div>
-            <div id="JSONViewArea">
-                <label for="JSONView" class="jsonV" data-i18n="JSON"></label> 
-                <textarea id="JSONView" style="height: 75px;"></textarea>
-            </div>
-            <div id="TagArea"></div>
-            {{html.api}}
-            {{html.save}}
-        </div>
-    </div>
-
-    <script language="javascript" type="text/javascript">
-        page = {
-            filterObject: null,
-            editData: null,
-            configTypes: null,
-            apiParams: null,
-            init: function() {
-                this.events();
-
-                page.filterObject = new Data("configs");
-                page.filterObject.init(true, true);
-                page.configTypes = new Data("config-types");
-                page.configTypes.init(true, false, true);   
-                
-                schema.init("SchemaList", "JSONView");
-
-                page.apiParams = CodeMirror.fromTextArea(document.getElementById("ApiParams"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"}, readOnly: true });
-            }, 
-            events: function() {
-                context.addListener("config-types", page.typesLoaded);
-                $("#Types").change(page.typechanged);
-                $(".jsonButton").click(function(e) {
-                    if ($(e.currentTarget).hasClass("on")) $(e.currentTarget).removeClass("on");
-                    else $(e.currentTarget).addClass("on");
-                    var type = $("#Types").val();
-                    if (type!='') {
-                        schema.setView($(".jsonButton").hasClass("on"));
-                    }
-                });
-            },
-            row: function(template, data) {
-                template = template.split("{{configType.name}}").join(data.configType.name);
-                return template;
-            },
-            typechanged: function(e) {
-                var type = $("#Types").val();
-                var schemaType = page.configTypes.details(type);
-                var html = '';
-                $("#SchemaList").html(html);
-                if (schemaType) {
-                    service.call("schema", {schema: schemaType.schema}, page.schemaReturned);
-                } else {
-                    $(".jsonV").hide(); 
-                    $("#JSONViewArea").find(".CodeMirror").hide(); 
-                } 
-            },
-            schemaReturned: function(e) {
-                schema.data = e.data;
-                schema.render();
-                schema.val(page.editData);
-                schema.setView($(".jsonButton").hasClass("on"));
-                commands.reset();
-            },
-            typesLoaded: function(e) {
-                var types = context.get(page.configTypes.name);
-                var select = document.getElementById("Types");
-                select.options = [];
-                var option = document.createElement("option");
-                option.value = "";
-                option.text = "Select A Type...";
-                select.add( option );
-                for (var i=0; i<types.length; i++) {
-                    var option = document.createElement("option");
-                    option.value = types[i].id;
-                    option.text = types[i].name;
-                    select.add( option );
-                }
-                page.typechanged();
-            },
-            gridAction: function(e) {
-                var action = $(e.currentTarget).data("action");
-                var id = $(e.currentTarget).data("id");
-                if (action=="delete") page.filterObject.delete([id]);
-                else if (action=="edit") page.edit(id);
-            },
-            edit: function(id) {
-                var detail = page.filterObject.details(id);
-                page.editData = detail.data;
-                $("#Types").attr("disabled",true);
-                page.typechanged();
-                page.params();
-                modal.show("AddModal");
-            },
-            save: function() {
-                if (page.validate()) {
-                    var obj = page.params();
-                    
-                    page.filterObject.save(obj);
-                } else growler.form();
-            },
-            params: function() {
-                try {  
-                    var obj = {
-                        name: $("#Name").val(),
-                        data: schema.val()
-                    };
-                    if (page.filterObject.editId=="") obj.configTypeId = $("#Types").val();
-
-                    var url = settings.versionData.baseUrl+settings.versionData.serviceUrl+"/"+page.filterObject.name;
-                    if (page.filterObject.isEditing()) url += "/"+page.filterObject.editId;
-                    $("#ApiUrl").val(url);  
-                    var stayAt = $("#AddModal").scrollTop();
-                    page.apiParams.setValue(JSON.stringify(obj));
-                    page.apiParams.autoFormatRange({line:0, ch:0}, {line:page.apiParams.lineCount()});
-                    page.apiParams.scrollTo(null, 0);
-                    $("#AddModal").scrollTop(stayAt);
-                    
-                    return obj
-                } catch (e) {
-                    console.log(e);
-                }
-            },
-            validate: function() {
-                $(".errors").removeClass("errors");
-                if ($("#Name").val().trim().length==0) $("#Name").addClass("errors");
-                if ($("#Types").val().trim().length==0) $("#Types").addClass("errors");
-                var type = $("#Types").val();
-                schema.validate();
-                return $(".errors").length==0;
-            },
-            formReset: function(e) {
-                page.params();
-            },
-            reset: function() {
-                app.isDirty = false;
-                $("#Types").attr("disabled",false);
-                $(".jsonButton").removeClass("on");
-                page.editData = {};
-                page.typechanged();
-            }
-        }
-    </script>

package/assets/html/deprecated/fabric-links.htm

@@ -1,336 +0,0 @@
-<div class="header">
-        <div class="title">Manage <span data-bind="pageTitle"></span></div>
-        <div class="bread">Ziti Network <span class="secondary">/</span> Manage <span data-bind="pageTitle"></span></div>
-        <div class="line"></div>
-        <div class="tabs">
-            <div class="tab" data-go="/fabric-services">Fabric Services</div>
-            <div class="tab" data-go="/fabric-routers">Routers</div>
-            <div class="tab selected">Links</div>
-        </div>
-        <div class="views">
-            <div class="imageButton" data-area="Network">
-                <div class="icon icon-network"></div>
-                network
-            </div>
-            <div class="imageButton selected" data-area="List">
-                <div class="icon icon-listview"></div>
-                list
-            </div>
-        </div>
-    </div>
-    <div id="ListArea" class="area data">
-        <div class="noitems"></div>
-        <div class="table">
-            <div class="head grid links">
-                <div class="col">Status</div>
-                <div class="col">Name</div>
-                <div class="col">Path (Src-Dest)</div>
-                <div class="col"></div>
-            </div>
-            <div class="rows">
-                <!-- This area will be replaced by data rows -->
-            </div>
-        </div>
-    </div>
-    <div id="NetworkArea" class="area" style="display: none; height: 80vh;">
-        
-    </div>
-    
-    <!-- Row Template -->
-    <div id="RowTemplate" class="row grid links template">
-        <div class="col" data-id="{{id}}"><div class="ball {{state}}"></div></div>
-        <div class="col" data-id="{{id}}">{{id}}</div>
-        <div class="col" data-id="{{id}}">
-            <div class="grid path">
-                <div class="relative">
-                    <div class="latency">{{srcLatencyMS}}ms</div>
-                    <div class="spot">{{src}}</div>
-                </div>
-                <div class="relative">
-                    <div class="connector"></div>
-                </div>
-                <div class="relative">
-                    <div class="latency">{{dstLatencyMS}}ms</div>
-                    <div class="spot">{{dst}}</div>
-                </div>
-            </div>
-        </div>
-        <div class="col allowOver">
-            <div class="dots" data-id="{{id}}">...
-                <div class="gridMenu" data-id="{{id}}">
-                    <div class="gridAction" data-id="{{id}}" data-action="visual">Metrics</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Modification Modals -->
-    <div id="VisualModal" class="modal box full">
-        <div class="sized not">
-            <div class="close icon-close"></div>
-            <div class="title"><span data-bind="singular"></span></div>
-            <div class="subtitle">Metrics</div>
-            <div id="FlowArea" class="duplex">
-                <div class="relative">
-                    <div id="SourceName" class="bubbleTitle"></div>
-                    <div class="inside">
-                        <div><span id="SourceLatency"></span> ms</div>
-                        <div><span id="SourceSize"></span> mb</div>
-                    </div> 
-                    <div class="charts">
-                        <canvas id="LatencyOut"></canvas>
-                    </div>
-                    <div class="charts">
-                        <canvas id="ByteRate"></canvas>
-                    </div>
-                </div>
-                <div class="relative">
-                    <div id="DestinationName" class="bubbleTitle"></div>
-                    <div class="inside">
-                        <div><span id="DestinationLatency"></span> ms</div>
-                        <div><span id="DestinationSize"></span> mb</div>
-                    </div>
-                    <div class="charts">
-                        <canvas id="MessageSize"></canvas>
-                    </div>
-                    <div class="charts">
-                        <canvas id="MessageRate"></canvas>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script language="javascript" type="text/javascript">
-        page = {
-            binding: {
-                pageTitle: "Fabric Links",
-                singular: "Fabric Link"
-            },
-            data: [],
-            series: {},
-            editId: -1,
-            viewArea: "List",
-            init: function() {
-                this.events();
-                links.init();
-            },
-            events: function() {
-                context.addListener(links.name, page.getLoaded);
-                $(".imageButton").click(page.area);
-            },
-            area: function(e) {
-                $(".imageButton.selected").removeClass("selected");
-                $(e.currentTarget).addClass("selected");
-                page.viewArea = $(e.currentTarget).data("area");
-                $(".area").hide();
-                $("#"+page.viewArea+"Area").fadeIn();
-                if (page.viewArea=="Network") page.setupNetwork();
-            },
-            getLoaded: function(e) {
-                $(".selector.selected").removeClass("selected");
-                app.setAction();
-                page.data = links.data;
-                page.data.sort((a,b) => (a.src > b.src) ? 1 : ((b.src > a.src) ? -1 : 0));
-                $(".rows").html("");
-                if (page.data.length>0) {
-                    for (var i=0; i<page.data.length; i++) {
-                        var element = $("#RowTemplate").clone();
-                        element.removeClass("template");
-                        element.attr("id","Row"+i);
-                        var srcLat = (page.data[i].srcLatency*100000).toFixed(0);
-                        var dstLat = (page.data[i].dstLatency*100000).toFixed(0);
-                        element.html(element.html().split("{{srcLatencyMS}}").join(app.validate(srcLat)));
-                        element.html(element.html().split("{{dstLatencyMS}}").join(app.validate(dstLat)));
-                        for (var prop in page.data[i]) element.html(element.html().split("{{"+prop+"}}").join(app.validate(page.data[i][prop])));
-                        $(".rows").append(element);
-                    }
-                    page.pageLoaded();     
-                    $(".data").show();
-                    $(".nodata").hide();       
-                } else {
-                    $(".data").hide();
-                    $(".nodata").show();
-                }       
-            },
-            clickEdit: function(e) {
-                var id = $(e.currentTarget).data("id");
-                if (id) page.edit(id);
-            },
-            reset: function() {
-                app.isDirty = false;
-
-            },
-            edit: function(id) {
-                page.reset();
-                var detail = links.details(id);
-
-                page.series.latencyOut = new Series("link", detail.id, "", "latency", detail.src);
-                page.series.latencyIn = new Series("link", detail.id, "", "latency", detail.dst);
-                page.series.messageSize = new Series("link", detail.id, "tx", "msgsize", detail.src);
-                page.series.byteRate = new Series("link", detail.id, "tx", "bytesrate", detail.src);
-                page.series.messageRate = new Series("link", detail.id, "tx", "msgrate", detail.src);
-
-                page.series.sizeOut = new Series("link", detail.id, "tx", "msgsize", detail.src);
-                page.series.sizeIn = new Series("link", detail.id, "rx", "msgsize", detail.dst);
-
-                context.addListener(page.series.latencyOut.getSource(), page.seriesOutLoaded);
-                context.addListener(page.series.messageSize.getSource(), page.messageSizeLoaded);
-                context.addListener(page.series.byteRate.getSource(), page.byteRateLoaded);
-                context.addListener(page.series.messageRate.getSource(), page.messageRateLoaded);
-                $("#SourceLatency").addClass(page.series.latencyOut.getSource().split('.').join('')+"average");
-                $("#DestinationLatency").addClass(page.series.latencyIn.getSource().split('.').join('')+"average");
-                $("#SourceSize").addClass(page.series.sizeOut.getSource().split('.').join('')+"average");
-                $("#DestinationSize").addClass(page.series.sizeIn.getSource().split('.').join('')+"average");
-
-                page.series.latencyOut.get();
-                page.series.messageSize.get();
-                page.series.byteRate.get();
-                page.series.messageRate.get();
-                page.series.latencyOut.getLatency();
-                page.series.latencyIn.getLatency();
-                page.series.sizeOut.getAverage();
-                page.series.sizeIn.getAverage();
-
-                $("#SourceName").html(detail.src);
-                $("#DestinationName").html(detail.dst);
-                page.editId = id;
-                modal.show("VisualModal");
-            },
-            convertHex: function(hex,opacity){
-                hex = hex.replace('#','');
-                r = parseInt(hex.substring(0,2), 16);
-                g = parseInt(hex.substring(2,4), 16);
-                b = parseInt(hex.substring(4,6), 16);
-
-                result = 'rgba('+r+','+g+','+b+','+opacity+')';
-                return result;
-            },
-            seriesLoaded: function(e, chart, append) {
-                var series = [];
-                var data = [];
-                var labels = [];
-                for (var i=0; i<e.length; i++) {
-                    labels[labels.length] = moment(e[i].time).fromNow();
-                    data[data.length] = e[i].mean;
-                }
-                var ctx = document.getElementById(chart.split(' ').join(''));
-                var primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
-                var color = page.convertHex(primaryColor, 1);
-                var colorOpaque = page.convertHex(primaryColor, 0.2);
-                var myChart = new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: labels,
-                        datasets: [{
-                            data: data,
-                            backgroundColor: 
-                                colorOpaque
-                            ,
-                            borderColor: 
-                                color
-                            ,
-                            borderWidth: 3
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        scales: {
-                            yAxes: [{
-                                ticks: {
-                                    beginAtZero: false
-                                }
-                            }]
-                        }
-                    },
-                    options: {
-                        legend: {
-                            display: false
-                        }
-                    }
-                });             
-            },
-            messageSizeLoaded: function(e) {
-                page.seriesLoaded(e.data, "Message Size", "mb");
-            },
-            seriesOutLoaded: function(e) {
-                for (var i=0; i<e.data.length; i++) {
-                    e.data[i].mean = Number((e.data[i].mean*.0001).toFixed(0));
-                }
-                page.seriesLoaded(e.data, "Latency Out", "ms");
-            },
-            byteRateLoaded: function(e) {
-                page.seriesLoaded(e.data, "Byte Rate", "bytes");
-            },
-            messageRateLoaded: function(e) {
-                page.seriesLoaded(e.data, "Message Rate", "messages");
-            },
-            pageLoaded: function() {
-                $(".gridAction").click(page.gridAction);
-                $(".clickEdit").click(page.clickEdit);
-                app.postLoad();
-            },
-            gridAction: function(e) {
-                var action = $(e.currentTarget).data("action");
-                var id = $(e.currentTarget).data("id");
-                if (action=="visual") {
-                    if (id) page.edit(id);
-                }
-            },
-            setupNetwork: function() {
-                var primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
-                var color = page.convertHex(primaryColor, 1);
-                var colorOpaque = page.convertHex(primaryColor, 0.2);
-                var secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary');
-                var secondary = page.convertHex(secondaryColor, 1);
-                var secondaryOpaque = page.convertHex(secondaryColor, 0.2);
-                var nodes = [];
-                var connectors = [];
-                for (var i=0; i<links.data.length; i++) {
-                    if (!page.exists(nodes, links.data[i].src)) nodes[nodes.length] = {id: links.data[i].src, label: links.data[i].src};
-                    if (!page.exists(nodes, links.data[i].dst)) nodes[nodes.length] = {id: links.data[i].dst, label: links.data[i].dst};
-                    connectors[connectors.length] = {from: links.data[i].src, to: links.data[i].dst};
-                }
-
-                var definition = new vis.DataSet(nodes);
-                var edges = new vis.DataSet(connectors);
-
-                var container = document.getElementById('NetworkArea');
-                var data = {
-                    nodes: definition,
-                    edges: edges
-                };
-                var options = {
-                    nodes: {
-                        physics: true,
-                        borderWidth: 2,
-                        borderWidthSelected: 10,
-                        color: {
-                            border: color,
-                            background: color,
-                            highlight: {
-                                border: secondary,
-                                background: color
-                            },
-                            hover: {
-                                border: secondary,
-                                background: color
-                            },
-                        },
-                        shape: 'circle'
-                    }
-                };
-                var network = new vis.Network(container, data, options);
-                network.startSimulation();
-            },
-            exists: function(array, id) {
-                for (var i=0; i<array.length; i++) {
-                    if (array[i].id==id) return true;
-                }
-                return false;
-            }
-        }
-
-
-    </script>    

package/assets/html/deprecated/fabric-routers.htm

@@ -1,72 +0,0 @@
-<div class="header">
-        <div class="title">Manage <span data-bind="pageTitle"></span></div>
-        <div class="bread">Ziti Network <span class="secondary">/</span> Manage <span data-bind="pageTitle"></span></div>
-        <div class="line"></div>
-        <div class="tabs">
-            <div class="tab" data-go="/fabric-services">Fabric Services</div>
-            <div class="tab selected">Routers</div>
-            <div class="tab" data-go="/fabric-links">Links</div>
-        </div>
-    </div>
-    <div class="area data">
-        <div class="noitems"></div>
-        <div class="table">
-            <div class="head grid quad">
-                <div class="col asc">Id<div class="dragger"></div></div>
-                <div class="col desktop">Fingerprint<div class="dragger"></div></div>
-                <div class="col">Listener<div class="dragger"></div></div>
-                <div class="col">Connected</div>
-            </div>
-            <div class="rows">
-                <!-- This area will be replaced by data rows -->
-            </div>
-        </div>
-    </div>
-    
-    <!-- Row Template -->
-    <div id="RowTemplate" class="row grid quad template">
-        <div class="col padLeft" data-id="{{id}}"><strong>{{id}}</strong></div>
-        <div class="col desktop" data-id="{{id}}">{{fingerprint}}</div>
-        <div class="col" data-id="{{id}}">{{listenerAddress}}</div>
-        <div class="col" data-id="{{id}}">{{connected}}</div>
-    </div>
-    <script language="javascript" type="text/javascript">
-        page = {
-            binding: {
-                pageTitle: "Fabric Services",
-                singular: "Fabric Service"
-            },
-            data: [],
-            init: function() {
-                this.events();
-                routers.init();
-            },
-            events: function() {
-                context.addListener(routers.name, page.getLoaded);
-            },
-            getLoaded: function(e) {
-                $(".selector.selected").removeClass("selected");
-                app.setAction();
-                page.data = routers.data;
-                $(".rows").html("");
-                if (page.data.length>0) {
-                    for (var i=0; i<page.data.length; i++) {
-                        var element = $("#RowTemplate").clone();
-                        element.removeClass("template");
-                        element.attr("id","Row"+i);
-                        for (var prop in page.data[i]) element.html(element.html().split("{{"+prop+"}}").join(app.validate(page.data[i][prop])));
-                        $(".rows").append(element);
-                    }
-                    page.pageLoaded();     
-                    $(".data").show();
-                    $(".nodata").hide();       
-                } else {
-                    $(".data").hide();
-                    $(".nodata").show();
-                }       
-            },
-            pageLoaded: function() {
-                app.postLoad();
-            }
-        }
-    </script>