<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;
    }
    .time, .app, .type, .route, .api, .uid, .code, .preqid, .reqid, .script, .message, .stack .useragent, .line, .column, .hostname{
        word-wrap: break-word;
        word-break:break-all;
    }

pre {
    padding: 10px;
    overflow: hidden;

    font-family: consolas,monospace;

    word-wrap: break-word;
    word-break:break-all;
}

.errdetail {
    margin-top: 10px;

    background-color: #fff;
}
.errheader {
    padding: 10px;

    border-bottom: 1px solid #d6d2d2;
}
.code-line {
    padding: 4px;
}
.code-line.heightlight {
    color: #fff;
    background-color: #6c5fc7;
}

</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">
            <thead class="">
            <tr>
                <td>时间</td>
                <td>应用</td>
                <td>类型</td>
                <td>路由</td>
                <td>接口名</td>
                <td>错误状态码</td>
                <td>操作</td>
            </tr>
            </thead>

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

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="display:table;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">详细信息</h4>
                </div>
                <div class="modal-body">
                    <table id="table-servers" class="table table-striped table-bordered">
                        <thead class="">
                        <tr>
                        </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td width="12%">时间</td>
                                <td class="time"></td>
                            </tr>
                            <tr>
                                <td>应用</td>
                                <td class="app"></td>
                            </tr>
                            <tr>
                                <td>类型</td>
                                <td class="type"></td>
                            </tr>
                            <tr>
                                <td>主机</td>
                                <td class="hostname"></td>
                            </tr>
                            <tr>
                                <td>路由</td>
                                <td class="route"></td>
                            </tr>
                            <tr>
                                <td>接口名</td>
                                <td class="api"></td>
                            </tr>
                            <tr>
                                <td>用户标识</td>
                                <td class="uid"></td>
                            </tr>
                            <tr>
                                <td>useragent</td>
                                <td class="useragent"></td>
                            </tr>
                            <tr>
                                <td>错识状态码</td>
                                <td class="code"></td>
                            </tr>
                            <tr>
                                <td>父请求标识</td>
                                <td class="preqid"></td>
                            </tr>
                            <tr>
                                <td>请求标识</td>
                                <td class="reqid"></td>
                            </tr>
                            <tr>
                                <td>行号</td>
                                <td class="line"></td>
                            </tr>
                            <tr>
                                <td>列号</td>
                                <td class="column"></td>
                            </tr>
                            <tr>
                                <td>脚本</td>
                                <td class="script"></td>
                            </tr>
                            <tr>
                                <td>接口返回消息</td>
                                <td class="message"></td>
                            </tr>
                            <tr>
                                <td>错误堆栈</td>
                                <td class="stack"></td>
                            </tr>
                            <tr class='js-source'>
                                <td>源文件</td>
                                <td><pre class="source"></pre></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    function encodeHTML(str) {
        if(!str || str.length == 0) return "";
        return str.replace(/&/g, "&#38;").replace(/</g, "<").replace(/>/g, ">").replace(/\'/g, "'");
    }

    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 formateDate(d) {
        return (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() +
        '  ' + ("0" + d.getHours()).slice(-2) + ":" +
        ( "0" + d.getMinutes()).slice(-2) + ":" +
        ( "0" + d.getSeconds()).slice(-2)
    }

    function initTable() {
        dataTable = $("#table-servers").DataTable({
            pageLength: 20,
            serverSide: true,
            retrieve: true,
            searching: false,
            ajax: ajaxUrl(),
            dataSrc: 'data',
            pageLength: 25,
            ordering: false,
            columns: [
                {data: 'time'},
                {data: 'app'},
                {data: 'type'},
                {data: 'route'},
                {data: 'api'},
                {data: 'code'},
                {data: 'detail'},
            ],
            data: [{
                time: "",
                app: "",
                type: "",
                route: "",
                api: "",
                code: "",
                detail: ""
            }],
            columnDefs: [
                {
                    render: function(data, type, row) {
                        if (!data) {
                            return '';
                        }

                        return formateDate(new Date(data));
                    },
                    targets: 0,
                    width: '12%'
                },{
                    width: '10%',
                    targets: 1
                },{
                    width: '5%',
                    targets: 2
                },{
                    width: '20%',
                    targets: 3
                },{
                    width: '20%',
                    targets: 4
                },{
                    width: '8%',
                    targets: 5
                },{
                    targets: -1,
                    data: null,
                    render: function ( data, type, row ) {
                        return '<button>查看</button>';
                    }
                }

            ]

        });

        $('#myModal').on('hidden.bs.modal', function() {
            clearModalData();
        });

        $('#table-servers tbody').on( 'click', 'button', function (e) {
            var data = dataTable.row($(this).parents('tr')).data();

            setModalData(data);
            $('#myModal').modal('show');

            e.preventDefault();
        });
    }

    function clearModalData() {
        $('.time').text('');
        $('.app').text('');
        $('.type').text('');
        $('.route').text('');
        $('.api').text('');
        $('.uid').text('');
        $('.code').text('');
        $('.preqid').text('');
        $('.reqid').text('');
        $('.script').text('');
        $('.message').text('');
        $('.stack').text('');
        $('.useragent').text('');
        $('.line').text('');
        $('.column').text('');
        $('.hostname').text('');
        $('.source').html('');
    }

    function setModalData(data) {
        $('.time').text(formateDate(new Date(data.time)));
        $('.app').text(data.app);
        $('.type').text(data.type);
        $('.route').text(data.route);
        $('.api').text(data.api);
        $('.uid').text(data.uid);
        $('.code').text(data.code);
        $('.preqid').text(data.preqid);
        $('.reqid').text(data.reqid);
        $('.script').text(data.script);
        $('.message').text(data.message);
        $('.stack').text(data.stack);
        $('.useragent').text(data.useragent);
        $('.line').text(data.line);
        $('.column').text(data.column);
        $('.hostname').text(data.hostname);

        $('.source').data('url', data.script);
        $('.source').data('line', data.line);
        $('.source').data('column', data.column);

        if (data.type !== 'client') {
            $('.js-source').addClass('hide');
            return;
        }

        if (!/cdn.yoho.cn/.test(data.script)) {
            $('.js-source').addClass('hide');
            return;
        }

        $('.js-source').removeClass('hide');
        errorDetail(data.script, data.line, data.column);
    }

    function clickErrorDetail() {
        $('.source').on('click', function() {
            $this = $('.source');
            errorDetail($this.data('url'), $this.data('line'), $this.data('column'));
        })
    }

    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).valueOf();
                var selectedEndTime = moment().valueOf();

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

                var selectedStartTime = moment(start.format('YYYY-MM-DD')).valueOf();
                var selectedEndTime = moment(end.add(1, 'd').format('YYYY-MM-DD')).valueOf();

                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').select2({
            width: 'resolve'
        });

        $('#selectedHost').on('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').select2( {
            width: 'resolve'
        });

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

        $('#selectedApi').select2({
            width: 'resolve'
        });

        $('#selectedApi').on("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('').change();
        $('#selectedApp').val('');
        $('#selectedType').val('');
        $('#selectedCode').val('');

        $('#selectedRoute').val('').change();
        $('#selectedApi').val('').change();
        $('#reportrange').trigger('cancel.daterangepicker');

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

    function errorDetail(script, line, column) {
        if (!/cdn.yoho.cn/.test(script)) {
            return ;
        }

        $.get('/profile/errordetail', {
            url: script,
            line: line,
            column: column
        }).then(res => {
            if (!res.file) {
                return;
            }

            var lines = res.file.split('\n');

            var row = res.row,
                len = lines.length - 1;

            var start = row - 10 >= 0? row - 10: 0,
                end = start + 19 >= len? len: start + 19; // 最多展示 20 行

            var newLines = [];
            for(var i = start; i <= end; i++) {
                newLines.push('<div class="code-line '+ (i + 1 == row? 'heightlight': '')+ '">' + (i+1) + '.    ' + encodeHTML(lines[i]) + '</div>');
            }

            var html = '<div class="errdetail"><div class="errheader">' + res.source + ' at line ' + res.row + ':' + res.column + '</div>' + 
                '<pre class="errCode">' + newLines.join("") + '</pre></div>';

            $('.source').html(html);
        })
    }

</script>