feat(topology): add network edge colors

flake.nix

@@ -218,6 +218,21 @@
                 ];
               };
 
+              # TODO: extract from kea!
+              networks.home-lan = {
+                name = "Home LAN";
+                cidrv4 = "192.168.1.0/24";
+                color = "#78dba9";
+              };
+              networks.home-fritzbox = {
+                name = "Home Fritzbox";
+                cidrv4 = "192.168.178.0/24";
+                color = "#f1cf8a";
+              };
+              nodes.ward.interfaces.lan.network = "home-lan";
+              nodes.ward.interfaces.wan.network = "home-fritzbox";
+              nodes.fritzbox.interfaces.eth0.network = "home-fritzbox";
+
               nodes.switch-attic = {
                 name = "Switch Attic";
                 deviceType = "switch";

topology/options/networks.nix

@@ -40,6 +40,10 @@ in
           color = mkOption {
             description = "The color of this network";
             default = "random";
+            apply = x:
+              if x == "random"
+              then "#ff00ff" # FIXME: TODO: lookuptable linear probing hashing into palette
+              else x;
             type = types.either (types.strMatching "^#[0-9a-f]{6}$") (types.enum ["random"]);
           };
 

topology/topology/renderers/elk/default.nix

@@ -99,24 +99,30 @@
           };
           width = 8;
           height = 8;
-          style.stroke = "#70a5eb";
+          style.stroke = "#485263"; # FIXME: TODO color based on attached network color (autoshade)?
-          style.fill = "#74bee9";
+          style.fill = "#b6beca";
           labels =
             {
               "00-name" = mkLabel interface.id 1 {};
             }
             // optionalAttrs (interface.mac != null) {
               "50-mac" = mkLabel interface.mac 1 {fill = "#70a5eb";};
+            }
+            // optionalAttrs (interface.addresses != []) {
+              "60-addrs" = mkLabel (toString interface.addresses) 1 {fill = "#f9a872";};
             };
         };
       }
       # Interface for node in network-centric view
       {
         children.network.children."node:${node.id}".ports."interface:${interface.id}" = {
+          # FIXME: TODO: deduplicate, same as above
+          # FIXME: TODO: deduplicate, same as above
+          # FIXME: TODO: deduplicate, same as above
           width = 8;
           height = 8;
-          style.stroke = "#70a5eb";
+          style.stroke = "#485263"; # FIXME: TODO color based on attached network color (autoshade)?
-          style.fill = "#74bee9";
+          style.fill = "#b6beca";
           labels =
             {
               "00-name" = mkLabel interface.id 1 {};
@@ -132,7 +138,9 @@
 
       # Edge in network-centric view
       (optionalAttrs (interface.network != null) (
-        mkEdge ("children.network." + idForInterface node interface.id) "children.network.children.net:${interface.network}" {}
+        mkEdge ("children.network." + idForInterface node interface.id) "children.network.children.net:${interface.network}" {
+          style.stroke = config.networks.${interface.network}.color;
+        }
       ))
     ]
     ++ optionals (!interface.virtual) (flip map interface.physicalConnections (
@@ -145,7 +153,12 @@
           mkEdge
           (idForInterface node interface.id)
           (idForInterface config.nodes.${conn.node} conn.interface)
-          {}
+          {
+            # FIXME: in interface definition ensure that the two ends of physical connections don't have different networks (output warning only)
+            style = optionalAttrs (interface.network != null) {
+              stroke = config.networks.${interface.network}.color;
+            };
+          }
         )
     ));
 

topology/topology/renderers/svg/default.nix

@@ -1,11 +1,12 @@
 # TODO:
+# - stack interfaces horizontally, information is now on the ports anyway.
 # - systemd extractor remove cidr mask
 # - address port label render make newline capable (multiple port labels)
 # - mac address show!
 # - split network layout or make rectpacking of childs
 # - NAT indication
 # - bottom hw image distorted in card view (move to top anyway)
-# - embed font
+# - embed font globally, try removing satori embed?
 # - network overview card (list all networks with name and cidr, legend style)
 # - colors!
 # - ip labels on edges
@@ -115,20 +116,25 @@
       <div tw="flex mt-2"></div>
     '';
 
-    net = rec {
+    net = {
       mkCard = net: {
         width = 480;
-        html =
+        html = let
+          netColor =
+            if net.color != null
+            then net.color
+            else "#b6beca";
+        in
           mkCardContainer
           /*
           html
           */
           ''
             <div tw="flex flex-row mx-6 mt-2 items-center">
-              ${mkImageMaybe "w-8 h-8 mr-4" (config.lib.icons.get net.icon)}
+              <div tw="flex flex-none bg-[${netColor}] w-8 h-8 mr-4 rounded-lg"></div>
               <h2 tw="text-2xl font-bold">${net.name}</h2>
               <div tw="flex grow min-w-8"></div>
-              <div tw="flex flex-none bg-[#ff0000] w-12 h-12 ml-4 rounded-lg"></div>
+              ${mkImageMaybe "w-12 h-12 ml-4" (config.lib.icons.get net.icon)}
             </div>
             <div tw="flex flex-col mx-6 my-2 grow">
             ${optionalString (net.cidrv4 != null) ''<div tw="flex flex-row"><span tw="text-lg m-0"><b>CIDRv4</b></span><span tw="text-lg m-0 ml-4">${net.cidrv4}</span></div>''}