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();
21 "nsd": ["vnf", "ns_vl"],
22 "vnfd": ["vdu", "cp", "vnf_vl", "int_cp"]
26 'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'Vim Id',
27 'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
28 'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
29 'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id'
34 type
: type_view
[getUrlParameter('type')],
39 view
: [getUrlParameter('type')]
43 $(document
).ready(function () {
45 graph_editor
.addListener("filters_changed", changeFilter
);
46 graph_editor
.addListener("node:selected", refreshElementInfo
);
47 graph_editor
.addListener("node:deselected", refreshElementInfo
);
49 // graph_editor initialization
51 width
: $('#graph_editor_container').width(),
52 height
: $('#graph_editor_container').height(),
54 data_url
: window
.location
.href
,
55 //desc_id: getUrlParameter('id'),
56 gui_properties
: osm_gui_properties
,
60 behaviors
: buildBehaviorsOnEvents()
63 graph_editor
.handleFiltersParams(params
);
67 $("#side_form").submit(function (event
) {
68 event
.preventDefault(); //prevent default action
69 console
.log("ON submit")
70 var form_data
= new FormData(this); //Encode form elements for submission
71 var formDataJson
= {};
72 form_data
.forEach(function (value
, key
) {
73 formDataJson
[key
] = value
;
75 var dialog
= bootbox
.dialog({
76 message
: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Updating...</div>',
79 if (graph_editor
._selected_node
) {
80 graph_editor
.updateDataNode(graph_editor
._selected_node
, formDataJson
, function () {
82 }, function (result
) {
83 var data
= result
.responseJSON
;
84 var title
= "Error " + (data
&& data
.code
? data
.code
: 'unknown');
85 var message
= data
&& data
.detail
? data
.detail
: 'No detail available.';
93 graph_editor
.updateGraphParams(formDataJson
, function () {
95 }, function (result
) {
96 var data
= result
.responseJSON
;
97 var title
= "Error " + (data
&& data
.code
? data
.code
: 'unknown');
98 var message
= data
&& data
.detail
? data
.detail
: 'No detail available.';
111 function initDropOnGraph() {
113 var dropZone
= document
.getElementById('graph_editor_container');
114 dropZone
.ondrop = function (e
) {
115 var group
= graph_editor
.getCurrentGroup();
117 var elemet_id
= e
.dataTransfer
.getData("text/plain");
119 var nodetype
= $('#' + elemet_id
).attr('type-name');
120 var random_name
= nodetype
+ "_" + generateUID();
122 var node_information
= {
127 'custom_label': random_name
130 'desc_id': getUrlParameter('id'),
131 'desc_type': getUrlParameter('type'),
137 if (nodetype
=== 'ns_vl') {
139 graph_editor
.addNode(node_information
, function () {
141 }, function (error
) {
144 } else if (nodetype
=== 'vnf') {
145 node_information
['id'] = $('#' + elemet_id
).attr('desc_id');
146 graph_editor
.addNode(node_information
, function () {
148 }, function (error
) {
154 dropZone
.ondragover = function (ev
) {
155 console
.log("ondragover");
159 dropZone
.ondragleave = function () {
160 console
.log("ondragleave");
166 function handleForce(el
) {
167 graph_editor
.handleForce((el
.getAttribute('aria-pressed') === "true"));
170 function changeFilter(e
, c
) {
171 if (c
&& c
.link
&& c
.link
.view
[0]) {
172 updateLegend(c
.link
.view
[0]);
173 updatePalette(c
.link
.view
[0]);
175 layerDetails(graph_editor
.getCurrentFilters())
178 function resetFilters() {
179 graph_editor
.handleFiltersParams(params
);
182 function buildBehaviorsOnEvents() {
183 var contextmenuNodesAction
= [];
185 'nodes': contextmenuNodesAction
190 function refreshElementInfo(event
, element
) {
191 if (event
.type
=== 'node:selected') {
192 switch (element
.info
.type
) {
194 vnfDetails(element
.info
.osm
);
197 vduDetails(element
.info
.osm
);
201 cpDetails(element
.info
.osm
);
205 vlDetails(element
.info
.osm
);
209 else if (event
.type
=== 'node:deselected') {
210 layerDetails(graph_editor
.getCurrentFilters())
214 function layerDetails(filters
) {
215 var side
= $('#side_form');
216 var graph_parameters
= graph_editor
.getGraphParams();
217 var layer_template
= '';
218 if (graph_parameters
['view'] && filters
.link
.view
.length
> 0 && filters
.link
.view
[0]) {
219 if (filters
.link
.view
[0] === 'nsd') {
220 layer_template
= getMainSectionWithSubmitButton('NSD');
221 layer_template
+= getChildrenTable(graph_parameters
['view']['nsd']);
223 else if (filters
.link
.view
[0] === 'vnfd') {
224 layer_template
= getMainSectionWithSubmitButton('VNFD');
226 layer_template
+= getChildrenTable(graph_parameters
['view']['vnfd']);
231 side
.append(layer_template
)
234 function updateLegend(view
) {
235 var legend
= $('#legenda');
236 var nodes
= type_view
[view
];
237 var legend_template
= '';
238 var nodes_properties
= osm_gui_properties
['nodes'];
239 for (var n
in nodes
) {
241 if (nodes_properties
[node
]) {
242 legend_template
+= '<div class="node">' +
243 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
244 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
249 legend
.append(legend_template
)
253 function updatePalette(view
) {
254 var palette
= $('#palette');
255 var palette_template
= '';
257 if (view
=== 'vnfd') {
258 var nodes
= type_view
[view
];
259 var nodes_properties
= osm_gui_properties
['nodes'];
260 for (var n
in nodes
) {
262 if (nodes_properties
[node
]) {
263 palette_template
+= '<div id="drag_' + n
+ '" class="node ui-draggable"' +
264 'type-name="' + n
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
265 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
266 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
270 palette
.append(palette_template
)
271 } else if (view
=== 'nsd') {
273 url
: '/projects/descriptors/composer/availablenodes?layer=nsd',
276 success: function (result
) {
277 palette_template
+= '<div id="drag_ns_vl" class="node ui-draggable"' +
278 'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
279 '<div class="icon" style="background-color:' + osm_gui_properties
['nodes']['ns_vl'].color
+ '"></div>' +
280 '<div class="name">' + osm_gui_properties
['nodes']['ns_vl'].name
+ '</div></div>';
281 palette_template
+= getSubSection('VNFD');
282 for (var d
in result
['descriptors']) {
283 var desc
= result
['descriptors'][d
];
284 palette_template
+= '<div id="drag_' + desc
.id
+ '" class="node ui-draggable"' +
285 'type-name="vnf" desc_id="' + desc
.id
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
286 '<div class="icon" style="background-color:#605ca8"></div>' +
287 '<div class="name">' + desc
.name
+ '</div></div>';
289 palette
.append(palette_template
)
291 error: function (result
) {
300 function vnfDetails(vnfr
) {
301 var side
= $('#side_form');
302 var vnfr_template
= getMainSection('VNF');
304 vnfr_template
+= getChildrenTable(vnfr
, true);
306 side
.append(vnfr_template
)
309 function vduDetails(vdur
) {
310 var side
= $('#side_form');
311 var vdur_template
= getMainSectionWithSubmitButton('VDU');
312 vdur_template
+= getChildrenTable(vdur
);
315 side
.append(vdur_template
)
318 function cpDetails(cp
) {
319 var side
= $('#side_form');
320 var cp_template
= getMainSectionWithSubmitButton('Connection Point');
322 cp_template
+= getChildrenTable(cp
);
324 side
.append(cp_template
);
327 function vlDetails(vl
) {
328 var side
= $('#side_form');
329 var vl_template
= getMainSectionWithSubmitButton('Virtual Link');
331 vl_template
+= getChildrenTable(vl
);
333 side
.append(vl_template
);
337 function getMainSection(title
) {
338 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
341 function getMainSectionWithSubmitButton(title
) {
342 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>' +
343 '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
346 function getSubSection(title
) {
347 return '<div class="section"><span>' + title
+ '</span></div>';
350 function getMainSectionWithStatus(title
, status
) {
351 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
353 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
355 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
356 template
+= '</div>';
360 function getChildrenTable(data
, ro
) {
361 var template
= '<table class="children">';
363 for (var key
in data
) {
364 if (typeof data
[key
] !== 'object') {
365 var key_map
= (map
[key
]) ? map
[key
] : key
;
367 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
369 template
+= '<tr><td>' + key_map
+ '</td><td><input name="' + key
+ '" class="form-control input-sm" type="text" value="' + data
[key
] + '"></td></tr>';
373 template
+= '</table>';
377 function openHelp() {
378 $('#modalTopologyInfoButton').modal('show');
381 function openTextedit() {
382 window
.location
.href
= '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')