18072a80528818168849b8a0439834712e2f3ba5
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();
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 (error
) {
150 dropZone
.ondragover = function (ev
) {
151 console
.log("ondragover");
155 dropZone
.ondragleave = function () {
156 console
.log("ondragleave");
162 function handleForce(el
) {
163 graph_editor
.handleForce((el
.getAttribute('aria-pressed') === "true"));
166 function changeFilter(e
, c
) {
167 if (c
&& c
.link
&& c
.link
.view
[0]) {
168 updateLegend(c
.link
.view
[0]);
169 updatePalette(c
.link
.view
[0]);
171 layerDetails(graph_editor
.getCurrentFilters())
174 function resetFilters() {
175 graph_editor
.handleFiltersParams(params
);
178 function buildBehaviorsOnEvents() {
179 var contextmenuNodesAction
= [];
181 'nodes': contextmenuNodesAction
186 function refreshElementInfo(event
, element
) {
187 if (event
.type
=== 'node:selected') {
188 switch (element
.info
.type
) {
190 vnfDetails(element
.info
.osm
);
193 vduDetails(element
.info
.osm
);
196 intcpDetails(element
.info
.osm
);
199 cpDetails(element
.info
.osm
);
203 vlDetails(element
.info
.osm
);
207 else if (event
.type
=== 'node:deselected') {
208 layerDetails(graph_editor
.getCurrentFilters())
212 function layerDetails(filters
) {
213 var side
= $('#side_form');
214 var graph_parameters
= graph_editor
.getGraphParams();
215 var layer_template
= '';
216 if (graph_parameters
['view'] && filters
.link
.view
.length
> 0 && filters
.link
.view
[0]) {
217 if (filters
.link
.view
[0] === 'nsd') {
218 layer_template
= getMainSectionWithSubmitButton('NSD');
219 layer_template
+= getChildrenTable(graph_parameters
['view']['nsd']);
221 else if (filters
.link
.view
[0] === 'vnfd') {
222 layer_template
= getMainSectionWithSubmitButton('VNFD');
224 layer_template
+= getChildrenTable(graph_parameters
['view']['vnfd']);
229 side
.append(layer_template
)
232 function updateLegend(view
) {
233 var legend
= $('#legenda');
234 var nodes
= type_view
[view
];
235 var legend_template
= '';
236 var nodes_properties
= osm_gui_properties
['nodes'];
237 for (var n
in nodes
) {
239 if (nodes_properties
[node
]) {
240 legend_template
+= '<div class="node">' +
241 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
242 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
247 legend
.append(legend_template
)
251 function updatePalette(view
) {
252 var palette
= $('#palette');
253 var palette_template
= '';
255 if (view
=== 'vnfd') {
256 var nodes
= type_view
[view
];
257 var nodes_properties
= osm_gui_properties
['nodes'];
258 for (var n
in nodes
) {
260 if (nodes_properties
[node
]) {
261 palette_template
+= '<div id="drag_' + n
+ '" class="node ui-draggable"' +
262 'type-name="' + node
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
263 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
264 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
268 palette
.append(palette_template
)
269 } else if (view
=== 'nsd') {
271 url
: '/projects/descriptors/composer/availablenodes?layer=nsd',
274 success: function (result
) {
275 palette_template
+= '<div id="drag_ns_vl" class="node ui-draggable"' +
276 'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
277 '<div class="icon" style="background-color:' + osm_gui_properties
['nodes']['ns_vl'].color
+ '"></div>' +
278 '<div class="name">' + osm_gui_properties
['nodes']['ns_vl'].name
+ '</div></div>';
279 palette_template
+= getSubSection('VNFD');
280 for (var d
in result
['descriptors']) {
281 var desc
= result
['descriptors'][d
];
282 palette_template
+= '<div id="drag_' + desc
.id
+ '" class="node ui-draggable"' +
283 'type-name="vnf" desc_id="' + desc
.id
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
284 '<div class="icon" style="background-color:#605ca8"></div>' +
285 '<div class="name">' + desc
.name
+ '</div></div>';
287 palette
.append(palette_template
)
289 error: function (result
) {
298 function vnfDetails(vnfr
) {
299 var side
= $('#side_form');
300 var vnfr_template
= getMainSection('VNF');
302 vnfr_template
+= getChildrenTable(vnfr
, true);
304 side
.append(vnfr_template
)
307 function vduDetails(vdur
) {
308 var side
= $('#side_form');
309 var vdur_template
= getMainSectionWithSubmitButton('VDU');
310 vdur_template
+= getChildrenTable(vdur
);
313 side
.append(vdur_template
)
316 function intcpDetails(cp
) {
317 var side
= $('#side_form');
318 var cp_template
= getMainSection('Int. Connection Point');
320 cp_template
+= getChildrenTable(cp
, true);
322 side
.append(cp_template
);
325 function cpDetails(cp
) {
326 var side
= $('#side_form');
327 var cp_template
= getMainSectionWithSubmitButton('Connection Point');
329 cp_template
+= getChildrenTable(cp
);
331 side
.append(cp_template
);
334 function vlDetails(vl
) {
335 var side
= $('#side_form');
336 var vl_template
= getMainSectionWithSubmitButton('Virtual Link');
338 vl_template
+= getChildrenTable(vl
);
340 side
.append(vl_template
);
344 function getMainSection(title
) {
345 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
348 function getMainSectionWithSubmitButton(title
) {
349 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>' +
350 '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
353 function getSubSection(title
) {
354 return '<div class="section"><span>' + title
+ '</span></div>';
357 function getMainSectionWithStatus(title
, status
) {
358 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
360 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
362 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
363 template
+= '</div>';
367 function getChildrenTable(data
, ro
) {
368 var template
= '<table class="children">';
370 for (var key
in data
) {
371 if (typeof data
[key
] !== 'object') {
372 var key_map
= (map
[key
]) ? map
[key
] : key
;
374 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
376 template
+= '<tr><td>' + key_map
+ '</td><td><input name="' + key
+ '" class="form-control input-sm" type="text" value="' + data
[key
] + '"></td></tr>';
380 template
+= '</table>';
384 function openHelp() {
385 $('#modalTopologyInfoButton').modal('show');
388 function openTextedit() {
389 window
.location
.href
= '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')