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
);
197 cpDetails(element
.info
.osm
);
201 vlDetails(element
.info
.osm
);
205 else if (event
.type
=== 'node:deselected') {
206 layerDetails(graph_editor
.getCurrentFilters())
210 function layerDetails(filters
) {
211 var side
= $('#side_form');
212 var graph_parameters
= graph_editor
.getGraphParams();
213 var layer_template
= '';
214 if (graph_parameters
['view'] && filters
.link
.view
.length
> 0 && filters
.link
.view
[0]) {
215 if (filters
.link
.view
[0] === 'nsd') {
216 layer_template
= getMainSectionWithSubmitButton('NSD');
217 layer_template
+= getChildrenTable(graph_parameters
['view']['nsd']);
219 else if (filters
.link
.view
[0] === 'vnfd') {
220 layer_template
= getMainSectionWithSubmitButton('VNFD');
222 layer_template
+= getChildrenTable(graph_parameters
['view']['vnfd']);
227 side
.append(layer_template
)
230 function updateLegend(view
) {
231 var legend
= $('#legenda');
232 var nodes
= type_view
[view
];
233 var legend_template
= '';
234 var nodes_properties
= osm_gui_properties
['nodes'];
235 for (var n
in nodes
) {
237 if (nodes_properties
[node
]) {
238 legend_template
+= '<div class="node">' +
239 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
240 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
245 legend
.append(legend_template
)
249 function updatePalette(view
) {
250 var palette
= $('#palette');
251 var palette_template
= '';
253 if (view
=== 'vnfd') {
254 var nodes
= type_view
[view
];
255 var nodes_properties
= osm_gui_properties
['nodes'];
256 for (var n
in nodes
) {
258 if (nodes_properties
[node
]) {
259 palette_template
+= '<div id="drag_' + n
+ '" class="node ui-draggable"' +
260 'type-name="' + node
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
261 '<div class="icon" style="background-color:' + nodes_properties
[node
].color
+ '"></div>' +
262 '<div class="name">' + nodes_properties
[node
].name
+ '</div></div>';
266 palette
.append(palette_template
)
267 } else if (view
=== 'nsd') {
269 url
: '/projects/descriptors/composer/availablenodes?layer=nsd',
272 success: function (result
) {
273 palette_template
+= '<div id="drag_ns_vl" class="node ui-draggable"' +
274 'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
275 '<div class="icon" style="background-color:' + osm_gui_properties
['nodes']['ns_vl'].color
+ '"></div>' +
276 '<div class="name">' + osm_gui_properties
['nodes']['ns_vl'].name
+ '</div></div>';
277 palette_template
+= getSubSection('VNFD');
278 for (var d
in result
['descriptors']) {
279 var desc
= result
['descriptors'][d
];
280 palette_template
+= '<div id="drag_' + desc
.id
+ '" class="node ui-draggable"' +
281 'type-name="vnf" desc_id="' + desc
.id
+ '" draggable="true" ondragstart="nodeDragStart(event)">' +
282 '<div class="icon" style="background-color:#605ca8"></div>' +
283 '<div class="name">' + desc
.name
+ '</div></div>';
285 palette
.append(palette_template
)
287 error: function (result
) {
296 function vnfDetails(vnfr
) {
297 var side
= $('#side_form');
298 var vnfr_template
= getMainSection('VNF');
300 vnfr_template
+= getChildrenTable(vnfr
, true);
302 side
.append(vnfr_template
)
305 function vduDetails(vdur
) {
306 var side
= $('#side_form');
307 var vdur_template
= getMainSectionWithSubmitButton('VDU');
308 vdur_template
+= getChildrenTable(vdur
);
311 side
.append(vdur_template
)
314 function cpDetails(cp
) {
315 var side
= $('#side_form');
316 var cp_template
= getMainSectionWithSubmitButton('Connection Point');
318 cp_template
+= getChildrenTable(cp
);
320 side
.append(cp_template
);
323 function vlDetails(vl
) {
324 var side
= $('#side_form');
325 var vl_template
= getMainSectionWithSubmitButton('Virtual Link');
327 vl_template
+= getChildrenTable(vl
);
329 side
.append(vl_template
);
333 function getMainSection(title
) {
334 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span></div>';
337 function getMainSectionWithSubmitButton(title
) {
338 return '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>' +
339 '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
342 function getSubSection(title
) {
343 return '<div class="section"><span>' + title
+ '</span></div>';
346 function getMainSectionWithStatus(title
, status
) {
347 var template
= '<div class="section"><span style="font-weight: 500;">' + title
+ '</span>';
349 template
+= '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
351 template
+= '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
352 template
+= '</div>';
356 function getChildrenTable(data
, ro
) {
357 var template
= '<table class="children">';
359 for (var key
in data
) {
360 if (typeof data
[key
] !== 'object') {
361 var key_map
= (map
[key
]) ? map
[key
] : key
;
363 template
+= '<tr><td>' + key_map
+ '</td><td>' + data
[key
] + '</td></tr>';
365 template
+= '<tr><td>' + key_map
+ '</td><td><input name="' + key
+ '" class="form-control input-sm" type="text" value="' + data
[key
] + '"></td></tr>';
369 template
+= '</table>';
373 function openHelp() {
374 $('#modalTopologyInfoButton').modal('show');
377 function openTextedit() {
378 window
.location
.href
= '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')