WIP

Author: geropl

components/dashboard/src/AppNotifications.tsx

@@ -18,6 +18,7 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { getGitpodService } from "./service/service";
 import { useOrgBillingMode } from "./data/billing-mode/org-billing-mode-query";
 import { Organization } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { MaintenanceModeBanner } from "./components/MaintenanceModeBanner";
 
 const KEY_APP_DISMISSED_NOTIFICATIONS = "gitpod-app-notifications-dismissed";
 const PRIVACY_POLICY_LAST_UPDATED = "2024-12-03";
@@ -208,29 +209,28 @@ export function AppNotifications() {
         setTopNotification(undefined);
     }, [topNotification, setTopNotification]);
 
-    if (!topNotification) {
-        return <></>;
-    }
-
     return (
         <div className="app-container pt-2">
-            <Alert
-                type={topNotification.type}
-                closable={topNotification.id !== "gitpod-classic-sunset"} // Only show close button if it's not the sunset notification
-                onClose={() => {
-                    if (!topNotification.preventDismiss) {
-                        dismissNotification();
-                    } else {
-                        if (topNotification.onClose) {
-                            topNotification.onClose();
+            <MaintenanceModeBanner />
+            {topNotification && (
+                <Alert
+                    type={topNotification.type}
+                    closable={topNotification.id !== "gitpod-classic-sunset"} // Only show close button if it's not the sunset notification
+                    onClose={() => {
+                        if (!topNotification.preventDismiss) {
+                            dismissNotification();
+                        } else {
+                            if (topNotification.onClose) {
+                                topNotification.onClose();
+                            }
                         }
-                    }
-                }}
-                showIcon={true}
-                className="flex rounded mb-2 w-full"
-            >
-                <span>{topNotification.message}</span>
-            </Alert>
+                    }}
+                    showIcon={true}
+                    className="flex rounded mb-2 w-full"
+                >
+                    <span>{topNotification.message}</span>
+                </Alert>
+            )}
         </div>
     );
 }

components/dashboard/src/components/MaintenanceModeBanner.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC } from "react";
+import Alert from "./Alert";
+import { useMaintenanceMode } from "../data/maintenance-mode-query";
+
+export const MaintenanceModeBanner: FC = () => {
+    const { isMaintenanceMode } = useMaintenanceMode();
+
+    if (!isMaintenanceMode) {
+        return null;
+    }
+
+    return (
+        <Alert type="warning" className="mb-2">
+            <div className="flex items-center">
+                <span className="font-semibold">System is in maintenance mode.</span>
+                <span className="ml-2">Starting new workspaces is currently disabled.</span>
+            </div>
+        </Alert>
+    );
+};

components/dashboard/src/data/maintenance-mode-query.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCurrentOrg } from "./organizations/orgs-query";
+import { organizationClient } from "../service/public-api";
+
+export const maintenanceModeQueryKey = (orgId: string) => ["maintenance-mode", orgId];
+
+export const useMaintenanceMode = () => {
+    const { data: org } = useCurrentOrg();
+    const queryClient = useQueryClient();
+
+    const { data: isMaintenanceMode = false, isLoading } = useQuery(
+        maintenanceModeQueryKey(org?.id || ""),
+        async () => {
+            if (!org?.id) return false;
+
+            try {
+                const response = await organizationClient.getOrganizationMaintenanceMode({
+                    organizationId: org.id,
+                });
+                return response.enabled;
+            } catch (error) {
+                console.error("Failed to fetch maintenance mode status", error);
+                return false;
+            }
+        },
+        {
+            enabled: !!org?.id,
+            staleTime: 30 * 1000, // 30 seconds
+            refetchInterval: 60 * 1000, // 1 minute
+        },
+    );
+
+    const setMaintenanceMode = async (enabled: boolean) => {
+        if (!org?.id) return false;
+
+        try {
+            const response = await organizationClient.setOrganizationMaintenanceMode({
+                organizationId: org.id,
+                enabled,
+            });
+            const result = response.enabled;
+
+            // Update the cache
+            queryClient.setQueryData(maintenanceModeQueryKey(org.id), result);
+
+            return result;
+        } catch (error) {
+            console.error("Failed to set maintenance mode", error);
+            return false;
+        }
+    };
+
+    return {
+        isMaintenanceMode,
+        isLoading,
+        setMaintenanceMode,
+    };
+};

