openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.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>\r
  21 <head>\r
  22     <head lang="en">\r
  23         <meta charset="UTF-8">\r
  24         <title></title>\r
  25         <link href="css/bootstrap.min.css" rel="stylesheet"/>\r
  26         <link href="css/jquery.dataTables.min.css" rel="stylesheet"/>\r
  27         <link href="css/VMMain.css" rel="stylesheet"/>\r
  28         <link href="css/bootstrap-table.min.css" rel="stylesheet"/>\r
  29         <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
  30         <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  31         <script type="text/javascript" src="js/brs.js"></script>\r
  32         <script type="text/javascript" src="js/underlay.js"></script>\r
  33         <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
  34         <script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>\r
  35         <style>\r
  36             .dropdown-menu {\r
  37                 min-width: 10px;\r
  38             }\r
  39             .btn {\r
  40                 padding: 4px;\r
  41             }\r
  42 \r
  43     .fixed-table-container tbody td .th-inner,\r
  44     .fixed-table-container thead th .th-inner {\r
  45         line-height: 4px;\r
  46     }\r
  47     .fixed-table-pagination .pagination-info {\r
  48         display: none !important;\r
  49     }\r
  50     .table tbody tr:hover td,\r
  51     .table tbody tr.odd:hover td {\r
  52         background-color: #e6fbe0 !important;\r
  53     }\r
  54     .delete-btn {\r
  55         background: url(delete.png) no-repeat !important;\r
  56         width: 16px;\r
  57         height: 16px;\r
  58         border: none;\r
  59     }\r
  60     table tr.openoTable_row_selected td {\r
  61         background: #e8f8fe!important;\r
  62         border-bottom: 1px solid #e8e8e8!important;\r
  63     }\r
  64     .container-fluid {\r
  65         padding-left: 10px;\r
  66         padding-right: 0px;\r
  67     }\r
  68 \r
  69     .clearfix {\r
  70             display: none;\r
  71         }\r
  72        .page-list{\r
  73             float:none !important;\r
  74             display:inline-block !important;\r
  75             margin-right: 10px;\r
  76           vertical-align: middle;\r
  77            margin-bottom: 25px;\r
  78 \r
  79         }\r
  80          .pull-left{\r
  81         float:none !important;\r
  82           display:inline-block !important;\r
  83        }\r
  84 \r
  85        .pull-right{\r
  86         float:none !important;\r
  87          display:inline-block !important;\r
  88        }\r
  89 \r
  90        .fixed-table-pagination{\r
  91         height:20px;\r
  92         float:right;\r
  93        }\r
  94         </style>\r
  95         <script type="text/javascript">\r
  96             $(document).ready(function () {\r
  97 \r
  98 \r
  99                 var jsondata = loadUnderlayData();\r
 100                 $('#tbl_overlay').bootstrapTable({\r
 101                     //Assigning data to table\r
 102                     data: jsondata\r
 103                 });\r
 104                 $('#underlayTpDataTable').bootstrapTable({\r
 105                     //Assigning data to table\r
 106                     data: {}\r
 107                 });\r
 108                 $('.table tbody tr').click(function () {\r
 109                     $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
 110                 });\r
 111 \r
 112                 $('#sai').on('sort.bs.table', function () {\r
 113 \r
 114 \r
 115                 }).on('click-row.bs.table', function () {\r
 116 \r
 117 \r
 118                     $('.table tbody tr').click(function() {\r
 119 \r
 120                         $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
 121                     });\r
 122 \r
 123                 });\r
 124 \r
 125                 var serviceId = getQueryStringValue("serviceId");\r
 126                 console.log("underlayvpn - serviceId : " + serviceId);\r
 127 \r
 128             });\r
 129 \r
 130             function getQueryStringValue (key) {\r
 131                 var params = new URLSearchParams(window.location.search.slice(1));\r
 132                 return params.get(key);\r
 133             }\r
 134 \r
 135             function operateFormatter(value, row, index) {\r
 136                 return [\r
 137                     '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
 138                 ].join('');\r
 139             }\r
 140             window.operateEvents = {\r
 141                 'click .siteDeleteImg': function(e, value, row, index) {\r
 142                     // TO DO ajex call for delete\r
 143                     console.log(value, row, index);\r
 144                 }\r
 145             };\r
 146             /* function nameFormatter(value, row) {\r
 147              jsonForTP = row.json.data;\r
 148              var name=JSON.stringify(row.json.data);\r
 149              var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";\r
 150              return temp;\r
 151              }*/\r
 152             function getMethod(obj) {\r
 153                 //Update the lower table here\r
 154                 $('#underlayTpDataTable').bootstrapTable(\r
 155                         //Assigning data to table\r
 156                         "append", JSON.parse(obj.name)\r
 157                 );\r
 158             }\r
 159         </script>\r
 160 \r
 161 </head>\r
 162 \r
 163 <body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">\r
 164     <div class="container-fluid ms-controller">\r
 165         <h3>Underlay VPN</h3>\r
 166       <!--   <div class="row-fluid" data-name="table_zone">\r
 167             <div id='ict_virtualApplication_table_div'>\r
 168                 <div>\r
 169                     <div class="top">\r
 170                         <table class="table table-striped" id="tbl_overlay" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">\r
 171                             <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
 172                                 <tr class="active">\r
 173 \r
 174                                     <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">\r
 175                                         <div class="openo-table-th-border"></div>\r
 176                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 177                                             <span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign  openo-table-disable-element ">Name\r
 178                     </span>\r
 179                                         </div>\r
 180                                     </th>\r
 181                                     <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">\r
 182                                         <div class="openo-table-th-border"></div>\r
 183                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 184                                             <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">State\r
 185                             </span>\r
 186                                         </div>\r
 187                                     </th>\r
 188                                     <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
 189                                         <div class="openo-table-th-border"></div>\r
 190                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 191                                             <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Description\r
 192                     </span>\r
 193                                         </div>\r
 194                                     </th>\r
 195                                     <th class="openo-table-state-default openo-table-th openo-table-disable-element  leftHeaderAlign" data-field="underlayDescription" align="center" data-formatter="operateFormatter" data-events="operateEvents">\r
 196                                         <div class="openo-table-th-border"></div>\r
 197                                         <div class="DataTables_sort_wrapper openo-ellipsis ">\r
 198                                             <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip  leftHeaderAlign  openo-table-disable-element ">Action\r
 199                           </span>\r
 200                                         </div>\r
 201                                     </th>\r
 202 \r
 203                                 </tr>\r
 204                             </thead>\r
 205                             <tbody>\r
 206 \r
 207                                 <tr>\r
 208                                     <td>a_data </td>\r
 209                                     <td>data </td>\r
 210                                     <td>Sample1 </td>\r
 211                                     <td>\r
 212                                         <button class="table-btn delete-btn"></button>\r
 213                                     </td>\r
 214                                 </tr>\r
 215 \r
 216                                 <tr>\r
 217                                     <td>b_data </td>\r
 218                                     <td>new sample </td>\r
 219                                     <td>modified </td>\r
 220                                     <td>\r
 221                                         <button class="table-btn delete-btn"></button>\r
 222                                     </td>\r
 223                                 </tr>\r
 224 \r
 225                                 <tr>\r
 226                                     <td>data </td>\r
 227                                     <td>updated </td>\r
 228                                     <td>Sample </td>\r
 229                                     <td>\r
 230                                         <button class="table-btn delete-btn"></button>\r
 231                                     </td>\r
 232                                 </tr>\r
 233 \r
 234                                 <tr>\r
 235                                     <td>alarm </td>\r
 236                                     <td>deleted </td>\r
 237                                     <td>Sample </td>\r
 238                                     <td>\r
 239                                         <button class="table-btn delete-btn"></button>\r
 240                                     </td>\r
 241                                 </tr>\r
 242                             </tbody>\r
 243 \r
 244                         </table>\r
 245                     </div>\r
 246                 </div>\r
 247             </div>\r
 248         </div>\r
 249  -->\r
 250 \r
 251     <div class="row-fluid" data-name="table_zone">\r
 252         <div id='ict_virtualApplication_table_div'>\r
 253             <div>\r
 254                 <div class="top">\r
 255                     <table class="table-striped table " id="sai" data-pagination="true" data-pagination-first-text="First"\r
 256                            data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last"\r
 257                            data-filter-control="true">\r
 258                         <thead style="background:#ECECEC">\r
 259                         <tr>\r
 260                             <th data-field="name" data-sortable="true" data-filter-control="input">Name</th>\r
 261                             <th data-field="state" data-sortable="true" data-filter-control="input">State</th>\r
 262                             <th data-field="desc" data-sortable="true" data-filter-control="input">Description</th>\r
 263                             <th data-field="action" data-sortable="">Action</th>\r
 264                         </tr>\r
 265                         </thead>\r
 266                     </table>\r
 267                 </div>\r
 268             </div>\r
 269         </div>\r
 270     </div>\r
 271 \r
 272     <div id="tpDiv">\r
 273         <iframe src="UnderLay_TP.html" style="width:100%;height:450px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">\r
 274         </iframe>\r
 275     </div>\r
 276     <div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"\r
 277          style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">\r
 278         <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_0"><label\r
 279                 class="openo-ellipsis openo-select-blank-item" style="width: 100%; display: block; height: 20px;"></label>\r
 280         </div>\r
 281         <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_1"><label\r
 282                 class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">ETH</label></div>\r
 283         <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_2"><label\r
 284                 class="openo-ellipsis " style="width: 100%; display: block; height: 20px;" title="POS">POS</label></div>\r
 285         <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_3"><label\r
 286                 class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Trunk</label></div>\r
 287         <div class="openo-select-item openo-ellipsis  " id="filterTpLogicalType_openo-select-id_4"><label\r
 288                 class="openo-ellipsis " style="width: 100%; display: block; height: 20px;">Loopback</label></div>\r
 289     </div>\r
 290 </body>\r
 291 </html>