diff options
Diffstat (limited to 'lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html')
| -rw-r--r-- | lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html | 536 |
1 files changed, 268 insertions, 268 deletions
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html index 9423b584..e263b97e 100644 --- a/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html +++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/bak/chartTopo.html @@ -1,268 +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> +
+<!-- /* 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>
|