Skip to content

fix: update performance tests counter to use camelCase API Key #7870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Sumedh-6504 wants to merge 5 commits into from
Closed

fix: update performance tests counter to use camelCase API Key #7870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
96a163f
fix: update performance tests counter to use camelCase API Key
Sumedh-6504 Jul 14, 2026
25f7371
Merge branch 'master' into fix/performance-runs-counter
Sumedh-6504 Jul 16, 2026
3e43f0c
Merge branch 'master' into fix/performance-runs-counter
Sumedh-6504 Jul 17, 2026
1011daf
Merge branch 'master' into fix/performance-runs-counter
Sumedh-6504 Jul 20, 2026
cee5934
Merge branch 'master' into fix/performance-runs-counter
Sumedh-6504 Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions onRenderBody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const themes = { light: lighttheme, dark: darktheme };
const MagicScriptTag = (props) => {
// FIX: Stringify the theme object outside the template literal to prevent syntax errors caused by unescaped quotes inside theme values.
const themeJSON = JSON.stringify(props.theme);

// Injects CSS variables and theme state strictly before the first paint to prevent FOUC.
const codeToRunOnClient = `
(function() {
Expand Down Expand Up @@ -75,6 +75,6 @@ const MagicScriptTag = (props) => {

// FIX: Using setHeadComponents instead of setPreBodyComponents ensures the script runs
// strictly in the <head>, blocking the first paint until the theme is applied and completely eliminating FOUC.
export const onRenderBody = ( { setHeadComponents }) => {
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([<MagicScriptTag key="theme-injection" theme={themes} />]);
};
};
33 changes: 14 additions & 19 deletions src/components/MeetInfo-Table/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,24 @@ import { useTable } from "react-table";
import { TableWrapper } from "./MeetInfoTable.style";

const Table = ({ columns, data, showHeader = true }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
});
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable({
columns,
data,
});

return (
<TableWrapper>
{showHeader && (
<>
<h1 className="meetings-table-title">
<a href="#meetings">Layer5 Meetings</a>
</h1>
<h3 className="meetings-table-subtitle">
Everyone is welcome to join. Engage!
</h3>
</>
)}
<>
<h1 className="meetings-table-title">
<a href="#meetings">Layer5 Meetings</a>
</h1>
<h3 className="meetings-table-subtitle">
Everyone is welcome to join. Engage!
</h3>
</>
)}
<table name="meetings" id="meetings" {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
Expand Down
9 changes: 7 additions & 2 deletions src/sections/Counters/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,13 @@ const Counters = () => {

useEffect(() => {
fetch(URL)
.then(response => response.json())
.then(result => setPerformanceCount(result.total_runs));
.then((response) => response.json())
.then((result) =>
setPerformanceCount(result.totalRuns || result.total_runs),
)
.catch((error) => {
console.error("Failed to fetch performance count:", error.message);
});
Comment on lines +15 to +21

@coderabbitai coderabbitai Bot Jul 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== File list ==\n'
git ls-files 'src/sections/Counters/index.js' \
  'src/sections/Meshery/Features-Col/index.js' \
  'src/sections/Meshery/How-meshery-works/specs/data-card.js' \
  'src/sections/Projects/Nighthawk/index.js'

printf '\n== Relevant excerpts ==\n'
for f in \
  src/sections/Counters/index.js \
  src/sections/Meshery/Features-Col/index.js \
  src/sections/Meshery/How-meshery-works/specs/data-card.js \
  src/sections/Projects/Nighthawk/index.js
do
  echo "--- $f"
  nl -ba "$f" | sed -n '1,220p'
done

Repository: layer5io/layer5

Length of output: 444

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
from pathlib import Path

files = [
    Path("src/sections/Counters/index.js"),
    Path("src/sections/Meshery/Features-Col/index.js"),
    Path("src/sections/Meshery/How-meshery-works/specs/data-card.js"),
    Path("src/sections/Projects/Nighthawk/index.js"),
]
for path in files:
    text = path.read_text()
    print(f"\n== {path} ==")
    for needle in ["fetch(", "response.ok", "totalRuns", "total_runs", "setPerformanceCount", "250000", "0 if fetch fails"]:
        if needle in text:
            print(f"contains: {needle}")
PY

Repository: layer5io/layer5

Length of output: 772

🏁 Script executed:

#!/bin/bash
set -euo pipefail

sed -n '1,220p' src/sections/Counters/index.js
printf '\n----\n'
sed -n '1,220p' src/sections/Meshery/Features-Col/index.js
printf '\n----\n'
sed -n '1,220p' src/sections/Meshery/How-meshery-works/specs/data-card.js
printf '\n----\n'
sed -n '1,220p' src/sections/Projects/Nighthawk/index.js

Repository: layer5io/layer5

Length of output: 17078

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
from pathlib import Path
files = [
    "src/sections/Counters/index.js",
    "src/sections/Meshery/Features-Col/index.js",
    "src/sections/Meshery/How-meshery-works/specs/data-card.js",
    "src/sections/Projects/Nighthawk/index.js",
]
for f in files:
    text = Path(f).read_text().splitlines()
    print(f"\n== {f} ==")
    for i, line in enumerate(text, 1):
        if any(key in line for key in ["performanceCount", "250000", "totalRuns", "total_runs", "fetch(", "response.ok"]):
            start = max(1, i-2)
            end = min(len(text), i+2)
            print(f"-- lines {start}-{end}")
            for j in range(start, end+1):
                print(f"{j:4d}: {text[j-1]}")
PY

Repository: layer5io/layer5

Length of output: 4551

Standardize the performance-count fallback across these callers.

  • src/sections/Counters/index.js, src/sections/Meshery/How-meshery-works/specs/data-card.js, and src/sections/Projects/Nighthawk/index.js use result.totalRuns || result.total_runs, which drops a valid 0 and can set performanceCount to undefined.
  • src/sections/Meshery/Features-Col/index.js uses a different non-OK fallback (250000), so the same metric renders inconsistently in this section.

Use ?? and one shared parser/helper so every consumer follows the same contract.

📍 Affects 4 files
  • src/sections/Counters/index.js#L15-L21 (this comment)
  • src/sections/Meshery/Features-Col/index.js#L96-L105
  • src/sections/Meshery/How-meshery-works/specs/data-card.js#L50-L57
  • src/sections/Projects/Nighthawk/index.js#L27-L34
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/sections/Counters/index.js` around lines 15 - 21, Standardize
performance-count parsing by introducing one shared helper that prefers
totalRuns, falls back to total_runs with nullish coalescing, and preserves valid
zero values. Update the fetch consumers in src/sections/Counters/index.js,
src/sections/Meshery/Features-Col/index.js,
src/sections/Meshery/How-meshery-works/specs/data-card.js, and
src/sections/Projects/Nighthawk/index.js to use that helper, including replacing
Features-Col’s 250000 non-OK fallback so all sections share the same contract.

}, []);

