static/src/projecthandler/composer.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 var type_view = {
  10     "ns": ["vnf", "ns_vl"],
  11     "vnf": ["vdu", "cp"]
  12 };
  13
  14 var params = {
  15         node: {
  16             type: type_view['ns'],
  17             group: []
  18         },
  19         link: {
  20             group: [],
  21             view: ['ns']
  22         }
  23     };
  24 $(document).ready(function() {
  25
  26     graph_editor.addListener("filters_changed", changeFilter);
  27     graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
  28
  29     console.log(osm_gui_properties)
  30     // graph_editor initialization
  31     graph_editor.init({
  32         width: $('#graph_ed_container').width(),
  33         height: $('#graph_ed_container').height(),
  34         data_url: window.location.href,
  35         desc_id: getUrlParameter('id'),
  36         gui_properties: osm_gui_properties,
  37         behaviorsOnEvents:{
  38             viewBased: false,
  39             behaviors: buildBehaviorsOnEvents()
  40         }
  41     });
  42     // this will filter in the different views, excluding the node types that are not listed in params
  43     graph_editor.handleFiltersParams(params);
  44
  45 });
  46
  47 var filters = function(e, params) {
  48     graph_editor.handleFiltersParams(params);
  49     $('#' + e).nextAll('li').remove();
  50 }
  51
  52
  53 function initDropOnGraph() {
  54
  55     var dropZone = document.getElementById('graph_ed_container');
  56     dropZone.ondrop = function(e) {
  57         var group = graph_editor.getCurrentGroup()
  58         e.preventDefault();
  59         var elemet_id = e.dataTransfer.getData("text/plain");
  60         var nodetype = $('#'+elemet_id).attr('type-name');
  61         console.log(nodetype);
  62         if (nodetype) {
  63             var type_name = graph_editor.getTypeProperty()[nodetype].name;
  64                 $('#div_chose_id').show();
  65                 $('#input_choose_node_id').val(nodetype + "_" + generateUID());
  66                 $('#modal_chooser_title_add_node').text('Add ' + type_name);
  67                 $('#save_choose_node_id').off('click').on('click', function() {
  68                     var name = $('#input_choose_node_id').val();
  69                     var node_information = {
  70                         'id': name,
  71                         'info': {
  72                             'type': nodetype,
  73                             'group': [group],
  74                             'desc_id': getUrlParameter('id'),
  75                         },
  76                         'x': e.layerX,
  77                         'y': e.layerY
  78                     }
  79                     console.log(JSON.stringify(node_information))
  80                     graph_editor.addNode(node_information, function() {
  81                         $('#modal_choose_node_id').modal('hide');
  82                     }, function(error){
  83                         showAlert(error)
  84                     });
  85                 });
  86                 $('#modal_choose_node_id').modal('show');
  87
  88
  89         }
  90
  91     }
  92
  93     dropZone.ondragover = function(ev) {
  94         console.log("ondragover");
  95         return false;
  96     }
  97
  98     dropZone.ondragleave = function() {
  99         console.log("ondragleave");
 100         return false;
 101     }
 102 }
 103
 104 function handleForce(el) {
 105     if (el.id == "topology_play") {
 106         $("#topology_pause").removeClass('active');
 107         $("#topology_play").addClass('active');
 108     } else {
 109         $("#topology_pause").addClass('active');
 110         $("#topology_play").removeClass('active');
 111     }
 112
 113     graph_editor.handleForce((el.id == "topology_play") ? true : false);
 114
 115 }
 116
 117 function changeFilter(e, c) {
 118
 119     console.log("changeFilter", JSON.stringify(c));
 120     //$("#title_header").text("OSHI Graph Editor");
 121     //updateNodeDraggable({type_property: type_property, nodes_layer: graph_editor.getAvailableNodes()})
 122     if(c)
 123         new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert);
 124
 125 }
 126
 127 function refreshGraphParameters(e, graphParameters) {
 128     var self = $(this);
 129     if (graphParameters == null) return;
 130
 131 }
 132
 133 function resetFilters(){
 134     graph_editor.handleFiltersParams(params);
 135 }
 136
 137 function buildBehaviorsOnEvents() {
 138     var self = this;
 139     var contextmenuNodesAction = [{
 140         title: 'Show info',
 141         action: function (elm, d, i) {
 142            // console.log('Show NodeInfo', elm, d, i);
 143             var nodeData = {
 144                 "node": {
 145                     "id": d.id
 146                 }
 147             };
 148         },
 149         edit_mode: false
 150
 151     },
 152         {
 153             title: 'Explore',
 154             action: function (elm, c_node, i) {
 155                 if (c_node.info.type != undefined) {
 156                     var current_layer_nodes = Object.keys(graph_editor.model.layer[graph_editor.getCurrentView()].nodes);
 157                     if (current_layer_nodes.indexOf(c_node.info.type) >= 0) {
 158                         if (graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands) {
 159                             var new_layer = graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands;
 160                             graph_editor.handleFiltersParams({
 161                                 node: {
 162                                     type: Object.keys(graph_editor.model.layer[new_layer].nodes),
 163                                     group: [c_node.id]
 164                                 },
 165                                 link: {
 166                                     group: [c_node.id],
 167                                     view: [new_layer]
 168                                 }
 169                             });
 170
 171                         }
 172                         else {
 173                             showAlert('This is not an explorable node.')
 174                         }
 175                     }
 176                 }
 177             },
 178             edit_mode: false
 179         }];
 180     var behavioursOnEvents = {
 181         'nodes': contextmenuNodesAction
 182
 183     };
 184
 185     return behavioursOnEvents;
 186 }