aboutsummaryrefslogtreecommitdiffstats
path: root/sdv/docker/sdvmodel/website
diff options
context:
space:
mode:
Diffstat (limited to 'sdv/docker/sdvmodel/website')
-rw-r--r--sdv/docker/sdvmodel/website/actions.js39
-rw-r--r--sdv/docker/sdvmodel/website/assets/plus-circle-solid.svg59
-rw-r--r--sdv/docker/sdvmodel/website/assets/server.svg123
-rw-r--r--sdv/docker/sdvmodel/website/assets/trash-alt-regular.svg59
-rw-r--r--sdv/docker/sdvmodel/website/assets/vnf.svg83
-rw-r--r--sdv/docker/sdvmodel/website/controller.js34
-rw-r--r--sdv/docker/sdvmodel/website/index.html124
-rw-r--r--sdv/docker/sdvmodel/website/mergeDeep.js46
-rw-r--r--sdv/docker/sdvmodel/website/readFromHTML.js72
-rw-r--r--sdv/docker/sdvmodel/website/style/array.css55
-rw-r--r--sdv/docker/sdvmodel/website/style/index.css198
-rw-r--r--sdv/docker/sdvmodel/website/style/report.css90
12 files changed, 982 insertions, 0 deletions
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
+}