Skip to main content
Glama
CloudDisconnectOverlay.stories.tsx5.08 kB
import type { Meta, StoryObj } from "@storybook/nextjs"; import { CloudDisconnectOverlay } from "./deploymentContext"; const meta: Meta<typeof CloudDisconnectOverlay> = { component: CloudDisconnectOverlay, parameters: { layout: "fullscreen", }, }; export default meta; type Story = StoryObj<typeof meta>; const mockDeployment = { client: {} as any, httpClient: {} as any, deploymentUrl: "https://happy-animal-123.convex.cloud", adminKey: "mock-admin-key", deploymentName: "happy-animal-123", }; const unreachableDeployment = { client: {} as any, httpClient: {} as any, deploymentUrl: "http://localhost:99999", adminKey: "mock-admin-key", deploymentName: "happy-animal-123", }; export const CheckingHTTP: Story = { args: { deployment: mockDeployment, deploymentName: "happy-animal-123", }, }; export const HTTPReachable: Story = { args: { deployment: mockDeployment, deploymentName: "happy-animal-123", }, }; export const HTTPUnreachable: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", }, }; export const LoadingStatus: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", statusWidget: ( <a href="https://status.convex.dev" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm hover:underline" > <span className="text-content-secondary">Loading system status...</span> </a> ), }, }; export const AllOperational: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", statusWidget: ( <> <a href="https://status.convex.dev" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm hover:underline" > <span className="relative flex size-3 shrink-0"> <span className="relative inline-flex size-3 rounded-full bg-green-500" /> </span> <span>All Systems Operational</span> </a> <p className="mt-2 text-xs text-content-secondary"> For emerging issues, it may take the Convex team a few minutes to update system status. </p> </> ), }, }; export const MinorIssues: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", statusWidget: ( <a href="https://status.convex.dev" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm hover:underline" > <span className="relative flex size-3 shrink-0"> <span className="relative inline-flex size-3 rounded-full bg-yellow-500" /> </span> <span>Minor Service Disruption</span> </a> ), }, }; export const MajorOutage: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", statusWidget: ( <a href="https://status.convex.dev" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm hover:underline" > <span className="relative flex size-3 shrink-0"> <span className="relative inline-flex size-3 rounded-full bg-orange-500" /> </span> <span>Major Service Outage</span> </a> ), }, }; export const CriticalOutage: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", statusWidget: ( <a href="https://status.convex.dev" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm hover:underline" > <span className="relative flex size-3 shrink-0"> <span className="relative inline-flex size-3 rounded-full bg-red-500" /> </span> <span>Critical System Failure</span> </a> ), }, }; export const WithSupportForm: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", statusWidget: ( <a href="https://status.convex.dev" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm hover:underline" > <span className="relative flex size-3 shrink-0"> <span className="relative inline-flex size-3 rounded-full bg-orange-500" /> </span> <span>Major Service Outage</span> </a> ), openSupportForm: (subject: string, message: string) => { console.log("Support form opened:", { subject, message }); alert( `Support form opened:\n\nSubject: ${subject}\n\nMessage: ${message}`, ); }, }, }; export const NoStatusInfo: Story = { args: { deployment: unreachableDeployment, deploymentName: "happy-animal-123", }, }; export const LocalDeployment: Story = { args: { deployment: { ...mockDeployment, deploymentName: "local-happy-animal", }, deploymentName: "local-happy-animal", }, };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/get-convex/convex-backend'

If you have feedback or need assistance with the MCP directory API, please join our Discord server