components/dashboard/src/org-admin/AdminPage.tsx

@@ -12,6 +12,7 @@ import { useIsOwner } from "../data/organizations/members-query";
 import Header from "../components/Header";
 import { SpinnerLoader } from "../components/Loader";
 import { RunningWorkspacesCard } from "./RunningWorkspacesCard";
+import { MaintenanceModeCard } from "./MaintenanceModeCard";
 
 const AdminPage: React.FC = () => {
     const history = useHistory();
@@ -51,9 +52,12 @@ const AdminPage: React.FC = () => {
                     </div>
                 )}
 
-                {currentOrg && <RunningWorkspacesCard />}
-
-                {/* Other admin cards/sections will go here in the future */}
+                {currentOrg && (
+                    <>
+                        <MaintenanceModeCard />
+                        <RunningWorkspacesCard />
+                    </>
+                )}
             </div>
         </div>
     );

components/dashboard/src/org-admin/MaintenanceModeCard.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC } from "react";
+import { useToast } from "../components/toasts/Toasts";
+import { Button } from "@podkit/buttons/Button";
+import { useMaintenanceMode } from "../data/maintenance-mode-query";
+
+export const MaintenanceModeCard: FC = () => {
+    const { isMaintenanceMode, isLoading, setMaintenanceMode } = useMaintenanceMode();
+    const toast = useToast();
+
+    const toggleMaintenanceMode = async () => {
+        try {
+            const newState = !isMaintenanceMode;
+            const result = await setMaintenanceMode(newState);
+
+            toast.toast({
+                message: `Maintenance mode ${result ? "enabled" : "disabled"}`,
+                type: "success",
+            });
+        } catch (error) {
+            console.error("Failed to toggle maintenance mode", error);
+            toast.toast({ message: "Failed to toggle maintenance mode", type: "error" });
+        }
+    };
+
+    return (
+        <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 mb-4">
+            <div className="flex justify-between items-center">
+                <div>
+                    <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">Maintenance Mode</h3>
+                    <p className="text-gray-500 dark:text-gray-400">
+                        When enabled, users cannot start new workspaces and a notification is displayed.
+                    </p>
+                </div>
+                <Button
+                    variant={isMaintenanceMode ? "secondary" : "default"}
+                    onClick={toggleMaintenanceMode}
+                    disabled={isLoading}
+                >
+                    {isLoading ? "Loading..." : isMaintenanceMode ? "Disable" : "Enable"}
+                </Button>
+            </div>
+        </div>
+    );
+};

components/dashboard/src/org-admin/RunningWorkspacesCard.tsx

@@ -12,6 +12,7 @@ import { useWorkspaceSessions } from "../data/insights/list-workspace-sessions-q
 import { Button } from "@podkit/buttons/Button";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { useToast } from "../components/toasts/Toasts";
+import { useMaintenanceMode } from "../data/maintenance-mode-query";
 import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import Alert from "../components/Alert";
 import Spinner from "../icons/Spinner.svg";
@@ -31,6 +32,7 @@ export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
     const [isStopAllModalOpen, setIsStopAllModalOpen] = useState(false);
     const [isStoppingAll, setIsStoppingAll] = useState(false);
     const toast = useToast();
