multiple client pages fixes and improvements

.hack/devnet/run.sh

@@ -6,7 +6,10 @@ ENCLAVE_NAME="${ENCLAVE_NAME:-dora}"
 if kurtosis enclave inspect "$ENCLAVE_NAME" > /dev/null; then
   echo "Kurtosis enclave '$ENCLAVE_NAME' is already up."
 else
-  kurtosis run github.com/ethpandaops/ethereum-package --enclave "$ENCLAVE_NAME" --args-file "${__dir}/kurtosis.devnet.config.yaml"
+  kurtosis run github.com/ethpandaops/ethereum-package \
+  --image-download always \
+  --enclave "$ENCLAVE_NAME" \
+  --args-file "${__dir}/kurtosis.devnet.config.yaml"
 fi
 
 # Get chain config
@@ -15,7 +18,7 @@ kurtosis files inspect "$ENCLAVE_NAME" el_cl_genesis_data ./config.yaml | tail -
 ## Generate Dora config
 ENCLAVE_UUID=$(kurtosis enclave inspect "$ENCLAVE_NAME" --full-uuids | grep 'UUID:' | awk '{print $2}')
 
-BEACON_NODDES=$(docker ps -aq -f "label=enclave_uuid=$ENCLAVE_UUID" \
+BEACON_NODES=$(docker ps -aq -f "label=enclave_uuid=$ENCLAVE_UUID" \
               -f "label=com.kurtosistech.app-id=kurtosis" \
               -f "label=com.kurtosistech.custom.ethereum-package.client-type=beacon" | tac)
 
@@ -45,7 +48,7 @@ beaconapi:
   redisCacheAddr: ""
   redisCachePrefix: ""
   endpoints:
-$(docker inspect -f "    - { name: {{ with index .Config.Labels \"com.kurtosistech.id\"}}{{.}}{{end}}, url: http://{{ with index .NetworkSettings.Networks \"kt-$ENCLAVE_NAME\"}}{{.IPAddress }}:4000{{end}} }" $BEACON_NODDES)
+$(docker inspect -f "    - { name: {{ with index .Config.Labels \"com.kurtosistech.id\"}}{{.}}{{end}}, url: http://{{ with index .NetworkSettings.Networks \"kt-$ENCLAVE_NAME\"}}{{.IPAddress }}:4000{{end}} }" $BEACON_NODES)
 executionapi:
   depositLogBatchSize: 1000
   endpoints:

static/css/clients.css

@@ -53,7 +53,14 @@ Client peers table
   padding: 0;
 }
 
