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

   1 <!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   2  *\r
   3  * Licensed under the Apache License, Version 2.0 (the "License");\r
   4  * you may not use this file except in compliance with the License.\r
   5  * You may obtain a copy of the License at\r
   6  *\r
   7  *       http://www.apache.org/licenses/LICENSE-2.0\r
   8  *\r
   9  * Unless required by applicable law or agreed to in writing, software\r
  10  * distributed under the License is distributed on an "AS IS" BASIS,\r
  11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  12  * See the License for the specific language governing permissions and\r
  13  * limitations under the License.\r
  14  */\r
  15  -->\r
  16 <!DOCTYPE html>\r
  17 <html>\r
  18 \r
  19 <head lang="en">\r
  20     <meta charset="UTF-8">\r
  21     <title></title>\r
  22     <link href="css/bootstrap.min.css" rel="stylesheet"/>\r
  23     <link href="css/VMMain.css" rel="stylesheet"/>\r
  24     <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
  25     <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  26     <script type="text/javascript" src="js/rest.js"></script>\r
  27 \r
  28     <script>\r
  29         $(document).ready(function () {\r
  30                 \r
  31                         $("#dashboard").hide();\r
  32                         $("#nfvo_dashboard").hide()\r
  33             $("#overDiv").hide();\r
  34             $("#underDiv").hide();\r
  35 \r
  36             var serviceId = getQueryStringValue("serviceId");\r
  37                          var serviceType = getQueryStringValue("serviceType");\r
  38                         \r
  39             console.log("serviceId : " + serviceId);\r
  40                         \r
  41                         var jsonData = [];\r
  42                         var object = {};\r
  43 \r
  44                         if("SSAR" === serviceType)\r
  45                         {\r
  46                                 object.nodeType  = "sdn"\r
  47                                 jsonData[0] = object;\r
  48                         }\r
  49                         else if("NSAR" == serviceType || "NFAR" == serviceType || "NFVO" == serviceType)\r
  50                         {\r
  51                                 object.nodeType  = "nfv";\r
  52                                 jsonData[0] = object;\r
  53                         }\r
  54                         else{\r
  55                                 jsonData = loadServiceDetails(serviceId);\r
  56                         }\r
  57                         \r
  58             \r
  59                         \r
  60                         //TODO check for the type and update the tab\r
  61             console.log("jsonData length: " + jsonData.length);\r
  62        /*     for (i = 0; i < jsonData.length; i++) {\r
  63                // console.log("jsonData Name: " + jsonData[i].nodeType);\r
  64                 if (jsonData[i].nodeType.indexOf('sdn') != -1) {\r
  65                     //$("#sdnoLink").text(jsonData[i].name.toUpperCase());\r
  66                     console.log("Adding Accordian to SDNO");\r
  67                     $("#accordion").append(addAccordionData("sdno", "SDNO"));\r
  68                 }\r
  69                 else if (jsonData[i].nodeType.indexOf('gso') != -1) {\r
  70                     console.log("Adding Accordian to GSO");\r
  71                     $("#accordion").append(addAccordionData("gso", "GSO"));\r
  72                 }\r
  73                 else if (jsonData[i].nodeType.indexOf('nfv') != -1) {\r
  74                     console.log("Adding Accordian to NFVO");\r
  75                     $("#accordion").append(addAccordionData("nfvo", "NFVO"));\r
  76                 }\r
  77                 else {\r
  78 \r
  79                 }\r
  80             } */\r
  81 \r
  82             $("#overlayContObj").attr('data', 'overlayvpn.html?serviceId='+serviceId);\r
  83             $("#underlayContObj").attr('data', 'underlayvpn.html?serviceId='+serviceId);\r
  84 \r
  85             $("#nfvoContObj").attr('data', 'lcm_detail_nfvo_nodesinfo.html?serviceId='+serviceId);\r
  86         });\r
  87 \r
  88         function fnOver() {\r
  89             $("#dashboard").show();\r
  90             $("#overDiv").show();\r
  91             $("#underDiv").hide();\r
  92         }\r
  93 \r
  94         function fnUnder() {\r
  95             $("#dashboard").show();\r
  96             $("#overDiv").hide();\r
  97             $("#underDiv").show();\r
  98         }\r
  99 \r
 100         function clZte() {\r
 101             $("#dashboard").hide();\r
 102         }\r
 103 \r
 104         function fnLoadTblData(el, panelType) {\r
 105             console.log("panelType of "+el.id+" is "+panelType);\r
 106             var current = document.querySelector('.selected');\r
 107             if (current) {\r
 108                 current.classList.remove('selected');\r
 109             }\r
 110             el.classList.add('selected');\r
 111             switch (panelType) {\r
 112                 case "sdno":\r
 113                     $("#nfvo_dashboard").hide();\r
 114                     if(el.id == "overLink") {\r
 115                         $("#dashboard").show();\r
 116                         $("#overDiv").show();\r
 117                         $("#underDiv").hide();\r
 118                     } else if(el.id == "underLink"){\r
 119                         $("#dashboard").show();\r
 120                         $("#overDiv").hide();\r
 121                         $("#underDiv").show();\r
 122                     } else {\r
 123                         $("#dashboard").hide();\r
 124                         $("#overDiv").hide();\r
 125                         $("#underDiv").hide();\r
 126                     }\r
 127                     break;\r
 128                 case "gso":\r
 129                     $("#dashboard").hide();\r
 130                     $("#nfvo_dashboard").hide();\r
 131                     $("#overDiv").hide();\r
 132                     $("#underDiv").hide();\r
 133                     break;\r
 134                 case "nfvo":\r
 135                     $("#dashboard").hide();\r
 136                     $("#nfvo_dashboard").show();\r
 137                     $("#overDiv").hide();\r
 138                     $("#underDiv").hide();\r
 139                     break;\r
 140             }\r
 141 \r
 142         }\r
 143 \r
 144         function getQueryStringValue(key) {\r
 145             var params = new URLSearchParams(window.location.search.slice(1));\r
 146             return params.get(key);\r
 147         }\r
 148 \r
 149         function addAccordionData(type, text) {\r
 150             var content = '';\r
 151             content += '<div class="panel panel-default"><div class="panel-heading">';\r
 152             content += '<h4 class="panel-title">';\r
 153             content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne_'+type+'" onClick="fnLoadTblData(this, \''+type+'\');">';\r
 154             content += '<span id="sdnoLink">'+text+'</span></a>';\r
 155             content += '</h4></div>';\r
 156             if(type == "sdno") {\r
 157                 content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse in">';\r
 158             } else {\r
 159                 content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse">';\r
 160             }\r
 161             content += '<ul class="list-group">';\r
 162 \r
 163             if(type == "sdno") {\r
 164                 content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="overLink" class="list-group-item selected"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Overlay VPN</span>';\r
 165                 content += '</li>';\r
 166                 content += '<li id="underLink" onClick="fnLoadTblData(this, \''+type+'\');" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Underlay VPN</span>';\r
 167                 content += '</li>';\r
 168             }\r
 169             else if(type == "gso"){\r
 170                 content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linkgso" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>OPEN-O</span></li>';\r
 171             }\r
 172             else if(type == "nfvo"){\r
 173                 //content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';\r
 174             }\r
 175             content += '</ul></div></div>';\r
 176             return content;\r
 177         }\r
 178     </script>\r
 179 \r
 180     <style>\r
 181         body {\r
 182             overflow: hidden;\r
 183         }\r
 184 \r
 185         .panel-heading:hover {\r
 186             border: 1px solid #4ac9ff;\r
 187             color: #4ac9ff;\r
 188         }\r
 189 \r
 190         li:hover {\r
 191             cursor: pointer;\r
 192             color: #4ac9ff;\r
 193         }\r
 194 \r
 195         body {\r
 196             margin: 15px;\r
 197         }\r
 198 \r
 199         #accordion .glyphicon {\r
 200             margin-right: 10px;\r
 201         }\r
 202 \r
 203         .panel-collapse > .list-group .list-group-item:first-child {\r
 204             border-top-right-radius: 0;\r
 205             border-top-left-radius: 0;\r
 206         }\r
 207 \r
 208         .panel-collapse > .list-group .list-group-item {\r
 209             border-width: 1px 0;\r
 210         }\r
 211 \r
 212         .panel-collapse > .list-group {\r
 213             margin-bottom: 0;\r
 214         }\r
 215 \r
 216         .panel-collapse .list-group-item {\r
 217             border-radius: 0;\r
 218         }\r
 219 \r
 220         .panel-collapse .list-group .list-group {\r
 221             margin: 0;\r
 222             margin-top: 10px;\r
 223         }\r
 224 \r
 225         .panel-collapse .list-group-item li.list-group-item {\r
 226             margin: 0 -15px;\r
 227             border-top: 1px solid #ddd !important;\r
 228             border-bottom: 0;\r
 229             padding-left: 30px;\r
 230         }\r
 231 \r
 232         .panel-collapse .list-group-item li.list-group-item:last-child {\r
 233             padding-bottom: 0;\r
 234         }\r
 235 \r
 236         .panel-collapse div.list-group div.list-group {\r
 237             margin: 0;\r
 238         }\r
 239 \r
 240         .panel-collapse div.list-group .list-group a.list-group-item {\r
 241             border-top: 1px solid #ddd !important;\r
 242             border-bottom: 0;\r
 243             padding-left: 30px;\r
 244         }\r
 245 \r
 246         .panel-collapse .list-group-item li.list-group-item {\r
 247             border-top: 1px solid #DDD !important;\r
 248         }\r
 249 \r
 250         .selected {\r
 251             /*background-color: #ddd;*/\r
 252             color: #4ac9ff;\r
 253         }\r
 254         .panel-title>a {\r
 255             display: inline-block;\r
 256             width: 100%;\r
 257         }\r
 258     </style>\r
 259 </head>\r
 260 </body>\r
 261 <div class="">\r
 262     <div class="row">\r
 263         <div class="col-sm-3" style="width:18%; padding-right: 0;">\r
 264             <div class="panel-group" id="accordion">\r
 265                 <!--<div class="panel panel-default">\r
 266                     <div class="panel-heading">\r
 267                         <h4 class="panel-title">\r
 268                             <a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">\r
 269                                 <span id="sdnoLink">SDNO1223</span></a>\r
 270                         </h4>\r
 271                     </div>\r
 272                     <div id="collapseOne" class="panel-collapse collapse in">\r
 273                         <ul class="list-group">\r
 274                             <li onClick="fnOver();" id="overLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Overlay VPN</span>\r
 275 \r
 276                             </li>\r
 277                             <li id="underLink" onClick="fnUnder();" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Underlay VPN</span>\r
 278 \r
 279                             </li>\r
 280 \r
 281                         </ul>\r
 282                     </div>\r
 283                 </div>\r
 284                 <div class="panel panel-default">\r
 285                     <div class="panel-heading">\r
 286                         <h4 class="panel-title">\r
 287                             <a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">\r
 288                                 </span>NFVO</a>\r
 289                         </h4>\r
 290                     </div>\r
 291                     <div id="collapseFour" class="panel-collapse collapse">\r
 292                         <div class="list-group">\r
 293                             <li onClick="clZte();" id="underLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span>\r
 294 \r
 295                             </li>\r
 296 \r
 297                         </div>\r
 298                     </div>\r
 299                 </div>-->\r
 300 \r
 301             </div>\r
 302         </div>\r
 303         <div class="col-sm-3" style="width:82%; padding: 0;">\r
 304             <div id="dashboard" class="panel panel-default">\r
 305                 <div class="panel-heading">\r
 306                     <h3 class="panel-title">SDNO-VPN Manager</h3>\r
 307                 </div>\r
 308                 <div class="panel-body" style="height: 250px; overflow: auto; padding: 0; background-color: #fafafa">\r
 309 \r
 310                     <div id="overDiv">\r
 311                         <!--<iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"\r
 312                                 allowTransparency="true" scrolling="no" frameborder="0">\r
 313                         </iframe>-->\r
 314                         <object id="overlayContObj" data="overlayvpn.html" width="100%" height="450px" type="text/html">\r
 315 \r
 316                         </object>\r
 317                     </div>\r
 318                     <div id="underDiv">\r
 319                         <!--<iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"\r
 320                                 allowTransparency="true" scrolling="no" frameborder="0">\r
 321                         </iframe>-->\r
 322                         <object id="underlayContObj" data="underlayvpn.html" width="100%" height="450px" type="text/html">\r
 323 \r
 324                         </object>\r
 325                     </div>\r
 326                 </div>\r
 327                 </br>\r
 328             </div>\r
 329 \r
 330             <div id="nfvo_dashboard" class="panel panel-default">\r
 331                 <div class="panel-heading">\r
 332                     <h3 class="panel-title">NFVO</h3>\r
 333                 </div>\r
 334                 <div class="panel-body" style="height: 250px; overflow: auto; padding: 0; background-color: #fafafa">\r
 335                     <div id="nodesInfo">\r
 336                         <object id="nfvoContObj" data="lcm_detail_nfvo_nodesinfo.html" width="100%" height="450px" type="text/html">\r
 337 \r
 338                         </object>\r
 339                     </div>\r
 340                 </div>\r
 341                 </br>\r
 342             </div>\r
 343 \r
 344         </div>\r
 345     </div>\r
 346 </div>\r
 347 </div>\r
 348 </br>\r
 349 </body>\r
 350 \r
 351 </html>