Merge branch 'feature/report' into 'master'

fix



See merge request !12

@@ -36,6 +36,9 @@ const profile_sql = {
     },
     error() {
         return SqlBuilder.of(TABLE.REPORT);
+    },
+    server() {
+        return SqlBuilder.of(TABLE.SERVER);
     }
 };
 
@@ -84,6 +87,16 @@ function handleRows(rows) {
             return _.isNil(n) ? 1 : n + 1
         });
 
+        _.updateWith(acc, [cur.route, 'detail'], function(n) {
+            if (_.isNil(n)) {
+                return [cur];
+            } else {
+                n.push(cur);
+            }
+
+            return n;
+        });
+
         return acc;
     }, {});
 
@@ -94,7 +107,9 @@ function handleRows(rows) {
             mean: 0,
             DOMContentLoaded: 0,
             load: 0,
-            firstscreen: 0
+            firstscreen: 0,
+            detail: []
+
         };
 
         result.route = k;
@@ -103,6 +118,7 @@ function handleRows(rows) {
         result.load = +(_.get(v, 'load.duration', 0) / _.get(v, 'load.count', 1)).toFixed(0);
         result.firstscreen = +(_.get(v, 'firstscreen.duration', 0) / _.get(v, 'firstscreen.count', 1)).toFixed(0);
         result.mean = result.load + result.DOMContentLoaded + result.firstscreen;
+        result.detail = v.detail;
 
         return result;
     });

@@ -56,12 +56,47 @@
                 <td >load</td>
                 <td >firstscreen</td>
                 <td >DOMContentLoaded</td>
+                <td >详细情况</td>
             </thead>
 
             <tbody>
             </tbody>
         </table>
     </div>
+
+
+    <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-detail" class="table table-striped table-bordered">
+                        <thead class="">
+                        <tr>
+                            <td >time</td>
+                            <td >app</td>
+                            <td >route</td>
+                            <td >type</td>
+                            <td >duration</td>
+                            <td >reqID</td>
+                            <td >udid</td>
+                            <td >uid</td>
+                            <td >useragent</td>
+                        </thead>
+
+                        <tbody>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <!-- panel -->
 </div>
 
@@ -69,7 +104,7 @@
 <script>
     var selectedServer, selectedStarTime, selectedEndTime, selectedApp, lastTime;
     var data_end_point = '/profile/mean.json';
-    var dataTable = null;
+    var dataTable = null, detailTable = null;
 
     function ajaxUrl() {
         let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;
@@ -111,6 +146,7 @@
                 {data: 'load'},
                 {data: 'firstscreen'},
                 {data: 'DOMContentLoaded'},
+                {data: 'detail'}
             ],
             data: [{
                 route: '',
@@ -118,9 +154,68 @@
                 mean: 0,
                 load: 0,
                 firstscreen: 0,
-                DOMContentLoaded: 0
+                DOMContentLoaded: 0,
+                detail: ''
             }],
-            order: [[ 2, "desc" ]]
+            order: [[ 2, "desc" ]],
+            columnDefs: [ {
+                targets: -1,
+                data: null,
+                render: function ( data, type, row ) {
+                    return '<button  data-toggle="modal" data-target="#myModal">查看</button>';
+                },
+            }]
+        });
+
+        $('#table-servers tbody').on( 'click', 'button', function (e) {
+            var data = dataTable.row($(this).parents('tr')).data();
+
+            var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
+
+            modal.on('show.bs.modal', function () {
+                detailTable.clear().rows.add(data.detail).draw();
+            });
+
+            e.preventDefault();
+        });
+
+        detailTable = $("#table-detail").DataTable({
+            pageLength: 20,
+            retrieve: true,
+            searching: true,
+            dataSrc: 'data',
+            pageLength: 25,
+            columns: [
+                {data: 'time'},
+                {data: 'app'},
+                {data: 'route'},
+                {data: 'type'},
+                {data: 'duration'},
+                {data: 'reqID'},
+                {data: 'udid'},
+                {data: 'uid'},
+                {data: 'useragent'}
+            ],
+            data: [{
+                time: '',
+                app: '',
+                duration: '',
+                reqID: '',
+                route: '',
+                type: '',
+                udid: '',
+                uid: '',
+                useragent: ''
+            }],
+            order: [[ 0, "desc" ]],
+            columnDefs: [
+                {
+                    render: function(data, type, row) {
+                        return moment(data).format('YYYY/MM/DD HH:MM:ss');
+                    },
+                    targets: 0
+                }
+            ],
         });
     }
 

@@ -77,7 +77,7 @@
 
         <li class="parent"><a><i class="fa fa-list"></i> <span>性能统计</span></a>
             <ul class="children">
-                <li><a href="/profile/mean"> <span>调用时间统计</span></a></li>
+                <li><a href="/profile/mean"> <span>客户端调用时间统计</span></a></li>
                 <li><a href="/profile/time"> <span>调用时间统计</span></a></li>
                 <li><a href="/profile/error"> <span>错误信息统计</span></a></li>
             </ul>