2 Copyright 2018 EveryUP srl
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
8 http://www.apache.org/licenses/LICENSE-2.0
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
17 //GraphEditor instance
18 var graph_editor
= new TCD3
.ModelGraphEditor();
22 'id': 'NS instance id',
24 'name-ref': 'NSD name',
25 'operational-status': 'Operational status',
26 'config-status': 'Config status',
27 'detailed-status': 'Detailed status',
28 'create-time': 'Creation date',
29 // 'instantiate_params' :'Instantiation parameters'
32 'id': 'VNF instance id',
34 'vnfd-ref': 'NSD name',
35 'member-vnf-index': 'Constituent VNF in the NS',
36 'ip-address': 'Mgmt IP address',
37 'vim-account-id': 'VIM id',
38 'create-time': 'Creation date'
43 "nsr": ["vnfr", "ns_vl"],
44 "vnfr": ["vdur", "cp", "vnf_vl"]
49 type
: type_view
['nsr'],
58 $(document
).ready(function () {
60 graph_editor
.addListener("filters_changed", changeFilter
);
61 graph_editor
.addListener("node:selected", refreshElementInfo
);
62 graph_editor
.addListener("node:deselected", refreshElementInfo
);
64 // graph_editor initialization
66 width
: $('#graph_editor_container').width(),
67 height
: $('#graph_editor_container').height(),
68 data_url
: window
.location
.href
,
69 //desc_id: getUrlParameter('id'),
70 gui_properties
: osm_gui_properties
,
74 behaviors
: buildBehaviorsOnEvents()
77 graph_editor
.handleFiltersParams(params
);
82 function handleForce(el
) {
83 graph_editor
.handleForce((el
.getAttribute('aria-pressed') === "true"));
86 function changeFilter(e
, c
) {
87 if (c
&& c
.link
&& c
.link
.view
[0]) {
88 updateLegend(c
.link
.view
[0]);
90 layerDetails(graph_editor
.getCurrentFilters())
93 function resetFilters() {
94 graph_editor
.handleFiltersParams(params
);
97 function buildBehaviorsOnEvents() {
99 var contextmenuNodesAction
= [
102 action: function (elm
, c_node
, i
) {
103 if (c_node
.info
.type
!== undefined) {
104 var current_layer_nodes
= Object
.keys(graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
);
105 if (current_layer_nodes
.indexOf(c_node
.info
.type
) >= 0) {
106 if (graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
) {
107 var new_layer
= graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
;
108 graph_editor
.handleFiltersParams({
110 type
: Object
.keys(graph_editor
.model
.layer
[new_layer
].nodes
),
121 showAlert('This is not an explorable node.')
130 'nodes': contextmenuNodesAction
135 function refreshElementInfo(event
, element
) {
136 if (event
.type
=== 'node:selected') {
137 switch (element
.info
.type
) {
139 vnfrDetails(element
.info
.osm
);
142 vdurDetails(element
.info
.osm
);
146 cpDetails(element
.info
.osm
);
150 vlDetails(element
.info
.osm
);
154 else if (event
.type
=== 'node:deselected') {
155 layerDetails(graph_editor
.getCurrentFilters())
160 function layerDetails(filters
) {
161 var side
= $('#side');
162 var graph_parameters
= graph_editor
.getGraphParams();
163 var layer_template
= '';
164 if(graph_parameters
['view'] && filters
.link
.view
.length
>0 && filters
.link
.view
[0]){
165 if(filters
.link
.view
[0] === 'nsr') {
166 layer_template
= getMainSection('NS View');
167 layer_template
+= '<table class="children">';
168 for (var key
in layer_map
['nsr']) {
169 if ( graph_parameters
['view']['nsr'][key
] ) {
170 var field_value
= graph_parameters
['view']['nsr'][key
];
171 if(key
=== 'create-time'){
172 field_value
= moment
.unix(field_value
).toISOString();
173 } else if (key
=== 'instantiate_params'){
174 field_value
= JSON
.stringify(field_value
);
176 layer_template
+= '<tr><td>' + layer_map
['nsr'][key
] + '</td><td>' + field_value
+ '</td></tr>';
179 layer_template
+= '</table>';
180 //layer_template += getChildrenTable(graph_parameters['view']['nsr']);
182 else if(filters
.link
.view
[0] === 'vnfr') {
183 layer_template
= getMainSection('VNF View');
184 var vnfr_id
= filters
.link
.group
[0];
186 layer_template
+= '<table class="children">';
187 var vnfr_data
= graph_parameters
['view']['vnfr'][vnfr_id
];
188 for (var key
in layer_map
['vnfr']) {
189 if ( vnfr_data
[key
] ) {
190 var field_value
= vnfr_data
[key
];
191 if(key
=== 'create-time'){
192 field_value
= moment
.unix(field_value
).toISOString();
194 layer_template
+= '<tr><td>' + layer_map
['vnfr'][key
] + '</td><td>' + field_value
+ '</td></tr>';
197 layer_template
+= '</table>';
202 side
.append(layer_template
)
205 function updateLegend(view
) {
206 var legend
= $('#legenda');
207 var nodes
= type_view
[view
];
208 var legend_template
= '';
209 var nodes_properties
= osm_gui_properties
['nodes'];
210 for (var n
in nodes
){
212 if(nodes_properties
[node
]){
213 legend_template
+= '<div class="node">' +
214 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+'"></div>' +
215 '<div class="name">' +nodes_properties
[node
].name
+ '</div></div>';
220 legend
.append(legend_template
)
225 'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'VIM Id',
226 'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
227 'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
228 'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id', 'vim-id': 'VIM id'
231 function vnfrDetails(vnfr
) {
232 var side
= $('#side');
233 var vnfr_template
= getMainSection('VNFR');
235 vnfr_template
+= getChildrenTable(vnfr
);
237 side
.append(vnfr_template
)
240 function vdurDetails(vdur
) {
241 var side
= $('#side');
242 var vdur_template
= getMainSectionWithStatus('VDUR', vdur
['status'] === 'ACTIVE');
243 vdur_template
+= getChildrenTable(vdur
);
245 if (vdur
['interfaces'].length
> 0) {
246 vdur_template
+= getSubSection('Interfaces:');
247 vdur_template
+= '<table class="children">';
249 for (var i
= 0; i
< vdur
['interfaces'].length
; ++i
) {
250 var interface = vdur
['interfaces'][i
];
251 var interface_template
= '<tr><td>' + interface['name'] + '</td>'
252 + '<td>IP:' + interface['ip-address'] + '</td>'
253 + '<td>MAC:' + interface['mac-address'] + '</td>';
254 vdur_template
+= interface_template
;
256 vdur_template
+= '</table>';
260 side
.append(vdur_template
)
263 function cpDetails(cp
) {
264 var side
= $('#side');
265 var cp_template
= getMainSection('Connection Point');
267 cp_template
+= getChildrenTable(cp
);
269 side
.append(cp_template
);
272 function vlDetails(vl
) {
273 var side
= $('#side');
274 var vl_template
= getMainSection('Virtual Link');
276 vl_template
+= getChildrenTable(vl
);
278 side
.append(vl_template
);
282 function getMainSection(title
) {
283 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
286 function getSubSection(title
) {
287 return '<div class="section"><span>' + title
+ '</span></div>';
290 function getMainSectionWithStatus(title
, status
) {
291 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
293 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
295 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
296 template
+= '</div>';
300 function getChildrenTable(data
) {
301 var template
= '<table class="children">';
303 for (var key
in data
) {
304 if (typeof data
[key
] === 'string') {
305 var key_map
= (map
[key
]) ? map
[key
] : key
;
306 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
309 template
+= '</table>';