portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html

   1 <!DOCTYPE html>\r
   2 <html>\r
   3 <head>\r
   4     <link href="css/bootstrap.min.css" rel="stylesheet" />\r
   5 \r
   6     <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
   7 \r
   8     <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
   9     <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  10     <script type="text/javascript" src="js/rest.js"></script>\r
  11     <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
  12     <script>\r
  13         $(document).ready(function () {\r
  14             var serviceId = getQueryStringValue("serviceId");\r
  15             console.log("TOPOAccor - serviceId : " + serviceId);\r
  16 \r
  17             $("#topoContObj").attr('data', 'chartTopo.html?serviceId='+serviceId);\r
  18             $("#nfvotopoContObj").attr('data', 'lcm_detail_nfvo_topology.html?serviceId='+serviceId);\r
  19         });\r
  20 \r
  21         function getQueryStringValue (key) {\r
  22             var params = new URLSearchParams(window.location.search.slice(1));\r
  23             return params.get(key);\r
  24         }\r
  25         function acordClick_sdno() {\r
  26             $("#topoContObj").show();\r
  27             $("#nfvotopoContObj").hide();\r
  28         }\r
  29         function acordClick_nfvo() {\r
  30             $("#nfvotopoContObj").show();\r
  31             $("#topoContObj").hide();\r
  32         }\r
  33 \r
  34     </script>\r
  35     <meta charset="utf-8">\r
  36     <title>JS Bin</title>\r
  37     <style>\r
  38         body {\r
  39             overflow: hidden;\r
  40             margin: 15px;\r
  41         }\r
  42         .panel-heading:hover {\r
  43             border: 1px solid #4ac9ff;\r
  44             color: #4ac9ff;\r
  45         }\r
  46 \r
  47         li:hover {\r
  48             cursor: pointer;\r
  49             color: #4ac9ff;\r
  50         }\r
  51         #accordion .glyphicon {\r
  52             margin-right: 10px;\r
  53         }\r
  54 \r
  55         .panel-collapse > .list-group .list-group-item:first-child {\r
  56             border-top-right-radius: 0;\r
  57             border-top-left-radius: 0;\r
  58         }\r
  59 \r
  60         .panel-collapse > .list-group .list-group-item {\r
  61             border-width: 1px 0;\r
  62         }\r
  63 \r
  64         .panel-collapse > .list-group {\r
  65             margin-bottom: 0;\r
  66         }\r
  67 \r
  68         .panel-collapse .list-group-item {\r
  69             border-radius: 0;\r
  70         }\r
  71 \r
  72         .panel-collapse .list-group .list-group {\r
  73             margin: 0;\r
  74             margin-top: 10px;\r
  75         }\r
  76 \r
  77         .panel-collapse .list-group-item li.list-group-item {\r
  78             margin: 0 -15px;\r
  79             border-top: 1px solid #ddd !important;\r
  80             border-bottom: 0;\r
  81             padding-left: 30px;\r
  82         }\r
  83 \r
  84         .panel-collapse .list-group-item li.list-group-item:last-child {\r
  85             padding-bottom: 0;\r
  86         }\r
  87 \r
  88         .panel-collapse div.list-group div.list-group {\r
  89             margin: 0;\r
  90         }\r
  91 \r
  92         .panel-collapse div.list-group .list-group a.list-group-item {\r
  93             border-top: 1px solid #ddd !important;\r
  94             border-bottom: 0;\r
  95             padding-left: 30px;\r
  96         }\r
  97 \r
  98         .panel-collapse .list-group-item li.list-group-item {\r
  99             border-top: 1px solid #DDD !important;\r
 100         }\r
 101 \r
 102         .selected {\r
 103             /*background-color: #ddd;*/\r
 104             color: #4ac9ff;\r
 105         }\r
 106         .panel-title>a {\r
 107             display: inline-block;\r
 108             width: 100%;\r
 109         }\r
 110 \r
 111     </style>\r
 112 </head>\r
 113 <body>\r
 114 \r
 115     <div class="row">\r
 116         <div class="col-sm-3" style="width: 18%; padding-right: 0;">\r
 117             <div class="panel-group" id="accordion">\r
 118                 <div class="panel panel-default">\r
 119                     <div class="panel-heading">\r
 120                         <h4 class="panel-title">\r
 121                             <a id="sdno" style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" onClick="acordClick_sdno();">\r
 122                                 SDNO\r
 123                             </a>\r
 124                         </h4>\r
 125                     </div>\r
 126                 </div>\r
 127             </div>\r
 128             <div class="panel panel-default">\r
 129                 <div class="panel-heading">\r
 130                     <h4 class="panel-title">\r
 131                         <a id="nfvo" style="text-decoration:none;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" onClick="acordClick_nfvo();">\r
 132                             NFVO\r
 133                         </a>\r
 134                     </h4>\r
 135                 </div>\r
 136             </div>\r
 137         </div>\r
 138         <div class="col-sm-3" style="width: 82%; padding-right: 0;">\r
 139             <div class="panel-body" style="padding: 0">\r
 140                 <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">\r
 141 \r
 142                 </object>\r
 143             </div>\r
 144             <div class="panel-body" style="padding: 0">\r
 145                 <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">\r
 146 \r
 147                 </object>\r
 148             </div>\r
 149         </div>\r
 150     </div>\r
 151 \r
 152 \r
 153 </body>\r
 154 </html>