1193b18f750eec6b6b710ec0a1d444ec53e2ec3c
2 var graph_editor
= new TCD3
.ModelGraphEditor();
5 "nsr": ["vnfr", "ns_vl"],
6 "vnfr": ["vdur", "cp", "vnf_vl"]
11 type
: type_view
['nsr'],
20 $(document
).ready(function () {
22 graph_editor
.addListener("filters_changed", changeFilter
);
23 graph_editor
.addListener("node:selected", refreshElementInfo
);
24 graph_editor
.addListener("node:deselected", refreshElementInfo
);
26 // graph_editor initialization
28 width
: $('#graph_editor_container').width(),
29 height
: $('#graph_editor_container').height(),
30 data_url
: window
.location
.href
,
31 //desc_id: getUrlParameter('id'),
32 gui_properties
: osm_gui_properties
,
36 behaviors
: buildBehaviorsOnEvents()
39 graph_editor
.handleFiltersParams(params
);
45 function handleForce(el
) {
46 graph_editor
.handleForce((el
.getAttribute('aria-pressed') === "true"));
49 function changeFilter(e
, c
) {
50 if (c
&& c
.link
&& c
.link
.view
[0]) {
51 updateLegend(c
.link
.view
[0]);
53 layerDetails(graph_editor
.getCurrentFilters())
56 function resetFilters() {
57 graph_editor
.handleFiltersParams(params
);
60 function buildBehaviorsOnEvents() {
62 var contextmenuNodesAction
= [
65 action: function (elm
, c_node
, i
) {
66 if (c_node
.info
.type
!== undefined) {
67 var current_layer_nodes
= Object
.keys(graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
);
68 if (current_layer_nodes
.indexOf(c_node
.info
.type
) >= 0) {
69 if (graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
) {
70 var new_layer
= graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
;
71 graph_editor
.handleFiltersParams({
73 type
: Object
.keys(graph_editor
.model
.layer
[new_layer
].nodes
),
84 showAlert('This is not an explorable node.')
93 'nodes': contextmenuNodesAction
98 function refreshElementInfo(event
, element
) {
99 if (event
.type
=== 'node:selected') {
100 switch (element
.info
.type
) {
102 vnfrDetails(element
.info
.osm
);
105 vdurDetails(element
.info
.osm
);
109 cpDetails(element
.info
.osm
);
113 vlDetails(element
.info
.osm
);
117 else if (event
.type
=== 'node:deselected') {
118 layerDetails(graph_editor
.getCurrentFilters())
122 function layerDetails(filters
) {
123 var side
= $('#side');
124 var graph_parameters
= graph_editor
.getGraphParams();
125 var layer_template
= '';
126 if(graph_parameters
['view'] && filters
.link
.view
.length
>0 && filters
.link
.view
[0]){
127 if(filters
.link
.view
[0] === 'nsr') {
128 layer_template
= getMainSection('NS View');
129 layer_template
+= getChildrenTable(graph_parameters
['view']['nsr']);
131 else if(filters
.link
.view
[0] === 'vnfr') {
132 layer_template
= getMainSection('VNF View');
133 var vnfr_id
= filters
.link
.group
[0];
134 layer_template
+= getChildrenTable(graph_parameters
['view']['vnfr'][vnfr_id
]);
139 side
.append(layer_template
)
142 function updateLegend(view
) {
143 var legend
= $('#legenda');
144 var nodes
= type_view
[view
];
145 var legend_template
= '';
146 var nodes_properties
= osm_gui_properties
['nodes'];
147 for (var n
in nodes
){
149 if(nodes_properties
[node
]){
150 legend_template
+= '<div class="node">' +
151 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+'"></div>' +
152 '<div class="name">' +nodes_properties
[node
].name
+ '</div></div>';
157 legend
.append(legend_template
)
162 'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'Vim Id',
163 'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
164 'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
165 'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id'
168 function vnfrDetails(vnfr
) {
169 var side
= $('#side');
170 var vnfr_template
= getMainSection('VNFR');
172 vnfr_template
+= getChildrenTable(vnfr
);
174 side
.append(vnfr_template
)
177 function vdurDetails(vdur
) {
178 var side
= $('#side');
179 var vdur_template
= getMainSectionWithStatus('VDUR', vdur
['status'] === 'ACTIVE');
180 vdur_template
+= getChildrenTable(vdur
);
182 if (vdur
['interfaces'].length
> 0) {
183 vdur_template
+= getSubSection('Interfaces:');
184 vdur_template
+= '<table class="children">';
186 for (var i
= 0; i
< vdur
['interfaces'].length
; ++i
) {
187 var interface = vdur
['interfaces'][i
];
188 var interface_template
= '<tr><td>' + interface['name'] + '</td>'
189 + '<td>IP:' + interface['ip-address'] + '</td>'
190 + '<td>MAC:' + interface['mac-address'] + '</td>';
191 vdur_template
+= interface_template
;
193 vdur_template
+= '</table>';
197 side
.append(vdur_template
)
200 function cpDetails(cp
) {
201 var side
= $('#side');
202 var cp_template
= getMainSection('Connection Point');
204 cp_template
+= getChildrenTable(cp
);
206 side
.append(cp_template
);
209 function vlDetails(vl
) {
210 var side
= $('#side');
211 var vl_template
= getMainSection('Virtual Link');
213 vl_template
+= getChildrenTable(vl
);
215 side
.append(vl_template
);
219 function getMainSection(title
) {
220 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
223 function getSubSection(title
) {
224 return '<div class="section"><span>' + title
+ '</span></div>';
227 function getMainSectionWithStatus(title
, status
) {
228 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
230 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
232 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
233 template
+= '</div>';
237 function getChildrenTable(data
) {
238 var template
= '<table class="children">';
240 for (var key
in data
) {
241 if (typeof data
[key
] === 'string') {
242 var key_map
= (map
[key
]) ? map
[key
] : key
;
243 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
246 template
+= '</table>';