Zoraxy/web/components/uptime.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Uptime Monitor</h2>
        <p>Check the online state of proxied targets</p>
    </div>
    <div class="ui divider"></div>
    <div id="utmrender" class="ui basic segment">
        <div class="ui basic segment">
            <h4 class="ui header">
                <i class="red remove icon"></i>
                <div class="content">
                    Uptime Monitoring service is currently unavailable
                    <div class="sub header">This might be caused by an error in cluster communication within the host servers. Please wait for administrator to resolve the issue.</div>
                </div>
            </h4> 
        </div>
    </div>
    <div align="center">
        <button class="ui basic circular green icon button" onclick="reloadUptimeList();"><i class="refresh icon"></i></button>   
    </div>
</div>


<script>
    var uptime5xxErrorMessage = {
        "500": "Internal Server Error",
        "501": "Not Implemented",
        "502": "Bad Gateway",
        "503": "Service Unavailable",
        "504": "Gateway Timeout",
        "505": "HTTP Version Not Supported",
        "506": "Variant Also Negotiates",
        "507": "Insufficient Storage",
        "508": "Loop Detected",
        "510": "Not Extended",
        "511": "Network Authentication Required",
        "520": "Web Server Returned an Unknown Error (Cloudflare)",
        "521": "Web Server is Down (Cloudflare)",
        "522": "Connection Timed Out (Cloudflare)",
        "523": "Origin is Unreachable (Cloudflare)",
        "524": "A Timeout Occurred (Cloudflare)",
        "525": "SSL Handshake Failed (Cloudflare)",
        "526": "Invalid SSL Certificate (Cloudflare)",
        "527": "Railgun Error (Cloudflare)",
        "530": "Site is Frozen (Pantheon)"
    }

        $('#utmEnable').checkbox({
          onChange: function() {
            var utmEnable = $('input[name="utmEnable"]').is(":checked");
            $.post({
              url: '/api/toggle-utm',
              data: {utmEnable: utmEnable},
              success: function(response) {
                console.log(response);
              },
              error: function(error) {
                console.log(error);
              }
            });
          }
        });

    function initUptimeTable(){
        $.get("/api/utm/list", function(data){
            let records = data;
            renderRecords(records);
        })
    }
    initUptimeTable();

    function reloadUptimeList(){
        $("#utmrender").html(`<div class="ui segment">
        <div class="ui active inverted dimmer" style="z-index: 2;">
            <div class="ui text loader">Loading</div>
        </div>
        <br><br><br><br>
        </div>`);
        setTimeout(initUptimeTable, 300);
    }

    //For every 5 minutes
    setInterval(function(){
        $.get("/api/utm/list", function(data){
            console.log("Status Updated");
            records = data;
            renderRecords(records);
        });
    }, (300 * 1000));
    
    function renderRecords(records){
        $("#utmrender").html("");
        for (let [key, value] of Object.entries(records)) {
            renderUptimeData(key, value);
        }
    }

    function format_time(s) {
        const date = new Date(s * 1e3);
        return(date.toLocaleString());
    }

    function resolveUptime5xxErrorMessage(errorCode){
        if (uptime5xxErrorMessage[errorCode] != undefined){
            return uptime5xxErrorMessage[errorCode]
        }else{
            return "Unknown Error";
        }
    }


    function renderUptimeData(key, value){
        if (value.length == 0){
            return
        }

        let id = value[0].ID;
        let name = value[0].Name;
        let url = value[value.length - 1].URL;
        let protocol = value[0].Protocol;

        //Generate the status dot
        let statusDotList = ``;
        for(var i = 0; i < (288 - value.length); i++){
            //Padding
            statusDotList += `<div class="padding statusDot"></div>`
        }

        let ontimeRate = 0;
        for (var i = 0; i < value.length; i++){
            //Render status to html
            let thisStatus = value[i];
            let dotType = "";
            let statusCode = thisStatus.StatusCode;

            if (!thisStatus.Online && statusCode == 0){
                dotType = "offline";
            }else if (statusCode < 200){
                //1xx
                dotType = "error";
                ontimeRate++;
            }else if (statusCode < 300){
                //2xx
                dotType = "online";
                ontimeRate++;
            }else if (statusCode < 400){
                //3xx
                dotType = "online";
                ontimeRate++;
            }else if (statusCode < 500){
                //4xx
                dotType = "error";
                ontimeRate++;
            }else if (statusCode < 600){
                //5xx
                dotType = "error";
            }else {
                dotType = "offline";
            }
        
            let datetime = format_time(thisStatus.Timestamp);
            statusDotList += `<div title="${datetime}" class="${dotType} statusDot"></div>`
        }

        ontimeRate = ontimeRate / value.length * 100;
        let ontimeColor = "#df484a"
        if (ontimeRate > 0.8){
            ontimeColor = "#3bd671";
        }else if(ontimeRate > 0.5) {
            ontimeColor = "#f29030";
        }
        //Check of online status now
        let currentOnlineStatus = "Unknown";
        let onlineStatusCss = ``;
        let reminderEle = ``;
        if (value[value.length - 1].Online){
            currentOnlineStatus = `<i class="circle icon"></i> Online`;
            onlineStatusCss = `color: #3bd671;`;
        }else{
            if (value[value.length - 1].StatusCode >= 500 && value[value.length - 1].StatusCode < 600){
                var latestStatusCode = value[value.length - 1].StatusCode
                currentOnlineStatus = `<i class="exclamation circle icon"></i>${latestStatusCode} - ${resolveUptime5xxErrorMessage(latestStatusCode)}`;
                onlineStatusCss = `color: #f38020;`;
                reminderEle = `<small style="${onlineStatusCss}">Downstream proxy server is responsive but returning server error</small>`;
            }else if (value[value.length - 1].StatusCode >= 400 && value[value.length - 1].StatusCode <= 405){
                let latestStatusCode = value[value.length - 1].StatusCode;
                switch(latestStatusCode){
                    case 400:
                        currentOnlineStatus = `<i class="exclamation circle icon"></i> Bad Request`;
                        break;
                    case 401:
                        currentOnlineStatus = `<i class="exclamation circle icon"></i> Unauthorized`;
                        break;
                    case 403:
                        currentOnlineStatus = `<i class="exclamation circle icon"></i> Forbidden`;
                        break;
                    case 404: 
                        currentOnlineStatus = `<i class="exclamation circle icon"></i> Not Found`;
                        break; 
                    case 405: 
                        currentOnlineStatus = `<i class="exclamation circle icon"></i> Method Not Allowed`;
                        break;
                    default:
                        currentOnlineStatus = `<i class="exclamation circle icon"></i> Status Code: ${latestStatusCode}`;
                        break;
                }
                
                onlineStatusCss = `color: #f38020;`;
                reminderEle = `<small style="${onlineStatusCss}">Target online but not accessible</small>`;
            
            }else{
                currentOnlineStatus = `<i class="circle icon"></i> Offline`;
                onlineStatusCss = `color: #df484a;`;
            }
           
        }

        //Generate the html
        $("#utmrender").append(`<div class="ui basic segment statusbar">
            <div class="domain">
                <div style="position: absolute; top: 0; right: 0.4em;">
                    <p class="onlineStatus" style="display: inline-block; font-size: 1.2em; padding-right: 0.5em; padding-left: 0.3em; ${onlineStatusCss}">${currentOnlineStatus}</p>
                </div>
                <div>
                    <h3 class="ui header" style="margin-bottom: 0.2em;">${name}</h3>
                    <a href="${url}" target="_blank">${url}</a> | <span style="color: ${ontimeColor};">${(ontimeRate).toFixed(2)}%<span>
                </div>
                <div class="ui basic label protocol" style="position: absolute; bottom: 0; right: 0.2em; margin-bottom: -0.6em;">
                    proto: ${protocol}
                </div>
            </div>
            <div class="status" style="marign-top: 1em;">
                ${statusDotList}
            </div>
            ${reminderEle}
            <div class="ui divider"></div>
        </div>`);
    }
    
</script>