Authored by 周奇琪

Merge branch 'feature/report' into 'master'

fix



See merge request !12
@@ -36,6 +36,9 @@ const profile_sql = { @@ -36,6 +36,9 @@ const profile_sql = {
36 }, 36 },
37 error() { 37 error() {
38 return SqlBuilder.of(TABLE.REPORT); 38 return SqlBuilder.of(TABLE.REPORT);
  39 + },
  40 + server() {
  41 + return SqlBuilder.of(TABLE.SERVER);
39 } 42 }
40 }; 43 };
41 44
@@ -84,6 +87,16 @@ function handleRows(rows) { @@ -84,6 +87,16 @@ function handleRows(rows) {
84 return _.isNil(n) ? 1 : n + 1 87 return _.isNil(n) ? 1 : n + 1
85 }); 88 });
86 89
  90 + _.updateWith(acc, [cur.route, 'detail'], function(n) {
  91 + if (_.isNil(n)) {
  92 + return [cur];
  93 + } else {
  94 + n.push(cur);
  95 + }
  96 +
  97 + return n;
  98 + });
  99 +
87 return acc; 100 return acc;
88 }, {}); 101 }, {});
89 102
@@ -94,7 +107,9 @@ function handleRows(rows) { @@ -94,7 +107,9 @@ function handleRows(rows) {
94 mean: 0, 107 mean: 0,
95 DOMContentLoaded: 0, 108 DOMContentLoaded: 0,
96 load: 0, 109 load: 0,
97 - firstscreen: 0 110 + firstscreen: 0,
  111 + detail: []
  112 +
98 }; 113 };
99 114
100 result.route = k; 115 result.route = k;
@@ -103,6 +118,7 @@ function handleRows(rows) { @@ -103,6 +118,7 @@ function handleRows(rows) {
103 result.load = +(_.get(v, 'load.duration', 0) / _.get(v, 'load.count', 1)).toFixed(0); 118 result.load = +(_.get(v, 'load.duration', 0) / _.get(v, 'load.count', 1)).toFixed(0);
104 result.firstscreen = +(_.get(v, 'firstscreen.duration', 0) / _.get(v, 'firstscreen.count', 1)).toFixed(0); 119 result.firstscreen = +(_.get(v, 'firstscreen.duration', 0) / _.get(v, 'firstscreen.count', 1)).toFixed(0);
105 result.mean = result.load + result.DOMContentLoaded + result.firstscreen; 120 result.mean = result.load + result.DOMContentLoaded + result.firstscreen;
  121 + result.detail = v.detail;
106 122
107 return result; 123 return result;
108 }); 124 });
@@ -56,12 +56,47 @@ @@ -56,12 +56,47 @@
56 <td >load</td> 56 <td >load</td>
57 <td >firstscreen</td> 57 <td >firstscreen</td>
58 <td >DOMContentLoaded</td> 58 <td >DOMContentLoaded</td>
  59 + <td >详细情况</td>
59 </thead> 60 </thead>
60 61
61 <tbody> 62 <tbody>
62 </tbody> 63 </tbody>
63 </table> 64 </table>
64 </div> 65 </div>
  66 +
  67 +
  68 + <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  69 + <div class="modal-dialog modal-lg" role="document" style="display:table;">
  70 + <div class="modal-content">
  71 + <div class="modal-header">
  72 + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  73 + <h4 class="modal-title" id="myModalLabel">详细信息</h4>
  74 + </div>
  75 + <div class="modal-body">
  76 + <table id="table-detail" class="table table-striped table-bordered">
  77 + <thead class="">
  78 + <tr>
  79 + <td >time</td>
  80 + <td >app</td>
  81 + <td >route</td>
  82 + <td >type</td>
  83 + <td >duration</td>
  84 + <td >reqID</td>
  85 + <td >udid</td>
  86 + <td >uid</td>
  87 + <td >useragent</td>
  88 + </thead>
  89 +
  90 + <tbody>
  91 + </tbody>
  92 + </table>
  93 + </div>
  94 + <div class="modal-footer">
  95 + <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  96 + </div>
  97 + </div>
  98 + </div>
  99 + </div>
