summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam Ierymenko <adam.ierymenko@gmail.com>2015-05-08 10:03:35 -0700
committerAdam Ierymenko <adam.ierymenko@gmail.com>2015-05-08 10:03:35 -0700
commitbd2ce82ea627f7b147a04242c3f7c40d5f6c33ed (patch)
tree878a20580cf3d12145900068bcdab8eb13a1d508
parenta4a62be6987142763b1800873bb5ead1b6e9691f (diff)
downloadinfinitytier-bd2ce82ea627f7b147a04242c3f7c40d5f6c33ed.tar.gz
infinitytier-bd2ce82ea627f7b147a04242c3f7c40d5f6c33ed.zip
Minify JS in UI, add Makefile.
Diffstat
-rwxr-xr-x.gitignore1
-rw-r--r--ui/Makefile5
-rw-r--r--ui/ZeroTierNetwork.jsx2
-rw-r--r--ui/ZeroTierNode.jsx10
-rw-r--r--ui/index.html20
-rw-r--r--ui/main.js (renamed from ui/main.jsx)2
-rw-r--r--ui/ztui.min.js2
7 files changed, 21 insertions, 21 deletions
diff --git a/.gitignore b/.gitignore
index 4a24c4db..c076c26f 100755
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@
/root-topology/test/supernodes
/root-topology/test/test-root-topology
/ext/mac-ui-macgap1-wrapper/MacGap.xcodeproj/project.xcworkspace/xcuserdata/*
+/ui/.module-cache
diff --git a/ui/Makefile b/ui/Makefile
new file mode 100644
index 00000000..48b4446d
--- /dev/null
+++ b/ui/Makefile
@@ -0,0 +1,5 @@
+all:
+ mkdir -p build
+ jsx --target es3 -x jsx . ./build
+ minify build/*.js >>ztui.min.js
+ rm -rf build
diff --git a/ui/ZeroTierNetwork.jsx b/ui/ZeroTierNetwork.jsx
index d9c384f4..1dda1117 100644
--- a/ui/ZeroTierNetwork.jsx
+++ b/ui/ZeroTierNetwork.jsx
@@ -60,7 +60,7 @@ var ZeroTierNetwork = React.createClass({
{
this.props['assignedAddresses'].map(function(ipAssignment) {
return (
- <div className="ipAddress">{ipAssignment}</div>
+ <div key={ipAssignment} className="ipAddress">{ipAssignment}</div>
);
})
}
diff --git a/ui/ZeroTierNode.jsx b/ui/ZeroTierNode.jsx
index 30817b41..3782219e 100644
--- a/ui/ZeroTierNode.jsx
+++ b/ui/ZeroTierNode.jsx
@@ -144,8 +144,8 @@ var ZeroTierNode = React.createClass({
<div className="middleScroll">
{
(this.tabIndex === 1) ? (
- <div className="peers">
- <div className="peerHeader">
+ <div className="peers" key="_peers">
+ <div className="peerHeader" key="_peersHeader">
<div className="f">Address</div>
<div className="f">Version</div>
<div className="f">Latency</div>
@@ -156,7 +156,7 @@ var ZeroTierNode = React.createClass({
{
this.state._peers.map(function(peer) {
return (
- <div className="peer">
+ <div className="peer" key={peer['address']}>
<div className="f zeroTierAddress">{peer['address']}</div>
<div className="f">{(peer['version'] === '-1.-1.-1') ? '-' : peer['version']}</div>
<div className="f">{peer['latency']}</div>
@@ -186,12 +186,12 @@ var ZeroTierNode = React.createClass({
}
</div>
) : (
- <div className="networks">
+ <div className="networks" key="_networks">
{
this.state._networks.map(function(network) {
network['authToken'] = this.props.authToken;
network['onNetworkDeleted'] = this.handleNetworkDelete;
- return React.createElement('div',{className: 'network'},React.createElement(ZeroTierNetwork,network));
+ return React.createElement('div',{className: 'network',key: network.nwid},React.createElement(ZeroTierNetwork,network));
}.bind(this))
}
</div>
diff --git a/ui/index.html b/ui/index.html
index fde06f93..e0f048b0 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -2,23 +2,15 @@
<html lang="en">
<head>
<title>ZeroTier One</title>
- <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <!--
- <link rel="stylesheet" href="bootstrap.min.css">
- <link rel="stylesheet" href="bootstrap-theme.min.css">
- -->
<link rel="stylesheet" href="zerotier.css">
-
<script src="simpleajax.min.js"></script>
+ <!-- <script src="https://fb.me/react-0.13.2.js"></script> -->
<script src="react.min.js"></script>
-
- <script src="ZeroTierNetwork.js"></script>
- <script src="ZeroTierNode.js"></script>
-
- <script src="main.js"></script>
+ <script src="ztui.min.js"></script>
</head>
-<body>
-<div style="width: 100%; height: 100%;" id="main"></div>
-</body>
+<body><div style="width: 100%; height: 100%;" id="main"></div></body>
+<script src="main.js"></script>
</html>
diff --git a/ui/main.jsx b/ui/main.js
index aa4c8bf1..a1647127 100644
--- a/ui/main.jsx
+++ b/ui/main.js
@@ -46,6 +46,6 @@ if ((!ztAuthToken)||(ztAuthToken.length <= 0)) {
}
React.render(
- <ZeroTierNode authToken={ztAuthToken} />,
+ React.createElement(ZeroTierNode, {authToken: ztAuthToken}),
document.getElementById('main')
);
diff --git a/ui/ztui.min.js b/ui/ztui.min.js
new file mode 100644
index 00000000..3033df6f
--- /dev/null
+++ b/ui/ztui.min.js
@@ -0,0 +1,2 @@
+var ZeroTierNetwork=React.createClass({displayName:"ZeroTierNetwork",getInitialState:function(){return{}},leaveNetwork:function(e){Ajax.call({url:"network/"+this.props.nwid+"?auth="+this.props.authToken,cache:!1,type:"DELETE",success:function(e){this.props.onNetworkDeleted&&this.props.onNetworkDeleted(this.props.nwid)}.bind(this),error:function(e){}.bind(this)}),e.preventDefault()},render:function(){return React.createElement("div",{className:"zeroTierNetwork"},React.createElement("div",{className:"networkInfo"},React.createElement("span",{className:"networkId"},this.props.nwid)," ",React.createElement("span",{className:"networkName"},this.props.name)),React.createElement("div",{className:"networkProps"},React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Status"),React.createElement("div",{className:"value"},this.props.status)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Type"),React.createElement("div",{className:"value"},this.props.type)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"MAC"),React.createElement("div",{className:"value zeroTierAddress"},this.props.mac)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"MTU"),React.createElement("div",{className:"value"},this.props.mtu)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Broadcast"),React.createElement("div",{className:"value"},this.props.broadcastEnabled?"ENABLED":"DISABLED")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Bridging"),React.createElement("div",{className:"value"},this.props.bridge?"ACTIVE":"DISABLED")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Device"),React.createElement("div",{className:"value"},this.props.portDeviceName?this.props.portDeviceName:"(none)")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Managed IPs"),React.createElement("div",{className:"value ipList"},this.props.assignedAddresses.map(function(e){return React.createElement("div",{key:e,className:"ipAddress"},e)})))),React.createElement("button",{className:"leaveNetworkButton",onClick:this.leaveNetwork},"Leave Network"))}}); var ZeroTierNode=React.createClass({displayName:"ZeroTierNode",getInitialState:function(){return{address:"----------",online:!1,version:"_._._",_networks:[],_peers:[]}},ago:function(e){if(e>0){var t=Math.round((Date.now()-e)/1e3);return t>0?t:0}return 0},updatePeers:function(){Ajax.call({url:"peer?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_peers:t})}}.bind(this),error:function(){}.bind(this)})},updateNetworks:function(){Ajax.call({url:"network?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_networks:t})}}.bind(this),error:function(){}.bind(this)})},updateAll:function(){Ajax.call({url:"status?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(this.alertedToFailure=!1,e){var t=JSON.parse(e);this.setState(t),document.title="ZeroTier One ["+t.address+"]"}this.updateNetworks(),this.updatePeers()}.bind(this),error:function(){this.setState(this.getInitialState()),this.alertedToFailure||(this.alertedToFailure=!0,alert("Authorization token invalid or ZeroTier One service not running."))}.bind(this)})},joinNetwork:function(e){e.preventDefault(),this.networkToJoin&&16===this.networkToJoin.length?Ajax.call({url:"network/"+this.networkToJoin+"?auth="+this.props.authToken,cache:!1,type:"POST",success:function(e){this.networkToJoin="",this.networkInputElement&&(this.networkInputElement.value=""),this.updateNetworks()}.bind(this),error:function(){}.bind(this)}):alert("To join a network, enter its 16-digit network ID.")},handleNetworkIdEntry:function(e){this.networkInputElement=e.target;var t=e.target.value;if(t){t=t.toLowerCase();for(var a="",s=0;s<t.length&&16>s;++s)"0123456789abcdef".indexOf(t.charAt(s))>=0&&(a+=t.charAt(s));this.networkToJoin=a,e.target.value=a}else this.networkToJoin="",e.target.value=""},handleNetworkDelete:function(e){for(var t=[],a=0;a<this.state._networks.length;++a)this.state._networks[a].nwid!==e&&t.push(this.state._networks[a]);this.setState({_networks:t})},componentDidMount:function(){this.tabIndex=0,this.updateAll(),this.updateIntervalId=setInterval(this.updateAll,2500)},componentWillUnmount:function(){clearInterval(this.updateIntervalId)},render:function(){return React.createElement("div",{className:"zeroTierNode"},React.createElement("div",{className:"top"},"  ",React.createElement("button",{disabled:0===this.tabIndex,onClick:function(){this.tabIndex=0,this.forceUpdate()}.bind(this)},"Networks"),React.createElement("button",{disabled:1===this.tabIndex,onClick:function(){this.tabIndex=1,this.forceUpdate()}.bind(this)},"Peers"),React.createElement("div",{className:"logo"},"⏁ ")),React.createElement("div",{className:"middle"},React.createElement("div",{className:"middleScroll"},1===this.tabIndex?React.createElement("div",{className:"peers",key:"_peers"},React.createElement("div",{className:"peerHeader",key:"_peersHeader"},React.createElement("div",{className:"f"},"Address"),React.createElement("div",{className:"f"},"Version"),React.createElement("div",{className:"f"},"Latency"),React.createElement("div",{className:"f"},"Data Paths"),React.createElement("div",{className:"f"},"Last Frame"),React.createElement("div",{className:"f"},"Role")),this.state._peers.map(function(e){return React.createElement("div",{className:"peer",key:e.address},React.createElement("div",{className:"f zeroTierAddress"},e.address),React.createElement("div",{className:"f"},"-1.-1.-1"===e.version?"-":e.version),React.createElement("div",{className:"f"},e.latency),React.createElement("div",{className:"f"},0===e.paths.length?React.createElement("div",{className:"peerPath"}):React.createElement("div",null,e.paths.map(function(e){var t=e.active||e.fixed?e.preferred?"peerPathPreferred":"peerPathActive":"peerPathInactive";return React.createElement("div",{className:t},e.address,"  ",this.ago(e.lastSend),"/",this.ago(e.lastReceive))}.bind(this)))),React.createElement("div",{className:"f"},this.ago(e.lastUnicastFrame)),React.createElement("div",{className:"f"},e.role))}.bind(this))):React.createElement("div",{className:"networks",key:"_networks"},this.state._networks.map(function(e){return e.authToken=this.props.authToken,e.onNetworkDeleted=this.handleNetworkDelete,React.createElement("div",{className:"network",key:e.nwid},React.createElement(ZeroTierNetwork,e))}.bind(this))))),React.createElement("div",{className:"bottom"},React.createElement("div",{className:"left"},React.createElement("span",{className:"statusLine"},React.createElement("span",{className:"zeroTierAddress"},this.state.address),"  ",this.state.online?"ONLINE":"OFFLINE","  ",this.state.version)),React.createElement("div",{className:"right"},React.createElement("form",{onSubmit:this.joinNetwork},React.createElement("input",{type:"text",placeholder:" [ Network ID ]",onChange:this.handleNetworkIdEntry,size:"16"}),React.createElement("button",{type:"submit"},"Join")))))}});
+var ZeroTierNetwork=React.createClass({displayName:"ZeroTierNetwork",getInitialState:function(){return{}},leaveNetwork:function(e){Ajax.call({url:"network/"+this.props.nwid+"?auth="+this.props.authToken,cache:!1,type:"DELETE",success:function(e){this.props.onNetworkDeleted&&this.props.onNetworkDeleted(this.props.nwid)}.bind(this),error:function(e){}.bind(this)}),e.preventDefault()},render:function(){return React.createElement("div",{className:"zeroTierNetwork"},React.createElement("div",{className:"networkInfo"},React.createElement("span",{className:"networkId"},this.props.nwid)," ",React.createElement("span",{className:"networkName"},this.props.name)),React.createElement("div",{className:"networkProps"},React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Status"),React.createElement("div",{className:"value"},this.props.status)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Type"),React.createElement("div",{className:"value"},this.props.type)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"MAC"),React.createElement("div",{className:"value zeroTierAddress"},this.props.mac)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"MTU"),React.createElement("div",{className:"value"},this.props.mtu)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Broadcast"),React.createElement("div",{className:"value"},this.props.broadcastEnabled?"ENABLED":"DISABLED")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Bridging"),React.createElement("div",{className:"value"},this.props.bridge?"ACTIVE":"DISABLED")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Device"),React.createElement("div",{className:"value"},this.props.portDeviceName?this.props.portDeviceName:"(none)")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Managed IPs"),React.createElement("div",{className:"value ipList"},this.props.assignedAddresses.map(function(e){return React.createElement("div",{key:e,className:"ipAddress"},e)})))),React.createElement("button",{className:"leaveNetworkButton",onClick:this.leaveNetwork},"Leave Network"))}}); var ZeroTierNode=React.createClass({displayName:"ZeroTierNode",getInitialState:function(){return{address:"----------",online:!1,version:"_._._",_networks:[],_peers:[]}},ago:function(e){if(e>0){var t=Math.round((Date.now()-e)/1e3);return t>0?t:0}return 0},updatePeers:function(){Ajax.call({url:"peer?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_peers:t})}}.bind(this),error:function(){}.bind(this)})},updateNetworks:function(){Ajax.call({url:"network?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_networks:t})}}.bind(this),error:function(){}.bind(this)})},updateAll:function(){Ajax.call({url:"status?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(this.alertedToFailure=!1,e){var t=JSON.parse(e);this.setState(t),document.title="ZeroTier One ["+t.address+"]"}this.updateNetworks(),this.updatePeers()}.bind(this),error:function(){this.setState(this.getInitialState()),this.alertedToFailure||(this.alertedToFailure=!0,alert("Authorization token invalid or ZeroTier One service not running."))}.bind(this)})},joinNetwork:function(e){e.preventDefault(),this.networkToJoin&&16===this.networkToJoin.length?Ajax.call({url:"network/"+this.networkToJoin+"?auth="+this.props.authToken,cache:!1,type:"POST",success:function(e){this.networkToJoin="",this.networkInputElement&&(this.networkInputElement.value=""),this.updateNetworks()}.bind(this),error:function(){}.bind(this)}):alert("To join a network, enter its 16-digit network ID.")},handleNetworkIdEntry:function(e){this.networkInputElement=e.target;var t=e.target.value;if(t){t=t.toLowerCase();for(var a="",s=0;s<t.length&&16>s;++s)"0123456789abcdef".indexOf(t.charAt(s))>=0&&(a+=t.charAt(s));this.networkToJoin=a,e.target.value=a}else this.networkToJoin="",e.target.value=""},handleNetworkDelete:function(e){for(var t=[],a=0;a<this.state._networks.length;++a)this.state._networks[a].nwid!==e&&t.push(this.state._networks[a]);this.setState({_networks:t})},componentDidMount:function(){this.tabIndex=0,this.updateAll(),this.updateIntervalId=setInterval(this.updateAll,2500)},componentWillUnmount:function(){clearInterval(this.updateIntervalId)},render:function(){return React.createElement("div",{className:"zeroTierNode"},React.createElement("div",{className:"top"},"  ",React.createElement("button",{disabled:0===this.tabIndex,onClick:function(){this.tabIndex=0,this.forceUpdate()}.bind(this)},"Networks"),React.createElement("button",{disabled:1===this.tabIndex,onClick:function(){this.tabIndex=1,this.forceUpdate()}.bind(this)},"Peers"),React.createElement("div",{className:"logo"},"⏁ ")),React.createElement("div",{className:"middle"},React.createElement("div",{className:"middleScroll"},1===this.tabIndex?React.createElement("div",{className:"peers",key:"_peers"},React.createElement("div",{className:"peerHeader",key:"_peersHeader"},React.createElement("div",{className:"f"},"Address"),React.createElement("div",{className:"f"},"Version"),React.createElement("div",{className:"f"},"Latency"),React.createElement("div",{className:"f"},"Data Paths"),React.createElement("div",{className:"f"},"Last Frame"),React.createElement("div",{className:"f"},"Role")),this.state._peers.map(function(e){return React.createElement("div",{className:"peer",key:e.address},React.createElement("div",{className:"f zeroTierAddress"},e.address),React.createElement("div",{className:"f"},"-1.-1.-1"===e.version?"-":e.version),React.createElement("div",{className:"f"},e.latency),React.createElement("div",{className:"f"},0===e.paths.length?React.createElement("div",{className:"peerPath"}):React.createElement("div",null,e.paths.map(function(e){var t=e.active||e.fixed?e.preferred?"peerPathPreferred":"peerPathActive":"peerPathInactive";return React.createElement("div",{className:t},e.address,"  ",this.ago(e.lastSend),"/",this.ago(e.lastReceive))}.bind(this)))),React.createElement("div",{className:"f"},this.ago(e.lastUnicastFrame)),React.createElement("div",{className:"f"},e.role))}.bind(this))):React.createElement("div",{className:"networks",key:"_networks"},this.state._networks.map(function(e){return e.authToken=this.props.authToken,e.onNetworkDeleted=this.handleNetworkDelete,React.createElement("div",{className:"network",key:e.nwid},React.createElement(ZeroTierNetwork,e))}.bind(this))))),React.createElement("div",{className:"bottom"},React.createElement("div",{className:"left"},React.createElement("span",{className:"statusLine"},React.createElement("span",{className:"zeroTierAddress"},this.state.address),"  ",this.state.online?"ONLINE":"OFFLINE","  ",this.state.version)),React.createElement("div",{className:"right"},React.createElement("form",{onSubmit:this.joinNetwork},React.createElement("input",{type:"text",placeholder:" [ Network ID ]",onChange:this.handleNetworkIdEntry,size:"16"}),React.createElement("button",{type:"submit"},"Join")))))}});
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 08:01:40 +0000