@openziti/ziti-console-lib 0.12.11 → 1.0.1

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

@@ -1,494 +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 selected">Fabric Services</div>
-            <div class="tab" data-go="/fabric-routers">Routers</div>
-            <div class="tab" data-go="/fabric-links">Links</div>
-        </div>
-        <div class="views">
-            <div class="imageButton" data-area="Logical">
-                <div class="icon icon-logical"></div>
-                logical
-            </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 quint">
-                <div class="col asc">Id<div class="dragger"></div></div>
-                <div class="col desktop">Binding<div class="dragger"></div></div>
-                <div class="col">Address<div class="dragger"></div></div>
-                <div class="col">Router</div>
-                <div class="col"></div>
-            </div>
-            <div class="rows">
-                <!-- This area will be replaced by data rows -->
-            </div>
-        </div>
-    </div>
-    <div id="LogicalArea" class="area" style="display: none;">
-        <svg id="LogicalConnectors" class="fixedfull"></svg>
-        <div id="Services" class="bigRows">
-
-        </div>
-        <div id="Routers" class="bigRows">
-
-        </div>
-        <div id="Links" class="bigRows">
-
-        </div>
-    </div>
-    
-    <!-- Row Template -->
-    <div id="RowTemplate" class="row grid quint template">
-        <div class="col padLeft" data-id="{{id}}"><strong>{{id}}</strong></div>
-        <div class="col desktop" data-id="{{id}}">{{binding}}</div>
-        <div class="col" data-id="{{id}}">{{endpointAddress}}</div>
-        <div class="col" data-id="{{id}}">{{egress}}</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">Visualize</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="SessionTemplate" class="row grid trio template">
-        <div class="center"><div class="bubble tbl{{index}}_0">{{id}}</div></div>
-        <div class="center paths{{index}}">{{path}}</div>
-    </div>
-
-    <div id="ClientTemplate" class="bigborder template">
-        <div class="enlighten right last{{index}}">{{id}}</div>
-    </div>
-
-    <div id="BallTemplate" class="circular template">
-        {{id}}
-    </div>
-
-    <!-- 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="SessionVisual">
-                <svg id="Connectors" class="fixedfull"></svg>
-                <div class="grid triple">
-                    <div class="vert">
-                        <div id="ServiceData">
-                            <div class="bigborder">
-                                <div id="ServiceName" class="enlighten"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="vert">
-                        <div id="SessionData"></div>
-                    </div>
-                    <div class="vert">
-                        <div id="ClientsData"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-
-    <script language="javascript" type="text/javascript">
-        page = {
-            binding: {
-                pageTitle: "Fabric Services",
-                singular: "Fabric Service"
-            },
-            data: [],
-            series: {},
-            session: [],
-            clients: [],
-            visualizing: false,
-            viewArea: "List",
-            timeout: null,
-            init: function() {
-                this.events();
-                fabricServices.init();
-                routers.init();
-                fabricSessions.init();
-                links.init();
-            },
-            events: function() {
-                $(window).resize(function() { 
-                    if (page.visualizing) page.doLines();
-                    if (page.viewArea=="Logical") page.showGraph();
-                }); 
-                $(".imageButton").click(page.area);
-                context.addListener(fabricServices.name, page.getLoaded);
-                context.addListener("menu", page.menuChanged);
-            },
-            menuChanged: function(e) {
-                    if (page.viewArea=="Logical") page.showGraph();
-            },
-            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);
-                }
-            },
-            reset: function() {
-                app.isDirty = false;
-
-            },
-            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=="Logical") page.showGraph();
-                if (page.viewArea=="Network") page.setupNetwork();
-            },
-            showGraph: function() {
-                $("#LogicalConnectors").html("");
-                $("#Services").html("");
-                $("#Routers").html("");
-                $("#Links").html("");
-                for (var i=0; i<page.data.length; i++) {
-                    var element = $("#BallTemplate").clone();
-                    element.removeClass("template");
-                    element.attr("id","Service"+i);
-                    element.attr("data-router",page.data[i].egress);
-                    for (var prop in page.data[i]) element.html(element.html().split("{{"+prop+"}}").join(app.validate(page.data[i][prop])));
-                    $("#Services").append(element);
-                }
-                for (var i=0; i<routers.data.length; i++) {
-                    var element = $("#BallTemplate").clone();
-                    element.removeClass("template");
-                    element.attr("id","Router"+i);
-                    element.addClass("router");
-                    element.attr("data-id",routers.data[i].id);
-                    for (var prop in routers.data[i]) element.html(element.html().split("{{"+prop+"}}").join(app.validate(routers.data[i][prop])));
-                    $("#Routers").append(element);
-                }
-                for (var i=0; i<links.data.length; i++) {
-                    var element = $("#BallTemplate").clone();
-                    element.removeClass("template");
-                    element.attr("id","Link"+i);
-                    element.addClass("link");
-                    element.attr("data-src",links.data[i].src);
-                    element.attr("data-dst",links.data[i].dst);
-                    element.attr("data-down",links.data[i].down);
-                    if (links.data[i].down) element.addClass("red");
-                    else element.addClass("green");
-                    for (var prop in links.data[i]) element.html(element.html().split("{{"+prop+"}}").join(app.validate(links.data[i][prop])));
-                    $("#Links").append(element);
-                }
-                if (page.timeout) clearTimeout(page.timeout);
-                page.timeout = setTimeout(function() {
-                    $(".circular.link").each(function(i, element) {
-                        page.drawLogicalLine($("*[data-id="+$(element).data("src")+"]"), $(element), $(element).data("down")?"red":"green");
-                        page.drawLogicalLine($("*[data-id="+$(element).data("dst")+"]"), $(element), $(element).data("down")?"red":"green");
-                    });
-                    $("*[data-router]").each(function(i, element) {
-                        page.drawLogicalLine($(element), $("*[data-id="+$(element).data("router")+"]"));
-                    });
-                }, 500);
-            },
-            getLoaded: function(e) {
-                $(".selector.selected").removeClass("selected");
-                app.setAction();
-                page.data = fabricServices.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();
-                }       
-            },
-            clickEdit: function(e) {
-                var id = $(e.currentTarget).data("id");
-                if (id) page.edit(id);
-            },
-            edit: function(id) {
-                page.visualizing = true;
-                $("#Connectors").html("");
-                $("#SessionData").html("");
-                $("#ClientsData").html("");
-                page.reset();
-                var detail = fabricServices.details(id);
-                page.sessions = fabricSessions.getServiceSessions(id);
-                page.clients = fabricSessions.getClients(id);
-
-                if (page.sessions.length>0) {
-                    $("#ServiceName").html(detail.id);
-                    for (var i=0; i<page.sessions.length; i++) {
-                        var element = $("#SessionTemplate").clone();
-                        element.removeClass("template");
-                        element.attr("id","Row"+i);
-                        element.html(element.html().split("{{index}}").join(i));
-                        for (var prop in page.sessions[i]) element.html(element.html().split("{{"+prop+"}}").join(app.validate(page.sessions[i][prop])));
-                        var path = "";
-                        var col = 0;
-                        for (var j=0; j<page.sessions[i].circuit.path.length; j++) {
-                            path += '<div id="Item'+i+'_'+app.validate(page.sessions[i].circuit.path[j].split(' ').join(''))+'" data-row="'+i+'" data-column="'+(++col)+'" class="bubble to stats path'+i+'" data-type="path" data-index="'+i+'" data-id="'+app.validate(page.sessions[i].circuit.path[j])+'">'+app.validate(page.sessions[i].circuit.path[j])+'<div class="floater blacken"></div></div>';
-                            if (j<page.sessions[i].circuit.links.length) {
-                                path += '<div class="bubble small src" data-row="'+i+'" data-column="'+(++col)+'">'+page.getLatencySource(app.validate(page.sessions[i].circuit.links[j]))+' ms</div>';
-                                path += '<div id="Item'+i+'_'+page.sessions[i].circuit.links[j].split(' ').join('')+'" class="bubble stats link'+i+'" data-type="link" data-index="'+i+'" data-id="'+app.validate(page.sessions[i].circuit.links[j])+'">'+app.validate(page.sessions[i].circuit.links[j])+'<div class="floater"></div></div>';
-                                path += '<div class="bubble small dst" data-row="'+i+'" data-column="'+(++col)+'">'+page.getLatencyDestination(app.validate(page.sessions[i].circuit.links[j]))+' ms</div>';
-                            }
-                        }
-
-                        element.html(element.html().split("{{path}}").join(path));
-                        $("#SessionData").append(element);
-                    }
-                    for (var i=0; i<page.clients.length; i++) {
-                        var element = $("#ClientTemplate").clone();
-                        element.removeClass("template");
-                        element.attr("id","Row"+i);
-                        element.html(element.html().split("{{index}}").join(i));
-                        element.html(element.html().split("{{id}}").join(app.validate(page.clients[i])));
-                        $("#ClientsData").append(element);
-                    }
-                    //$(".stats").mouseover(page.stats);
-                    //$(".stats").mouseout(page.clear);
-
-                    page.editId = id;
-                    modal.show("VisualModal");
-                    setTimeout(page.doLines, 500);
-
-                } else {
-                    growler.info("No active sessions to display.")
-                }
-            },
-            doLines: function() {
-                $("#Connectors").html("");
-                var lastElem = $("#ServiceName");
-                for (var i=0; i<page.sessions.length; i++) {
-                    page.drawRightSideLine($("#ServiceName"), $(".tbl"+i+"_0"));
-                    lastElem = $(".tbl"+i+"_0");
-                    $(".paths"+i).find(".bubble").each(function(index, element) {
-                        if (!$(element).hasClass("small")) {
-                            if (index==0) page.drawLine(lastElem, $(element));
-                            else page.drawStraightLine(lastElem, $(element));
-                            lastElem = $(element);
-                        }
-                    });
-                    for (var j=0; j<page.clients.length; j++) {
-                        page.drawLeftSideLine(lastElem, $(".last"+j));
-                    }
-                }
-            },
-            getLatencySource: function(id) {
-                return (links.details(id).srcLatency*1000).toFixed(2)
-            },
-            getLatencyDestination: function(id) {
-                return (links.details(id).dstLatency*1000).toFixed(2)
-            },
-            clear: function() {
-                page.visualizing = false;
-                $("#Connectors").html("");
-                $(".using").removeClass("using");
-                $(".floater.open").removeClass("open");
-                $(".bubble.out").removeClass("out");
-                page.lined = false;
-            },
-            hovering: null,
-            lined: false,
-            stats: function(e) {
-                page.hovering = $(e.currentTarget);
-                $(".bubble").addClass("out");
-                $(e.currentTarget).addClass("using");
-                var index = $(e.currentTarget).data("index");
-                $(".bubble.row"+index).addClass("using");
-                $(".bubble.row"+index).removeClass("out");
-                page.drawRightSideLine($("#ServiceData"), $(".bubble.row"+index));
-                if ($(e.currentTarget).data("type")=="link") {
-                    $(".path"+index).each(function(i, element) {
-                        $(element).removeClass("out");
-                        $(element).addClass("using");
-                        var link = $(e.currentTarget).data("id");
-                        var id = $(element).data("id");
-                        var latency = new Series("link", link, "", "latency", id);
-                        context.addListener(id+".link."+link+".latency.average", page.statsLoaded);
-                        latency.getAverage();
-                    });
-                } else {
-                    $(".link"+index).each(function(i, element) {
-                        if (i==0) {
-                            page.drawLine($(".bubble.row"+index), page.hovering);
-                        }
-                        $(element).removeClass("out");
-                        $(element).addClass("using");
-                        var id = $(e.currentTarget).data("id");
-                        var link = $(element).data("id");
-                        var latency = new Series("link", link, "", "latency", id);
-                        context.addListener(id+".link."+link+".latency.average", page.statLoaded);
-                        latency.getAverage();
-                    });
-                }
-            },
-            statLoaded: function(e) {
-                var link = e.id.split('.')[2];
-                var id = e.id.split('.')[0];
-                var val = Number(e.data);
-                context.removeListener(e.id);
-                val = val*.0001;
-                if (isNaN(val)||Number(val)<=0) {
-                    $("*[data-id="+link+"]").addClass("out");
-                    $("*[data-id="+link+"]").removeClass("using");
-                } else {
-                    var floater = $("*[data-id="+link+"].using").find(".floater");
-                    floater.html(val.toFixed(0)+" ms");
-                    floater.addClass("open");
-
-                    var position = $("*[data-id="+id+"].using")[0].getBoundingClientRect();
-                    var x1 = position.left+15;
-                    var y1 = position.top+15;
-
-                    var position = floater[0].getBoundingClientRect();
-                    var x2 = position.left;
-                    var y2 = position.top+12;
-
-                    var html =  $("#Connectors").html();
-                    html += '<path d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1)+','+Math.ceil(y1+59)+' '+Math.ceil(x2)+','+Math.ceil(y2-59)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                    $("#Connectors").html(html);
-
-                    page.drawLeftSideLine(floater, $("#ClientsData"));
-                    console.log(html);
-                }
-            },
-            statsLoaded: function(e) {
-                var link = e.id.split('.')[2];
-                var id = e.id.split('.')[0];
-                var val = Number(e.data);
-                context.removeListener(e.id);
-                val = val*.0001;
-                if (isNaN(val)||Number(val)<=0) {
-                    $("*[data-id="+id+"].using").addClass("out");
-                    $("*[data-id="+id+"].using").removeClass("using");
-                } else {
-                    var index = $("*[data-id="+id+"].using").data("index");
-                    page.drawLine($(".bubble.row"+index), $("*[data-id="+id+"].using"));
-                    var floater = $("*[data-id="+id+"].using").find(".floater");
-                    floater.html(val.toFixed(0)+" ms");
-                    floater.addClass("open");
-
-                    var position = $("*[data-id="+link+"].using")[0].getBoundingClientRect();
-                    var x1 = position.left+15;
-                    var y1 = position.top+15;
-
-                    var position = floater[0].getBoundingClientRect();
-                    var x2 = position.left;
-                    var y2 = position.top+12;
-
-                    var html =  $("#Connectors").html();
-                    html += '<path class="black" d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1)+','+Math.ceil(y1+59)+' '+Math.ceil(x2)+','+Math.ceil(y2-59)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                    $("#Connectors").html(html);
-
-                    page.drawLeftSideLine(page.hovering, $("#ClientsData"), "black");
-                    console.log(html);
-                }
-            },
-            drawLine: function(from, to) {
-
-                var position = from[0].getBoundingClientRect();
-                var x1 = position.left+15;
-                var y1 = position.top+15;
-                
-                var position = to[0].getBoundingClientRect();
-                var x2 = position.left+15;
-                var y2 = position.top+15;
-                var from = 30;
-                var to = -30;
-
-                var servicePosition = $("#ServiceName")[0].getBoundingClientRect();
-                if (servicePosition.top>position.top) {
-                    from = -30;
-                    to = 30;
-                }
-
-                
-                var html =  $("#Connectors").html();
-                html += '<path d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1)+','+Math.ceil(y1+from)+' '+Math.ceil(x2)+','+Math.ceil(y2+to)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                $("#Connectors").html(html);
-            },
-            drawStraightLine: function(from, to) {
-
-                var position = from[0].getBoundingClientRect();
-                var x1 = position.left+15;
-                var y1 = position.top+15;
-                
-                var position = to[0].getBoundingClientRect();
-                var x2 = position.left+15;
-                var y2 = position.top+15;
-                
-                var html =  $("#Connectors").html();
-                html += '<path d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1)+','+Math.ceil(y1)+' '+Math.ceil(x2)+','+Math.ceil(y2)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                $("#Connectors").html(html);
-            },
-            drawLogicalLine: function(from, to, style) {
-
-                var position = from[0].getBoundingClientRect();
-                var x1 = position.left+20;
-                var y1 = position.top+position.height;
-                
-                var position = to[0].getBoundingClientRect();
-                var x2 = position.left+20;
-                var y2 = position.top;
-                
-                var html =  $("#LogicalConnectors").html();
-                html += '<path '+((style)?' class="'+style+'" ':'')+'d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1)+','+Math.ceil(y1+100)+' '+Math.ceil(x2)+','+Math.ceil(y2-100)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                $("#LogicalConnectors").html(html);
-            },
-            drawRightSideLine: function(from, to) {
-
-                var position = from[0].getBoundingClientRect();
-                var x1 = position.left+position.width;
-                var y1 = position.top+30;
-                
-                var position = to[0].getBoundingClientRect();
-                var x2 = position.left+15;
-                var y2 = position.top+15;
-                
-                var html =  $("#Connectors").html();
-                html += '<path d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1+59)+','+Math.ceil(y1)+' '+Math.ceil(x2-59)+','+Math.ceil(y2)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                $("#Connectors").html(html);
-            },
-            drawLeftSideLine: function(from, to, style) {
-
-                var position = from[0].getBoundingClientRect();
-                var x1 = position.left+position.width;
-                var y1 = position.top+15;
-                
-                var position = to[0].getBoundingClientRect();
-                var x2 = position.left;
-                var y2 = position.top+30;
-                
-                var html =  $("#Connectors").html();
-                html += '<path '+((style)?' class="'+style+'" ':'')+'d="M'+Math.ceil(x1)+','+Math.ceil(y1)+' C'+Math.ceil(x1+59)+','+Math.ceil(y1)+' '+Math.ceil(x2-59)+','+Math.ceil(y2)+' '+Math.ceil(x2)+','+Math.ceil(y2)+'"></path>';
-                $("#Connectors").html(html);
-            }
-        }     
-    </script>