+@media only screen and (max-width: 768px) {
+  .peer-nodemap {
+    height: 50vh;
+  }
+}
+
 .peer-nodemap-wrapper {
+  padding: 0;
   background: #4b79a1;
   background: -webkit-linear-gradient(
     to top,

static/js/vis-network-aux.js

@@ -0,0 +1,130 @@
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+$_network = {};
+
+// Auxiliar function to fit a network to the screen
+$_network.fitToScreen = function (network) {
+  var options = {
+    offset: { x: 0, y: 0 },
+    duration: 1000,
+    easingFunction: "easeInOutQuad",
+  };
+  network.fit({ animation: options });
+}
+
+// Default options for a network
+$_network.defaultOptions = {
+  layout: {
+    randomSeed: 1
+  },
+  interaction: {
+    hover: true
+  },
+  manipulation: {
+    enabled: false,
+  },
+  groups: {
+    internal: {
+      shape: "dot",
+      size: 30,
+      font: {
+        size: 16,
+        face: "Tahoma",
+        color: "#ffffff",
+      },
+      borderWidth: 3,
+      shadow: true,
+      color:{
+        border: "#0077B6",
+        background: "#fafafa",
+        highlight: {
+          border: "#E77D22",
+          background: "#fafafa",
+        },
+        hover: {
+          border: "#0077B6",
+          background: "#fefefe",
+        },
+      }
+    },
+    external: {
+      shape: "dot",
+      shapeProperties: {
+        borderDashes: [5, 5],
+      },
+      size: 20,
+      font: {
+        size: 14,
+        face: "Tahoma",
+        color: "#ffffff",
+      },
+      borderWidth: 2,
+      shadow: true,
+      color:{
+        border: "#809FFF",
+        background: "#fafafa",
+        highlight: {
+          border: "#E77D22",
+          background: "#fafafa",
+        },
+        hover: {
+          border: "#809FFF",
+          background: "#fefefe",
+        },
+      }
+    },
+  },
+  nodes: {
+    shapeProperties: {
+      interpolation: false    // 'true' for intensive zooming
+    },
+    shape: "dot",
+    size: 30,
+    font: {
+      size: 16,
+      face: "Tahoma",
+      color: "#ffffff",
+    },
+    borderWidth: 2,
+    shadow: true,
+    color:{
+      border: "#222222",
+      background: "#666666",
+      highlight: {
+        border: "#E77D22",
+        background: "#E77D22",
+      },
+      hover: {
+        border: "#222222",
+        background: "#666666",
+      },
+    }
+  },
+  edges: {
+    arrows: {
+      to: { enabled: true, scaleFactor: 1, type: "arrow" },
+    },
+    width: 2,
+    shadow: true,
+    color: {
+      color: "#0077B6",
+      highlight: "#E77D22",
+      hover: "#0077B6",
+      opacity: 0.7,
+    },
+    smooth: {
+      type: "dynamic", // might need to change to "continuous" when there are too many nodes
+      //type: "continuous",
+    },
+  },
+  physics: {
+    stabilization: false,
+    barnesHut: {
+      gravitationalConstant: -5000,
+      springConstant: 0.001,
+      springLength: 200,
+    },
+  },
+};

templates/clients/clients_cl.html

@@ -9,8 +9,21 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Consensus clients<
         </ol>
       </nav>
     </div>
-    <div class="card mt-2 peer-nodemap-wrapper">
-      <div class="card-body px-0 peer-nodemap" id="nodemap"></div>
+    <div class="card mt-2">
+      <div class="accordion" id="network-accordion">
+        <div class="accordion-item">
+          <h2 class="accordion-header">
+            <button class="accordion-button btn-secondary" style="box-shadow: none;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+              <i class="fa-solid fa-circle-nodes" style="margin-right:5px"></i> Client graph
+            </button>
+          </h2>
+          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#network-accordion">
+            <div class="accordion-body peer-nodemap-wrapper">
+              <div class="card-body px-0 peer-nodemap" id="nodemap"></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="card mt-2">
       <div class="card-body px-0 py-3">
@@ -38,7 +51,7 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Consensus clients<
                 {{ range $i, $client := .Clients }}
                   <tr>
                     <td>{{ $client.Index }}</td>
-                    <td style="max-width: 270px;">
+                    <td>
                       <img src="/identicon?key={{ $client.PeerID }}"
                         alt="{{ $client.PeerID }}"
                         class="client-node-icon"/>
@@ -158,125 +171,21 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Consensus clients<
 
 {{ define "js" }}
 <script src="/js/vis-network.min.js"></script>
+<script src="/js/vis-network-aux.js"></script>
 <script type="text/javascript">
   var container = document.getElementById("nodemap");
 
   var data = {{ .PeerMap }}
   for (var i = 0; i < data.nodes.length; i++) {
     data.nodes[i].title = data.nodes[i].id;
   }
-  var options = {
-    layout: {
-      randomSeed: 1
-    },
-    interaction: {
-      hover: true
-    },
-    manipulation: {
-      enabled: false,
-    },
-    groups: {
-      internal: {
-        shape: "dot",
-        size: 30,
-        font: {
-          size: 16,
-          face: "Tahoma",
-          color: "#ffffff",
-        },
-        borderWidth: 3,
-        shadow: true,
-        color:{
-          border: "#0077B6",
-          background: "#fafafa",
-          highlight: {
-            border: "#E77D22",
-            background: "#fafafa",
-          },
-          hover: {
-            border: "#0077B6",
-            background: "#fefefe",
-          },
-        }
-      },
-      external: {
-        shape: "dot",
-        shapeProperties: {
-          borderDashes: [5, 5],
-        },
-        size: 20,
-        font: {
-          size: 14,
-          face: "Tahoma",
-          color: "#ffffff",
-        },
-        borderWidth: 2,
-        shadow: true,
-        color:{
-          border: "#809FFF",
-          background: "#fafafa",
-          highlight: {
-            border: "#E77D22",
-            background: "#fafafa",
-          },
-          hover: {
-            border: "#809FFF",
-            background: "#fefefe",
-          },
-        }
-      },
-    },
-    nodes: {
-      shape: "dot",
-      size: 30,
-      font: {
-        size: 16,
-        face: "Tahoma",
-        color: "#ffffff",
-      },
-      borderWidth: 2,
-      shadow: true,
-      color:{
-        border: "#222222",
-        background: "#666666",
-        highlight: {
-          border: "#E77D22",
-          background: "#E77D22",
-        },
-        hover: {
-          border: "#222222",
-          background: "#666666",
-        },
-      }
-    },
-    edges: {
-      arrows: {
-        to: { enabled: true, scaleFactor: 1, type: "arrow" },
-      },
-      width: 2,
-      shadow: true,
-      color: {
-        color: "#0077B6",
-        highlight: "#E77D22",
-        hover: "#0077B6",
-        opacity: 0.7,
-      },
-      smooth: {
-        type: "dynamic", // might need to change to "continuous" when there are too many nodes
-        //type: "continuous",
-      },
-    },
-    physics: {
-      stabilization: false,
-      barnesHut: {
-        gravitationalConstant: -5000,
-        springConstant: 0.001,
-        springLength: 200,
-      },
-    },
-  };
+  var options = $_network.defaultOptions;
   var network = new vis.Network(container, data, options);
 
+  sleep(1000).then(() => {
+    $_network.fitToScreen(network);
+  });
+
   // Handle events
   network.on("hoverNode", function (params) {
     console.log("hoverNode Event:", params);