Skip to content

High Availability interactive demo [experimentation] #4363

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

Draft
brianmacdonald-temporal wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

High Availability interactive demo [experimentation] #4363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 21 additions & 0 deletions docs/ha-demo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
id: ha-demo
title: Temporal High Availability - Interactive Demo
sidebar_label: High Availability
description: An interactive walkthrough of Temporal Cloud High Availability — what it is, how replication works, and how to enable it.
slug: /ha-demo
tags:
- High Availability
- Cloud
keywords:
- temporal high availability demo
- same-region replication
- multi-region replication
- failover
- RPO RTO
hide_table_of_contents: true
---

import HADemo from '@site/src/components/HADemo';

<HADemo />
9 changes: 9 additions & 0 deletions sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -890,6 +890,15 @@ module.exports = {
],
},
'glossary',
{
type: 'category',
label: 'Interactive Demos',
collapsed: true,
items: [
// 'nexus-demo', // added in PR #4332
'ha-demo',
],
},
'with-ai',
// {
// type: "autogenerated",
Expand Down
264 changes: 264 additions & 0 deletions src/components/HADemo/EnableIt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
import React, { useState } from 'react';
import styles from './HADemo.module.css';

type Props = { onNext: () => void };
type Tab = 'create' | 'add' | 'remove';

const TABS: { id: Tab; label: string }[] = [
{ id: 'create', label: 'Create with HA' },
{ id: 'add', label: 'Add replica to existing' },
{ id: 'remove', label: 'Remove replica' },
];

function Cmd({ prompt, cmd }: { prompt: string; cmd: string }) {
return (
<div className={styles.cmdBlock}>
<span className={styles.cmdPrompt}>{prompt}&nbsp;</span>
<span className={styles.cmdText}>{cmd}</span>
</div>
);
}

