Added images and made the visualizator work
authorVSORC <josuer08@gmail.com>
Fri, 27 Sep 2019 01:15:38 +0000 (21:15 -0400)
committerVSORC <josuer08@gmail.com>
Fri, 27 Sep 2019 01:15:38 +0000 (21:15 -0400)
img/cloud.svg [new file with mode: 0644]
img/pc.svg [new file with mode: 0644]
img/switch.svg [new file with mode: 0644]
js/topology/topology.js
src/index.js
src/routes/index.js

diff --git a/img/cloud.svg b/img/cloud.svg
new file mode 100644 (file)
index 0000000..4b70e45
--- /dev/null
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<!-- Generated by Microsoft Visio, SVG Export Logo.svg Page-1 -->\r
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"\r
+               width="6.0444in" height="6.0444in" viewBox="0 0 435.197 435.197" xml:space="preserve" color-interpolation-filters="sRGB"\r
+               class="st2">\r
+       <style type="text/css">\r
+       <![CDATA[\r
+               .st1 {stroke:#246767;stroke-linecap:round;stroke-linejoin:round;stroke-width:10}\r
+               .st2 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}\r
+       ]]>\r
+       </style>\r
+\r
+       <g>\r
+               <title>Page-1</title>\r
+               <g id="shape1-1" transform="translate(5,-5)">\r
+                       <title>Sheet.1</title>\r
+                       <path d="M49.37 113.65 A137.525 152.978 0 0 1 277.54 55.65 A94.008 104.571 0 0 1 409.89 181.94 A85.697 95.3266 0 0 1\r
+                                                343.18 331.54" class="st1"/>\r
+                       <path d="M277.54 55.65 A94.008 104.571 -180 0 0 232.19 113.65" class="st1"/>\r
+                       <path d="M409.89 181.94 A85.697 95.3266 -180 0 0 375.83 149.97" class="st1"/>\r
+                       <path d="M15.3 263.26 A94.008 104.571 -180 0 0 147.66 389.55 A94.008 104.571 -180 0 0 193.01 331.54" class="st1"/>\r
+                       <path d="M82.01 113.65 A85.697 95.3266 -180 0 0 15.3 263.26 A85.697 95.3266 -180 0 0 49.37 295.23" class="st1"/>\r
+                       <path d="M375.83 331.54 A137.525 152.978 0 0 1 147.66 389.55" class="st1"/>\r
+               </g>\r
+       </g>\r
+</svg>\r
diff --git a/img/pc.svg b/img/pc.svg
new file mode 100644 (file)
index 0000000..3d5e6c8
--- /dev/null
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<!-- Generated by Microsoft Visio, SVG Export pc.svg Page-1 -->\r
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"\r
+               xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="6.0444in" height="6.0444in"\r
+               viewBox="0 0 435.197 435.197" xml:space="preserve" color-interpolation-filters="sRGB" class="st4">\r
+       <v:documentProperties v:langID="1033" v:viewMarkup="false"/>\r
+\r
+       <style type="text/css">\r
+       <![CDATA[\r
+               .st1 {fill:none;stroke:#246767;stroke-linecap:round;stroke-linejoin:round;stroke-width:10}\r
+               .st2 {stroke:#246767;stroke-linecap:round;stroke-linejoin:round;stroke-width:10}\r
+               .st3 {stroke:#246767;stroke-width:10}\r
+               .st4 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}\r
+       ]]>\r
+       </style>\r
+\r
+       <g v:mID="0" v:index="1" v:groupContext="foregroundPage">\r
+               <title>Page-1</title>\r
+               <v:pageProperties v:drawingScale="0.0393701" v:pageScale="0.0393701" v:drawingUnits="24" v:shadowOffsetX="8.50394"\r
+                               v:shadowOffsetY="-8.50394"/>\r
+               <g id="shape3-1" v:mID="3" v:groupContext="shape" transform="translate(5,-5)">\r
+                       <title>Sheet.3</title>\r
+                       <rect x="0" y="350.157" width="425.197" height="85.0394" rx="22.6772" ry="22.6772" class="st1"/>\r
+               </g>\r
+               <g id="shape4-3" v:mID="4" v:groupContext="shape" transform="translate(5,-203.425)">\r
+                       <title>Sheet.4</title>\r
+                       <rect x="0" y="208.425" width="425.197" height="226.772" rx="22.6772" ry="22.6772" class="st1"/>\r
+               </g>\r
+               <g id="shape5-5" v:mID="5" v:groupContext="shape" transform="translate(189.252,-146.732)">\r
+                       <title>Sheet.5</title>\r
+                       <path d="M0 435.2 L56.69 435.2 L42.52 378.5 L14.17 378.5 L0 435.2 Z" class="st1"/>\r
+               </g>\r
+               <g id="shape6-7" v:mID="6" v:groupContext="shape" transform="translate(104.213,-146.732)">\r
+                       <title>Sheet.6</title>\r
+                       <path d="M0 435.2 L226.77 435.2" class="st2"/>\r
+               </g>\r
+               <g id="shape9-10" v:mID="9" v:groupContext="shape" transform="translate(33.3465,-61.6929)">\r
+                       <title>Sheet.9</title>\r
+                       <path d="M0 435.2 L226.77 435.2" class="st3"/>\r
+               </g>\r
+               <g id="shape11-13" v:mID="11" v:groupContext="shape" transform="translate(288.465,-61.6929)">\r
+                       <title>Sheet.11</title>\r
+                       <path d="M0 435.2 L113.39 435.2" class="st3"/>\r
+               </g>\r
+               <g id="shape12-16" v:mID="12" v:groupContext="shape" transform="translate(33.3465,-33.3465)">\r
+                       <title>Sheet.12</title>\r
+                       <path d="M0 435.2 L368.5 435.2" class="st3"/>\r
+               </g>\r
+               <g id="shape13-19" v:mID="13" v:groupContext="shape" transform="translate(104.213,-132.559)">\r
+                       <title>Sheet.13</title>\r
+                       <path d="M0 435.2 L226.77 435.2" class="st2"/>\r
+               </g>\r
+       </g>\r
+</svg>\r
diff --git a/img/switch.svg b/img/switch.svg
new file mode 100644 (file)
index 0000000..430ece1
--- /dev/null
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<!-- Generated by Microsoft Visio, SVG Export switch_100x100.svg Page-1 -->\r
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"\r
+               width="6.0444in" height="6.0444in" viewBox="0 0 435.197 435.197" xml:space="preserve" color-interpolation-filters="sRGB"\r
+               class="st5">\r
+       <style type="text/css">\r
+       <![CDATA[\r
+               .st1 {fill:#ffffff;stroke:#246767;stroke-linecap:round;stroke-linejoin:round;stroke-width:10}\r
+               .st2 {fill:#699a9a;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}\r
+               .st3 {fill:#428080;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}\r
+               .st4 {fill:#246767;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}\r
+               .st5 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}\r
+       ]]>\r
+       </style>\r
+\r
+       <g>\r
+               <title>Page-1</title>\r
+               <g id="shape14-1" transform="translate(5,-5)">\r
+                       <title>Sheet.14</title>\r
+                       <rect x="0" y="10" width="425.197" height="425.197" rx="22.6772" ry="22.6772" class="st1"/>\r
+               </g>\r
+               <g id="shape2-3" transform="translate(75.8661,-90.0394)">\r
+                       <title>Sheet.2</title>\r
+                       <path d="M0 435.2 L56.69 435.2 L170.08 265.12 L113.39 265.12 L0 435.2 Z" class="st2"/>\r
+               </g>\r
+               <g id="shape11-5" transform="translate(160.906,-90.0394)">\r
+                       <title>Sheet.11</title>\r
+                       <path d="M0 435.2 L56.69 435.2 L137.95 313.31 L184.25 313.31 L184.25 337.4 L236.69 289.21 L184.25 241.02 L184.25 265.12\r
+                                                L170.08 265.12 L120.47 265.12 L113.39 265.12 L0 435.2 Z" class="st3"/>\r
+               </g>\r
+               <g id="shape12-7" transform="translate(47.5197,-175.079)">\r
+                       <title>Sheet.12</title>\r
+                       <path d="M0 435.2 L56.69 435.2 L137.95 313.31 L184.25 313.31 L184.25 337.4 L236.69 289.21 L184.25 241.02 L184.25 265.12\r
+                                                L170.08 265.12 L120.47 265.12 L113.39 265.12 L0 435.2 Z" class="st4"/>\r
+               </g>\r
+       </g>\r
+</svg>\r
index eb1d8d1e80aff94b9c842a811d9481190a8e9836..c2baab70821adc21ce78f442b4e546ddaba5865c 100644 (file)
@@ -48,6 +48,7 @@ $(function () {
         var links = [];
 
         var lst = top.switches;
+
         for (var i = 0; i < lst.length; i++) {
             nodes.push({ "id": lst[i].dpid, "type": "switch" });
         }
@@ -138,11 +139,11 @@ $(function () {
         node.append("image")
             .attr("xlink:href", function (d) {
                 if (d.type === "switch") {
-                    return "/home/img/switch.svg"
+                    return "img/switch.svg"
                 } else if (d.type === "cloud") {
-                    return "/home/img/cloud.svg"
+                    return "img/cloud.svg"
                 } else {
-                    return "/home/img/pc.svg"
+                    return "img/pc.svg"
                 }
             })
             .on("mouseover", handleMouseOver)
@@ -286,16 +287,16 @@ $(function () {
 
 
         function jsonget() {
-          const url = "http://"+location.hostname+":8080/topology"
+
           let xhr = new XMLHttpRequest();
-          xhr.open('GET', url , true);
+          xhr.open('GET', "/gettopo" , true);
           //console.log(xhr); //para ver en la consola
           xhr.onload = function() {
             if (xhr.status == 200) { //can use this.status instead
               //console.log(xhr.responseText);// para ver en la consola
-              data = JSON.parse(xhr.responseText)
-              listTopology(data)
-              plotGraph(toGraph(data));
+
+              listTopology(JSON.parse(xhr.responseText));
+              plotGraph(toGraph(JSON.parse(xhr.responseText)));
             }
           }
           xhr.send();
index a2ece0ff141d633b6c994a144083b562eb139617..072e61e8ec8a4231a9918fdb2761358d82d40328 100644 (file)
@@ -17,6 +17,7 @@ app.use(express.json());
 //para que la ruta de estilos y js sea visible
 app.use('/styles', express.static('styles'));
 app.use('/js', express.static('js'));
+app.use('/img', express.static('img'));
 //rutas
 app.use(require('./routes/index'));
 // Configurar cabeceras y cors
index 3eb3ba46af1fda3a62c288f6d4dd67b4be69e52d..8e13ede275f2315ef15f049046ff6dd8251db56b 100644 (file)
@@ -61,5 +61,14 @@ router.get('/ifstat', (req, res) => {
   });
 });
 
+router.get('/gettopo', (req, res) => {
+  var sys = require('sys')
+  var exec = require('child_process').exec;
+  var child;
+  child = exec("curl localhost:8080/topology", function(error, stdout, stderr) {
+    console.log("gettopo");
+    res.send(stdout);
+  });
+});
 
 module.exports = router;