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", "ns_cp"],
  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 'ns_cp':
 205                 nscpDetails(element.info.osm);
 206                 break;
 207             case 'cp':
 208                 cpDetails(element.info.osm);
 209                 break;
 210             case 'vnf_vl':
 211             case 'ns_vl':
 212                 vlDetails(element.info.osm);
 213                 break;
 214         }
 215     }
 216     else if (event.type === 'node:deselected') {
 217         layerDetails(graph_editor.getCurrentFilters())
 218     }
 219 }
 220
 221 function layerDetails(filters) {
 222     var side = $('#side_form');
 223     var graph_parameters = graph_editor.getGraphParams();
 224     var layer_template = '';
 225     if (graph_parameters['view'] && filters.link.view.length > 0 && filters.link.view[0]) {
 226         if (filters.link.view[0] === 'nsd') {
 227             layer_template = getMainSectionWithSubmitButton('NSD');
 228             layer_template += getChildrenTable(graph_parameters['view']['nsd']);
 229         }
 230         else if (filters.link.view[0] === 'vnfd') {
 231             layer_template = getMainSectionWithSubmitButton('VNFD');
 232
 233             layer_template += getChildrenTable(graph_parameters['view']['vnfd']);
 234         }
 235     }
 236
 237     side.empty();
 238     side.append(layer_template)
 239 }
 240
 241 function updateLegend(view) {
 242     var legend = $('#legenda');
 243     var nodes = type_view[view];
 244     var legend_template = '';
 245     var nodes_properties = osm_gui_properties['nodes'];
 246     for (var n in nodes) {
 247         var node = nodes[n];
 248         if (nodes_properties[node]) {
 249             legend_template += '<div class="node">' +
 250                 '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
 251                 '<div class="name">' + nodes_properties[node].name + '</div></div>';
 252         }
 253     }
 254
 255     legend.empty();
 256     legend.append(legend_template)
 257
 258 }
 259
 260 function updatePalette(view) {
 261     var palette = $('#palette');
 262     var palette_template = '';
 263     palette.empty();
 264     if (view === 'vnfd') {
 265         var nodes = type_view[view];
 266         var nodes_properties = osm_gui_properties['nodes'];
 267         for (var n in nodes) {
 268             var node = nodes[n];
 269             if (nodes_properties[node]) {
 270                 palette_template += '<div id="drag_' + n + '" class="node ui-draggable"' +
 271                     'type-name="' + node + '" draggable="true" ondragstart="nodeDragStart(event)">' +
 272                     '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
 273                     '<div class="name">' + nodes_properties[node].name + '</div></div>';
 274             }
 275         }
 276
 277         palette.append(palette_template)
 278     } else if (view === 'nsd') {
 279         $.ajax({
 280             url: '/projects/descriptors/composer/availablenodes?layer=nsd',
 281             type: 'GET',
 282             cache: false,
 283             success: function (result) {
 284                 palette_template += '<div id="drag_ns_vl" class="node ui-draggable"' +
 285                     'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
 286                     '<div class="icon" style="background-color:' + osm_gui_properties['nodes']['ns_vl'].color + '"></div>' +
 287                     '<div class="name">' + osm_gui_properties['nodes']['ns_vl'].name + '</div></div>';
 288                 palette_template += getSubSection('VNFD');
 289                 for (var d in result['descriptors']) {
 290                     var desc = result['descriptors'][d];
 291                     palette_template += '<div id="drag_' + desc.id + '" class="node ui-draggable"' +
 292                         'type-name="vnf" desc_id="' + desc.id + '" draggable="true" ondragstart="nodeDragStart(event)">' +
 293                         '<div class="icon" style="background-color:#605ca8"></div>' +
 294                         '<div class="name">' + desc.name + '</div></div>';
 295                 }
 296                 palette.append(palette_template)
 297             },
 298             error: function (result) {
 299                 var data = result.responseJSON;
 300                 var title = "Error " + (data && data.code ? data.code : 'unknown');
 301                 var message = data && data.detail ? data.detail : 'No detail available.';
 302                 bootbox.alert({
 303                     title: title,
 304                     message: message
 305                 });
 306             }
 307         });
 308     }
 309
 310 }
 311
 312
 313 function vnfDetails(vnfr) {
 314     var side = $('#side_form');
 315     var vnfr_template = getMainSection('VNF');
 316
 317     vnfr_template += getChildrenTable(vnfr, true);
 318     side.empty();
 319     side.append(vnfr_template)
 320 }
 321
 322 function vduDetails(vdur) {
 323     var side = $('#side_form');
 324     var vdur_template = getMainSectionWithSubmitButton('VDU');
 325     vdur_template += getChildrenTable(vdur);
 326
 327     side.empty();
 328     side.append(vdur_template)
 329 }
 330
 331 function intcpDetails(cp) {
 332     var side = $('#side_form');
 333     var cp_template = getMainSection('Int. Connection Point');
 334
 335     cp_template += getChildrenTable(cp, true);
 336     side.empty();
 337     side.append(cp_template);
 338 }
 339
 340 function cpDetails(cp) {
 341     var side = $('#side_form');
 342     var cp_template = getMainSectionWithSubmitButton('Connection Point');
 343
 344     cp_template += getChildrenTable(cp);
 345     side.empty();
 346     side.append(cp_template);
 347 }
 348
 349 function nscpDetails(cp) {
 350     var side = $('#side_form');
 351     var cp_template = getMainSection('Connection Point');
 352
 353     cp_template += getChildrenTable(cp, true);
 354     side.empty();
 355     side.append(cp_template);
 356 }
 357
 358 function vlDetails(vl) {
 359     var side = $('#side_form');
 360     var vl_template = getMainSectionWithSubmitButton('Virtual Link');
 361
 362     vl_template += getChildrenTable(vl);
 363     side.empty();
 364     side.append(vl_template);
 365 }
 366
 367
 368 function getMainSection(title) {
 369     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 370 }
 371
 372 function getMainSectionWithSubmitButton(title) {
 373     return '<div class="section"><span style="font-weight: 500;">' + title + '</span>' +
 374         '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
 375 }
 376
 377 function getSubSection(title) {
 378     return '<div class="section"><span>' + title + '</span></div>';
 379 }
 380
 381 function getMainSectionWithStatus(title, status) {
 382     var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
 383     if (status)
 384         template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
 385     else
 386         template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
 387     template += '</div>';
 388     return template;
 389 }
 390
 391 function getChildrenTable(data, ro) {
 392     var template = '<table class="children">';
 393
 394     for (var key in data) {
 395         if (typeof data[key] !== 'object') {
 396             var key_map = (map[key]) ? map[key] : key;
 397             if (ro)
 398                 template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
 399             else
 400                 template += '<tr><td>' + key_map + '</td><td><input name="' + key + '" class="form-control input-sm" type="text"  value="' + data[key] + '"></td></tr>';
 401
 402         }
 403     }
 404     template += '</table>';
 405     return template;
 406 }
 407
 408 function openHelp() {
 409     $('#modalTopologyInfoButton').modal('show');
 410 }
 411
 412 function openTextedit() {
 413     window.location.href = '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')
 414 }