lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html

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