uptime.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <div id="utmrender" class="ui basic segment">
  2. <div class="ui basic segment">
  3. <h4 class="ui header">
  4. <i class="red remove icon"></i>
  5. <div class="content">
  6. Uptime Monitoring service is currently unavailable
  7. <div class="sub header">This might cause by an error in cluster communication within the host servers. Please wait for administrator to resolve the issue.</div>
  8. </div>
  9. </h4>
  10. </div>
  11. </div>
  12. <div align="center">
  13. <button class="ui basic circular green icon button"><i class="refresh icon"></i></button>
  14. </div>
  15. <script>
  16. function initUptimeTable(){
  17. $.get("/api/utm/list", function(data){
  18. let records = data;
  19. renderRecords(records);
  20. })
  21. }
  22. initUptimeTable();
  23. //For every 5 minutes
  24. setInterval(function(){
  25. $.get("/api/utm/list", function(data){
  26. console.log("Status Updated");
  27. records = data;
  28. renderRecords(records);
  29. });
  30. }, (300 * 1000));
  31. function renderRecords(records){
  32. $("#utmrender").html("");
  33. for (let [key, value] of Object.entries(records)) {
  34. renderUptimeData(key, value);
  35. }
  36. }
  37. function format_time(s) {
  38. const date = new Date(s * 1e3);
  39. return(date.toLocaleString());
  40. }
  41. function renderUptimeData(key, value){
  42. if (value.length == 0){
  43. return
  44. }
  45. let id = value[0].ID;
  46. let name = value[0].Name;
  47. let url = value[0].URL;
  48. let protocol = value[0].Protocol;
  49. //Generate the status dot
  50. let statusDotList = ``;
  51. for(var i = 0; i < (288 - value.length); i++){
  52. //Padding
  53. statusDotList += `<div class="padding statusDot"></div>`
  54. }
  55. let ontimeRate = 0;
  56. for (var i = 0; i < value.length; i++){
  57. //Render status to html
  58. let thisStatus = value[i];
  59. let dotType = "";
  60. if (thisStatus.Online){
  61. if (thisStatus.StatusCode < 200 || thisStatus.StatusCode >= 300){
  62. dotType = "error";
  63. }else{
  64. dotType = "online";
  65. }
  66. ontimeRate++;
  67. }else{
  68. dotType = "offline";
  69. }
  70. let datetime = format_time(thisStatus.Timestamp);
  71. statusDotList += `<div title="${datetime}" class="${dotType} statusDot"></div>`
  72. }
  73. ontimeRate = ontimeRate / value.length * 100;
  74. let ontimeColor = "#df484a"
  75. if (ontimeRate > 0.8){
  76. ontimeColor = "#3bd671";
  77. }else if(ontimeRate > 0.5) {
  78. ontimeColor = "#f29030";
  79. }
  80. //Check of online status now
  81. let currentOnlineStatus = "Unknown";
  82. let onlineStatusCss = ``;
  83. if (value[value.length - 1].Online){
  84. currentOnlineStatus = `<i class="circle icon"></i> Online`;
  85. onlineStatusCss = `color: #3bd671;`;
  86. }else{
  87. currentOnlineStatus = `<i class="circle icon"></i> Offline`;
  88. onlineStatusCss = `color: #df484a;`;
  89. }
  90. //Generate the html
  91. $("#utmrender").append(`<div class="ui basic segment statusbar">
  92. <div class="domain">
  93. <div style="position: absolute; top: 0; right: 0.4em;">
  94. <p class="onlineStatus" style="display: inline-block; font-size: 1.3em; padding-right: 0.5em; padding-left: 0.3em; ${onlineStatusCss}">${currentOnlineStatus}</p>
  95. </div>
  96. <div>
  97. <h3 class="ui header" style="margin-bottom: 0.2em;">${name}</h3>
  98. <a href="${url}" target="_blank">${url}</a> | <span style="color: ${ontimeColor};">${(ontimeRate).toFixed(2)}%<span>
  99. </div>
  100. <div class="ui basic label protocol" style="position: absolute; bottom: 0; right: 0.2em; margin-bottom: -0.6em;">
  101. proto: ${protocol}
  102. </div>
  103. </div>
  104. <div class="status" style="marign-top: 1em;">
  105. ${statusDotList}
  106. </div>
  107. <div class="ui divider"></div>
  108. </div>`);
  109. }
  110. </script>