first commit
Change-Id: I8a65ee5527dd16d81e87c8ac5d4bdb471e5e759d
Signed-off-by: lombardof <flombardo@cnit.it>
diff --git a/static/src/projecthandler/descriptorslist.js b/static/src/projecthandler/descriptorslist.js
new file mode 100644
index 0000000..4a5975a
--- /dev/null
+++ b/static/src/projecthandler/descriptorslist.js
@@ -0,0 +1,69 @@
+
+function startFromAgent(start) {
+
+
+ if (start == 'exist'){
+ $('#div_new_agent').hide();
+ $('#div_available_agent').show();
+ }
+ else if (start == 'new'){
+ $('#div_available_agent').hide();
+ $('#div_new_agent').show();
+ }
+
+ $('.required').prop('required', function(){
+ return $(this).is(':visible');
+ });
+
+}
+/*
+function InvalidGitUrl(textbox) {
+ console.log('InvalidGitUrl', textbox,textbox.value == '' ,textbox.validity.typeMismatch)
+ if (textbox.value === '') {
+ textbox.setCustomValidity('Required git URL');
+ }
+ else if (textbox.validity.typeMismatch){
+ textbox.setCustomValidity('please enter a valid git URL');
+
+ }
+ else {
+ textbox.setCustomValidity('please enter a valid git URL');
+ }
+ return true;
+}
+*/
+function startFromRepo(start) {
+
+
+ if (start == 'exist'){
+ $('#div_new_repo').hide();
+ $('#div_available_repo').show();
+ }
+ else if (start == 'new'){
+ $('#div_available_repo').hide();
+ $('#div_new_repo').show();
+ }
+
+ $('.required').prop('required', function(){
+ return $(this).is(':visible');
+ });
+
+}
+
+$(document).ready(function () {
+ $("#startButtonsSelect :input").change(function () {
+ console.log("select")
+ startFromAgent(this.value);
+ });
+ $("#push_start_buttons_select :input").change(function () {
+ console.log("select")
+ startFromRepo(this.value);
+ });
+
+ // Bind events
+ $("form").submit(function(e) {
+ console.log("on submit form")
+ $("#start_new_deployment").button('loading');
+ });
+
+});
\ No newline at end of file
diff --git a/static/src/projecthandler/new_project.js b/static/src/projecthandler/new_project.js
new file mode 100644
index 0000000..9ca4c9e
--- /dev/null
+++ b/static/src/projecthandler/new_project.js
@@ -0,0 +1,84 @@
+/**
+ * New Project page
+ **/
+function handleTypeChoose(type) {
+ resetStartFromInputs()
+ $('#projectType').val(type);
+ $('#startGroup').show();
+ $('input[id="scratch"]').prop('checked', true);
+ $('#startButtonsSelect label').removeClass("active");
+ $('#s-scratch').addClass("active");
+ $('#createButton').prop('disabled', false);
+ //$('#projectName').val('New_'+type+'_project')
+}
+
+function startFromChoose(start) {
+ resetStartFromInputs()
+ //resetSelectors();
+ var type = $('#select_type').val();
+
+ if (start == 'files')
+ $('#div-file-upload-' + type).show();
+ else if (start == 'example')
+ //document.getElementById['#div-example-' + type].style.display = "block";
+ $('#div-example-' + type).css("display", "inline");
+
+}
+
+function resetStartFromInputs() {
+ $('div[class="start-selector"]').hide();
+ $('input[type="file"]').val('');
+ $('select[class="example-selector"]').val(null).trigger("change");
+}
+
+$(document).ready(function () {
+
+ // init selector
+ $(".start-selector").css("display", "inline");
+ $('#select_type').select2({
+ placeholder: {
+ id: '-1',
+ text: 'Select an option'
+ },
+ data: data_type_selector
+ });
+
+
+ $('#select_type').on("select2:select", function (evt) {
+ if (evt) {
+ var args = evt.params;
+ handleTypeChoose(args.data.value)
+ }
+ });
+
+ if (type_example_files) {
+ for (var key in type_example_files) {
+ $('select[id="example-' + key + '"]').select2({
+ placeholder: {
+ id: '-1',
+ text: 'Select an option'
+ },
+ data: type_example_files[key]
+ });
+ }
+
+
+ }
+
+
+
+ $("#startButtonsSelect :input").change(function () {
+ startFromChoose(this.value);
+ });
+
+
+
+ $("body").bind("ajaxSend", function (elm, xhr, s) {
+ if (s.type == "POST") {
+ xhr.setRequestHeader('csrftoken', $('#csrfmiddlewaretoken').val());
+ }
+ });
+
+ $(".start-selector").css("display", "none");
+
+});
\ No newline at end of file
diff --git a/static/src/projecthandler/osm/controller.js b/static/src/projecthandler/osm/controller.js
new file mode 100644
index 0000000..e39e332
--- /dev/null
+++ b/static/src/projecthandler/osm/controller.js
@@ -0,0 +1,107 @@
+if (typeof dreamer === 'undefined') {
+ var dreamer = {};
+}
+var level = {}
+
+dreamer.OsmController = (function(global) {
+ 'use strict';
+
+ var DEBUG = true;
+
+ OsmController.prototype.constructor = OsmController;
+
+ /**
+ * Constructor
+ */
+ function OsmController() {
+
+
+ }
+
+
+ OsmController.prototype.addNode = function(graph_editor, node, success, error) {
+ log('addNode');
+ var data_to_send = {
+ 'group_id': node.info.group[0],
+ 'element_id': node.id,
+ 'element_type': node.info.type,
+ 'element_desc_id': node.info.desc_id,
+ 'x': node.x,
+ 'y': node.y
+ };
+ new dreamer.GraphRequests().addNode(data_to_send, null, function() {
+ if (success)
+ success();
+ },error);
+ };
+
+ OsmController.prototype.addLink = function(graph_editor, link, success, error) {
+ log('addLink');
+ var data_to_send = {
+ 'desc_id': link.desc_id,
+ 'source': link.source.id,
+ 'source_type': link.source.info.type,
+ 'target': link.target.id,
+ 'target_type': link.target.info.type,
+ 'view': link.view,
+ 'group': link.group
+ };
+ new dreamer.GraphRequests().addLink(link, null, function() {
+ graph_editor._deselectAllNodes();
+
+ if (typeof old_link !== 'undefined' && old_link.length > 0 && old_link[0].index !== 'undefined') {
+ graph_editor.parent.removeLink.call(graph_editor, old_link[0].index);
+ }
+ if (success) {
+ success();
+ }
+ },error);
+ };
+
+ OsmController.prototype.removeNode = function(graph_editor, node, success, error) {
+ log('removeNode');
+ var data_to_send = {
+ 'group_id': node.info.group[0],
+ 'element_id': node.id,
+ 'element_type': node.info.type,
+ 'element_desc_id': node.info.desc_id,
+ };
+ new dreamer.GraphRequests().removeNode(data_to_send, null, function() {
+ if (success) {
+ success();
+ }
+ },error);
+ };
+
+ OsmController.prototype.removeLink = function(graph_editor, link, success, error) {
+ log('removeLink');
+ var data_to_send = {
+ 'desc_id': link.desc_id,
+ 'source': link.source.id,
+ 'source_type': link.source.info.type,
+ 'target': link.target.id,
+ 'target_type': link.target.info.type,
+ 'view': link.view,
+ 'group': link.group
+ };
+ new dreamer.GraphRequests().removeLink(data_to_send, function() {
+ if (success) {
+ success();
+ }
+ },error);
+ };
+
+ /**
+ * Log utility
+ */
+ function log(text) {
+ if (DEBUG)
+ console.log("::OsmController::", text);
+ }
+
+ return OsmController;
+}(this));
+
+if (typeof module === 'object') {
+ module.exports = dreamer.OsmController;
+}
\ No newline at end of file
diff --git a/static/src/projecthandler/osm/gui_properties.js b/static/src/projecthandler/osm/gui_properties.js
new file mode 100644
index 0000000..1af3ef4
--- /dev/null
+++ b/static/src/projecthandler/osm/gui_properties.js
@@ -0,0 +1,128 @@
+//***STEFANO
+var example_gui_properties = {
+ "v1" : {
+ "default": {
+ "shape": "cross",
+ "color": "#42f44e",
+ "label_color": "black",
+ "size": 15
+ },
+ "nodes": {
+ "ns_vl": {
+ "image" : "vl-80.png",
+ // "shape": "triangle",
+ "color": "#196B90",
+ "size": 20,
+ "name": "VL"
+ },
+ "ns_cp": {
+ "image" : "cp-80.png",
+ // "shape": "circle",
+ "color": "#F27220",
+ "size": 20,
+ "name": "CP"
+ },
+ "vnf": {
+ "image": "vnf-100.png",
+ // "shape": "square",
+ "color": "#54A698",
+ "size": 35,
+ "name": "VNF"
+ },
+ "vnf_vl": {
+ "shape": "triangle",
+ //"color": "#5FC9DB",
+ "color": "#196B90",
+ "size": 11,
+ "name": "IntVL"
+ },
+ "vnf_ext_cp": {
+ "shape": "circle",
+ //"#00CC66",
+ "color": "#F27220",
+ "size": 15,
+ "name": "ExtCP"
+ },
+ "vnf_vdu_cp": {
+ "shape": "circle",
+ //"color": "#E74C35",
+ "color": "#fce0cf",
+ "size": 15,
+ "name": "VduCP"
+ },
+ "vnf_vdu": {
+ "shape": "square",
+ //"color": "#50A7CC",
+ "color": "#54A698",
+ "size": 18,
+ "name": "VDU"
+ }
+ },
+ "graphs": null
+
+ },
+ "v0" : {
+ "default": {
+ "shape": "cross",
+ "color": "#42f44e",
+ "label_color": "black",
+ "size": 15
+ },
+ "nodes": {
+ "pippo": {
+ "image": "image.png",
+ "size": 25
+ },
+ "ns_vl": {
+ "shape": "triangle",
+ "color": "#196B90",
+ "size": 11,
+ "name": "VL"
+ },
+ "ns_cp": {
+ "shape": "circle",
+ "color": "#F27220",
+ "size": 15,
+ "name": "CP"
+ },
+ "vnf": {
+ "shape": "square",
+ "color": "#54A698",
+ "image": "router.png",
+ "size": 40,
+ "name": "VNF"
+ },
+ "vnf_vl": {
+ "shape": "triangle",
+ //"color": "#5FC9DB",
+ "color": "#196B90",
+ "size": 11,
+ "name": "IntVL"
+ },
+ "vnf_ext_cp": {
+ "shape": "circle",
+ //"#00CC66",
+ "color": "#F27220",
+ "size": 15,
+ "name": "ExtCP"
+ },
+ "vnf_vdu_cp": {
+ "shape": "circle",
+ //"color": "#E74C35",
+ "color": "#fce0cf",
+ "size": 15,
+ "name": "VduCP"
+ },
+ "vnf_vdu": {
+ "shape": "square",
+ //"color": "#50A7CC",
+ "color": "#54A698",
+ "size": 18,
+ "name": "VDU"
+ }
+ },
+ "graphs": null
+
+ },
+
+}
\ No newline at end of file
diff --git a/static/src/projecthandler/osm/project_graph.js b/static/src/projecthandler/osm/project_graph.js
new file mode 100644
index 0000000..072129f
--- /dev/null
+++ b/static/src/projecthandler/osm/project_graph.js
@@ -0,0 +1,354 @@
+//GraphEditor instance
+var graph_editor = new dreamer.ModelGraphEditor();
+var selected_vnffgId = null;
+var show_all = null;
+
+// Enable Drop Action on the Graph
+initDropOnGraph();
+
+
+
+$(document).ready(function() {
+ var descriptor_type = getUrlParameter('type') == 'ns' || getUrlParameter('type') == 'nsd' ? 'ns' : 'vnf'
+ var allowed_types = descriptor_type == 'ns' ? ['vnf', 'ns_cp', 'ns_vl'] : ['vnf_vl', 'vnf_ext_cp', 'vnf_vdu_cp', 'vnf_vdu'];
+ var params = {
+ node: {
+ type: allowed_types,
+ group: [getUrlParameter('id')]
+ },
+ link: {
+ group: [getUrlParameter('id')],
+ view: [descriptor_type]
+ }
+ }
+
+ graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
+
+
+ // graph_editor initialization
+ graph_editor.init({
+ width: $('#graph_ed_container').width(),
+ height: $('#graph_ed_container').height(),
+ gui_properties: example_gui_properties,
+ filter_base: params,
+ 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);
+ graph_editor.addListener("filters_changed", changeFilter);
+ graph_editor.addListener("edit_descriptor", openEditorEvent);
+
+});
+
+
+function initDropOnGraph() {
+
+ var dropZone = document.getElementById('graph_ed_container');
+ dropZone.ondrop = function(e) {
+ var group = graph_editor.getCurrentGroup()
+ e.preventDefault();
+ var nodetype = e.dataTransfer.getData("text/plain");
+ if (nodetype) {
+ var type_name = graph_editor.getTypeProperty()[nodetype].name;
+ if (nodetype == 'vnf') {
+ new dreamer.GraphRequests().getUnusedVnf(group, function(vnfs) {
+ $('#div_chose_id').hide();
+ $('#div_chose_vnf').show();
+ $('#input_choose_node_id').val(nodetype + "_" + generateUID());
+ $('#selection_chooser_vnf').empty();
+ $('#selection_chooser_vnf').append('<option >None</option>');
+ $('#modal_chooser_title_add_node').text('Add ' + type_name);
+ for (var i in vnfs) {
+ $('#selection_chooser_vnf').append('<option id="' + vnfs[i] + '">' + vnfs[i] + '</option>');
+ }
+ $('#save_choose_node_id').off('click').on('click', function() {
+ var choice = $("#selection_chooser_vnf option:selected").text();
+ var name = $('#input_choose_node_id').val();
+ if (choice == 'None') {
+ var node_information = {
+ 'id': name,
+ 'info': {
+ 'type': nodetype,
+ 'group': [group]
+ },
+ 'x': e.layerX,
+ 'y': e.layerY
+ }
+ graph_editor.addNode(node_information, function() {
+ $('#modal_choose_node_id').modal('hide');
+ }, function(error){
+ showAlert(error)
+ });
+ } else {
+ var node_information = {
+ 'existing_element': true,
+ 'id': choice,
+ 'info': {
+ 'type': nodetype,
+ 'group': [group]
+ },
+ 'x': e.layerX,
+ 'y': e.layerY
+ }
+ graph_editor.addNode(node_information, function() {
+ $('#modal_choose_node_id').modal('hide');
+ }, function(error){
+ showAlert(error)
+ });
+ }
+
+ });
+
+ $('#modal_choose_node_id').modal('show');
+ });
+
+ } else {
+ $('#div_chose_id').show();
+ $('#div_chose_vnf').hide();
+ $('#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]
+ },
+ 'x': e.layerX,
+ 'y': e.layerY
+ }
+ 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);
+
+}
+
+function changeFilter(e, c) {
+ var type_property = graph_editor.getTypeProperty();
+ if (c.link.view == 'ns') {
+ $("#title_header").text("NS Graph Editor")
+ $("#vnffg_options").prop("disabled", false);
+ graph_editor.refreshGraphParameters();
+ } else {
+
+ $("#title_header").text("VNF Graph Editor");
+ $("#vnffg_box").hide();
+ $("#vnffg_options").prop("disabled", true);
+ }
+
+ new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert);
+ updateBredCrumb(c);
+}
+
+var filters = function(e, params) {
+ graph_editor.handleFiltersParams(params);
+ $('#' + e).nextAll('li').remove();
+}
+
+function updateBredCrumb(filter_parameters){
+ var newLi = $("<li id=" + JSON.stringify(graph_editor.getCurrentGroup()) + "><a href='javascript:filters(" + JSON.stringify(graph_editor.getCurrentGroup()) + "," + JSON.stringify(filter_parameters) + ")'>" + graph_editor.getCurrentGroup() + "</a></li>");
+ $('#breadcrumb').append(newLi);
+}
+
+
+function openEditor(project_id) {
+ window.location.href = '/projects/' + project_id + '/descriptors/' + graph_editor.getCurrentView() + 'd/' + graph_editor.getCurrentGroup();
+}
+
+
+function showChooserModal(title, chooses, callback) {
+ console.log('showchooser')
+ $('#selection_chooser').empty();
+ for (var i in chooses) {
+ $('#selection_chooser').append('<option id="' + chooses[i].id + '">' + chooses[i].id + '</option>');
+ }
+ $('#modal_chooser_title').text(title)
+ var self = this;
+ $('#save_chooser').off('click').on('click', function() {
+ var choice = $("#selection_chooser option:selected").text();
+ callback(choice);
+
+ });
+ $('#modal_create_link_chooser').modal('show');
+
+}
+
+function refreshGraphParameters(e, graphParameters) {
+
+ var self = $(this);
+ if (graphParameters == null) return;
+ var vnffgIds = graphParameters.vnffgIds;
+ if (vnffgIds == null) return;
+
+ $("#selection_vnffg").empty();
+ $("#selection_vnffg").append('<option value="Global">Global</option>')
+ for (var i in vnffgIds) {
+ var vnffgId = vnffgIds[i]
+ var child = $('<option value="' + vnffgId + '">' + vnffgId + '</option>');
+ $("#selection_vnffg").append(child)
+ }
+}
+
+function changeVnffg(e) {
+ var vnffgId = e.value;
+ selected_vnffgId = vnffgId;
+ show_all_change();
+}
+
+function newVnffg() {
+ var group = graph_editor.getCurrentGroup()
+ $('#div_chose_id').show();
+ $('#div_chose_vnf').hide();
+ $('#input_choose_node_id').val("vnffg_" + generateUID());
+ $('#modal_chooser_title_add_node').text('Add VNFFG');
+ $('#save_choose_node_id').off('click').on('click', function() {
+ var name = $('#input_choose_node_id').val();
+ var node_information = {
+ 'element_id': name,
+ 'element_type': "vnffg",
+ 'group_id': group,
+ }
+ console.log(JSON.stringify(node_information))
+ new dreamer.GraphRequests().addVnffg(node_information, function(result) {
+
+ $('#modal_choose_node_id').modal('hide');
+ graph_editor.d3_graph.graph_parameters.vnffgIds.push(node_information.id)
+ refreshGraphParameters(null, graph_editor.d3_graph.graph_parameters)
+ });
+
+
+
+ });
+ $('#modal_choose_node_id').modal('show');
+}
+
+function show_all_change(e) {
+ if (!selected_vnffgId) return;
+ var vnffgId = selected_vnffgId;
+ if (e) show_all = e.checked;
+ if (show_all) {
+ handleVnffgParameter("Global", "invisible");
+ handleVnffgParameter(vnffgId, "matted");
+ } else {
+ handleVnffgParameter("Global", "matted");
+ handleVnffgParameter(vnffgId, "invisible");
+ }
+}
+
+function clickVnffg() {
+ if ($("#vnffg_box").is(':visible'))
+ $("#vnffg_box").hide();
+ else
+ $("#vnffg_box").show();
+
+}
+
+function handleVnffgParameter(vnffgId, class_name) {
+
+ if (vnffgId != "Global") {
+ selected_vnffgId = vnffgId;
+ graph_editor.setNodeClass(class_name, function(d) {
+ var result = false;
+ if (d.info.group.indexOf(vnffgId) < 0) {
+ result = true;
+ }
+ console.log(result);
+ return result;
+ });
+
+ graph_editor.setLinkClass(class_name, function(d) {
+ var result = false;
+ if (d.group.indexOf(vnffgId) < 0) {
+ result = true;
+ }
+ console.log(result);
+ return result;
+ });
+
+ } else {
+ selected_vnffgId = null;
+ graph_editor.setNodeClass(class_name, function(d) {
+ var result = false;
+ return result;
+ });
+
+ graph_editor.setLinkClass(class_name, function(d) {
+ var result = false;
+ return result;
+ });
+ }
+}
+
+function buildBehaviorsOnEvents(){
+ var contextmenuNodesAction = [
+ {
+ title: 'Show graph',
+ 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 behavioursOnEvents = {
+ 'nodes': contextmenuNodesAction,
+
+ };
+
+ return behavioursOnEvents;
+}
\ No newline at end of file