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