client pages: render identicons on client side

ethpandaops · Aug 27, 2024 · 3e434a5 · 3e434a5
1 parent 74b1c7c
commit 3e434a5
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 85 deletions.
diff --git a/cmd/dora-explorer/main.go b/cmd/dora-explorer/main.go
@@ -165,8 +165,6 @@ func startFrontend(webserver *http.Server) {
 	router.HandleFunc("/validator/{idxOrPubKey}", handlers.Validator).Methods("GET")
 	router.HandleFunc("/validator/{index}/slots", handlers.ValidatorSlots).Methods("GET")
 
-	router.HandleFunc("/identicon", handlers.Identicon).Methods("GET")
-
 	if utils.Config.Frontend.Pprof {
 		// add pprof handler
 		router.PathPrefix("/debug/pprof/").Handler(http.DefaultServeMux)

diff --git a/handlers/clients_cl.go b/handlers/clients_cl.go
@@ -71,7 +71,6 @@ func buildCLPeerMapData() *models.ClientCLPageDataPeerMap {
 				ID:    peerID,
 				Label: client.GetName(),
 				Group: "internal",
-				Image: fmt.Sprintf("/identicon?key=%s", peerID),
 				Shape: "circularImage",
 			}
 			nodes[peerID] = &node
@@ -90,7 +89,6 @@ func buildCLPeerMapData() *models.ClientCLPageDataPeerMap {
 					ID:    peer.PeerID,
 					Label: fmt.Sprintf("%s...%s", peer.PeerID[0:5], peer.PeerID[len(peer.PeerID)-5:]),
 					Group: "external",
-					Image: fmt.Sprintf("/identicon?key=%s", peer.PeerID),
 					Shape: "circularImage",
 				}
 				nodes[peer.PeerID] = &node

diff --git a/handlers/clients_el.go b/handlers/clients_el.go
@@ -85,7 +85,6 @@ func buildELPeerMapData() *models.ClientELPageDataPeerMap {
 				ID:    peerID,
 				Label: client.GetName(),
 				Group: "internal",
-				Image: fmt.Sprintf("/identicon?key=%s", peerID),
 				Shape: "circularImage",
 			}
 			nodes[peerID] = &node
@@ -121,7 +120,6 @@ func buildELPeerMapData() *models.ClientELPageDataPeerMap {
 					ID:    peerID,
 					Label: fmt.Sprintf("%s...%s", peerID[0:5], peerID[len(peerID)-5:]),
 					Group: "external",
-					Image: fmt.Sprintf("/identicon?key=%s", peerID),
 					Shape: "circularImage",
 				}
 				nodes[peerID] = &node

diff --git a/handlers/identicon.go b/handlers/identicon.go
diff --git a/static/css/clients.css b/static/css/clients.css
@@ -10,7 +10,7 @@ Client peers table
 .client-node-icon {
   border-radius:50%;
   border:1px solid #0f0f0f;
-  background-color: #fafafa;
+  background-color: #111111;
   margin-right: 10px;
   height: 25px;
   width: 25px;
@@ -20,7 +20,7 @@ Client peers table
   height: 25px;
   border-radius: 50%;
   border: 2px solid #0f0f0f;
-  background-color: #fafafa;
+  background-color: #111111;
   margin-right: 10px;
 }
 

diff --git a/static/js/cytoscape-network-aux.js b/static/js/cytoscape-network-aux.js
@@ -129,9 +129,14 @@ $_network.create = function (container, data){
           classes: "bottom-center",
         }
       );
+      svgIdenticon = jdenticon.toSvg(data.nodes[i].id, 80);
       // Add style to nodes
       stylesheet.selector('#' + data.nodes[i].id).css({
-          'background-image': '/identicon?key=' + data.nodes[i].id
+          'shape': 'circle',
+          'background-image': 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgIdenticon),
+          'background-fit': 'cover',
+          'background-opacity': 1,
+          'background-color': '#111111',
       });
     }
   }

diff --git a/static/js/vendor/jdenticon-3.3.0.min.js b/static/js/vendor/jdenticon-3.3.0.min.js
diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -61,18 +61,16 @@ <h2 class="accordion-header">
                   <tr>
                     <td>{{ $client.Index }}</td>
                     <td>
-                      <img src="/identicon?key={{ $client.PeerID }}"
-                        alt="{{ $client.PeerID }}"
-                        class="client-node-icon"/>
-                        <span
-                          id="clientRow-{{ $client.Name }}"
-                          style="cursor:pointer;"
-                          onclick="$_network.isolateNode(cy, '{{ $client.PeerID}}');
-                                   $('.collapse.peerInfo').collapse('hide');
-                                   $('#peerInfo-{{ $client.PeerID }}').collapse('show');
-                          ">
-                          <a href="#name={{ $client.Name }}">{{ $client.Name }}</a>
-                        </span>
+                      <svg class="client-node-icon" data-jdenticon-value="{{ $client.PeerID }}"></svg>
+                      <span
+                        id="clientRow-{{ $client.Name }}"
+                        style="cursor:pointer;"
+                        onclick="$_network.isolateNode(cy, '{{ $client.PeerID}}');
+                                  $('.collapse.peerInfo').collapse('hide');
+                                  $('#peerInfo-{{ $client.PeerID }}').collapse('show');
+                        ">
+                        <a href="#name={{ $client.Name }}">{{ $client.Name }}</a>
+                      </span>
                     </td>
                     <td style="font-size: 0.8rem; vertical-align: middle;">
                       <span style="width:30px;display: inline-block;" class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Inbound Peers">
