<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 -->

<div class="contentpanel page-servers">
    <div class="panel panel-primary-head">
        <div class="panel-heading" style="overflow: hidden">

            <div class="pull-left">
                <select id="selectedApp" class="selectpicker show-menu-arrow form-control" style="margin-left: 10px;">
                    <option value="default">全部</option>
                    <option value="pc">PC</option>
                    <option value="h5">H5</option>
                </select>
            </div>

            <div class="pull-left">
                <button id="search" 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>
            </thead>

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


<script>
    var selectedServer, selectedApp;
    var data_end_point = '/profile/server.json';
    var dataTable = null;

    function ajaxUrl() {
        let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;
        return url
    }

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

    function init() {
        selectedServer = 'aws';
        selectedApp = 'default';
    }

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

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

        });
    }

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

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

    function _handleChanged() {
        dataTable && dataTable.ajax.url(ajaxUrl()).load();
    }

</script>