return (
Expand Down
174 changes: 132 additions & 42 deletions src/sections/Meshery/Features-Col/data/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,76 +14,164 @@ const LifecycleFeature = () => {
}
`);


const lifecycleFeatureData = {
name: "Lifecycle",
description: "Manage and operate your cloud native infra from discovery to deployment.",
description:
"Manage and operate your cloud native infra from discovery to deployment.",
link: "#",
btnText: "Discover your clusters",
services: [
{ content: "Multi-cluster operations from a central console", className: "--on" },
{ content: "Discover, deploy, and visualize Kubernetes clusters", className: "--on" },
{ content: "Dry-run capabilities and change previews in pull requests", className: "--on" },
{ content: "Meshery CLI (mesheryctl) for streamlined cluster ops", className: "--on" },
{ content: "Bulk import of infrastructure as code from GitHub", className: "--on" },
{ content: "Helm chart generation and environment configuration", className: "--on" },
{ content: "Workspaces for centralized team and project management", className: "--on" },
{ content: "Environments for grouped resource access and control", className: "--on" },
{ content: "GitOps snapshots and insights in pull requests", className: "--on" },
{ content: "Role-based access control and multi-tenant support", className: "--on" }
{
content: "Multi-cluster operations from a central console",
className: "--on",
},
{
content: "Discover, deploy, and visualize Kubernetes clusters",
className: "--on",
},
{
content: "Dry-run capabilities and change previews in pull requests",
className: "--on",
},
{
content: "Meshery CLI (mesheryctl) for streamlined cluster ops",
className: "--on",
},
{
content: "Bulk import of infrastructure as code from GitHub",
className: "--on",
},
{
content: "Helm chart generation and environment configuration",
className: "--on",
},
{
content: "Workspaces for centralized team and project management",
className: "--on",
},
{
content: "Environments for grouped resource access and control",
className: "--on",
},
{
content: "GitOps snapshots and insights in pull requests",
className: "--on",
},
{
content: "Role-based access control and multi-tenant support",
className: "--on",
},
],
count: {
value: 300,
description: "cloud native integrations"
}
description: "cloud native integrations",
},
};


const configurationFeatureData = {
name: "Configuration",
description: "Design, validate, and version your infra with visual tools and best practices.",
description:
"Design, validate, and version your infra with visual tools and best practices.",
link: "#",
btnText: "Get Started",
services: [
{ content: "Drag-and-drop infrastructure designer (Kanvas)", className: "--on" },
{ content: "400+ reusable design templates and patterns", className: "--on" },
{ content: "Define semantic and non-semantic relationships visually", className: "--on" },
{ content: "Export designs: Kubernetes, Helm, Docker Compose, OCI", className: "--on" },
{ content: "Static validation and OPA-based policy enforcement", className: "--on" },
{ content: "Version control and inline design review tools", className: "--on" },
{
content: "Drag-and-drop infrastructure designer (Kanvas)",
className: "--on",
},
{
content: "400+ reusable design templates and patterns",
className: "--on",
},
{
content: "Define semantic and non-semantic relationships visually",
className: "--on",
},
{
content: "Export designs: Kubernetes, Helm, Docker Compose, OCI",
className: "--on",
},
{
content: "Static validation and OPA-based policy enforcement",
className: "--on",
},
{
content: "Version control and inline design review tools",
className: "--on",
},
{ content: "Custom models with OCI registry support", className: "--on" },
{ content: "Web terminal for direct container/pod access", className: "--on" },
{ content: "Extension points: gRPC adapters, hot-loadable React and Golang plugins", className: "--on" },
{ content: "REST and GraphQL APIs for platform extensibility", className: "--on" }
{
content: "Web terminal for direct container/pod access",
className: "--on",
},
{
content:
"Extension points: gRPC adapters, hot-loadable React and Golang plugins",
className: "--on",
},
{
content: "REST and GraphQL APIs for platform extensibility",
className: "--on",
},
],
count: {
value: 1500,
description: "standardized components"
}
description: "standardized components",
},
};


const performanceFeatureData = {
name: "Optimization",
description: "Assess, benchmark, and improve the performance of your infra.",
description:
"Assess, benchmark, and improve the performance of your infra.",
link: "#",
btnText: "Start Performance Testing",
services: [
{ content: "Performance profiles for consistent benchmarking", className: "--on" },
{ content: "Built-in load generators: Fortio, Wrk2, Nighthawk", className: "--on" },
{ content: "Comparative testing with visual result analysis", className: "--on" },
{ content: "Statistical reporting: latency histograms, buckets", className: "--on" },
{ content: "Cloud Native Performance spec compliance", className: "--on" },
{ content: "Historical performance tracking across versions", className: "--on" },
{ content: "Prometheus and Grafana integration for metrics", className: "--on" },
{ content: "Support for soak, burst, and capacity tests", className: "--on" },
{ content: "HTTP, TCP, and gRPC load generation support", className: "--on" },
{ content: "Behavioral comparison of CNFs across deployments", className: "--on" }
{
content: "Performance profiles for consistent benchmarking",
className: "--on",
},
{
content: "Built-in load generators: Fortio, Wrk2, Nighthawk",
className: "--on",
},
{
content: "Comparative testing with visual result analysis",
className: "--on",
},
{
content: "Statistical reporting: latency histograms, buckets",
className: "--on",
},
{
content: "Cloud Native Performance spec compliance",
className: "--on",
},
{
content: "Historical performance tracking across versions",
className: "--on",
},
{
content: "Prometheus and Grafana integration for metrics",
className: "--on",
},
{
content: "Support for soak, burst, and capacity tests",
className: "--on",
},
{
content: "HTTP, TCP, and gRPC load generation support",
className: "--on",
},
{
content: "Behavioral comparison of CNFs across deployments",
className: "--on",
},
],
count: {
value: 0,
description: "performance tests run"
}
description: "performance tests run",
},
};

// const collaborationFeatureData = {
Expand Down Expand Up @@ -127,7 +215,9 @@ const LifecycleFeature = () => {

// Count the total number of integrations
const totalIntegrations =
Math.ceil(integrations.allMdx.totalCount / 10) * 10;
integrations.allMdx.totalCount > 0
? Math.ceil(integrations.allMdx.totalCount / 10) * 10
: lifecycleFeatureData.count.value;

// Update the count value in lifecycleFeatureData
const lifecycleFeatureDataUpdated = {
Expand Down
43 changes: 33 additions & 10 deletions src/sections/Meshery/Features-Col/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,22 @@ function getServiceFeature(service, index) {
<tbody>
<tr>
<td className="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5" /><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20" /></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
fill="none"
viewBox="0 0 40 40"
>
<rect width="40" height="40" fill="#C9FCF6" rx="5" />
<path
stroke="#00B39F"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M28 14L17 25L12 20"
/>
</svg>
</td>
<td className="service">{service.content}</td>
</tr>
Expand All @@ -38,7 +53,7 @@ function getFeatureBlock(feature, index, performanceCount) {
</FeatureTitleInfoContainer>
<FeatureInfoContainer>
{feature.services.map((service, index) =>
getServiceFeature(service, index)
getServiceFeature(service, index),
)}
</FeatureInfoContainer>
<CountBlockContainer>
Expand All @@ -49,7 +64,12 @@ function getFeatureBlock(feature, index, performanceCount) {
end={
feature.count.value !== 0 ? feature.count.value : performanceCount
}
suffix= {(feature.count.description == "components" || feature.count.description == "cloud native integrations") ? "+" : " "}
suffix={
feature.count.description == "components" ||
feature.count.description == "cloud native integrations"
? "+"
: " "
}
/>
</h1>
<p className="count-desc">{feature.count.description}</p>
Expand All @@ -60,7 +80,8 @@ function getFeatureBlock(feature, index, performanceCount) {

const Features = () => {
const [performanceCount, setPerformanceCount] = useState(0);
const performanceCountEndpoint = "https://cloud.layer5.io/api/performance/results/total";
const performanceCountEndpoint =
"https://cloud.layer5.io/api/performance/results/total";

useEffect(() => {
fetch(performanceCountEndpoint)
Expand All @@ -72,13 +93,16 @@ const Features = () => {
return response.json();
})
.then((resultcount) => {
if (resultcount && typeof resultcount.total_runs === "number") {
setPerformanceCount(resultcount.total_runs);
const count = resultcount
? resultcount.totalRuns || resultcount.total_runs
: undefined;
if (typeof count === "number") {
setPerformanceCount(count);
}
})
.catch((error) => {
console.log("Failed to fetch performance count:", error.message);
// Keep default value of 0 if fetch fails
console.error("Failed to fetch performance count:", error.message);
// Keep default value of 0 if fetch fails
});
}, []);

Expand All @@ -94,12 +118,11 @@ const Features = () => {
</TitleContainer>
<FeaturesSectionContainer>
{data.map((feature, index) =>
getFeatureBlock(feature, index, performanceCount)
getFeatureBlock(feature, index, performanceCount),
)}
</FeaturesSectionContainer>
</FeaturesSectionWrapper>
);
};


export default Features;
Loading
Loading