|
@@ -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">×</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
|
|