feat(web): add multi-network support with network switcher#576
feat(web): add multi-network support with network switcher#576silent-cipher wants to merge 6 commits into
Conversation
| logsUrlInvalid, | ||
| } = getConfig(network); | ||
| const { providers: providersResponse, loading: providersLoading, error: providersError } = useProvidersList(0, 500); | ||
| } = getConfig(selectedNetwork); |
There was a problem hiding this comment.
This seems to be a real problem - how do we pick the dashboard url? The metrics/logs url is per environment, which is correct. But each environment can have two networks now, so same provider ID on calibration and mainnet are not the same provider. They're different. And, better stack dashboard doesn't know about this distinction yet.
There was a problem hiding this comment.
Our calib and mainnet dashboards are separate IDs, not one dashboard you can vs[network]= filter, so it has to be distinct URLs per network. Just finish the approvedSpSources pattern in getConfig(), and keep a fallback to the bare global so live deployments don't go dark before infra sets the new vars:
approvedSpSources[network].runtime ?? runtimeConfig?.DASHBOARD_URL
Touches Landing.tsx getConfig(), vite-env.d.ts, docker-entrypoint.sh, .env.example / kustomize local, plus the infra env.
Fine as a fast-follow if you want to keep this PR on the switcher UI. Global URLs are correct for single-network deploys, the gap only bites at 2 networks.
There was a problem hiding this comment.
Created a new PR for per-network BetterStack dashboard and logs url configuration - #625
| logsUrlInvalid, | ||
| } = getConfig(network); | ||
| const { providers: providersResponse, loading: providersLoading, error: providersError } = useProvidersList(0, 500); | ||
| } = getConfig(selectedNetwork); |
There was a problem hiding this comment.
Our calib and mainnet dashboards are separate IDs, not one dashboard you can vs[network]= filter, so it has to be distinct URLs per network. Just finish the approvedSpSources pattern in getConfig(), and keep a fallback to the bare global so live deployments don't go dark before infra sets the new vars:
approvedSpSources[network].runtime ?? runtimeConfig?.DASHBOARD_URL
Touches Landing.tsx getConfig(), vite-env.d.ts, docker-entrypoint.sh, .env.example / kustomize local, plus the infra env.
Fine as a fast-follow if you want to keep this PR on the switcher UI. Global URLs are correct for single-network deploys, the gap only bites at 2 networks.
BigLep
left a comment
BigLep
left a comment
There was a problem hiding this comment.
Approving given Russell already looked at this and you've incorporated feedback. I assume you'll review copilot feedback as well.
There was a problem hiding this comment.
Pull request overview
Adds multi-network support to the web app by switching from a single “current network” model to (1) a list of active networks from /api/config, (2) a URL-driven selected network, and (3) UI controls for switching networks in-page (tabs) and switching environments (header link).
Changes:
- Update config typing and MSW mock to use
networks: NetworkConfig[]and derive active networks from it. - Introduce URL-param-backed
useSelectedNetworkand plumb selected network through Landing + providers list API calls. - Replace the old deployment-link “NetworkSwitcher” with an in-page Radix Tabs network switcher; add a separate
EnvironmentSwitcherfor linking to the sibling deployment.
Reviewed changes
Copilot reviewed 19 out of 20 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks new Radix Tabs dependency graph. |
| apps/web/package.json | Adds @radix-ui/react-tabs dependency. |
| apps/web/test/mocks/handlers/config.ts | Updates /api/config MSW mock to new networks[] shape. |
| apps/web/src/types/config.ts | Introduces NetworkConfig and changes AppConfigResponse to networks: NetworkConfig[]. |
| apps/web/src/types/providers.ts | Adds network field on Provider type for multi-network awareness. |
| apps/web/src/api/client.ts | Makes providers list API key/network-aware and allows deferring fetch when no network is selected. |
| apps/web/src/hooks/useActiveNetworks.ts | New hook behavior: fetch config and return active networks list. |
| apps/web/src/hooks/useSelectedNetwork.ts | New hook: selected network derived from ?network= with fallback to first active network. |
| apps/web/src/hooks/useProvidersList.ts | Adds required network argument and scopes fetch key by network. |
| apps/web/src/pages/Landing.tsx | Uses active/selected network; scopes providers fetch; renders in-page network tabs. |
| apps/web/src/pages/Landing.test.tsx | Updates Landing tests for router/search-param usage and provider network field. |
| apps/web/src/components/ui/tabs.tsx | Adds shared Tabs UI wrapper around Radix Tabs. |
| apps/web/src/components/shared/Network/NetworkSwitcher.tsx | Converts to in-page tab control for switching between active networks. |
| apps/web/src/components/shared/Network/NetworkSwitcher.test.tsx | Updates tests for tab-based behavior and selection/click handling. |
| apps/web/src/components/shared/Network/NetworkBadge.tsx | Makes badge controlled via props (selected network + loading). |
| apps/web/src/components/shared/Network/EnvironmentSwitcher.tsx | New header control linking to sibling deployment based on active networks. |
| apps/web/src/components/shared/Network/EnvironmentSwitcher.test.tsx | Adds tests for environment switcher behavior. |
| apps/web/src/components/shared/Network/constants.ts | Adds environment labels and clarifies constants docstrings. |
| apps/web/src/components/shared/index.ts | Re-exports EnvironmentSwitcher and retains shared exports. |
| apps/web/src/components/shared/Header/index.tsx | Swaps header control from NetworkSwitcher to EnvironmentSwitcher. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Built on top of #570