ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit f0ac2580fa0cc6933bf3873927553249955b69ec 1 parent 148aaa86

调整nginx配置同步前台

Inline Side-by-side
Showing 1 changed file with 88 additions and 400 deletions
@@ -70,72 +70,73 @@ @@ -70,72 +70,73 @@
70 <!-- 右侧具体内容 --> 70 <!-- 右侧具体内容 -->
71 <div id="content"> 71 <div id="content">
72 72
73 -<div id="breadcrumb"> 73 + <div id="breadcrumb">
74 <a href="#" title="Go to Home" class="tip-bottom"><i 74 <a href="#" title="Go to Home" class="tip-bottom"><i
75 class="icon-home"></i> Home</a> <a 75 class="icon-home"></i> Home</a> <a
76 - href="#" class="current">nginx</a>  
77 -</div> 76 + href="#" class="current">Nginx配置同步</a>
  77 + </div>
78 78
79 -<div class="container-fluid"> 79 + <div class="container-fluid">
80 <div class="widget-box"> 80 <div class="widget-box">
81 <div class="widget-title"> 81 <div class="widget-title">
82 - <h5>Nginx详情 <font color="red">(最近2分钟)</font></h5>  
83 - <a href="javascript:window.open('http://kibana.yoho.cn/')" style="float: right"><h5>查看日志详情</h5></a> 82 + <h5>Nginx配置同步</h5>
84 </div> 83 </div>
85 <div class="container-fluid"> 84 <div class="container-fluid">
86 <div class="row-fluid"> 85 <div class="row-fluid">
87 <div class="col-md-6" style="width: 90%"> 86 <div class="col-md-6" style="width: 90%">
88 <!-- Nav tabs --> 87 <!-- Nav tabs -->
89 <ul class="nav nav-tabs"> 88 <ul class="nav nav-tabs">
90 - <li class="active"><a href="#aws_api" data-toggle="tab"><strong>Api非200响应</strong></a></li>  
91 - <li><a href="#aws_service" data-toggle="tab"><strong>Service非200响应</strong></a></li>  
92 - <li><a href="#aws_error" data-toggle="tab"><strong>Nginx Error</strong></a></li> 89 + <li class="active"><a href="#nginx" data-toggle="tab"><strong>Nginx</strong></a></li>
  90 + <li><a href="#dns_nginx" data-toggle="tab"><strong>DNS-Nginx</strong></a></li>
  91 + <li><a href="#h5_nginx" data-toggle="tab"><strong>H5-Nginx</strong></a></li>
93 <%--<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%> 92 <%--<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%>
94 </ul> 93 </ul>
95 94
96 <!-- Tab panes --> 95 <!-- Tab panes -->
97 <div class="tab-content mb30"> 96 <div class="tab-content mb30">
98 - <div class="tab-pane active" id="aws_api">  
99 - <div id="aws_apiPie" style="width: 800px; height: 400px; margin-left: 30%"></div> 97 + <div class="tab-pane active" id="nginx">
  98 + <div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">
100 99
101 - <div class="section section-visible" style="float:right">  
102 - <div class="hider updatable" style="display:block;">  
103 - <table class="table table-bordered table-striped table-hover"  
104 - id="aws_apiTable">  
105 - </table>  
106 - </div> 100 + <textarea id="resultArea" rows="30" cols="120"
  101 + style="background-color: black; color: white;resize: none"
  102 + readonly="readonly"></textarea>
107 </div> 103 </div>
108 104
109 - </div><!-- tab-pane --> 105 + <button id="nginx_btn" class="btn btn-success btn-rounded"
  106 + style="margin-top: 10px; margin-bottom: 10px;margin-left: 50%"
  107 + onclick="btn_click('nginx_btn','resultArea')">Run
  108 + </button>
