[server, db, dashboard] Allow org-owner to stop workspace on all workspaces in the organization

Also, fix maintenanceMode update

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

@@ -4,10 +4,15 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { FC, useEffect, useMemo } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import dayjs from "dayjs";
 import { WorkspaceSession, WorkspacePhase_Phase } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { workspaceClient } from "../service/public-api";
 import { useWorkspaceSessions } from "../data/insights/list-workspace-sessions-query";
+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";
@@ -24,10 +29,15 @@ const isWorkspaceNotStopped = (session: WorkspaceSession): boolean => {
 
 export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
     const lookbackHours = 48;
+    const [isStopAllModalOpen, setIsStopAllModalOpen] = useState(false);
+    const [isStoppingAll, setIsStoppingAll] = useState(false);
+    const toast = useToast();
+    const { isMaintenanceMode } = useMaintenanceMode();
 
-    const { data, fetchNextPage, hasNextPage, isLoading, isError, error, isFetchingNextPage } = useWorkspaceSessions({
-        from: Timestamp.fromDate(dayjs().subtract(lookbackHours, "hours").startOf("day").toDate()),
-    });
+    const { data, fetchNextPage, hasNextPage, isLoading, isError, error, isFetchingNextPage, refetch } =
+        useWorkspaceSessions({
+            from: Timestamp.fromDate(dayjs().subtract(lookbackHours, "hours").startOf("day").toDate()),
+        });
 
     useEffect(() => {
         if (hasNextPage && !isFetchingNextPage) {
@@ -43,7 +53,51 @@ export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
         return allSessions.filter(isWorkspaceNotStopped);
     }, [data]);
 
-    if (isLoading) {
+    const handleStopAllWorkspaces = async () => {
+        if (runningWorkspaces.length === 0) {
+            toast.toast({ type: "error", message: "No running workspaces to stop." });
+            setIsStopAllModalOpen(false);
+            return;
+        }
+
+        setIsStoppingAll(true);
+        let successCount = 0;
+        let errorCount = 0;
+
+        const stopPromises = runningWorkspaces.map(async (session) => {
+            if (session.workspace?.id) {
+                try {
+                    await workspaceClient.stopWorkspace({ workspaceId: session.workspace.id });
+                    successCount++;
+                } catch (e) {
+                    console.error(`Failed to stop workspace ${session.workspace.id}:`, e);
+                    errorCount++;
+                }
+            }
+        });
+
+        await Promise.allSettled(stopPromises);
+
+        setIsStoppingAll(false);
+        setIsStopAllModalOpen(false);
+
+        if (errorCount > 0) {
+            toast.toast({
+                type: "error",
+                message: `Failed to stop all workspaces`,
+                description: `Attempted to stop ${runningWorkspaces.length} workspaces. ${successCount} stopped, ${errorCount} failed.`,
+            });
+        } else {
+            toast.toast({
+                type: "success",
+                message: `Stop command sent`,
+                description: `Successfully sent stop command for ${successCount} workspaces.`,
+            });
+        }
+        refetch();
+    };
+
+    if (isLoading && !isStoppingAll) {
         return (
             <div className="flex items-center justify-center w-full space-x-2 text-gray-400 text-sm p-8">
                 <img alt="Loading Spinner" className="h-4 w-4 animate-spin" src={Spinner} />
@@ -63,10 +117,19 @@ export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
 
     return (
         <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 mt-6">
-            <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">
-                Currently Running Workspaces ({runningWorkspaces.length})
-            </h3>
-            {runningWorkspaces.length === 0 ? (
+            <div className="flex justify-between items-center mb-3">
+                <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Currently Running Workspaces ({runningWorkspaces.length})
+                </h3>
+                <Button
+                    variant="destructive"
+                    onClick={() => setIsStopAllModalOpen(true)}
+                    disabled={!isMaintenanceMode || isStoppingAll || isLoading || runningWorkspaces.length === 0}
+                >
+                    {!isMaintenanceMode ? "Enable Maintenance Mode to Stop All" : "Stop All Workspaces"}
+                </Button>
+            </div>
+            {runningWorkspaces.length === 0 && !isLoading ? (
                 <p className="text-gray-500 dark:text-gray-400">No workspaces are currently running.</p>
             ) : (
                 <ItemsList className="text-gray-400 dark:text-gray-500">
@@ -116,6 +179,21 @@ export const RunningWorkspacesCard: FC<RunningWorkspacesCardProps> = () => {
                     })}
                 </ItemsList>
             )}
+            <ConfirmationModal
+                title="Confirm Stop All Workspaces"
+                visible={isStopAllModalOpen}
+                onClose={() => setIsStopAllModalOpen(false)}
+                onConfirm={handleStopAllWorkspaces}
+                buttonText={isStoppingAll ? "Stopping..." : "Confirm Stop All"}
+                buttonType="destructive"
+                buttonDisabled={isStoppingAll}
+            >
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Are you sure you want to stop all {runningWorkspaces.length} currently running workspaces in this
+                    organization? Workspaces will be backed up before stopping. This action cannot be undone for the
+                    stop process itself.
+                </p>
+            </ConfirmationModal>
         </div>
     );
 };