Init Resource Modelling Tool

Tool for resource planning of VNFs.

Signed-off-by: Parth Yadav<parthyadav3105@gmail.com>
Change-Id: I4729d665707162132b16765b3ba2d7a9d914d339

16 files changed, 1414 insertions, 0 deletions

diff --git a/sdv/docker/sdvmodel/Dockerfile b/sdv/docker/sdvmodel/Dockerfile
new file mode 100644
index 0000000..a71575e
--- /dev/null
+++ b/sdv/docker/sdvmodel/Dockerfile
@@ -0,0 +1,15 @@
+FROM python:3.8-slim-buster
+
+MAINTAINER Parth Yadav <parthyadav3105@gmail.com>
+
+WORKDIR /server/
+
+COPY resource-estimation/requirements.txt /server/requirements.txt
+RUN pip install -r requirements.txt
+
+COPY website/ /website/
+COPY resource-estimation/ /server/
+
+RUN rm requirements.txt
+
+CMD [ "python", "/server/server" ]
diff --git a/sdv/docker/sdvmodel/resource-estimation/requirements.txt b/sdv/docker/sdvmodel/resource-estimation/requirements.txt
new file mode 100644
index 0000000..8fd63d9
--- /dev/null
+++ b/sdv/docker/sdvmodel/resource-estimation/requirements.txt
@@ -0,0 +1,2 @@
+tornado == 6.0.4
+Jinja2 == 2.11.2
diff --git a/sdv/docker/sdvmodel/resource-estimation/server b/sdv/docker/sdvmodel/resource-estimation/server
new file mode 100755
index 0000000..bae9781
--- /dev/null
+++ b/sdv/docker/sdvmodel/resource-estimation/server
@@ -0,0 +1,340 @@
+#!/usr/bin/env python3
+
+# Copyright 2020 Spirent Communications, University Of Delhi.
+#
+# 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 "AS IS" 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.
+
+
+"""
+Server
+"""
+
+
+import logging
+import os
+import sys
+import copy
+import json
+from tornado.web import Application
+from tornado.ioloop import IOLoop
+import tornado.concurrent
+import tornado.httpserver
+import tornado.ioloop
+import tornado.options
+import tornado.web
+import tornado.log
+import jinja2
+
+# SOF: 11124247: Massey101 and Corey Klein
+class StreamToLogger():
+    """
+    file-like stream object that redirects writes to a logger instance.
+    """
+    def __init__(self, logger, log_level=logging.INFO):
+        self.logger = logger
+        self.log_level = log_level
+        self.linebuf = ''
+
+    def write(self, buf):
+        """
+        write logs
+        """
+        temp_linebuf = self.linebuf + buf
+        self.linebuf = ''
+        for line in temp_linebuf.splitlines(True):
+            # From the io.TextIOWrapper docs:
+            #   On output, if newline is None, any '\n' characters written
+            #   are translated to the system default line separator.
+            # By default sys.stdout.write() expects '\n' newlines and then
+            # translates them so this is still cross platform.
+            if line[-1] == '\n':
+                self.logger.log(self.log_level, line.rstrip())
+            else:
+                self.linebuf += line
+
+    def flush(self):
+        """
+        flush the buffer
+        """
+        if self.linebuf != '':
+            self.logger.log(self.log_level, self.linebuf.rstrip())
+        self.linebuf = ''
+
+
+
+class Server():
+    """
+    Server
+    """
+    # pylint: disable=too-many-instance-attributes
+
+    def __init__(self, hw_profile):
+        self.vcpus = hw_profile['vcpus']
+        self.numas = hw_profile['numas']
+        self.numa_vcpu_map = []
+        self.sriov_support = False
+        self.hosted_vnfs = []
+        for count in range(int(self.numas)):
+            self.numa_vcpu_map.append(hw_profile['numa'
+                                                 +str(count)
+                                                 +'_cpus_4vnfs'])
+        self.create_numa_sriov_map(hw_profile['nics'])
+        self.zone = 'default'
+        self.cpu_isolation = hw_profile['cpu_isol_set']
+        self.available_cpu_map = self.numa_vcpu_map
+
+    def create_numa_sriov_map(self, nics):
+        """
+        Search for all sriov and nonsriov numas
+        """
+        self.sriov_numas = []
+        self.nonsriov_numas = []
+        for nic in nics:
+            if nic['type'] == 'sriov':
+                self.sriov_support = True
+                if nic['numa'] not in self.sriov_numas:
+                    self.sriov_numas.append(int(nic['numa']))
+            else:
+                if nic['numa'] not in self.sriov_numas:
+                    self.nonsriov_numas.append(int(nic['numa']))
+
+    def dump_profile(self):
+        """
+        Print Server Profile
+        """
+        print("The number of vCPUs: %s" %self.vcpus)
+        print("Number of NUMA nodes on this server: %s" %self.numas)
+        print("vCPUs available for the application in each NUMA: %s" %self.numa_vcpu_map)
+        print("SRIOV Support? %s" %self.sriov_support)
+        print("The Zone this server belongs to: %s" %self.zone)
+        print("vCPUs Isolated: %s" %self.cpu_isolation)
+        print("Numa to which SRIOV Nics belogs to: %s" %str(self.sriov_numas))
+
+class Deployment():
+    """
+    Model deployment
+    """
+    def __init__(self, rack_count, hw_profile):
+        self.server_list = []
+        self.total_servers = 0
+        self.hw_profile = hw_profile
+        self.rack_count = rack_count
+        self.server_zones = {}
+
+    def create_deployment(self, vnf_profiles):
+        """
+        Understand zones.
+        """
+        zones = []
+        for vnf in vnf_profiles:
+            if vnf['availability_zone'] not in zones:
+                zones.append(vnf['availability_zone'])
+        # print(zones)
+        for zone in zones:
+            for vnf in vnf_profiles:
+                if zone == vnf['availability_zone']:
+                    for count in range(int(vnf['num_of_vnfs'])):
+                        self.deploy(vnf, count)
+            self.server_zones[zone] = copy.deepcopy(self.server_list)
+            self.total_servers += len(self.server_list)
+            self.server_list.clear()
+
+    def deploy(self, vnf, suffix):
+        """
+        Understand deployment
+        """
+        # pylint: disable=too-many-branches
+
+        deploy = False
+        # If no servers, just do the deployment there and apped it.
+        if len(self.server_list) == 0:
+            server = Server(self.hw_profile)
+            for cnt in  range(len(server.available_cpu_map)):
+                if int(server.available_cpu_map[cnt]) >= int(vnf['vcpus']):
+                    if not ((vnf['sriov_support'] == 'yes' and cnt not in server.sriov_numas) or\
+                        (vnf['sriov_support'] == 'no' and cnt not in server.nonsriov_numas)):
+                        server.available_cpu_map[cnt] = str(
+                            int(server.available_cpu_map[cnt]) - int(vnf['vcpus']))
+                        deploy = True
+                        server.hosted_vnfs.append({'vnf':vnf['profile_name'] +\
+                                                   str(suffix), 'numa': cnt})
+                        self.server_list.append(server)
+                        return
+            if not deploy:
+                print("The existing hardware profile is not Suitable")
+                sys.exit()
+        # Servers already exist. Check if any eserver can accommodate the vnf:
+        for server in self.server_list:
+            # Check if SRIOV support is required for VNF and server supports
+            # Check if cpus are available in any of the numas
+            for cnt in  range(len(server.available_cpu_map)):
+                if int(server.available_cpu_map[cnt]) >= int(vnf['vcpus']):
+                    if not ((vnf['sriov_support'] == 'yes' and cnt not in server.sriov_numas) or\
+                        (vnf['sriov_support'] == 'no' and cnt not in server.nonsriov_numas)):
+                        server.available_cpu_map[cnt] = str(int(server.available_cpu_map[cnt])
+                                                            - int(vnf['vcpus']))
+                        deploy = True
+                        server.hosted_vnfs.append({'vnf':vnf['profile_name'] +\
+                                                   str(suffix), 'numa': cnt})
+                        return
+        # We need to create new server, do deployment there and append it the list
+        if not deploy:
+            server = Server(self.hw_profile)
+            for cnt in  range(len(server.available_cpu_map)):
+                if int(server.available_cpu_map[cnt]) >= int(vnf['vcpus']):
+                    if not ((vnf['sriov_support'] == 'yes' and cnt not in server.sriov_numas) or\
+                        (vnf['sriov_support'] == 'no' and cnt not in server.nonsriov_numas)):
+                        server.available_cpu_map[cnt] = str(
+                            int(server.available_cpu_map[cnt]) - int(vnf['vcpus']))
+                        deploy = True
+                        server.hosted_vnfs.append({'vnf':vnf['profile_name'] +\
+                                                  str(suffix), 'numa': cnt})
+                        self.server_list.append(server)
+                        return
+            if not deploy:
+                print("The existing hardware profile is not Suitable")
+                sys.exit()
+
+    def display_deployment(self):
+        """
+        Print Deployment Report
+        """
+        print("Number of servers used %d" % self.total_servers)
+        print("------------------------------------------------")
+        count = 0
+        for zone, server_list in self.server_zones.items():
+            print("SERVERS IN AVAILABILITY ZONE: %s" %(zone))
+            print("------------------------------------------------")
+            for server in server_list:
+                print("Server ID: " + str(count))
+                for vnf in server.hosted_vnfs:
+                    print("VNF: " + vnf['vnf'] + "  NUMA: " + str(vnf['numa']))
+                count = count + 1
+                print("------------------------------------------------")
+
+    def get_deployment(self):
+        """
+        Returns servers and zones
+        """
+        return self.total_servers, self.server_zones
+
+
+# pylint: disable=W0223
+
+class Estimate(tornado.web.RequestHandler):
+    """
+    Resource estimator
+    """
+    # def set_default_headers(self):
+    #     self.set_header('Content-Type', 'application/json')
+
+    def post(self):
+        """
+        Server Resource Modelling Report
+        """
+        model = {}
+        config = self.get_argument('config', None)
+        data = json.loads(config)
+
+        vnf_profiles = (data['vnf_profiles'])
+        hw_profile = (data['hardware_profile'])
+        model['vnf_profiles'] = vnf_profiles
+        print("--------- Resource Modelling Report ------------")
+        print("------------------------------------------------")
+        print("The VNFs:")
+        for profile in vnf_profiles:
+            print(profile['profile_name'])
+        print("------------------------------------------------")
+        print("The Compute-Server Profile:")
+        server = Server(hw_profile)
+        server.dump_profile()
+        model['server'] = hw_profile
+        print("------------------------------------------------")
+        deployment = Deployment(2, hw_profile)
+        deployment.create_deployment(vnf_profiles)
+        deployment.display_deployment()
+        count, placement = deployment.get_deployment()
+        model['deployment_count'] = count
+        model['deployment'] = placement
+        loader = jinja2.FileSystemLoader(searchpath="template/")
+        jenv = jinja2.Environment(loader=loader)
+        template = jenv.get_template('report.html')
+        htmlout = template.render(model=model)
+
+        self.finish(htmlout)
+
+
+class HomeHandler(tornado.web.RequestHandler):
+    """
+    Handler for '/' endpoint
+    """
+    def get(self):
+        """
+        Server Home Page
+        """
+        self.render('/website/index.html')
+
+
+
+def server_main_block():
+    """
+    Main Function
+    """
+
+    app = Application([('/validate', Estimate),
+                       ('/', HomeHandler),
+                       ('/(.*)', tornado.web.StaticFileHandler, {'path' : '/website'})])
+
+    # Cli Config
+    tornado.options.define("port", default=80, help="run on the given port", type=int)
+    tornado.options.parse_command_line()
+
+
+    # Server Config
+    http_server = tornado.httpserver.HTTPServer(app)
+    http_server.listen(tornado.options.options.port)
+
+    est_file = "/tmp/estimate.txt"
+    if os.path.exists(est_file):
+        os.remove(est_file)
+
+    # Logging
+    logging.basicConfig(
+        level=logging.DEBUG,
+        format='%(message)s',
+        filename=est_file,
+        filemode='a'
+    )
+
+    stdout_logger = logging.getLogger('STDOUT')
+    sys.stdout = StreamToLogger(stdout_logger, logging.INFO)
+
+    stderr_logger = logging.getLogger('STDERR')
+    sys.stderr = StreamToLogger(stderr_logger, logging.ERROR)
+
+    tornado.log.enable_pretty_logging()
+
+    # Tornado's event loop handles it from here
+    print("# Servering.... \n [Ctrl + C] to quit")
+
+    try:
+        tornado.ioloop.IOLoop.instance().start()
+    except KeyboardInterrupt:
+        tornado.ioloop.IOLoop.instance().stop()
+
+    # start
+    IOLoop.instance().start()
+
+
+if __name__ == "__main__":
+    server_main_block()
diff --git a/sdv/docker/sdvmodel/resource-estimation/template/report.html b/sdv/docker/sdvmodel/resource-estimation/template/report.html
new file mode 100644
index 0000000..b53ea9f
--- /dev/null
+++ b/sdv/docker/sdvmodel/resource-estimation/template/report.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Resource Modelling Report</title>
+
+  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1" name="viewport">
+  
+  <link rel="stylesheet" type="text/css" href="style/report.css">
+  <link rel="stylesheet" type="text/css" href="style/index.css">
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div class="report">
+    
+    <h1>Resource Modelling Report</h1>
+    <br>
+    
+    <h3>The VNFs Considered for Modelling:</h3>
+        
+    <div class="holder">
+        {% for profile in model['vnf_profiles'] %}
+            <div class="vnf">
+              {{ profile['profile_name'] }}  
+              <img src="/assets/vnf.svg">
+            </div>
+        {% endfor %}
+    </div>
+    <hr>
+    
+    <h3>The Compute-Node Server Profile:</h3>
+
+        The number of vCPUs: {{  model['server']['vcpus'] }}
+    <br>Number of NUMA nodes on this server: {{ model['server']['numas']}}
+    <br>vCPUs available for the application in each NUMA: 
+    <br>SRIOV Support?: {{model['sriov_support']}} 
+    <br>vCPUs Isolated: {{ model['server']['cpu_isol_set']  }} 
+    <br>Number of Servers Used: {{ model['deployment_count'] }}
+    <br>
+
+    <hr>
+        
+    {% for zone, server_list in model['deployment'].items() %}
+        <h3>Servers in Availability zone: {{ zone }}</h3>
+        
+        {% for server in server_list %}
+            <div class="tab">Server ID: {{ loop.index }}</div>
+            <div class="holder server">
+                {%  for vnf in server.hosted_vnfs %}
+                    <div class="vnf">
+                        {{ vnf['vnf'] }} (numa:{{ vnf['numa'] }})
+                        <img src="/assets/vnf.svg">
+                    </div>
+                {% endfor %}
+            </div>
+          <br>
+        {% endfor %}
+
+    <hr>
+    {% endfor %}
+    
+  </div>
+
+<br>
+<button onclick="window.location.href='/'">Go to Home</button>
+
+
+
+
+
+
+</body>
+</html>
+
diff --git a/sdv/docker/sdvmodel/website/actions.js b/sdv/docker/sdvmodel/website/actions.js
new file mode 100644
index 0000000..aeb0e91
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/actions.js
@@ -0,0 +1,39 @@
+/* Copyright 2020 University Of Delhi.
+*
+* 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 "AS IS" 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.
+*/
+
+
+// expand-arrow button
+function toggleClass(element, classname){
+  element.classList.toggle(classname)
+}
+
+// Add button
+function duplicate(button){
+  if (button.previousElementSibling.hasAttribute('name') && 
+      button.previousElementSibling.getAttribute('name') != null)
+  {
+      newdiv = button.previousElementSibling.cloneNode(true);
+      if (!newdiv.lastElementChild.classList.contains('del-button')){
+        del ='<div class="del-button" onclick="remove(this)"></div>'
+        newdiv.innerHTML += del;
+      }
+      button.parentNode.insertBefore(newdiv, button)
+  }
+}
+
+// Delete Button
+function remove(button){
+  button.parentNode.parentNode.removeChild(button.parentNode);
+}
\ No newline at end of file
diff --git a/sdv/docker/sdvmodel/website/assets/plus-circle-solid.svg b/sdv/docker/sdvmodel/website/assets/plus-circle-solid.svg
new file mode 100644
index 0000000..39a0f8e
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/assets/plus-circle-solid.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (6e3e5246a0, 2020-05-07)"
+   sodipodi:docname="plus-circle-solid.svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 512 512"
+   role="img"
+   class="svg-inline--fa fa-plus-circle fa-w-16"
+   data-icon="plus-circle"
+   data-prefix="fas"
+   focusable="false"
+   aria-hidden="true">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg4"
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="0"
+     inkscape:cy="256"
+     inkscape:cx="114.5679"
+     inkscape:zoom="1.265625"
+     showgrid="false"
+     id="namedview6"
+     inkscape:window-height="794"
+     inkscape:window-width="1600"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <path
+     style="fill:#61b9ff;fill-opacity:1"
+     id="path2"
+     d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+     fill="currentColor" />
+</svg>
diff --git a/sdv/docker/sdvmodel/website/assets/server.svg b/sdv/docker/sdvmodel/website/assets/server.svg
new file mode 100644
index 0000000..547cdaf
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/assets/server.svg
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="36.512501mm"
+   width="65.167557mm"
+   inkscape:version="1.0 (1.0+r73+1)"
+   sodipodi:docname="server.svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 246.30241 137.99999"
+   role="img"
+   class="svg-inline--fa fa-server fa-w-16"
+   data-icon="server"
+   data-prefix="fas"
+   focusable="false"
+   aria-hidden="true">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     units="mm"
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     inkscape:current-layer="svg4"
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="0"
+     inkscape:cy="80.582597"
+     inkscape:cx="196.50384"
+     inkscape:zoom="1.3340661"
+     showgrid="false"
+     id="namedview6"
+     inkscape:window-height="658"
+     inkscape:window-width="1366"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     inkscape:document-rotation="0" />
+  <path
+     d="m 9.563242,4 h 7.490814 c 0.295503,0 0.635382,0.327 0.635382,18 v 92 c 0,17.673 -0.339879,18 -0.635382,18 H 9.563242 C 9.267739,132 8.927861,131.673 8.927861,114 V 22 c 0,-17.673 0.339878,-18 0.635381,-18 z"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     id="path2428"
+     sodipodi:nodetypes="sssssssss" />
+  <path
+     sodipodi:nodetypes="sssssssss"
+     id="path2428-3"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     d="m 29.563242,4 h 7.490814 c 0.295503,0 0.635382,0.327 0.635382,18 v 92 c 0,17.673 -0.339879,18 -0.635382,18 h -7.490814 c -0.295502,0 -0.635381,-0.327 -0.635381,-18 V 22 c 0,-17.673 0.339879,-18 0.635381,-18 z" />
+  <path
+     sodipodi:nodetypes="sssssssss"
+     id="path2428-5"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     d="m 49.563242,4 h 7.490814 c 0.295503,0 0.635382,0.327 0.635382,18 v 92 c 0,17.673 -0.339879,18 -0.635382,18 h -7.490814 c -0.295503,0 -0.635381,-0.327 -0.635381,-18 V 22 c 0,-17.673 0.339878,-18 0.635381,-18 z" />
+  <path
+     d="m 69.563242,4 h 7.490814 c 0.295503,0 0.635382,0.327 0.635382,18 v 92 c 0,17.673 -0.339879,18 -0.635382,18 h -7.490814 c -0.295502,0 -0.635381,-0.327 -0.635381,-18 V 22 c 0,-17.673 0.339879,-18 0.635381,-18 z"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     id="path2428-3-6"
+     sodipodi:nodetypes="sssssssss" />
+  <path
+     sodipodi:nodetypes="sssssssss"
+     id="path2428-2"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     d="m 89.563242,4 h 7.49081 c 0.29551,0 0.63539,0.327 0.63539,18 v 92 c 0,17.673 -0.33988,18 -0.63539,18 h -7.49081 c -0.2955,0 -0.63538,-0.327 -0.63538,-18 V 22 c 0,-17.673 0.33988,-18 0.63538,-18 z" />
+  <path
+     d="m 109.56324,4 h 7.49081 c 0.29551,0 0.63539,0.327 0.63539,18 v 92 c 0,17.673 -0.33988,18 -0.63539,18 h -7.49081 c -0.2955,0 -0.63538,-0.327 -0.63538,-18 V 22 c 0,-17.673 0.33988,-18 0.63538,-18 z"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     id="path2428-3-9"
+     sodipodi:nodetypes="sssssssss" />
+  <path
+     sodipodi:nodetypes="sssssssss"
+     id="path2428-6"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     d="m 129.56324,4 h 7.49081 c 0.2955,0 0.63538,0.327 0.63538,18 v 92 c 0,17.673 -0.33988,18 -0.63538,18 h -7.49081 c -0.2955,0 -0.63538,-0.327 -0.63538,-18 V 22 c 0,-17.673 0.33988,-18 0.63538,-18 z" />
+  <path
+     d="m 149.56324,4 h 7.49081 c 0.2955,0 0.63538,0.327 0.63538,18 v 92 c 0,17.673 -0.33988,18 -0.63538,18 h -7.49081 c -0.2955,0 -0.63539,-0.327 -0.63539,-18 V 22 c 0,-17.673 0.33988,-18 0.63539,-18 z"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     id="path2428-3-0"
+     sodipodi:nodetypes="sssssssss" />
+  <path
+     d="m 169.56324,4 h 7.49081 c 0.2955,0 0.63538,0.327 0.63538,18 v 92 c 0,17.673 -0.33988,18 -0.63538,18 h -7.49081 c -0.29551,0 -0.63539,-0.327 -0.63539,-18 V 22 c 0,-17.673 0.33988,-18 0.63539,-18 z"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     id="path2428-5-6"
+     sodipodi:nodetypes="sssssssss" />
+  <path
+     sodipodi:nodetypes="sssssssss"
+     id="path2428-3-6-2"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     d="m 189.56324,4 h 7.49081 c 0.2955,0 0.63538,0.327 0.63538,18 v 92 c 0,17.673 -0.33988,18 -0.63538,18 h -7.49081 c -0.29551,0 -0.63539,-0.327 -0.63539,-18 V 22 c 0,-17.673 0.33988,-18 0.63539,-18 z" />
+  <path
+     d="m 209.56324,4 h 7.49081 c 0.29551,0 0.63539,0.327 0.63539,18 v 92 c 0,17.673 -0.33988,18 -0.63539,18 h -7.49081 c -0.2955,0 -0.63538,-0.327 -0.63538,-18 V 22 c 0,-17.673 0.33988,-18 0.63538,-18 z"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     id="path2428-2-6"
+     sodipodi:nodetypes="sssssssss" />
+  <path
+     sodipodi:nodetypes="sssssssss"
+     id="path2428-3-9-1"
+     style="opacity:0.13180452;fill:#787878;fill-opacity:1;stroke-width:0.135569"
+     d="m 229.56323,4 h 7.49081 c 0.29551,0 0.63539,0.327 0.63539,18 v 92 c 0,17.673 -0.33988,18 -0.63539,18 h -7.49081 c -0.2955,0 -0.63538,-0.327 -0.63538,-18 V 22 c 0,-17.673 0.33988,-18 0.63538,-18 z" />
+</svg>
diff --git a/sdv/docker/sdvmodel/website/assets/trash-alt-regular.svg b/sdv/docker/sdvmodel/website/assets/trash-alt-regular.svg
new file mode 100644
index 0000000..fbce77b
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/assets/trash-alt-regular.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (6e3e5246a0, 2020-05-07)"
+   sodipodi:docname="trash-alt-regular.svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 448 512"
+   role="img"
+   class="svg-inline--fa fa-trash-alt fa-w-14"
+   data-icon="trash-alt"
+   data-prefix="far"
+   focusable="false"
+   aria-hidden="true">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg4"
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="0"
+     inkscape:cy="192.79012"
+     inkscape:cx="224"
+     inkscape:zoom="1.265625"
+     showgrid="false"
+     id="namedview6"
+     inkscape:window-height="794"
+     inkscape:window-width="1600"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <path
+     style="fill:#ff6161;fill-opacity:1"
+     id="path2"
+     d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
+     fill="currentColor" />
+</svg>
diff --git a/sdv/docker/sdvmodel/website/assets/vnf.svg b/sdv/docker/sdvmodel/website/assets/vnf.svg
new file mode 100644
index 0000000..7bd67e4
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/assets/vnf.svg
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="113.15604"
+   width="140.09048"
+   inkscape:version="1.0 (b51213c273, 2020-08-10)"
+   sodipodi:docname="vnf.svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 140.09048 113.15604"
+   role="img"
+   class="svg-inline--fa fa-server fa-w-16"
+   data-icon="server"
+   data-prefix="fas"
+   focusable="false"
+   aria-hidden="true">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     inkscape:current-layer="svg4"
+     inkscape:window-maximized="1"
+     inkscape:window-y="27"
+     inkscape:window-x="0"
+     inkscape:cy="165.58202"
+     inkscape:cx="181.58465"
+     inkscape:zoom="1.7552979"
+     showgrid="false"
+     id="namedview6"
+     inkscape:window-height="794"
+     inkscape:window-width="1600"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     inkscape:document-rotation="0" />
+  <rect
+     style="opacity:1;fill:none;stroke:none"
+     id="rect887"
+     width="140.09048"
+     height="113.15604"
+     x="0"
+     y="0" />
+  <ellipse
+     ry="22.535322"
+     rx="24.521544"
+     cy="56.892029"
+     cx="43.126831"
+     id="path832-6-7"
+     style="opacity:1;fill:#3dbbf5;stroke-width:1.19657;fill-opacity:1" />
+  <ellipse
+     style="opacity:1;fill:#3dbbf5;stroke-width:1.19657;fill-opacity:1"
+     id="path832-6-7-5"
+     cx="97.109772"
+     cy="56.811798"
+     rx="24.521544"
+     ry="22.535322" />
+</svg>
diff --git a/sdv/docker/sdvmodel/website/controller.js b/sdv/docker/sdvmodel/website/controller.js
new file mode 100644
index 0000000..5b71352
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/controller.js
@@ -0,0 +1,34 @@
+/* Copyright 2020 University Of Delhi.
+*
+* 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 "AS IS" 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 getModel(){
+
+  config = {}
+
+  // Get current values from form
+  for(category of document.getElementsByClassName('resmodData'))
+      config = mergeDeep(config, objectifyDiv(category));
+
+  requestModel(config);
+}
+
+function requestModel(config){
+
+  form = document.getElementById('validate');
+  form.elements['config'].value = JSON.stringify(config);
+  form.submit();
+}
+
+
diff --git a/sdv/docker/sdvmodel/website/index.html b/sdv/docker/sdvmodel/website/index.html
new file mode 100644
index 0000000..b08481a
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <title>Resource Modelling</title>
+	
+   <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+   <meta content="utf-8" http-equiv="encoding">
+
+   <link rel="stylesheet" href="style/index.css">
+   <link rel="stylesheet" href="style/array.css">
+
+   <script src="mergeDeep.js"></script>
+   <script src="readFromHTML.js"></script>
+   <script src="actions.js"></script>
+   <script src="controller.js"></script>
+
+
+
+   <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> 
+</head>
+
+
+
+<body>
+
+<div id="site"><form>
+
+
+	<fieldset class='resmodData'>
+		<legend class="collapse-arrow" onclick="toggleClass(this,'expand-arrow')">
+		    VNFs
+	    </legend>
+	    <div>
+
+	        <label>VNFs:</label><br>
+	        <div class="arr" name="vnf_profiles">
+
+	        	<label>VNF Name:</label>
+                <input type="text" name="profile_name" value="userplane_app"><br>
+	        	<label>VCPUs:</label>
+                <input type="text" name="vcpus" value="36"><br>
+	        	<label>NUMAs:</label>
+                <input type="text" name="numas" value="1"><br>
+	        	<label>CPUs in NUMA0:</label>
+                <input type="text" name="cpus_in_numa0" value="36"><br>
+	        	<label>CPUs in NUMA1:</label>
+                <input type="text" name="cpus_in_numa1" value="0"><br>
+	        	<label>RAM Size</label>
+                <input type="text" name="ram_size" value="64"><br>
+	        	<label>Interface Count</label>
+                <input type="text" name="interfaces" value="6"><br>
+	        	<label>SRIOV Support</label>
+                <input type="text" name="sriov_support" value="yes"><br>
+	        	<label>VIRTIO Support</label>
+                <input type="text" name="virtio_support" value="yes"><br>
+	        	<label>Availability Zone</label>
+                <input type="text" name="availability_zone" value="dataplane_zone"><br>
+	        	<label>CPU Policy</label>
+                <input type="text" name="cpu_policy" value="sw==decicated"><br>
+	        	<label>CPU Pinned</label>
+                <input type="text" name="cpu_pinned" value="yes"><br>
+	        	<label>Number of VNFs</label>
+                <input type="text" name="num_of_vnfs" value="9"><br>
+
+            </div><div class="add-button" onclick="duplicate(this)"></div>
+	    	
+	    </div>
+	</fieldset>
+
+
+	<fieldset class='resmodData'>
+		<legend class="collapse-arrow" onclick="toggleClass(this,'expand-arrow')">
+		    Compute Hardware
+		</legend>
+        <div>
+	        <label>Compute Node Hardware Info</label><br>
+	        <div name="hardware_profile">
+	        	<label> Total CPUs:</label>
+	            <input type="text" name="vcpus" value="80"><br>
+	        	
+                <label> NUMAs:</label>
+	            <input type="text" name="numas" value="2"><br>
+
+	            <label> #of Numa0 CPUS for VNFs:</label>
+	            <input type="text" name="numa0_cpus_4vnfs" value="36"><br>
+
+	            <label> #of Numa1 CPUS for VNFs:</label>
+	            <input type="text" name="numa1_cpus_4vnfs" value="36"><br>
+
+	            <label>RAM Size:</label>
+	            <input type="text" name="ram_size" value="384 "><br>
+	            <label>CPU Isolation Set</label>
+	            <input type="text" name="cpu_isol_set" value="0-44"><br>
+
+                <label>NICs:</label><br>
+	            <div class="arr" name="nics">
+	        	    <div>
+	        		    <label>NIC Name:</label>
+	        		    <input type="text" name="name" value="ens785f0"><br>
+	        		    <label>NIC Type:</label>
+	        		    <input type="text" name="type" value="sriov">
+	        		    <label>NIC Speed:</label>
+	        		    <input type="text" name="speed" value="25"><br>
+	        		    <label>NIC NUMA:</label>
+	        		    <input type="text" name="numa" value="0"><br>
+	        	    </div>
+                </div>
+	            <div class="add-button" onclick="duplicate(this)"></div>
+	        </div>
+        </div>
+	</fieldset>
+
+</form>
+
+
+<form id="validate" action="/validate" method="post">
+	<input  type="hidden" name="config">
+</form>
+<button id="save-changes" type="button" onclick="getModel()">Show Modelling</button>
+ 
+
+</div>
+</body>
+</html>
diff --git a/sdv/docker/sdvmodel/website/mergeDeep.js b/sdv/docker/sdvmodel/website/mergeDeep.js
new file mode 100644
index 0000000..970983a
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/mergeDeep.js
@@ -0,0 +1,46 @@
+/* Copyright 2020 University Of Delhi.
+*
+* 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 "AS IS" 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.
+*/
+
+
+/**
+* Performs a deep merge of objects and returns new object. Does not modify
+* objects (immutable) and merges arrays via concatenation.
+*
+* @param {...object} objects - Objects to merge
+* @returns {object} New object with merged key/values
+*/
+function mergeDeep(...objects) {
+  const isObject = obj => obj && typeof obj === 'object';
+  
+  return objects.reduce((prev, obj) => {
+    Object.keys(obj).forEach(key => {
+      const pVal = prev[key];
+      const oVal = obj[key];
+      
+      if (Array.isArray(pVal) && Array.isArray(oVal)) {
+        prev[key] = pVal.concat(...oVal);
+      }
+      else if (isObject(pVal) && isObject(oVal)) {
+        prev[key] = mergeDeep(pVal, oVal);
+      }
+      else {
+        prev[key] = oVal;
+      }
+    });
+    
+    return prev;
+  }, {});
+}
+
diff --git a/sdv/docker/sdvmodel/website/readFromHTML.js b/sdv/docker/sdvmodel/website/readFromHTML.js
new file mode 100644
index 0000000..f14e089
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/readFromHTML.js
@@ -0,0 +1,72 @@
+/* Copyright 2020 University Of Delhi.
+*
+* 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 "AS IS" 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.
+*/
+
+
+/**
+* Reads HTML contents into javascript object
+* 
+*
+* @param {element} element to read, can be input or div element
+* @returns {object} New object with values read
+*/
+function objectifyDiv(element){
+  var obj = {};
+  var el = element.childNodes;
+  for(var i in el){
+
+    if(el[i] instanceof HTMLInputElement && el[i].hasAttribute('name')) {
+
+      if(el[i].type == 'text')
+        obj = mergeDeep(obj, objectify(el[i].name, el[i].value));
+    
+    }
+    if(el[i] instanceof HTMLSelectElement && el[i].hasAttribute('name')){
+        obj = mergeDeep(obj, objectify(el[i].name, el[i].value));          
+    }
+    if(el[i] instanceof HTMLDivElement){
+
+      if(el[i].classList.contains('arr')){
+        var key = el[i].getAttribute('name');
+        var value = objectifyDiv(el[i]);
+        if(obj[key] == undefined)
+          obj[key] =[];
+        obj[key].push(value[key]);
+      }
+      else
+        obj = mergeDeep(obj, objectifyDiv(el[i]));
+      
+    }
+  }
+  
+  if(element.hasAttribute('name')){
+    var newobj = {};
+    newobj[element.getAttribute('name')] = obj;
+    return newobj;
+  }
+  return obj;
+}
+
+
+
+function objectify(key, value){
+  var obj = {};
+  var keys = key.split('.');
+  for(var i = keys.length-1; i >= 0; i--){
+    obj[keys[i]] = value;
+    value = obj;
+    obj = {};
+  }
+  return value;
+}
diff --git a/sdv/docker/sdvmodel/website/style/array.css b/sdv/docker/sdvmodel/website/style/array.css
new file mode 100644
index 0000000..45a53fc
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/style/array.css
@@ -0,0 +1,55 @@
+
+@keyframes popup {
+  0%{
+    transform: scale(0.5);
+  }
+  90%{
+    transform: scale(1.1);
+  }
+  100%{
+    transform: scale(1.0);
+  }
+}
+
+.arr{
+  border-radius: 6px;
+  border-style: dashed;
+  border-color: #c9c9c9;
+  border-width: 2px;
+  display: inline-block;
+  padding-right: 3em;
+  margin-right: 15px;
+  margin-bottom: 5px;
+  position: relative;
+  animation: popup 0.2s ease;
+}
+
+
+.add-button{
+  background-image: url("../assets/plus-circle-solid.svg");
+  opacity: 0.7;
+  width: 2em;
+  height: 2em;
+  display: inline-block;
+  left: 0;  
+}
+.add-button:hover{
+  opacity: 1
+}
+
+
+
+.del-button{
+  background-image: url("../assets/trash-alt-regular.svg");
+  background-repeat: no-repeat;
+  opacity: 0.7;
+  width: 2em;
+  height: 2em;
+  position: absolute;
+  right: 0.5em;
+  bottom: 0.5em;
+}
+.del-button:hover{
+  opacity: 1
+}
+
diff --git a/sdv/docker/sdvmodel/website/style/index.css b/sdv/docker/sdvmodel/website/style/index.css
new file mode 100644
index 0000000..882c31a
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/style/index.css
@@ -0,0 +1,198 @@
+
+html,body
+{
+  padding: 0px;
+  margin: 0px;
+  font-family: 'Ubuntu', sans-serif;
+  color: #333333;
+  background-color: white;
+  scroll-behavior: smooth;
+}
+
+
+#site{
+  margin: 8%;
+  margin-top: 0px;
+  padding-bottom: 90px;
+}
+
+.add-new{
+  border: solid #c9c9c9;
+  border-width: 1px;
+  color: #f5f5f5;
+  opacity: 0.8;
+  font-size: 1.1em;
+  padding: 15px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  margin: 30px;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  background-color: #1fad4e;
+}
+.add-new:hover{
+  opacity: 1;
+  text-shadow: #f5f5f5 0px 0px 1px;
+}
+
+.add-new img{
+  width: 1em;
+  height: 1em;
+  margin-left: 5px;
+  vertical-align: middle;
+  filter: brightness(0) invert(1);
+  box-shadow: white 0px 0px 1px;
+}
+
+fieldset {
+  border-radius: 6px;
+  border-color: #c9c9c9;
+  border-width: 1px;
+  margin-top: 45px;
+  margin-bottom: 45px;
+  background-color: #f5f5f5;
+}
+
+
+
+fieldset legend{
+  font-weight: bold;
+  padding: 1em;
+  text-shadow: #bbb 0px 0px 2px;
+}
+
+.collapse-arrow::after{
+  content: "▲";
+  margin: 1em;
+  color: #61b9ff;
+  text-shadow: #61b9ff 0px 0px 4px;
+  cursor: pointer;
+  font-size: 1.2em;
+}
+
+.expand-arrow::after {
+  content: "▼";
+}
+
+@keyframes expand {
+  0%{
+    transform: scale(0.5);
+  }
+  90%{
+    transform: scale(1.1);
+  }
+  100%{
+    transform: scale(1.0);
+  }
+}
+
+/* when expand-arrow hide all siblings  */
+.expand-arrow ~ *{
+  display:none;
+}
+
+
+
+
+fieldset label{
+  padding: 1em;
+  padding-left: 2em;
+  text-shadow: #f0f0f0 0px 0px 2px;
+  width: 230px;
+  display: inline-block;
+}
+
+
+fieldset input{
+  border: solid #c9c9c9;
+  border-radius: 6px;
+  border-width: 1px;
+  padding: 5px;
+  padding-left: 15px;
+  color: #333333;
+  width: 150px;
+}
+
+fieldset input:hover{
+  background-color: #e8e8e8;
+}
+
+button{
+  border: solid #c9c9c9;
+  border-width: 1px;
+  height: 45px;
+  width: 170px;
+  color: #f5f5f5;
+  opacity: 0.8;
+  font-size: 1.1em;
+  margin: 30px;
+  cursor: pointer;
+}
+button:hover{
+  opacity: 1;
+  text-shadow: #f5f5f5 0px 0px 1px;
+}
+
+#save-changes{
+  background-color: #50affa;
+  float: right;
+}
+
+#save-changes::after{
+  content: "";
+  clear: both;
+  display: inline;
+}
+
+#delete{
+  background-color: #fa3c3c;
+}
+
+#reload{
+  background-color: #1fad4e;
+}
+
+button img{
+  width: 1em;
+  height: 1em;
+  margin-right: 10px;
+  margin-left: 10px;
+  filter: brightness(0) invert(1);
+}
+
+
+
+
+#save-changes.changed{
+  background-color: #deae00;
+
+}
+
+
+select{
+  background-color: white;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: solid #c9c9c9;
+  border-radius: 6px;
+  border-width: 1px;
+  padding: 3px;
+  padding-left: 15px;
+  color: #333333;
+  min-width: 150px;
+  cursor: pointer;
+}
+
+select:hover{
+  background-color: #e8e8e8;
+}
+
+
+.select::after{
+  content: "▼";
+  color: transparent;
+  text-shadow: #61b9ff -1.5em 0px 0px;
+}
diff --git a/sdv/docker/sdvmodel/website/style/report.css b/sdv/docker/sdvmodel/website/style/report.css
new file mode 100644
index 0000000..bc259fb
--- /dev/null
+++ b/sdv/docker/sdvmodel/website/style/report.css
@@ -0,0 +1,90 @@
+
+
+.report{
+	text-align: left;
+    margin: 8%;
+    margin-top: 3%;
+	padding: 50px;
+
+    background-color: #f5f5f5;
+	border-radius: 6px;
+    border-color: #c9c9c9;
+    border-width: 1px;
+    border-style: solid;
+    text-shadow: #CCC 0px 0px 2px;
+    word-spacing: 0.1em;
+    line-height: 1.5em;
+}
+
+hr{
+	width: 60%;
+}
+
+
+button{
+  background-color: #50affa;
+  float: right;
+}
+
+
+.holder{
+	display: flex;
+	flex-wrap: wrap;
+	width: 98%;
+}
+
+
+.tab{
+	background-color: #f0f0f0;
+	border-radius: 8px;
+	border-bottom-right-radius: 0px;
+	border-bottom-left-radius: 0px;
+    border-color: #757474;
+    border-width: 2px;
+    border-style: solid;
+    display: inline-block;
+    padding: 3px;
+    padding-left: 6px;
+    padding-right: 10px;
+}
+
+.server{
+	background-image: url("/assets/server.svg");
+	background-repeat: repeat;
+    background-size: auto 100%;
+
+    background-color: #e3e3e3;
+    border-color: #757474;
+    border-width: 8px;
+    border-style: double;
+}
+
+
+
+.vnf{
+	min-width: 80px;
+	margin: 10px;
+
+	font-size: 0.9em;
+	padding: 5px;
+
+
+	border-radius: 8px;
+    border-color: #3dbbf5;
+    border-width: 3px;
+    border-style: solid;
+
+    background-color: #e6f4fa;
+}
+
+.vnf::after{
+	clear: both;
+	content: '';
+	display: inline-block;
+}
+
+.vnf > img{
+	width: 35px;
+    margin-left: 10px;
+	float: right
+}