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                     }
 174                     layer_template += '<tr><td>' + layer_map['nsr'][key] + '</td><td>' + field_value + '</td></tr>';
 175                 }
 176             }
 177             layer_template += '</table>';
 178             //layer_template += getChildrenTable(graph_parameters['view']['nsr']);
 179         }
 180         else if(filters.link.view[0] === 'vnfr') {
 181             layer_template = getMainSection('VNF View');
 182             var vnfr_id = filters.link.group[0];
 183
 184             layer_template+= '<table class="children">';
 185             var vnfr_data = graph_parameters['view']['vnfr'][vnfr_id];
 186             for (var key in layer_map['vnfr']) {
 187                 if ( vnfr_data[key] ) {
 188                     var field_value = vnfr_data[key];
 189                     if(key === 'create-time'){
 190                         field_value = moment.unix(field_value).toISOString();
 191                     }
 192                     layer_template += '<tr><td>' + layer_map['vnfr'][key] + '</td><td>' + field_value + '</td></tr>';
 193                 }
 194             }
 195             layer_template += '</table>';
 196         }
 197     }
 198
 199     side.empty();
 200     side.append(layer_template)
 201 }
 202
 203 function updateLegend(view) {
 204     var legend = $('#legenda');
 205     var nodes = type_view[view];
 206     var legend_template = '';
 207     var nodes_properties = osm_gui_properties['nodes'];
 208     for (var n in nodes){
 209         var node = nodes[n];
 210         if(nodes_properties[node]){
 211             legend_template += '<div class="node">' +
 212                 '<div class="icon" style="background-color:' + nodes_properties[node].color +'"></div>' +
 213                 '<div class="name">' +nodes_properties[node].name + '</div></div>';
 214         }
 215     }
 216
 217     legend.empty();
 218     legend.append(legend_template)
 219
 220 }
 221
 222 var map = {
 223     'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'VIM Id',
 224     'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
 225     'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
 226     'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id', 'vim-id': 'VIM id'
 227 };
 228
 229 function vnfrDetails(vnfr) {
 230     var side = $('#side');
 231     var vnfr_template = getMainSection('VNFR');
 232
 233     vnfr_template += getChildrenTable(vnfr);
 234     side.empty();
 235     side.append(vnfr_template)
 236 }
 237
 238 function vdurDetails(vdur) {
 239     var side = $('#side');
 240     var vdur_template = getMainSectionWithStatus('VDUR', vdur['status'] === 'ACTIVE');
 241     vdur_template += getChildrenTable(vdur);
 242
 243     if (vdur['interfaces'].length > 0) {
 244         vdur_template += getSubSection('Interfaces:');
 245         vdur_template += '<table class="children">';
 246
 247         for (var i = 0; i < vdur['interfaces'].length; ++i) {
 248             var interface = vdur['interfaces'][i];
 249             var interface_template = '<tr><td>' + interface['name'] + '</td>'
 250                 + '<td>IP:' + interface['ip-address'] + '</td>'
 251                 + '<td>MAC:' + interface['mac-address'] + '</td>';
 252             vdur_template += interface_template;
 253         }
 254         vdur_template += '</table>';
 255     }
 256
 257     side.empty();
 258     side.append(vdur_template)
 259 }
 260
 261 function cpDetails(cp) {
 262      var side = $('#side');
 263     var cp_template = getMainSection('Connection Point');
 264
 265     cp_template += getChildrenTable(cp);
 266     side.empty();
 267     side.append(cp_template);
 268 }
 269
 270 function vlDetails(vl) {
 271     var side = $('#side');
 272     var vl_template = getMainSection('Virtual Link');
 273
 274     vl_template += getChildrenTable(vl);
 275     side.empty();
 276     side.append(vl_template);
 277 }
 278
 279
 280 function getMainSection(title) {
 281     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 282 }
 283
 284 function getSubSection(title) {
 285     return '<div class="section"><span>' + title + '</span></div>';
 286 }
 287
 288 function getMainSectionWithStatus(title, status) {
 289     var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
 290     if (status)
 291         template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
 292     else
 293         template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
 294     template += '</div>';
 295     return template;
 296 }
 297
 298 function getChildrenTable(data) {
 299     var template = '<table class="children">';
 300
 301     for (var key in data) {
 302         if (typeof data[key] === 'string') {
 303             var key_map = (map[key]) ? map[key] : key;
 304             template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
 305         }
 306     }
 307     template += '</table>';
 308     return template;
 309 }