<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/xterm.css}"/>
</head>

<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header">
        <span><i class="fa fa-table"></i> 历史日志</span>
        <div class="layui-inline">
            <label class="layui-form-label">环境</label>
            <div class="layui-input-block">
                <select id="getPageByEnv" name="env" onchange="getPageByEnv()"
                        mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select id="getPageByEnv1" name="env" onchange="getPageByEnv()"
                        mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">应用</label>
            <div class="layui-input-block">
                <select id="getPageByEnv2" name="app" onchange="getPageByEnv()"
                        mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">机器</label>
            <div class="layui-input-block">
                <select id="getPageByEnv3" name="host" onchange="getPageByEnv()"
                        mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
            </div>
        </div>
    </div>
    <div class="layui-card-body" style="background: black">
        <ul id="applog" class="flow-default layui-timeline" style="height: 500px;overflow: auto">
        </ul>
    </div>
</div>
</body>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    function getPageByEnv() {
        console.log('切换机器')
        layer.msg('切换机器', {offset: '15px', time: 5000, icon: 1});
    }

    layui.use('flow', function(){
        var flow = layui.flow;
        flow.load({
            elem: '#applog' //流加载容器
            ,scrollElem: '#applog' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,done: function(page, next){ //执行下一页的回调
                $.ajax({
                    url: '/api/app/status/log',
                    type: 'get',
                    success: function (result) {
                        if (result.code === 0) {
                            var list = []
                            for (payload of result.data) {
                                var app = '<span style="color: yellowgreen">' +  payload.app + ' ' + '</span>'
                                var host = '<span style="color: green">' +  payload.host + ' ' + '</span>'
                                var timestamp = payload.timestamp
                                var thread = payload.thread
                                var level
                                if (payload.level === 'INFO') {
                                    level = '<span style="color: green">' +  payload.level + ' ' + '</span>'
                                } else if (payload.level === 'ERROR') {
                                    level = '<span style="color: red">' +  payload.level + ' ' + '</span>'
                                } else {
                                    level = '<span style="color: yellow">' +  payload.level + ' ' + '</span>'
                                }

                                var logger = '<span style="color: wheat">' +  payload.logger + ' ' + '</span>'
                                var message = '<span style="color: white">' +  payload.message + ' ' + '</span>'

                                var text = app + ' ' +  host + ' ' + timestamp + ' ' + thread + ' ' + level + ' ' + logger + ' ' + message + '<br>'
                                list.push(text)
                            }

                            next(list.join(''), page < 10);
                        }
                    }
                });
            }
        });
    });
</script>
</html>