175f46bb2761c8f14be9b76eeeb3feddf80a0381
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 if (graph_editor
._selected_node
) {
76 graph_editor
.updateDataNode(graph_editor
._selected_node
, formDataJson
, function () {
78 }, function (result
) {
79 var data
= result
.responseJSON
;
80 var title
= "Error " + (data
&& data
.code
? data
.code
: 'unknown');
81 var message
= data
&& data
.detail
? data
.detail
: 'No detail available.';
88 graph_editor
.updateGraphParams(formDataJson
, function () {
90 }, function (result
) {
91 var data
= result
.responseJSON
;
92 var title
= "Error " + (data
&& data
.code
? data
.code
: 'unknown');
93 var message
= data
&& data
.detail
? data
.detail
: 'No detail available.';
105 function initDropOnGraph() {
107 var dropZone
= document
.getElementById('graph_editor_container');
108 dropZone
.ondrop = function (e
) {
109 var group
= graph_editor
.getCurrentGroup();
111 var elemet_id
= e
.dataTransfer
.getData("text/plain");
113 var nodetype
= $('#' + elemet_id
).attr('type-name');
114 var random_name
= nodetype
+ "_" + generateUID();
116 var node_information
= {
121 'custom_label': random_name
124 'desc_id': getUrlParameter('id'),
125 'desc_type': getUrlParameter('type'),
131 if (nodetype
=== 'ns_vl') {
133 graph_editor
.addNode(node_information
, function () {
135 }, function (error
) {
138 } else if (nodetype
=== 'vnf') {
139 node_information
['id'] = $('#' + elemet_id
).attr('desc_id');
140 graph_editor
.addNode(node_information
, function () {
142 }, function (error
) {
148 dropZone
.ondragover = function (ev
) {
149 console
.log("ondragover");
153 dropZone
.ondragleave = function () {
154 console
.log("ondragleave");
160 function handleForce(el
) {
161 graph_editor
.handleForce((el
.getAttribute('aria-pressed') === "true"));
164 function changeFilter(e
, c
) {
165 if (c
&& c
.link
&& c
.link
.view
[0]) {
166 updateLegend(c
.link
.view
[0]);
167 updatePalette(c
.link
.view
[0]);
169 layerDetails(graph_editor
.getCurrentFilters())
172 function resetFilters() {
173 graph_editor
.handleFiltersParams(params
);
176 function buildBehaviorsOnEvents() {
177 var contextmenuNodesAction
= [];
179 'nodes': contextmenuNodesAction
184 function refreshElementInfo(event
, element
) {
185 if (event
.type
=== 'node:selected') {
186 switch (element
.info
.type
) {
188 vnfDetails(element
.info
.osm
);
191 vduDetails(element
.info
.osm
);
195 cpDetails(element
.info
.osm
);
199 vlDetails(element
.info
.osm
);
203 else if (event
.type
=== 'node:deselected') {
204 layerDetails(graph_editor
.getCurrentFilters())
208 function layerDetails(filters
) {
209 var side
= $('#side_form');
210 var graph_parameters
= graph_editor
.getGraphParams();
211 var layer_template
= '';
212 if (graph_parameters
['view'] && filters
.link
.view
.length
> 0 && filters
.link
.view
[0]) {
213 if (filters
.link
.view
[0] === 'nsd') {
214 layer_template
= getMainSectionWithSubmitButton('NSD');
215 layer_template
+= getChildrenTable(graph_parameters
['view']['nsd']);
217 else if (filters
.link
.view
[0] === 'vnfd') {
218 layer_template
= getMainSectionWithSubmitButton('VNFD');
220 layer_template
+= getChildrenTable(graph_parameters
['view']['vnfd']);
225 side
.append(layer_template
)
228 function updateLegend(view
) {
229 var legend
= $('#legenda');
230 var nodes
= type_view
[view
];
231 var legend_template
= '';
232 var nodes_properties
= osm_gui_properties
['nodes'];
233 for (var n
in nodes
) {
235 if (nodes_properties
[node
]) {
236 legend_template
+= '<div class="node">' +
237 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
238 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
243 legend
.append(legend_template
)
247 function updatePalette(view
) {
248 var palette
= $('#palette');
249 var palette_template
= '';
251 if (view
=== 'vnfd') {
252 var nodes
= type_view
[view
];
253 var nodes_properties
= osm_gui_properties
['nodes'];
254 for (var n
in nodes
) {
256 if (nodes_properties
[node
]) {
257 palette_template
+= '<div id="drag_' + n
+ '" class="node ui-draggable"' +
258 'type-name="' + n
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
259 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
260 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
264 palette
.append(palette_template
)
265 } else if (view
=== 'nsd') {
267 url
: '/projects/descriptors/composer/availablenodes?layer=nsd',
270 success: function (result
) {
271 palette_template
+= '<div id="drag_ns_vl" class="node ui-draggable"' +
272 'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
273 '<div class="icon" style="background-color:' + osm_gui_properties
['nodes']['ns_vl'].color
+ '"></div>' +
274 '<div class="name">' + osm_gui_properties
['nodes']['ns_vl'].name
+ '</div></div>';
275 palette_template
+= getSubSection('VNFD');
276 for (var d
in result
['descriptors']) {
277 var desc
= result
['descriptors'][d
];
278 palette_template
+= '<div id="drag_' + desc
.id
+ '" class="node ui-draggable"' +
279 'type-name="vnf" desc_id="' + desc
.id
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
280 '<div class="icon" style="background-color:#605ca8"></div>' +
281 '<div class="name">' + desc
.name
+ '</div></div>';
283 palette
.append(palette_template
)
285 error: function (result
) {
294 function vnfDetails(vnfr
) {
295 var side
= $('#side_form');
296 var vnfr_template
= getMainSection('VNF');
298 vnfr_template
+= getChildrenTable(vnfr
, true);
300 side
.append(vnfr_template
)
303 function vduDetails(vdur
) {
304 var side
= $('#side_form');
305 var vdur_template
= getMainSectionWithSubmitButton('VDU');
306 vdur_template
+= getChildrenTable(vdur
);
309 side
.append(vdur_template
)
312 function cpDetails(cp
) {
313 var side
= $('#side_form');
314 var cp_template
= getMainSectionWithSubmitButton('Connection Point');
316 cp_template
+= getChildrenTable(cp
);
318 side
.append(cp_template
);
321 function vlDetails(vl
) {
322 var side
= $('#side_form');
323 var vl_template
= getMainSectionWithSubmitButton('Virtual Link');
325 vl_template
+= getChildrenTable(vl
);
327 side
.append(vl_template
);
331 function getMainSection(title
) {
332 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
335 function getMainSectionWithSubmitButton(title
) {
336 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>' +
337 '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
340 function getSubSection(title
) {
341 return '<div class="section"><span>' + title
+ '</span></div>';
344 function getMainSectionWithStatus(title
, status
) {
345 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
347 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
349 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
350 template
+= '</div>';
354 function getChildrenTable(data
, ro
) {
355 var template
= '<table class="children">';
357 for (var key
in data
) {
358 if (typeof data
[key
] !== 'object') {
359 var key_map
= (map
[key
]) ? map
[key
] : key
;
361 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
363 template
+= '<tr><td>' + key_map
+ '</td><td><input name="' + key
+ '" class="form-control input-sm" type="text" value="' + data
[key
] + '"></td></tr>';
367 template
+= '</table>';
371 function openHelp() {
372 $('#modalTopologyInfoButton').modal('show');
375 function openTextedit() {
376 window
.location
.href
= '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')