rust-lang · chengr4 · Apr 27, 2024 · Apr 27, 2024 · Apr 27, 2024 · Apr 27, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,6 +14,10 @@ jobs:
   test_and_deploy:
     name: Test and deploy
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+
     steps:
       - name: Checkout the source code
         uses: actions/checkout@v2
@@ -30,6 +34,17 @@ jobs:
       - uses: Swatinem/rust-cache@v2
         with:
           key: linux
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Build frontend for testing
+        run: |
+          npm ci
+          npm run build
+        working-directory: ./site/frontend
 
       - name: Run unit tests
         run: cargo test --all
@@ -66,6 +81,10 @@ jobs:
   test_on_windows:
     name: Test on Windows
     runs-on: windows-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+
     steps:
       - name: Checkout the source code
         uses: actions/checkout@v2
@@ -87,6 +106,17 @@ jobs:
         env:
             RUSTFLAGS: -Dwarnings
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Build frontend for testing
+        run: |
+          npm ci
+          npm run build
+        working-directory: ./site/frontend
+
       - name: Run unit tests
         run: cargo test --all
 

diff --git a/site/frontend/.posthtmlrc b/site/frontend/.posthtmlrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "posthtml-include": {}
+  }
+}
diff --git a/site/frontend/package-lock.json b/site/frontend/package-lock.json
diff --git a/site/frontend/package.json b/site/frontend/package.json
@@ -15,10 +15,16 @@
     "@parcel/compressor-brotli": "^2.8.3",
     "@parcel/transformer-vue": "^2.8.3",
     "@types/msgpack-lite": "^0.1.8",
+    "posthtml-include": "^2.0.1",
     "prettier": "2.8.8",
     "typescript": "^5.0.2",
     "vue-tsc": "^1.8.3"
   },
+  "@parcel/bundler-default": {
+    "minBundles": 999,
+    "minBundleSize": 9999999,
+    "maxParallelRequests": 20
+  },
   "dependencies": {
     "date-fns": "^2.30.0",
     "highcharts": "^11.4.1",
@@ -30,32 +36,28 @@
   },
   "targets": {
     "dashboard": {
-      "source": "src/pages/dashboard.ts",
-      "distDir": "dist/scripts"
+      "source": "src/templates/dashboard.html",
+      "distDir": "dist/"
     },
     "status": {
-      "source": "src/pages/status.ts",
-      "distDir": "dist/scripts"
+      "source": "src/templates/status.html",
+      "distDir": "dist/"
     },
     "bootstrap": {
-      "source": "src/pages/bootstrap.ts",
-      "distDir": "dist/scripts"
+      "source": "src/templates/bootstrap.html",
+      "distDir": "dist/"
     },
     "graphs": {
-      "source": "src/pages/graphs.ts",
-      "distDir": "dist/scripts"
+      "source": "src/templates/graphs.html",
+      "distDir": "dist/"
     },
     "compare": {
-      "source": "src/pages/compare.ts",
-      "distDir": "dist/scripts"
+      "source": "src/templates/compare.html",
+      "distDir": "dist/"
     },
     "detailed-query": {
-      "source": "src/pages/detailed-query.ts",
-      "distDir": "dist/scripts"
-    },
-    "uplot": {
-      "source": "node_modules/uplot/dist/uPlot.min.css",
-      "distDir": "dist/styles"
+      "source": "src/templates/detailed-query.html",
+      "distDir": "dist/"
     }
   },
   "browserslist": "> 0.5%, last 3 years, not dead",