65 <!-- panel --> 100 <!-- panel -->
66 </div> 101 </div>
67 102
@@ -69,7 +104,7 @@ @@ -69,7 +104,7 @@
69 <script> 104 <script>
70 var selectedServer, selectedStarTime, selectedEndTime, selectedApp, lastTime; 105 var selectedServer, selectedStarTime, selectedEndTime, selectedApp, lastTime;
71 var data_end_point = '/profile/mean.json'; 106 var data_end_point = '/profile/mean.json';
72 - var dataTable = null; 107 + var dataTable = null, detailTable = null;
73 108
74 function ajaxUrl() { 109 function ajaxUrl() {
75 let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`; 110 let url = `${data_end_point}?app=${selectedApp}&server=${selectedServer}`;
@@ -111,6 +146,7 @@ @@ -111,6 +146,7 @@
111 {data: 'load'}, 146 {data: 'load'},
112 {data: 'firstscreen'}, 147 {data: 'firstscreen'},
113 {data: 'DOMContentLoaded'}, 148 {data: 'DOMContentLoaded'},
  149 + {data: 'detail'}
114 ], 150 ],
115 data: [{ 151 data: [{
116 route: '', 152 route: '',
@@ -118,9 +154,68 @@ @@ -118,9 +154,68 @@
118 mean: 0, 154 mean: 0,
119 load: 0, 155 load: 0,
120 firstscreen: 0, 156 firstscreen: 0,
121 - DOMContentLoaded: 0 157 + DOMContentLoaded: 0,
  158 + detail: ''
122 }], 159 }],
123 - order: [[ 2, "desc" ]] 160 + order: [[ 2, "desc" ]],
  161 + columnDefs: [ {
  162 + targets: -1,
  163 + data: null,
  164 + render: function ( data, type, row ) {
  165 + return '<button data-toggle="modal" data-target="#myModal">查看</button>';
  166 + },
  167 + }]
  168 + });
  169 +
  170 + $('#table-servers tbody').on( 'click', 'button', function (e) {
  171 + var data = dataTable.row($(this).parents('tr')).data();
  172 +
  173 + var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
  174 +
  175 + modal.on('show.bs.modal', function () {
  176 + detailTable.clear().rows.add(data.detail).draw();
  177 + });
  178 +
  179 + e.preventDefault();
  180 + });
  181 +
  182 + detailTable = $("#table-detail").DataTable({
  183 + pageLength: 20,
  184 + retrieve: true,
  185 + searching: true,
  186 + dataSrc: 'data',
  187 + pageLength: 25,
  188 + columns: [
  189 + {data: 'time'},
  190 + {data: 'app'},
  191 + {data: 'route'},
  192 + {data: 'type'},
  193 + {data: 'duration'},
  194 + {data: 'reqID'},
  195 + {data: 'udid'},
  196 + {data: 'uid'},
  197 + {data: 'useragent'}
  198 + ],
  199 + data: [{
  200 + time: '',
  201 + app: '',
  202 + duration: '',
  203 + reqID: '',
  204 + route: '',
  205 + type: '',
  206 + udid: '',
  207 + uid: '',
  208 + useragent: ''
  209 + }],
  210 + order: [[ 0, "desc" ]],
  211 + columnDefs: [
  212 + {
  213 + render: function(data, type, row) {
  214 + return moment(data).format('YYYY/MM/DD HH:MM:ss');
  215 + },
  216 + targets: 0
  217 + }
  218 + ],
124 }); 219 });
125 } 220 }
126 221
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 77
78 <li class="parent"><a><i class="fa fa-list"></i> <span>性能统计</span></a> 78 <li class="parent"><a><i class="fa fa-list"></i> <span>性能统计</span></a>
79 <ul class="children"> 79 <ul class="children">
80 - <li><a href="/profile/mean"> <span>调用时间统计</span></a></li> 80 + <li><a href="/profile/mean"> <span>客户端调用时间统计</span></a></li>
81 <li><a href="/profile/time"> <span>调用时间统计</span></a></li> 81 <li><a href="/profile/time"> <span>调用时间统计</span></a></li>
82 <li><a href="/profile/error"> <span>错误信息统计</span></a></li> 82 <li><a href="/profile/error"> <span>错误信息统计</span></a></li>
83 </ul> 83 </ul>