gandetails.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  1. <div class="standardContainer">
  2. <button onclick="exitToGanList();" class="ui large circular black icon button"><i class="angle left icon"></i></button>
  3. <div style="max-width: 300px; margin-top: 1em;">
  4. <button onclick='$("#gannetDetailEdit").slideToggle("fast");' class="ui mini basic right floated circular icon button" style="display: inline-block; margin-top: 2.5em;"><i class="ui edit icon"></i></button>
  5. <h1 class="ui header">
  6. <span class="ganetID"></span>
  7. <div class="sub header ganetName"></div>
  8. </h1>
  9. <div class="ui divider"></div>
  10. <p><span class="ganetDesc"></span></p>
  11. </div>
  12. <div id="gannetDetailEdit" class="ui form" style="margin-top: 1em; display:none;">
  13. <div class="ui divider"></div>
  14. <p>You can change the network name and description below. <br>The name and description is only for easy management purpose and will not effect the network operation.</p>
  15. <div class="field">
  16. <label>Network Name</label>
  17. <input type="text" id="gaNetNameInput" placeholder="">
  18. </div>
  19. <div class="field">
  20. <label>Network Description</label>
  21. <textarea id="gaNetDescInput" style="resize: none;"></textarea>
  22. <button onclick="saveNameAndDesc(this);" class="ui basic right floated button" style="margin-top: 0.6em;"><i class="ui save icon"></i> Save</button>
  23. <button onclick='$("#gannetDetailEdit").slideUp("fast");' class="ui basic right floated button" style="margin-top: 0.6em;"><i class="ui red remove icon"></i> Cancel</button>
  24. </div>
  25. <br><br>
  26. </div>
  27. <div class="ui divider"></div>
  28. <h2>Settings</h2>
  29. <div class="" style="overflow-x: auto;">
  30. <table class="ui basic celled unstackable table" style="min-width: 560px;">
  31. <thead>
  32. <tr>
  33. <th colspan="4">IPv4 Auto-Assign</th>
  34. </tr>
  35. </thead>
  36. <tbody id="ganetRangeTable">
  37. </tbody>
  38. </table>
  39. </div>
  40. <br>
  41. <div class="ui form">
  42. <h3>Custom IP Range</h3>
  43. <p>Manual IP Range Configuration. The IP range must be within the selected CIDR range.
  44. <br>Use <code>Utilities > IP to CIDR tool</code> if you are not too familiar with CIDR notations.</p>
  45. <div class="two fields">
  46. <div class="field">
  47. <label>IP Start</label>
  48. <input type="text" class="ganIpStart" placeholder="">
  49. </div>
  50. <div class="field">
  51. <label>IP End</label>
  52. <input type="text" class="ganIpEnd" placeholder="">
  53. </div>
  54. </div>
  55. </div>
  56. <button onclick="setNetworkRange();" class="ui basic button"><i class="ui blue save icon"></i> Save Settings</button>
  57. <div class="ui divider"></div>
  58. <h2>Members</h2>
  59. <p>To join this network using command line, type <code>sudo zerotier-cli join <span class="ganetID"></span></code> on your device terminal</p>
  60. <div class="ui checkbox" style="margin-bottom: 1em;">
  61. <input id="showUnauthorizedMembers" type="checkbox" onchange="changeUnauthorizedVisibility(this.checked);">
  62. <label>Show Unauthorized Members</label>
  63. </div>
  64. <div class="" style="overflow-x: auto;">
  65. <table class="ui celled unstackable table">
  66. <thead>
  67. <tr>
  68. <th>Auth</th>
  69. <th>Address</th>
  70. <th>Name</th>
  71. <th>Managed IP</th>
  72. <th>Authorized Since</th>
  73. <th>Version</th>
  74. <th>Remove</th>
  75. </tr>
  76. </thead>
  77. <tbody id="networkMemeberTable">
  78. <tr>
  79. </tr>
  80. </tbody>
  81. </table>
  82. </div>
  83. <br><br>
  84. </div>
  85. <script>
  86. $(".checkbox").checkbox();
  87. var currentGANetID = "";
  88. var currentGANNetMemeberListener = undefined;
  89. var currentGaNetDetails = {};
  90. var currentGANMemberList = [];
  91. var netRanges = {
  92. "10.147.17.*": "10.147.17.0/24",
  93. "10.147.18.*": "10.147.18.0/24",
  94. "10.147.19.*": "10.147.19.0/24",
  95. "10.147.20.*": "10.147.20.0/24",
  96. "10.144.*.*": "10.144.0.0/16",
  97. "10.241.*.*": "10.241.0.0/16",
  98. "10.242.*.*": "10.242.0.0/16",
  99. "10.243.*.*": "10.243.0.0/16",
  100. "10.244.*.*": "10.244.0.0/16",
  101. "172.22.*.*": "172.22.0.0/15",
  102. "172.23.*.*": "172.23.0.0/16",
  103. "172.24.*.*": "172.24.0.0/14",
  104. "172.25.*.*": "172.25.0.0/16",
  105. "172.26.*.*": "172.26.0.0/15",
  106. "172.27.*.*": "172.27.0.0/16",
  107. "172.28.*.*": "172.28.0.0/15",
  108. "172.29.*.*": "172.29.0.0/16",
  109. "172.30.*.*": "172.30.0.0/15",
  110. "192.168.191.*": "192.168.191.0/24",
  111. "192.168.192.*": "192.168.192.0/24",
  112. "192.168.193.*": "192.168.193.0/24",
  113. "192.168.194.*": "192.168.194.0/24",
  114. "192.168.195.*": "192.168.195.0/24",
  115. "192.168.196.*": "192.168.196.0/24"
  116. }
  117. function generateIPRangeTable(netRanges) {
  118. $("#ganetRangeTable").empty();
  119. const tableBody = document.getElementById('ganetRangeTable');
  120. const cidrs = Object.values(netRanges);
  121. // Set the number of rows and columns to display in the table
  122. const numRows = 6;
  123. const numCols = 4;
  124. let row = document.createElement('tr');
  125. let col = 0;
  126. for (let i = 0; i < cidrs.length; i++) {
  127. if (col >= numCols) {
  128. tableBody.appendChild(row);
  129. row = document.createElement('tr');
  130. col = 0;
  131. }
  132. const td = document.createElement('td');
  133. td.setAttribute('class', `clickable iprange`);
  134. td.setAttribute('CIDR', cidrs[i]);
  135. td.innerHTML = cidrs[i];
  136. let thisCidr = cidrs[i];
  137. td.onclick = function(){
  138. selectNetworkRange(thisCidr, td);
  139. };
  140. row.appendChild(td);
  141. col++;
  142. }
  143. // Add any remaining cells to the table
  144. if (col > 0) {
  145. for (let i = col; i < numCols; i++) {
  146. row.appendChild(document.createElement('td'));
  147. }
  148. tableBody.appendChild(row);
  149. }
  150. }
  151. function highlightCurrentGANetCIDR(){
  152. var currentCIDR = currentGaNetDetails.routes[0].target;
  153. $(".iprange").each(function(){
  154. if ($(this).attr("CIDR") == currentCIDR){
  155. $(this).addClass("active");
  156. populateStartEndIpByCidr(currentCIDR);
  157. }
  158. })
  159. }
  160. function populateStartEndIpByCidr(cidr){
  161. function cidrToRange(cidr) {
  162. var range = [2];
  163. cidr = cidr.split('/');
  164. var start = ip2long(cidr[0]);
  165. range[0] = long2ip(start);
  166. range[1] = long2ip(Math.pow(2, 32 - cidr[1]) + start - 1);
  167. return range;
  168. }
  169. var cidrRange = cidrToRange(cidr);
  170. $(".ganIpStart").val(cidrRange[0]);
  171. $(".ganIpEnd").val(cidrRange[1]);
  172. }
  173. function selectNetworkRange(cidr, object){
  174. populateStartEndIpByCidr(cidr);
  175. $(".iprange.active").removeClass("active");
  176. $(object).addClass("active");
  177. }
  178. function setNetworkRange(){
  179. var ipstart = $(".ganIpStart").val().trim();
  180. var ipend = $(".ganIpEnd").val().trim();
  181. if (ipstart == ""){
  182. $(".ganIpStart").parent().addClass("error");
  183. }else{
  184. $(".ganIpStart").parent().removeClass("error");
  185. }
  186. if (ipend == ""){
  187. $(".ganIpEnd").parent().addClass("error");
  188. }else{
  189. $(".ganIpEnd").parent().removeClass("error");
  190. }
  191. //Get CIDR from selected range group
  192. var cidr = $(".iprange.active").attr("cidr");
  193. $.ajax({
  194. url: "/api/gan/network/setRange",
  195. metohd: "POST",
  196. data:{
  197. netid: currentGANetID,
  198. cidr: cidr,
  199. ipstart: ipstart,
  200. ipend: ipend
  201. },
  202. success: function(data){
  203. if (data.error != undefined){
  204. msgbox(data.error, false, 5000)
  205. }else{
  206. msgbox("Network Range Updated")
  207. }
  208. }
  209. })
  210. }
  211. function saveNameAndDesc(object=undefined){
  212. var name = $("#gaNetNameInput").val();
  213. var desc = $("#gaNetDescInput").val();
  214. if (object != undefined){
  215. $(object).addClass("loading");
  216. }
  217. $.ajax({
  218. url: "/api/gan/network/name",
  219. method: "POST",
  220. data: {
  221. netid: currentGANetID,
  222. name: name,
  223. desc: desc,
  224. },
  225. success: function(data){
  226. initNetNameAndDesc();
  227. if (object != undefined){
  228. $(object).removeClass("loading");
  229. msgbox("Network Metadata Updated");
  230. }
  231. $("#gannetDetailEdit").slideUp("fast");
  232. }
  233. });
  234. }
  235. function initNetNameAndDesc(){
  236. //Get the details of the net
  237. $.get("/api/gan/network/name?netid=" + currentGANetID, function(data){
  238. if (data.error !== undefined){
  239. msgbox(data.error, false, 6000);
  240. }else{
  241. $("#gaNetNameInput").val(data[0]);
  242. $(".ganetName").html(data[0]);
  243. $("#gaNetDescInput").val(data[1]);
  244. $(".ganetDesc").text(data[1]);
  245. }
  246. });
  247. }
  248. function initNetDetails(){
  249. //Get the details of the net
  250. $.get("/api/gan/network/list?netid=" + currentGANetID, function(data){
  251. if (data.error !== undefined){
  252. msgbox(data.error, false, 6000);
  253. }else{
  254. currentGaNetDetails = data;
  255. highlightCurrentGANetCIDR();
  256. }
  257. });
  258. }
  259. //Handle delete IP from memeber
  260. function deleteIpFromMemeber(memberid, ip){
  261. $.ajax({
  262. url: "/api/gan/members/ip",
  263. metohd: "POST",
  264. data: {
  265. netid: currentGANetID,
  266. memid: memberid,
  267. opr: "del",
  268. ip: ip,
  269. },
  270. success: function(data){
  271. if (data.error != undefined){
  272. msgbox(data.error, false, 5000);
  273. }else{
  274. msgbox("IP removed from member " + memberid)
  275. }
  276. renderMemeberTable();
  277. }
  278. });
  279. }
  280. function addIpToMemeberFromInput(memberid, newip){
  281. function isValidIPv4Address(address) {
  282. // Split the address into its 4 components
  283. const parts = address.split('.');
  284. // Check that there are 4 components
  285. if (parts.length !== 4) {
  286. return false;
  287. }
  288. // Check that each component is a number between 0 and 255
  289. for (let i = 0; i < 4; i++) {
  290. const part = parseInt(parts[i], 10);
  291. if (isNaN(part) || part < 0 || part > 255) {
  292. return false;
  293. }
  294. }
  295. // The address is valid
  296. return true;
  297. }
  298. if (!isValidIPv4Address(newip)){
  299. msgbox(newip + " is not a valid IPv4 address", false, 5000)
  300. return
  301. }
  302. $.ajax({
  303. url: "/api/gan/members/ip",
  304. metohd: "POST",
  305. data: {
  306. netid: currentGANetID,
  307. memid: memberid,
  308. opr: "add",
  309. ip: newip,
  310. },
  311. success: function(data){
  312. if (data.error != undefined){
  313. msgbox(data.error, false, 5000);
  314. }else{
  315. msgbox("IP added to member " + memberid)
  316. }
  317. renderMemeberTable();
  318. }
  319. })
  320. }
  321. //Member table populate
  322. function renderMemeberTable(forceUpdate = false) {
  323. $.ajax({
  324. url: '/api/gan/members/list?netid=' + currentGANetID + '&detail=true',
  325. type: 'GET',
  326. success: function(data) {
  327. const tableBody = $('#networkMemeberTable');
  328. data.sort((a, b) => a.address.localeCompare(b.address));
  329. //Check if the new object equal to the old one
  330. if (objectEqual(currentGANMemberList, data) && !forceUpdate){
  331. //Do not need to update it
  332. return;
  333. }
  334. tableBody.empty();
  335. currentGANMemberList = data;
  336. data.forEach((member) => {
  337. let lastAuthTime = new Date(member.lastAuthorizedTime).toLocaleString();
  338. if (member.lastAuthorizedTime == 0){
  339. lastAuthTime = "Never";
  340. }
  341. let version = `${member.vMajor}.${member.vMinor}.${member.vProto}.${member.vRev}`;
  342. if (member.vMajor == -1){
  343. version = "Unknown";
  344. }
  345. let authorizedCheckbox = `<div class="ui fitted checkbox">
  346. <input type="checkbox" addr="${member.address}" name="isAuthrozied" onchange="handleMemberAuth(this);">
  347. <label></label>
  348. </div>`;
  349. if (member.authorized){
  350. authorizedCheckbox = `<div class="ui fitted checkbox">
  351. <input type="checkbox" addr="${member.address}" name="isAuthrozied" onchange="handleMemberAuth(this);" checked="">
  352. <label></label>
  353. </div>`
  354. }
  355. let rowClass = "authorized";
  356. let unauthorizedStyle = "";
  357. if (!$("#showUnauthorizedMembers")[0].checked && !member.authorized){
  358. unauthorizedStyle = "display:none;";
  359. }
  360. if (!member.authorized){
  361. rowClass = "unauthorized"
  362. }
  363. let assignedIp = "";
  364. if (member.ipAssignments.length == 0){
  365. assignedIp = "Not assigned"
  366. }else{
  367. assignedIp = `<div class="ui list">`
  368. member.ipAssignments.forEach(function(thisIp){
  369. assignedIp += `<div class="item" style="width: 100%;">${thisIp} <a style="cursor:pointer; float: right;" title="Remove IP" onclick="deleteIpFromMemeber('${member.address}','${thisIp}');"><i class="red remove icon"></i></a></div>`;
  370. })
  371. assignedIp += `</div>`
  372. }
  373. const row = $(`<tr class="GANetMemberEntity ${rowClass}" style="${unauthorizedStyle}">`);
  374. row.append($(`<td class="GANetMember ${rowClass}" style="text-align: center;">`).html(authorizedCheckbox));
  375. row.append($('<td>').text(member.address));
  376. row.append($('<td>').html(`<span class="memberName" addr="${member.address}"></span> <a style="cursor:pointer; float: right;" title="Edit Memeber Name" onclick="renameMember('${member.address}');"><i class="grey edit icon"></i></a>`));
  377. row.append($('<td>').html(`${assignedIp}
  378. <div class="ui action mini fluid input" style="min-width: 200px;">
  379. <input type="text" placeholder="IPv4" onchange="$(this).val($(this).val().trim());">
  380. <button onclick="addIpToMemeberFromInput('${member.address}',$(this).parent().find('input').val());" class="ui basic icon button">
  381. <i class="add icon"></i>
  382. </button>
  383. </div>`));
  384. row.append($('<td>').text(lastAuthTime));
  385. row.append($('<td>').text(version));
  386. row.append($(`<td title="Deauthorize & Delete Memeber" style="text-align: center;" onclick="handleMemberDelete('${member.address}');">`).html(`<button class="ui basic mini icon button"><i class="red remove icon"></i></button>`));
  387. tableBody.append(row);
  388. });
  389. if (data.length == 0){
  390. tableBody.append(`<tr>
  391. <td colspan="7"><i class="green check circle icon"></i> No member has joined this network yet.</td>
  392. </tr>`);
  393. }
  394. initNameForMembers();
  395. },
  396. error: function(xhr, status, error) {
  397. console.log('Error:', error);
  398. }
  399. });
  400. }
  401. function initNameForMembers(){
  402. $(".memberName").each(function(){
  403. let addr = $(this).attr("addr");
  404. let targetDOM = $(this);
  405. $.ajax({
  406. url: "/api/gan/members/name",
  407. method: "POST",
  408. data: {
  409. netid: currentGANetID,
  410. memid: addr,
  411. },
  412. success: function(data){
  413. if (data.error != undefined){
  414. $(targetDOM).text("N/A");
  415. }else{
  416. $(targetDOM).text(data.Name);
  417. }
  418. }
  419. });
  420. })
  421. }
  422. function renameMember(targetMemberAddr){
  423. if (targetMemberAddr == ""){
  424. msgbox("Member address cannot be empty", false, 5000)
  425. return
  426. }
  427. let newname = prompt("Enter a easy manageable name for " + targetMemberAddr, "");
  428. if (newname != null && newname.trim() != "") {
  429. $.ajax({
  430. url: "/api/gan/members/name",
  431. method: "POST",
  432. data: {
  433. netid: currentGANetID,
  434. memid: targetMemberAddr,
  435. name: newname
  436. },
  437. success: function(data){
  438. if (data.error != undefined){
  439. msgbox(data.error, false, 6000);
  440. }else{
  441. msgbox("Member Name Updated");
  442. }
  443. renderMemeberTable(true);
  444. }
  445. })
  446. }
  447. }
  448. //Helper function to check if two objects are equal recursively
  449. function objectEqual(obj1, obj2) {
  450. // compare types
  451. if (typeof obj1 !== typeof obj2) {
  452. return false;
  453. }
  454. // compare values
  455. if (typeof obj1 !== 'object' || obj1 === null) {
  456. return obj1 === obj2;
  457. }
  458. const keys1 = Object.keys(obj1);
  459. const keys2 = Object.keys(obj2);
  460. // compare keys
  461. if (keys1.length !== keys2.length) {
  462. return false;
  463. }
  464. for (const key of keys1) {
  465. if (!keys2.includes(key)) {
  466. return false;
  467. }
  468. // recursively compare values
  469. if (!objectEqual(obj1[key], obj2[key])) {
  470. return false;
  471. }
  472. }
  473. return true;
  474. }
  475. function changeUnauthorizedVisibility(visable){
  476. if(visable){
  477. $(".GANetMemberEntity.unauthorized").show();
  478. }else{
  479. $(".GANetMemberEntity.unauthorized").hide();
  480. }
  481. }
  482. function handleMemberAuth(object){
  483. let targetMemberAddr = $(object).attr("addr");
  484. let isAuthed = object.checked;
  485. $.ajax({
  486. url: "/api/gan/members/authorize",
  487. method: "POST",
  488. data: {
  489. netid:currentGANetID,
  490. memid: targetMemberAddr,
  491. auth: isAuthed
  492. },
  493. success: function(data){
  494. if (data.error != undefined){
  495. msgbox(data.error, false, 6000);
  496. }else{
  497. if (isAuthed){
  498. msgbox("Member Authorized");
  499. }else{
  500. msgbox("Member Deauthorized");
  501. }
  502. }
  503. renderMemeberTable(true);
  504. }
  505. })
  506. }
  507. function handleMemberDelete(addr){
  508. if (confirm("Confirm delete member " + addr + " ?")){
  509. $.ajax({
  510. url: "/api/gan/members/delete",
  511. method: "POST",
  512. data: {
  513. netid:currentGANetID,
  514. memid: addr,
  515. },
  516. success: function(data){
  517. if (data.error != undefined){
  518. msgbox(data.error, false, 6000);
  519. }else{
  520. msgbox("Member Deleted");
  521. }
  522. renderMemeberTable(true);
  523. }
  524. });
  525. }
  526. }
  527. //Entry points
  528. function initGanetDetails(ganetId){
  529. currentGANetID = ganetId;
  530. $(".ganetID").text(ganetId);
  531. initNetNameAndDesc(ganetId);
  532. generateIPRangeTable(netRanges);
  533. initNetDetails();
  534. renderMemeberTable(true);
  535. //Setup a listener to listen for member list change
  536. if (currentGANNetMemeberListener == undefined){
  537. currentGANNetMemeberListener = setInterval(function(){
  538. if ($('#networkMemeberTable').length > 0 && currentGANetID){
  539. renderMemeberTable();
  540. }
  541. }, 3000);
  542. }
  543. }
  544. //Exit point
  545. function exitToGanList(){
  546. $("#gan").load("./components/gan.html", function(){
  547. if (tabSwitchEventBind["gan"]){
  548. tabSwitchEventBind["gan"]();
  549. }
  550. });
  551. }
  552. </script>