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 (result) {
 145             var data = result.responseJSON;
 146             var title = "Error " + (data && data.code ? data.code : 'unknown');
 147                 var message = data && data.detail ? data.detail : 'No detail available.';
 148                 bootbox.alert({
 149                     title: title,
 150                     message: message
 151                 });
 152         })
 153
 154     };
 155
 156     dropZone.ondragover = function (ev) {
 157         console.log("ondragover");
 158         return false;
 159     };
 160
 161     dropZone.ondragleave = function () {
 162         console.log("ondragleave");
 163         return false;
 164     };
 165 }
 166
 167
 168 function handleForce(el) {
 169     graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
 170 }
 171
 172 function changeFilter(e, c) {
 173     if (c && c.link && c.link.view[0]) {
 174         updateLegend(c.link.view[0]);
 175         updatePalette(c.link.view[0]);
 176     }
 177     layerDetails(graph_editor.getCurrentFilters())
 178 }
 179
 180 function resetFilters() {
 181     graph_editor.handleFiltersParams(params);
 182 }
 183
 184 function buildBehaviorsOnEvents() {
 185     var contextmenuNodesAction = [];
 186     return {
 187         'nodes': contextmenuNodesAction
 188     };
 189
 190 }
 191
 192 function refreshElementInfo(event, element) {
 193     if (event.type === 'node:selected') {
 194         switch (element.info.type) {
 195             case 'vnf':
 196                 vnfDetails(element.info.osm);
 197                 break;
 198             case 'vdu':
 199                 vduDetails(element.info.osm);
 200                 break;
 201             case 'int_cp':
 202                 intcpDetails(element.info.osm);
 203                 break;
 204             case 'cp':
 205                 cpDetails(element.info.osm);
 206                 break;
 207             case 'vnf_vl':
 208             case 'ns_vl':
 209                 vlDetails(element.info.osm);
 210                 break;
 211         }
 212     }
 213     else if (event.type === 'node:deselected') {
 214         layerDetails(graph_editor.getCurrentFilters())
 215     }
 216 }
 217
 218 function layerDetails(filters) {
 219     var side = $('#side_form');
 220     var graph_parameters = graph_editor.getGraphParams();
 221     var layer_template = '';
 222     if (graph_parameters['view'] && filters.link.view.length > 0 && filters.link.view[0]) {
 223         if (filters.link.view[0] === 'nsd') {
 224             layer_template = getMainSectionWithSubmitButton('NSD');
 225             layer_template += getChildrenTable(graph_parameters['view']['nsd']);
 226         }
 227         else if (filters.link.view[0] === 'vnfd') {
 228             layer_template = getMainSectionWithSubmitButton('VNFD');
 229
 230             layer_template += getChildrenTable(graph_parameters['view']['vnfd']);
 231         }
 232     }
 233
 234     side.empty();
 235     side.append(layer_template)
 236 }
 237
 238 function updateLegend(view) {
 239     var legend = $('#legenda');
 240     var nodes = type_view[view];
 241     var legend_template = '';
 242     var nodes_properties = osm_gui_properties['nodes'];
 243     for (var n in nodes) {
 244         var node = nodes[n];
 245         if (nodes_properties[node]) {
 246             legend_template += '<div class="node">' +
 247                 '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
 248                 '<div class="name">' + nodes_properties[node].name + '</div></div>';
 249         }
 250     }
 251
 252     legend.empty();
 253     legend.append(legend_template)
 254
 255 }
 256
 257 function updatePalette(view) {
 258     var palette = $('#palette');
 259     var palette_template = '';
 260     palette.empty();
 261     if (view === 'vnfd') {
 262         var nodes = type_view[view];
 263         var nodes_properties = osm_gui_properties['nodes'];
 264         for (var n in nodes) {
 265             var node = nodes[n];
 266             if (nodes_properties[node]) {
 267                 palette_template += '<div id="drag_' + n + '" class="node ui-draggable"' +
 268                     'type-name="' + node + '" draggable="true" ondragstart="nodeDragStart(event)">' +
 269                     '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
 270                     '<div class="name">' + nodes_properties[node].name + '</div></div>';
 271             }
 272         }
 273
 274         palette.append(palette_template)
 275     } else if (view === 'nsd') {
 276         $.ajax({
 277             url: '/projects/descriptors/composer/availablenodes?layer=nsd',
 278             type: 'GET',
 279             cache: false,
 280             success: function (result) {
 281                 palette_template += '<div id="drag_ns_vl" class="node ui-draggable"' +
 282                     'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
 283                     '<div class="icon" style="background-color:' + osm_gui_properties['nodes']['ns_vl'].color + '"></div>' +
 284                     '<div class="name">' + osm_gui_properties['nodes']['ns_vl'].name + '</div></div>';
 285                 palette_template += getSubSection('VNFD');
 286                 for (var d in result['descriptors']) {
 287                     var desc = result['descriptors'][d];
 288                     palette_template += '<div id="drag_' + desc.id + '" class="node ui-draggable"' +
 289                         'type-name="vnf" desc_id="' + desc.id + '" draggable="true" ondragstart="nodeDragStart(event)">' +
 290                         '<div class="icon" style="background-color:#605ca8"></div>' +
 291                         '<div class="name">' + desc.name + '</div></div>';
 292                 }
 293                 palette.append(palette_template)
 294             },
 295             error: function (result) {
 296                 var data = result.responseJSON;
 297                 var title = "Error " + (data && data.code ? data.code : 'unknown');
 298                 var message = data && data.detail ? data.detail : 'No detail available.';
 299                 bootbox.alert({
 300                     title: title,
 301                     message: message
 302                 });
 303             }
 304         });
 305     }
 306
 307 }
 308
 309
 310 function vnfDetails(vnfr) {
 311     var side = $('#side_form');
 312     var vnfr_template = getMainSection('VNF');
 313
 314     vnfr_template += getChildrenTable(vnfr, true);
 315     side.empty();
 316     side.append(vnfr_template)
 317 }
 318
 319 function vduDetails(vdur) {
 320     var side = $('#side_form');
 321     var vdur_template = getMainSectionWithSubmitButton('VDU');
 322     vdur_template += getChildrenTable(vdur);
 323
 324     side.empty();
 325     side.append(vdur_template)
 326 }
 327
 328 function intcpDetails(cp) {
 329     var side = $('#side_form');
 330     var cp_template = getMainSection('Int. Connection Point');
 331
 332     cp_template += getChildrenTable(cp, true);
 333     side.empty();
 334     side.append(cp_template);
 335 }
 336
 337 function cpDetails(cp) {
 338     var side = $('#side_form');
 339     var cp_template = getMainSectionWithSubmitButton('Connection Point');
 340
 341     cp_template += getChildrenTable(cp);
 342     side.empty();
 343     side.append(cp_template);
 344 }
 345
 346 function vlDetails(vl) {
 347     var side = $('#side_form');
 348     var vl_template = getMainSectionWithSubmitButton('Virtual Link');
 349
 350     vl_template += getChildrenTable(vl);
 351     side.empty();
 352     side.append(vl_template);
 353 }
 354
 355
 356 function getMainSection(title) {
 357     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 358 }
 359
 360 function getMainSectionWithSubmitButton(title) {
 361     return '<div class="section"><span style="font-weight: 500;">' + title + '</span>' +
 362         '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
 363 }
 364
 365 function getSubSection(title) {
 366     return '<div class="section"><span>' + title + '</span></div>';
 367 }
 368
 369 function getMainSectionWithStatus(title, status) {
 370     var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
 371     if (status)
 372         template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
 373     else
 374         template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
 375     template += '</div>';
 376     return template;
 377 }
 378
 379 function getChildrenTable(data, ro) {
 380     var template = '<table class="children">';
 381
 382     for (var key in data) {
 383         if (typeof data[key] !== 'object') {
 384             var key_map = (map[key]) ? map[key] : key;
 385             if (ro)
 386                 template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
 387             else
 388                 template += '<tr><td>' + key_map + '</td><td><input name="' + key + '" class="form-control input-sm" type="text"  value="' + data[key] + '"></td></tr>';
 389
 390         }
 391     }
 392     template += '</table>';
 393     return template;
 394 }
 395
 396 function openHelp() {
 397     $('#modalTopologyInfoButton').modal('show');
 398 }
 399
 400 function openTextedit() {
 401     window.location.href = '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')
 402 }