+    const { isMaintenanceMode } = useMaintenanceMode();
 
     const { data, fetchNextPage, hasNextPage, isLoading, isError, error, isFetchingNextPage, refetch } =
         useWorkspaceSessions({
@@ -122,9 +124,9 @@ export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
                 <Button
                     variant="destructive"
                     onClick={() => setIsStopAllModalOpen(true)}
-                    disabled={isStoppingAll || isLoading || runningWorkspaces.length === 0}
+                    disabled={!isMaintenanceMode || isStoppingAll || isLoading || runningWorkspaces.length === 0}
                 >
-                    Stop All Workspaces
+                    {!isMaintenanceMode ? "Enable Maintenance Mode to Stop All" : "Stop All Workspaces"}
                 </Button>
             </div>
             {runningWorkspaces.length === 0 && !isLoading ? (

components/dashboard/src/service/json-rpc-organization-client.ts

@@ -16,6 +16,8 @@ import {
     DeleteOrganizationResponse,
     GetOrganizationInvitationRequest,
     GetOrganizationInvitationResponse,
+    GetOrganizationMaintenanceModeRequest,
+    GetOrganizationMaintenanceModeResponse,
     GetOrganizationRequest,
     GetOrganizationResponse,
     GetOrganizationSettingsRequest,
@@ -31,6 +33,8 @@ import {
     OrganizationSettings,
     ResetOrganizationInvitationRequest,
     ResetOrganizationInvitationResponse,
+    SetOrganizationMaintenanceModeRequest,
+    SetOrganizationMaintenanceModeResponse,
     UpdateOrganizationMemberRequest,
     UpdateOrganizationMemberResponse,
     UpdateOrganizationRequest,
@@ -285,4 +289,32 @@ export class JsonRpcOrganizationClient implements PromiseClient<typeof Organizat
         await getGitpodService().server.updateOrgSettings(request.organizationId, update);
         return new UpdateOrganizationSettingsResponse();
     }
+
+    async getOrganizationMaintenanceMode(
+        request: PartialMessage<GetOrganizationMaintenanceModeRequest>,
+        options?: CallOptions | undefined,
+    ): Promise<GetOrganizationMaintenanceModeResponse> {
+        if (!request.organizationId) {
+            throw new ApplicationError(ErrorCodes.BAD_REQUEST, "organizationId is required");
+        }
+        const result = await getGitpodService().server.getTeam(request.organizationId);
+        return new GetOrganizationMaintenanceModeResponse({
+            enabled: result.maintenanceMode,
+        });
+    }
+
+    async setOrganizationMaintenanceMode(
+        request: PartialMessage<SetOrganizationMaintenanceModeRequest>,
+        options?: CallOptions | undefined,
+    ): Promise<SetOrganizationMaintenanceModeResponse> {
+        if (!request.organizationId) {
+            throw new ApplicationError(ErrorCodes.BAD_REQUEST, "organizationId is required");
+        }
+        const result = await getGitpodService().server.updateTeam(request.organizationId, {
+            maintenanceMode: request.enabled,
+        });
+        return new SetOrganizationMaintenanceModeResponse({
+            enabled: result.maintenanceMode,
+        });
+    }
 }

components/gitpod-db/src/team-db.ts

@@ -32,7 +32,7 @@ export interface TeamDB extends TransactionalDB<TeamDB> {
     findTeamsByUser(userId: string): Promise<Team[]>;
     findTeamsByUserAsSoleOwner(userId: string): Promise<Team[]>;
     createTeam(userId: string, name: string): Promise<Team>;
-    updateTeam(teamId: string, team: Pick<Team, "name">): Promise<Team>;
+    updateTeam(teamId: string, team: Partial<Pick<Team, "name" | "maintenanceMode">>): Promise<Team>;
     addMemberToTeam(userId: string, teamId: string): Promise<"added" | "already_member">;
     setTeamMemberRole(userId: string, teamId: string, role: TeamMemberRole): Promise<void>;
     removeMemberFromTeam(userId: string, teamId: string): Promise<void>;

components/gitpod-db/src/typeorm/entity/db-team.ts

@@ -25,4 +25,7 @@ export class DBTeam implements Team {
 
     @Column()
     markedDeleted?: boolean;
+
+    @Column({ default: false })
+    maintenanceMode?: boolean;
 }

components/gitpod-db/src/typeorm/migration/1715259000000-AddMaintenanceModeToTeam.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2025 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class AddMaintenanceModeToTeam1715259000000 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query("ALTER TABLE `d_b_team` ADD COLUMN `maintenanceMode` tinyint(1) NOT NULL DEFAULT 0");
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query("ALTER TABLE `d_b_team` DROP COLUMN `maintenanceMode`");
+    }
+}