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