ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit 3f90f2617fad75463318afde39902d4ba66fad64 1 parent 47a42de8

修改nginxsync页面

Inline Side-by-side
Showing 2 changed files with 74 additions and 88 deletions
@@ -3,8 +3,6 @@ package com.ui.model.req; @@ -3,8 +3,6 @@ package com.ui.model.req;
3 import lombok.Data; 3 import lombok.Data;
4 import org.apache.commons.lang.StringUtils; 4 import org.apache.commons.lang.StringUtils;
5 5
6 -import java.util.ArrayList;  
7 -import java.util.List;  
8 6
9 /** 7 /**
10 * Created by yoho on 2016/8/24. 8 * Created by yoho on 2016/8/24.
@@ -13,7 +11,7 @@ import java.util.List; @@ -13,7 +11,7 @@ import java.util.List;
13 public class NginxSyncLog { 11 public class NginxSyncLog {
14 String taskId = StringUtils.EMPTY; 12 String taskId = StringUtils.EMPTY;
15 13
16 - int isFinished = 1; 14 + int isFinished;
17 15
18 - List<String> msgList = new ArrayList<>(); 16 + String log;
19 } 17 }
@@ -84,63 +84,47 @@ @@ -84,63 +84,47 @@
84 <div class="container-fluid"> 84 <div class="container-fluid">
85 <div class="row-fluid"> 85 <div class="row-fluid">
86 <div class="col-md-6" style="width: 90%"> 86 <div class="col-md-6" style="width: 90%">
87 - <!-- Nav tabs -->  
88 - <ul class="nav nav-tabs">  
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>  
92 - <%--<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%>  
93 - </ul>  
94 -  
95 - <!-- Tab panes -->  
96 - <div class="tab-content mb30">  
97 - <div class="tab-pane active" id="nginx">  
98 - <div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">  
99 -  
100 - <textarea id="resultArea" rows="30" cols="120"  
101 - style="background-color: black; color: white;resize: none"  
102 - readonly="readonly"></textarea> 87 + <div class="form-group">
  88 + <label class="col-sm-1 control-label">任务选择</label>
  89 +
  90 + <div class="col-sm-8">
  91 + <div class="rdio rdio-default">
  92 + <input type="radio" name="operate" id="nginx" value="nginx_val" checked="checked"
  93 + onclick="operateChange(1)"/>
  94 + <label for="nginx">nginx 同步</label>
103 </div> 95 </div>
104 96
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>  
109 -  
110 -  
111 - </div><!-- tab-pane -->  
112 -  
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> 97 + <div class="rdio rdio-default">
  98 + <input type="radio" name="operate" value="dns_nginx_val" id="dns_nginx"
  99 + onclick="operateChange(3)"/>
  100 + <label for="dns_nginx">DNS_nginx 同步</label>
119 </div> 101 </div>
120 102
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 103 + <div class="rdio rdio-default">
  104 + <input type="radio" name="operate" value="h5_nginx_val" id="h5_nginx"
  105 + onclick="operateChange(2)"/>
  106 + <label for="h5_nginx">H5_nginx 同步</label>
  107 + </div>
  108 + </div>
  109 + </div>
  110 + <div class="form-group">
  111 + <div class="col-sm-8" style="margin-bottom: 10px;margin-top: 10px">
  112 + <button id="exe_btn" class="btn btn-success btn-rounded"
  113 + onclick="btn_click()">Run
124 </button> 114 </button>
125 - </div><!-- tab-pane -->  
126 -  
127 - <div class="tab-pane" id="h5_nginx">  
128 - <div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px"> 115 + </div>
  116 + </div>
  117 + <div class="form-group" style="margin-top: 40px">
  118 + <div class="col-sm-8">
  119 + <textarea id="textArea" rows="30" cols="120"
  120 + style="background-color: black; color: white;resize: none"
  121 + readonly="readonly"></textarea>
  122 + </div>
  123 + </div>
129 124
130 - <textarea id="h5_resultArea" rows="30" cols="120"  
131 - style="background-color: black; color: white;resize: none"  
132 - readonly="readonly"></textarea>  
133 - </div>  
134 125
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 -->  
140 - </div><!-- tab-content -->  
141 </div><!-- col-md-6 --> 126 </div><!-- col-md-6 -->
142 </div> 127 </div>
143 -  
144 </div> 128 </div>
145 </div> 129 </div>
146 130
@@ -156,37 +140,46 @@ @@ -156,37 +140,46 @@
156 140
157 ); 141 );
158 142
159 - function btn_click(btnId, txtId) {  
160 - console.log(btnId);  
161 -  
162 - var id = 0;  
163 -  
164 - if (btnId === "nginx_btn") {  
165 - id = 1;  
166 - }  
167 - else if (btnId === "h5_btn") {  
168 - id = 2;  
169 - }  
170 - else if (btnId === "dns_btn") {  
171 - id = 3;  
172 - }  
173 - else {  
174 - return;  
175 - }  
176 - var btn = document.getElementById(btnId);  
177 -  
178 - document.getElementById(txtId).innerText =""; 143 + var type = 1;
  144 +
  145 + function operateChange(id) {
  146 + type = id;
  147 + }
  148 +
  149 + function disableSelect() {
  150 + var select = document.getElementById("nginx");
  151 + select.disabled = true;
  152 + select = document.getElementById("dns_nginx");
  153 + select.disabled = true;
  154 + select = document.getElementById("h5_nginx");
  155 + select.disabled = true;
  156 + var btn = document.getElementById("exe_btn");
179 btn.disabled = true; 157 btn.disabled = true;
180 - console.log("id: " + id); 158 + }
  159 +
  160 + function ableSelect() {
  161 + var select = document.getElementById("nginx");
  162 + select.disabled = false;
  163 + select = document.getElementById("dns_nginx");
  164 + select.disabled = false;
  165 + select = document.getElementById("h5_nginx");
  166 + select.disabled = false;
  167 + var btn = document.getElementById("exe_btn");
  168 + btn.disabled = false;
  169 + }
  170 +
  171 + function btn_click() {
  172 + disableSelect();
  173 + document.getElementById("textArea").innerText = "";
181 $.ajax({ 174 $.ajax({
182 url: getUrlBasePath() + "/nginxSync/pushTask", 175 url: getUrlBasePath() + "/nginxSync/pushTask",
183 type: "post", 176 type: "post",
184 dataType: "json", 177 dataType: "json",
185 data: { 178 data: {
186 - type: id 179 + type: type
187 }, 180 },
188 success: function (response) { 181 success: function (response) {
189 - var logView = document.getElementById(txtId).innerText; 182 + var txtId = "textArea";
190 var interval = setInterval(function () { 183 var interval = setInterval(function () {
191 $.ajax({ 184 $.ajax({
192 url: "/nginxSync/getTaskLog", 185 url: "/nginxSync/getTaskLog",
@@ -198,29 +191,24 @@ @@ -198,29 +191,24 @@
198 success: function (data3) { 191 success: function (data3) {
199 console.log(data3); 192 console.log(data3);
200 var messagedata = data3.data; 193 var messagedata = data3.data;
201 - var logList = messagedata.msgList;  
202 - console.log(logList)  
203 - console.log(logList.length)  
204 - if (logList.length != 0) {  
205 - var str = "";  
206 - for (var i = 0; i < logList.length; i++) {  
207 - str = str + '\n' + logList[i];  
208 - }  
209 - 194 + var logList = messagedata.log;
  195 + if (logList != "") {
210 var d = document.getElementById(txtId).innerHTML; 196 var d = document.getElementById(txtId).innerHTML;
211 - document.getElementById(txtId).innerText = d + str;  
212 - document.getElementById(txtId).scrollTop=document.getElementById(txtId).scrollHeight; 197 + document.getElementById(txtId).innerText = d + logList;
  198 + console.log("textarea: " + document.getElementById(txtId).innerHTML);
  199 + document.getElementById(txtId).scrollTop = document.getElementById(txtId).scrollHeight;
213 } 200 }
214 //code为2 ,则结束 201 //code为2 ,则结束
215 var code = messagedata.isFinished; 202 var code = messagedata.isFinished;
216 if (code == 1) { 203 if (code == 1) {
217 clearInterval(interval); 204 clearInterval(interval);
218 alert("Success to execute job..."); 205 alert("Success to execute job...");
219 - btn.disabled = false; 206 + ableSelect();
220 } 207 }
221 }, 208 },
222 error: function (e) { 209 error: function (e) {
223 alert("从后台获取数据出错"); 210 alert("从后台获取数据出错");
  211 + ableSelect();
224 } 212 }
225 }); 213 });
226 214
@@ -228,7 +216,7 @@ @@ -228,7 +216,7 @@
228 }, 216 },
229 error: function (e) { 217 error: function (e) {
230 alert("Failed to execute job..."); 218 alert("Failed to execute job...");
231 - btn.disabled = false; 219 + ableSelect();
232 } 220 }
233 }); 221 });
234 } 222 }