Skip to content

High Availability interactive demo [experimentation]#4363

Draft
brianmacdonald-temporal wants to merge 1 commit intomainfrom
add-ha-interactive-demo
Draft

High Availability interactive demo [experimentation]#4363
brianmacdonald-temporal wants to merge 1 commit intomainfrom
add-ha-interactive-demo

Conversation

@brianmacdonald-temporal
Copy link
Copy Markdown
Contributor

@brianmacdonald-temporal brianmacdonald-temporal commented Mar 30, 2026

Summary

New component files (src/components/HADemo/)

File Purpose
index.tsx Root component -- sticky nav bar, section switching
Overview.tsx Core concept callout, problem/solution cards, Primary/Replica diagram, Standard vs HA SLA table
ReplicationTypes.tsx Numbered cards for same-region (Public Preview), multi-region (GA), multi-cloud (Public Preview) + failure coverage matrix
HowItWorks.tsx Auto-play 3-node animated flow (1.8 s/step), status log, step timeline -- toggle between Normal Replication and Failover Sequence
FailoverSection.tsx Tabbed Hybrid / Graceful / Forced failover deep-dives, manual trigger methods (UI, tcld, API), post-failover considerations
EnableIt.tsx Tabbed tcld + Web UI steps for Create with HA / Add replica / Remove replica; 7-day cooldown note; replication lag metrics
Quiz.tsx 6 questions (RPO, SLA, RTO, default failover mode, same-region scope, cooldown rule) with instant feedback, score card, and resource link grid
HADemo.module.css Full CSS module using IFM variables for automatic light/dark mode
replicationSteps.ts Step data for both animations (5 replication + 7 failover steps)
quizQuestions.ts Quiz question data with explanations

Test plan

  • npm run build completes without new errors
  • /ha-demo renders all six sections and the nav bar correctly
  • Animated flow in "How It Works" auto-plays and can be paused/reset in both modes
  • Failover tab switcher (Hybrid / Graceful / Forced) shows correct content
  • Enable It tab switcher (Create / Add / Remove) shows correct CLI commands
  • Quiz accepts answers, shows correct/incorrect feedback, and displays final score
  • Light and dark mode styles render correctly
  • "Interactive Demos" category appears in the sidebar

Related

Generated with Claude Code

┆Attachments: EDU-6131 feat(demo): add Temporal High Availability interactive demo

Adds a new interactive demo page at /ha-demo covering Temporal Cloud
High Availability -- same-region, multi-region, and multi-cloud
replication -- following the same section-based format as the Nexus
demo (PR #4332).

New files:
- docs/ha-demo.mdx: MDX entry point at /ha-demo
- src/components/HADemo/index.tsx: nav + section switcher
- src/components/HADemo/Overview.tsx: What is HA, SLA comparison table
- src/components/HADemo/ReplicationTypes.tsx: 3 replication types + failure coverage matrix
- src/components/HADemo/HowItWorks.tsx: animated replication/failover flow
- src/components/HADemo/FailoverSection.tsx: Hybrid/Graceful/Forced tabs, trigger methods
- src/components/HADemo/EnableIt.tsx: tcld + UI setup steps for all HA operations
- src/components/HADemo/Quiz.tsx: 6-question quiz with score card + resource links
- src/components/HADemo/HADemo.module.css: IFM-variable-based light/dark styles
- src/components/HADemo/replicationSteps.ts: animated flow step data
- src/components/HADemo/quizQuestions.ts: quiz question data

sidebars.js updated to add an 'Interactive Demos' category.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@brianmacdonald-temporal brianmacdonald-temporal requested a review from a team as a code owner March 30, 2026 18:27
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
temporal-documentation Ready Ready Preview, Comment Mar 30, 2026 6:27pm

Request Review

@github-actions
Copy link
Copy Markdown
Contributor

📖 Docs PR preview links

@brianmacdonald-temporal brianmacdonald-temporal changed the title feat(demo): add Temporal High Availability interactive demo High Availability interactive demo [experimentation] Mar 30, 2026
@brianmacdonald-temporal brianmacdonald-temporal marked this pull request as draft March 30, 2026 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant