static/src/descriptorhandler/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 TCD3.ModelGraphEditor();
  19
  20 var type_view = {
  21     "nsd": ["vnf", "ns_vl"],
  22     "vnfd": ["vdu", "cp", "vnf_vl", "int_cp"]
  23 };
  24
  25 var map = {
  26     'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'Vim Id',
  27     'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
  28     'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
  29     'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id'
  30 };
  31
  32 var params = {
  33     node: {
  34         type: type_view[getUrlParameter('type')],
  35         group: []
  36     },
  37     link: {
  38         group: [],
  39         view: [getUrlParameter('type')]
  40     }
  41 };
  42
  43 $(document).ready(function () {
  44
  45     graph_editor.addListener("filters_changed", changeFilter);
  46     graph_editor.addListener("node:selected", refreshElementInfo);
  47     graph_editor.addListener("node:deselected", refreshElementInfo);
  48
  49     // graph_editor initialization
  50     graph_editor.init({
  51         width: $('#graph_editor_container').width(),
  52         height: $('#graph_editor_container').height(),
  53
  54         data_url: window.location.href,
  55         //desc_id: getUrlParameter('id'),
  56         gui_properties: osm_gui_properties,
  57         edit_mode: true,
  58         behaviorsOnEvents: {
  59             viewBased: false,
  60             behaviors: buildBehaviorsOnEvents()
  61         }
  62     });
  63     graph_editor.handleFiltersParams(params);
  64     initDropOnGraph();
  65
  66
  67     $("#side_form").submit(function (event) {
  68         event.preventDefault(); //prevent default action
  69         console.log("ON submit")
  70         var form_data = new FormData(this); //Encode form elements for submission
  71         var formDataJson = {};
  72         form_data.forEach(function (value, key) {
  73             formDataJson[key] = value;
  74         });
  75         var dialog = bootbox.dialog({
  76             message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Updating...</div>',
  77             closeButton: true
  78         });
  79         if (graph_editor._selected_node) {
  80             graph_editor.updateDataNode(graph_editor._selected_node, formDataJson, function () {
  81                 dialog.modal('hide');
  82             }, function (result) {
  83                 var data = result.responseJSON;
  84                 var title = "Error " + (data && data.code ? data.code : 'unknown');
  85                 var message = data && data.detail ? data.detail : 'No detail available.';
  86                 dialog.modal('hide');
  87                 bootbox.alert({
  88                     title: title,
  89                     message: message
  90                 });
  91             })
  92         } else {
  93             graph_editor.updateGraphParams(formDataJson, function () {
  94                 dialog.modal('hide');
  95             }, function (result) {
  96                 var data = result.responseJSON;
  97                 var title = "Error " + (data && data.code ? data.code : 'unknown');
  98                 var message = data && data.detail ? data.detail : 'No detail available.';
  99                 dialog.modal('hide');
 100                 bootbox.alert({
 101                     title: title,
 102                     message: message
 103                 });
 104             })
 105         }
 106
 107     });
 108 });
 109
 110
 111 function initDropOnGraph() {
 112
 113     var dropZone = document.getElementById('graph_editor_container');
 114     dropZone.ondrop = function (e) {
 115         var group = graph_editor.getCurrentGroup();
 116         e.preventDefault();
 117         var elemet_id = e.dataTransfer.getData("text/plain");
 118
 119         var nodetype = $('#' + elemet_id).attr('type-name');
 120         var random_name = nodetype + "_" + generateUID();
 121         console.log(nodetype)
 122         var node_information = {
 123             'id': random_name,
 124             'info': {
 125                 'type': nodetype,
 126                 'property': {
 127                     'custom_label': random_name
 128                 },
 129                 'group': null,
 130                 'desc_id': getUrlParameter('id'),
 131                 'desc_type': getUrlParameter('type'),
 132                 'osm': {}
 133             },
 134             'x': e.layerX,
 135             'y': e.layerY
 136         };
 137
 138         if (nodetype === 'vnf') {
 139             node_information['id'] = $('#' + elemet_id).attr('desc_id');
 140         }
 141
 142         graph_editor.addNode(node_information, function () {
 143             console.log("OK")
 144         }, function (error) {
 145             showAlert(error)
 146         })
 147
 148     };
 149
 150     dropZone.ondragover = function (ev) {
 151         console.log("ondragover");
 152         return false;
 153     };
 154
 155     dropZone.ondragleave = function () {
 156         console.log("ondragleave");
 157         return false;
 158     };
 159 }
 160
 161
 162 function handleForce(el) {
 163     graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
 164 }
 165
 166 function changeFilter(e, c) {
 167     if (c && c.link && c.link.view[0]) {
 168         updateLegend(c.link.view[0]);
 169         updatePalette(c.link.view[0]);
 170     }
 171     layerDetails(graph_editor.getCurrentFilters())
 172 }
 173
 174 function resetFilters() {
 175     graph_editor.handleFiltersParams(params);
 176 }
 177
 178 function buildBehaviorsOnEvents() {
 179     var contextmenuNodesAction = [];
 180     return {
 181         'nodes': contextmenuNodesAction
 182     };
 183
 184 }
 185
 186 function refreshElementInfo(event, element) {
 187     if (event.type === 'node:selected') {
 188         switch (element.info.type) {
 189             case 'vnf':
 190                 vnfDetails(element.info.osm);
 191                 break;
 192             case 'vdu':
 193                 vduDetails(element.info.osm);
 194                 break;
 195             case 'int_cp':
 196             case 'cp':
 197                 cpDetails(element.info.osm);
 198                 break;
 199             case 'vnf_vl':
 200             case 'ns_vl':
 201                 vlDetails(element.info.osm);
 202                 break;
 203         }
 204     }
 205     else if (event.type === 'node:deselected') {
 206         layerDetails(graph_editor.getCurrentFilters())
 207     }
 208 }
 209
 210 function layerDetails(filters) {
 211     var side = $('#side_form');
 212     var graph_parameters = graph_editor.getGraphParams();
 213     var layer_template = '';
 214     if (graph_parameters['view'] && filters.link.view.length > 0 && filters.link.view[0]) {
 215         if (filters.link.view[0] === 'nsd') {
 216             layer_template = getMainSectionWithSubmitButton('NSD');
 217             layer_template += getChildrenTable(graph_parameters['view']['nsd']);
 218         }
 219         else if (filters.link.view[0] === 'vnfd') {
 220             layer_template = getMainSectionWithSubmitButton('VNFD');
 221
 222             layer_template += getChildrenTable(graph_parameters['view']['vnfd']);
 223         }
 224     }
 225
 226     side.empty();
 227     side.append(layer_template)
 228 }
 229
 230 function updateLegend(view) {
 231     var legend = $('#legenda');
 232     var nodes = type_view[view];
 233     var legend_template = '';
 234     var nodes_properties = osm_gui_properties['nodes'];
 235     for (var n in nodes) {
 236         var node = nodes[n];
 237         if (nodes_properties[node]) {
 238             legend_template += '<div class="node">' +
 239                 '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
 240                 '<div class="name">' + nodes_properties[node].name + '</div></div>';
 241         }
 242     }
 243
 244     legend.empty();
 245     legend.append(legend_template)
 246
 247 }
 248
 249 function updatePalette(view) {
 250     var palette = $('#palette');
 251     var palette_template = '';
 252     palette.empty();
 253     if (view === 'vnfd') {
 254         var nodes = type_view[view];
 255         var nodes_properties = osm_gui_properties['nodes'];
 256         for (var n in nodes) {
 257             var node = nodes[n];
 258             if (nodes_properties[node]) {
 259                 palette_template += '<div id="drag_' + n + '" class="node ui-draggable"' +
 260                     'type-name="' + node + '" draggable="true" ondragstart="nodeDragStart(event)">' +
 261                     '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
 262                     '<div class="name">' + nodes_properties[node].name + '</div></div>';
 263             }
 264         }
 265
 266         palette.append(palette_template)
 267     } else if (view === 'nsd') {
 268         $.ajax({
 269             url: '/projects/descriptors/composer/availablenodes?layer=nsd',
 270             type: 'GET',
 271             cache: false,
 272             success: function (result) {
 273                 palette_template += '<div id="drag_ns_vl" class="node ui-draggable"' +
 274                     'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
 275                     '<div class="icon" style="background-color:' + osm_gui_properties['nodes']['ns_vl'].color + '"></div>' +
 276                     '<div class="name">' + osm_gui_properties['nodes']['ns_vl'].name + '</div></div>';
 277                 palette_template += getSubSection('VNFD');
 278                 for (var d in result['descriptors']) {
 279                     var desc = result['descriptors'][d];
 280                     palette_template += '<div id="drag_' + desc.id + '" class="node ui-draggable"' +
 281                         'type-name="vnf" desc_id="' + desc.id + '" draggable="true" ondragstart="nodeDragStart(event)">' +
 282                         '<div class="icon" style="background-color:#605ca8"></div>' +
 283                         '<div class="name">' + desc.name + '</div></div>';
 284                 }
 285                 palette.append(palette_template)
 286             },
 287             error: function (result) {
 288                 showAlert(result);
 289             }
 290         });
 291     }
 292
 293 }
 294
 295
 296 function vnfDetails(vnfr) {
 297     var side = $('#side_form');
 298     var vnfr_template = getMainSection('VNF');
 299
 300     vnfr_template += getChildrenTable(vnfr, true);
 301     side.empty();
 302     side.append(vnfr_template)
 303 }
 304
 305 function vduDetails(vdur) {
 306     var side = $('#side_form');
 307     var vdur_template = getMainSectionWithSubmitButton('VDU');
 308     vdur_template += getChildrenTable(vdur);
 309
 310     side.empty();
 311     side.append(vdur_template)
 312 }
 313
 314 function cpDetails(cp) {
 315     var side = $('#side_form');
 316     var cp_template = getMainSectionWithSubmitButton('Connection Point');
 317
 318     cp_template += getChildrenTable(cp);
 319     side.empty();
 320     side.append(cp_template);
 321 }
 322
 323 function vlDetails(vl) {
 324     var side = $('#side_form');
 325     var vl_template = getMainSectionWithSubmitButton('Virtual Link');
 326
 327     vl_template += getChildrenTable(vl);
 328     side.empty();
 329     side.append(vl_template);
 330 }
 331
 332
 333 function getMainSection(title) {
 334     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 335 }
 336
 337 function getMainSectionWithSubmitButton(title) {
 338     return '<div class="section"><span style="font-weight: 500;">' + title + '</span>' +
 339         '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
 340 }
 341
 342 function getSubSection(title) {
 343     return '<div class="section"><span>' + title + '</span></div>';
 344 }
 345
 346 function getMainSectionWithStatus(title, status) {
 347     var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
 348     if (status)
 349         template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
 350     else
 351         template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
 352     template += '</div>';
 353     return template;
 354 }
 355
 356 function getChildrenTable(data, ro) {
 357     var template = '<table class="children">';
 358
 359     for (var key in data) {
 360         if (typeof data[key] !== 'object') {
 361             var key_map = (map[key]) ? map[key] : key;
 362             if (ro)
 363                 template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
 364             else
 365                 template += '<tr><td>' + key_map + '</td><td><input name="' + key + '" class="form-control input-sm" type="text"  value="' + data[key] + '"></td></tr>';
 366
 367         }
 368     }
 369     template += '</table>';
 370     return template;
 371 }
 372
 373 function openHelp() {
 374     $('#modalTopologyInfoButton').modal('show');
 375 }
 376
 377 function openTextedit() {
 378     window.location.href = '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')
 379 }