110 109
111 - <div class="tab-pane" id="aws_service">  
112 - <div id="aws_servicePie" style="width: 800px; height: 400px;margin-left: 30%"></div>  
113 110
114 - <div class="section section-visible" style="float:right">  
115 - <div class="hider updatable" style="display:block;">  
116 - <table class="table table-bordered table-striped table-hover"  
117 - id="aws_serviceTable">  
118 - </table>  
119 - </div>  
120 - </div>  
121 </div><!-- tab-pane --> 111 </div><!-- tab-pane -->
122 112
123 - <div class="tab-pane" id="aws_error">  
124 - <div id="aws_errorPie" style="width: 800px; height: 400px;margin-left: 30%"></div>  
125 - <div class="section section-visible" style="float:right">  
126 - <div class="hider updatable" style="display:block;">  
127 - <table class="table table-bordered table-striped table-hover"  
128 - id="aws_errorTable">  
129 - </table>  
130 - </div> 113 + <div class="tab-pane" id="dns_nginx">
  114 + <div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">
  115 +
  116 + <textarea id="dns_resultArea" rows="30" cols="120"
  117 + style="background-color: black; color: white;resize: none"
  118 + readonly="readonly"></textarea>
131 </div> 119 </div>
  120 +
  121 + <button id="dns_btn" class="btn btn-success btn-rounded"
  122 + style="margin-top: 10px; margin-bottom: 10px;margin-left: 50%"
  123 + onclick="btn_click('dns_btn','dns_resultArea')">Run
  124 + </button>
132 </div><!-- tab-pane --> 125 </div><!-- tab-pane -->
133 126
134 -<%-- <div class="tab-pane" id="aws_time">  
135 - <h1 class="nomargin">未完待续......</h1>  
136 - <p>Continue.......</p> 127 + <div class="tab-pane" id="h5_nginx">
  128 + <div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">
  129 +
  130 + <textarea id="h5_resultArea" rows="30" cols="120"
  131 + style="background-color: black; color: white;resize: none"
  132 + readonly="readonly"></textarea>
  133 + </div>
137 134
138 - </div><!-- tab-pane -->--%> 135 + <button id="h5_btn" class="btn btn-success btn-rounded"
  136 + style="margin-top: 10px; margin-bottom: 10px; margin-left: 50%"
  137 + onclick="btn_click('h5_btn','h5_resultArea')">Run
  138 + </button>
  139 + </div><!-- tab-pane -->
139 </div><!-- tab-content --> 140 </div><!-- tab-content -->
140 </div><!-- col-md-6 --> 141 </div><!-- col-md-6 -->
141 </div> 142 </div>
@@ -143,7 +144,7 @@ @@ -143,7 +144,7 @@
143 </div> 144 </div>
144 </div> 145 </div>
145 146
146 -</div> 147 + </div>
147 </div> 148 </div>
148 </body> 149 </body>
149 <script src="<%=basePath %>script/common/genarate_left_panel.js"></script> 150 <script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
@@ -152,390 +153,77 @@ @@ -152,390 +153,77 @@
152 </script> 153 </script>
153 <script type="text/javascript"> 154 <script type="text/javascript">
154 $( 155 $(
155 - queryApi(),  
156 - queryService(),  
157 - queryError()  
158 - );  
159 156
  157 + );
