summaryrefslogtreecommitdiff
path: root/ui
diff options
context:
space:
mode:
authorAdam Ierymenko <adam.ierymenko@gmail.com>2015-11-23 10:46:52 -0800
committerAdam Ierymenko <adam.ierymenko@gmail.com>2015-11-23 10:46:52 -0800
commita18336fa1899a9f53b161a60e766695007c49a7b (patch)
treef464c0475ea49e3714df86d69508644adcf2e98a /ui
parent1e4a40e77205b028d799f7112127f3f2f107117e (diff)
parent764dd1c3d94527c0870a913ac314b3b17eaea282 (diff)
downloadinfinitytier-a18336fa1899a9f53b161a60e766695007c49a7b.tar.gz
infinitytier-a18336fa1899a9f53b161a60e766695007c49a7b.zip
MERGE current "dev" into "netcon" -- should not affect netcon itself but will retest -- brings ZeroTier core up to 1.1.0
Diffstat (limited to 'ui')
-rw-r--r--ui/ZeroTierNetwork.jsx24
-rw-r--r--ui/ZeroTierNode.jsx74
-rw-r--r--ui/zerotier.css100
-rw-r--r--ui/ztui.min.js2
4 files changed, 29 insertions, 171 deletions
diff --git a/ui/ZeroTierNetwork.jsx b/ui/ZeroTierNetwork.jsx
index 4b37d888..f842d758 100644
--- a/ui/ZeroTierNetwork.jsx
+++ b/ui/ZeroTierNetwork.jsx
@@ -4,19 +4,17 @@ var ZeroTierNetwork = React.createClass({
},
leaveNetwork: function(event) {
- if (confirm("Are you sure you want to leave this network?")) {
- Ajax.call({
- url: 'network/'+this.props.nwid+'?auth='+this.props.authToken,
- cache: false,
- type: 'DELETE',
- success: function(data) {
- if (this.props.onNetworkDeleted)
- this.props.onNetworkDeleted(this.props.nwid);
- }.bind(this),
- error: function(error) {
- }.bind(this)
- });
- }
+ Ajax.call({
+ url: 'network/'+this.props.nwid+'?auth='+this.props.authToken,
+ cache: false,
+ type: 'DELETE',
+ success: function(data) {
+ if (this.props.onNetworkDeleted)
+ this.props.onNetworkDeleted(this.props.nwid);
+ }.bind(this),
+ error: function(error) {
+ }.bind(this)
+ });
event.preventDefault();
},
diff --git a/ui/ZeroTierNode.jsx b/ui/ZeroTierNode.jsx
index 49d73460..b4c29220 100644
--- a/ui/ZeroTierNode.jsx
+++ b/ui/ZeroTierNode.jsx
@@ -122,7 +122,6 @@ var ZeroTierNode = React.createClass({
},
componentDidMount: function() {
- this.tabIndex = 0;
this.updateAll();
this.updateIntervalId = setInterval(this.updateAll,2500);
},
@@ -130,74 +129,19 @@ var ZeroTierNode = React.createClass({
clearInterval(this.updateIntervalId);
},
render: function() {
- /* We implement tabs in a very simple way here with a React JSX conditional. The tabIndex
- * local variable indicates the tab, and switching it determines which set of things we
- * render in the main middle portion. On tab switch calls forceUpdate(). */
return (
<div className="zeroTierNode">
- <div className="top">&nbsp;&nbsp;
- <button disabled={this.tabIndex === 0} onClick={function() {this.tabIndex = 0; this.forceUpdate();}.bind(this)}>Networks</button>
- <button disabled={this.tabIndex === 1} onClick={function() {this.tabIndex = 1; this.forceUpdate();}.bind(this)}>Peers</button>
- </div>
<div className="middle"><div className="middleCell">
<div className="middleScroll">
- {
- (this.tabIndex === 1) ? (
- <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>
- <div className="f">Data&nbsp;Paths</div>
- <div className="f">Last&nbsp;Unicast</div>
- <div className="f">Last&nbsp;Multicast</div>
- <div className="f">Role</div>
- </div>
- {
- this.state._peers.map(function(peer) {
- return (
- <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>
- <div className="f">
- {
- (peer['paths'].length === 0) ? (
- <div className="peerPath"></div>
- ) : (
- <div>
- {
- peer['paths'].map(function(path) {
- var cn = ((path.active)||(path.fixed)) ? (path.preferred ? 'peerPathPreferred' : 'peerPathActive') : 'peerPathInactive';
- return (
- <div className={cn}>{path.address}&nbsp;&nbsp;{this.ago(path.lastSend)}/{this.ago(path.lastReceive)}</div>
- );
- }.bind(this))
- }
- </div>
- )
- }
- </div>
- <div className="f">{this.ago(peer['lastUnicastFrame'])}</div>
- <div className="f">{this.ago(peer['lastMulticastFrame'])}</div>
- <div className="f">{peer['role']}</div>
- </div>
- );
- }.bind(this))
- }
- </div>
- ) : (
- <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',key: network.nwid},React.createElement(ZeroTierNetwork,network));
- }.bind(this))
- }
- </div>
- )
- }
+ <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',key: network.nwid},React.createElement(ZeroTierNetwork,network));
+ }.bind(this))
+ }
+ </div>
</div>
</div></div>
<div className="bottom">
diff --git a/ui/zerotier.css b/ui/zerotier.css
index cde5cea8..9f72024a 100644
--- a/ui/zerotier.css
+++ b/ui/zerotier.css
@@ -25,34 +25,6 @@ html,body {
display: table;
}
-.zeroTierNode > .top {
- width: 100%;
- overflow: hidden;
- display: table-row;
- white-space: nowrap;
- background: #234447;
- color: #ffffff;
- padding: 0;
- margin: 0;
-}
-.zeroTierNode > .top button {
- display: inline-block;
- padding: 0.25rem 0.75rem 0.25rem 0.75rem;
- color: #ffffff;
- margin: 0;
- border: 0;
- outline: none;
- background: #234447;
- font-size: 12pt;
- cursor: pointer;
-}
-.zeroTierNode > .top button:hover {
- background: #91a2a3;
-}
-.zeroTierNode > .top button:disabled {
- background: #91a2a3;
-}
-
.zeroTierNode > .middle {
width: 100%;
height: 100%;
@@ -65,6 +37,7 @@ html,body {
width: 100%;
height: 100%;
display: table-cell;
+ border-bottom: 1px solid #cfcfcf;
}
.zeroTierNode > .middle > .middleCell > .middleScroll {
display: block;
@@ -87,77 +60,20 @@ html,body {
border-collapse: collapse;
}
.zeroTierNode > .middle > .middleCell > .middleScroll > .networks > .network {
- display: inline-block;
+ display: block;
+ border-top: 0.12rem solid #dddddd;
+ border-bottom: 0.12rem solid #dddddd;
padding: 0.25rem;
- margin: 0.25rem 0 0 1%;
- min-width: 31%;
- max-width: 98%;
- border: 1px solid #234447;
background: #ffffff;
}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers {
- display: table;
- width: 100%;
- margin: 0;
- border-collapse: collapse;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer {
- width: 100%;
- display: table-row;
- background: #ffffff;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(odd) {
- background: #f3f3f3;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(even) {
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathActive {
- font-size: 8pt;
- color: #555555;
- font-style: italic;
- font-family: monospace;
- white-space: nowrap;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathPreferred {
- font-size: 8pt;
- color: #000000;
- font-family: monospace;
- white-space: nowrap;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathInactive {
- font-size: 8pt;
- font-family: monospace;
- color: #aaaaaa;
- font-style: italic;
- text-decoration: line-through;
- white-space: nowrap;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer > .f {
- display: table-cell;
- padding: 0.05rem 0.15rem 0.05rem 0.15rem;
- font-size: 8pt;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader {
- width: 100%;
- font-size: 8pt;
- display: table-row;
- background: #ffffff;
- border-bottom: 1px solid #000000;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader > .f {
- display: table-cell;
- font-size: 8pt;
- padding: 0.05rem 0.15rem 0.05rem 0.15rem;
- font-weight: bold;
-}
.zeroTierNode > .bottom {
font-size: 12pt;
width: 100%;
overflow: hidden;
display: table-row;
- background: #234447;
- color: #ffffff;
+ color: #000000;
+ background: #dfdfdf;
}
.zeroTierNode > .bottom > .left {
text-align: left;
@@ -233,7 +149,7 @@ html,body {
.zeroTierNetwork .networkInfo .networkId {
font-size: 11pt;
font-family: monospace;
- color: #91a2a3;
+ color: #000000;
}
.zeroTierNetwork .networkInfo .networkName {
padding: 0 0 0 1rem;
@@ -271,7 +187,7 @@ html,body {
.zeroTierNetwork .leaveNetworkButton {
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
margin: 0.25rem 0 0 0;
- font-size: 10pt;
+ font-size: 9pt;
background: #ffffff;
outline: none;
background: #ffb354;
diff --git a/ui/ztui.min.js b/ui/ztui.min.js
index dbde7734..17982839 100644
--- a/ui/ztui.min.js
+++ b/ui/ztui.min.js
@@ -1 +1 @@
-var ZeroTierNetwork=React.createClass({displayName:"ZeroTierNetwork",getInitialState:function(){return{}},leaveNetwork:function(e){confirm("Are you sure you want to leave this network?")&&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",{type:"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=this.networkInputElement.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,this.networkInputElement.value=a}else this.networkToJoin="",this.networkInputElement.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:"middle"},React.createElement("div",{className:"middleCell"},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 Unicast"),React.createElement("div",{className:"f"},"Last Multicast"),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"},this.ago(e.lastMulticastFrame)),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?this.state.tcpFallbackActive?"TUNNELED":"ONLINE":"OFFLINE","  ",this.state.version)),React.createElement("div",{className:"right"},React.createElement("form",{onSubmit:this.joinNetwork},React.createElement("input",{type:"text",maxlength:"16",placeholder:"[ Network ID ]",onChange:this.handleNetworkIdEntry,size:"16"}),React.createElement("button",{type:"button",onClick:this.joinNetwork},"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",{type:"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=this.networkInputElement.value;if(t){t=t.toLowerCase();for(var n="",a=0;a<t.length&&16>a;++a)"0123456789abcdef".indexOf(t.charAt(a))>=0&&(n+=t.charAt(a));this.networkToJoin=n,this.networkInputElement.value=n}else this.networkToJoin="",this.networkInputElement.value=""},handleNetworkDelete:function(e){for(var t=[],n=0;n<this.state._networks.length;++n)this.state._networks[n].nwid!==e&&t.push(this.state._networks[n]);this.setState({_networks:t})},componentDidMount:function(){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:"middle"},React.createElement("div",{className:"middleCell"},React.createElement("div",{className:"middleScroll"},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?this.state.tcpFallbackActive?"TUNNELED":"ONLINE":"OFFLINE","  ",this.state.version)),React.createElement("div",{className:"right"},React.createElement("form",{onSubmit:this.joinNetwork},React.createElement("input",{type:"text",maxlength:"16",placeholder:"[ Network ID ]",onChange:this.handleNetworkIdEntry,size:"16"}),React.createElement("button",{type:"button",onClick:this.joinNetwork},"Join")))))}});