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

   1 \r
   2 <!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *       http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16  -->\r
  17 \r
  18 <!DOCTYPE html>\r
  19 <html>\r
  20 \r
  21 <head lang="en">\r
  22     <meta charset="UTF-8">\r
  23     <title></title>\r
  24     <link href="css/bootstrap.min.css" rel="stylesheet" />\r
  25     <link href="css/VMMain.css" rel="stylesheet" />\r
  26     <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
  27 \r
  28     <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
  29     <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  30     <script type="text/javascript" src="js/rest.js"></script>\r
  31     <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
  32     <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script>\r
  33     <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />\r
  34 \r
  35 \r
  36     <script src="js/topo/sigma/sigma.min.js"></script>\r
  37     <script src="js/topo/sigma/sigma.renderers.edgeLabels.min.js"></script>\r
  38 \r
  39 \r
  40     <style>\r
  41         body {\r
  42             overflow: hidden;\r
  43         }\r
  44         .panel-heading:hover {\r
  45             border: 1px solid #4ac9ff;\r
  46             color: #4ac9ff;\r
  47         }\r
  48         li:hover {\r
  49             cursor: pointer;\r
  50             color: #4ac9ff;\r
  51         }\r
  52         body {\r
  53             margin: 15px;\r
  54         }\r
  55         #accordion .glyphicon {\r
  56             margin-right: 10px;\r
  57         }\r
  58         .panel-collapse>.list-group .list-group-item:first-child {\r
  59             border-top-right-radius: 0;\r
  60             border-top-left-radius: 0;\r
  61         }\r
  62         .panel-collapse>.list-group .list-group-item {\r
  63             border-width: 1px 0;\r
  64         }\r
  65         .panel-collapse>.list-group {\r
  66             margin-bottom: 0;\r
  67         }\r
  68         .panel-collapse .list-group-item {\r
  69             border-radius: 0;\r
  70         }\r
  71         .panel-collapse .list-group .list-group {\r
  72             margin: 0;\r
  73             margin-top: 10px;\r
  74         }\r
  75         .panel-collapse .list-group-item li.list-group-item {\r
  76             margin: 0 -15px;\r
  77             border-top: 1px solid #ddd !important;\r
  78             border-bottom: 0;\r
  79             padding-left: 30px;\r
  80         }\r
  81         .panel-collapse .list-group-item li.list-group-item:last-child {\r
  82             padding-bottom: 0;\r
  83         }\r
  84         .panel-collapse div.list-group div.list-group {\r
  85             margin: 0;\r
  86         }\r
  87         .panel-collapse div.list-group .list-group a.list-group-item {\r
  88             border-top: 1px solid #ddd !important;\r
  89             border-bottom: 0;\r
  90             padding-left: 30px;\r
  91         }\r
  92         .panel-collapse .list-group-item li.list-group-item {\r
  93             border-top: 1px solid #DDD !important;\r
  94         }\r
  95     </style>\r
  96     <script>\r
  97 \r
  98         $(function () {\r
  99             var serviceId = getQueryStringValue("serviceId");\r
 100             console.log("TOPO - serviceId : "+ serviceId);\r
 101 \r
 102            \r
 103 \r
 104             $('#container').highcharts({\r
 105                 chart: {\r
 106                     backgroundColor: 'rgb(250,250,250)',\r
 107                     events: {\r
 108                         load: function () {\r
 109 \r
 110 \r
 111                             var ren = this.renderer,\r
 112                                     colors = Highcharts.getOptions().colors,\r
 113                                     rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],\r
 114                                     leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];\r
 115 \r
 116 \r
 117                             ren.label('vCpe Name', 10, 82)\r
 118                                     .attr({\r
 119                                         fill: colors[0],\r
 120                                         stroke: 'white',\r
 121                                         'stroke-width': 2,\r
 122                                         padding: 5,\r
 123                                         r: 5\r
 124                                     })\r
 125                                     .css({\r
 126                                         color: 'white'\r
 127                                     })\r
 128                                     .add()\r
 129                                     .shadow(true);\r
 130 \r
 131 \r
 132                             ren.path(rightArrow)\r
 133                                     .attr({\r
 134                                         'stroke-width': 1,\r
 135                                         stroke: colors[1]\r
 136                                     })\r
 137                                     .translate(95, 95)\r
 138                                     .add();\r
 139 \r
 140                             ren.label('', 50, 75)\r
 141                                     .css({\r
 142                                         fontSize: '10px',\r
 143                                         color: colors[3]\r
 144                                     })\r
 145                                     .add();\r
 146 \r
 147 \r
 148 \r
 149                             ren.label('Site Name', 210, 82)\r
 150                                     .attr({\r
 151                                         fill: colors[0],\r
 152                                         stroke: 'white',\r
 153                                         'stroke-width': 2,\r
 154                                         padding: 5,\r
 155                                         r: 5\r
 156                                     })\r
 157                                     .css({\r
 158                                         color: 'white'\r
 159                                     })\r
 160                                     .add()\r
 161                                     .shadow(true);\r
 162 \r
 163 \r
 164                             ren.label('DC Name', 420, 82)\r
 165                                     .attr({\r
 166                                         fill: colors[0],\r
 167                                         stroke: 'white',\r
 168                                         'stroke-width': 2,\r
 169                                         padding: 5,\r
 170                                         r: 5\r
 171                                     })\r
 172                                     .css({\r
 173                                         color: 'white'\r
 174                                     })\r
 175                                     .add()\r
 176                                     .shadow(true);\r
 177 \r
 178                             ren.label('VPC', 620, 82)\r
 179                                     .attr({\r
 180                                         fill: colors[0],\r
 181                                         stroke: 'white',\r
 182                                         'stroke-width': 2,\r
 183                                         padding: 5,\r
 184                                         r: 5\r
 185                                     })\r
 186                                     .css({\r
 187                                         color: 'white'\r
 188                                     })\r
 189                                     .add()\r
 190                                     .shadow(true);\r
 191 \r
 192 \r
 193 \r
 194                             ren.path(rightArrow)\r
 195                                     .attr({\r
 196                                         'stroke-width': 1,\r
 197                                         stroke: colors[1]\r
 198                                     })\r
 199                                     .translate(300, 95)\r
 200                                     .add();\r
 201 \r
 202                             ren.path(rightArrow)\r
 203                                     .attr({\r
 204                                         'stroke-width': 1,\r
 205                                         stroke: colors[1]\r
 206                                     })\r
 207                                     .translate(500, 95)\r
 208                                     .add();\r
 209 \r
 210 \r
 211                         }\r
 212                     }\r
 213                 },\r
 214                 title: {\r
 215                     text: 'SDNO-TOPO',\r
 216                     style: {\r
 217                         color: 'black'\r
 218                     }\r
 219                 }\r
 220 \r
 221             });\r
 222             function addAccordionData(paneltype, text){\r
 223                 var content = '';\r
 224                 content += '<div id="panel_'+paneltype+'" class="panel panel-default" onclick="acordClick(\''+paneltype+'\');"><div class="panel-heading">';\r
 225                 content += '<h4 class="panel-title">';\r
 226                 content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">';\r
 227                 content += '<span id="sdnoLink">'+text+'</span></a>';\r
 228                 content += '</h4></div>';\r
 229                 content += '</div></div>';\r
 230                 return content;\r
 231             }\r
 232             function getQueryStringValue (key) {\r
 233                 var params = new URLSearchParams(window.location.search.slice(1));\r
 234                 return params.get(key);\r
 235             }\r
 236         });\r
 237         function acordClick(panelType) {\r
 238             //TODO: Act according to the panelType. value may be sdno, gso or nfvo\r
 239             console.log(panelType + " Clicked");\r
 240         }\r
 241     </script>\r
 242 \r
 243     <style>\r
 244 hr{\r
 245     margin:1px;\r
 246 }\r
 247 </style>\r
 248 </head>\r
 249 \r
 250 \r
 251 <body>\r
 252 <div class="">\r
 253     <div class="row">\r
 254         <div class="col-sm-3" style="width:18%">\r
 255             <div class="panel-group" id="accordion">\r
 256             </div>\r
 257         </div>\r
 258         <div class="col-sm-3" id="dashboard" style="width:82%">\r
 259             <div id="container" style="width: 750px; height: 250px; margin: 0 auto; display: inline-block;"> </div>\r
 260         </div>\r
 261     </div>\r
 262 </div>\r
 263 \r
 264 \r
 265 \r
 266 \r
 267 </body>\r
 268 </html>\r