Zoraxy/web/components/uptime.html

<!-- css override -->
<style>
    #utm{
        background-color: white;
        border-radius: 1em;
    }


    .domain{
        margin-bottom: 1em;
        position: relative;
    }

    .statusDot{
        height: 1.8em;
        border-radius: 0.4em;
        width: 0.4em;
        background-color: #e8e8e8;
        display:inline-block;
        cursor: pointer;
        margin-left: 0.1em;
    }
    
    .online.statusDot{
        background-color: #3bd671;
    }
    .error.statusDot{
        background-color: #f29030;
    }
    .offline.statusDot{
        background-color: #df484a;
    }
    .padding.statusDot{
        cursor: auto;
    }
    
</style>
<div id="utm" 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 cause by an error in cluster communication within the host servers. Please wait for administrator to resolve the issue.</div>
            </div>
        </h4> 
    </div>
</div>

<script>
    AOS.init();
    
    function initUptimeTable(){
        
    }
    let records = JSON.parse(`<?php echo file_get_contents("http://localhost:8089/")?>`);
    renderRecords(records);

    //For every 5 minutes
    setInterval(function(){
        $.get("api.php?token=fbda065b-3662-415b-af4d-41cb998e619d", function(data){
            console.log("Status Updated");
            records = data;
            renderRecords();
        });
    }, (300 * 1000));
    
    function renderRecords(){
        $("#utm").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 renderUptimeData(key, value){
        if (value.length == 0){
            return
        }

        let id = value[0].ID;
        let name = value[0].Name;
        let url = value[0].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 = "";
            if (thisStatus.Online){
                if (thisStatus.StatusCode < 200 || thisStatus.StatusCode >= 300){
                    dotType = "error";
                }else{
                    dotType = "online";
                }
                ontimeRate++;
            }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 = ``;
        if (value[value.length - 1].Online){
            currentOnlineStatus = `<i class="circle icon"></i> Online`;
            onlineStatusCss = `color: #3bd671;`;
        }else{
            currentOnlineStatus = `<i class="circle icon"></i> Offline`;
            onlineStatusCss = `color: #df484a;`;
        }

        //Generate the html
        $("#utm").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.3em; 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>
            <div class="ui divider"></div>
        </div>`);
    }
    
</script>