<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="">性能监控</a></li>
                <li>错误分析</li>
            </ul>
            <h4>错误分析</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<style>
    .form-item {
        margin-right: 10px;
        margin-bottom: 10px;
    }
</style>


<div class="contentpanel page-servers">
    <div class="panel panel-default">
        <div class="panel-heading" style="overflow: hidden">
                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">主机</label>
                        <select id="selectedHost" class="form-control" >
                            <option value="">全部</option>
                            {{#each hostName}}
                                <option value="{{this}}">{{this}}</option>
                            {{/each}}
                        </select>
                </div>

                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">应用</label>
                        <select id="selectedApp" class="form-control" >
                            <option value="">全部</option>
                            {{#each app}}
                                <option value="{{this}}">{{this}}</option>
                            {{/each}}
                        </select>
                </div>

                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">类型</label>
                        <select id="selectedType" class="form-control" >
                            <option value="">全部</option>
                            {{#each type}}
                                <option value="{{this}}">{{this}}</option>
                            {{/each}}
                        </select>
                </div>

                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">时间</label>
                    <div id="reportrange" style="display: inline-block; background: #fff; cursor: pointer; padding: 9px 10px; border: 1px solid #ccc; width: 210px; color: black;">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                        <span></span> <b class="caret"></b>
                    </div>
                </div>

                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">错误编码</label>
                        <select id="selectedCode" class="form-control" >
                            <option value="">全部</option>
                            {{#each code}}
                                <option value="{{this}}">{{this}}</option>
                            {{/each}}
                        </select>
                </div>

                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">路由</label>
                        <select id="selectedRoute" class="form-control" >
                            <option value="">全部</option>
                            {{#each route}}
                                <option value="{{this}}">{{this}}</option>
                            {{/each}}
                        </select>
                </div>

                <div class="form-inline inline-block form-item">
                    <label for="appName" class="control-label">api</label>
                        <select id="selectedApi" class="form-control" >
                            <option value="">全部</option>
                            {{#each api}}
                                <option value="{{this}}">{{this}}</option>
                            {{/each}}
                        </select>
                </div>

                <div class="form-inline inline-block">
                    <button id="search" class="btn btn-info" style="margin-left: 20px;">查询</button>
                </div>

                <div class="form-inline inline-block">
                    <button id="clear" class="btn btn-info" style="margin-left: 20px;">清除</button>
                </div>

        </div>
        <!-- panel-heading -->

        <table id="table-servers" class="table table-striped table-bordered responsive">
            <thead class="">
            <tr>
                <th>时间</th>
                <th>应用</th>
                <th>类型</th>
                <th>请求ID</th>
                <td>用户ID</td>
                <td>访客ID</td>
                <td>路由</td>
                <td>接口名</td>
                <td>错误状态码</td>
                <!--<td>错误信息</td>-->
                <!--<td>出错文件</td>-->
                <!--<td>行号</td>-->
                <!--<td>列数</td>-->
                <!--<td>错误堆栈</td>-->
            </tr>
            </thead>

            <tbody>
            </tbody>
        </table>
    </div>
    <!-- panel -->
</div>


<script>

    var data_end_point = '/profile/error.json';
    var dataTable = null;

    var query = {
        hostname: '',
        app: '',
        type: '',
        time: '',
        code: '',
        route: '',
        api: ''
    };

    function qs(obj) {
        return Object.keys(obj).map(key  => {
            return `${key}=${encodeURIComponent(obj[key])}`;
        }).join('&')
    }

    function ajaxUrl() {
        let result =  `${data_end_point}?${qs(query)}`;
        return result;
    }

    $(function() {
        initTable();
        initSelect();
        initDatePicker();
    });

    function initTable() {
        dataTable = $("#table-servers").DataTable({
            pageLength: 20,
            serverSide: true,
            retrieve: true,
            searching: false,
            responsive: true,
            ajax: ajaxUrl(),
            dataSrc: 'data',
            pageLength: 25,
            columns: [
                {data: 'time'},
                {data: 'app'},
                {data: 'type'},
                {data: 'reqid'},
                {data: 'uid'},
                {data: 'udid'},
                {data: 'route'},
                {data: 'api'},
                {data: 'code', defaultContent: '无'},
//                {data: 'message', defaultContent: '无'},
//                {data: 'script', defaultContent: '无'},
//                {data: 'line'},
//                {data: 'column'},
//                {data: 'stack', defaultContent: '无'}
            ],
            data: [{
                time: "",
                app: "",
                type: "",
                reqid: "",
                uid: "",
                udid: "",
                route: "",
                api: "",
                code: "",
//                message: "",
//                script: "",
//                line: "",
//                column: "",
//                stack: ""
            }],
            columnDefs: [
                {
                    render: function(data, type, row) {
                        if (!data) {
                            return '';
                        }

                        return moment(data).format('YYYY/MM/DD HH:MM:ss');
                    },
                    targets: 0
                }
            ]

        });
    }

    const TIME = {
        '最近1分钟': [1, 'm'],
        '最近30分钟':  [30, 'm'],
        '最近1小时':  [1, 'h'],
        '最近3小时': [3, 'h'],
        '最近6小时': [6, 'h'],
        '最近12小时': [12, 'h']
    };

    function initDatePicker() {
        var first = '无';

        $('#reportrange span').html(first);

        lastTime = TIME[first];

        function cb(start, end, label) {
            if (label && label !== '自定义日期') {
                $('#reportrange span').html(label);

                var lastTime = TIME[label];
                var selectedStartTime = moment().subtract(...lastTime).unix();
                var selectedEndTime = moment().unix();

                query.time = `${selectedStartTime}:${selectedEndTime}`;
            } else if (label && label === '自定义日期'){
                $('#reportrange span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));

                var selectedStartTime = start.format('YYYY-MM-DD').unix();
                var selectedEndTime = end.format('YYYY-MM-DD').unix();

                query.time = `${selectedStartTime}:${selectedEndTime}`;
            }

        }

        $('#reportrange').daterangepicker({
            startDate: undefined,
            endDate: undefined,
            timePicker: true,
            timePicker24Hour: true,
            dateLimit: {
                days: 7
            },
            ranges: {
                '最近1分钟': [moment().subtract(1, 'minutes'), moment()],
                '最近30分钟': [moment().subtract(30, 'minutes'), moment()],
                '最近1小时': [moment().subtract(1, 'hours'), moment()],
                '最近3小时': [moment().subtract(3, 'hours'), moment()],
                '最近6小时': [moment().subtract(6, 'hours'), moment()],
                '最近12小时': [moment().subtract(12, 'hours'), moment()]
            },
            locale: {
                format: "YYYY-MM-DD",
                applyLabel: '确定',
                cancelLabel: '取消',
                weekLabel: 'W',
                customRangeLabel: '自定义日期',
                daysOfWeek: '一_二_三_四_五_六_日'.split('_'),
                monthNames: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
                firstDay: 1
            },
        }, cb);

        $('#reportrange').on('cancel.daterangepicker', function() {
            $('#reportrange').data('daterangepicker').setStartDate(undefined);
            $('#reportrange').data('daterangepicker').setEndDate(undefined);
            $('#reportrange span').html(first);
        });
    }

    function initSelect() {
        $('#selectedHost').change(function() {
            query.hostname = $('#selectedHost').val();
        });

        $('#selectedApp').change(function() {
            query.app = $('#selectedApp').val();
        });

        $('#selectedType').change(function() {
            query.type = $('#selectedType').val();
        });

        $('#selectedCode').change(function() {
            query.code = $('#selectedCode').val();
        });

        $('#selectedRoute').change(function() {
            query.route = $('#selectedRoute').val();
        });

        $('#selectedApi').change(function() {
            query.api = $('#selectedApi').val();
        });

        $('#search').on('click', () => {
            _handleChanged();
        });

        $('#clear').on('click', () => {
            clearSelect();
        })
    }

    function _handleChanged() {
        dataTable && dataTable.ajax.url(ajaxUrl()).load();
    }
    
    function clearSelect() {
        $('#selectedHost').val('');
        $('#selectedApp').val('');
        $('#selectedType').val('');
        $('#selectedCode').val('');
        $('#selectedRoute').val('');
        $('#selectedApi').val('');
        $('#reportrange').trigger('cancel.daterangepicker');
    }

</script>