improved ns topology 02/6802/1
authorlombardofr <lombardo@everyup.it>
Tue, 30 Oct 2018 21:16:25 +0000 (22:16 +0100)
committerlombardofr <lombardo@everyup.it>
Tue, 30 Oct 2018 21:16:25 +0000 (22:16 +0100)
Change-Id: I6eb1ee664cf52a86b8b723b52c5c6490998a0e63
Signed-off-by: lombardofr <lombardo@everyup.it>
24 files changed:
descriptorhandler/template/composer.html
descriptorhandler/template/descriptorlist.html
descriptorhandler/views.py
lib/osm/osm_rdcl_parser.py
projecthandler/template/project/osm/osm_project_descriptors.html
projecthandler/template/project/osm/project_graph.html [deleted file]
projecthandler/template/project/osm/topology_toolbar.html [deleted file]
projecthandler/template/project/project_graph_base.html [deleted file]
static/TopologyComposer/css/composer.css
static/TopologyComposer/js/graph_editor.js
static/TopologyComposer/js/model_graph_editor.js
static/src/descriptorhandler/composer.js [new file with mode: 0644]
static/src/instancehandler/instance_create.js
static/src/instancehandler/instance_topology_view.js
static/src/osm_gui_properties.js
static/src/projecthandler/composer.js
static/src/projecthandler/descriptorslist.js
static/src/projecthandler/new_project.js [deleted file]
static/src/projecthandler/onboard_package.js
static/src/projecthandler/osm/controller.js [deleted file]
static/src/projecthandler/osm/gui_properties.js [deleted file]
static/src/projecthandler/osm/project_graph.js [deleted file]
static/src/sdnctrlhandler/sdn_list.js
static/src/userhandler/user_list.js

index cad68fa..2de4ae8 100644 (file)
 {% block content_body %}
     {{ block.super }}
     {% csrf_token %}
+
     <div class="container-fluid">
         <div id="main" class="row">
             <div id="leftside">
+                <div class="section">
+                    <span style="font-weight: 500;">Select Element</span>
+                </div>
+                <div id="palette">
+                    <div class="node" draggable="true">
+                        <div class="icon" style="background-color: #cf1c24" ></div>
+                        <div class="name">VDU</div>
+                    </div>
+                    <div class="node" draggable="true">
+                        <div class="icon" style="background-color: #f8a800" ></div>
+                        <div class="name">VL</div>
+                    </div>
+                    <div class="node" draggable="true">
+                        <div class="icon" style="background-color: #e3bfad" ></div>
+                        <div class="name">intCP</div>
+                    </div>
+                    <div class="node" draggable="true">
+                        <div class="icon" style="background-color: #c6b63f" ></div>
+                        <div class="name">extCp</div>
+                    </div>
+
+                </div>
 
             </div>
             <div id="graph_editor_container" class="col">
@@ -61,6 +84,7 @@
     </script>
     <!-- d3.js -->
     <script src="/static/bower_components/d3/d3.js"></script>
+    <script src="/static/bower_components/moment/moment.js"></script>
 
     <!-- TopologyComposer D3 -->
     <script src="/static/TopologyComposer/js/event.js"></script>
@@ -71,6 +95,7 @@
 
 
     <script src="/static/src/osm_gui_properties.js"></script>
