Skip to content

Commit 2f4bb9d

Browse files
atrakhConvex, Inc.
atrakh
authored and
Convex, Inc.
committed
dashboard: add disconnect overlay for cloud deployments (#44270)
Restyles existing disconnect overlays (for self hosted and local deployments) and adds a new one for cloud-hoste deployments. GitOrigin-RevId: b28e35d590ba9d4f9ef453ac1ba6229e97836f87
1 parent 73e805a commit 2f4bb9d

File tree

6 files changed

+483
-91
lines changed

6 files changed

+483
-91
lines changed

‎npm-packages/dashboard-common/src/lib/CloudDisconnectOverlay.stories.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import type { Meta, StoryObj } from "@storybook/nextjs";
2+
import { CloudDisconnectOverlay } from "./deploymentContext";
3+
4+
const meta: Meta<typeof CloudDisconnectOverlay> = {
5+
component: CloudDisconnectOverlay,
6+
parameters: {
7+
layout: "fullscreen",
8+
},
9+
};
10+
11+
export default meta;
12+
type Story = StoryObj<typeof meta>;
13+
14+
const mockDeployment = {
15+
client: {} as any,
16+
httpClient: {} as any,
17+
deploymentUrl: "https://happy-animal-123.convex.cloud",
18+
adminKey: "mock-admin-key",
19+
deploymentName: "happy-animal-123",
20+
};
21+
22+
const unreachableDeployment = {
23+
client: {} as any,
24+
httpClient: {} as any,
25+
deploymentUrl: "http://localhost:99999",
26+
adminKey: "mock-admin-key",
27+
deploymentName: "happy-animal-123",
28+
};
29+
30+
export const CheckingHTTP: Story = {
31+
args: {
32+
deployment: mockDeployment,
33+
deploymentName: "happy-animal-123",
34+
},
35+
};
36+
37+
export const HTTPReachable: Story = {
38+
args: {
39+
deployment: mockDeployment,
40+
deploymentName: "happy-animal-123",
41+
},
42+
};
43+
44+
export const HTTPUnreachable: Story = {
45+
args: {
46+
deployment: unreachableDeployment,
47+
deploymentName: "happy-animal-123",
48+
},
49+
};
50+
51+
export const LoadingStatus: Story = {
52+
args: {
53+
deployment: unreachableDeployment,
54+
deploymentName: "happy-animal-123",
55+
statusWidget: (
56+
<a
57+
href="https://status.convex.dev"
58+
target="_blank"
59+
rel="noreferrer"
60+
className="flex items-center gap-2 text-sm hover:underline"
61+
>
62+
<span className="text-content-secondary">Loading system status...</span>
63+
</a>
64+
),
65+
},
66+
};
67+
68+
export const AllOperational: Story = {
69+
args: {
70+
deployment: unreachableDeployment,
71+
deploymentName: "happy-animal-123",
72+
statusWidget: (
73+
<>
74+
<a
75+
href="https://status.convex.dev"
76+
target="_blank"
77+
rel="noreferrer"
78+
className="flex items-center gap-2 text-sm hover:underline"
79+
>
80+
<span className="relative flex size-3 shrink-0">
81+
<span className="relative inline-flex size-3 rounded-full bg-green-500" />
82+
</span>
83+
<span>All Systems Operational</span>
84+
</a>
85+
<p className="mt-2 text-xs text-content-secondary">
86+
For emerging issues, it may take the Convex team a few minutes to
87+
update system status.
88+
</p>
89+
</>
90+
),
91+
},
92+
};
93+
94+
export const MinorIssues: Story = {
95+
args: {
96+
deployment: unreachableDeployment,
97+
deploymentName: "happy-animal-123",
98+
statusWidget: (
99+
<a
100+
href="https://status.convex.dev"
101+
target="_blank"
102+
rel="noreferrer"
103+
className="flex items-center gap-2 text-sm hover:underline"
104+
>
105+
<span className="relative flex size-3 shrink-0">
106+
<span className="relative inline-flex size-3 rounded-full bg-yellow-500" />
107+
</span>
108+
<span>Minor Service Disruption</span>
109+
</a>
110+
),
111+
},
112+
};
113+
114+
export const MajorOutage: Story = {
115+
args: {
116+
deployment: unreachableDeployment,
117+
deploymentName: "happy-animal-123",
118+
statusWidget: (
119+
<a
120+
href="https://status.convex.dev"
121+
target="_blank"
122+
rel="noreferrer"
123+
className="flex items-center gap-2 text-sm hover:underline"
124+
>
125+
<span className="relative flex size-3 shrink-0">
126+
<span className="relative inline-flex size-3 rounded-full bg-orange-500" />
127+
</span>
128+
<span>Major Service Outage</span>
129+
</a>
130+
),
131+
},
132+
};
133+
134+
export const CriticalOutage: Story = {
135+
args: {
136+
deployment: unreachableDeployment,
137+
deploymentName: "happy-animal-123",
138+
statusWidget: (
139+
<a
140+
href="https://status.convex.dev"
141+
target="_blank"
142+
rel="noreferrer"
143+
className="flex items-center gap-2 text-sm hover:underline"
144+
>
145+
<span className="relative flex size-3 shrink-0">
146+
<span className="relative inline-flex size-3 rounded-full bg-red-500" />
147+
</span>
148+
<span>Critical System Failure</span>
149+
</a>
150+
),
151+
},
152+
};
153+
154+
export const WithSupportForm: Story = {
155+
args: {
156+
deployment: unreachableDeployment,
157+
deploymentName: "happy-animal-123",
158+
statusWidget: (
159+
<a
160+
href="https://status.convex.dev"
161+
target="_blank"
162+
rel="noreferrer"
163+
className="flex items-center gap-2 text-sm hover:underline"
164+
>
165+
<span className="relative flex size-3 shrink-0">
166+
<span className="relative inline-flex size-3 rounded-full bg-orange-500" />
167+
</span>
168+
<span>Major Service Outage</span>
169+
</a>
170+
),
171+
openSupportForm: (subject: string, message: string) => {
172+
console.log("Support form opened:", { subject, message });
173+
alert(
174+
`Support form opened:\n\nSubject: ${subject}\n\nMessage: ${message}`,
175+
);
176+
},
177+
},
178+
};
179+
180+
export const NoStatusInfo: Story = {
181+
args: {
182+
deployment: unreachableDeployment,
183+
deploymentName: "happy-animal-123",
184+
},
185+
};
186+
187+
export const LocalDeployment: Story = {
188+
args: {
189+
deployment: {
190+
...mockDeployment,
191+
deploymentName: "local-happy-animal",
192+
},
193+
deploymentName: "local-happy-animal",
194+
},
195+
};

0 commit comments

Comments
 (0)