<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>프로세스 상태 모니터링</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/process_stat_monitoring.css">
    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <script src="/static/js/common.js"></script>
</head>
<body>
<div class="body-wrap">
    <div class="header-box">
        <div class="title">프로세스 상태 모니터링</div>
        <div>
            <table style="width: 100%;" class="monitoring-table">
                <colgroup>
                    <col width="18px">
                    <col width="8%">
                    <col width="15%">
                    <col width="10%">
                    <col width="10%">
                    <col width="15%">
                    <col width="4%">
                    <col width="calc(20% - 18px)">
                    <col width="6%">
                    <col width="6%">
                    <col width="6%">
                </colgroup>
                <thead>
                    <tr>
                        <th></th>
                        <th>ID</th>
                        <th>프로세스명</th>
                        <th>서버명</th>
                        <th>서버 IP</th>
                        <th>상태업데이트시각</th>
                        <th>상태</th>
                        <th>오류내용</th>
                        <th>수신건수</th>
                        <th>송신건수</th>
                        <th>기타건수</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<script>
    const tbody = $('tbody');
    let lastCallTime = 0;
    getAllProcessStatusData()
    function getAllProcessStatusData() {
        callApi('/api/monitoring/getAllProcessStatus', 'POST', null, receiveProcessStatusData, null)
    }

    function loop(currentTime) {
        if (currentTime - lastCallTime >= 5000) {
            getAllProcessStatusData();
            lastCallTime = currentTime;
        }

        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);

    function receiveProcessStatusData(data) {
        let str = '';
        const checkInput = $('input[type="checkbox"]:checked');
        let checkId = checkInput.length ? checkInput.attr('id') : "";

        tbody.empty();
        if (data && data.length) {
            data.forEach((obj)=>{
                const {
                    errDesc, etcCnt, lastRegDate, processId, processNm,
                    rcvCnt, runState, serverIp, serverNm, sndCnt, errTimeGap, infoUrl
                } = obj;
                let now = new Date();
                let futureTime = new Date(now.getTime() - (errTimeGap * 1000));
                let className = '';
                if (runState !== '0' && (!lastRegDate || new Date(lastRegDate) < futureTime)) {
                    className = 'red';
                }
                str +=`<tr ondblclick="showUrl('${infoUrl}')" onclick="rowClick(this, null, 'monitoring-table tbody')">
                            <td><input id="check_${obj.processId}" value="${obj.processId}" type="checkbox"
                                style="display: none" onchange="checkEvent(this, 'monitoring-table tbody')"></td>
                            <td>${processId}</td>
                            <td>${processNm || '-'}</td>
                            <td>${serverNm || '-'}</td>
                            <td>${serverIp || '-'}</td>
                            <td class="${className}">${lastRegDate || '-'}</td>
                            <td class="comm${runState}"><div></div></td>
                            <td>${errDesc || ''}</td>
                            <td>${rcvCnt ? rcvCnt.toLocaleString() : 0}</td>
                            <td>${sndCnt ? sndCnt.toLocaleString() : 0}</td>
                            <td>${etcCnt ? etcCnt.toLocaleString() : 0}</td>
                       </tr>`
            });
        }
        else {
            str += '<tr><td></td><td colspan="10">표출 정보 없음</td></tr>'
        }
        tbody.html(str);
        if (checkId) { //선택 된 Tr 재클릭
            $('#' + checkId).parent().parent().click();
        }
    }

    /**
     * table row click
     * @param el this
     * @param method row click method
     * @param tbody row tbody
     */
    function rowClick(el, method, tbody) {
        $('.' + tbody).find('tr input[type="checkbox"]:checked').prop('checked', false);
        const check = $(el).children().eq(0).find('input[type="checkbox"]');
        check.prop('checked', true).trigger('change');
        if (method) {
            method(check.val());
        }
    }
    /**
     * Table Row checkbox change event
     * @param check this
     * @param el table
     */
    function checkEvent(check, el) {
        $('.' + el + ' tr.on').removeClass('on');
        $(check).parent().parent().addClass('on');
    }

    function showUrl(url) {
        if (url !== 'null' && url) {
            window.open(url, '세부정보', "width = 1200, height = 700, top = 400, left = 400, location = no");
        }
    }
</script>