lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html

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