@openziti/ziti-console-lib 0.3.0

package/assets/html/routers.htm

@@ -0,0 +1,323 @@
+    <!-- General Page Layout HTML -->    
+    <div class="header">
+        <div class="title">
+            <span data-i18n="Manage"></span>
+            <span data-i18n="EdgeRouters"></span>
+        </div>
+        <div class="bread">
+            <span data-i18n="ZitiNetwork"></span>
+            <span class="secondary">/</span>
+            <span data-i18n="Manage"></span>
+            <span data-i18n="EdgeRouters"></span>
+        </div>
+        {{html.line}}
+        {{html.tabRouters}}
+    </div>
+    {{html.add}}
+    {{html.search}}
+    <div class="area data" data-defined="table">
+        <div class="table">
+            <div class="head grid columns">
+                <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="OS"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop">
+                    <span data-i18n="RoleAttributes"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop sort" data-by="isVerified">
+                    <span data-i18n="Verified"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop">
+                    <span data-i18n="Online"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop sort" data-by="createdAt">
+                    <span data-i18n="Created"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop sort">
+                    <span data-i18n="Token"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop">
+                    <span data-i18n="JWT"></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="EdgeRouter"></span>
+        <span data-i18n="NoneDefined"></span>
+        <span data-i18n="EdgeRouter"></span>.
+    </div>
+
+
+
+    <!-- Template HTML will be used to display rows of data -->
+    <div id="RowTemplate" class="row grid columns template" data-defined="template">
+        <div class="col">
+            <div class="selector" data-id="{{id}}"></div>
+        </div>
+        <div class="col" data-id="{{id}}">
+            <span class="circle {{isOnline}}" title="Online"></span>
+            <span class="circle {{isVerified}}" title="Verified"></span>
+            <a href="javascript:page.edit('{{id}}');">{{name}}</a>
+        </div>
+        <div class="col desktop" data-id="{{id}}" style="overflow: unset;"><span class="os {{os}}" data-balloon-pos="up" aria-label="{{osDetails}}"></span></div>
+        <div class="col desktop" data-id="{{id}}">{{roles}}</div>
+        <div class="col desktop" data-id="{{id}}">{{isVerified}}</div>
+        <div class="col desktop" data-id="{{id}}">{{isOnline}}</div>
+        <div class="col desktop" data-id="{{id}}">{{moment.createdAt}}</div>
+        <div class="col desktop notitle">{{token}}</div>
+        <div class="col desktop notitle">{{tokenLink}}</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" data-i18n="Edit"></div>
+                    <div class="gridAction" data-id="{{id}}" data-action="delete" data-i18n="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="EdgeRouter"></span>
+            </div>
+            <div class="subtitle adding">
+                <span data-i18n="AddNew"></span>
+                <span data-i18n="EdgeRouter"></span>
+                <span data-i18n="ByComplete"></span>
+            </div>
+            <div class="title editing">
+                <span data-i18n="Edit"></span>
+                <span data-i18n="EdgeRouter"></span>
+            </div>
+            <div class="subtitle editing">
+                <span data-i18n="Change"></span>
+                <span data-i18n="EdgeRouter"></span>
+                <span data-i18n="Details"></span>
+            </div>
+
+            <div class="grid aside">
+                <div>
+                    <label for="Name" data-i18n="Name"></label>
+                    <input id="Name" data-bind="data.name" type="text" maxlength="500" data-i18n="EnterName" data-enter="SaveButton" />
+                </div>
+                <div>
+                    <label for="Cost" data-i18n="Cost"></label>
+                    <input id="Cost" data-bind="data.cost" type="number" />
+                </div>
+            </div>
+            <div class="grid split">
+                <div class="grid checkLabel">
+                    <div id="IsTunnelerEnabled" class="toggle" aria-label="Turn on to enable tunneler access" data-balloon-pos="right" data-balloon-length="large">
+                        <div class="switch"></div>
+                        <div class="label"></div>
+                    </div>
+                    <div class="toggleLabel" data-i18n="TunnellerEnabled"></div>
+                </div>
+                <div class="grid checkLabel">
+                    <div id="IsNoTraversal" class="toggle" aria-label="Turn on to prevent traversal" data-balloon-pos="right" data-balloon-length="large">
+                        <div class="switch"></div>
+                        <div class="label"></div>
+                    </div>
+                    <div class="toggleLabel" data-i18n="NoTraversal"></div>
+                </div>
+            </div>
+            <label for="Roles" data-i18n="RouterRoleAttributes"></label>
+            <div id="Roles"></div>
+            <label for="AppData" data-i18n="AppData"></label>
+            <textarea id="AppData"></textarea>
+            <div id="TagArea" data-tagarea="router"></div>
+            {{html.customtags}}
+            {{html.api}}
+            {{html.save}}
+        </div>
+	</div>
+
+    <style>
+        .CodeMirror {
+            height: 211px;
+        }
+        .grid.columns {
+	        grid-template-columns: 50px 200px 50px auto 100px 100px 15% 15% 60px 50px;
+        }
+    </style>
+     
+    
+    <script language="javascript" type="text/javascript">
+        page = {
+            filterObject: null,
+            roles: null,
+            appData: null,
+            apiParams: null,
+            init: function() {
+
+                page.roles = new MultiSelect("Roles",  10, true);
+                page.roles.addSource(new SelectSource("edge-router-role-attributes", "", "id")); 
+                page.roles.init();
+
+                page.filterObject = new Data("edge-routers");
+                page.filterObject.init(true, true);
+
+                page.appData = CodeMirror.fromTextArea(document.getElementById("AppData"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"} });                
+                page.appData.on('change', (args) => { 
+                    page.params(); 
+                });
+
+                page.apiParams = CodeMirror.fromTextArea(document.getElementById("ApiParams"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"}, readOnly: true });
+            }, 
+            row: function(template, data) {
+                var os = "other";
+                var osDetails = "";
+                if (data.versionInfo) {
+                    if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("darwin")>=0) os = "apple";
+                    else if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("linux")>=0) os = "linux";
+                    else if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("android")>=0) os = "android";
+                    else if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("windows")>=0) os = "windows";
+                    
+                    if (data.versionInfo.os) osDetails += "OS: "+data.versionInfo.os;
+                    if (data.versionInfo.arch) osDetails += "&#10;Arch: "+data.versionInfo.arch;
+                    if (data.versionInfo.buildDate) osDetails += "&#10;Build: "+moment(data.versionInfo.buildDate).format("MM/DD/YYYY");
+                    if (data.versionInfo.version) osDetails += "&#10;Version: "+data.versionInfo.version;
+                    if (data.versionInfo.revision) osDetails += "&#10;Release: "+data.versionInfo.revision;
+                }
+                if (osDetails.length==0) osDetails = "No Info Available";
+                template = template.split("{{os}}").join(os);
+                template = template.split("{{osDetails}}").join(osDetails);
+
+                var roles = "";
+                if (data.roleAttributes && data.roleAttributes.length>0) {
+                    for (let i=0; i<data.roleAttributes.length; i++) {
+                        roles += ((i>0)?",":"")+'<div class="hashtag">'+data.roleAttributes[i]+'</div>';
+                    }
+                } else roles = "-";
+                template = template.split("{{roles}}").join(roles);
+
+                var enrollment = "N/A";
+                var token = "-";
+                if (data.enrollmentJwt) {
+                    if (data.enrollmentExpiresAt!=null) {
+                        var difference = moment(data.enrollmentExpiresAt).diff(moment());
+                        if (difference>0) enrollment = '<span class="cert" data-id="'+data.id+'"></span>';
+                        token = data.enrollmentToken;
+                    } else {
+                        enrollment = '<span class="cert" data-id="'+data.id+'"></span>';
+                        token = data.enrollmentToken;
+                    }
+                } 
+
+                template = template.split("{{token}}").join(token);
+                template = template.split("{{tokenLink}}").join(enrollment);
+                return template;
+            },
+            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.roles.val(detail.roleAttributes);
+                if (detail.isTunnelerEnabled) $("#IsTunnelerEnabled").addClass("on");
+                else $("#IsTunnelerEnabled").removeClass("on");
+                if (detail.noTraversal) $("#IsNoTraversal").addClass("on");
+                else $("#IsNoTraversal").removeClass("on");
+                var appData = JSON.stringify(detail.appData);
+                if (appData.length>0) {
+                    page.appData.setValue(appData);
+                    page.appData.autoFormatRange({line:0, ch:0}, {line:page.appData.lineCount()});
+                }
+                page.params();
+                modal.show("AddModal");
+            },
+            formReset: function() {
+                page.params();
+            },
+            save: function() {
+                if (page.validate()) {
+                    var obj = page.params();
+                    page.filterObject.save(obj);
+                } else growler.form();
+            },
+            params: function() {
+                try {  
+                    var obj = {
+                        name: $("#Name").val(),
+                        roleAttributes: page.roles.val(),
+                        appData: JSON.parse(page.appData.getValue()),
+                        isTunnelerEnabled: $("#IsTunnelerEnabled").hasClass("on"),
+                        noTraversal: $("#IsNoTraversal").hasClass("on"),
+                        cost: Number($("#Cost").val()),
+                        tags: tags.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");
+                return $(".errors").length==0;
+            },
+            reset: function() {
+                var appData = {};
+                page.appData.setValue(JSON.stringify(appData));
+                page.appData.autoFormatRange({line:0, ch:0}, {line:page.appData.lineCount()});
+                $("#IsTunnelerEnabled").addClass("on");
+                $("#Cost").val("");
+            }, 
+            loaded: function() {
+                $(".cert").click(page.getCert);
+            },
+            getCert: function(e) {
+                var id = $(e.currentTarget).data("id");
+                var data = page.filterObject.details(id);
+                if (data && data.enrollmentJwt) {
+                    var name = data.name.split(" ").join("");
+                    var element = document.createElement('a');
+                    element.setAttribute('href', 'data:application/ziti-jwt;charset=utf-8,' + encodeURIComponent(data.enrollmentJwt));
+                    element.setAttribute('download', name+".jwt");
+                    element.style.display = 'none';
+                    document.body.appendChild(element);
+                    element.click();
+                    document.body.removeChild(element);
+                }
+            }
+        }
+    </script>

package/assets/html/servers.htm

@@ -0,0 +1,236 @@
+<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>
+        {{html.line}}
+        {{html.tabServers}}
+    </div>
+    <div class="action icon-plus" data-action="add"></div>
+    <div class="area data">
+        <div class="noitems"></div>
+        <div class="table">
+            <div class="head grid floor">
+                <div class="col padCol asc">Name<div class="dragger"></div></div>
+                <div class="col">Url<div class="dragger"></div></div>
+                <div class="col desktop">Type<div class="dragger"></div></div>
+                <div class="col"></div>
+            </div>
+            <div class="rows">
+                <!-- This area will be replaced by data rows -->
+            </div>
+        </div>
+    </div>
+    <div class="pod hasFabrics">
+        <div class="title">Fabric Server</div>
+        <div class="subtitle">Select the fabric server to use with the current session</div>
+        <select id="FabricServicesList"></select>
+    </div>
+    
+    <!-- Row Template -->
+    <div id="RowTemplate" class="row grid floor template">
+        <div class="col padCol" data-id="{{id}}"><a href="javascript:page.edit('{{id}}');">{{name}}</a></div>
+        <div class="col" data-id="{{id}}">{{url}}</div>
+        <div class="col desktop" data-id="{{id}}">{{type}}</div>
+        <div class="col allowOver">
+            <div class="dots {{isMe}}" 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">Create <span data-bind="singular"></span></div>
+            <div class="subtitle adding">Add a New <span data-bind="singular"></span> by completing the following form</div>
+            <div class="title editing">Edit <span data-bind="singular"></span></div>
+            <div class="subtitle editing">Change the <span data-bind="singular"></span> Details</div>
+            <label for="ServerName">Name</label>
+            <input id="ServerName" type="text" maxlength="500" placeholder="Enter a name to display" />
+            <label for="ServerUrl">Url</label>
+            <input id="ServerUrl" type="text" maxlength="500" placeholder="e.g. http://10.0.0.1:1280" />
+            <label for="ServerType">Type</label>
+            <select id="ServerType">
+                <option value="edge">Edge Controller</option>
+            </select>
+            <div class="buttons">
+                <div class="linkButton closer">Oops, No get me out of here</div>
+                <div id="SaveButton" class="button">Save</div>
+            </div>
+        </div>
+    </div>
+    <style>
+    .hasFabrics {
+        display: none;
+    }
+    .hasFabrics.has {
+        display: inline-block;
+    }
+    </style>
+    <script language="javascript" type="text/javascript">
+        page = {
+            binding: {
+                pageTitle: "Servers",
+                singular: "Server"
+            },
+            editId: "",
+            data: [],
+            deleting: "",
+            init: function() {
+                this.events();
+                settings.init();
+            },
+            events: function() {
+                context.addListener(settings.name, page.getLoaded);
+                $(".action").click(page.handleAction);
+                $("#SaveButton").click(page.save);        
+                $("#FabricServicesList").change(page.setFabric);
+            },
+            setFabric: function(e) {
+                context.set("fabricUrl", $("#FabricServicesList").val());
+            },
+            getLoaded: function(e) {
+                $(".selector.selected").removeClass("selected");
+                app.setAction();
+                page.data = settings.data;
+                $(".rows").html("");
+                if (settings.data.edgeControllers.length>0||settings.data.fabricControllers.length>0) {
+                    var index = 0;
+                    for (var i=0; i<settings.data.edgeControllers.length; i++) {
+                        var element = $("#RowTemplate").clone();
+                        element.removeClass("template");
+                        element.attr("id","Row"+index);
+                        element.html(element.html().split("{{id}}").join(app.validate(settings.data.edgeControllers[i].url)));
+                        element.html(element.html().split("{{name}}").join(app.validate(settings.data.edgeControllers[i].name)));
+                        element.html(element.html().split("{{url}}").join(app.validate(settings.data.edgeControllers[i].url)));
+                        element.html(element.html().split("{{type}}").join("Edge"));
+                        $(".rows").append(element);
+                        index++;
+                    }
+                    $("#FabricServicesList").html("");
+                    page.pageLoaded();     
+                    $(".data").show();
+                    $(".nodata").hide();       
+                } else {
+                    $(".data").hide();
+                    $(".nodata").show();
+                }       
+            },
+            pageLoaded: function() {
+                $(".gridAction").click(page.gridAction);
+                $(".clickEdit").click(page.clickEdit);
+                app.postLoad();
+            },
+            toggleList: function() {
+                if ($("#Objects").val()=="all") {
+                    $("#ObjectsList").hide();
+                } else {
+                    $("#ObjectsList").show();
+                }
+            },
+            gridAction: function(e) {
+                var action = $(e.currentTarget).data("action");
+                var id = $(e.currentTarget).data("id");
+
+                var canProceed = true;
+			    if (settings.versionData.requireAuth) canProceed = settings.versionData.baseUrl==id;
+
+                if (canProceed) {
+                    if (action=="edit") page.edit(id);
+                    else if (action=="delete")  {
+                        page.deleting = id;
+                        modal.confirm("you want to delete this "+page.binding.singular, page.confirmedDelete);
+                    }
+                } else growler.error("You can only change edge controllers you have authenticated against.")
+            },
+            save: function() {
+                if (page.validate()) {
+                    if ($("#ServerType").val()=="edge") {
+                        settings.addContoller($("#ServerName").val(), $("#ServerUrl").val());
+                    } else {
+                        settings.addFabric($("#ServerName").val(), $("#ServerUrl").val());
+                    }
+                    modal.close();
+                } else growler.form();
+            },
+            edit: function(id) {
+                page.reset();
+
+                var name = "";
+                var url = "";
+                var type = ""; 
+
+                var found = false;
+
+                for (var i=0; i<settings.data.edgeControllers.length; i++) {
+                    if (settings.data.edgeControllers[i].url==id) {
+                        name = settings.data.edgeControllers[i].name;
+                        url = settings.data.edgeControllers[i].url;
+                        type = "edge";
+                        found = true;
+                    }
+                }
+                if (!found) {
+                    for (var i=0; i<settings.data.fabricControllers.length; i++) {
+                        if (settings.data.fabricControllers[i].url==id) {
+                            name = settings.data.fabricControllers[i].name;
+                            url = settings.data.fabricControllers[i].url;
+                            type = "fabric";
+                            found = true;
+                        }
+                    }
+                }
+
+                if (found) {
+                    $("#ServerName").val(name);
+                    $("#ServerUrl").val(url);
+                    $("#ServerType").val(type);
+                    $("#ServerUrl").prop("readonly", true);
+
+                    $(".adding").hide();
+                    $(".editing").show();
+        
+                    page.editId = url;
+                    modal.show("AddModal");
+                }
+            },
+            validate: function() {
+                $(".errors").removeClass("errors");
+                if ($("#ServerName").val().trim().length==0) $("#ServerName").addClass("errors");
+                if ($("#ServerUrl").val().trim().length==0) $("#ServerUrl").addClass("errors");
+                return $(".errors").length==0;
+            },        
+            reset: function() {
+                app.isDirty = false;
+                page.editId = "";
+                $("#ServerName").val("");
+                $("#ServerUrl").val("");
+                $("#ServerType").val("edge");
+                $("#ServerUrl").prop("readonly", false);
+            },
+            handleAction: function(e) {
+                var action = $(e.currentTarget).data("action");
+                if (action=="add") {
+                    page.reset();
+                    page.add();
+                } else if (action=="remove") page.deleteMulti();
+            },
+            confirmedDelete: function() {
+                settings.delete(page.deleting);
+                app.reset();
+            },
+            clickEdit: function(e) {
+                var id = $(e.currentTarget).data("id");
+                if (id) page.edit(id);
+            },
+            add: function() {
+                $(".adding").show();
+                $(".editing").hide();
+                modal.show("AddModal");
+            }
+        }
+    </script>