2 var graph_editor
= new dreamer
.ModelGraphEditor();
3 var selected_vnffgId
= null;
6 // Enable Drop Action on the Graph
11 $(document
).ready(function() {
12 var descriptor_type
= getUrlParameter('type') == 'ns' || getUrlParameter('type') == 'nsd' ? 'ns' : 'vnf'
13 var allowed_types
= descriptor_type
== 'ns' ? ['vnf', 'ns_cp', 'ns_vl'] : ['vnf_vl', 'vnf_ext_cp', 'vnf_vdu_cp', 'vnf_vdu'];
17 group
: [getUrlParameter('id')]
20 group
: [getUrlParameter('id')],
21 view
: [descriptor_type
]
25 graph_editor
.addListener("refresh_graph_parameters", refreshGraphParameters
);
28 // graph_editor initialization
30 width
: $('#graph_ed_container').width(),
31 height
: $('#graph_ed_container').height(),
32 gui_properties
: example_gui_properties
,
36 behaviors
: buildBehaviorsOnEvents()
40 // this will filter in the different views, excluding the node types that are not listed in params
41 graph_editor
.handleFiltersParams(params
);
42 graph_editor
.addListener("filters_changed", changeFilter
);
43 graph_editor
.addListener("edit_descriptor", openEditorEvent
);
48 function initDropOnGraph() {
50 var dropZone
= document
.getElementById('graph_ed_container');
51 dropZone
.ondrop = function(e
) {
52 var group
= graph_editor
.getCurrentGroup()
54 var nodetype
= e
.dataTransfer
.getData("text/plain");
56 var type_name
= graph_editor
.getTypeProperty()[nodetype
].name
;
57 if (nodetype
== 'vnf') {
58 new dreamer
.GraphRequests().getUnusedVnf(group
, function(vnfs
) {
59 $('#div_chose_id').hide();
60 $('#div_chose_vnf').show();
61 $('#input_choose_node_id').val(nodetype
+ "_" + generateUID());
62 $('#selection_chooser_vnf').empty();
63 $('#selection_chooser_vnf').append('<option >None</option>');
64 $('#modal_chooser_title_add_node').text('Add ' + type_name
);
66 $('#selection_chooser_vnf').append('<option id="' + vnfs
[i
] + '">' + vnfs
[i
] + '</option>');
68 $('#save_choose_node_id').off('click').on('click', function() {
69 var choice
= $("#selection_chooser_vnf option:selected").text();
70 var name
= $('#input_choose_node_id').val();
71 if (choice
== 'None') {
72 var node_information
= {
81 graph_editor
.addNode(node_information
, function() {
82 $('#modal_choose_node_id').modal('hide');
87 var node_information
= {
88 'existing_element': true,
97 graph_editor
.addNode(node_information
, function() {
98 $('#modal_choose_node_id').modal('hide');
106 $('#modal_choose_node_id').modal('show');
110 $('#div_chose_id').show();
111 $('#div_chose_vnf').hide();
112 $('#input_choose_node_id').val(nodetype
+ "_" + generateUID());
113 $('#modal_chooser_title_add_node').text('Add ' + type_name
);
114 $('#save_choose_node_id').off('click').on('click', function() {
115 var name
= $('#input_choose_node_id').val();
116 var node_information
= {
125 graph_editor
.addNode(node_information
, function() {
126 $('#modal_choose_node_id').modal('hide');
131 $('#modal_choose_node_id').modal('show');
138 dropZone
.ondragover = function(ev
) {
139 console
.log("ondragover");
143 dropZone
.ondragleave = function() {
144 console
.log("ondragleave");
149 function handleForce(el
) {
150 if (el
.id
== "topology_play") {
151 $("#topology_pause").removeClass('active');
152 $("#topology_play").addClass('active');
154 $("#topology_pause").addClass('active');
155 $("#topology_play").removeClass('active');
158 graph_editor
.handleForce((el
.id
== "topology_play") ? true : false);
162 function changeFilter(e
, c
) {
163 var type_property
= graph_editor
.getTypeProperty();
164 if (c
.link
.view
== 'ns') {
165 $("#title_header").text("NS Graph Editor")
166 $("#vnffg_options").prop("disabled", false);
167 graph_editor
.refreshGraphParameters();
170 $("#title_header").text("VNF Graph Editor");
171 $("#vnffg_box").hide();
172 $("#vnffg_options").prop("disabled", true);
175 new dreamer
.GraphRequests().getAvailableNodes({layer
: c
.link
.view
[0]}, buildPalette
, showAlert
);
179 var filters = function(e
, params
) {
180 graph_editor
.handleFiltersParams(params
);
181 $('#' + e
).nextAll('li').remove();
184 function updateBredCrumb(filter_parameters
){
185 var newLi
= $("<li id=" + JSON
.stringify(graph_editor
.getCurrentGroup()) + "><a href='javascript:filters(" + JSON
.stringify(graph_editor
.getCurrentGroup()) + "," + JSON
.stringify(filter_parameters
) + ")'>" + graph_editor
.getCurrentGroup() + "</a></li>");
186 $('#breadcrumb').append(newLi
);
190 function openEditor(project_id
) {
191 window
.location
.href
= '/projects/' + project_id
+ '/descriptors/' + graph_editor
.getCurrentView() + 'd/' + graph_editor
.getCurrentGroup();
195 function showChooserModal(title
, chooses
, callback
) {
196 console
.log('showchooser')
197 $('#selection_chooser').empty();
198 for (var i
in chooses
) {
199 $('#selection_chooser').append('<option id="' + chooses
[i
].id
+ '">' + chooses
[i
].id
+ '</option>');
201 $('#modal_chooser_title').text(title
)
203 $('#save_chooser').off('click').on('click', function() {
204 var choice
= $("#selection_chooser option:selected").text();
208 $('#modal_create_link_chooser').modal('show');
212 function refreshGraphParameters(e
, graphParameters
) {
215 if (graphParameters
== null) return;
216 var vnffgIds
= graphParameters
.vnffgIds
;
217 if (vnffgIds
== null) return;
219 $("#selection_vnffg").empty();
220 $("#selection_vnffg").append('<option value="Global">Global</option>')
221 for (var i
in vnffgIds
) {
222 var vnffgId
= vnffgIds
[i
]
223 var child
= $('<option value="' + vnffgId
+ '">' + vnffgId
+ '</option>');
224 $("#selection_vnffg").append(child
)
228 function changeVnffg(e
) {
229 var vnffgId
= e
.value
;
230 selected_vnffgId
= vnffgId
;
234 function newVnffg() {
235 var group
= graph_editor
.getCurrentGroup()
236 $('#div_chose_id').show();
237 $('#div_chose_vnf').hide();
238 $('#input_choose_node_id').val("vnffg_" + generateUID());
239 $('#modal_chooser_title_add_node').text('Add VNFFG');
240 $('#save_choose_node_id').off('click').on('click', function() {
241 var name
= $('#input_choose_node_id').val();
242 var node_information
= {
244 'element_type': "vnffg",
247 console
.log(JSON
.stringify(node_information
))
248 new dreamer
.GraphRequests().addVnffg(node_information
, function(result
) {
250 $('#modal_choose_node_id').modal('hide');
251 graph_editor
.d3_graph
.graph_parameters
.vnffgIds
.push(node_information
.id
)
252 refreshGraphParameters(null, graph_editor
.d3_graph
.graph_parameters
)
258 $('#modal_choose_node_id').modal('show');
261 function show_all_change(e
) {
262 if (!selected_vnffgId
) return;
263 var vnffgId
= selected_vnffgId
;
264 if (e
) show_all
= e
.checked
;
266 handleVnffgParameter("Global", "invisible");
267 handleVnffgParameter(vnffgId
, "matted");
269 handleVnffgParameter("Global", "matted");
270 handleVnffgParameter(vnffgId
, "invisible");
274 function clickVnffg() {
275 if ($("#vnffg_box").is(':visible'))
276 $("#vnffg_box").hide();
278 $("#vnffg_box").show();
282 function handleVnffgParameter(vnffgId
, class_name
) {
284 if (vnffgId
!= "Global") {
285 selected_vnffgId
= vnffgId
;
286 graph_editor
.setNodeClass(class_name
, function(d
) {
288 if (d
.info
.group
.indexOf(vnffgId
) < 0) {
295 graph_editor
.setLinkClass(class_name
, function(d
) {
297 if (d
.group
.indexOf(vnffgId
) < 0) {
305 selected_vnffgId
= null;
306 graph_editor
.setNodeClass(class_name
, function(d
) {
311 graph_editor
.setLinkClass(class_name
, function(d
) {
318 function buildBehaviorsOnEvents(){
319 var contextmenuNodesAction
= [
322 action: function (elm
, c_node
, i
) {
323 if (c_node
.info
.type
!= undefined) {
324 var current_layer_nodes
= Object
.keys(graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
);
325 if (current_layer_nodes
.indexOf(c_node
.info
.type
) >= 0) {
326 if (graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
) {
327 var new_layer
= graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
;
328 graph_editor
.handleFiltersParams({
330 type
: Object
.keys(graph_editor
.model
.layer
[new_layer
].nodes
),
341 showAlert('This is not an explorable node.')
348 var behavioursOnEvents
= {
349 'nodes': contextmenuNodesAction
,
353 return behavioursOnEvents
;