@openziti/ziti-console-lib 0.3.0

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

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