static/src/projecthandler/composer.js

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