Skip to content

Commit d809446

Browse files
missBergmissBerg
authored
docs: benchmark dashboard exploration tool (envoyproxy#6399)
* add benchmark report explorer tool Signed-off-by: Erica Hughberg <[email protected]> * tidy benchmark report explorer tool Signed-off-by: Erica Hughberg <[email protected]> * fix styling for benchmark report explorer tool Signed-off-by: Erica Hughberg <[email protected]> * add mean lines to cpu graph Signed-off-by: Erica Hughberg <[email protected]> --------- Signed-off-by: Erica Hughberg <[email protected]>
1 parent 6f42531 commit d809446

File tree

124 files changed

+35742
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+35742
-2
lines changed

‎site/.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
resources/
33
node_modules/
44
package-lock.json
5-
.hugo_build.lock
5+
.hugo_build.lock
6+
dist/

‎site/assets/scss/_styles_project.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
// Import Bootstrap variables and mixins
2+
@import "../../node_modules/bootstrap/scss/functions";
3+
@import "../../node_modules/bootstrap/scss/variables";
4+
@import "../../node_modules/bootstrap/scss/mixins";
5+
16
// Custom theme colors and variables
27
$primary: #9333EA;
38
$secondary: #4F46E5;

‎site/content/en/tools/benchmark-report-explorer/index.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "Performance Benchmark Report Explorer"
3+
description: "Envoy Gateway Performance Benchmark Report Explorer Tool"
4+
type: "tools"
5+
includeBenchmark: true
6+
---
7+
8+
<style>
9+
.bt-container {
10+
max-width: 1200px;
11+
margin: 0 auto;
12+
padding: 2rem;
13+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
14+
}
15+
16+
.bt-title {
17+
font-size: 3.5rem;
18+
font-weight: 800;
19+
margin-bottom: 2.5rem;
20+
background: linear-gradient(135deg, #9333EA 0%, #4F46E5 100%);
21+
-webkit-background-clip: text;
22+
background-clip: text;
23+
-webkit-text-fill-color: transparent;
24+
line-height: 1.4;
25+
letter-spacing: -0.02em;
26+
}
27+
28+
.bt-description {
29+
font-size: 1.25rem;
30+
color: #666;
31+
margin-bottom: 2rem;
32+
line-height: 1.6;
33+
}
34+
</style>
35+
36+
<div class="bt-container">
37+
<h1 class="bt-title">Performance Benchmark Report Explorer</h1>
38+
<p class="bt-description">
39+
Explore benchmark results from Envoy Gateway Releleases. The test code is open source and available for you to run and contribute to.
40+
</p>
41+
<p class="bt-description">Curious to learn more? Join the conversation in <code>#gateway-users</code> channel in <a href="https://communityinviter.com/apps/envoyproxy/envoy">Envoy Slack</a></p>
42+
43+
{{< benchmark-dashboard
44+
version="latest"
45+
showHeader="false"
46+
class="mt-4"
47+
>}}
48+
</div>

‎site/layouts/partials/navbar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ $cover := .HasShortcode "blocks/cover" }}
2-
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark flex-column flex-md-row td-navbar">
2+
<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light td-navbar">
33
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
44
{{ $logoRegular := resources.Get "icons/logo.svg" }}
55
{{ $logoWhite := resources.Get "icons/logo-white.svg" }}

‎site/layouts/shortcodes/benchmark-dashboard.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!-- layouts/shortcodes/benchmark-dashboard.html -->
2+
{{- $apiBase := .Get "apiBase" | default site.Params.benchmark.apiBase -}}
3+
{{- $version := .Get "version" | default "latest" -}}
4+
{{- $theme := .Get "theme" | default "light" -}}
5+
{{- $showHeader := .Get "showHeader" | default "false" -}}
6+
{{- $showVersionSelector := .Get "showVersionSelector" | default "true" -}}
7+
{{- $showSummaryCards := .Get "showSummaryCards" | default "true" -}}
8+
{{- $tabs := .Get "tabs" | default "overview,latency,resources" -}}
9+
{{- $containerClass := .Get "class" | default "my-8" -}}
10+
11+
<!-- Always load CSS to make it available for Shadow DOM -->
12+
<link rel="stylesheet" href="{{ "/css/benchmark-dashboard.css" | relURL }}">
13+
14+
<div
15+
data-react-component="benchmark-dashboard"
16+
data-api-base="{{ $apiBase }}"
17+
data-version="{{ $version }}"
18+
data-theme="{{ $theme }}"
19+
data-show-header="{{ $showHeader }}"
20+
data-show-version-selector="{{ $showVersionSelector }}"
21+
data-show-summary-cards="{{ $showSummaryCards }}"
22+
data-tabs="{{ $tabs }}"
23+
data-container-class="{{ $containerClass }}"
24+
class="benchmark-dashboard-container {{ $containerClass }}"
25+
>
26+
<!-- Loading placeholder -->
27+
<div class="flex items-center justify-center py-12">
28+
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mr-3"></div>
29+
<span class="text-gray-600">Loading Benchmark Dashboard...</span>
30+
</div>
31+
</div>
32+
33+
<!-- Only load JS if not on a standalone page (which loads shadow DOM version via body-end.html) -->
34+
{{ if not .Page.Params.includeBenchmark }}
35+
<script type="module" src="{{ "/js/benchmark-dashboard.js" | relURL }}"></script>
36+
{{ end }}

‎site/layouts/tools/single.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html lang="{{ .Site.Language.Lang }}" class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
8+
{{/* SEO meta tags */}}
9+
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
10+
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
11+
12+
{{/* Open Graph meta tags */}}
13+
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
14+
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
15+
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
16+
<meta property="og:url" content="{{ .Permalink }}">
17+
18+
{{/* Bootstrap CSS from CDN for reliable styling */}}
19+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
20+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
21+
22+
{{/* Custom project styles */}}
23+
{{ $projectStyles := resources.Get "scss/_styles_project.scss" | css.Sass }}
24+
<link rel="stylesheet" href="{{ $projectStyles.RelPermalink }}">
25+
26+
27+
</head>
28+
<body class="td-{{ .Kind }}">
29+
<!-- Include site navbar -->
30+
{{ partial "navbar.html" . }}
31+
32+
<div class="tool-container">
33+
<main role="main" class="tool-content">
34+
{{ block "main" . }}
35+
{{ .Content }}
36+
{{ end }}
37+
</main>
38+
</div>
39+
40+
<!-- Include site footer -->
41+
{{ partial "footer.html" . }}
42+
43+
{{/* Bootstrap JS from CDN */}}
44+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
45+
46+
<!-- Include any additional JavaScript needed for the Tools -->
47+
{{ if .Params.includeBenchmark }}
48+
<script type="module" src="{{ "/js/benchmark-dashboard.js" | relURL }}"></script>
49+
{{ end }}
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)