+    <script src="/static/src/descriptorhandler/composer.js"></script>
 {#    <script src="/static/src/instancehandler/instance_topology_view.js"></script>#}
 
 {% endblock %}
index 9d86624..df7bda2 100644 (file)
@@ -7,9 +7,12 @@
             <h3 class="box-title">
             </h3>
             <div class="box-tools">
-                <div class="btn-group">
-
-                </div>
+                {% comment %}<div class="btn-group">
+                    <button type="button" class="btn btn-default" data-container="body"
+                    data-toggle="tooltip" data-placement="top" title="Composer"
+                    onclick="">
+                <i class="fa fa-paint-brush"></i> <span> Composer</span></button>
+                </div>{% endcomment %}
             </div>
         </div>
         <div class="box-body">
index 8b902af..c80af8a 100644 (file)
@@ -25,6 +25,7 @@ from django.shortcuts import render, redirect
 
 from lib.util import Util
 from lib.osm.osmclient.clientv2 import Client
+from lib.osm.osm_rdcl_parser import OsmParser
 import authosm.utils as osmutils
 
 logging.basicConfig(level=logging.DEBUG)
@@ -263,6 +264,30 @@ def download_pkg(request, descriptor_id, descriptor_type):
 def open_composer(request):
     user = osmutils.get_user(request)
     project_id = user.project_id
+    descriptor_id = request.GET.get('id')
+    descriptor_type = request.GET.get('type')
+    client = Client()
+    if descriptor_id:
+        try:
+            if descriptor_type == 'nsd':
+                descriptor_result = client.nsd_get(user.get_token(), descriptor_id)
+            elif descriptor_type == 'vnfd':
+                descriptor_result = client.vnfd_get(user.get_token(), descriptor_id)
+
+        except Exception as e:
+            descriptor_result = {'error': True, 'data': str(e)}
+
+        if isinstance(descriptor_result, dict) and 'error' in descriptor_result and descriptor_result['error']:
+            return render(request, 'error.html')
+
+        test = OsmParser()
+        # print nsr_object
+        if descriptor_type == 'nsd':
+            result = test.nsd_to_graph(descriptor_result)
+        elif descriptor_type == 'vnfd':
+            result = test.vnfd_to_graph(descriptor_result)
+        return __response_handler(request, result,'composer.html')
+
     result = {'project_id': project_id,
               'vertices': [
                   {"info": {"type": "vnf", "property": {"custom_label": ""},
index 0ba27aa..009c0e7 100644 (file)
@@ -50,8 +50,9 @@ class RdclGraph(object):
         }
 
         edge_obj.update(optional)
-        if edge_obj not in graph_object['edges']:
-            graph_object['edges'].append(edge_obj)
+        #if edge_obj not in graph_object['edges']:
+        #    graph_object['edges'].append(edge_obj)
+        graph_object['edges'].append(edge_obj)
 
     def add_node(self, id, type, group, positions, graph_object, optional={}):
         if id is None:
@@ -261,6 +262,203 @@ class OsmParser(RdclGraph):
 
         return graph
 
+    def vnfd_to_graph(self, vnfd_catalog):
+        graph = {'vertices': [], 'edges': [], 'model': {
+            "layer": {
+                "vnfd": {
+                    "nodes": {
+                        "vdu": {},
+                        "cp": {},
+                        "int_cp": {},
+                        "vnf_vl": {}
+
+                    },
+                    "allowed_edges": {
+                        "vdu": {
+                            "destination": {
+                                "cp": {
+                                    "direct_edge": False,
+                                },
+                                "int_cp": {
+                                    "direct_edge": False,
+                                },
+                                "vnf_vl": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "cp": {
+                            "destination": {
+                                "vdu": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "int_cp": {
+                            "destination": {
+                                "vdu": {
+                                    "direct_edge": False,
+                                },
+                                "vnf_vl": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "vnf_vl": {
+                            "destination": {
+                                "vdu": {
+                                    "direct_edge": False
+                                }
+                            }
+                        }
+                    }
+                },
+                "name": "OSM",
+                "version": 1,
+                "description": "osm"
+            }
+        }, 'graph_parameters': {'view': {'vnfd': {}}}}
+        if 'vnfd-catalog' in vnfd_catalog:
+            vnfd = vnfd_catalog['vnfd-catalog']['vnfd'][0]
+        elif 'vnfd:vnfd-catalog' in vnfd_catalog:
+            vnfd = vnfd_catalog['vnfd:vnfd-catalog']['vnfd'][0]
+        else:
+            return graph
+        if 'connection-point' in vnfd:
+            for extCp in vnfd['connection-point']:
+                self.add_node(extCp['name'], 'cp', vnfd['id'], None, graph,
+                              {'property': {'custom_label': extCp['name']}, 'osm': extCp})
+        if 'vdu' in vnfd:
+            for vdu in vnfd['vdu']:
+                self.add_node(vdu['id'], 'vdu', vnfd['id'], None, graph,
+                              {'property': {'custom_label': vdu['id']}, 'osm': vdu})
+                if 'internal-connection-point' in vdu:
+                    for intCp in vdu['internal-connection-point']:
+                        self.add_node(intCp['id'], 'int_cp', vnfd['id'], None, graph,
+                                      {'property': {'custom_label': intCp['id']}, 'osm': intCp})
+                if 'interface' in vdu:
+                    for interface in vdu['interface']:
+                        if interface['type'] == "EXTERNAL":
+                            self.add_link(vdu['id'], interface['external-connection-point-ref'], 'vnfd', vnfd['id'], graph)
+                        elif interface['type'] == "INTERNAL":
+                            self.add_link(vdu['id'], interface['internal-connection-point-ref'], 'vnfd', vnfd['id'], graph, {'short': True})
+        if 'internal-vld' in vnfd:
+            for intVl in vnfd['internal-vld']:
+                self.add_node(intVl['id'], 'vnf_vl', intVl['id'], None, graph,
+                              {'property': {'custom_label': intVl['id']}, 'osm': intVl})
+                for intCp in intVl['internal-connection-point']:
+                    self.add_link(intVl['id'], intCp['id-ref'], 'vnfd', vnfd['id'], graph)
+
+        return graph
+
+    def nsd_to_graph(self, nsd_catalog):
+        graph = {'vertices': [], 'edges': [], 'model': {
+            "layer": {
+                "nsd": {
+                    "nodes": {
+                        "vnfd": {},
+                        "cp": {},
+                        "ns_vl": {}
+                    },
+                    "allowed_edges": {
+                        "cp": {
+                            "destination": {
+                                "vnfd": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "vnfd":{
+                            "destination": {
+                                "ns_vl": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "ns_vl": {
+                            "destination": {
+                                "vnfd": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        }
+                    }
+                },
+                "vnfd": {
+                    "nodes": {
+                        "vdu": {},
+                        "cp": {},
+                        "int_cp": {},
+                        "vnf_vl": {}
+                    },
+                    "allowed_edges": {
+                        "vdu": {
+                            "destination": {
+                                "cp": {
+                                    "direct_edge": False,
+                                },
+                                "int_cp": {
+                                    "direct_edge": False,
+                                },
+                                "vnf_vl": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "cp": {
+                            "destination": {
+                                "vdu": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "int_cp": {
+                            "destination": {
+                                "vdu": {
+                                    "direct_edge": False,
+                                },
+                                "vnf_vl": {
+                                    "direct_edge": False,
+                                }
+                            }
+                        },
+                        "vnf_vl": {
+                            "destination": {
+                                "vdu": {
+                                    "direct_edge": False
+                                }
+                            }
+                        }
+                    }
+                },
+                "name": "OSM",
+                "version": 1,
+                "description": "osm"
+            }
+        }, 'graph_parameters': {'view': {'vnfd': {}}}}
+        if 'nsd-catalog' in nsd_catalog:
+            nsd = nsd_catalog['nsd-catalog']['nsd'][0]
+        elif 'nsd:nsd-catalog' in nsd_catalog:
+            nsd = nsd_catalog['nsd:nsd-catalog']['nsd'][0]
+        else:
+            return graph
+        if 'constituent-vnfd' in nsd:
+            for vnfd in nsd['constituent-vnfd']:
+                costinuent_id = vnfd['vnfd-id-ref']+":"+vnfd['member-vnf-index']
+                self.add_node(costinuent_id, 'vnf', None, None, graph,
+                              {'property': {'custom_label': costinuent_id}, 'osm': vnfd})
+
+        if 'vld' in nsd:
+            for vld in nsd['vld']:
+                self.add_node(vld['id'], 'ns_vl', None, None, graph,
+                              {'property': {'custom_label': vld['id']}, 'osm': vld})
+                if 'vnfd-connection-point-ref' in vld:
+                    for cp_ref in vld['vnfd-connection-point-ref']:
+                        vnfd_id = cp_ref['vnfd-id-ref'] + ':' + str(cp_ref['member-vnf-index-ref'])
+                        self.add_link(vld['id'], vnfd_id, 'nsd', None, graph)
+
+        return graph
+
 
 if __name__ == '__main__':
     parser = OsmParser()
index 8c1ceb2..bfbc355 100644 (file)
                            '    <i class="fa fa-clone"></i></button>\n' +
                            '<button type="button" class="btn btn-default" data-container="body"\n' +
                            '        data-toggle="tooltip" data-placement="top" title="Show Graph"\n' +
-                           '        onclick="location.href=\'/projects/graph?type='+descriptor_type+'&id='+row["_id"] +'\'"\n' +
-                           '        disabled><i class="fa fa-sitemap fa-fw"></i></button>\n' +
+                           '  onclick="location.href=\'/projects/descriptors/composer?type='+descriptor_type+'&id='+row["_id"] +'\'"\n' +
+                           ' disabled       ><i class="fa fa-sitemap fa-fw"></i></button>\n' +
                            '<button type="button" class="btn btn-default" data-container="body"\n' +
                            '        data-toggle="tooltip" data-placement="top" title="Download package"\n' +
                            '        onclick="location.href=\'/projects/descriptors/'+descriptor_type+'/'+ row["_id"] +'/action/download_pkg\'">\n' +
diff --git a/projecthandler/template/project/osm/project_graph.html b/projecthandler/template/project/osm/project_graph.html
deleted file mode 100644 (file)
index 3d94118..0000000
+++ /dev/null
@@ -1,60 +0,0 @@
-{% extends "project_graph_base.html" %}
-
-{% load staticfiles %}
-{% block head_base %}
-    {% with skin_css="AdminLTE/dist/css/skins/skin-purple.min.css"%}
-        {{ block.super }}
-    {% endwith %}
-{% endblock %}
-
-{% block body %}
-    {% with skin="purple"%}
-        {{ block.super }}
-    {% endwith %}
-{% endblock %}
-{% block logo_sidebar %}
-    {% with logo_mini="assets/img/osm_small_logo.png" logo="assets/img/OSM-logo.png"%}
-        {{ block.super }}
-    {% endwith %}
-{% endblock %}
-
-{% block title_header_big %}
-    {{ block.super }}
-{% endblock %}
-
-{% block left_sidebar %}
-    {% include 'osm/osm_project_left_sidebar.html' %}
-{% endblock %}
-
-{% block topology_toolbar %}
-    {{ block.super }}
-        {% include 'osm/topology_toolbar.html' %}
-{% endblock %}
-
-{% block content_body %}
-       {{ block.super }}
- {% csrf_token %}
-
-
-{% include 'modal/create_link_chooser.html' %}
-{% include 'modal/choose_node_id.html' %}
-{% endblock %}
-
-{% block resource_block %}
-       {{ block.super }}
-
-    <script src="{% static "topology3D/js/model_graph_editor.js" %}"></script>
-    <!-- osm -->
-    <script src="{% static "src/projecthandler/osm/gui_properties.js" %}"></script>
-    <script src="{% static "src/projecthandler/osm/project_graph.js" %}"></script>
-    <script src="{% static "src/projecthandler/osm/controller.js" %}"></script>
-
-<script>
-    graph_editor.project_id = '{{project_id}}'
-
-</script>
-{% endblock %}
-
-{% block footer %}
-    {% include "footer.html"  %}
-{% endblock %}
\ No newline at end of file
diff --git a/projecthandler/template/project/osm/topology_toolbar.html b/projecthandler/template/project/osm/topology_toolbar.html
deleted file mode 100644 (file)
index 9a1f528..0000000
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends 'topology_toolbar.html' %}
-
-{% block topology_toolbar_buttons %}
-    {{ block.super }}
-
-{% endblock %}
diff --git a/projecthandler/template/project/project_graph_base.html b/projecthandler/template/project/project_graph_base.html
deleted file mode 100644 (file)
index 5c43e22..0000000
+++ /dev/null
@@ -1,80 +0,0 @@
-{% extends "base.html" %}
-{% load get %}
-{% load staticfiles %}
-
-
-
-{% block head_block %}
-    {{ block.super }}
-    <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
-    <link rel="stylesheet" href="/static/css/lwuitable.css">
-
-    <!-- Topology3D core CSS -->
-    <link rel="stylesheet" href="/static/topology3D/css/graph_editor_d3js.css">
-    <link rel="stylesheet" href="/static/topology3D/css/d3-context-menu.css">
-
-{% endblock %}
-{% block title_header_big %}
-    {{ block.super }}
-{% endblock %}
-{% block left_sidebar %}
-    {% include 'osm/osm_project_left_sidebar.html' %}
-{% endblock %}
-
-
-{% block breadcrumb_body %}
-    {{ block.super }}
-    <li><a href="#"><i class="fa fa-sitemap"></i> Composer</a></li>
-{% endblock %}
-
-{% block content_body %}
-    {{ block.super }}
-    {% csrf_token %}
-    {% include 'modal/create_link_chooser.html' %}
-    {% include 'modal/choose_node_id.html' %}
-    <div class="row" >
-        <div class="col-md-12">
-            {% block topology_toolbar %}
-                {{ block.super }}
-                 {% include 'topology_toolbar.html' %}
-            {% endblock %}
-            <div id="graph_ed_container" style="width: 100%; height:100%; background-color: white; border: 2px #3c8dbc solid;">
-
-            </div>
-        </div>
-    </div>
-
-
-
-{% endblock %}
-
-{% block resource_block %}
-    {{ block.super }}
-    <script>
-        var topology_data = {};//{{topology_data|safe }};
-    </script>
-    <!-- Utility JS -->
-    <script src="/static/bower_components/select2/dist/js/select2.js"></script>
-
-    <!-- d3.js -->
-    <script src="https://d3js.org/d3.v4.js"></script>
-<!--
-    <script src="/static/bower_components/d3/d3.js"></script>-->
-
-    <!-- topology3D -->
-    <script src="/static/topology3D/js/d3-context-menu.js"></script>
-    <script src="/static/topology3D/js/event.js"></script>
-    <script src="/static/topology3D/js/graph_editor.js"></script>
-    <script src="/static/topology3D/js/graph_request.js"></script>
-    <script src="/static/topology3D/js/model_graph_editor.js"></script>
-
-
-    <script src="/static/src/osm_gui_properties.js"></script>
-    <script src="/static/src/projecthandler/composer.js"></script>
-    <script src="/static/src/projecthandler/osm/controller.js"></script>
-
-{% endblock %}
-
-{% block footer %}
-    {% include "footer.html" %}
-{% endblock %}
index 818620e..e7ecc59 100644 (file)
@@ -91,8 +91,8 @@
 #graph_editor_container {
     position: relative;
     min-height: 100vh;
-    border-right: 1px solid #AFAFAF;
-    border-left: 1px solid #AFAFAF;
+
+
     flex: 1 1 auto;
     display: flex;
     align-items: center;
 }
 
 #leftside {
+    border-right: 1px solid #AFAFAF;
     flex: 0 0 auto;
-    max-width: 500px;
-    min-width: 300px;
+    max-width: 300px;
+    min-width: 150px;
     padding: 20px 30px;
     display: flex;
     flex-direction: column;
 }
 
+#palette > .node {
+    margin-top: 10px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    cursor: move;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#palette > .node:first-child {
+    margin-top: 0;
+}
+
+#palette > .node > .icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 1px;
+    margin-right: 10px;
+}
+
+[draggable=true] {
+    -khtml-user-drag: element;
+    -webkit-user-drag: element;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+}
+#graph_svg {
+    max-width: 100%;
+    width: 100%;
+}
 #side {
+    border-left: 1px solid #AFAFAF;
     flex: 0 0 auto;
     max-width: 500px;
     min-width: 300px;
index 4cc8663..ff4a21f 100755 (executable)
@@ -86,15 +86,17 @@ TCD3.GraphEditor = (function () {
 
         this.type_property_link = {
             "unrecognized": {
-                "color": "lightgray",
+                "color": "lightgray"
             },
         };
 
         this.force = d3.forceSimulation()
             .force("charge", d3.forceManyBody())
-            .force("collide", d3.forceCollide().radius(80))
+            .force("collide", d3.forceCollide().radius(40))
            // .force("link", d3.forceLink().distance(80).iterations(1).id(function (d) {
-            .force("link", d3.forceLink().distance(100).id(function (d) {
+            .force("link", d3.forceLink().distance(function(d){
+                return d.short ? 1 : 100;
+            }).id(function (d) {
                 return d.id;
             }))
             .force("center", d3.forceCenter(this.width / 2, this.height / 2));
@@ -108,8 +110,8 @@ TCD3.GraphEditor = (function () {
         this.svg = d3.select("#graph_editor_container").append("svg")
             .attr("id", "graph_svg")
             .attr("preserveAspectRatio", "xMinYMid")
-            .attr("width", this.width)
-            .attr("height", this.height);
+            .attr("width", '100%')
+            .attr("height", '100%');
 
         //End Arrow style
         this.defs = this.svg.append("svg:defs");
@@ -181,7 +183,7 @@ TCD3.GraphEditor = (function () {
             self.height = self.container.height();
             chart.attr("width", self.container.width());
             chart.attr("height", self.container.height());
-        }).trigger("resize");
+        });
 
     }
 
index 2f5f6c8..6cee85d 100644 (file)
@@ -118,10 +118,9 @@ TCD3.ModelGraphEditor = (function () {
      * @returns {boolean}
      */
     ModelGraphEditor.prototype.updateData = function (args) {
-        console.log("updateData")
         this.d3_graph.nodes = args.graph_data.vertices;
         this.d3_graph.links = args.graph_data.edges;
-        this.d3_graph.graph_parameters = args.graph_parameters;
+        this.d3_graph.graph_parameters = args.graph_data.graph_parameters;
         this.model = args.model;
         this.refreshGraphParameters(this.d3_graph.graph_parameters);
         this.refresh();
diff --git a/static/src/descriptorhandler/composer.js b/static/src/descriptorhandler/composer.js
new file mode 100644 (file)
index 0000000..a21c14f
--- /dev/null
@@ -0,0 +1,266 @@
+/*
+   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 TCD3.ModelGraphEditor();
+
+var type_view = {
+    "nsd": ["vnf", "ns_vl"],
+    "vnfd": ["vdu", "cp", "vnf_vl", "int_cp"]
+};
+
+var params = {
+    node: {
+        type: type_view[getUrlParameter('type')],
+        group: []
+    },
+    link: {
+        group: [],
+        view: [getUrlParameter('type')]
+    }
+};
+
+$(document).ready(function () {
+
+    graph_editor.addListener("filters_changed", changeFilter);
+    graph_editor.addListener("node:selected", refreshElementInfo);
+    graph_editor.addListener("node:deselected", refreshElementInfo);
+
+    // graph_editor initialization
+    graph_editor.init({
+        width: $('#graph_editor_container').width(),
+        height: $('#graph_editor_container').height(),
+
+        data_url: window.location.href,
+        //desc_id: getUrlParameter('id'),
+        gui_properties: osm_gui_properties,
+        edit_mode: false,
+        behaviorsOnEvents: {
+            viewBased: false,
+            behaviors: buildBehaviorsOnEvents()
+        }
+    });
+    graph_editor.handleFiltersParams(params);
+
+});
+
+
+
+function handleForce(el) {
+    graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
+}
+
+function changeFilter(e, c) {
+    if (c && c.link && c.link.view[0]) {
+        updateLegend(c.link.view[0]);
+    }
+    //layerDetails(graph_editor.getCurrentFilters())
+}
+
+function resetFilters() {
+    graph_editor.handleFiltersParams(params);
+}
+
+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
+        }];
+
+    return {
+        'nodes': contextmenuNodesAction
+    };
+
+}
+
+function refreshElementInfo(event, element) {
+    if (event.type === 'node:selected') {
+        switch (element.info.type) {
+            case 'vnfd':
+                vnfDetails(element.info.osm);
+                break;
+            case 'vdu':
+                vduDetails(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 = '';
+    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']);
+        }
+        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]);
+        }
+    }
+
+    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 += '<div class="node">' +
+                '<div class="icon" style="background-color:' + nodes_properties[node].color +'"></div>' +
+                '<div class="name">' +nodes_properties[node].name + '</div></div>';
+        }
+    }
+
+    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'
+};
+
+function vnfDetails(vnfr) {
+    var side = $('#side');
+    var vnfr_template = getMainSection('VNF');
+
+    vnfr_template += getChildrenTable(vnfr);
+    side.empty();
+    side.append(vnfr_template)
+}
+
+function vduDetails(vdur) {
+    var side = $('#side');
+    var vdur_template = getMainSectionWithStatus('VDU', vdur['status'] === 'ACTIVE');
+    vdur_template += getChildrenTable(vdur);
+
+    if (vdur['interface'] && vdur['interface'].length > 0) {
+        vdur_template += getSubSection('Interfaces:');
+        vdur_template += '<table class="children">';
+
+        for (var i = 0; i < vdur['interface'].length; ++i) {
+            var interface = vdur['interface'][i];
+            var interface_template = '<tr><td>' + interface['name'] + '</td>'
+                + '<td>IP:' + interface['ip-address'] + '</td>'
+                + '<td>MAC:' + interface['mac-address'] + '</td>';
+            vdur_template += interface_template;
+        }
+        vdur_template += '</table>';
+    }
+
+    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 '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
+}
+
+function getSubSection(title) {
+    return '<div class="section"><span>' + title + '</span></div>';
+}
+
+function getMainSectionWithStatus(title, status) {
+    var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
+    if (status)
+        template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
+    else
+        template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
+    template += '</div>';
+    return template;
+}
+
+function getChildrenTable(data) {
+    var template = '<table class="children">';
+
+    for (var key in data) {
+        if (typeof data[key] === 'string') {
+            var key_map = (map[key]) ? map[key] : key;
+            template += '<tr><td>' + key_map + '</td><td><input name="'+key+'" class="form-control input-sm" type="text"  value="' + data[key] + '"></td></tr>';
+        }
+    }
+    template += '</table>';
+    return template;
+}
\ No newline at end of file
index 0bf1dbc..47cba12 100644 (file)
@@ -14,7 +14,6 @@
    limitations under the License.
 */
 
-
 function openModalCreateNS(args) {
     // load vim account list
     select2_groups = $('#vimAccountId').select2({
@@ -63,7 +62,7 @@ function openModalCreateNS(args) {
         }
     });
 
-    if(args.descriptor_id){
+    if (args.descriptor_id) {
         // Set the value, creating a new option if necessary
         if ($('#nsdId').find("option[value='" + args.descriptor_id + "']").length) {
             $('#nsdId').val(args.descriptor_id).trigger('change');
index 1193b18..99bb986 100644 (file)
@@ -1,6 +1,44 @@
+/*
+   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 TCD3.ModelGraphEditor();
 
+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 = {
     "nsr": ["vnfr", "ns_vl"],
     "vnfr": ["vdur", "cp", "vnf_vl"]
@@ -41,7 +79,6 @@ $(document).ready(function () {
 });
 
 
-
 function handleForce(el) {
     graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
 }
@@ -119,6 +156,7 @@ function refreshElementInfo(event, element) {
     }
 }
 
+
 function layerDetails(filters) {
     var side = $('#side');
     var graph_parameters = graph_editor.getGraphParams();
@@ -126,12 +164,35 @@ function layerDetails(filters) {
     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']);
+            layer_template+= '<table class="children">';
+            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();
+                    }
+                    layer_template += '<tr><td>' + layer_map['nsr'][key] + '</td><td>' + field_value + '</td></tr>';
+                }
+            }
+            layer_template += '</table>';
+            //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 += getChildrenTable(graph_parameters['view']['vnfr'][vnfr_id]);
+
+            layer_template+= '<table class="children">';
+            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 += '<tr><td>' + layer_map['vnfr'][key] + '</td><td>' + field_value + '</td></tr>';
+                }
+            }
+            layer_template += '</table>';
         }
     }
 
@@ -159,10 +220,10 @@ function updateLegend(view) {
 }
 
 var map = {
-    'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'Vim Id',
+    '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'
+    'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id', 'vim-id': 'VIM id'
 };
 
 function vnfrDetails(vnfr) {
index 45abaf7..0241b34 100644 (file)
@@ -11,7 +11,7 @@ var osm_gui_properties = {
             "vnf": {
                 //"image": "vnf-100.png",
                 "shape": "square",
-                "color": "#54A698",
+                "color": "#605ca8",
                 "size": 35,
                 "width": 40,
                 "height": 20,
@@ -20,8 +20,8 @@ var osm_gui_properties = {
             "vdu": {
                 "shape": "square",
                 //"color": "#50A7CC",
-                "color": "#54A698",
-                "size": 30,
+                "color": "#cf1c24",
+                "size": 40,
                 "width": 40,
                 "height": 20,
                 "name": "VDU"
@@ -30,15 +30,15 @@ var osm_gui_properties = {
                 //"image": "cp-80.png",
                  "shape": "square",
                 "color": "#c6b63f",
-                "size": 40,
+                "size": 30,
                 "name": "CP"
             },
             "int_cp": {
                 //"image": "cp-80.png",
                  "shape": "square",
                 "color": "#e3bfad",
-                "size": 40,
-                "name": "CP"
+                "size": 15,
+                "name": "intCP"
             },
             "ns_vl": {
                 "shape": "triangle",
index 8e1017a..6b8eae6 100644 (file)
@@ -1,3 +1,19 @@
+/*
+   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;
index bf31480..5060041 100644 (file)
@@ -1,3 +1,19 @@
+/*
+   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.
+*/
+
 function deletePackage(descriptor_type, package_id, package_name) {
 
     bootbox.confirm("Are you sure want to delete " + package_name + "?", function (result) {
diff --git a/static/src/projecthandler/new_project.js b/static/src/projecthandler/new_project.js
deleted file mode 100644 (file)
index 9ca4c9e..0000000
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- *      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
index c622cad..d18be5b 100644 (file)
@@ -1,3 +1,19 @@
+/*
+   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.
+*/
+
 var dropZone = document.getElementById('drop-zone');
 dropZone.ondrop = function (e) {
     e.preventDefault();
diff --git a/static/src/projecthandler/osm/controller.js b/static/src/projecthandler/osm/controller.js
deleted file mode 100644 (file)
index e39e332..0000000
+++ /dev/null
@@ -1,107 +0,0 @@
-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
deleted file mode 100644 (file)
index 1af3ef4..0000000
+++ /dev/null
@@ -1,128 +0,0 @@
-//***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
deleted file mode 100644 (file)
index 5ee3522..0000000
+++ /dev/null
@@ -1,354 +0,0 @@
-//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() {
-    window.location.href = '/projects/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
index 5542825..c410b16 100644 (file)
@@ -1,3 +1,19 @@
+/*
+   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.
+*/
+
 function deleteSDN(sdn_uuid, name) {
     bootbox.confirm("Are you sure want to delete " + name +"?", function (result) {
         if (result) {
index b485e5b..615f118 100644 (file)
@@ -1,3 +1,19 @@
+/*
+   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.
+*/
+
 function openModalCreateUser(args) {
 
     select2_groups = $('#projects').select2({