diff --git a/backend/wsgi.py b/backend/wsgi.py
index 88fab84..d63e028 100644
--- a/backend/wsgi.py
+++ b/backend/wsgi.py
@@ -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
@@ -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)
diff --git a/www/css/style.css b/www/css/style.css
index c08e121..75b1223 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -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;
diff --git a/www/index.html b/www/index.html
index d59c54d..ee36537 100644
--- a/www/index.html
+++ b/www/index.html
@@ -79,7 +79,7 @@
diff --git a/www/js/l1map.js b/www/js/l1map.js
index 4fd224b..6a76d8e 100644
--- a/www/js/l1map.js
+++ b/www/js/l1map.js
@@ -117,7 +117,10 @@ function onClickDeviceDetails(device, interfaces) {
sp = "?";
else
sp = interfaces[i].speed;
- text += "" + sp + " | ";
+ if (interfaces[i].speed == 0.1)
+ text += "" + sp + " | ";
+ else
+ text += "" + sp + " | ";
text += "" + interfaces[i].name + " | ";
@@ -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"
diff --git a/www/map/index.html b/www/map/index.html
index c29b638..fa4dc5b 100644
--- a/www/map/index.html
+++ b/www/map/index.html
@@ -66,30 +66,45 @@
-