X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=static%2Fsrc%2Finstancehandler%2Finstance_topology_view.js;h=716a61923384701761c2af8e4779ce06a34834b2;hb=e96d058fe5c681052f45c1d794ba80b09b162c64;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..716a619 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", "ns_cp"],
+ "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_map['nsr'][key] + ' | ' + field_value + ' |
';
+ }
+ }
+ layer_template += '
';
+ //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_map['vnfr'][key] + ' | ' + field_value + ' |
';
+ }
+ }
+ layer_template += '
';
+ }
+ }
+
+ 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 = '' + interface['name'] + ' | '
+ + 'IP:' + interface['ip-address'] + ' | '
+ + 'MAC:' + interface['mac-address'] + ' | ';
+ vdur_template += interface_template;
+ }
+ vdur_template += '
';
+ }
+
+ 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 += '' + key_map + ' | ' + data[key] + ' |
';
+ }
+ }
+ template += '
';
+ return template;
}
\ No newline at end of file