Skip to content

Commit

Permalink
v0.7.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@den-it
den-it committed Aug 15, 2021
1 parent 1fdb841 commit c431f58
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 82 deletions.
7 changes: 4 additions & 3 deletions backend/wsgi.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ def getMaps():
# Example input: "10gbase-x-sfpp"
# Example output: 10
#
# Possible inputs:
# Example inputs:
# 100base-tx
# 1000base-t
# 1000base-x-sfp
Expand All @@ -196,8 +196,9 @@ def getLinkSpeedOutOfFormFactor(formFactor):
if (speed):
speedInShortFormat = re.search("\d+", speed.group(0))
return float(speedInShortFormat.group(0))

return None
else:
return float(LINK_SPEED_UNKNOWN)



# Takes two adjacent interfaces speed (float) and returns link speed (float)
Expand Down
130 changes: 83 additions & 47 deletions www/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,90 +96,126 @@ g#links {
fill: white;
}

.link0gb {
stroke: black;
stroke-dasharray: 5,5;
}

.link0gb-info {
background: black;
}

.link0gb-label-circle {
fill: black;
/* Colors to distinguish links of different speeds */
:root {
--color0: #000000;
--color1: #777777;
--color2: #e1a800;
--color3: #00DCB4;
--color4: #8600FF;
--color5: #bc104b;
}

/* Links with unknown speed */
.link-1gb {
stroke: red;
stroke-width: 1px;
}

.link-1gb-info {
background: red;
}

.link-1gb-label-circle {
fill: red;
}

.link1gb {
stroke: #e1a800;
/* Virtual links (circuits) */
.link0gb {
stroke: var(--color0);
stroke-width: 1px;
stroke-dasharray: 5,5;
}
.link0gb-info {
background: var(--color0);
}
.link0gb-label-circle {
fill: var(--color0);
}

.link1gb-info {
background: #e1a800;
/* Links with speed 10/100 Mbit/sec */
.link0_1gb {
stroke: var(--color1);
stroke-width: 1px;
}
.link0_1gb-info {
background: var(--color1);
}
.link0_1gb-label-circle {
fill: var(--color1);
}


.link1gb-label-circle {
fill: #e1a800;
.link1gb, .link2gb, .link5gb {
stroke: var(--color2);
stroke-width: 1px;
}
.link1gb {
stroke-width: 1px;
}
.link2gb {
stroke-width: 1.5px;
}
.link5gb {
stroke-width: 2px;
}
.link1gb-info, .link2gb-info, .link5gb-info {
background: var(--color2);
}
.link1gb-label-circle, .link2gb-label-circle, .link5gb-label-circle {
fill: var(--color2);
}


.link10gb {
stroke: #00DCB4;
stroke: var(--color3);
stroke-width: 2px;
}

.link10gb-info {
background: #00DCB4;
background: var(--color3);
}

.link10gb-label-circle {
fill: #00DCB4;
fill: var(--color3);
}

.link25gb {
stroke: #75939c;
}

.link25gb-info {
background: #75939c;
.link25gb, .link40gb, .link50gb {
stroke: var(--color4);
}

.link25gb-label-circle {
fill: #75939c;
.link25gb {
stroke-width: 2px;
}

.link40gb {
stroke: #8600FF;
stroke-width: 3px;
}

.link40gb-info {
background: #8600FF;
.link50gb {
stroke-width: 4px;
}

.link40gb-label-circle {
fill: #8600FF;
.link25gb-info, .link40gb-info, .link50gb-info {
background: var(--color4);
}
.link25gb-label-circle, .link40gb-label-circle, .link50gb-label-circle {
fill: var(--color4);
}


.link100gb, .link200gb, .link400gb {
stroke: var(--color5);
}
.link100gb {
stroke: #bc104b;
stroke-width: 4px;
}

.link100gb-info {
background: #bc104b;
.link200gb {
stroke-width: 6px;
}

.link100gb-label-circle {
fill: #bc104b;
.link400gb {
stroke-width: 8px;
}
.link100gb-info, .link200gb-info, .link400gb-info {
background: var(--color5);
}
.link100gb-label-circle, .link200gb-label-circle, .link400gb-label-circle {
fill: var(--color5);
}


.clusters rect, .clusters path, rect.clusters {
stroke: #666666;
Expand Down
2 changes: 1 addition & 1 deletion www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
<div style="height: 1px; background: #aaaaaa;"></div>
<table style="width: 100%; height: calc(100% - 1px);">
<tr>
<td style="padding-left: 21px;" class="secondary_text">v0.7.0</td>
<td style="padding-left: 21px;" class="secondary_text">v0.7.1</td>
<td style="padding-right: 21px; text-align: right;" class="secondary_text"><a href="https://github.com/den-it/ntmap/blob/master/docs/index.md">Docs</a></td>
</tr>
</table>
Expand Down
10 changes: 6 additions & 4 deletions www/js/l1map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,10 @@ function onClickDeviceDetails(device, interfaces) {
sp = "?";
else
sp = interfaces[i].speed;
text += "<td class='link" + parseInt(interfaces[i].speed) + "gb-info' valign='middle' align='center' style='padding: 0;'><div style='opacity: 0;' class='link-speed-info' id='speed-info-" + i + "'>" + sp + "</div></td>";
if (interfaces[i].speed == 0.1)
text += "<td class='link0_1gb-info' valign='middle' align='center' style='padding: 0;'><div style='opacity: 0;' class='link-speed-info' id='speed-info-" + i + "'>" + sp + "</div></td>";
else
text += "<td class='link" + parseInt(interfaces[i].speed) + "gb-info' valign='middle' align='center' style='padding: 0;'><div style='opacity: 0;' class='link-speed-info' id='speed-info-" + i + "'>" + sp + "</div></td>";

text += "<td nowrap><a target='_blank' href='" + NETBOX_URL + "/dcim/interfaces/" + interfaces[i].netbox_id + "/'>" + interfaces[i].name + "</a></td>";

Expand Down Expand Up @@ -668,15 +671,14 @@ function drawL1Map() {
.data(graph.links)
.enter()
.append("path")
.attr("class", function(d) { return "link" + parseInt(d.bandwidth) + "gb"; })
.attr("stroke-width", function(d) { if ("type" in d) return 0; else if (d.bandwidth == 0) return 1; else return Math.sqrt(parseInt(d.bandwidth))/2; });
.attr("class", function(d) { if (d.bandwidth == 0.1) return "link0_1gb"; else return "link" + parseInt(d.bandwidth) + "gb"; });

var labelCircle = svg.append("g")
.attr("id", "labelCircles")
.selectAll("circle")
.data(graph.links)
.enter().append("circle")
.attr("class", function(d) { return "link" + parseInt(d.bandwidth) + "gb-label-circle"; })
.attr("class", function(d) { if (d.bandwidth == 0.1) return "link0_1gb-label-circle"; else return "link" + parseInt(d.bandwidth) + "gb-label-circle"; })
.attr("r", function(d) {
if (d.quantity > 1)
return "7"
Expand Down
71 changes: 44 additions & 27 deletions www/map/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,30 +66,45 @@

</table>

<svg height="200" width="800" id="legend" style="margin-top: 20px; display:none;">
<rect x="0" y="0" width="799" height="199" style="fill:white; stroke:#999999;"></rect>
<svg height="200" width="1000" id="legend" style="margin-top: 20px; display:none;">
<rect x="0" y="0" width="999" height="199" style="fill:white; stroke:#999999;"></rect>
<g transform="translate(20, 20)">
<text x="0" y="10" class="secondary_text">Physical links:</text>
<g transform="translate(0, 40)">
<line class="link100gb" stroke-width="5" x1="0" y1="5" x2="40" y2="5"></line>
<text x="50" y="10">100 Gigabit/sec</text>
<line class="link40gb" stroke-width="3.16" x1="0" y1="25" x2="40" y2="25"></line>
<text x="50" y="30">40 Gigabit/sec</text>
<line class="link25gb" stroke-width="2.5" x1="0" y1="45" x2="40" y2="45"></line>
<text x="50" y="50">25 Gigabit/sec</text>
<line class="link10gb" stroke-width="1.58" x1="0" y1="65" x2="40" y2="65"></line>
<text x="50" y="70">10 Gigabit/sec</text>
<line class="link1gb" stroke-width="0.5" x1="0" y1="85" x2="40" y2="85"></line>
<text x="50" y="90">1 Gigabit/sec</text>
<circle class="link10gb-label-circle" r="7" cx="21" cy="105"></circle>
<line class="link400gb" stroke-width="5" x1="0" y1="5" x2="40" y2="5"></line>
<text x="50" y="10">400 Gigabit/sec</text>
<line class="link200gb" stroke-width="3.16" x1="0" y1="25" x2="40" y2="25"></line>
<text x="50" y="30">200 Gigabit/sec</text>
<line class="link100gb" stroke-width="2.5" x1="0" y1="45" x2="40" y2="45"></line>
<text x="50" y="50">100 Gigabit/sec</text>
<line class="link50gb" stroke-width="1.58" x1="0" y1="65" x2="40" y2="65"></line>
<text x="50" y="70">50 Gigabit/sec</text>
<line class="link40gb" stroke-width="0.5" x1="0" y1="85" x2="40" y2="85"></line>
<text x="50" y="90">40 Gigabit/sec</text>
<line class="link25gb" stroke-width="0.5" x1="0" y1="105" x2="40" y2="105"></line>
<text x="50" y="110">25 Gigabit/sec</text>
</g>

<g transform="translate(200, 40)">
<line class="link10gb" stroke-width="5" x1="0" y1="5" x2="40" y2="5"></line>
<text x="50" y="10">10 Gigabit/sec</text>
<line class="link5gb" stroke-width="3.16" x1="0" y1="25" x2="40" y2="25"></line>
<text x="50" y="30">5 Gigabit/sec</text>
<line class="link2gb" stroke-width="2.5" x1="0" y1="45" x2="40" y2="45"></line>
<text x="50" y="50">2.5 Gigabit/sec</text>
<line class="link1gb" stroke-width="1.58" x1="0" y1="65" x2="40" y2="65"></line>
<text x="50" y="70">1 Gigabit/sec</text>
<line class="link0_1gb" stroke-width="0.5" x1="0" y1="85" x2="40" y2="85"></line>
<text x="50" y="90">100/10 Mbit/sec</text>
<circle class="link0_1gb-label-circle" r="7" cx="21" cy="105"></circle>
<g class="labels"><text dy="3" x="18" y="105">2</text></g>
<text x="51" y="110">Number of links</text>
</g>

<text x="396" y="10" class="secondary_text">Cluster</text>
<text x="396" y="28" class="secondary_text">(separate control planes):</text>

<text x="196" y="10" class="secondary_text">Cluster</text>
<text x="196" y="28" class="secondary_text">(separate control planes):</text>

<g transform="translate(0, 20)">
<g transform="translate(200, 20)">
<text x="200" y="31" style="font-weight: bold;">dc2-ext-fw01</text>
<image xlink:href="/img/firewall.svg" width="32" height="32" x="200" y="40"></image>
<text x="240" y="60">node01</text>
Expand All @@ -98,9 +113,9 @@
<rect x="196" y="36" height="100" width="40" class="clusters"/>
</g>

<text x="396" y="10" class="secondary_text">Virtual chassis</text>
<text x="396" y="28" class="secondary_text">(one control plane):</text>
<g transform="translate(0, 20)">
<text x="596" y="10" class="secondary_text">Virtual chassis</text>
<text x="596" y="28" class="secondary_text">(one control plane):</text>
<g transform="translate(200, 20)">
<text x="400" y="31" style="font-weight: bold;">dc2-core-sw01</text>
<image xlink:href="/img/coreswitch.svg" width="32" height="32" x="400" y="40"></image>
<text x="440" y="60">node01</text>
Expand All @@ -109,13 +124,15 @@
<rect x="396" y="36" height="100" width="40" class="VCs"/>
</g>

<text x="596" y="10" class="secondary_text">Virtual chassis</text>
<text x="596" y="28" class="secondary_text">(in collapsed mode):</text>
<image xlink:href="/img/switch.svg" width="32" height="32" x="600" y="40"></image>
<text x="640" y="60" style="font-weight: bold;">dc2-core-sw01</text>
<image xlink:href="/img/vc.svg" width="16" height="16" x="624" y="32"></image>
<text x="796" y="10" class="secondary_text">Virtual chassis</text>
<text x="796" y="28" class="secondary_text">(in collapsed mode):</text>
<g transform="translate(200, 10)">
<image xlink:href="/img/switch.svg" width="32" height="32" x="600" y="40"></image>
<text x="640" y="60" style="font-weight: bold;">dc2-core-sw01</text>
<image xlink:href="/img/vc.svg" width="16" height="16" x="624" y="32"></image>
</g>

<g transform="translate(0, 100)">
<g transform="translate(200, 100)">
<text x="596" y="10" class="secondary_text">Standalone node:</text>
<text x="596" y="28" class="secondary_text"></text>
<image xlink:href="/img/switch.svg" width="32" height="32" x="600" y="20"></image>
Expand All @@ -141,7 +158,7 @@
<div style="height: 1px; background: #aaaaaa;"></div>
<table style="width: 100%; height: calc(100% - 1px);">
<tr>
<td style="padding-left: 21px;" class="secondary_text">v0.7.0</td>
<td style="padding-left: 21px;" class="secondary_text">v0.7.1</td>
<td style="padding-right: 21px; text-align: right;" class="secondary_text"><a href="https://github.com/den-it/ntmap/blob/master/docs/index.md">Docs</a></td>
</tr>
</table>
Expand Down

0 comments on commit c431f58

Please sign in to comment.