diff options
Diffstat (limited to 'lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html')
| -rw-r--r-- | lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html new file mode 100644 index 00000000..9423b584 --- /dev/null +++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html @@ -0,0 +1,268 @@ + +<!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + --> + +<!DOCTYPE html> +<html> + +<head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="css/bootstrap.min.css" rel="stylesheet" /> + <link href="css/VMMain.css" rel="stylesheet" /> + <link href="css/bootstrap-table.min.css" rel="stylesheet" /> + + <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> + <script type="text/javascript" src="js/bootstrap.min.js"></script> + <script type="text/javascript" src="js/rest.js"></script> + <script type="text/javascript" src="js/bootstrap-table.min.js"></script> + <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script> + <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" /> + + + <script src="js/topo/sigma/sigma.min.js"></script> + <script src="js/topo/sigma/sigma.renderers.edgeLabels.min.js"></script> + + + <style> + body { + overflow: hidden; + } + .panel-heading:hover { + border: 1px solid #4ac9ff; + color: #4ac9ff; + } + li:hover { + cursor: pointer; + color: #4ac9ff; + } + body { + margin: 15px; + } + #accordion .glyphicon { + margin-right: 10px; + } + .panel-collapse>.list-group .list-group-item:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .panel-collapse>.list-group .list-group-item { + border-width: 1px 0; + } + .panel-collapse>.list-group { + margin-bottom: 0; + } + .panel-collapse .list-group-item { + border-radius: 0; + } + .panel-collapse .list-group .list-group { + margin: 0; + margin-top: 10px; + } + .panel-collapse .list-group-item li.list-group-item { + margin: 0 -15px; + border-top: 1px solid #ddd !important; + border-bottom: 0; + padding-left: 30px; + } + .panel-collapse .list-group-item li.list-group-item:last-child { + padding-bottom: 0; + } + .panel-collapse div.list-group div.list-group { + margin: 0; + } + .panel-collapse div.list-group .list-group a.list-group-item { + border-top: 1px solid #ddd !important; + border-bottom: 0; + padding-left: 30px; + } + .panel-collapse .list-group-item li.list-group-item { + border-top: 1px solid #DDD !important; + } + </style> + <script> + + $(function () { + var serviceId = getQueryStringValue("serviceId"); + console.log("TOPO - serviceId : "+ serviceId); + + + + $('#container').highcharts({ + chart: { + backgroundColor: 'rgb(250,250,250)', + events: { + load: function () { + + + var ren = this.renderer, + colors = Highcharts.getOptions().colors, + rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5], + leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5]; + + + ren.label('vCpe Name', 10, 82) + .attr({ + fill: colors[0], + stroke: 'white', + 'stroke-width': 2, + padding: 5, + r: 5 + }) + .css({ + color: 'white' + }) + .add() + .shadow(true); + + + ren.path(rightArrow) + .attr({ + 'stroke-width': 1, + stroke: colors[1] + }) + .translate(95, 95) + .add(); + + ren.label('', 50, 75) + .css({ + fontSize: '10px', + color: colors[3] + }) + .add(); + + + + ren.label('Site Name', 210, 82) + .attr({ + fill: colors[0], + stroke: 'white', + 'stroke-width': 2, + padding: 5, + r: 5 + }) + .css({ + color: 'white' + }) + .add() + .shadow(true); + + + ren.label('DC Name', 420, 82) + .attr({ + fill: colors[0], + stroke: 'white', + 'stroke-width': 2, + padding: 5, + r: 5 + }) + .css({ + color: 'white' + }) + .add() + .shadow(true); + + ren.label('VPC', 620, 82) + .attr({ + fill: colors[0], + stroke: 'white', + 'stroke-width': 2, + padding: 5, + r: 5 + }) + .css({ + color: 'white' + }) + .add() + .shadow(true); + + + + ren.path(rightArrow) + .attr({ + 'stroke-width': 1, + stroke: colors[1] + }) + .translate(300, 95) + .add(); + + ren.path(rightArrow) + .attr({ + 'stroke-width': 1, + stroke: colors[1] + }) + .translate(500, 95) + .add(); + + + } + } + }, + title: { + text: 'SDNO-TOPO', + style: { + color: 'black' + } + } + + }); + function addAccordionData(paneltype, text){ + var content = ''; + content += '<div id="panel_'+paneltype+'" class="panel panel-default" onclick="acordClick(\''+paneltype+'\');"><div class="panel-heading">'; + content += '<h4 class="panel-title">'; + content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">'; + content += '<span id="sdnoLink">'+text+'</span></a>'; + content += '</h4></div>'; + content += '</div></div>'; + return content; + } + function getQueryStringValue (key) { + var params = new URLSearchParams(window.location.search.slice(1)); + return params.get(key); + } + }); + function acordClick(panelType) { + //TODO: Act according to the panelType. value may be sdno, gso or nfvo + console.log(panelType + " Clicked"); + } + </script> + + <style> +hr{ + margin:1px; +} +</style> +</head> + + +<body> +<div class=""> + <div class="row"> + <div class="col-sm-3" style="width:18%"> + <div class="panel-group" id="accordion"> + </div> + </div> + <div class="col-sm-3" id="dashboard" style="width:82%"> + <div id="container" style="width: 750px; height: 250px; margin: 0 auto; display: inline-block;"> </div> + </div> + </div> +</div> + + + + +</body> +</html> |