static/src/projecthandler/osm/project_graph.js

   1 //GraphEditor instance
   2 var graph_editor = new dreamer.ModelGraphEditor();
   3 var selected_vnffgId = null;
   4 var show_all = null;
   5
   6 // Enable Drop Action on the Graph
   7 initDropOnGraph();
   8
   9
  10
  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'];
  14     var params = {
  15         node: {
  16             type: allowed_types,
  17             group: [getUrlParameter('id')]
  18         },
  19         link: {
  20             group: [getUrlParameter('id')],
  21             view: [descriptor_type]
  22         }
  23     }
  24
  25     graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
  26
  27
  28     // graph_editor initialization
  29     graph_editor.init({
  30         width: $('#graph_ed_container').width(),
  31         height: $('#graph_ed_container').height(),
  32         gui_properties: example_gui_properties,
  33         filter_base: params,
  34         behaviorsOnEvents:{
  35             viewBased: false,
  36             behaviors: buildBehaviorsOnEvents()
  37         }
  38     });
  39
  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);
  44
  45 });
  46
  47
  48 function initDropOnGraph() {
  49
  50     var dropZone = document.getElementById('graph_ed_container');
  51     dropZone.ondrop = function(e) {
  52         var group = graph_editor.getCurrentGroup()
  53         e.preventDefault();
  54         var nodetype = e.dataTransfer.getData("text/plain");
  55         if (nodetype) {
  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);
  65                     for (var i in vnfs) {
  66                         $('#selection_chooser_vnf').append('<option id="' + vnfs[i] + '">' + vnfs[i] + '</option>');
  67                     }
  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 = {
  73                                 'id': name,
  74                                 'info': {
  75                                     'type': nodetype,
  76                                     'group': [group]
  77                                 },
  78                                 'x': e.layerX,
  79                                 'y': e.layerY
  80                             }
  81                             graph_editor.addNode(node_information, function() {
  82                                 $('#modal_choose_node_id').modal('hide');
  83                             }, function(error){
  84                         showAlert(error)
  85                     });
  86                         } else {
  87                             var node_information = {
  88                                 'existing_element': true,
  89                                 'id': choice,
  90                                 'info': {
  91                                     'type': nodetype,
  92                                     'group': [group]
  93                                 },
  94                                 'x': e.layerX,
  95                                 'y': e.layerY
  96                             }
  97                             graph_editor.addNode(node_information, function() {
  98                                 $('#modal_choose_node_id').modal('hide');
  99                             }, function(error){
 100                         showAlert(error)
 101                     });
 102                         }
 103
 104                     });
 105
 106                     $('#modal_choose_node_id').modal('show');
 107                 });
 108
 109             } else {
 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 = {
 117                         'id': name,
 118                         'info': {
 119                             'type': nodetype,
 120                             'group': [group]
 121                         },
 122                         'x': e.layerX,
 123                         'y': e.layerY
 124                     }
 125                     graph_editor.addNode(node_information, function() {
 126                         $('#modal_choose_node_id').modal('hide');
 127                     }, function(error){
 128                         showAlert(error)
 129                     });
 130                 });
 131                 $('#modal_choose_node_id').modal('show');
 132
 133             }
 134         }
 135
 136     }
 137
 138     dropZone.ondragover = function(ev) {
 139         console.log("ondragover");
 140         return false;
 141     }
 142
 143     dropZone.ondragleave = function() {
 144         console.log("ondragleave");
 145         return false;
 146     }
 147 }
 148
 149 function handleForce(el) {
 150     if (el.id == "topology_play") {
 151         $("#topology_pause").removeClass('active');
 152         $("#topology_play").addClass('active');
 153     } else {
 154         $("#topology_pause").addClass('active');
 155         $("#topology_play").removeClass('active');
 156     }
 157
 158     graph_editor.handleForce((el.id == "topology_play") ? true : false);
 159
 160 }
 161
 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();
 168     } else {
 169
 170         $("#title_header").text("VNF Graph Editor");
 171         $("#vnffg_box").hide();
 172         $("#vnffg_options").prop("disabled", true);
 173     }
 174
 175    new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert);
 176    updateBredCrumb(c);
 177 }
 178
 179 var filters = function(e, params) {
 180     graph_editor.handleFiltersParams(params);
 181     $('#' + e).nextAll('li').remove();
 182 }
 183
 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);
 187 }
 188
 189
 190 function openEditor() {
 191     window.location.href = '/projects/descriptors/' + graph_editor.getCurrentView() + 'd/' + graph_editor.getCurrentGroup();
 192 }
 193
 194
 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>');
 200     }
 201     $('#modal_chooser_title').text(title)
 202     var self = this;
 203     $('#save_chooser').off('click').on('click', function() {
 204         var choice = $("#selection_chooser option:selected").text();
 205         callback(choice);
 206
 207     });
 208     $('#modal_create_link_chooser').modal('show');
 209
 210 }
 211
 212 function refreshGraphParameters(e, graphParameters) {
 213
 214     var self = $(this);
 215     if (graphParameters == null) return;
 216     var vnffgIds = graphParameters.vnffgIds;
 217     if (vnffgIds == null) return;
 218
 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)
 225     }
 226 }
 227
 228 function changeVnffg(e) {
 229     var vnffgId = e.value;
 230     selected_vnffgId = vnffgId;
 231     show_all_change();
 232 }
 233
 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 = {
 243             'element_id': name,
 244             'element_type': "vnffg",
 245             'group_id': group,
 246         }
 247         console.log(JSON.stringify(node_information))
 248         new dreamer.GraphRequests().addVnffg(node_information, function(result) {
 249
 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)
 253         });
 254
 255
 256
 257     });
 258     $('#modal_choose_node_id').modal('show');
 259 }
 260
 261 function show_all_change(e) {
 262     if (!selected_vnffgId) return;
 263     var vnffgId = selected_vnffgId;
 264     if (e) show_all = e.checked;
 265     if (show_all) {
 266         handleVnffgParameter("Global", "invisible");
 267         handleVnffgParameter(vnffgId, "matted");
 268     } else {
 269         handleVnffgParameter("Global", "matted");
 270         handleVnffgParameter(vnffgId, "invisible");
 271     }
 272 }
 273
 274 function clickVnffg() {
 275     if ($("#vnffg_box").is(':visible'))
 276         $("#vnffg_box").hide();
 277     else
 278         $("#vnffg_box").show();
 279
 280 }
 281
 282 function handleVnffgParameter(vnffgId, class_name) {
 283
 284     if (vnffgId != "Global") {
 285         selected_vnffgId = vnffgId;
 286         graph_editor.setNodeClass(class_name, function(d) {
 287             var result = false;
 288             if (d.info.group.indexOf(vnffgId) < 0) {
 289                 result = true;
 290             }
 291             console.log(result);
 292             return result;
 293         });
 294
 295         graph_editor.setLinkClass(class_name, function(d) {
 296             var result = false;
 297             if (d.group.indexOf(vnffgId) < 0) {
 298                 result = true;
 299             }
 300             console.log(result);
 301             return result;
 302         });
 303
 304     } else {
 305         selected_vnffgId = null;
 306         graph_editor.setNodeClass(class_name, function(d) {
 307             var result = false;
 308             return result;
 309         });
 310
 311         graph_editor.setLinkClass(class_name, function(d) {
 312             var result = false;
 313             return result;
 314         });
 315     }
 316 }
 317
 318 function buildBehaviorsOnEvents(){
 319     var contextmenuNodesAction = [
 320         {
 321                 title: 'Show graph',
 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({
 329                                     node: {
 330                                         type: Object.keys(graph_editor.model.layer[new_layer].nodes),
 331                                         group: [c_node.id]
 332                                     },
 333                                     link: {
 334                                         group: [c_node.id],
 335                                         view: [new_layer]
 336                                     }
 337                                 });
 338
 339                             }
 340                             else{
 341                                 showAlert('This is not an explorable node.')
 342                             }
 343                         }
 344                     }
 345                 },
 346                 edit_mode: false
 347         }];
 348         var behavioursOnEvents = {
 349             'nodes': contextmenuNodesAction,
 350
 351         };
 352
 353     return behavioursOnEvents;
 354 }