msb-core/apiroute/apiroute-service/src/main/resources/iui-route/js/routeFunc.js

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