@openziti/ziti-console-lib 0.3.0

package/assets/scripts/components/uploader.js

@@ -0,0 +1,74 @@
+/*
+Copyright 2020 NetFoundry, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+https://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var uploader = {
+	id: "",
+    bar: "",
+    init: function() {
+        uploader.events();
+    },
+    events: function() {
+        $(".upload").click(uploader.select);
+		$(".uploadSelector").change(uploader.selected);
+    },
+    select: function(e) {
+        var id = $(e.currentTarget).data("id");
+        $("#Tag_"+id+"_SelectFile").click();
+    },
+    selected: function(e) {
+        var fileField = $(e.currentTarget);
+        if (fileField.val().trim().length>0) {
+            uploader.upload(fileField.prop("id"), fileField.data("id"));
+        }
+    },
+	upload: function(id, resource) {
+		uploader.id = id;
+		uploader.bar = resource;
+		$("#Progress_"+resource+".progress").css("width", "1px");
+		$("#Progress_"+resource).addClass("uploading");
+		var fd = new FormData();
+		var files = document.getElementById(id).files;
+		if (files.length>0) {
+            fd.append("image", files[0]);
+            fd.append("resource", resource);
+			var xhr = new XMLHttpRequest();
+			xhr.upload.addEventListener("progress", this.progress, false);
+			xhr.addEventListener("load", this.complete, false);
+			xhr.addEventListener("error", this.error, false);
+			xhr.addEventListener("abort", this.cancel, false);
+			xhr.open("POST", "/api/upload");
+			xhr.send(fd);
+		}
+	},
+	progress: function(evt) {
+		if (evt.lengthComputable) {
+			var percentComplete = Math.round(evt.loaded*100/evt.total);
+			$("#Progress_"+uploader.bar+".progress").css("width",percentComplete+"%");
+		}
+	},
+	complete: function(evt) {
+        uploader.close();
+        resources.get(uploader.bar);
+        tags.doSelect(uploader.bar, evt.currentTarget.responseText);
+	},
+	error: function(evt) {
+		growler.error("Problem Uploading Image");
+		uploader.close();
+	},
+	cancel: function(evt) {
+		uploader.close();
+	},
+	close: function() {
+		$("#Progress_"+uploader.bar+".progress").css("width", "0px");
+		$("#Progress_"+uploader.bar).removeClass("uploading");
+	}
+}

package/assets/scripts/context.js

@@ -0,0 +1,177 @@
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+
+var cookies = {
+	get: function(id) {
+		var cname = id+"=";
+		var ca = document.cookie.split(';');
+		for (var i=0; i < ca.length; i++) {
+			var c = ca[i];
+			while (c.charAt(0)==' ') c = c.substring(1,c.length);
+			if (c.indexOf(cname) == 0) {
+				return c.substring(cname.length, c.length);
+			}
+		}
+		return null;
+	},
+	remove: function(id) {
+  		document.cookie = id+'=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+	},
+	set: function(id, val) {
+    	document.cookie = id+"="+val+"; path=/";
+	},
+	setObject: function(id, obj) {
+		cookies.set(id, JSON.stringify(obj));
+	},
+	getObject: function(id) {
+		try {
+			return JSON.parse(cookies.get(id));
+		} catch (e) {
+			return "";
+		}
+	}
+}
+
+var context = {
+	ns: "ziti",
+	items: [],
+	watchers: [],
+	eventWatchers: [],
+	init: function(ns) {
+		if (ns) context.ns = ns;
+		context.poll();
+		setInterval(context.poll, 1000);
+	},
+	remove: function(id) {
+		var keys = "";
+		var index = 0;
+		for (var key in context.items) {
+			if (key!=id) {
+				keys += ((index>0)?",":"")+key;
+				index++;
+			}
+		}
+		context.items[id] = null;
+		localStorage.setItem(context.ns+"-context", keys);
+		localStorage.removeItem(context.ns+"-"+id+"-value");
+		localStorage.removeItem(context.ns+"-"+id+"-updated");
+	},
+	set: function(id, obj) {
+		context.items[id] = {
+			time: (new Date()).getTime(),
+			data: obj
+		}
+		var keys = "";
+		var index = 0;
+		for (var key in context.items) {
+			keys += ((index>0)?",":"")+key;
+			index++;
+		}
+		localStorage.setItem(context.ns+"-context", keys);
+		localStorage.setItem(context.ns+"-"+id+"-value", JSON.stringify(context.items[id]));
+		context.update(id, obj);
+	},
+	get: function(id) {
+		context.poll();
+		var val = "";
+		if (context.items[id]&&context.items[id].data) val = context.items[id].data;
+		return val;
+	},
+	update: function(id, obj) {
+		if (context.watchers[id]&&obj!=null) {
+			var calls = context.watchers[id];
+			for (var i=0; i<calls.length; i++) {
+				try {
+					calls[i]({ id: id, data: obj });
+				} catch (e) {
+				}
+			}
+		}
+		$("*[data-context^='"+id+"']").each(function(index, element) {
+            var propName = $(element).attr("data-context");
+            var propTo = $(element).attr("data-contextSet");
+			var val = "";
+			var propTree = propName.split('.');
+			var obj = context.items[propTree[0]].data;
+			var index = 1;
+			while (index<propTree.length) obj = obj[propTree[index++]];
+           });
+		$("*[data-context='"+id+"']").each(function(index, element) {
+            var propName = $(element).attr("data-context");
+			val = context.items[id].data;
+			context.assign($(element), val);
+        });
+	},
+	addListener: function(id, func) {
+		if (!context.watchers[id]) context.watchers[id] = [];
+		context.watchers[id].push(func);
+	},
+	addEventListener: function(id, func) {
+		if (!context.eventWatchers[id]) context.eventWatchers[id] = [];
+		context.eventWatchers[id].push(func);
+	},
+	removeListener: function(id) {
+		context.watchers[id] = [];
+	},
+	fire: function(id, obj) {
+		if (context.eventWatchers[id]) {
+			var events = context.eventWatchers[id];
+			for (var i=0; i<events.length; i++) {
+				events[i].call(obj);
+			}
+		}
+	},
+	poll: function() {
+		var contextData = localStorage.getItem(context.ns+"-context");
+		if (contextData) {
+			var keys = contextData.split(',');
+			for (var i=0; i<keys.length; i++) {
+				var key = keys[i];
+				var val = {};
+				var obj = JSON.parse(localStorage.getItem(context.ns+"-"+key+"-value"));
+				if (obj) {
+					var lastUpdates = obj.time;
+					val = obj.data;
+					if (!context.items[key]) {
+						context.items[key] = obj;
+						context.update(key, context.items[key].data);
+					} else {
+						if (!isNaN(lastUpdates)) {
+							if (Number(lastUpdates)>context.items[key].time) {
+								context.items[key].time = Number(lastUpdates);
+								context.items[key].data = val;
+								context.update(key, context.items[key].data);
+							}
+						}
+					}
+				}
+			}
+		}
+	},
+	assign: function(element, val, what) {
+		if (what) {
+			if (what.toLowerCase()=="background-image") $(element).css(what, "url("+val+")");
+			else $(element).css(what, val);
+		} else {
+			if (element.is("input")) element.val(val);
+			else if (element.is("div")) element.html(val);
+			else if (element.is("span")) element.html(val);
+			else if (element.is("video")) element.attr("src", val);
+			else element.html(val);
+		}
+	}
+}

package/assets/scripts/dragging.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2020 NetFoundry, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+https://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var dragging = {
+	dragColumn: -1,
+	dragStyle: "",
+	dragWidth: 0,
+	startX: 0,
+	currentX: 0,
+	dragItem: null,
+	dragClass: "",
+    init: function() {
+		$(".dragger").mousedown(dragging.dragWhat);
+		$(document).mouseup(dragging.dragOff);
+		$(document).mousemove(dragging.dragging);
+    },
+	dragging: function(e) {
+		if (dragging.dragColumn>0) {
+			dragging.currentX = e.clientX;
+			var difference = dragging.startX - dragging.currentX;
+			var size = dragging.dragWidth+(difference*-1);
+			if (size>40) {
+				var items = dragging.dragStyle.split(' ');
+				var newStyle = "";
+				for (var i=0; i<items.length; i++) {
+					if (i==dragging.dragColumn) newStyle += size+"px ";
+					else if (i==dragging.dragColumn+1) newStyle += "auto ";
+					else newStyle += items[i]+" ";
+				}
+				var classes = dragging.dragClass.split(" ");
+				$("."+classes[1]+"."+classes[2]).css("grid-template-columns",newStyle);
+			}
+		}
+	},
+	dragWhat: function(e) {
+		var dragger = $(e.currentTarget);
+		var pos = dragger.parent().index();
+		dragging.dragStyle = dragger.parent().parent().css("grid-template-columns");
+		dragging.dragClass = dragger.parent().parent().attr('class');
+		dragging.dragColumn = pos;
+		dragging.dragItem = dragger.parent();
+		dragging.dragWidth = dragger.parent().width();
+		dragging.startX = e.clientX;
+		dragging.currentX = e.clientX;
+	},
+	dragOff: function() {
+		dragging.dragColumn = -1;
+	}
+}

package/assets/scripts/forms/forms.js

@@ -0,0 +1,74 @@
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+
+var forms = {};
+
+function exists() {
+    return this!=null&&this.trim().length>0;
+}
+
+String.prototype.exists = exists;
+
+function FormItem(id, label, validation, type, properties, data) {
+    this.id = id;
+    this.label = label;
+    this.validation = validation;
+    this.type = type;
+    this.properties = properties;
+    this.data = data;
+}
+
+forms.renderItem = function(obj) {
+    var html = '';
+    if (obj.label.exists()) html += '<label for="'+id+'">'+label+'</label>';
+    if (obj.type=="input") {
+        html += '<input id="'+obj.id+'" type="text"';
+        foreach (key in obj.properties) {
+            html += ' '+key+'="'+properties[key]+'"';
+        }
+        if (obj.data.exists()) html += ' value="'+data+'"';
+        html += '/>';
+    } else if (obj.type=="textarea") {
+        html += '<textarea id="'+obj.id+'"';
+        foreach (key in obj.properties) {
+            html += ' '+key+'="'+properties[key]+'"';
+        }
+        html += '>';
+        if (obj.data.exists()) html += data;
+        html += '</textarea>';
+    }
+    return html;
+}
+
+forms.configType  = {
+    form: [
+        FormItem("TypeName", "Type Name", "input", "notempty", {
+            type: "text",
+            maxLength: 500,
+            placeholder: "name the configuration type",
+        }),
+        FormItem("Schema", "Schema", "textarea", "notempty", {})
+    ],
+    inject: function(id) {
+        var html = ''
+        var items = forms.configType.form;
+        for (var i=0; i<items.length; i++) {
+            html += this.form.renderItem(items[i]);
+        }
+        $("#"+id).html(html);[]
+    }
+}

package/assets/scripts/forms/host.v1.htm

@@ -0,0 +1,43 @@
+<div class="grid address">
+    <div>
+        <label for="Protocol">Protocol</label>
+        <select id="Protocol" data-bind="data.protocol">
+            <option value="tcp">tcp</option>
+            <option value="udp">tcp</option>
+            <option value="stcp">stcp</option>
+        </select>
+    </div>
+    <div>
+        <label for="Address">Address</label>
+        <input id="Address" type="text" data-bind="data.address" />
+    </div>
+    <div>
+        <label for="Port">Port</label>
+        <input id="Port" type="number" data-bind="data.port" />
+    </div>
+</div>
+<label>Dial Intercept</label>
+<div class="subForm">
+    <div class="grid three">
+        <div>
+            <label for="DialInterceptAddress">Address</label>
+            <div id="DialInterceptAddress" class="toggle on"><div class="switch"></div><div class="label"></div></div>
+        </div>
+        <div>
+            <label for="DialInterceptPort">Port</label>
+            <div id="DialInterceptPort" class="toggle on"><div class="switch"></div><div class="label"></div></div>
+        </div>
+        <div>
+            <label for="DialInterceptProtocol">Protocol</label>
+            <div id="DialInterceptProtocol" class="toggle on"><div class="switch"></div><div class="label"></div></div>
+        </div>
+    </div>
+</div>
+<label>Listen Options</label>
+<div class="subForm">
+    <label for="BingUsingId">Bind Using Identity</label>
+    <div class="grid onoff">
+        <div id="BingUsingIdSwitch" class="toggle"><div class="switch"></div><div class="label"></div></div>
+        <input id="BingUsingId" type="text" data-type="typeahead" data-objects="identity" disabled/>
+    </div>
+</div>