diff options
Diffstat (limited to 'portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html')
| -rw-r--r-- | portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html b/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html new file mode 100644 index 00000000..e9fccf60 --- /dev/null +++ b/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html @@ -0,0 +1,268 @@ +
+<!-- /* Copyright 2016, 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>
|