Commit 92fa8726 authored by Lluis Gifre Renom's avatar Lluis Gifre Renom
Browse files

WebUI component: 

- Added missing device topology icons
- Added stylink to mgmt links in topology plot
parent ee6d01a1

src/webui/service/static/topology_icons/Acknowledgements.txt

+3 −0
Original line number Diff line number Diff line
@@ -24,3 +24,6 @@ https://symbols.getvecta.com/stencil_241/213_programmable-sw.32d3794d56.png => e 


https://symbols.getvecta.com/stencil_240/275_wae.c06b769cd7.png => optical-transponder.png

https://symbols.getvecta.com/stencil_241/289_wae.216d930c17.png => emu-optical-transponder.png



https://symbols.getvecta.com/stencil_240/128_localdirector.c1e561769f.png => optical-splitter.png

https://symbols.getvecta.com/stencil_241/158_local-director.6b38eab9e4.png => emu-optical-splitter.png

src/webui/service/static/topology_icons/emu-optical-splitter.png

0 → 100644
+8.25 KiB
Loading image diff...

src/webui/service/static/topology_icons/emu-xr-constellation.png

0 → 100644
+17.4 KiB
Loading image diff...

src/webui/service/static/topology_icons/optical-splitter.png

0 → 100644
+9.03 KiB
Loading image diff...

src/webui/service/templates/js/topology.js

+15 −5
Original line number Diff line number Diff line
@@ -70,11 +70,21 @@ var simulation = d3.forceSimulation(); 
// load the data

d3.json("{{ url_for('main.topology') }}", function(data) {

    // set the data and properties of link lines and node circles

    link = svg.append("g").attr("class", "links").style('stroke', '#aaa')

    link = svg.append("g").attr("class", "links")//.style('stroke', '#aaa')

        .selectAll("line")

        .data(data.links)

        .enter()

        .append("line");

        .append("line")

        .attr("opacity", 1)

        .attr("stroke", function(l) {

            return l.name.toLowerCase().includes('mgmt') ? '#AAAAAA' : '#555555';

        })

        .attr("stroke-width", function(l) {

            return l.name.toLowerCase().includes('mgmt') ? 1 : 2;

        })

        .attr("stroke-dasharray", function(l) {

            return l.name.toLowerCase().includes('mgmt') ? "5,5" : "0";

        });

    node = svg.append("g").attr("class", "devices").attr('r', 20).style('fill', '#69b3a2')

        .selectAll("circle")

        .data(data.devices)
@@ -93,9 +103,9 @@ d3.json("{{ url_for('main.topology') }}", function(data) { 
    link.append("title").text(function(l) { return l.name; });



    // link style

    link

        .attr("stroke-width", forceProperties.link.enabled ? 2 : 1)

        .attr("opacity", forceProperties.link.enabled ? 1 : 0);

    //link

    //    .attr("stroke-width", forceProperties.link.enabled ? 2 : 1)

    //    .attr("opacity", forceProperties.link.enabled ? 1 : 0);

    

    // set up the simulation and event to update locations after each tick

    simulation.nodes(data.devices);