X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=static%2Fsrc%2Finstancehandler%2Finstance_topology_view.js;h=95239e3ccbee736ff1b0627e4f2caeb22ccd90ba;hb=e428af7f429a3e42379c42c633ded0651ea2f0cf;hp=f3064435cade075613abdacf685bf3017b82ac25;hpb=99f922f1dc8623a444930a621ce3696802d619c0;p=osm%2FLW-UI.git diff --git a/static/src/instancehandler/instance_topology_view.js b/static/src/instancehandler/instance_topology_view.js index f306443..95239e3 100644 --- a/static/src/instancehandler/instance_topology_view.js +++ b/static/src/instancehandler/instance_topology_view.js @@ -1,159 +1,106 @@ +/* + Copyright 2018 EveryUP srl + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + //GraphEditor instance -var graph_editor = new dreamer.ModelGraphEditor(); -var selected_vnffgId = null; -var show_all = null; +var graph_editor = new TCD3.ModelGraphEditor(); -// Enable Drop Action on the Graph -initDropOnGraph(); +var layer_map = { + 'nsr': { + 'id': 'NS instance id', + 'nsdId': 'NSD id', + 'name-ref': 'NSD name', + 'operational-status': 'Operational status', + 'config-status': 'Config status', + 'detailed-status': 'Detailed status', + 'create-time': 'Creation date', + // 'instantiate_params' :'Instantiation parameters' + }, + 'vnfr': { + 'id': 'VNF instance id', + 'vnfd-id': 'NSD id', + 'vnfd-ref': 'NSD name', + 'member-vnf-index': 'Constituent VNF in the NS', + 'ip-address': 'Mgmt IP address', + 'vim-account-id': 'VIM id', + 'create-time': 'Creation date' + } +}; var type_view = { - "ns": ["vnf", "ns_vl"], - "vnf": ["vdu", "cp"] + "nsr": ["vnfr", "ns_vl"], + "vnfr": ["vdur", "cp", "vnf_vl"] }; var params = { - node: { - type: type_view['ns'], - group: [] - }, - link: { - group: [], - view: ['ns'] - } - }; -$(document).ready(function() { + node: { + type: type_view['nsr'], + group: [] + }, + link: { + group: [], + view: ['nsr'] + } +}; + +$(document).ready(function () { graph_editor.addListener("filters_changed", changeFilter); - graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters); + graph_editor.addListener("node:selected", refreshElementInfo); + graph_editor.addListener("node:deselected", refreshElementInfo); - console.log(osm_gui_properties) // graph_editor initialization graph_editor.init({ - width: $('#graph_ed_container').width(), - height: $('#graph_ed_container').height(), + width: $('#graph_editor_container').width(), + height: $('#graph_editor_container').height(), data_url: window.location.href, - desc_id: getUrlParameter('id'), + //desc_id: getUrlParameter('id'), gui_properties: osm_gui_properties, edit_mode: false, - behaviorsOnEvents:{ + behaviorsOnEvents: { viewBased: false, behaviors: buildBehaviorsOnEvents() } }); - // this will filter in the different views, excluding the node types that are not listed in params graph_editor.handleFiltersParams(params); }); -var filters = function(e, params) { - graph_editor.handleFiltersParams(params); - $('#' + e).nextAll('li').remove(); -} - - -function initDropOnGraph() { - - var dropZone = document.getElementById('graph_ed_container'); - dropZone.ondrop = function(e) { - var group = graph_editor.getCurrentGroup() - e.preventDefault(); - var elemet_id = e.dataTransfer.getData("text/plain"); - var nodetype = $('#'+elemet_id).attr('type-name'); - console.log(nodetype); - if (nodetype) { - var type_name = graph_editor.getTypeProperty()[nodetype].name; - $('#div_chose_id').show(); - $('#input_choose_node_id').val(nodetype + "_" + generateUID()); - $('#modal_chooser_title_add_node').text('Add ' + type_name); - $('#save_choose_node_id').off('click').on('click', function() { - var name = $('#input_choose_node_id').val(); - var node_information = { - 'id': name, - 'info': { - 'type': nodetype, - 'group': [group], - 'desc_id': getUrlParameter('id'), - }, - 'x': e.layerX, - 'y': e.layerY - } - console.log(JSON.stringify(node_information)) - graph_editor.addNode(node_information, function() { - $('#modal_choose_node_id').modal('hide'); - }, function(error){ - showAlert(error) - }); - }); - $('#modal_choose_node_id').modal('show'); - - - } - - } - - dropZone.ondragover = function(ev) { - console.log("ondragover"); - return false; - } - - dropZone.ondragleave = function() { - console.log("ondragleave"); - return false; - } -} function handleForce(el) { - if (el.id == "topology_play") { - $("#topology_pause").removeClass('active'); - $("#topology_play").addClass('active'); - } else { - $("#topology_pause").addClass('active'); - $("#topology_play").removeClass('active'); - } - - graph_editor.handleForce((el.id == "topology_play") ? true : false); - + graph_editor.handleForce((el.getAttribute('aria-pressed') === "true")); } function changeFilter(e, c) { - - console.log("changeFilter", JSON.stringify(c)); - //$("#title_header").text("OSHI Graph Editor"); - //updateNodeDraggable({type_property: type_property, nodes_layer: graph_editor.getAvailableNodes()}) - if(c) - new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert); - -} - -function refreshGraphParameters(e, graphParameters) { - var self = $(this); - if (graphParameters == null) return; - + if (c && c.link && c.link.view[0]) { + updateLegend(c.link.view[0]); + } + layerDetails(graph_editor.getCurrentFilters()) } -function resetFilters(){ +function resetFilters() { graph_editor.handleFiltersParams(params); } function buildBehaviorsOnEvents() { var self = this; - var contextmenuNodesAction = [{ - title: 'Show info', - action: function (elm, d, i) { - // console.log('Show NodeInfo', elm, d, i); - var nodeData = { - "node": { - "id": d.id - } - }; - }, - edit_mode: false - - }, + var contextmenuNodesAction = [ { title: 'Explore', action: function (elm, c_node, i) { - if (c_node.info.type != undefined) { + if (c_node.info.type !== undefined) { var current_layer_nodes = Object.keys(graph_editor.model.layer[graph_editor.getCurrentView()].nodes); if (current_layer_nodes.indexOf(c_node.info.type) >= 0) { if (graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands) { @@ -178,10 +125,187 @@ function buildBehaviorsOnEvents() { }, edit_mode: false }]; - var behavioursOnEvents = { - 'nodes': contextmenuNodesAction + return { + 'nodes': contextmenuNodesAction }; - return behavioursOnEvents; +} + +function refreshElementInfo(event, element) { + if (event.type === 'node:selected') { + switch (element.info.type) { + case 'vnfr': + vnfrDetails(element.info.osm); + break; + case 'vdur': + vdurDetails(element.info.osm); + break; + case 'int_cp': + case 'cp': + cpDetails(element.info.osm); + break; + case 'vnf_vl': + case 'ns_vl': + vlDetails(element.info.osm); + break; + } + } + else if (event.type === 'node:deselected') { + layerDetails(graph_editor.getCurrentFilters()) + } +} + + +function layerDetails(filters) { + var side = $('#side'); + var graph_parameters = graph_editor.getGraphParams(); + var layer_template = ''; + if(graph_parameters['view'] && filters.link.view.length >0 && filters.link.view[0]){ + if(filters.link.view[0] === 'nsr') { + layer_template = getMainSection('NS View'); + layer_template+= ''; + for (var key in layer_map['nsr']) { + if ( graph_parameters['view']['nsr'][key] ) { + var field_value = graph_parameters['view']['nsr'][key]; + if(key === 'create-time'){ + field_value = moment.unix(field_value).toISOString(); + } else if (key === 'instantiate_params'){ + field_value = JSON.stringify(field_value); + } + layer_template += ''; + } + } + layer_template += '
' + layer_map['nsr'][key] + '' + field_value + '
'; + //layer_template += getChildrenTable(graph_parameters['view']['nsr']); + } + else if(filters.link.view[0] === 'vnfr') { + layer_template = getMainSection('VNF View'); + var vnfr_id = filters.link.group[0]; + + layer_template+= ''; + var vnfr_data = graph_parameters['view']['vnfr'][vnfr_id]; + for (var key in layer_map['vnfr']) { + if ( vnfr_data[key] ) { + var field_value = vnfr_data[key]; + if(key === 'create-time'){ + field_value = moment.unix(field_value).toISOString(); + } + layer_template += ''; + } + } + layer_template += '
' + layer_map['vnfr'][key] + '' + field_value + '
'; + } + } + + side.empty(); + side.append(layer_template) +} + +function updateLegend(view) { + var legend = $('#legenda'); + var nodes = type_view[view]; + var legend_template = ''; + var nodes_properties = osm_gui_properties['nodes']; + for (var n in nodes){ + var node = nodes[n]; + if(nodes_properties[node]){ + legend_template += '
' + + '
' + + '
' +nodes_properties[node].name + '
'; + } + } + + legend.empty(); + legend.append(legend_template) + +} + +var map = { + 'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'VIM Id', + 'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network', + 'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id', + 'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id', 'vim-id': 'VIM id' +}; + +function vnfrDetails(vnfr) { + var side = $('#side'); + var vnfr_template = getMainSection('VNFR'); + + vnfr_template += getChildrenTable(vnfr); + side.empty(); + side.append(vnfr_template) +} + +function vdurDetails(vdur) { + var side = $('#side'); + var vdur_template = getMainSectionWithStatus('VDUR', vdur['status'] === 'ACTIVE'); + vdur_template += getChildrenTable(vdur); + + if (vdur['interfaces'].length > 0) { + vdur_template += getSubSection('Interfaces:'); + vdur_template += ''; + + for (var i = 0; i < vdur['interfaces'].length; ++i) { + var interface = vdur['interfaces'][i]; + var interface_template = '' + + '' + + ''; + vdur_template += interface_template; + } + vdur_template += '
' + interface['name'] + 'IP:' + interface['ip-address'] + 'MAC:' + interface['mac-address'] + '
'; + } + + side.empty(); + side.append(vdur_template) +} + +function cpDetails(cp) { + var side = $('#side'); + var cp_template = getMainSection('Connection Point'); + + cp_template += getChildrenTable(cp); + side.empty(); + side.append(cp_template); +} + +function vlDetails(vl) { + var side = $('#side'); + var vl_template = getMainSection('Virtual Link'); + + vl_template += getChildrenTable(vl); + side.empty(); + side.append(vl_template); +} + + +function getMainSection(title) { + return '
' + title + '
'; +} + +function getSubSection(title) { + return '
' + title + '
'; +} + +function getMainSectionWithStatus(title, status) { + var template = '
' + title + ''; + if (status) + template += '
ACTIVE
'; + else + template += '
NO ACTIVE
'; + template += '
'; + return template; +} + +function getChildrenTable(data) { + var template = ''; + + for (var key in data) { + if (typeof data[key] === 'string') { + var key_map = (map[key]) ? map[key] : key; + template += ''; + } + } + template += '
' + key_map + '' + data[key] + '
'; + return template; } \ No newline at end of file