static/src/instancehandler/instance_topology_view.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 layer_map = {
  21     'nsr': {
  22         'id':  'NS instance id',
  23         'nsdId': 'NSD id',
  24         'name-ref': 'NSD name',
  25         'operational-status': 'Operational status',
  26         'config-status': 'Config status',
  27         'detailed-status': 'Detailed status',
  28         'create-time': 'Creation date',
  29        // 'instantiate_params' :'Instantiation parameters'
  30     },
  31     'vnfr': {
  32         'id':  'VNF instance id',
  33         'vnfd-id': 'NSD id',
  34         'vnfd-ref': 'NSD name',
  35         'member-vnf-index': 'Constituent VNF in the NS',
  36         'ip-address': 'Mgmt IP address',
  37         'vim-account-id': 'VIM id',
  38         'create-time': 'Creation date'
  39     }
  40 };
  41
  42 var type_view = {
  43     "nsr": ["vnfr", "ns_vl"],
  44     "vnfr": ["vdur", "cp", "vnf_vl"]
  45 };
  46
  47 var params = {
  48     node: {
  49         type: type_view['nsr'],
  50         group: []
  51     },
  52     link: {
  53         group: [],
  54         view: ['nsr']
  55     }
  56 };
  57
  58 $(document).ready(function () {
  59
  60     graph_editor.addListener("filters_changed", changeFilter);
  61     graph_editor.addListener("node:selected", refreshElementInfo);
  62     graph_editor.addListener("node:deselected", refreshElementInfo);
  63
  64     // graph_editor initialization
  65     graph_editor.init({
  66         width: $('#graph_editor_container').width(),
  67         height: $('#graph_editor_container').height(),
  68         data_url: window.location.href,
  69         //desc_id: getUrlParameter('id'),
  70         gui_properties: osm_gui_properties,
  71         edit_mode: false,
  72         behaviorsOnEvents: {
  73             viewBased: false,
  74             behaviors: buildBehaviorsOnEvents()
  75         }
  76     });
  77     graph_editor.handleFiltersParams(params);
  78
  79 });
  80
  81
  82 function handleForce(el) {
  83     graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
  84 }
  85
  86 function changeFilter(e, c) {
  87     if (c && c.link && c.link.view[0]) {
  88         updateLegend(c.link.view[0]);
  89     }
  90     layerDetails(graph_editor.getCurrentFilters())
  91 }
  92
  93 function resetFilters() {
  94     graph_editor.handleFiltersParams(params);
  95 }
  96
  97 function buildBehaviorsOnEvents() {
  98     var self = this;
  99     var contextmenuNodesAction = [
 100         {
 101             title: 'Explore',
 102             action: function (elm, c_node, i) {
 103                 if (c_node.info.type !== undefined) {
 104                     var current_layer_nodes = Object.keys(graph_editor.model.layer[graph_editor.getCurrentView()].nodes);
 105                     if (current_layer_nodes.indexOf(c_node.info.type) >= 0) {
 106                         if (graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands) {
 107                             var new_layer = graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands;
 108                             graph_editor.handleFiltersParams({
 109                                 node: {
 110                                     type: Object.keys(graph_editor.model.layer[new_layer].nodes),
 111                                     group: [c_node.id]
 112                                 },
 113                                 link: {
 114                                     group: [c_node.id],
 115                                     view: [new_layer]
 116                                 }
 117                             });
 118
 119                         }
 120                         else {
 121                             showAlert('This is not an explorable node.')
 122                         }
 123                     }
 124                 }
 125             },
 126             edit_mode: false
 127         }];
 128
 129     return {
 130         'nodes': contextmenuNodesAction
 131     };
 132
 133 }
 134
 135 function refreshElementInfo(event, element) {
 136     if (event.type === 'node:selected') {
 137         switch (element.info.type) {
 138             case 'vnfr':
 139                 vnfrDetails(element.info.osm);
 140                 break;
 141             case 'vdur':
 142                 vdurDetails(element.info.osm);
 143                 break;
 144             case 'int_cp':
 145             case 'cp':
 146                 cpDetails(element.info.osm);
 147                 break;
 148             case 'vnf_vl':
 149             case 'ns_vl':
 150                 vlDetails(element.info.osm);
 151                 break;
 152         }
 153     }
 154     else if (event.type === 'node:deselected') {
 155         layerDetails(graph_editor.getCurrentFilters())
 156     }
 157 }
 158
 159
 160 function layerDetails(filters) {
 161     var side = $('#side');
 162     var graph_parameters = graph_editor.getGraphParams();
 163     var layer_template = '';
 164     if(graph_parameters['view'] && filters.link.view.length >0 && filters.link.view[0]){
 165         if(filters.link.view[0] === 'nsr') {
 166             layer_template = getMainSection('NS View');
 167             layer_template+= '<table class="children">';
 168             for (var key in layer_map['nsr']) {
 169                 if ( graph_parameters['view']['nsr'][key] ) {
 170                     var field_value = graph_parameters['view']['nsr'][key];
 171                     if(key === 'create-time'){
 172                         field_value = moment.unix(field_value).toISOString();
 173                     } else if (key === 'instantiate_params'){
 174                         field_value = JSON.stringify(field_value);
 175                     }
 176                     layer_template += '<tr><td>' + layer_map['nsr'][key] + '</td><td>' + field_value + '</td></tr>';
 177                 }
 178             }
 179             layer_template += '</table>';
 180             //layer_template += getChildrenTable(graph_parameters['view']['nsr']);
 181         }
 182         else if(filters.link.view[0] === 'vnfr') {
 183             layer_template = getMainSection('VNF View');
 184             var vnfr_id = filters.link.group[0];
 185
 186             layer_template+= '<table class="children">';
 187             var vnfr_data = graph_parameters['view']['vnfr'][vnfr_id];
 188             for (var key in layer_map['vnfr']) {
 189                 if ( vnfr_data[key] ) {
 190                     var field_value = vnfr_data[key];
 191                     if(key === 'create-time'){
 192                         field_value = moment.unix(field_value).toISOString();
 193                     }
 194                     layer_template += '<tr><td>' + layer_map['vnfr'][key] + '</td><td>' + field_value + '</td></tr>';
 195                 }
 196             }
 197             layer_template += '</table>';
 198         }
 199     }
 200
 201     side.empty();
 202     side.append(layer_template)
 203 }
 204
 205 function updateLegend(view) {
 206     var legend = $('#legenda');
 207     var nodes = type_view[view];
 208     var legend_template = '';
 209     var nodes_properties = osm_gui_properties['nodes'];
 210     for (var n in nodes){
 211         var node = nodes[n];
 212         if(nodes_properties[node]){
 213             legend_template += '<div class="node">' +
 214                 '<div class="icon" style="background-color:' + nodes_properties[node].color +'"></div>' +
 215                 '<div class="name">' +nodes_properties[node].name + '</div></div>';
 216         }
 217     }
 218
 219     legend.empty();
 220     legend.append(legend_template)
 221
 222 }
 223
 224 var map = {
 225     'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'VIM Id',
 226     'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
 227     'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
 228     'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id', 'vim-id': 'VIM id'
 229 };
 230
 231 function vnfrDetails(vnfr) {
 232     var side = $('#side');
 233     var vnfr_template = getMainSection('VNFR');
 234
 235     vnfr_template += getChildrenTable(vnfr);
 236     side.empty();
 237     side.append(vnfr_template)
 238 }
 239
 240 function vdurDetails(vdur) {
 241     var side = $('#side');
 242     var vdur_template = getMainSectionWithStatus('VDUR', vdur['status'] === 'ACTIVE');
 243     vdur_template += getChildrenTable(vdur);
 244
 245     if (vdur['interfaces'].length > 0) {
 246         vdur_template += getSubSection('Interfaces:');
 247         vdur_template += '<table class="children">';
 248
 249         for (var i = 0; i < vdur['interfaces'].length; ++i) {
 250             var interface = vdur['interfaces'][i];
 251             var interface_template = '<tr><td>' + interface['name'] + '</td>'
 252                 + '<td>IP:' + interface['ip-address'] + '</td>'
 253                 + '<td>MAC:' + interface['mac-address'] + '</td>';
 254             vdur_template += interface_template;
 255         }
 256         vdur_template += '</table>';
 257     }
 258
 259     side.empty();
 260     side.append(vdur_template)
 261 }
 262
 263 function cpDetails(cp) {
 264      var side = $('#side');
 265     var cp_template = getMainSection('Connection Point');
 266
 267     cp_template += getChildrenTable(cp);
 268     side.empty();
 269     side.append(cp_template);
 270 }
 271
 272 function vlDetails(vl) {
 273     var side = $('#side');
 274     var vl_template = getMainSection('Virtual Link');
 275
 276     vl_template += getChildrenTable(vl);
 277     side.empty();
 278     side.append(vl_template);
 279 }
 280
 281
 282 function getMainSection(title) {
 283     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 284 }
 285
 286 function getSubSection(title) {
 287     return '<div class="section"><span>' + title + '</span></div>';
 288 }
 289
 290 function getMainSectionWithStatus(title, status) {
 291     var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
 292     if (status)
 293         template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
 294     else
 295         template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
 296     template += '</div>';
 297     return template;
 298 }
 299
 300 function getChildrenTable(data) {
 301     var template = '<table class="children">';
 302
 303     for (var key in data) {
 304         if (typeof data[key] === 'string') {
 305             var key_map = (map[key]) ? map[key] : key;
 306             template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
 307         }
 308     }
 309     template += '</table>';
 310     return template;
 311 }