diff --git a/site/frontend/src/templates/bootstrap.html b/site/frontend/src/templates/bootstrap.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <include src="src/templates/layout/head.html"></include>
+    <link rel="stylesheet" href="../../node_modules/uplot/dist/uPlot.min.css" />
+    <style>
+      .uplot {
+        display: inline-block;
+        vertical-align: top;
+        width: min-content;
+      }
+
+      .u-over {
+        box-shadow: 0px 0px 0px 0.5px #ccc;
+      }
+
+      .u-legend {
+        text-align: left;
+        padding-left: 50px;
+      }
+
+      .u-inline tr {
+        margin-right: 8px;
+      }
+
+      .u-label {
+        font-size: 12px;
+      }
+
+      .u-tooltip {
+        font-size: 10pt;
+        position: absolute;
+        background: #fff;
+        display: none;
+        border: 2px solid black;
+        padding: 4px;
+        pointer-events: none;
+        z-index: 100;
+        white-space: pre;
+        font-family: monospace;
+      }
+
+      body {
+        padding: 1em;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body class="container">
+    <include src="src/templates/layout/navbar.html"></include>
+    <div id="app"></div>
+    <include src="src/templates/layout/footer.html"></include>
+    <script type="module" src="../pages/bootstrap.ts"></script>
+  </body>
+</html>
diff --git a/site/frontend/src/templates/compare.html b/site/frontend/src/templates/compare.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <include src="src/templates/layout/head.html"></include>
+    <link rel="stylesheet" href="../../node_modules/uplot/dist/uPlot.min.css" />
+    <style>
+      body {
+        max-width: 1100px;
+        margin: 2% auto;
+      }
+
+      #app {
+        margin: 0 2%;
+      }
+
+      ul li {
+        margin: 0;
+      }
+
+      ul li input {
+        vertical-align: middle;
+        margin: 0 2px;
+      }
+
+      .section {
+        display: flex;
+        margin: 10px 0;
+      }
+
+      .section-heading {
+        font-size: 16px;
+      }
+
+      .collapsible-section {
+        border: 1px black;
+        border-style: dotted;
+        margin: 12px 0px;
+        border-radius: 10px;
+      }
+
+      input {
+        border-radius: 5px;
+        font-size: 12px;
+        height: 100%;
+      }
+
+      input[type="checkbox"] {
+        height: auto;
+      }
+
+      .category-title {
+        font-weight: bold;
+        font-size: 1.2em;
+        margin: 10px;
+        text-align: center;
+      }
+
+      .positive {
+        color: red;
+      }
+
+      .slightly-positive {
+        color: #ea7272;
+      }
+
+      .negative {
+        color: green;
+      }
+
+      .slightly-negative {
+        color: #74b374;
+      }
+    </style>
+  </head>
+  <body class="container">
+    <include src="src/templates/layout/navbar.html"></include>
+    <div id="app"></div>
+    <include src="src/templates/layout/footer.html"></include>
+    <script type="module" src="../pages/compare.ts"></script>
+  </body>
+</html>
diff --git a/site/frontend/src/templates/dashboard.html b/site/frontend/src/templates/dashboard.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <include src="src/templates/layout/head.html"></include>
+    <style>
+      .graphs {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
+        @media screen and (max-width: 768px) {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body class="container">
+    <include src="src/templates/layout/navbar.html"></include>
+    <details style="margin-top: 10px">
+      <summary>What data is in the dashboard?</summary>
+
+      The dashboard shows performance results for all stable Rust releases going
+      back to
+      <code>1.28.0</code>, along with the latest <code>beta</code> release. The
+      displayed duration is an arithmetic mean amongst all
+      <a
+        href="https://github.com/rust-lang/rustc-perf/tree/master/collector/compile-benchmarks#stable"
+        >stable</a
+      >
+      benchmarks. The dashboard also shows the average duration of runtime
+      benchmarks, which measure the performance of Rust programs compiled by a
+      given version of the Rust compiler.
+    </details>
+
+    <div class="graphs">
+      <div id="check-average-times"></div>
+      <div id="debug-average-times"></div>
+      <div id="opt-average-times"></div>
+      <div id="doc-average-times"></div>
+      <div id="runtime-average-times"></div>
+    </div>
+    <div id="as-of"></div>
+    <include src="src/templates/layout/footer.html"></include>
+    <script type="module" src="../pages/dashboard.ts"></script>
+  </body>
+</html>