lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html

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