openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html

   1 <!--\r
   2 \r
   3     Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   4 \r
   5     Licensed under the Apache License, Version 2.0 (the "License");\r
   6     you may not use this file except in compliance with the License.\r
   7     You may obtain a copy of the License at\r
   8 \r
   9             http://www.apache.org/licenses/LICENSE-2.0\r
  10 \r
  11     Unless required by applicable law or agreed to in writing, software\r
  12     distributed under the License is distributed on an "AS IS" BASIS,\r
  13     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  14     See the License for the specific language governing permissions and\r
  15     limitations under the License.\r
  16 \r
  17 -->\r
  18 \r
  19 <!DOCTYPE html>\r
  20 <html lang="en">\r
  21 <head>\r
  22     <meta charset="UTF-8">\r
  23     <title>Lifecycle Manager</title>\r
  24     <link href="css/bootstrap.min.css" rel="stylesheet"/>\r
  25     <link href="css/VMMain.css" rel="stylesheet"/>\r
  26     <link href="css/bootstrap-table.min.css" rel="stylesheet"/>\r
  27     <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
  28     <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  29     <script type="text/javascript" src="js/rest.js"></script>\r
  30     <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
  31     <script type="text/javascript" src="js/gsolcm.js"></script>\r
  32     <script type="text/javascript" src="../common/thirdparty/bootbox/bootbox.min.js"></script>\r
  33     <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
  34     <script type="text/javascript" src="js/jquery.bootstrap-growl.min.js"></script>\r
  35     <script type="text/javascript" src="js/jquery.isloading.min.js"></script>\r
  36     <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>\r
  37     <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />\r
  38     <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>\r
  39     <script type="text/javascript">\r
  40         $(document).ready(function () {\r
  41             new lcmHandler();\r
  42 \r
  43             $('.modal-dialog').draggable();\r
  44            // $("#detailCont").show();\r
  45             var jsondata = loadGetServiceData();\r
  46                         \r
  47                         $.each(jsondata,function(k,v){\r
  48                          jsondata[k].createTime=  new Date(jsondata[k].createTime).toUTCString();\r
  49                         });\r
  50                         \r
  51             $('#sai').bootstrapTable({\r
  52                 //Assigning data to table\r
  53                 data: jsondata\r
  54             });\r
  55  $('.table tbody tr').click(function() {\r
  56                 $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
  57             })\r
  58             \r
  59             $('.detail-top ul li').click(function() {\r
  60                 $(this).addClass('current').siblings().removeClass('current');\r
  61             });\r
  62             $("#topoCont").hide();\r
  63             $("#inpCont").show();\r
  64             $("#topoContMod").hide();\r
  65             $("#detailContMod").hide();\r
  66             $("#inpContMod").show();\r
  67             \r
  68             $('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {\r
  69                 var newURL = "accorTables.html?serviceId="+row.serviceId + "&serviceType="+row.serviceType;\r
  70                           //  var newURL = "accorTables.html?serviceId="+row.serviceId ;\r
  71                 console.log("URL: "+newURL);\r
  72                 document.getElementById("tabContainer").style.display = "none";\r
  73                 document.getElementById("detailConObj").setAttribute('data', newURL);\r
  74                 document.getElementById("detailContDlg").setAttribute('data', newURL);\r
  75                 document.getElementById("tabContainer").style.display = "block";\r
  76 \r
  77                 //loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);\r
  78                 document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);\r
  79                 document.getElementById("topoContDlg").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);\r
  80                                 document.getElementById('inputcontent').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));\r
  81                 document.getElementById('inputcontentDlg').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));\r
  82                 });\r
  83             \r
  84         });\r
  85 \r
  86         function operateFormatter(value, row, index) {\r
  87             return [\r
  88                 '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
  89             ].join('');\r
  90         }\r
  91         \r
  92         function operateFormatterServiceName(value, row, index){\r
  93                 var temp = row.serviceId;\r
  94                 return [\r
  95                     '<a data-toggle="modal" href="#ModifyModal" style="text-decoration:underline" onclick="return anchorClick(' + temp + ')">' + value + '</a>'\r
  96                 ].join('');\r
  97         }\r
  98         window.operateEvents = {\r
  99             'click .siteDeleteImg': function (e, value, row, index) {\r
 100                 // TO DO ajex call for delete\r
 101                 var result = deleteNe(row.id, row);\r
 102             }\r
 103         };\r
 104 \r
 105         function hideBasic() {\r
 106             $("#basicInfoTab").hide();\r
 107             initParameterTab();\r
 108             $("#templateParameterTab").show();\r
 109         }\r
 110 \r
 111         function showBasic() {\r
 112             $("#basicInfoTab").show();\r
 113             $("#templateParameterTab").hide();\r
 114         }\r
 115 \r
 116         function serviceTemplateChanged() {\r
 117             templateParameters.changed = true;\r
 118         }\r
 119 \r
 120         function showTopoCont() {\r
 121             $("#topoCont").show();\r
 122             $("#detailCont").hide();\r
 123             $("#inpCont").hide();\r
 124         }\r
 125 \r
 126         function showDetCont() {\r
 127             $("#topoCont").hide();\r
 128             $("#detailCont").show();\r
 129             $("#inpCont").hide();\r
 130         }\r
 131 \r
 132         function showInpCont() {\r
 133             $("#topoCont").hide();\r
 134             $("#detailCont").hide();\r
 135             $("#inpCont").show();\r
 136         }\r
 137 \r
 138         function showTopoContMod() {\r
 139             $("#topoContMod").show();\r
 140             $("#detailContMod").hide();\r
 141             $("#inpContMod").hide();\r
 142         }\r
 143 \r
 144         function showDetContMod() {\r
 145             $("#topoContMod").hide();\r
 146             $("#detailContMod").show();\r
 147             $("#inpContMod").hide();\r
 148         }\r
 149 \r
 150         function showInpContMod() {\r
 151             $("#topoContMod").hide();\r
 152             $("#detailContMod").hide();\r
 153             $("#inpContMod").show();\r
 154         }\r
 155 \r
 156         function loadIframe(iframeName, url) {\r
 157             var $iframe = $('#' + iframeName);\r
 158             if ( $iframe.length ) {\r
 159                 $iframe.attr('src',url);\r
 160                 $iframe.style.height = "400px";\r
 161                 return false;\r
 162             }\r
 163             return true;\r
 164         }\r
 165     </script>\r
 166     <style>\r
 167         .nav-tabs {\r
 168             border-bottom-style: none;\r
 169         }\r
 170         .mT15 {\r
 171             margin-top: 15px;\r
 172         }\r
 173         .fixed-table-container tbody td .th-inner,\r
 174         .fixed-table-container thead th .th-inner {\r
 175             line-height: 4px;\r
 176         }\r
 177         .fixed-table-pagination .pagination-info {\r
 178             display: none !important;\r
 179         }\r
 180         .table tbody tr:hover td,\r
 181         .table tbody tr.odd:hover td {\r
 182             background-color: #e6fbe0 !important;\r
 183         }\r
 184         /*.fixed-table-pagination .page-list{display:inline-block  !important}*/\r
 185         /*.detail-top ul{\r
 186         background:#F8F6F6 !important;\r
 187         }*/\r
 188         \r
 189         .detail {\r
 190             border-top-style: none;\r
 191         }\r
 192         .btn {\r
 193             padding: 4px;\r
 194         }\r
 195         #ModifyModal .modal-dialog {\r
 196             width: 1100px;\r
 197         }\r
 198         #vmAppDialog .modal-dialog {\r
 199             width: 630px;\r
 200         }\r
 201         #ModifyModal .modal-dialog body {\r
 202             margin: 10px;\r
 203         }\r
 204         .dropdown-menu {\r
 205             min-width: 10px;\r
 206         }\r
 207         .nav-tabs.nav-justified>.active>a,\r
 208         .nav-tabs.nav-justified>.active>a:hover,\r
 209         .nav-tabs.nav-justified>.active>a:focus {\r
 210             border-left: 1px solid #4AC9FF;\r
 211             border-right: 1px solid #4AC9FF;\r
 212             border-top: 1px solid #4AC9FF;\r
 213             border-right: 1px solid #4AC9FF\r
 214         }\r
 215         .nav-tabs.nav-justified>li>a {\r
 216             border-bottom: 1px solid #4AC9FF;\r
 217             border-radius: 4px 4px 0 0\r
 218         }\r
 219         .clearfix {\r
 220             display: none;\r
 221         }\r
 222         .isloading-wrapper.isloading-right{\r
 223             margin-left:10px;\r
 224         }\r
 225         .isloading-overlay{\r
 226             position:relative;\r
 227             text-align:center;\r
 228         }\r
 229         .isloading-overlay .isloading-wrapper{\r
 230             background: url("images/loading.gif") 90% 50% no-repeat #FFFFFF;\r
 231             padding:15px 30px;\r
 232             -webkit-border-radius:7px;\r
 233             -webkit-background-clip:padding-box;\r
 234             -moz-border-radius:7px;\r
 235             -moz-background-clip:padding;\r
 236             border-radius:7px;\r
 237             background-clip:padding-box;\r
 238             display:inline-block;\r
 239             margin:0 auto;\r
 240             top:10%;\r
 241             z-index:9000;\r
 242         }\r
 243         .icon-refresh{\r
 244             background: url("images/loading.gif") 50% 50% no-repeat;\r
 245         }\r
 246         </style>\r
 247 </head>\r
 248 <body id="open_base_site_cotentBody" class="cotentBody ng-scope">\r
 249 <div class="container-fluid ms-controller">\r
 250     <h3> Life Cycle Manager </h3>\r
 251  <div class="separator-line"></div>\r
 252     <div class="uploadBtn">\r
 253         <div id="open_base_tpL_userHeader" class="userHeader">\r
 254             <div id="open_base_tpL_buttonGroup" class="openoButton_buttonGroupClass">\r
 255                 <div class="openo openo-widget-button openoButton_buttonClass_parent ng-isolate-scope openoButton_buttonClass defaultbutton openoButton_button_default"\r
 256                      tabindex="0" id="false" text="res.brApp_ui_res_btn_create" icon-url="./images/add.png"\r
 257                      cls="defaultbutton" click="clickAdd"\r
 258                      style="display: inline-block; padding-left: 0px; padding-right: 0px;">\r
 259                     <div class="openoButton_buttonInnerClass openo-corner-all openoButton_Image" id="false_button">\r
 260                         <span class="openo-widget-button-image openoButton_buttonLeftImg"\r
 261                               style="background-image: url(images/add.png);"></span>\r
 262                         <span class="openoButton_buttonCenterText openoButton_buttonCenterTextFont">Create</span>\r
 263                         <span class="openo-widget-button-image openoButton_buttonImgDefault"></span>\r
 264                     </div>\r
 265                 </div>\r
 266             </div>\r
 267         </div>\r
 268     </div>\r
 269 \r
 270     <div class="row-fluid" data-name="table_zone">\r
 271         <div id='ict_virtualApplication_table_div'>\r
 272             <div>\r
 273                 <div class="top">\r
 274                     <table class="table table-striped" id="sai" data-pagination="true" data-page-size="5"\r
 275                            data-pagination-first-text="First" data-pagination-pre-text="Previous"\r
 276                            data-pagination-next-text="Next" data-pagination-last-text="Last" data-filter-control="true">\r
 277                         <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
 278                         <tr class="active" style="background:#D9D6D5">\r
 279 \r
 280                             <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"\r
 281                                 data-formatter="operateFormatterServiceName" data-field="serviceName"\r
 282                                 data-sortable="true" data-filter-control="input">\r
 283                                 <div class="openo-table-th-border"></div>\r
 284                                 <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 285                                                 <span id="overlayDesc_sorticon"\r
 286                                                       class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Service  Name\r
 287                                                         </span>\r
 288                                 </div>\r
 289                             </th>\r
 290 \r
 291                             <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"\r
 292                                 data-field="templateName" data-sortable="true" data-filter-control="input">\r
 293                                 <div class="openo-table-th-border"></div>\r
 294                                 <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 295                                                 <span id="overlayThincCPE_sorticon"\r
 296                                                       class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Template Name\r
 297                     </span>\r
 298                                 </div>\r
 299                             </th>\r
 300 \r
 301                             <!--  th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="overlayDCName" data-sortable="true">\r
 302                                 <div class="openo-table-th-border"></div>\r
 303                                 <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 304                                     <span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Service  Instruction                    </span>\r
 305                                 </div>\r
 306                             </th -->\r
 307                             <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"\r
 308                                 data-field="createTime" data-sortable="true" data-filter-control="input">\r
 309                                 <div class="openo-table-th-border"></div>\r
 310                                 <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 311                                                 <span id="overlayVPC_sorticon"\r
 312                                                       class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Create Time\r
 313                           </span>\r
 314                                 </div>\r
 315                             </th>\r
 316                             <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"\r
 317                                 data-field="creator" data-sortable="true" data-filter-control="input">\r
 318                                 <div class="openo-table-th-border"></div>\r
 319                                 <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 320                                                 <span id="overlayVPCCIDR_sorticon"\r
 321                                                       class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Creator\r
 322                           </span>\r
 323                                 </div>\r
 324                             </th>\r
 325                             <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign"\r
 326                                 data-field="overlayOperation" align="center" data-formatter="operateFormatter"\r
 327                                 data-events="operateEvents">\r
 328                                 <div class="openo-table-th-border"></div>\r
 329                                 <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 330                                     <span id="portAction_sorticon"\r
 331                                           class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Action</span>\r
 332                                 </div>\r
 333                             </th>\r
 334                         </tr>\r
 335                         </thead>\r
 336 \r
 337                         <tbody>\r
 338 \r
 339 \r
 340                         </tbody>\r
 341 \r
 342                     </table>\r
 343                 </div>\r
 344             </div>\r
 345         </div>\r
 346     </div>\r
 347 \r
 348     <div id="ModifyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"\r
 349          aria-hidden="false">\r
 350         <div class="modal-dialog">\r
 351             <div class="modal-content">\r
 352                 <div class="content" style="background:#fafafa;">\r
 353                     <div class="modal-header">\r
 354                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×\r
 355                         </button>\r
 356                         <h4 class="modal-title" id="">\r
 357                             <span>Service Info</span>\r
 358                         </h4>\r
 359                     </div>\r
 360 \r
 361                     <div class="detail" style="margin:10px;border-radius:5px;">\r
 362                         <div class="detail-top" style="margin-top:10px;border-radius:5px;">\r
 363                          <span><h2 style="margin-left: 1%">Detailed Info</h2></span>\r
 364                                                 \r
 365 \r
 366                                                 \r
 367                                                 \r
 368                         <!--    <ul class="nav nav-tabs nav-justified vmapp-margin">\r
 369                                 <li class="active basic">\r
 370                                     <a href="#" onClick="showDetContMod();" id="" data-toggle="tab">\r
 371                                         <span>Detail Info</span>\r
 372                                     </a>\r
 373                                 </li>\r
 374                                 <li class="">\r
 375                                     <a href="#" onclick="showTopoContMod();" data-toggle="tab">\r
 376                                         <span>Topo</span>\r
 377                                     </a>\r
 378                                 </li>\r
 379                                 <li class="">\r
 380                                     <a href="#" onclick="showInpContMod();" data-toggle="tab">\r
 381                                         <span>Input Data</span>\r
 382                                     </a>\r
 383                                 </li>\r
 384                             </ul> -->\r
 385 \r
 386                             <div id="detailContMod">\r
 387                                 <object id="detailContDlg" data="accorTables.html" width="100%" height="300" type="text/html">\r
 388 \r
 389                                 </object>\r
 390                             </div>\r
 391                             <div id="topoContMod" style="display:none;">\r
 392                                 <object id="topoContDlg" data="TopoAccor.html" width="100%" height="300" type="text/html">\r
 393 \r
 394                                 </object>\r
 395                                 <!--<iframe id="topoFrame" src="chartTopo.html" name="" style="width:100%; height:400px;" allowTransparency="true" scrolling="no" frameborder="0">\r
 396                                 </iframe>-->\r
 397                             </div>\r
 398                             <div id="inpContMod" style="display:none;">\r
 399                                 <object id="inputcontentDlg" data="InputData.html" width="100%" height="300"\r
 400                                         type="text/html">\r
 401 \r
 402                                 </object>\r
 403                                 <!--<iframe src="InputData.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">\r
 404                                 </iframe>\r
 405                                 </iframe>-->\r
 406                             </div>\r
 407 \r
 408                         </div>\r
 409                         <div class="detail-bottom"></div>\r
 410 \r
 411                     </div>\r
 412                     <div class="modal-footer">\r
 413                         <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"\r
 414                                 aria-hidden="true" id="">\r
 415                             <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>\r
 416                         </button>\r
 417                         <button data-dismiss="modal" style="width:80px;" type="button"\r
 418                                 class="btn button-previous SDBtn">\r
 419                             <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>\r
 420                         </button>\r
 421 \r
 422                     </div>\r
 423                     </br>\r
 424 \r
 425                 </div>\r
 426             </div>\r
 427         </div>\r
 428     </div>\r
 429 \r
 430     <div style="padding-top:20px;"></div>\r
 431 \r
 432     <div id="tabContainer" class="detail" style="border-radius:5px;display: none">\r
 433         <div class="detail-top" style="margin-top:2px;border-radius:5px;">\r
 434 \r
 435             <span><h2 style="margin-left: 1%">Detailed Info</h2></span>\r
 436 \r
 437             <div id="inpCont" style="display:none;">\r
 438                 <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">\r
 439                 </object>\r
 440             </div>\r
 441          <!--   <ul class="nav nav-tabs nav-justified vmapp-margin">\r
 442 \r
 443                 <li class="active basic">\r
 444                     <a href="#" onClick="showDetCont();" id="detHov" data-toggle="tab">\r
 445                         <span>Detail Info</span>\r
 446                     </a>\r
 447                 </li>\r
 448 \r
 449                 <li class="">\r
 450                     <a href="#" onclick="showTopoCont();" data-toggle="tab">\r
 451                         <span>Topo</span>\r
 452                     </a>\r
 453                 </li>\r
 454 \r
 455                 <li class="">\r
 456                     <a href="#" onclick="showInpCont();" data-toggle="tab">\r
 457                         <span>Input Data</span>\r
 458                     </a>\r
 459                 </li>\r
 460 \r
 461             </ul> -->\r
 462         </div>\r
 463 \r
 464         <div style="border-radius:5px;">\r
 465             <div id="detailCont" style="display:none;">\r
 466 \r
 467                 <object id="detailConObj" data="accorTables.html" width="100%" height="300" type="text/html">\r
 468 \r
 469                 </object>\r
 470             </div>\r
 471             <div id="topoCont" style="display:none;">\r
 472                 <!--<iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">\r
 473                 </iframe>-->\r
 474                 <!--<object data="chartTopo.html" width="100%" height="300" type="text/html">\r
 475 \r
 476                 </object>-->\r
 477                 <object id="topoContObj" data="TopoAccor.html" width="100%" height="300" type="text/html">\r
 478 \r
 479                 </object>\r
 480             </div>\r
 481             <div id="inpCont" style="display:none;">\r
 482                 <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">\r
 483                 </object>\r
 484             </div>\r
 485         </div>\r
 486 \r
 487     </div>\r
 488 \r
 489 </div>\r
 490 </br>\r
 491 \r
 492 <div id="vmAppDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">\r
 493     <div class="modal-dialog">\r
 494         <div class="modal-content">\r
 495             <div class="content">\r
 496                 <div class="modal-header" style="margin-bottom: 15px;">\r
 497                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×\r
 498                     </button>\r
 499                     <h4 class="modal-title" id="myModalLabel">\r
 500                         <span>Create</span>\r
 501                     </h4>\r
 502                 </div>\r
 503                 <form class="form-horizontal" role="form" id="neForm">\r
 504                     <div id="wizard">\r
 505                         <div class="modal-body">\r
 506 \r
 507                             <ul class="nav nav-tabs nav-justified vmapp-margin">\r
 508                                 <li class="active basic">\r
 509                                     <a href="#basicTab" style="margin-left:1px;" onclick="showBasic();" id="basicTab"\r
 510                                        data-toggle="tab">\r
 511                                         <span>Base</span>\r
 512                                     </a>\r
 513                                 </li>\r
 514                                 <li style="padding-right:2px;" class="para">\r
 515                                     <a href="#" onclick="hideBasic();" data-toggle="tab">\r
 516                                         <span>Template Parameters</span>\r
 517                                     </a>\r
 518                                 </li>\r
 519 \r
 520                             </ul>\r
 521 \r
 522                             <div id="basicInfoTab">\r
 523                                 <div class="mT15 form-group" style="margin-left:25px;"\r
 524                                      ms-class="has-error:vmAppDialog.name==''">\r
 525                                     <label class="col-sm-3 control-label">\r
 526                                         <span>Service Name</span>\r
 527                                         <span class="required">*</span>\r
 528                                     </label>\r
 529                                     <div class="col-sm-7">\r
 530                                         <input type="text" id="svcName" name="svcName" class="form-control"\r
 531                                                placeholder="Service Name" maxlength="256"/>\r
 532                                     </div>\r
 533                                 </div>\r
 534                                 <div class="mT15 form-group" style="margin-left:25px;"\r
 535                                      ms-class="has-error:vmAppDialog.name==''">\r
 536                                     <label class="col-sm-3 control-label">\r
 537                                         <span>Service Description</span>\r
 538                                         <span class="required">*</span>\r
 539                                     </label>\r
 540                                     <div class="col-sm-7">\r
 541                                         <input type="text" id="svcDesc" name="" class="form-control"\r
 542                                                placeholder="Service Description" maxlength="256"/>\r
 543                                     </div>\r
 544                                 </div>\r
 545 \r
 546                                 <div class="form-group" style="margin-left:25px;margin-bottom:15px;"\r
 547                                      ms-class="has-error:vmAppDialog.name==''">\r
 548                                     <label class="col-sm-3 control-label">\r
 549                                         <span>Service Template</span>\r
 550                                         <span class="required">*</span>\r
 551                                     </label>\r
 552                                     <div class="col-sm-7">\r
 553                                         <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;"\r
 554                                                 id="svcTempl" name="svcTempl" onchange="serviceTemplateChanged();">\r
 555                                             <option value="select">--select--</option>\r
 556                                             <option value="1.1">1.1</option>\r
 557                                             <option value="1.2">1.2</option>\r
 558                                         </select>\r
 559                                     </div>\r
 560                                 </div>\r
 561                             </div>\r
 562 \r
 563                             <div id="templateParameterTab">\r
 564 \r
 565                             </div>\r
 566 \r
 567                         </div>\r
 568                         <div class="modal-footer">\r
 569                             <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"\r
 570                                     aria-hidden="true" id="createNS">\r
 571                                 <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>\r
 572                             </button>\r
 573                             <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">\r
 574                                 <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>\r
 575                             </button>\r
 576 \r
 577                         </div>\r
 578                     </div>\r
 579                 </form>\r
 580             </div>\r
 581         </div>\r
 582     </div>\r
 583 </div>\r
 584 </div>\r
 585 <div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"\r
 586      style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">\r
 587     <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_0">\r
 588         <label class="openo-ellipsis openo-select-blank-item"\r
 589                style="width: 100%; display: block; height: 20px;"></label>\r
 590     </div>\r
 591     <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_1">\r
 592         <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">ETH</label>\r
 593     </div>\r
 594     <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_2">\r
 595         <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;" title="POS">POS</label>\r
 596     </div>\r
 597     <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_3">\r
 598         <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Trunk</label>\r
 599     </div>\r
 600     <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_4">\r
 601         <label class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Loopback</label>\r
 602     </div>\r
 603 </div>\r
 604 \r
 605 \r
 606 </body>\r
 607 </html>\r