<!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%;">
                <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 = '';
        tbody.empty();
        if (data && data.length) {
            data.forEach((obj)=>{
                const {
                    errDesc, etcCnt, lastRegDate, processId, processNm,
                    rcvCnt, runState, serverIp, serverNm, sndCnt, errTimeGap
                } = 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>
                            <td></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);
    }
</script>