Add HA guide for self-hosted Enterprise#812
Conversation
📝 WalkthroughWalkthroughAdds a new React ChangesMermaid Diagram Renderer
High Availability Documentation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/components/Mermaid.jsxOops! Something went wrong! :( ESLint: 9.39.4 TypeError: Converting circular structure to JSON src/pages/selfhosted/maintenance/scaling/high-availability.mdxOops! Something went wrong! :( ESLint: 9.39.4 TypeError: Converting circular structure to JSON 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/pages/selfhosted/maintenance/scaling/scaling-your-self-hosted-deployment.mdx (1)
93-97: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding a direct “High Availability” See Also link here.
This page is the natural entry point for scaling docs; adding the new HA guide link alongside Quickstart improves discoverability.
Suggested diff
## See Also - [Configuration Files Reference](/selfhosted/maintenance/configuration-files) - Full config.yaml documentation +- [High Availability](/selfhosted/maintenance/scaling/high-availability) - Active-active HA deployment for Management and Signal (Enterprise) - [Self-hosting Quickstart](/selfhosted/selfhosted-quickstart) - Initial deployment guide🤖 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/pages/selfhosted/maintenance/scaling/scaling-your-self-hosted-deployment.mdx` around lines 93 - 97, The See Also section in scaling-your-self-hosted-deployment.mdx should include a direct High Availability link to improve discoverability from the scaling entry point. Update the existing See Also list alongside the current Configuration Files Reference and Self-hosted Quickstart links to add the new HA guide using the same markdown style, so readers can navigate from this page to the availability-focused documentation.
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/components/Mermaid.jsx`:
- Around line 51-74: The Mermaid render flow in render() can apply stale results
when overlapping async mermaid.render() calls resolve out of order, and the
captured svg check can also be stale. Add a per-render token/version inside
Mermaid.jsx so each render invocation can verify it is still the latest before
calling setSvg or setError, and keep the early-return guard tied to the current
token rather than the effect-captured svg value. Also apply the same token check
in the cleanup/update path around the existing cancelled logic so older renders
never overwrite newer theme output.
- Around line 59-62: The Mermaid initialization in Mermaid.jsx is using an
unsafe security level for content that is injected into the DOM via
dangerouslySetInnerHTML in both the main and zoom render paths. Update the
Mermaid.initialize call to use a safer securityLevel such as strict, or add SVG
sanitization before rendering the output, and make sure the change applies to
the Mermaid component’s render flow consistently.
In `@src/components/NavigationDocs.jsx`:
- Around line 577-580: The new High Availability navigation item was added in
NavigationDocs but is missing from NavigationAPI, so the two nav definitions are
out of sync. Add the same High Availability entry with the matching href in
NavigationAPI alongside the existing maintenance/scaling items, using the
relevant navigation array or object structure already used there.
---
Nitpick comments:
In
`@src/pages/selfhosted/maintenance/scaling/scaling-your-self-hosted-deployment.mdx`:
- Around line 93-97: The See Also section in
scaling-your-self-hosted-deployment.mdx should include a direct High
Availability link to improve discoverability from the scaling entry point.
Update the existing See Also list alongside the current Configuration Files
Reference and Self-hosted Quickstart links to add the new HA guide using the
same markdown style, so readers can navigate from this page to the
availability-focused documentation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: aad4af2f-84bf-401d-8ad1-2716f93d6e3c
📒 Files selected for processing (6)
package.jsonsrc/components/Code.jsxsrc/components/Mermaid.jsxsrc/components/NavigationDocs.jsxsrc/pages/selfhosted/maintenance/scaling/high-availability.mdxsrc/pages/selfhosted/maintenance/scaling/scaling-your-self-hosted-deployment.mdx
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Mermaid.jsx (1)
47-48: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMove focus into the zoom dialog when it opens.
The portal is marked
aria-modal="true", but focus remains on the trigger/background. Focus the close button on open and restore prior focus on cleanup.♿ Proposed focus management
let [svg, setSvg] = useState('') let [error, setError] = useState(null) let [zoomed, setZoomed] = useState(false) let [closing, setClosing] = useState(false) + let closeButtonRef = useRef(null) @@ useEffect(() => { if (!zoomed) return + let previouslyFocused = document.activeElement + closeButtonRef.current?.focus() let onKey = (e) => { if (e.key === 'Escape') close() } document.addEventListener('keydown', onKey) - return () => document.removeEventListener('keydown', onKey) + return () => { + document.removeEventListener('keydown', onKey) + if (previouslyFocused instanceof HTMLElement) previouslyFocused.focus() + } }, [zoomed, close]) @@ <button className="image-zoom-close" + ref={closeButtonRef} onClick={close} aria-label="Close zoomed diagram" >Also applies to: 107-114, 159-165
🤖 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/components/Mermaid.jsx` around lines 47 - 48, The zoom dialog in Mermaid currently opens without moving keyboard focus into the modal, leaving focus on the trigger/background. Update the focus management in the dialog/portal logic around the existing open/close state in Mermaid.jsx (including the close-button setup and cleanup paths) so that opening the zoom dialog focuses the close button, and closing it restores the previously focused element. Apply the same pattern wherever the zoom dialog is mounted or toggled so the aria-modal behavior matches actual focus behavior.
🤖 Prompt for all review comments with 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.
Outside diff comments:
In `@src/components/Mermaid.jsx`:
- Around line 47-48: The zoom dialog in Mermaid currently opens without moving
keyboard focus into the modal, leaving focus on the trigger/background. Update
the focus management in the dialog/portal logic around the existing open/close
state in Mermaid.jsx (including the close-button setup and cleanup paths) so
that opening the zoom dialog focuses the close button, and closing it restores
the previously focused element. Apply the same pattern wherever the zoom dialog
is mounted or toggled so the aria-modal behavior matches actual focus behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7a552819-b0a9-4989-9264-6b2465050d4e
📒 Files selected for processing (2)
src/components/Mermaid.jsxsrc/pages/selfhosted/maintenance/scaling/high-availability.mdx
✅ Files skipped from review due to trivial changes (1)
- src/pages/selfhosted/maintenance/scaling/high-availability.mdx
2 participants
Summary by CodeRabbit
New Features
Documentation