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