1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/* 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.
*/
function extractOverlayVPNId()
{
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
var id = unescape(temp[1]);
return id;
}
function Topology(containerId) {
/**
* IMPORTANT: This only works with the canvas renderer. TBD in the future
* will also support the WebGL renderer.
*/
sigma.utils.pkg('sigma.canvas.nodes');
this.s = new sigma({
graph : {
nodes : [],
edges : []
},
renderer : {
// IMPORTANT:
// This works only with the canvas renderer, so the
// renderer type set as "canvas" is necessary here.
container : document.getElementById(containerId),
type : 'canvas'
},
settings : {
minNodeSize : 8,
maxNodeSize : 64,
edgeLabelSize : 'proportional'
}
});
this.addNode = addNode;
this.addEdge = addEdge;
}
function addNode(node) {
this.s.graph.addNode(node);
}
function addEdge(edge) {
this.s.graph.addEdge(edge);
}
function init() {
var node1 = new Node("1", "ThinCPE", 16, "device_icon", 0.1, 0.5);
var node2 = new Node("2", "vCPE", 16, "device_icon", 0.4, 0.5);
var node3 = new Node("3", "GW", 16, "device_icon", 0.8, 0.5);
var node6 = new Node("6", "FW", 8, "sfc_device_icon", 0.85, 0.4);
var node7 = new Node("7", "LB", 8, "sfc_device_icon", 0.9, 0.3);
var node8 = new Node("8", "VPC", 48, "network_icon", 1.05, 0.4);
var node4 = new Node("4", "vFW", 8, "sfc_device_icon", 0.32, 0.35);
var node5 = new Node("5", "vLB", 8, "sfc_device_icon", 0.48, 0.35);
var edge1 = new Edge("e1", "VxLAN", "1", "2", 0.5, "blue");
var edge2 = new Edge("e2", "IPSec", "2", "3", 0.5, "green");
var edge3 = new Edge("e3", "", "2", "4", 0.5, "grey");
var edge4 = new Edge("e4", "", "4", "5", 0.5, "grey");
var edge5 = new Edge("e5", "", "5", "2", 0.5, "grey");
var edge6 = new Edge("e6", "", "3", "6", 0.5, "grey");
var edge7 = new Edge("e7", "", "6", "7", 0.5, "grey");
var edge8 = new Edge("e8", "", "7", "8", 0.5, "grey");
var topology = new Topology("container");
topology.addNode(node1);
topology.addNode(node2);
topology.addNode(node3);
topology.addNode(node4);
topology.addNode(node5);
topology.addNode(node6);
topology.addNode(node7);
topology.addNode(node8);
topology.addEdge(edge1);
topology.addEdge(edge2);
topology.addEdge(edge3);
topology.addEdge(edge4);
topology.addEdge(edge5);
topology.addEdge(edge6);
topology.addEdge(edge7);
topology.addEdge(edge8);
CustomShapes.init(topology.s);
topology.s.refresh();
}
$(document).ready(function() {
init();
});
|