@openziti/ziti-console-lib 0.3.0

package/assets/html/configs.htm

@@ -0,0 +1,238 @@
+    <!-- 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

@@ -0,0 +1,336 @@
+<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

@@ -0,0 +1,72 @@
+<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>