Skip to content

Commit

Permalink
Merge pull request #79 from ethpandaops/skylenet/tidy-up-clients-pages
Browse files Browse the repository at this point in the history
multiple client pages fixes and improvements
  • Loading branch information
skylenet authored Jul 17, 2024
2 parents abd6f6f + aa31bf4 commit 3e3cca5
Show file tree
Hide file tree
Showing 5 changed files with 188 additions and 232 deletions.
9 changes: 6 additions & 3 deletions .hack/devnet/run.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)

Expand Down Expand Up @@ -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:
Expand Down
7 changes: 7 additions & 0 deletions static/css/clients.css
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
130 changes: 130 additions & 0 deletions static/js/vis-network-aux.js
Original file line number Diff line number Diff line change
@@ -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,
},
},
};
135 changes: 22 additions & 113 deletions templates/clients/clients_cl.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"/>
Expand Down Expand Up @@ -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);
Expand Down
Loading

0 comments on commit 3e3cca5

Please sign in to comment.