160 158
161 - function queryApi() {  
162 - $.ajax({  
163 - url: contextPath + "nginx/apiPie",  
164 - type: "post",  
165 - dataType: "json",  
166 - data: {  
167 - type: "aws"  
168 - },  
169 - success: function (response) {  
170 - updatePieApi(response.data)  
171 - },  
172 - error: function (e) {  
173 -  
174 - }  
175 - });  
176 - 159 + function btn_click(btnId, txtId) {
  160 + console.log(btnId);
177 161
178 - updateApiTab();  
179 - } 162 + var btn = document.getElementById(btnId);
180 163
  164 + btn.disabled = true;
181 165
182 - function queryService() {  
183 $.ajax({ 166 $.ajax({
184 - url: contextPath + "nginx/servicePie", 167 + url: getUrlBasePath() + "/rabbitmq/allRabbitMq",
185 type: "post", 168 type: "post",
186 dataType: "json", 169 dataType: "json",
187 data: { 170 data: {
188 - type: "aws" 171 + moType: "qc"
189 }, 172 },
190 success: function (response) { 173 success: function (response) {
191 - updatePieService(response.data)  
192 - },  
193 - error: function (e) {  
194 -  
195 - }  
196 - }); 174 + var logView = document.getElementById(txtId);
197 175
198 - updateServiceTab(); 176 + var interval = setInterval(function (){
  177 + $.ajax({
  178 + url: 'getbuildmsg?messageid=' + obj.data.id + '&project=' + cproject,
  179 + type: 'POST',
  180 + dataType: 'json',
  181 + success: function (data3) {
  182 + var obj2 = eval("(" + data3 + ")");
  183 + var messagedata = obj2.data;
  184 + var currproject = messagedata.currentProject;
  185 + if (currproject != cproject) {
  186 + $("#currentproject").val(currproject);//更换当前的项目
  187 + $("#show-" + cproject + "-div").attr("class", "ckbox ckbox-success");
  188 + $("#show-" + currproject + "-div").attr("class", "ckbox ckbox-warning");
  189 + $("#resultArea").val("")
  190 + }
  191 + if (messagedata.message != "") {
  192 + var d = $("#resultArea").val();
  193 + $("#resultArea").val(d + messagedata.message);
  194 + var scrollTop = $("#resultArea")[0].scrollHeight;
  195 + $("#resultArea").scrollTop(scrollTop);
  196 + }
  197 +
  198 + //code为2 ,则结束
  199 + var code = obj2.code;
  200 + var message = obj2.message;
  201 + if (code == 2) {
  202 + $("#submit-btn").show();
  203 + $("#cancel-btn").hide();
  204 + $("#show-" + cproject + "-div").attr("class", "ckbox ckbox-success");
  205 + document.getElementById("task-info-div").innerHTML = "<strong>'"+ message +"'</strong>";
  206 + clearInterval(interval);
  207 + alert("Success to execute job...");
  208 + btn.disabled = false;
199 } 209 }
200 210
201 -  
202 - function queryError() {  
203 - $.ajax({  
204 - url: contextPath + "nginx/errorPie",  
205 - type: "post",  
206 - dataType: "json",  
207 - data: {  
208 - type: "aws"  
209 - },  
210 - success: function (response) {  
211 - updatePieError(response.data)  
212 }, 211 },
213 error: function (e) { 212 error: function (e) {
214 - 213 + alert("从后台获取数据出错");
215 } 214 }
216 }); 215 });
217 216
218 - updateErrorTable();  
219 - }  
220 -  
221 - function updatePieApi(data) {  
222 -  
223 - // 基于准备好的dom，初始化echarts实例  
224 - var myChartApi = echarts.init(document.getElementById('aws_apiPie'));  
225 -  
226 - var pieData = [];  
227 -  
228 - var pieLend = [];  
229 -  
230 - for (var i = 0; i < data.length; i++) {  
231 - pieData.push({name: data[i].name, value: data[i].count});  
232 -  
233 - pieLend.push(data[i].name);  
234 - }  
235 - // 指定图表的配置项和数据  
236 - var option = {  
237 - title: {  
238 - text: 'Api非200响应',  
239 - subtext: '按接口名划分',  
240 - x: 'center'  
241 - },  
242 - tooltip: {  
243 - trigger: 'item',  
244 - formatter: "{a} <br/>{b} : {c} ({d}%)"  
245 - },  
246 - legend: {  
247 - orient: 'vertical',  
248 - left: 'left',  
249 - data: pieLend  
250 - },  
251 - series: [  
252 - {  
253 - name: 'api占比',  
254 - type: 'pie',  
255 - radius: '55%',  
256 - center: ['50%', '60%'],  
257 - data: pieData,  
258 - itemStyle: {  
259 - emphasis: {  
260 - shadowBlur: 10,  
261 - shadowOffsetX: 0,  
262 - shadowColor: 'rgba(0, 0, 0, 0.5)'  
263 - }  
264 - }  
265 - }  
266 - ]  
267 - };  
268 - myChartApi.setOption(option);  
269 -  
270 - }  
271 -  
272 -  
273 -  
274 - function updateApiTab() {  
275 - $("#aws_apiTable").table(  
276 - {  
277 - url: contextPath + "nginx/apiTab",  
278 - queryParams : {  
279 - type: "aws"  
280 - }, //调用url传递的参数  
281 - method : "POST", //提交方式  
282 - striped: true,  
283 - panelClass: "panel-success",  
284 - pagination: true,  
285 - pageSize: 5,  
286 - loadFilter: function (data) {  
287 - return defaultLoadFilter(data);  
288 - },  
289 - columns: [{  
290 - title: "接口名称",  
291 - formatter: function (value, rowData) {  
292 - /*alert(rowData.name);*/  
293 - var div = $("<div align='center'>").html(rowData.name);  
294 - return div;  
295 - }  
296 - }, {  
297 - title: "总计",  
298 - formatter: function (value, rowData) {  
299 - /*alert(rowData.name);*/  
300 - var div = $("<div align='center'>").html(rowData.count);  
301 - return div;  
302 - }  
303 - }, {  
304 - title: "总占比",  
305 - formatter: function (value, rowData) {  
306 - /*alert(rowData.name);*/  
307 - var div = $("<div align='center'>").html(rowData.totalPercent);  
308 - return div;  
309 - }  
310 - }, {  
311 - title: "各主机占比",  
312 - formatter: function (value, rowData) {  
313 - /*alert(rowData.name);*/  
314 - var div = $("<div align='center'>").html(rowData.logIpPercent);  
315 - return div;  
316 - }  
317 - }, {  
318 - title: "响应码占比",  
319 - formatter: function (value, rowData) {  
320 - /*alert(rowData.name);*/  
321 - var div = $("<div align='center'>").html(rowData.codePercent);  
322 - return div;  
323 - }  
324 - }  
325 - ]  
326 - }  
327 - )  
328 -  
329 - }  
330 -  
331 - function updatePieService(data) {  
332 - var myChartServie = echarts.init(document.getElementById('aws_servicePie'));  
333 -  
334 - var pieData = [];  
335 -  
336 - var pieLend = [];  
337 -  
338 - for (var i = 0; i < data.length; i++) {  
339 - pieData.push({name: data[i].name, value: data[i].count});  
340 -  
341 - pieLend.push(data[i].name);  
342 - }  
343 - // 指定图表的配置项和数据  
344 - var option = {  
345 - title: {  
346 - text: 'Service非200响应',  
347 - subtext: '按接口名划分',  
348 - x: 'center'  
349 - },  
350 - tooltip: {  
351 - trigger: 'item',  
352 - formatter: "{a} <br/>{b} : {c} ({d}%)"  
353 - },  
354 - legend: {  
355 - orient: 'vertical',  
356 - left: 'left',  
357 - data: pieLend  
358 - },  
359 - series: [  
360 - {  
361 - name: 'api占比',  
362 - type: 'pie',  
363 - radius: '55%',  
364 - center: ['50%', '60%'],  
365 - data: pieData,  
366 - itemStyle: {  
367 - emphasis: {  
368 - shadowBlur: 10,  
369 - shadowOffsetX: 0,  
370 - shadowColor: 'rgba(0, 0, 0, 0.5)'  
371 - }  
372 - }  
373 - }  
374 - ]  
375 - };  
376 - myChartServie.setOption(option);  
377 - }  
378 -  
379 -  
380 -  
381 -  
382 - function updateServiceTab() {  
383 -  
384 - $("#aws_serviceTable").table(  
385 - {  
386 - url: contextPath + "nginx/serviceTab",  
387 - queryParams : {  
388 - type: "aws"  
389 - }, //调用url传递的参数  
390 - method : "POST", //提交方式  
391 - striped: true,  
392 - panelClass: "panel-success",  
393 - pagination: true,  
394 - pageSize: 5,  
395 - loadFilter: function (data) {  
396 - return defaultLoadFilter(data);  
397 - },  
398 - columns: [{  
399 - title: "接口名称",  
400 - formatter: function (value, rowData) {  
401 - /*alert(rowData.name);*/  
402 - var div = $("<div align='center'>").html(rowData.name);  
403 - return div;  
404 - }  
405 - }, {  
406 - title: "总计",  
407 - formatter: function (value, rowData) {  
408 - /*alert(rowData.name);*/  
409 - var div = $("<div align='center'>").html(rowData.count);  
410 - return div;  
411 - }  
412 - }, {  
413 - title: "总占比",  
414 - formatter: function (value, rowData) {  
415 - /*alert(rowData.name);*/  
416 - var div = $("<div align='center'>").html(rowData.totalPercent);  
417 - return div;  
418 - }  
419 - }, {  
420 - title: "各主机占比",  
421 - formatter: function (value, rowData) {  
422 - /*alert(rowData.name);*/  
423 - var div = $("<div align='center'>").html(rowData.logIpPercent);  
424 - return div;  
425 - }  
426 - }, {  
427 - title: "响应码占比",  
428 - formatter: function (value, rowData) {  
429 - /*alert(rowData.name);*/  
430 - var div = $("<div align='center'>").html(rowData.codePercent);  
431 - return div;  
432 - }  
433 - }  
434 - ]  
435 - }  
436 - )  
437 -  
438 - }  
439 - function updatePieError(data) {  
440 - var myChartError = echarts.init(document.getElementById('aws_errorPie'));  
441 -  
442 - var pieData = [];  
443 -  
444 - var pieLend = [];  
445 -  
446 - for (var i = 0; i < data.length; i++) {  
447 - pieData.push({name: data[i].name, value: data[i].count});  
448 -  
449 - pieLend.push(data[i].name);  
450 - }  
451 - // 指定图表的配置项和数据  
452 - var option = {  
453 - title: {  
454 - text: 'Nginx错误',  
455 - subtext: '按类型划分',  
456 - x: 'center'  
457 - },  
458 - tooltip: {  
459 - trigger: 'item',  
460 - formatter: "{a} <br/>{b} : {c} ({d}%)" 217 + },1000);
461 }, 218 },
462 - legend: {  
463 - orient: 'vertical',  
464 - left: 'left',  
465 - data: pieLend  
466 - },  
467 - series: [  
468 - {  
469 - name: 'api占比',  
470 - type: 'pie',  
471 - radius: '55%',  
472 - center: ['50%', '60%'],  
473 - data: pieData,  
474 - itemStyle: {  
475 - emphasis: {  
476 - shadowBlur: 10,  
477 - shadowOffsetX: 0,  
478 - shadowColor: 'rgba(0, 0, 0, 0.5)'  
479 - }  
480 - } 219 + error: function (e) {
  220 + alert("Failed to execute job...");
  221 + btn.disabled = false;
481 } 222 }
482 - ]  
483 - };  
484 -  
485 - myChartError.setOption(option); 223 + });
486 } 224 }
487 225
488 226
489 - function updateErrorTable() {  
490 - $("#aws_errorTable").table(  
491 - {  
492 - url: contextPath + "nginx/errTab",  
493 - queryParams : {  
494 - type: "aws"  
495 - }, //调用url传递的参数  
496 - method : "POST",  
497 - striped: true,  
498 - panelClass: "panel-success",  
499 - pagination: true,  
500 - pageSize: 5,  
501 - loadFilter: function (data) {  
502 - return defaultLoadFilter(data);  
503 - },  
504 - columns: [{  
505 - title: "错误类型",  
506 - formatter: function (value, rowData) {  
507 - /*alert(rowData.name);*/  
508 - var div = $("<div align='center'>").html(rowData.name);  
509 - return div;  
510 - }  
511 - },  
512 - {  
513 - title: "总计",  
514 - formatter: function (value, rowData) {  
515 - /*alert(rowData.name);*/  
516 - var div = $("<div align='center'>").html(rowData.count);  
517 - return div;  
518 - }  
519 - },  
520 - {  
521 - title: "总占比",  
522 - formatter: function (value, rowData) {  
523 - /*alert(rowData.name);*/  
524 - var div = $("<div align='center'>").html(rowData.totalPercent);  
525 - return div;  
526 - }  
527 - },  
528 - {  
529 - title: "各主机占比",  
530 - formatter: function (value, rowData) {  
531 - /*alert(rowData.name);*/  
532 - var div = $("<div align='center'>").html(rowData.logIpPercent);  
533 - return div;  
534 - }  
535 - }  
536 - ]  
537 - });  
538 - }  
539 </script> 227 </script>
540 </body> 228 </body>
541 </html> 229 </html>