status.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695
  1. <div class="ui stackable grid">
  2. <div class="ten wide column serverstatusWrapper">
  3. <div id="serverstatus" class="ui statustab inverted segment">
  4. <h1 class="ui header" style="margin-top: 1em; margin-left: 0.4em; padding-bottom: 1em;">
  5. <i id="rpStatusIcon" class="loading spinner icon"></i>
  6. <div class="content">
  7. <span id="statusTitle">Loading</span>
  8. <div class="sub header" id="statusText">Checking server status</div>
  9. </div>
  10. </h1>
  11. <div class="dot-container">
  12. <div class="dot"></div>
  13. <div class="dot"></div>
  14. <div class="dot"></div>
  15. <div class="dot"></div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="six wide column statisticWrapper">
  20. <div class="ui statustab segment">
  21. <h5 class="ui header">
  22. <i class="exchange icon"></i>
  23. <div class="content">
  24. <span id="summaryTotalCount"></span> <small>Req. Today</small>
  25. <div class="sub header" style="margin-top: 0.4em;">
  26. <i class="green circle check icon"></i> <span id="summarySuccCount"></span>
  27. / <i class="red red exclamation circle icon"></i> <span id="summaryErrCount"></span>
  28. </div>
  29. </div>
  30. </h5>
  31. <div class="ui divider"></div>
  32. <h5 class="ui header" style="margin-top: 0px;">
  33. <i class="arrows alternate horizontal icon"></i>
  34. <div class="content">
  35. <span id="forwardtype"></span>
  36. <div class="sub header" id="forwardtypeList">
  37. </div>
  38. </div>
  39. </h5>
  40. <div class="ui divider"></div>
  41. <h5 class="ui header" style="margin-top: 0px;">
  42. <i class="map marker alternate icon"></i>
  43. <div class="content">
  44. <span id="country"></span>
  45. <div class="sub header" id="countryList">
  46. <i class="ui loading circle notch icon"></i> Resolving GeoIP
  47. </div>
  48. </div>
  49. </h5>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="standardContainer" style="padding-bottom: 0 !important;">
  54. <!-- Power Buttons-->
  55. <button id="startbtn" class="ui basic button" onclick="startService();"><i class="ui green arrow alternate circle up icon"></i> Start Service</button>
  56. <button id="stopbtn" class="ui basic notloopbackOnly disabled button" onclick="stopService();"><i class="ui red minus circle icon"></i> Stop Service</button>
  57. <div class="ui divider"></div>
  58. <h4>Network Status</h4>
  59. <p>Overall Network I/O in Current Host Server</p>
  60. </div>
  61. <div id="networkActWrapper" class="standardContainer" style="position: relative;">
  62. <canvas id="networkActivity"></canvas>
  63. </div>
  64. <div id="networkActivityPlaceHolder">
  65. <p style="opacity: 0.5;"> Graph Render Paused</p>
  66. </div>
  67. <div class="standardContainer">
  68. <div class="ui divider"></div>
  69. <h4>Global Settings</h4>
  70. <p>Inbound Port (Port to be proxied)</p>
  71. <div class="ui action fluid notloopbackOnly input">
  72. <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
  73. <button class="ui basic notloopbackOnly button" onclick="handlePortChange();"><i class="ui green checkmark icon"></i> Apply</button>
  74. </div>
  75. <br>
  76. <div id="tls" class="ui toggle notloopbackOnly checkbox">
  77. <input type="checkbox">
  78. <label>Use TLS to serve proxy request</label>
  79. </div>
  80. <br>
  81. <div id="listenP80" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em;" >
  82. <input type="checkbox">
  83. <label>Enable HTTP server on port 80<br>
  84. <small>(Only apply when TLS enabled and not using port 80)</small></label>
  85. </div>
  86. <br>
  87. <div id="redirect" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em; padding-left: 2em;">
  88. <input type="checkbox">
  89. <label>Force redirect HTTP request to HTTPS</label>
  90. </div>
  91. <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
  92. <div class="ui accordion advanceSettings">
  93. <div class="title">
  94. <i class="dropdown icon"></i>
  95. Advance Settings
  96. </div>
  97. <div class="content">
  98. <div id="tlsMinVer" class="ui toggle notloopbackOnly tlsEnabledOnly checkbox" style="margin-top: 0.6em;">
  99. <input type="checkbox">
  100. <label>Force TLS v1.2 or above<br>
  101. <small>(Enhance security, but not compatible with legacy browsers)</small></label>
  102. </div>
  103. <br>
  104. <div id="" class="ui toggle checkbox" style="margin-top: 0.6em;">
  105. <input type="checkbox">
  106. <label>Development Mode (WIP)<br>
  107. <small>(Set Cache-Control to 0 so browser will not cache anything)</small></label>
  108. </div>
  109. <br>
  110. </div>
  111. </div>
  112. </div>
  113. <div id="rploopbackWarning" class="ui segment" style="display:none;">
  114. <b><i class="yellow warning icon"></i> Loopback Routing Warning</b><br>
  115. <small>This management interface is a loopback proxied service. <br>If you want to shutdown the reverse proxy server, please remove the proxy rule for the management interface and refresh.</small>
  116. </div>
  117. <div class="ui divider"></div>
  118. <div class="">
  119. <h4>Statistic Overview</h4>
  120. <div class="ui two column stackable grid">
  121. <div class="column">
  122. <p>Visitor Counts</p>
  123. <table class="ui unstackable very basic celled table">
  124. <thead>
  125. <tr>
  126. <th>Country ISO Code</th>
  127. <th>Unique Visitors</th>
  128. </tr>
  129. </thead>
  130. <tbody id="countryCodetable">
  131. <tr>
  132. <td colspan="2">No Data</td>
  133. </tr>
  134. </tbody>
  135. </table>
  136. </div>
  137. <div class="column">
  138. <p>Proxy Request Types</p>
  139. <table class="ui unstackable very basic celled table">
  140. <thead>
  141. <tr>
  142. <th>Proxy Type</th>
  143. <th>Count</th>
  144. </tr>
  145. </thead>
  146. <tbody id="forwardTypeTable">
  147. <tr>
  148. <td colspan="2">No Data</td>
  149. </tr>
  150. </tbody>
  151. </table>
  152. </div>
  153. </div>
  154. </div>
  155. <br>
  156. <button class="ui right floated basic button" onclick="getDailySummaryDetails();"><i class="green refresh icon"></i> Refresh</button>
  157. <br><br>
  158. </div>
  159. <script>
  160. let loopbackProxiedInterface = false;
  161. $(".advanceSettings").accordion();
  162. //Initial the start stop button if this is reverse proxied
  163. $.get("/api/proxy/requestIsProxied", function(data){
  164. if (data == true){
  165. //This management interface is reverse proxied by itself
  166. //do not allow turning off the proxy
  167. $(".notloopbackOnly").addClass("disabled");
  168. loopbackProxiedInterface = true;
  169. $("#rploopbackWarning").show();
  170. }
  171. });
  172. //Get the latest server status from proxy server
  173. function initRPStaste(){
  174. $.get("/api/proxy/status", function(data){
  175. if (data.Running == true){
  176. $("#startbtn").addClass("disabled");
  177. if (!loopbackProxiedInterface){
  178. $("#stopbtn").removeClass("disabled");
  179. }
  180. $("#serverstatus").addClass("green");
  181. $("#statusTitle").text("Online");
  182. $("#rpStatusIcon").attr("class", "white circle check icon");
  183. $("#statusText").text("Serving request on port: " + data.Option.Port);
  184. }else{
  185. $("#startbtn").removeClass("disabled");
  186. $("#stopbtn").addClass("disabled");
  187. $("#statusTitle").text("Offline");
  188. $("#rpStatusIcon").attr("class", "yellow moon icon")
  189. $("#statusText").text("Reverse proxy server is offline");
  190. $("#serverstatus").removeClass("green");
  191. }
  192. $("#incomingPort").val(data.Option.Port);
  193. });
  194. }
  195. function getDailySummaryDetails(){
  196. function sortObjectByValue(obj) {
  197. // Convert object to array of [key, value] pairs
  198. const entries = Object.entries(obj);
  199. // Sort array based on value of each pair
  200. entries.sort((a, b) => {
  201. return b[1] - a[1];
  202. });
  203. // Convert sorted array back to object
  204. const sortedObj = {};
  205. for (const [key, value] of entries) {
  206. sortedObj[key] = value;
  207. }
  208. return sortedObj;
  209. }
  210. $.get("/api/stats/countries", function(data){
  211. data = sortObjectByValue(data);
  212. $("#country").html((Object.keys(data)[0])?Object.keys(data)[0]:"No Data");
  213. $("#countryList").html(`
  214. <div>
  215. ${(Object.keys(data)[1])?Object.keys(data)[1]:"-"}<br>
  216. ${(Object.keys(data)[2])?Object.keys(data)[2]:"-"}
  217. </div>
  218. `);
  219. //populate the table
  220. $("#countryCodetable").html("");
  221. for (const [key, value] of Object.entries(data)) {
  222. var countryName = getCountryName(key);
  223. if (countryName == ""){
  224. countryName = "LAN"
  225. }
  226. $("#countryCodetable").append(`<tr>
  227. <td>${key} (${countryName})</td>
  228. <td>${value}</td>
  229. </tr>`);
  230. }
  231. if (Object.keys(data).length == 0){
  232. $("#countryCodetable").append(`<tr>
  233. <td colspan="2"><i class="ui green circle check icon"></i> No Data</td>
  234. </tr>`);
  235. }
  236. });
  237. //Filter forward type
  238. function fft(ft){
  239. if (ft.indexOf("-") >= 0){
  240. ft = ft.replace("-", " (");
  241. ft = ft + ")";
  242. }
  243. ft = ft.charAt(0).toUpperCase() + ft.slice(1);
  244. return ft;
  245. }
  246. $.get("/api/stats/summary", function(data){
  247. data = sortObjectByValue(data.ForwardTypes);
  248. $("#forwardtype").html((Object.keys(data)[0])?fft(Object.keys(data)[0]) + ": " + abbreviateNumber(data[Object.keys(data)[0]]):"No Data");
  249. $("#forwardtypeList").html(`
  250. <div>
  251. ${(Object.keys(data)[1])?fft(Object.keys(data)[1]) + ": " + abbreviateNumber(data[Object.keys(data)[1]]):"-"}<br>
  252. ${(Object.keys(data)[2])?fft(Object.keys(data)[2]) + ": " + abbreviateNumber(data[Object.keys(data)[2]]):"-"}
  253. </div>
  254. `);
  255. $("#forwardTypeTable").html("");
  256. for (const [key, value] of Object.entries(data)) {
  257. $("#forwardTypeTable").append(`<tr>
  258. <td>${key}</td>
  259. <td>${value}</td>
  260. </tr>`);
  261. }
  262. if (Object.keys(data).length == 0){
  263. $("#forwardTypeTable").append(`<tr>
  264. <td colspan="2"><i class="ui green circle check icon"></i> No Data</td>
  265. </tr>`);
  266. }
  267. });
  268. }
  269. getDailySummaryDetails();
  270. function getDailySummary(){
  271. $.get("/api/stats/summary?fast=true", function(data){
  272. $("#summaryTotalCount").text(abbreviateNumber(data.TotalRequest));
  273. $("#summarySuccCount").text(abbreviateNumber(data.ValidRequest));
  274. $("#summaryErrCount").text(abbreviateNumber(data.ErrorRequest));
  275. });
  276. }
  277. setInterval(function(){
  278. getDailySummary();
  279. }, 10000);
  280. getDailySummary();
  281. //Start and stop service button
  282. function startService(){
  283. $.post("/api/proxy/enable", {enable: true}, function(data){
  284. if (data.error != undefined){
  285. msgbox(data.error, false, 5000);
  286. }
  287. initRPStaste();
  288. });
  289. }
  290. function stopService(){
  291. $.post("/api/proxy/enable", {enable: false}, function(data){
  292. if (data.error != undefined){
  293. msgbox(data.error, false, 5000);
  294. }
  295. initRPStaste();
  296. });
  297. }
  298. function handleP80ListenerStateChange(enabled){
  299. $.ajax({
  300. url: "/api/proxy/listenPort80",
  301. data: {"enable": enabled},
  302. success: function(data){
  303. if (data.error != undefined){
  304. console.log(data.error);
  305. return;
  306. }
  307. if (enabled){
  308. $("#redirect").show();
  309. msgbox("Port 80 listener enabled");
  310. }else{
  311. $("#redirect").hide();
  312. msgbox("Port 80 listener disabled");
  313. }
  314. }
  315. });
  316. }
  317. function handlePortChange(){
  318. var newPortValue = $("#incomingPort").val();
  319. if (isNaN(newPortValue - 1) || newPortValue < 1 || newPortValue > 65535){
  320. msgbox("Invalid incoming port value", false, 5000);
  321. return;
  322. }
  323. $.post("/api/proxy/setIncoming", {incoming: newPortValue}, function(data){
  324. if (data.error != undefined){
  325. msgbox(data.error, false, 5000);
  326. return;
  327. }
  328. msgbox("Setting Updated");
  329. initRPStaste();
  330. });
  331. }
  332. function initPort80ListenerSetting(){
  333. $.get("/api/proxy/listenPort80", function(data){
  334. if (data){
  335. $("#listenP80").checkbox("set checked");
  336. $("#redirect").show();
  337. }else{
  338. $("#listenP80").checkbox("set unchecked");
  339. $("#redirect").hide();
  340. }
  341. $("#listenP80").find("input").on("change", function(){
  342. let enabled = $(this)[0].checked;
  343. handleP80ListenerStateChange(enabled);
  344. })
  345. });
  346. }
  347. initPort80ListenerSetting();
  348. function initHTTPtoHTTPSRedirectSetting(){
  349. $.get("/api/proxy/useHttpsRedirect", function(data){
  350. if (data == true){
  351. $("#redirect").checkbox("set checked");
  352. }
  353. //Initiate the input listener on the checkbox
  354. $("#redirect").find("input").on("change", function(){
  355. let thisValue = $("#redirect").checkbox("is checked");
  356. $.ajax({
  357. url: "/api/proxy/useHttpsRedirect",
  358. data: {set: thisValue},
  359. success: function(data){
  360. if (data.error != undefined){
  361. msgbox(data.error, false, 8000);
  362. //Restore backend value to make sure the UI is always in sync
  363. $.get("/api/proxy/useHttpsRedirect", function(data){
  364. if (data == true){
  365. $("#redirect").checkbox("set checked");
  366. }else{
  367. $("#redirect").checkbox("set unchecked");
  368. }
  369. });
  370. }else{
  371. //Updated
  372. msgbox("Setting Updated");
  373. initRPStaste();
  374. }
  375. }
  376. })
  377. });
  378. });
  379. }
  380. initHTTPtoHTTPSRedirectSetting();
  381. function initTlsVersionSetting(){
  382. $.get("/api/cert/tlsRequireLatest", function(data){
  383. if (data == true){
  384. $("#tlsMinVer").checkbox("set checked");
  385. }else{
  386. $("#tlsMinVer").checkbox("set unchecked");
  387. }
  388. //Bind events to the checkbox
  389. $("#tlsMinVer").find("input").on("change", function(){
  390. let thisValue = $("#tlsMinVer").checkbox("is checked");
  391. $.ajax({
  392. url: "/api/cert/tlsRequireLatest",
  393. data: {"set": thisValue},
  394. success: function(data){
  395. if (data.error != undefined){
  396. msgbox(data.error, false, 5000);
  397. }else{
  398. msgbox("TLS Version Setting Updated");
  399. }
  400. }
  401. })
  402. });
  403. });
  404. }
  405. initTlsVersionSetting();
  406. function initTlsSetting(){
  407. $.get("/api/cert/tls", function(data){
  408. if (data == true){
  409. $("#tls").checkbox("set checked");
  410. }else{
  411. $(".tlsEnabledOnly").addClass('disabled');
  412. $(".tlsEnabledOnly").addClass('disabled');
  413. }
  414. //Initiate the input listener on the checkbox
  415. $("#tls").find("input").on("change", function(){
  416. let thisValue = $("#tls").checkbox("is checked");
  417. if (thisValue){
  418. $(".tlsEnabledOnly").removeClass('disabled');
  419. }else{
  420. $(".tlsEnabledOnly").addClass('disabled');
  421. }
  422. $.ajax({
  423. url: "/api/cert/tls",
  424. data: {set: thisValue},
  425. success: function(data){
  426. if (data.error != undefined){
  427. alert(data.error);
  428. }else{
  429. //Updated
  430. //Check for case if the port is invalid default ports
  431. if ($("#incomingPort").val() == "80" && thisValue == true){
  432. confirmBox("Change listen port to :443?", function(choice){
  433. if (choice == true){
  434. $("#incomingPort").val("443");
  435. handlePortChange();
  436. }
  437. });
  438. }else if ($("#incomingPort").val() == "443" && thisValue == false){
  439. confirmBox("Change listen port to :80?", function(choice){
  440. if (choice == true){
  441. $("#incomingPort").val("80");
  442. handlePortChange();
  443. }
  444. });
  445. }else{
  446. msgbox("Setting Updated");
  447. }
  448. initRPStaste();
  449. }
  450. }
  451. })
  452. });
  453. })
  454. }
  455. initTlsSetting();
  456. </script>
  457. <script>
  458. /*
  459. Render Network Activity Graph
  460. */
  461. /*
  462. Setup Graph
  463. */
  464. let rxValues = [];
  465. let txValues = [];
  466. let dataCount = 300;
  467. let timestamps = [];
  468. for(var i = 0; i < dataCount; i++){
  469. timestamps.push(parseInt(Date.now() / 1000) + i);
  470. }
  471. function fetchData() {
  472. $.ajax({
  473. url: '/api/stats/netstatgraph?array=true',
  474. success: function(data){
  475. if (rxValues.length == 0){
  476. rxValues = JSON.parse(JSON.stringify(data.Rx));
  477. }else{
  478. rxValues.push(data.Rx[dataCount-1]);
  479. rxValues.shift();
  480. }
  481. if (txValues.length == 0){
  482. txValues = JSON.parse(JSON.stringify(data.Tx));
  483. }else{
  484. txValues.push(data.Tx[dataCount-1]);
  485. txValues.shift();
  486. }
  487. timestamps.push(parseInt(Date.now() / 1000));
  488. timestamps.shift();
  489. updateChart();
  490. }
  491. })
  492. }
  493. function formatBandwidth(bps) {
  494. const KBPS = 1000;
  495. const MBPS = 1000 * KBPS;
  496. const GBPS = 1000 * MBPS;
  497. if (bps >= GBPS) {
  498. return (bps / GBPS).toFixed(2) + " Gbps";
  499. } else if (bps >= MBPS) {
  500. return (bps / MBPS).toFixed(2) + " Mbps";
  501. } else if (bps >= KBPS) {
  502. return (bps / KBPS).toFixed(2) + " Kbps";
  503. } else {
  504. return bps.toFixed(2) + " bps";
  505. }
  506. }
  507. var networkStatisticChart;
  508. function initChart(){
  509. $.get("/api/stats/netstat", function(data){
  510. networkStatisticChart = new Chart(
  511. document.getElementById('networkActivity'),
  512. {
  513. type: 'line',
  514. responsive: true,
  515. resizeDelay: 100,
  516. options: {
  517. animation: false,
  518. maintainAspectRatio: false,
  519. bezierCurve: true,
  520. tooltips: {enabled: false},
  521. hover: {mode: null},
  522. //stepped: 'middle',
  523. plugins: {
  524. legend: {
  525. display: true,
  526. position: "right",
  527. },
  528. title: {
  529. display: false,
  530. text: 'Network Statistic'
  531. },
  532. },
  533. scales: {
  534. x: {
  535. display: false,
  536. },
  537. y: {
  538. display: true,
  539. scaleLabel: {
  540. display: true,
  541. labelString: 'Value'
  542. },
  543. ticks: {
  544. stepSize: 10000000,
  545. callback: function(label, index, labels) {
  546. return formatBandwidth(parseInt(label));
  547. }
  548. },
  549. gridLines: {
  550. display: true
  551. }
  552. }
  553. }
  554. },
  555. data: {
  556. labels: timestamps,
  557. datasets: [
  558. {
  559. label: 'Inbound',
  560. data: rxValues,
  561. borderColor: "#484bb8",
  562. borderWidth: 1,
  563. backgroundColor: 'rgba(72, 75, 184, 0.2)',
  564. fill: true,
  565. pointStyle: false,
  566. },
  567. {
  568. label: 'Outbound',
  569. data: txValues,
  570. borderColor: '#02a9c1',
  571. borderWidth: 1,
  572. backgroundColor: 'rgba(2, 169, 193, 0.2)',
  573. fill: true,
  574. pointStyle: false,
  575. }
  576. ]
  577. }
  578. }
  579. );
  580. });
  581. }
  582. function updateChart() {
  583. //networkStatisticChart.data.datasets[0].data = rxValues;
  584. //networkStatisticChart.data.datasets[1].data = txValues;
  585. if (networkStatisticChart != undefined){
  586. networkStatisticChart.update();
  587. }
  588. }
  589. function updateChartSize(){
  590. let newSize = $("#networkActWrapper").width() - 300;
  591. if (window.innerWidth > 750){
  592. newSize = window.innerWidth - $(".toolbar").width() - 500;
  593. }else{
  594. newSize = $("#networkActWrapper").width() - 500;
  595. }
  596. if (networkStatisticChart != undefined){
  597. networkStatisticChart.resize(newSize, 200);
  598. }
  599. }
  600. function handleChartAccumulateResize(){
  601. $("#networkActivity").hide();
  602. $("#networkActivityPlaceHolder").show();
  603. if (chartResizeTimeout != undefined){
  604. clearTimeout(chartResizeTimeout);
  605. }
  606. chartResizeTimeout = setTimeout(function(){
  607. chartResizeTimeout = undefined;
  608. $("#networkActivityPlaceHolder").hide();
  609. $("#networkActivity").show();
  610. updateChartSize();
  611. }, 300);
  612. }
  613. var chartResizeTimeout;
  614. window.addEventListener('resize', () => {
  615. handleChartAccumulateResize();
  616. });
  617. //Bind event to tab switch
  618. tabSwitchEventBind["status"] = function(){
  619. //On switch over to this page, resize the chart
  620. handleChartAccumulateResize();
  621. }
  622. window.addEventListener("focus", function(event){
  623. handleChartAccumulateResize();
  624. });
  625. //Initialize chart data
  626. initChart();
  627. fetchData();
  628. setInterval(fetchData, 1000);
  629. </script>