Initial code import
[msb/apigateway.git] / apiroute / apiroute-service / src / main / resources / iui-route / js / routeFunc.js
1 /*\r
2  * Copyright (C) 2016 ZTE, Inc. and others. All rights reserved. (ZTE)\r
3  *\r
4  * Licensed under the Apache License, Version 2.0 (the "License");\r
5  * you may not use this file except in compliance with the License.\r
6  * You may obtain a copy of the License at\r
7  *\r
8  *         http://www.apache.org/licenses/LICENSE-2.0\r
9  *\r
10  * Unless required by applicable law or agreed to in writing, software\r
11  * distributed under the License is distributed on an "AS IS" BASIS,\r
12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
13  * See the License for the specific language governing permissions and\r
14  * limitations under the License.\r
15  */\r
16 $(function(){\r
17 \r
18    $('#msbTable tbody').on('click', 'td.details-control', function () {\r
19         var tr = $(this).closest('tr');\r
20         var row = table.row( tr );\r
21         if ( row.child.isShown() ) {\r
22             // This row is already open - close it\r
23             row.child.hide();\r
24             tr.removeClass('shown');\r
25         }\r
26         else {\r
27             // Open this row\r
28             var nodes=row.data()[1].match(/\d+.\d+.\d+.\d+:\d+:(-)?\d+/g) \r
29             \r
30             row.child( routeUtil.formatDetail(nodes) ).show();\r
31             tr.addClass('shown');\r
32         }\r
33     } );\r
34 \r
35  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {\r
36       //Get the name of the TAB has been activated\r
37       var activeTab = $(e.target).text(); \r
38       if(this.id=="customTab" || this.id=="msbTab"){\r
39           $("#serviceContent").hide();\r
40           $("#upArrawDiv").hide();\r
41       }\r
42       else{\r
43         $("#serviceContent").show();\r
44         $("#upArrawDiv").show();\r
45          $('#msbSubPage').attr("src","");\r
46           $(".stats_box .routeDiv").removeClass("active");\r
47           vm.selectedRouteType="";\r
48           vm.routeTargetTitle=$.i18n.prop("org_openo_msb_route_content_title");\r
49        \r
50       }\r
51    });\r
52 \r
53 \r
54  $("[data-toggle='tooltip']").tooltip();\r
55 \r
56    $('#metricsFullurl').on('show.bs.collapse', function () {\r
57         $('#metricsUrlCollapse').removeClass('fa-plus').addClass('fa-minus');\r
58       \r
59   });\r
60   \r
61   $('#metricsFullurl').on('hide.bs.collapse', function () {\r
62         $('#metricsUrlCollapse').removeClass('fa-minus').addClass('fa-plus');\r
63   });\r
64 \r
65    $('#apiJsonFullurl').on('show.bs.collapse', function () {\r
66         $('#apiJsonCollapse').removeClass('fa-plus').addClass('fa-minus');\r
67       \r
68   });\r
69   \r
70   $('#apiJsonFullurl').on('hide.bs.collapse', function () {\r
71         $('#apiJsonCollapse').removeClass('fa-minus').addClass('fa-plus');\r
72   });\r
73 \r
74 \r
75 \r
76    $(".form-tip").blur(function(){\r
77     if($.trim($(this).val())==""){\r
78       $(this).removeClass("form-input-focus");\r
79       $(this).prev().removeClass("item-tip-focus");\r
80     }});\r
81 \r
82 $(".form-tip").focus(function(){\r
83   if(!$(this).hasClass("form-input-focus")){\r
84   $(this).addClass("form-input-focus");\r
85   $(this).prev().addClass("item-tip-focus");\r
86   }});\r
87 \r
88 $(".item-tip").click(function(){\r
89   $(this).next().focus();\r
90 });\r
91 \r
92 \r
93 \r
94 $("input[name='version']").blur(function(){\r
95     $(this).val($(this).val().toLowerCase());\r
96     routeUtil.changeTargetServiceUrl();\r
97 });\r
98 \r
99 \r
100 $("input[name='url']").blur(function(){\r
101 \r
102 routeUtil.changeTargetServiceUrl();\r
103 \r
104 });\r
105 $("input[name='serviceName']").blur(function(){\r
106 \r
107 routeUtil.changeTargetServiceUrl();\r
108 \r
109 });\r
110 \r
111 \r
112 \r
113 $("select[name='protocol']").change(function(){\r
114 \r
115 routeUtil.changeTargetServiceUrl();\r
116 \r
117 });\r
118 \r
119 /*\r
120 \r
121 $("input[name='oriService']").blur(function(){\r
122     var oriService=$.trim($(this).val());\r
123     if(oriService==""){\r
124       $("input[name='serviceName']").val("");\r
125       $("input[name='version']").val("");\r
126       $("input[name='server']").val("");\r
127       $("input[name='url']").val("");\r
128       return;\r
129     }\r
130     \r
131     \r
132 \r
133     var reg=/^(|http:\/\/)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))):(\d{1,5})\/.*$/   \r
134         var reg_standard_match=/^(.*:\d{1,5})\/api\/(.*)\/(v.*)$/ \r
135     var reg_unstandard_match=/^(.*:\d{1,5})(\/.*)$/     \r
136         if(reg.test(oriService)){  \r
137        if(reg_standard_match.test(oriService)){  \r
138           //标准api\r
139           var group = oriService.match(reg_standard_match);\r
140           $("input[name='serviceName']").val(group[2]);        \r
141           $("input[name='server']").val(group[1].replace("http://",""));\r
142 \r
143 \r
144          var version=group[3];\r
145         var reg_endName_match=/^(.*?)\/.*$/\r
146         if(reg_endName_match.test(version)){\r
147             version = version.match(reg_endName_match)[1];\r
148         }\r
149           $("input[name='version']").val(version);\r
150            $("input[name='url']").val("/api/"+group[2]+"/"+version);\r
151 \r
152         if(!$("input[name='version']").hasClass("form-input-focus")){\r
153           $("input[name='version']").addClass("form-input-focus");\r
154           $("input[name='version']").prev().addClass("item-tip-focus");\r
155           }\r
156           \r
157     \r
158 \r
159        }\r
160        else{\r
161            //非标准api\r
162           var group = oriService.match(reg_unstandard_match);\r
163          var reg_endName_match=/^(.*?)\/$/\r
164          var url=group[2];\r
165         if(url!="/" && reg_endName_match.test(url)){\r
166             url = url.match(reg_endName_match)[1];\r
167         }\r
168 \r
169 \r
170         $("input[name='serviceName']").val("");\r
171         $("input[name='version']").val("");\r
172         $("input[name='server']").val(group[1].replace("http://",""));\r
173         $("input[name='url']").val(url);\r
174       }\r
175 \r
176           if(!$("input[name='server']").hasClass("form-input-focus")){\r
177           $("input[name='server']").addClass("form-input-focus");\r
178           $("input[name='server']").prev().addClass("item-tip-focus");\r
179           }\r
180     }\r
181   \r
182     \r
183 });\r
184 \r
185 \r
186 $("input[name='iuioriService']").blur(function(){\r
187     var oriService=$.trim($(this).val());\r
188     if(oriService==""){\r
189       $("input[name='iuiserviceName']").val("");\r
190       $("input[name='iuiserver']").val("");\r
191       $("input[name='iuiurl']").val("");\r
192       return;\r
193     }\r
194     \r
195     \r
196 \r
197     var reg=/^(|http:\/\/)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))):(\d{1,5})\/.*$/   \r
198         var reg_standard_match=/^(.*:\d{1,5})\/iui\/(.*|.*\/)$/ \r
199     var reg_unstandard_match=/^(.*:\d{1,5})(\/.*)$/     \r
200    if(reg.test(oriService)){  \r
201        if(reg_standard_match.test(oriService)){  \r
202           //标准api\r
203           var group = oriService.match(reg_standard_match);\r
204 \r
205         \r
206         $("input[name='iuiserver']").val(group[1].replace("http://",""));\r
207         \r
208 \r
209         var serviceName=group[2];\r
210         var reg_endName_match=/^(.*?)\/.*$/\r
211         if(reg_endName_match.test(serviceName)){\r
212            serviceName = serviceName.match(reg_endName_match)[1];\r
213         }\r
214           $("input[name='iuiserviceName']").val(serviceName);\r
215           $("input[name='iuiurl']").val("/iui/"+serviceName);\r
216       \r
217        }\r
218        else{\r
219            //非标准api\r
220           var group = oriService.match(reg_unstandard_match);\r
221        \r
222          var reg_endName_match=/^(.*?)\/$/\r
223          var url=group[2];\r
224         if(url!="/" && reg_endName_match.test(url)){\r
225             url = url.match(reg_endName_match)[1];\r
226         }\r
227         $("input[name='iuiserver']").val(group[1].replace("http://",""));\r
228         $("input[name='iuiurl']").val(url);\r
229       }\r
230 \r
231           if(!$("input[name='iuiserver']").hasClass("form-input-focus")){\r
232           $("input[name='iuiserver']").addClass("form-input-focus");\r
233           $("input[name='iuiserver']").prev().addClass("item-tip-focus");\r
234           }\r
235     }\r
236   \r
237     \r
238 });\r
239 \r
240 $("input[name='customoriService']").blur(function(){\r
241     var oriService=$.trim($(this).val());\r
242     if(oriService==""){\r
243       $("input[name='customserviceName']").val("");\r
244       $("input[name='customserver']").val("");\r
245       $("input[name='customurl']").val("");\r
246       return;\r
247     }\r
248     \r
249     \r
250 \r
251     var reg=/^(|http:\/\/)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))):(\d{1,5})\/.*$/   \r
252        \r
253     var reg_unstandard_match=/^(.*:\d{1,5})(\/.*)$/     \r
254    if(reg.test(oriService)){  \r
255       \r
256 \r
257           var group = oriService.match(reg_unstandard_match);\r
258        \r
259          var reg_endName_match=/^(.*?)\/$/\r
260          var url=group[2];\r
261         if(url!="/" && reg_endName_match.test(url)){\r
262             url = url.match(reg_endName_match)[1];\r
263         }\r
264         $("input[name='customserver']").val(group[1].replace("http://",""));\r
265         $("input[name='customurl']").val(url);\r
266         $("input[name='customserviceName']").val(url);\r
267      \r
268 \r
269           if(!$("input[name='customserver']").hasClass("form-input-focus")){\r
270           $("input[name='customserver']").addClass("form-input-focus");\r
271           $("input[name='customserver']").prev().addClass("item-tip-focus");\r
272           }\r
273     }\r
274   \r
275     \r
276 });\r
277 \r
278 */\r
279 \r
280    jQuery.validator.addMethod("ip", function(value, element) {    \r
281       return this.optional(element) || /^(([-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))):(\d{1,5})$/.test(value);    \r
282     }, $.i18n.prop('org_openo_msb_route_validator_ip_format'));\r
283 \r
284 \r
285 \r
286   jQuery.validator.addMethod("url_head", function(value, element) {    \r
287       return this.optional(element) || /^\/.+((?!\/).)$/i.test(value) || /^\/$/i.test(value);    \r
288     }, $.i18n.prop('org_openo_msb_route_validator_url_head_format'));\r
289 \r
290 \r
291 jQuery.validator.addMethod("url_head_only", function(value, element) {    \r
292       return this.optional(element) || /^\/.*$/i.test(value);    \r
293     }, $.i18n.prop('org_openo_msb_route_validator_url_head_only_format'));\r
294   \r
295     jQuery.validator.addMethod("version", function(value, element) {    \r
296       return this.optional(element) || /^v\d+(\.\d+)?$/i.test(value);    \r
297     }, $.i18n.prop('org_openo_msb_route_form_version_tip'));\r
298 \r
299      jQuery.validator.addMethod("service_url", function(value, element) {    \r
300     return this.optional(element) || /^(|http:\/\/)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))):(\d{1,5})\/.*$/.test(value);    \r
301     }, $.i18n.prop('org_openo_msb_route_validator_url_format'));\r
302 \r
303      jQuery.validator.addMethod("url_line", function(value, element) {    \r
304       return this.optional(element) || /^((?!\/).)*$/.test(value);    \r
305     }, $.i18n.prop('org_openo_msb_route_validator_url_line_format'));\r
306 \r
307      jQuery.validator.addMethod("content", function(value, element) {    \r
308       return this.optional(element) ||  /^([0-9a-zA-Z]|-|_)*$/i.test(value);    \r
309     }, $.i18n.prop('org_openo_msb_route_validator_content_format'));\r
310 \r
311      jQuery.validator.addMethod("custom_content", function(value, element) {    \r
312       return this.optional(element) ||  /^([0-9a-zA-Z]|-|_|\/)*$/i.test(value);    \r
313     }, $.i18n.prop('org_openo_msb_route_validator_content_format'));\r
314 \r
315 \r
316  });\r
317 \r
318   var form = $('#routeForm');\r
319   var error = $('.alert-danger', form);\r
320   var success = $('.alert-success', form);\r
321 \r
322     var iuiform = $('#iuirouteForm');\r
323      var iuierror = $('.alert-danger', iuiform);\r
324       var iuisuccess = $('.alert-success', iuiform);\r
325 \r
326 \r
327       var customform = $('#customrouteForm');\r
328      var customerror = $('.alert-danger', customform);\r
329       var customsuccess = $('.alert-success', customform);\r
330 \r
331       var msbform = $('#msbForm');\r
332      var msberror = $('.alert-danger', msbform);\r
333       var msbsuccess = $('.alert-success', msbform);\r
334 \r
335 \r
336     form.validate({\r
337     doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.\r
338     errorElement: 'span', //default input error message container\r
339     errorClass: 'help-block', // default input error message class\r
340     focusInvalid: false, // do not focus the last invalid input\r
341     rules: {     \r
342      /* oriService:{\r
343     service_url:true,\r
344     maxlength:100\r
345     },*/\r
346       serviceName:{\r
347         required: true,\r
348         url_line:true,\r
349         content:true,\r
350         maxlength:50\r
351       },\r
352       version:{\r
353        // required: true,\r
354         maxlength:50,\r
355         version:true\r
356       },\r
357        url:{\r
358         required: true,\r
359         url_head:true,\r
360         maxlength:50\r
361       },\r
362       metricsUrl:{\r
363         url_head:true,\r
364         maxlength:50\r
365       },\r
366       server:{\r
367         ip:true,\r
368         maxlength:50\r
369       }\r
370     },\r
371     messages: { \r
372         serviceName:{\r
373         required: "Please enter the service name"\r
374       },      \r
375        url:{\r
376         required: "Please enter the URL address"\r
377        \r
378       },     \r
379        server:{\r
380         required:"Please enter the Host address"\r
381        \r
382       },\r
383 \r
384     },\r
385     errorPlacement: function (error, element) { // render error placement for each input type\r
386       error.insertAfter(element); // for other inputs, just perform default behavior\r
387     },\r
388 \r
389     invalidHandler: function (event, validator) { //display error alert on form submit   \r
390       success.hide();\r
391       error.show();\r
392       //ZteFrameWork.scrollTo(error, -200);\r
393     },\r
394 \r
395     highlight: function (element) { // hightlight error inputs\r
396       $(element)\r
397         .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group\r
398     },\r
399 \r
400     unhighlight: function (element) { // revert the change done by hightlight\r
401       $(element)\r
402         .closest('.form-group').removeClass('has-error'); // set error class to the control group\r
403     },\r
404 \r
405     success: function (label) {\r
406       label\r
407         .addClass('valid') // mark the current input as valid and display OK icon\r
408         .closest('.form-group').removeClass('has-error'); // set success class to the control group\r
409     },\r
410     submitHandler: function (form) {\r
411       success.show();\r
412       error.hide();\r
413       //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax\r
414     }\r
415 \r
416    });\r
417 \r
418     iuiform.validate({\r
419     doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.\r
420     errorElement: 'span', //default input error message container\r
421     errorClass: 'help-block', // default input error message class\r
422     focusInvalid: false, // do not focus the last invalid input\r
423     rules: {     \r
424     /*iuioriService:{\r
425     service_url:true,\r
426     maxlength:100\r
427     },*/\r
428     iuiserviceName:{\r
429         required: true,\r
430         url_line:true,\r
431         maxlength:50,\r
432         content:true\r
433       },     \r
434     iuiurl:{\r
435         required: true,\r
436         url_head:true,\r
437         maxlength:50\r
438       },\r
439    iuiserver:{\r
440         ip:true,\r
441         maxlength:50\r
442       }\r
443     },\r
444     messages: { \r
445       iuiserviceName:{\r
446         required: "Please enter the service name"\r
447       },\r
448       iuiurl:{\r
449         required:"Please enter the URL address"\r
450        \r
451       },\r
452       iuiserver:{\r
453         required: "Please enter the Host address"\r
454       },\r
455 \r
456     },\r
457     errorPlacement: function (iuierror, element) { // render error placement for each input type\r
458       iuierror.insertAfter(element); // for other inputs, just perform default behavior\r
459     },\r
460 \r
461     invalidHandler: function (event, validator) { //display error alert on form submit   \r
462       iuisuccess.hide();\r
463       iuierror.show();\r
464       //ZteFrameWork.scrollTo(error, -200);\r
465     },\r
466 \r
467     highlight: function (element) { // hightlight error inputs\r
468       $(element)\r
469         .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group\r
470     },\r
471 \r
472     unhighlight: function (element) { // revert the change done by hightlight\r
473       $(element)\r
474         .closest('.form-group').removeClass('has-error'); // set error class to the control group\r
475     },\r
476 \r
477     success: function (label) {\r
478       label\r
479         .addClass('valid') // mark the current input as valid and display OK icon\r
480         .closest('.form-group').removeClass('has-error'); // set success class to the control group\r
481     },\r
482     submitHandler: function (form) {\r
483       iuisuccess.show();\r
484       iuierror.hide();\r
485       //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax\r
486     }\r
487 \r
488    });\r
489 \r
490     customform.validate({\r
491     doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.\r
492     errorElement: 'span', //default input error message container\r
493     errorClass: 'help-block', // default input error message class\r
494     focusInvalid: false, // do not focus the last invalid input\r
495     rules: {     \r
496     /*customoriService:{\r
497     service_url:true,\r
498     maxlength:100\r
499     },*/\r
500     customserviceName:{\r
501         required: false,\r
502         url_head:true,\r
503         maxlength:100,\r
504         custom_content:true\r
505       },     \r
506     customurl:{\r
507         required: true,\r
508         url_head:true,\r
509         maxlength:50\r
510       },\r
511    customserver:{\r
512         ip:true,\r
513         maxlength:50\r
514       }\r
515     },\r
516     messages: { \r
517       customserviceName:{\r
518         required: "Please enter the service name"\r
519       },     \r
520       customurl:{\r
521         required: "Please enter the URL address"\r
522        \r
523       }\r
524 \r
525     },\r
526     errorPlacement: function (customerror, element) { // render error placement for each input type\r
527       customerror.insertAfter(element); // for other inputs, just perform default behavior\r
528     },\r
529 \r
530     invalidHandler: function (event, validator) { //display error alert on form submit   \r
531       customsuccess.hide();\r
532       customerror.show();\r
533       //ZteFrameWork.scrollTo(error, -200);\r
534     },\r
535 \r
536     highlight: function (element) { // hightlight error inputs\r
537       $(element)\r
538         .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group\r
539     },\r
540 \r
541     unhighlight: function (element) { // revert the change done by hightlight\r
542       $(element)\r
543         .closest('.form-group').removeClass('has-error'); // set error class to the control group\r
544     },\r
545 \r
546     success: function (label) {\r
547       label\r
548         .addClass('valid') // mark the current input as valid and display OK icon\r
549         .closest('.form-group').removeClass('has-error'); // set success class to the control group\r
550     },\r
551     submitHandler: function (form) {\r
552       customsuccess.show();\r
553       customerror.hide();\r
554       //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax\r
555     }\r
556 \r
557    });\r
558 \r
559 \r
560     msbform.validate({\r
561     doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.\r
562     errorElement: 'span', //default input error message container\r
563     errorClass: 'help-block', // default input error message class\r
564     focusInvalid: false, // do not focus the last invalid input\r
565     rules: {     \r
566     \r
567       serviceName:{\r
568         required: true,\r
569        // url_line:true,\r
570         custom_content:true,\r
571         maxlength:50\r
572       },\r
573       version:{\r
574         maxlength:50,\r
575         version:true\r
576       },\r
577        url:{\r
578         url_head:true,\r
579         maxlength:50\r
580       },\r
581       newHost:{\r
582         ip:true,\r
583         maxlength:50\r
584       },\r
585       newttl:{\r
586         digits:true,\r
587         min:0\r
588       },\r
589       protocol:{\r
590         required: true\r
591       },\r
592       type:{\r
593         required: true\r
594       }\r
595     },\r
596     messages: { \r
597         serviceName:{\r
598         required: "Please enter the service name"\r
599       },\r
600        protocol:{\r
601         required:  "Please select a service protocol"\r
602       },     \r
603        type:{\r
604         required: "Please select a service type"\r
605        \r
606       },\r
607       newttl:{\r
608         digits:"Please enter an integer",\r
609         min: "Not a negative" \r
610       }\r
611 \r
612     },\r
613     errorPlacement: function (msberror, element) { // render error placement for each input type\r
614       msberror.insertAfter(element); // for other inputs, just perform default behavior\r
615     },\r
616 \r
617     invalidHandler: function (event, validator) { //display error alert on form submit   \r
618       msbsuccess.hide();\r
619       msberror.show();\r
620       //ZteFrameWork.scrollTo(error, -200);\r
621     },\r
622 \r
623     highlight: function (element) { // hightlight error inputs\r
624       $(element)\r
625         .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group\r
626     },\r
627 \r
628     unhighlight: function (element) { // revert the change done by hightlight\r
629       $(element)\r
630         .closest('.form-group').removeClass('has-error'); // set error class to the control group\r
631     },\r
632 \r
633     success: function (label) {\r
634       label\r
635         .addClass('valid') // mark the current input as valid and display OK icon\r
636         .closest('.form-group').removeClass('has-error'); // set success class to the control group\r
637     },\r
638     submitHandler: function (form) {\r
639       msbsuccess.show();\r
640       msberror.hide();\r
641       //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax\r
642     }\r
643 \r
644    });\r
645 \r
646 \r