@@ -122,7 +120,7 @@ <h2 class="accordion-header">
                           {{ range $j, $peer := $client.Peers }}
                             {{if eq "inbound" $peer.Direction}}
                             <div style="padding-left: 20px; padding-top:3px">
-                              <img src="/identicon?key={{ $peer.ID }}" class="peer-table-icon {{ $peer.State }}" alt="{{ $peer.State }}"/>
+                              <svg class="peer-table-icon {{ $peer.State }}" data-jdenticon-value="{{ $peer.ID }}"></svg>
                               <code data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ $peer.ID }}">
                                 {{ $peer.Alias }}
                                 {{ if eq $peer.Type "internal" }}
@@ -139,7 +137,7 @@ <h2 class="accordion-header">
                           {{ range $j, $peer := $client.Peers }}
                             {{if eq "outbound" $peer.Direction}}
                             <div style="padding-left: 20px; padding-top:3px">
-                              <img src="/identicon?key={{ $peer.ID }}" class="peer-table-icon {{ $peer.State }}" alt="{{ $peer.State }}"/>
+                              <svg class="peer-table-icon {{ $peer.State }}" data-jdenticon-value="{{ $peer.ID }}"></svg>
                               <code data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ $peer.ID }}">
                                 {{ $peer.Alias }}
                                 {{ if eq $peer.Type "internal" }}
@@ -179,6 +177,7 @@ <h2 class="accordion-header">
 {{ end }}
 
 {{ define "js" }}
+<script src="/js/vendor/jdenticon-3.3.0.min.js"></script>
 <script src="/js/vendor/cytoscape.min.js"></script>
 <script src="/js/vendor/cytoscape-layout-base.js"></script>
 <script src="/js/vendor/cytoscape-cose-base.js"></script>

diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
@@ -61,18 +61,16 @@ <h2 class="accordion-header">
                   <tr>
                     <td>{{ $client.Index }}</td>
                     <td>
-                      <img src="/identicon?key={{ $client.PeerID }}"
-                        alt="{{ $client.PeerID }}"
-                        class="client-node-icon"/>
-                        <span
-                          id="clientRow-{{ $client.Name }}"
-                          style="cursor:pointer;"
-                          onclick="$_network.isolateNode(cy, '{{ $client.PeerID}}');
-                                   $('.collapse.peerInfo').collapse('hide');
-                                   $('#peerInfo-{{ $client.PeerID }}').collapse('show');
-                          ">
-                          <a href="#name={{ $client.Name }}">{{ $client.Name }}</a>
-                        </span>
+                      <svg class="client-node-icon" data-jdenticon-value="{{ $client.PeerID }}"></svg>
+                      <span
+                        id="clientRow-{{ $client.Name }}"
+                        style="cursor:pointer;"
+                        onclick="$_network.isolateNode(cy, '{{ $client.PeerID}}');
+                                  $('.collapse.peerInfo').collapse('hide');
+                                  $('#peerInfo-{{ $client.PeerID }}').collapse('show');
+                        ">
+                        <a href="#name={{ $client.Name }}">{{ $client.Name }}</a>
+                      </span>
                     </td>
                     <td style="font-size: 0.8rem; vertical-align: middle;">
                       <span style="width:30px;display: inline-block;" class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Inbound Peers">
@@ -150,7 +148,7 @@ <h2 class="accordion-header">
                           {{ range $j, $peer := $client.Peers }}
                             {{if eq "inbound" $peer.Direction}}
                             <div style="padding-left: 20px; padding-top:3px">
-                              <img src="/identicon?key={{ $peer.ID }}" class="peer-table-icon" title="{{ $peer.State }}"/>
+                              <svg class="peer-table-icon {{ $peer.State }}" data-jdenticon-value="{{ $peer.ID }}"></svg>
                               <code data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ $peer.ID }}">
                                 {{ $peer.Alias }}
                                 {{ if eq $peer.Type "internal" }}
@@ -167,7 +165,7 @@ <h2 class="accordion-header">
                           {{ range $j, $peer := $client.Peers }}
                             {{if eq "outbound" $peer.Direction}}
                             <div style="padding-left: 20px; padding-top:3px">
-                              <img src="/identicon?key={{ $peer.ID }}" class="peer-table-icon {{ $peer.State }}" alt="{{ $peer.State }}"/>
+                              <svg class="peer-table-icon {{ $peer.State }}" data-jdenticon-value="{{ $peer.ID }}"></svg>
                               <code data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ $peer.ID }}">
                                 {{ $peer.Alias }}
                                 {{ if eq $peer.Type "internal" }}
@@ -207,6 +205,7 @@ <h2 class="accordion-header">
 {{ end }}
 
 {{ define "js" }}
+<script src="/js/vendor/jdenticon-3.3.0.min.js"></script>
 <script src="/js/vendor/cytoscape.min.js"></script>
 <script src="/js/vendor/cytoscape-layout-base.js"></script>
 <script src="/js/vendor/cytoscape-cose-base.js"></script>