static/src/instancehandler/instance_topology_view.js

   1 //GraphEditor instance
   2 var graph_editor = new TCD3.ModelGraphEditor();
   3
   4 var type_view = {
   5     "nsr": ["vnfr", "ns_vl"],
   6     "vnfr": ["vdur", "cp", "vnf_vl"]
   7 };
   8
   9 var params = {
  10     node: {
  11         type: type_view['nsr'],
  12         group: []
  13     },
  14     link: {
  15         group: [],
  16         view: ['nsr']
  17     }
  18 };
  19
  20 $(document).ready(function () {
  21
  22     graph_editor.addListener("filters_changed", changeFilter);
  23     graph_editor.addListener("node:selected", refreshElementInfo);
  24     graph_editor.addListener("node:deselected", refreshElementInfo);
  25
  26     // graph_editor initialization
  27     graph_editor.init({
  28         width: $('#graph_editor_container').width(),
  29         height: $('#graph_editor_container').height(),
  30         data_url: window.location.href,
  31         //desc_id: getUrlParameter('id'),
  32         gui_properties: osm_gui_properties,
  33         edit_mode: false,
  34         behaviorsOnEvents: {
  35             viewBased: false,
  36             behaviors: buildBehaviorsOnEvents()
  37         }
  38     });
  39     graph_editor.handleFiltersParams(params);
  40
  41 });
  42
  43
  44
  45 function handleForce(el) {
  46     graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
  47 }
  48
  49 function changeFilter(e, c) {
  50     if (c && c.link && c.link.view[0]) {
  51         updateLegend(c.link.view[0]);
  52     }
  53     layerDetails(graph_editor.getCurrentFilters())
  54 }
  55
  56 function resetFilters() {
  57     graph_editor.handleFiltersParams(params);
  58 }
  59
  60 function buildBehaviorsOnEvents() {
  61     var self = this;
  62     var contextmenuNodesAction = [
  63         {
  64             title: 'Explore',
  65             action: function (elm, c_node, i) {
  66                 if (c_node.info.type !== undefined) {
  67                     var current_layer_nodes = Object.keys(graph_editor.model.layer[graph_editor.getCurrentView()].nodes);
  68                     if (current_layer_nodes.indexOf(c_node.info.type) >= 0) {
  69                         if (graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands) {
  70                             var new_layer = graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands;
  71                             graph_editor.handleFiltersParams({
  72                                 node: {
  73                                     type: Object.keys(graph_editor.model.layer[new_layer].nodes),
  74                                     group: [c_node.id]
  75                                 },
  76                                 link: {
  77                                     group: [c_node.id],
  78                                     view: [new_layer]
  79                                 }
  80                             });
  81
  82                         }
  83                         else {
  84                             showAlert('This is not an explorable node.')
  85                         }
  86                     }
  87                 }
  88             },
  89             edit_mode: false
  90         }];
  91
  92     return {
  93         'nodes': contextmenuNodesAction
  94     };
  95
  96 }
  97
  98 function refreshElementInfo(event, element) {
  99     if (event.type === 'node:selected') {
 100         switch (element.info.type) {
 101             case 'vnfr':
 102                 vnfrDetails(element.info.osm);
 103                 break;
 104             case 'vdur':
 105                 vdurDetails(element.info.osm);
 106                 break;
 107             case 'int_cp':
 108             case 'cp':
 109                 cpDetails(element.info.osm);
 110                 break;
 111             case 'vnf_vl':
 112             case 'ns_vl':
 113                 vlDetails(element.info.osm);
 114                 break;
 115         }
 116     }
 117     else if (event.type === 'node:deselected') {
 118         layerDetails(graph_editor.getCurrentFilters())
 119     }
 120 }
 121
 122 function layerDetails(filters) {
 123     var side = $('#side');
 124     var graph_parameters = graph_editor.getGraphParams();
 125     var layer_template = '';
 126     if(graph_parameters['view'] && filters.link.view.length >0 && filters.link.view[0]){
 127         if(filters.link.view[0] === 'nsr') {
 128             layer_template = getMainSection('NS View');
 129             layer_template += getChildrenTable(graph_parameters['view']['nsr']);
 130         }
 131         else if(filters.link.view[0] === 'vnfr') {
 132             layer_template = getMainSection('VNF View');
 133             var vnfr_id = filters.link.group[0];
 134             layer_template += getChildrenTable(graph_parameters['view']['vnfr'][vnfr_id]);
 135         }
 136     }
 137
 138     side.empty();
 139     side.append(layer_template)
 140 }
 141
 142 function updateLegend(view) {
 143     var legend = $('#legenda');
 144     var nodes = type_view[view];
 145     var legend_template = '';
 146     var nodes_properties = osm_gui_properties['nodes'];
 147     for (var n in nodes){
 148         var node = nodes[n];
 149         if(nodes_properties[node]){
 150             legend_template += '<div class="node">' +
 151                 '<div class="icon" style="background-color:' + nodes_properties[node].color +'"></div>' +
 152                 '<div class="name">' +nodes_properties[node].name + '</div></div>';
 153         }
 154     }
 155
 156     legend.empty();
 157     legend.append(legend_template)
 158
 159 }
 160
 161 var map = {
 162     'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'Vim Id',
 163     'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
 164     'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
 165     'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id'
 166 };
 167
 168 function vnfrDetails(vnfr) {
 169     var side = $('#side');
 170     var vnfr_template = getMainSection('VNFR');
 171
 172     vnfr_template += getChildrenTable(vnfr);
 173     side.empty();
 174     side.append(vnfr_template)
 175 }
 176
 177 function vdurDetails(vdur) {
 178     var side = $('#side');
 179     var vdur_template = getMainSectionWithStatus('VDUR', vdur['status'] === 'ACTIVE');
 180     vdur_template += getChildrenTable(vdur);
 181
 182     if (vdur['interfaces'].length > 0) {
 183         vdur_template += getSubSection('Interfaces:');
 184         vdur_template += '<table class="children">';
 185
 186         for (var i = 0; i < vdur['interfaces'].length; ++i) {
 187             var interface = vdur['interfaces'][i];
 188             var interface_template = '<tr><td>' + interface['name'] + '</td>'
 189                 + '<td>IP:' + interface['ip-address'] + '</td>'
 190                 + '<td>MAC:' + interface['mac-address'] + '</td>';
 191             vdur_template += interface_template;
 192         }
 193         vdur_template += '</table>';
 194     }
 195
 196     side.empty();
 197     side.append(vdur_template)
 198 }
 199
 200 function cpDetails(cp) {
 201      var side = $('#side');
 202     var cp_template = getMainSection('Connection Point');
 203
 204     cp_template += getChildrenTable(cp);
 205     side.empty();
 206     side.append(cp_template);
 207 }
 208
 209 function vlDetails(vl) {
 210     var side = $('#side');
 211     var vl_template = getMainSection('Virtual Link');
 212
 213     vl_template += getChildrenTable(vl);
 214     side.empty();
 215     side.append(vl_template);
 216 }
 217
 218
 219 function getMainSection(title) {
 220     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 221 }
 222
 223 function getSubSection(title) {
 224     return '<div class="section"><span>' + title + '</span></div>';
 225 }
 226
 227 function getMainSectionWithStatus(title, status) {
 228     var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
 229     if (status)
 230         template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
 231     else
 232         template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
 233     template += '</div>';
 234     return template;
 235 }
 236
 237 function getChildrenTable(data) {
 238     var template = '<table class="children">';
 239
 240     for (var key in data) {
 241         if (typeof data[key] === 'string') {
 242             var key_map = (map[key]) ? map[key] : key;
 243             template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
 244         }
 245     }
 246     template += '</table>';
 247     return template;
 248 }