export default function EnableIt({ onNext }: Props) {
const [tab, setTab] = useState<Tab>('create');

return (
<div className={styles.section}>
<div className={styles.progressBar}>
<div className={styles.progressFill} style={{ width: '71%' }} />
</div>

<h1>Enable High Availability</h1>
<p className={styles.lead}>
You can add a replica when creating a new Namespace or at any time on an existing one.
Both the Web UI and <code>tcld</code> CLI are supported.
</p>

<div className={styles.runTabs}>
{TABS.map((t) => (
<button
key={t.id}
className={`${styles.runTab} ${tab === t.id ? styles.runTabActive : ''}`}
onClick={() => setTab(t.id)}
>
{t.label}
</button>
))}
</div>

{/* ── Create with HA ── */}
{tab === 'create' && (
<>
<div className={styles.card} style={{ marginBottom: 20 }}>
<div className={`${styles.tag} ${styles.tagBlue}`}>New Namespace</div>
<p style={{ fontSize: 13, color: 'var(--hd-muted)', margin: '0 0 0' }}>
Specify both a primary region and a replica region when creating the Namespace.
Temporal Cloud immediately begins replicating all new Workflow history to the replica.
</p>
</div>

<div className={styles.enableSectionLabel}>Via tcld</div>
<Cmd
prompt="$"
cmd={`tcld namespace create \\
--namespace <namespace_id>.<account_id> \\
--region <primary_region> \\
--region <replica_region>`}
/>
<div className={styles.cmdOutput}>
# Example (multi-region, GA):
# --region aws-us-east-1 --region aws-us-west-2
</div>

<div className={styles.enableSectionLabel}>Via Web UI</div>
<div className={styles.failoverSteps}>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>1</div>
<div>
<div className={styles.failoverStepText}>Navigate to Temporal Cloud and click <strong>Create Namespace</strong></div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>2</div>
<div>
<div className={styles.failoverStepText}>Select the <strong>primary region</strong></div>
<div className={styles.failoverStepNote}>e.g. AWS us-east-1</div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>3</div>
<div>
<div className={styles.failoverStepText}>Click <strong>"Add a replica"</strong> and choose the replica region</div>
<div className={styles.failoverStepNote}>
Same-region and multi-cloud are in Public Preview; multi-region is GA.
</div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>4</div>
<div>
<div className={styles.failoverStepText}>Confirm and create</div>
<div className={styles.failoverStepNote}>
Replication begins immediately for all new and existing Workflow Executions.
</div>
</div>
</div>
</div>
</>
)}

{/* ── Add to existing ── */}
{tab === 'add' && (
<>
<div className={styles.card} style={{ marginBottom: 20 }}>
<div className={`${styles.tag} ${styles.tagGreen}`}>Existing Namespace</div>
<p style={{ fontSize: 13, color: 'var(--hd-muted)', margin: 0 }}>
You can add a replica to an existing Namespace at any time. Temporal Cloud begins
asynchronously replicating <strong>all ongoing and historical</strong> Workflow
Executions to the new replica.
</p>
</div>

<div className={styles.enableSectionLabel}>Via tcld</div>
<Cmd
prompt="$"
cmd={`tcld namespace add-region \\
--namespace <namespace_id>.<account_id> \\
--region <replica_region>`}
/>

<div className={styles.enableSectionLabel}>Via Web UI</div>
<div className={styles.failoverSteps}>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>1</div>
<div>
<div className={styles.failoverStepText}>
Go to your Namespace detail page in Temporal Cloud
</div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>2</div>
<div>
<div className={styles.failoverStepText}>
Click <strong>"Add a replica"</strong>
</div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>3</div>
<div>
<div className={styles.failoverStepText}>
Select the desired replica region and confirm
</div>
<div className={styles.failoverStepNote}>
Replication of existing history begins immediately.
</div>
</div>
</div>
</div>

<div className={styles.enableNote}>
<span className={styles.enableNoteIcon}>ℹ️</span>
<span>
<strong>Changing replica location:</strong> Direct migration of a replica to a
different region is not supported. Remove the existing replica first, then add a new
one in the desired location. You must wait <strong>7 days</strong> before re-enabling
HA in the same region after removal.
</span>
</div>
</>
)}

{/* ── Remove replica ── */}
{tab === 'remove' && (
<>
<div className={styles.card} style={{ marginBottom: 20 }}>
<div className={`${styles.tag} ${styles.tagAmber}`}>Disable HA</div>
<p style={{ fontSize: 13, color: 'var(--hd-muted)', margin: 0 }}>
Removing a replica disables replication and reduces the Namespace back to a standard
single-isolation-domain configuration. The 7-day cooldown applies before you can
re-add a replica in the same location.
</p>
</div>

<div className={styles.enableSectionLabel}>Via tcld</div>
<Cmd
prompt="$"
cmd={`tcld namespace delete-region \\
--api-key <api_key> \\
--namespace <namespace_id>.<account_id> \\
--region <replica_region_name>`}
/>

<div className={styles.enableSectionLabel}>Via Web UI</div>
<div className={styles.failoverSteps}>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>1</div>
<div>
<div className={styles.failoverStepText}>
Go to your Namespace detail page
</div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>2</div>
<div>
<div className={styles.failoverStepText}>
Find the replica entry and click <strong>"Remove replica"</strong>
</div>
</div>
</div>
<div className={styles.failoverStep}>
<div className={styles.failoverStepNum}>3</div>
<div>
<div className={styles.failoverStepText}>Confirm the removal</div>
<div className={styles.failoverStepNote}>
The Namespace reverts to standard configuration. SLA reverts to 99.9%.
</div>
</div>
</div>
</div>

<div className={styles.enableNote}>
<span className={styles.enableNoteIcon}>⚠️</span>
<span>
<strong>7-day cooldown:</strong> After removing a replica, you cannot re-enable HA
in the same location for 7 days. Plan replica migrations carefully — remove first,
add the new location, then remove the old one if needed.
</span>
</div>
</>
)}

<h2 className={styles.sectionHeading}>Monitoring Replication Health</h2>
<div className={styles.cardGrid} style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
<div className={styles.card}>
<div className={`${styles.tag} ${styles.tagBlue}`}>Cloud UI</div>
<p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 8px', lineHeight: 1.6 }}>
The Temporal Cloud UI displays replica status and health. When a replica becomes
unhealthy, failover options are automatically disabled to prevent cascading issues.
</p>
</div>
<div className={styles.card}>
<div className={`${styles.tag} ${styles.tagPurple}`}>Metrics</div>
<p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 8px', lineHeight: 1.6 }}>
Replication lag is emitted as pre-computed percentiles (p50, p95, p99) on the metric{' '}
<code>temporal_cloud_v0_replication_lag_bucket</code>, labeled with{' '}
<code>temporal_namespace</code>. Target: p95 &lt; 1 minute.
</p>
<p style={{ fontSize: 12, color: 'var(--hd-muted)', margin: 0, lineHeight: 1.5 }}>
Note: <code>temporal_cloud_v1_total_action_count</code> may appear doubled for HA
Namespaces — actions are replicated on both primary and replica.
</p>
</div>
</div>

<div className={styles.nextRow}>
<button className={styles.btn} onClick={onNext}>
Next: Test Yourself →
</button>
</div>
</div>
);
}
Loading
Loading