X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=static%2Fsrc%2Fdescriptorhandler%2Fcomposer.js;h=aef680fdde49946a46222efc1d6b1cfba5591275;hb=f705bc834c4073155310ef740475d3d8543b22f4;hp=a21c14f61c0cb4eb740fb84575fe0b11986c953d;hpb=0dc79eb941c0222f6d53d27fb2bca839bd60780d;p=osm%2FLW-UI.git
diff --git a/static/src/descriptorhandler/composer.js b/static/src/descriptorhandler/composer.js
index a21c14f..aef680f 100644
--- a/static/src/descriptorhandler/composer.js
+++ b/static/src/descriptorhandler/composer.js
@@ -18,10 +18,17 @@
var graph_editor = new TCD3.ModelGraphEditor();
var type_view = {
- "nsd": ["vnf", "ns_vl"],
+ "nsd": ["vnf", "ns_vl", "ns_cp"],
"vnfd": ["vdu", "cp", "vnf_vl", "int_cp"]
};
+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'
+};
+
var params = {
node: {
type: type_view[getUrlParameter('type')],
@@ -47,17 +54,116 @@ $(document).ready(function () {
data_url: window.location.href,
//desc_id: getUrlParameter('id'),
gui_properties: osm_gui_properties,
- edit_mode: false,
+ edit_mode: true,
behaviorsOnEvents: {
viewBased: false,
behaviors: buildBehaviorsOnEvents()
}
});
graph_editor.handleFiltersParams(params);
+ initDropOnGraph();
+
+
+ $("#side_form").submit(function (event) {
+ event.preventDefault(); //prevent default action
+ console.log("ON submit")
+ var form_data = new FormData(this); //Encode form elements for submission
+ var formDataJson = {};
+ form_data.forEach(function (value, key) {
+ formDataJson[key] = value;
+ });
+ var dialog = bootbox.dialog({
+ message: '
Updating...
',
+ closeButton: true
+ });
+ if (graph_editor._selected_node) {
+ graph_editor.updateDataNode(graph_editor._selected_node, formDataJson, function () {
+ dialog.modal('hide');
+ }, function (result) {
+ var data = result.responseJSON;
+ var title = "Error " + (data && data.code ? data.code : 'unknown');
+ var message = data && data.detail ? data.detail : 'No detail available.';
+ dialog.modal('hide');
+ bootbox.alert({
+ title: title,
+ message: message
+ });
+ })
+ } else {
+ graph_editor.updateGraphParams(formDataJson, function () {
+ dialog.modal('hide');
+ }, function (result) {
+ var data = result.responseJSON;
+ var title = "Error " + (data && data.code ? data.code : 'unknown');
+ var message = data && data.detail ? data.detail : 'No detail available.';
+ dialog.modal('hide');
+ bootbox.alert({
+ title: title,
+ message: message
+ });
+ })
+ }
+ });
});
+function initDropOnGraph() {
+
+ var dropZone = document.getElementById('graph_editor_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');
+ var random_name = nodetype + "_" + generateUID();
+ console.log(nodetype)
+ var node_information = {
+ 'id': random_name,
+ 'info': {
+ 'type': nodetype,
+ 'property': {
+ 'custom_label': random_name
+ },
+ 'group': null,
+ 'desc_id': getUrlParameter('id'),
+ 'desc_type': getUrlParameter('type'),
+ 'osm': {}
+ },
+ 'x': e.layerX,
+ 'y': e.layerY
+ };
+
+ if (nodetype === 'vnf') {
+ node_information['id'] = $('#' + elemet_id).attr('desc_id');
+ }
+
+ graph_editor.addNode(node_information, function () {
+ console.log("OK")
+ }, function (result) {
+ var data = result.responseJSON;
+ var title = "Error " + (data && data.code ? data.code : 'unknown');
+ var message = data && data.detail ? data.detail : 'No detail available.';
+ bootbox.alert({
+ title: title,
+ message: message
+ });
+ })
+
+ };
+
+ dropZone.ondragover = function (ev) {
+ console.log("ondragover");
+ return false;
+ };
+
+ dropZone.ondragleave = function () {
+ console.log("ondragleave");
+ return false;
+ };
+}
+
function handleForce(el) {
graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
@@ -66,8 +172,9 @@ function handleForce(el) {
function changeFilter(e, c) {
if (c && c.link && c.link.view[0]) {
updateLegend(c.link.view[0]);
+ updatePalette(c.link.view[0]);
}
- //layerDetails(graph_editor.getCurrentFilters())
+ layerDetails(graph_editor.getCurrentFilters())
}
function resetFilters() {
@@ -75,37 +182,7 @@ function resetFilters() {
}
function buildBehaviorsOnEvents() {
- var self = this;
- var contextmenuNodesAction = [
- {
- title: 'Explore',
- action: function (elm, c_node, i) {
- 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) {
- var new_layer = graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands;
- graph_editor.handleFiltersParams({
- node: {
- type: Object.keys(graph_editor.model.layer[new_layer].nodes),
- group: [c_node.id]
- },
- link: {
- group: [c_node.id],
- view: [new_layer]
- }
- });
-
- }
- else {
- showAlert('This is not an explorable node.')
- }
- }
- }
- },
- edit_mode: false
- }];
-
+ var contextmenuNodesAction = [];
return {
'nodes': contextmenuNodesAction
};
@@ -115,13 +192,18 @@ function buildBehaviorsOnEvents() {
function refreshElementInfo(event, element) {
if (event.type === 'node:selected') {
switch (element.info.type) {
- case 'vnfd':
+ case 'vnf':
vnfDetails(element.info.osm);
break;
case 'vdu':
vduDetails(element.info.osm);
break;
case 'int_cp':
+ intcpDetails(element.info.osm);
+ break;
+ case 'ns_cp':
+ nscpDetails(element.info.osm);
+ break;
case 'cp':
cpDetails(element.info.osm);
break;
@@ -137,19 +219,18 @@ function refreshElementInfo(event, element) {
}
function layerDetails(filters) {
- var side = $('#side');
+ var side = $('#side_form');
var graph_parameters = graph_editor.getGraphParams();
var layer_template = '';
- console.log(graph_parameters)
- 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 += getChildrenTable(graph_parameters['view']['nsr']);
+ if (graph_parameters['view'] && filters.link.view.length > 0 && filters.link.view[0]) {
+ if (filters.link.view[0] === 'nsd') {
+ layer_template = getMainSectionWithSubmitButton('NSD');
+ layer_template += getChildrenTable(graph_parameters['view']['nsd']);
}
- else if(filters.link.view[0] === 'vnfr') {
- layer_template = getMainSection('VNF View');
- var vnfr_id = filters.link.group[0];
- layer_template += getChildrenTable(graph_parameters['view']['vnfr'][vnfr_id]);
+ else if (filters.link.view[0] === 'vnfd') {
+ layer_template = getMainSectionWithSubmitButton('VNFD');
+
+ layer_template += getChildrenTable(graph_parameters['view']['vnfd']);
}
}
@@ -162,12 +243,12 @@ function updateLegend(view) {
var nodes = type_view[view];
var legend_template = '';
var nodes_properties = osm_gui_properties['nodes'];
- for (var n in nodes){
+ for (var n in nodes) {
var node = nodes[n];
- if(nodes_properties[node]){
+ if (nodes_properties[node]) {
legend_template += '' +
- '
' +
- '
' +nodes_properties[node].name + '
';
+ '' +
+ '' + nodes_properties[node].name + '
';
}
}
@@ -176,57 +257,107 @@ function updateLegend(view) {
}
-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'
-};
+function updatePalette(view) {
+ var palette = $('#palette');
+ var palette_template = '';
+ palette.empty();
+ if (view === 'vnfd') {
+ var nodes = type_view[view];
+ var nodes_properties = osm_gui_properties['nodes'];
+ for (var n in nodes) {
+ var node = nodes[n];
+ if (nodes_properties[node] && (nodes_properties[node].draggable != false)) {
+ palette_template += '' +
+ '
' +
+ '
' + nodes_properties[node].name + '
';
+ }
+ }
+
+ palette.append(palette_template)
+ } else if (view === 'nsd') {
+ $.ajax({
+ url: '/projects/descriptors/composer/availablenodes?layer=nsd',
+ type: 'GET',
+ cache: false,
+ success: function (result) {
+ palette_template += '' +
+ '
' +
+ '
' + osm_gui_properties['nodes']['ns_vl'].name + '
';
+ palette_template += getSubSection('VNFD');
+ for (var d in result['descriptors']) {
+ var desc = result['descriptors'][d];
+ palette_template += '' +
+ '
' +
+ '
' + desc.name + '
';
+ }
+ palette.append(palette_template)
+ },
+ error: function (result) {
+ var data = result.responseJSON;
+ var title = "Error " + (data && data.code ? data.code : 'unknown');
+ var message = data && data.detail ? data.detail : 'No detail available.';
+ bootbox.alert({
+ title: title,
+ message: message
+ });
+ }
+ });
+ }
+
+}
+
function vnfDetails(vnfr) {
- var side = $('#side');
+ var side = $('#side_form');
var vnfr_template = getMainSection('VNF');
- vnfr_template += getChildrenTable(vnfr);
+ vnfr_template += getChildrenTable(vnfr, true);
side.empty();
side.append(vnfr_template)
}
function vduDetails(vdur) {
- var side = $('#side');
- var vdur_template = getMainSectionWithStatus('VDU', vdur['status'] === 'ACTIVE');
+ var side = $('#side_form');
+ var vdur_template = getMainSectionWithSubmitButton('VDU');
vdur_template += getChildrenTable(vdur);
- if (vdur['interface'] && vdur['interface'].length > 0) {
- vdur_template += getSubSection('Interfaces:');
- vdur_template += '';
+ side.empty();
+ side.append(vdur_template)
+}
- for (var i = 0; i < vdur['interface'].length; ++i) {
- var interface = vdur['interface'][i];
- var interface_template = '' + interface['name'] + ' | '
- + 'IP:' + interface['ip-address'] + ' | '
- + 'MAC:' + interface['mac-address'] + ' | ';
- vdur_template += interface_template;
- }
- vdur_template += '
';
- }
+function intcpDetails(cp) {
+ var side = $('#side_form');
+ var cp_template = getMainSection('Int. Connection Point');
+ cp_template += getChildrenTable(cp, true);
side.empty();
- side.append(vdur_template)
+ side.append(cp_template);
}
function cpDetails(cp) {
- var side = $('#side');
- var cp_template = getMainSection('Connection Point');
+ var side = $('#side_form');
+ var cp_template = getMainSectionWithSubmitButton('Connection Point');
cp_template += getChildrenTable(cp);
side.empty();
side.append(cp_template);
}
+function nscpDetails(cp) {
+ var side = $('#side_form');
+ var cp_template = getMainSection('Connection Point');
+
+ cp_template += getChildrenTable(cp, true);
+ side.empty();
+ side.append(cp_template);
+}
+
function vlDetails(vl) {
- var side = $('#side');
- var vl_template = getMainSection('Virtual Link');
+ var side = $('#side_form');
+ var vl_template = getMainSectionWithSubmitButton('Virtual Link');
vl_template += getChildrenTable(vl);
side.empty();
@@ -238,6 +369,11 @@ function getMainSection(title) {
return '' + title + '
';
}
+function getMainSectionWithSubmitButton(title) {
+ return '' + title + '' +
+ '
';
+}
+
function getSubSection(title) {
return '' + title + '
';
}
@@ -252,15 +388,27 @@ function getMainSectionWithStatus(title, status) {
return template;
}
-function getChildrenTable(data) {
+function getChildrenTable(data, ro) {
var template = '';
return template;
+}
+
+function openHelp() {
+ $('#modalTopologyInfoButton').modal('show');
+}
+
+function openTextedit() {
+ window.location.href = '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')
}
\ No newline at end of file