Update deployed page with generated flamegraphs

lambdaclass · Dec 5, 2024 · b128f48 · b128f48
1 parent 73c5edf
commit b128f48
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 53 deletions.
diff --git a/.github/scripts/flamegraph.sh b/.github/scripts/flamegraph.sh
@@ -10,10 +10,12 @@ ethrex_l2 test load --path ./test_data/private_keys.txt -i $iterations -v  --val
 
 echo "Waiting for transactions to be processed..."
 output=$(cast balance $account --rpc-url=http://localhost:1729 2>&1)
-while [[ $output -le $end_val ]]; do
+retries=0
+while [[ $output -le $end_val && $retries -lt 30 ]]; do
     sleep 5
     output=$(cast balance $account --rpc-url=http://localhost:1729 2>&1)
+    echo "balance was $output still not reached value of $end_val"
 done
 echo "Done. Balance of $output reached, killing process ethrex"
-sudo pkill ethrex && while pgrep -l "cargo-flamegraph"; do sleep 1;done;
+sudo pkill ethrex && while pgrep -l "cargo-flamegraph"; do echo "waiting for reth to exit... "; sleep 1;done;
 echo "ethrex killed"
diff --git a/.github/scripts/flamegraph_reth.sh b/.github/scripts/flamegraph_reth.sh
@@ -12,7 +12,8 @@ output=$(cast balance $account --rpc-url=http://localhost:1729 2>&1)
 while [[ $output -le $end_val ]]; do
     sleep 5
     output=$(cast balance $account --rpc-url=http://localhost:1729 2>&1)
+    echo "balance was $output still not reached value of $end_val"
 done
 echo "Balance of $output reached, killing process reth"
 
-sudo pkill reth && while pgrep -l "cargo-flamegraph"; do sleep 1;done;
+sudo pkill reth && while pgrep -l "cargo-flamegraph"; do echo "waiting for reth to exit... "; sleep 1;done;
diff --git a/.github/workflows/deploy_page.yaml b/.github/workflows/deploy_page.yaml
diff --git a/.github/workflows/flamegraph_reporter.yaml b/.github/workflows/flamegraph_reporter.yaml
@@ -1,5 +1,10 @@
 name: Daily Flamegraph Reporter
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 on:
   push:
     branches: [ "main" ]
@@ -65,14 +70,14 @@ jobs:
           echo "running perf"
           perf script -v -i perf.data --no-inline > stack.data
           inferno-collapse-perf < stack.data > collapsed.data
-          inferno-flamegraph < collapsed.data > flamegraph.svg
-          file flamegraph.svg
+          inferno-flamegraph < collapsed.data > flamegraph_ethrex.svg
+          file flamegraph_ethrex.svg
 
-      - name: Upload artifacts - flamegraph.svg
+      - name: Upload artifacts - flamegraph_ethrex.svg
         uses: actions/upload-artifact@v4
         with:
-          name: flamegraph.svg
-          path: ./flamegraph.svg
+          name: flamegraph_ethrex.svg
+          path: ./flamegraph_ethrex.svg
 
   flamegraph-reth:
     name: Generate Flamegraph for Reth
@@ -147,3 +152,45 @@ jobs:
         with:
           name: flamegraph_reth.svg
           path: ./flamegraph_reth.svg
+
+  upload-static-page:
+    name: Upload artifacts for static page
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: [ flamegraph, flamegraph-reth ]
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@v4
+
+      - name: Download ethrex flamegraph artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: flamegraph_ethrex
+          path: flamegraph_ethrex.svg
+
+      - name: Download reth flamegraph artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: flamegraph_reth
+          path: flamegraph_reth.svg
+
+      - name: Update static page locally with new data
+        run: |
+          cp flamegraph_ethrex.svg pages/
+          cp flamegraph_reth.svg pages/
+          echo "NOW=$(date +'%Y-%m-%dT%H:%M:%S')" >> $GITHUB_ENV
+          sed -i "s/{{LAST_UPDATE}}/$NOW/g" pages/index.html
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'pages/'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/pages/index.html b/pages/index.html
@@ -1,7 +1,48 @@
-<html>
-<head></head>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ethrex Flamegraph Comparison</title>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+</head>
 <body>
-<h1>Flamegraphs</h1>
-<img src="flamegraph.svg" alt="A flamegraph"/>
+<header>
+    <h1>Ethrex Flamegraph Comparison</h1>
+    <p class="last-updated">Last update: {{LAST_UPDATE}}</p>
+</header>
+<main class="container">
+    <div class="column">
+        <div class="col-header">
+            <h2>Ethrex</h2>
+            <a href="flamegraph_ethrex.svg" download="flamegraph_ethrex.svg">Download</a>
+        </div>
+        <object id="svg1" data="flamegraph_ethrex.svg" type="image/svg+xml" width=90% height=90%"></object>
+    </div>
+    <div class="column">
+        <div class="col-header">
+            <h2>Reth</h2>
+            <a href="flamegraph_reth.svg" download="flamegraph_reth.svg">Download</a>
+        </div>
+        <object id="svg2" data="flamegraph_reth.svg" type="image/svg+xml" width=90% height=90%></object>
+    </div>
+</main>
+
+<script>
+    // We need this so that the SVG can scale to the container.
+    function adjustViewBox(objectId) {
+        const object = document.getElementById(objectId);
+        object.addEventListener('load', () => {
+            const svgDocument = object.contentDocument;
+            const svgElement = svgDocument.querySelector('svg');
+            if (svgElement) {
+                svgElement.setAttribute('viewBox', '0 0 1000 1000');
+            }
+        });
+    }
+
+    adjustViewBox('svg1');
+    adjustViewBox('svg2');
+</script>
 </body>
 </html>
diff --git a/pages/style.css b/pages/style.css
@@ -0,0 +1,62 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 1.5em;
+}
+
+h1 {
+    margin-bottom: 0;
+}
+
+.last-updated {
+    margin-top: 0.5em;
+    font-weight: lighter;
+    color: dimgray;
+}
+
+.container {
+    display: flex;
+    gap: 10px;
+    width: 90%;
+}
+
+.column {
+    flex: 1;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 80vh;
+}
+
+img {
+    width: 80%;
+    height: auto;
+    max-width: 200px;
+    max-height: 150px; /* Prevent SVGs from being too tall */
+}
+
+h2 {
+    margin-bottom: 5px;
+    font-size: 1.5rem;
+}
+
+.col-header {
+    margin-bottom: 2em;
+}