ecafe7787c058b10948212c8d95487bb586a5b87
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", "ns_cp"],
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();
121 console
.log(nodetype
)
122 var node_information
= {
127 'custom_label': random_name
130 'desc_id': getUrlParameter('id'),
131 'desc_type': getUrlParameter('type'),
138 if (nodetype
=== 'vnf') {
139 node_information
['id'] = $('#' + elemet_id
).attr('desc_id');
142 graph_editor
.addNode(node_information
, function () {
144 }, function (result
) {
145 var data
= result
.responseJSON
;
146 var title
= "Error " + (data
&& data
.code
? data
.code
: 'unknown');
147 var message
= data
&& data
.detail
? data
.detail
: 'No detail available.';
156 dropZone
.ondragover = function (ev
) {
157 console
.log("ondragover");
161 dropZone
.ondragleave = function () {
162 console
.log("ondragleave");
168 function handleForce(el
) {
169 graph_editor
.handleForce((el
.getAttribute('aria-pressed') === "true"));
172 function changeFilter(e
, c
) {
173 if (c
&& c
.link
&& c
.link
.view
[0]) {
174 updateLegend(c
.link
.view
[0]);
175 updatePalette(c
.link
.view
[0]);
177 layerDetails(graph_editor
.getCurrentFilters())
180 function resetFilters() {
181 graph_editor
.handleFiltersParams(params
);
184 function buildBehaviorsOnEvents() {
185 var contextmenuNodesAction
= [];
187 'nodes': contextmenuNodesAction
192 function refreshElementInfo(event
, element
) {
193 if (event
.type
=== 'node:selected') {
194 switch (element
.info
.type
) {
196 vnfDetails(element
.info
.osm
);
199 vduDetails(element
.info
.osm
);
202 intcpDetails(element
.info
.osm
);
205 nscpDetails(element
.info
.osm
);
208 cpDetails(element
.info
.osm
);
212 vlDetails(element
.info
.osm
);
216 else if (event
.type
=== 'node:deselected') {
217 layerDetails(graph_editor
.getCurrentFilters())
221 function layerDetails(filters
) {
222 var side
= $('#side_form');
223 var graph_parameters
= graph_editor
.getGraphParams();
224 var layer_template
= '';
225 if (graph_parameters
['view'] && filters
.link
.view
.length
> 0 && filters
.link
.view
[0]) {
226 if (filters
.link
.view
[0] === 'nsd') {
227 layer_template
= getMainSectionWithSubmitButton('NSD');
228 layer_template
+= getChildrenTable(graph_parameters
['view']['nsd']);
230 else if (filters
.link
.view
[0] === 'vnfd') {
231 layer_template
= getMainSectionWithSubmitButton('VNFD');
233 layer_template
+= getChildrenTable(graph_parameters
['view']['vnfd']);
238 side
.append(layer_template
)
241 function updateLegend(view
) {
242 var legend
= $('#legenda');
243 var nodes
= type_view
[view
];
244 var legend_template
= '';
245 var nodes_properties
= osm_gui_properties
['nodes'];
246 for (var n
in nodes
) {
248 if (nodes_properties
[node
]) {
249 legend_template
+= '<div class="node">' +
250 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
251 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
256 legend
.append(legend_template
)
260 function updatePalette(view
) {
261 var palette
= $('#palette');
262 var palette_template
= '';
264 if (view
=== 'vnfd') {
265 var nodes
= type_view
[view
];
266 var nodes_properties
= osm_gui_properties
['nodes'];
267 for (var n
in nodes
) {
269 if (nodes_properties
[node
]) {
270 palette_template
+= '<div id="drag_' + n
+ '" class="node ui-draggable"' +
271 'type-name="' + node
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
272 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
273 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
277 palette
.append(palette_template
)
278 } else if (view
=== 'nsd') {
280 url
: '/projects/descriptors/composer/availablenodes?layer=nsd',
283 success: function (result
) {
284 palette_template
+= '<div id="drag_ns_vl" class="node ui-draggable"' +
285 'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
286 '<div class="icon" style="background-color:' + osm_gui_properties
['nodes']['ns_vl'].color
+ '"></div>' +
287 '<div class="name">' + osm_gui_properties
['nodes']['ns_vl'].name
+ '</div></div>';
288 palette_template
+= getSubSection('VNFD');
289 for (var d
in result
['descriptors']) {
290 var desc
= result
['descriptors'][d
];
291 palette_template
+= '<div id="drag_' + desc
.id
+ '" class="node ui-draggable"' +
292 'type-name="vnf" desc_id="' + desc
.id
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
293 '<div class="icon" style="background-color:#605ca8"></div>' +
294 '<div class="name">' + desc
.name
+ '</div></div>';
296 palette
.append(palette_template
)
298 error: function (result
) {
299 var data
= result
.responseJSON
;
300 var title
= "Error " + (data
&& data
.code
? data
.code
: 'unknown');
301 var message
= data
&& data
.detail
? data
.detail
: 'No detail available.';
313 function vnfDetails(vnfr
) {
314 var side
= $('#side_form');
315 var vnfr_template
= getMainSection('VNF');
317 vnfr_template
+= getChildrenTable(vnfr
, true);
319 side
.append(vnfr_template
)
322 function vduDetails(vdur
) {
323 var side
= $('#side_form');
324 var vdur_template
= getMainSectionWithSubmitButton('VDU');
325 vdur_template
+= getChildrenTable(vdur
);
328 side
.append(vdur_template
)
331 function intcpDetails(cp
) {
332 var side
= $('#side_form');
333 var cp_template
= getMainSection('Int. Connection Point');
335 cp_template
+= getChildrenTable(cp
, true);
337 side
.append(cp_template
);
340 function cpDetails(cp
) {
341 var side
= $('#side_form');
342 var cp_template
= getMainSectionWithSubmitButton('Connection Point');
344 cp_template
+= getChildrenTable(cp
);
346 side
.append(cp_template
);
349 function nscpDetails(cp
) {
350 var side
= $('#side_form');
351 var cp_template
= getMainSection('Connection Point');
353 cp_template
+= getChildrenTable(cp
, true);
355 side
.append(cp_template
);
358 function vlDetails(vl
) {
359 var side
= $('#side_form');
360 var vl_template
= getMainSectionWithSubmitButton('Virtual Link');
362 vl_template
+= getChildrenTable(vl
);
364 side
.append(vl_template
);
368 function getMainSection(title
) {
369 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
372 function getMainSectionWithSubmitButton(title
) {
373 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>' +
374 '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
377 function getSubSection(title
) {
378 return '<div class="section"><span>' + title
+ '</span></div>';
381 function getMainSectionWithStatus(title
, status
) {
382 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
384 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
386 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
387 template
+= '</div>';
391 function getChildrenTable(data
, ro
) {
392 var template
= '<table class="children">';
394 for (var key
in data
) {
395 if (typeof data
[key
] !== 'object') {
396 var key_map
= (map
[key
]) ? map
[key
] : key
;
398 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
400 template
+= '<tr><td>' + key_map
+ '</td><td><input name="' + key
+ '" class="form-control input-sm" type="text" value="' + data
[key
] + '"></td></tr>';
404 template
+= '</table>';
408 function openHelp() {
409 $('#modalTopologyInfoButton').modal('show');
412 function openTextedit() {
413 window
.location
.href
= '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')