SEC-359: Replace compare app with embedded Grafana dashboard#9
Draft
smypmsa wants to merge 3 commits into
Draft
Conversation
Deprecates the in-app comparison flow (compare-single, compare-double,
injection-start, injection-result-double) in favor of an iframe-embedded
view of the existing Grafana Cloud public dashboards at
chainstack.grafana.net. The 31 chain/region public dashboards already
use target=_self on every nav link, so users can switch chains and
regions without leaving compare.chainstack.com.
Paired with the backend deprecation in performance-tool-backend
(feature/SEC-359-deprecate-prod-backend) which scales the vulnerable
/scenarios API to 0 replicas.
Changes:
- src/app/page.js: rewritten as a thin iframe shell with the Ethereum
global dashboard as the entry point; users navigate to other
chains/regions inside the iframe.
- src/app/{compare-single,compare-double,injection-start,
injection-result-double}/: deleted (now-dead routes).
- next.config.js: drop wide-open /api/* CORS, add CSP that allowlists
chainstack.grafana.net for frame-src, set frame-ancestors 'none',
add HSTS / Referrer-Policy / nosniff. Redirect the four removed
routes to / for legacy bookmarks.
- src/app/store/store.js: emptied; no entities needed once the form
flow is gone.
- .env.sample: drop NEXT_PUBLIC_BACKEND_APP_URL.
- src/components/{Bento,Faq,Performance,ProtocolIcon,ResultCard}: deleted.
ResultCard imported removed store exports, the rest were only used by
the deleted pages.
Known limitation, tracked separately: chainstack.grafana.net currently
returns X-Frame-Options: deny on public-dashboard responses, so the
iframe will not render until Grafana Cloud support enables tenant-scoped
frame-ancestors for https://compare.chainstack.com. Open a ticket
referencing SEC-359 with that origin (plus any preview origin) before
merging. The "Open dashboard in a new tab" fallback link below the
iframe lets the page remain usable in the meantime.
Build verified locally with npm run build (Next.js 14, route /
prerendered as static, 64.2 kB).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…irects - Header.js: remove the in-header "Dashboard" button and its GrafanaIcon import; delete the now-unused GrafanaIcon component file. The page is the dashboard now, so the duplicate nav entry is redundant. - next.config.js: drop the /injection-start and /injection-result-double redirects. GA showed no measurable traffic on those paths, unlike /compare-single (435 views) and /compare-double (349 views) which keep their redirects.
Three layout improvements to handle Grafana's preference for widescreen: - Iframe escapes the max-w-6xl wrapper. Header / title / footer stay constrained for brand consistency, but the iframe goes edge-to-edge (minus 8-16px gutter padding) so on 1920px+ monitors it gets the ~67% extra horizontal space Grafana's grid is designed for. - Height switches from a fixed 1400px to calc(100vh - 200px) with an 800px min, so it fills available vertical real estate on laptops up to 4K monitors without arbitrary empty space at the bottom. - Below 768px (md breakpoint) the iframe is replaced with a styled "Best viewed on desktop" CTA. Grafana is genuinely unusable at phone widths; honest fallback beats a cramped iframe. The "Open in new tab" link below the iframe is now md:block only since the mobile card already provides that action. Build verified locally with npm run build.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Replaces the in-app comparison flow on
compare.chainstack.comwith an iframe-embedded view of the existing Grafana Cloud public dashboards atchainstack.grafana.net. This is the frontend half of the SEC-359 deprecation — paired with the backend PR inchainstack/performance-tool-backend#feature/SEC-359-deprecate-prod-backend, which scales the vulnerable/scenariosAPI to 0 replicas.Diff: 44 files, +68 / -2,125 (mostly dead-code deletion from the now-removed pages).
Related Issue
SEC-359 — https://chainstack.myjetbrains.com/youtrack/issue/SEC-359
What changed
src/app/page.js: rewritten as a thin shell with<Header />, an iframe pointing at the Ethereum global dashboard (?orgId=1&theme=dark&kiosk=1), and a fallback "open in new tab" link. The 31 public dashboards (8 chains × ~4 regions, audited from the dashboard JSON) all usetarget="_self"on their nav links, so chain/region switching happens inside the iframe.src/app/compare-single/,compare-double/,injection-start/,injection-result-double/. All previously hit the backend's/scenarios/*endpoints (the SSRF surface). Legacy bookmarks 301-redirect to/vianext.config.js.next.config.js:/api/*CORS block (we no longer expose APIs from this app).frame-srcallowlists onlyhttps://chainstack.grafana.net,frame-ancestors 'none'(prevents our page being framed elsewhere), HSTS,X-Content-Type-Options: nosniff,Referrer-Policy: no-referrer-when-downgrade. Defense-in-depth against the historical XSS-probe traffic GA showed on the old__proto__/constructor.prototypepaths./compare-single,/compare-double,/injection-start,/injection-result-double→/.src/app/store/store.js: emptied. No client state needed once the form flow is gone..env.sample: removedNEXT_PUBLIC_BACKEND_APP_URL.Bento,Faq,Performance,ProtocolIcon(+ all chain SVGs),ResultCard, and four now-orphaned icons.ResultCardimported now-removed store exports and would have broken the build; the rest were only used by the deleted pages.Motivation and Context
We are deprecating the compare app. The app contents is replaced with the Grafana dashboards (real-time data, multiple regions, more methods). The iframe simply surfaces them under the existing branded domain.
Known limitation — iframe will not render until Grafana support unblocks it
chainstack.grafana.netcurrently sendsX-Frame-Options: denyon every public-dashboard response. This is a browser-level block; no URL parameter, sandbox attribute, or referrer trick bypasses it. Verified live withcurl -Iagainst the production dashboard URL.Before merging, open a Grafana Cloud support ticket asking them to enable iframe embedding for the
chainstack.grafana.nettenant on/public-dashboards/*paths, withframe-ancestorsallowlistinghttps://compare.chainstack.com(and any preview origin you set up). Per the May-2026 Grafana Labs blog and Grafana Cloud docs, this is a support-gated tenant config — not a self-serve toggle.Until that ticket resolves:
How Has This Been Tested?
npm ci && npm run buildlocally — green. Next.js 14, route/prerendered as static (64.2 kB / 146 kB First Load JS).target="_self". The onlytarget="_blank"is the Chainstack logo (correct — it should open chainstack.com in a new tab).Vercel preview verification checklist (after merge or on preview branch)
lg:max-w-6xlshell, ~1400px tall./compare-single,/compare-double,/injection-start,/injection-result-double301-redirects to/./dashboard301-redirects to the prod Grafana URL (preserved behavior).nosniff,Referrer-Policy.Screenshots (if appropriate)
N/A
Follow-ups (not in this PR)
package.jsoncleanup —react-google-charts,react-type-animation, possiblysimpler-state,immer,@mdx-js/*, and unused@iconicicons/react/@lemonsqueezy/wedgesare likely dead now. Rundepcheckand remove in a follow-up to keep this PR review-able.