[dashboard] Downtime in-app announcements (#18761)

* [dashboard] Downtime in-app announcements * [dashboard] Set correct port for hot reload to work * [dashboard] Display local time * adding static page for maintenance mode * [dashboard] maintenance screen: Add specific end time * [dashboard] in-app maintenance notification: Point to https://www.gitpodstatus.com instead of specific event * [proxy] Re-direct mechanism controlled by env var MAINTENANCE_REDIRECT --------- Co-authored-by: Brad Harris <[email protected]>
gitpod-io · Sep 21, 2023 · cebee56 · cebee56
1 parent 66c3630
commit cebee56
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 6 deletions.
diff --git a/components/dashboard/craco.config.js b/components/dashboard/craco.config.js
@@ -51,7 +51,7 @@ module.exports = {
         client: {
             webSocketURL: {
                 hostname: process.env.HMR_HOST ? new URL(process.env.HMR_HOST).hostname : "localhost",
-                port: process.env.HMR_HOST ? 443 : 3000,
+                port: process.env.HMR_HOST ? 443 : 3001,
                 protocol: "wss",
             },
         },

diff --git a/components/dashboard/package.json b/components/dashboard/package.json
@@ -83,7 +83,7 @@
     "web-vitals": "^1.1.1"
   },
   "scripts": {
-    "start": "BROWSER=none HMR_HOST=`gp url 3000` craco start",
+    "start": "BROWSER=none HMR_HOST=`gp url 3001` craco start",
     "build": "craco build --verbose",
     "lint": "eslint --max-warnings=0 --ext=.jsx,.js,.tsx,.ts ./src",
     "test": "yarn test:unit",

diff --git a/components/dashboard/public/maintenance/favicon.ico b/components/dashboard/public/maintenance/favicon.ico
diff --git a/components/dashboard/public/maintenance/favicon192.png b/components/dashboard/public/maintenance/favicon192.png
diff --git a/components/dashboard/public/maintenance/favicon256.png b/components/dashboard/public/maintenance/favicon256.png
diff --git a/components/dashboard/public/maintenance/favicon512.png b/components/dashboard/public/maintenance/favicon512.png
diff --git a/components/dashboard/public/maintenance/gitpod.svg b/components/dashboard/public/maintenance/gitpod.svg
diff --git a/components/dashboard/public/maintenance/index.css b/components/dashboard/public/maintenance/index.css
diff --git a/components/dashboard/public/maintenance/index.html b/components/dashboard/public/maintenance/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<!--
+ Copyright (c) 2021 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.
+-->
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="./favicon256.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="https://cdn.tailwindcss.com"></script>
+        <meta name="theme-color" content="#000000" />
+        <meta name="robots" content="noindex" />
+        <meta name="Gitpod" content="Always Ready-to-Code" />
+        <link rel="apple-touch-icon" href="./favicon192.png" />
+        <link rel="stylesheet" href="./index.css" />
+        <title>Gitpod - Maintenance</title>
+
+        <script>
+            (() => {
+                const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+                const theme = localStorage.getItem('theme')
+                if (theme === "dark" || (prefersDark && !theme)) {
+                    document.documentElement.classList.toggle("dark", true);
+                }
+            })();
+        </script>
+    </head>
+    <body class="flex justify-center items-center">
+        <div class="flex flex-col justify-center items-center max-w-xl text-center">
+            <img src="./gitpod.svg" alt="Gitpod Logo" class="h-16 flex-shrink-0 mb-8" />
+
+            <h1 class="text-gray-900 dark:text-gray-100 font-bold text-3xl mb-4">Uncharacteristically unavailable</h1>
+
+            <p clas="text-gray-200 dark:text-gray-800">Gitpod is performing essential maintenance. Things should be back to normal by <strong><time datetime="2023-09-24T06:00:00.000Z">06:00 UTC</time></strong> latest. We apologize for any inconvenience this has caused.</p>
+
+            <p class="mt-16">
+                Check <a href="https://www.gitpodstatus.com/" class="gp-link">gitpodstatus.com</a> or follow
+                <a href="https://twitter.com/Gitpodstatus" class="gp-link">@gitpodstatus</a> for updates.
+            </p>
+        </div>
+    </body>
+</html>
diff --git a/components/dashboard/public/maintenance/source.css b/components/dashboard/public/maintenance/source.css
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023 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.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html,
+    body {
+        @apply h-full;
+    }
+    body {
+        @apply bg-gray-100 dark:bg-gitpod-black text-black dark:text-white;
+    }
+    p {
+        @apply text-gray-600 dark:text-gray-400;
+    }
+}
+
+@layer components {
+    .gp-link {
+        @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 cursor-pointer;
+    }
+}
diff --git a/components/dashboard/src/AppNotifications.tsx b/components/dashboard/src/AppNotifications.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2022 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 { useCallback, useEffect, useState } from "react";
+import Alert, { AlertType } from "./components/Alert";
+import { useFeatureFlag } from "./data/featureflag-query";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+
+const KEY_APP_DISMISSED_NOTIFICATIONS = "gitpod-app-notifications-dismissed";
+
+interface Notification {
+    id: string;
+    type: AlertType;
+    message: JSX.Element;
+}
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(advancedFormat);
+
+function localizedTime(dateStr: string): JSX.Element {
+    const formatted = dayjs.utc(dateStr).local().format("dddd, MMM. D, HH:mm (z)");
+    return <time dateTime={dateStr}>{formatted}</time>;
+}
+
+const SCHEDULED_DOWNTIME: Notification = {
+    id: "230924-scheduled-downtime",
+    type: "info",
+    message: (
+        <span className="text-md">
+            Gitpod will be uncharacteristically unavailable for essential maintenance beginning{" "}
+            <span className="font-semibold">{localizedTime("2023-09-24T05:00:00.000Z")}</span> and lasting up to one
+            hour. We apologize for any inconvenience this may cause.{" "}
+            <a className="gp-link" href="https://www.gitpodstatus.com" target="_blank" rel="noreferrer">
+                Learn more
+            </a>
+        </span>
+    ),
+};
+
+export function AppNotifications() {
+    const [topNotification, setTopNotification] = useState<Notification | undefined>(undefined);
+
+    const downtimeNotificationEnabled = useFeatureFlag("scheduled_downtime_notification");
+
+    useEffect(() => {
+        const notifications = [];
+        if (downtimeNotificationEnabled) {
+            notifications.push(SCHEDULED_DOWNTIME);
+        }
+
+        const dismissedNotifications = getDismissedNotifications();
+        const topNotification = notifications.find((n) => !dismissedNotifications.includes(n.id));
+        setTopNotification(topNotification);
+    }, [downtimeNotificationEnabled, setTopNotification]);
+
+    const dismissNotification = useCallback(() => {
+        if (!topNotification) {
+            return;
+        }
+
+        const dismissedNotifications = getDismissedNotifications();
+        dismissedNotifications.push(topNotification.id);
+        setDismissedNotifications(dismissedNotifications);
+        setTopNotification(undefined);
+    }, [topNotification, setTopNotification]);
+
+    if (!topNotification) {
+        return <></>;
+    }
+
+    return (
+        <div className="app-container pt-2">
+            <Alert
+                type={topNotification.type}
+                closable={true}
+                onClose={() => dismissNotification()}
+                showIcon={true}
+                className="flex rounded mb-2 w-full"
+            >
+                <span>{topNotification.message}</span>
+            </Alert>
+        </div>
+    );
+}
+
+function getDismissedNotifications(): string[] {
+    try {
+        const str = window.localStorage.getItem(KEY_APP_DISMISSED_NOTIFICATIONS);
+        const parsed = JSON.parse(str || "[]");
+        if (!Array.isArray(parsed)) {
+            window.localStorage.removeItem(KEY_APP_DISMISSED_NOTIFICATIONS);
+            return [];
+        }
+        return parsed;
+    } catch (err) {
+        console.debug("Failed to parse dismissed notifications", err);
+        window.localStorage.removeItem(KEY_APP_DISMISSED_NOTIFICATIONS);
+        return [];
+    }
+}
+
+function setDismissedNotifications(ids: string[]) {
+    try {
+        window.localStorage.setItem(KEY_APP_DISMISSED_NOTIFICATIONS, JSON.stringify(ids));
+    } catch (err) {
+        console.debug("Failed to set dismissed notifications", err);
+        window.localStorage.removeItem(KEY_APP_DISMISSED_NOTIFICATIONS);
+    }
+}
diff --git a/components/dashboard/src/app/AppRoutes.tsx b/components/dashboard/src/app/AppRoutes.tsx
@@ -39,6 +39,7 @@ import PersonalAccessTokenCreateView from "../user-settings/PersonalAccessTokens
 import { CreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
 import { WebsocketClients } from "./WebsocketClients";
 import { BlockedEmailDomains } from "../admin/BlockedEmailDomains";
+import { AppNotifications } from "../AppNotifications";
 
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
 const Account = React.lazy(() => import(/* webpackPrefetch: true */ "../user-settings/Account"));
@@ -121,6 +122,7 @@ export const AppRoutes = () => {
         <Route>
             <div className="container">
                 <Menu />
+                <AppNotifications />
                 <Switch>
                     <Route path="/new" exact component={CreateWorkspacePage} />
                     <Route path={projectsPathNew} exact component={NewProject} />

diff --git a/components/dashboard/src/components/Alert.tsx b/components/dashboard/src/components/Alert.tsx
@@ -11,6 +11,7 @@ import { ReactComponent as InfoSvg } from "../images/info.svg";
 import { ReactComponent as XSvg } from "../images/x.svg";
 import { ReactComponent as Check } from "../images/check-circle.svg";
 import classNames from "classnames";
+import { Button } from "./Button";
 
 export type AlertType =
     // Green
@@ -122,14 +123,14 @@ export default function Alert(props: AlertProps) {
             {props.closable && (
                 <span className={`mt-1 ml-4`}>
                     {/* Use an IconButton component once we make it */}
-                    <button
-                        type="button"
-                        className="bg-transparent p-1"
+                    <Button
+                        type="secondary"
+                        className="bg-transparent hover:bg-transparent"
                         onClick={handleClose}
                         autoFocus={autoFocusClose}
                     >
                         <XSvg className="w-3 h-4 cursor-pointer" />
-                    </button>
+                    </Button>
                 </span>
             )}
         </div>

diff --git a/components/dashboard/src/data/featureflag-query.ts b/components/dashboard/src/data/featureflag-query.ts
@@ -15,6 +15,7 @@ const featureFlags = {
     publicApiExperimentalWorkspaceService: false,
     personalAccessTokensEnabled: false,
     oidcServiceEnabled: false,
+    scheduled_downtime_notification: false,
     // Default to true to enable on gitpod dedicated until ff support is added for dedicated
     orgGitAuthProviders: true,
     userGitAuthProviders: false,

diff --git a/components/proxy/conf/Caddyfile b/components/proxy/conf/Caddyfile
@@ -195,6 +195,22 @@ https://{$GITPOD_DOMAIN} {
 	import ssl_configuration
 	import security_headers
 
+	# maintenance redirect (+ redirect away afterwards)
+	@maintenance_redirect {
+		expression `'{$MAINTENANCE_REDIRECT}' == 'true'`
+		not path /maintenance/*
+	}
+	handle @maintenance_redirect {
+		redir https://{$GITPOD_DOMAIN}/maintenance/index.html 307
+	}
+	@maintenance_done_redirect {
+		expression `'{$MAINTENANCE_REDIRECT}' != 'true'`
+		path /maintenance/*
+	}
+	handle @maintenance_done_redirect {
+		redir https://{$GITPOD_DOMAIN}/workspaces permanent
+	}
+
 	@proxy_server_public_api path /public-api/gitpod.experimental.v1.HelloService*
 	handle @proxy_server_public_api {
 		uri strip_prefix /public-api