From 02ceffccb522affed2d166bef96c7741500d26c3 Mon Sep 17 00:00:00 2001
From: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>
Date: Wed, 24 Jul 2024 09:47:01 +0200
Subject: [PATCH] feat: add incidents and maintenance section for admins
 (#3220)

Closes #3219.

Details:
* Add a new "Incidents and Maintenance" section in the admin page
* Revamp how the status banner and status summary work in Renku
---
 client/package.json                           |   3 +-
 .../src/components/navbar/AnonymousNavBar.tsx |   7 +-
 .../src/components/navbar/LoggedInNavBar.tsx  |  17 +-
 client/src/features/admin/AdminPage.tsx       |   2 +
 .../admin/IncidentsAndMaintenanceSection.tsx  | 326 ++++++++++++++++
 client/src/features/dashboardV2/HelpV2.tsx    |  10 +-
 .../platform/api/platform-empty.api.ts        |  26 ++
 .../platform/api/platform.api-config.ts       |  32 ++
 .../src/features/platform/api/platform.api.ts |  34 ++
 .../platform/api/platform.generated-api.ts    |  52 +++
 .../platform/api/platform.openapi.json        | 161 ++++++++
 .../platform/components/StatusBanner.tsx      | 350 ++++++++++++++++++
 .../components/StatusPageIncidentUpdates.tsx  |  63 ++++
 .../platform/components/StatusSummary.tsx     | 339 +++++++++++++++++
 .../statuspage-api/statuspage-empty.api.ts    |  26 ++
 .../platform/statuspage-api/statuspage.api.ts |  35 ++
 .../statuspage-api/statuspage.types.ts        | 116 ++++++
 client/src/features/rootV2/NavbarV2.tsx       | 160 ++++----
 client/src/help/Help.tsx                      |   6 +-
 client/src/landing/AnonymousHome.tsx          |   7 -
 client/src/utils/customHooks/useNow.hook.ts   |  51 +++
 client/src/utils/helpers/EnhancedState.ts     |   6 +
 tests/cypress/e2e/maintenance.spec.ts         |  40 +-
 23 files changed, 1732 insertions(+), 137 deletions(-)
 create mode 100644 client/src/features/admin/IncidentsAndMaintenanceSection.tsx
 create mode 100644 client/src/features/platform/api/platform-empty.api.ts
 create mode 100644 client/src/features/platform/api/platform.api-config.ts
 create mode 100644 client/src/features/platform/api/platform.api.ts
 create mode 100644 client/src/features/platform/api/platform.generated-api.ts
 create mode 100644 client/src/features/platform/api/platform.openapi.json
 create mode 100644 client/src/features/platform/components/StatusBanner.tsx
 create mode 100644 client/src/features/platform/components/StatusPageIncidentUpdates.tsx
 create mode 100644 client/src/features/platform/components/StatusSummary.tsx
 create mode 100644 client/src/features/platform/statuspage-api/statuspage-empty.api.ts
 create mode 100644 client/src/features/platform/statuspage-api/statuspage.api.ts
 create mode 100644 client/src/features/platform/statuspage-api/statuspage.types.ts
 create mode 100644 client/src/utils/customHooks/useNow.hook.ts

diff --git a/client/package.json b/client/package.json
index 4150bedc6..4e4b99acc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,10 +22,11 @@
     "storybook-wait-server": "wait-on http://127.0.0.1:6006",
     "storybook-test": "test-storybook",
     "storybook-compile-and-test": "concurrently -k -s first -n 'BUILD,TEST' -c 'magenta,blue' 'npm run storybook-build && npm run storybook-start-server' 'npm run storybook-wait-server && npm run storybook-test'",
-    "generate-api": "npm run generate-api:dataServicesUser && npm run generate-api:namespaceV2 && npm run generate-api:projectV2 && npm run generate-api:searchV2",
+    "generate-api": "npm run generate-api:dataServicesUser && npm run generate-api:namespaceV2 && npm run generate-api:projectV2 && generate-api:platform && npm run generate-api:searchV2",
     "generate-api:dataServicesUser": "rtk-query-codegen-openapi src/features/user/dataServicesUser.api/dataServicesUser.api-config.ts",
     "generate-api:namespaceV2": "rtk-query-codegen-openapi src/features/projectsV2/api/namespace.api-config.ts",
     "generate-api:projectV2": "rtk-query-codegen-openapi src/features/projectsV2/api/projectV2.api-config.ts",
+    "generate-api:platform": "rtk-query-codegen-openapi src/features/platform/api/platform.api-config.ts",
     "generate-api:searchV2": "rtk-query-codegen-openapi src/features/searchV2/api/searchV2.api-config.ts"
   },
   "type": "module",
diff --git a/client/src/components/navbar/AnonymousNavBar.tsx b/client/src/components/navbar/AnonymousNavBar.tsx
index 15b7b8042..7d7b1c604 100644
--- a/client/src/components/navbar/AnonymousNavBar.tsx
+++ b/client/src/components/navbar/AnonymousNavBar.tsx
@@ -16,13 +16,16 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import { useCallback, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
+
+import StatusBanner from "../../features/platform/components/StatusBanner";
 import { NavBarWarnings } from "../../landing/NavBarWarnings";
+import type { AppParams } from "../../utils/context/appParams.types";
 import { Url } from "../../utils/helpers/url";
-import cx from "classnames";
 import { RenkuNavLink } from "../RenkuNavLink";
 import {
   RenkuToolbarHelpMenu,
@@ -30,7 +33,6 @@ import {
   RenkuToolbarNotifications,
 } from "./NavBarItems";
 import { RENKU_LOGO } from "./navbar.constans";
-import type { AppParams } from "../../utils/context/appParams.types";
 
 interface AnonymousNavBarProps {
   model: unknown;
@@ -112,6 +114,7 @@ export default function AnonymousNavBar({
           </Collapse>
         </Navbar>
       </header>
+      <StatusBanner params={params} />
       <NavBarWarnings model={model} uiShortSha={uiShortSha} />
     </>
   );
diff --git a/client/src/components/navbar/LoggedInNavBar.tsx b/client/src/components/navbar/LoggedInNavBar.tsx
index 5ab287007..25108965a 100644
--- a/client/src/components/navbar/LoggedInNavBar.tsx
+++ b/client/src/components/navbar/LoggedInNavBar.tsx
@@ -19,10 +19,11 @@
 import cx from "classnames";
 import { useCallback, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
+import StatusBanner from "../../features/platform/components/StatusBanner";
 import { NavBarWarnings } from "../../landing/NavBarWarnings";
-import { StatuspageBanner } from "../../statuspage";
+import { AppParams } from "../../utils/context/appParams.types";
 import { Url } from "../../utils/helpers/url";
 import { RenkuNavLink } from "../RenkuNavLink";
 import {
@@ -37,7 +38,7 @@ import { RENKU_LOGO } from "./navbar.constans";
 interface LoggedInNavBarProps {
   model: unknown;
   notifications: unknown;
-  params: unknown;
+  params: AppParams;
 }
 
 export default function LoggedInNavBar({
@@ -45,9 +46,7 @@ export default function LoggedInNavBar({
   notifications,
   params,
 }: LoggedInNavBarProps) {
-  const location = useLocation();
-
-  const uiShortSha = (params as { UI_SHORT_SHA: string }).UI_SHORT_SHA;
+  const uiShortSha = params.UI_SHORT_SHA;
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -127,11 +126,7 @@ export default function LoggedInNavBar({
           </Collapse>
         </Navbar>
       </header>
-      <StatuspageBanner
-        siteStatusUrl={Url.get(Url.pages.help.status)}
-        model={model}
-        location={location}
-      />
+      <StatusBanner params={params} />
       <NavBarWarnings model={model} uiShortSha={uiShortSha} />
     </>
   );
diff --git a/client/src/features/admin/AdminPage.tsx b/client/src/features/admin/AdminPage.tsx
index 99f763b45..12c87b674 100644
--- a/client/src/features/admin/AdminPage.tsx
+++ b/client/src/features/admin/AdminPage.tsx
@@ -53,6 +53,7 @@ import AddResourceClassButton from "./AddResourceClassButton";
 import AddResourcePoolButton from "./AddResourcePoolButton";
 import AddUserToResourcePoolButton from "./AddUserToResourcePoolButton";
 import DeleteResourceClassButton from "./DeleteResourceClassButton";
+import IncidentsAndMaintenanceSection from "./IncidentsAndMaintenanceSection";
 import SessionEnvironmentsSection from "./SessionEnvironmentsSection";
 import UpdateResourceClassButton from "./UpdateResourceClassButton";
 import UpdateResourcePoolQuotaButton from "./UpdateResourcePoolQuotaButton";
@@ -66,6 +67,7 @@ export default function AdminPage() {
   return (
     <>
       <h1 className={cx("fs-2", "mb-3")}>Admin Panel</h1>
+      <IncidentsAndMaintenanceSection />
       <ComputeResourcesSection />
       <SessionEnvironmentsSection />
     </>
diff --git a/client/src/features/admin/IncidentsAndMaintenanceSection.tsx b/client/src/features/admin/IncidentsAndMaintenanceSection.tsx
new file mode 100644
index 000000000..b4d733b09
--- /dev/null
+++ b/client/src/features/admin/IncidentsAndMaintenanceSection.tsx
@@ -0,0 +1,326 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+import { skipToken } from "@reduxjs/toolkit/query";
+import cx from "classnames";
+import { useCallback, useContext, useEffect, useState } from "react";
+import {
+  BoxArrowUpRight,
+  CheckCircleFill,
+  XCircleFill,
+  XLg,
+} from "react-bootstrap-icons";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router-dom-v5-compat";
+import {
+  Alert,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Collapse,
+  Form,
+  Label,
+  Nav,
+  NavItem,
+  TabContent,
+  TabPane,
+} from "reactstrap";
+
+import { Loader } from "../../components/Loader";
+import { RtkOrNotebooksError } from "../../components/errors/RtkErrorAlert";
+import ChevronFlippedIcon from "../../components/icons/ChevronFlippedIcon";
+import LazyRenkuMarkdown from "../../components/markdown/LazyRenkuMarkdown";
+import { Docs } from "../../utils/constants/Docs";
+import AppContext from "../../utils/context/appContext";
+import { DEFAULT_APP_PARAMS } from "../../utils/context/appParams.constants";
+import {
+  useGetPlatformConfigQuery,
+  usePatchPlatformConfigMutation,
+} from "../platform/api/platform.api";
+import { useGetSummaryQuery } from "../platform/statuspage-api/statuspage.api";
+
+export default function IncidentsAndMaintenanceSection() {
+  const { params } = useContext(AppContext);
+  const statusPageId =
+    params?.STATUSPAGE_ID ?? DEFAULT_APP_PARAMS.STATUSPAGE_ID;
+
+  return (
+    <section>
+      <h2 className="fs-5">Incidents And Maintenance</h2>
+
+      <p>
+        <Link
+          to={Docs.rtdHowToGuide("admin/incidents-maintenance.html")}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Renku documentation about incidents and maintenance
+          <BoxArrowUpRight className={cx("bi", "ms-1")} />
+        </Link>
+      </p>
+
+      <StatusPageCheck statusPageId={statusPageId} />
+
+      <IncidentBannerSection />
+    </section>
+  );
+}
+
+interface StatusPageCheckProps {
+  statusPageId: string;
+}
+
+function StatusPageCheck({ statusPageId }: StatusPageCheckProps) {
+  const {
+    data: summary,
+    isLoading,
+    error,
+  } = useGetSummaryQuery(statusPageId ? { statusPageId } : skipToken);
+
+  const statusPageManageUrl = `https://manage.statuspage.io/pages/${statusPageId}`;
+
+  if (!statusPageId) {
+    return (
+      <p>
+        Status Page ID: <span className="fst-italic">Not configured</span>
+      </p>
+    );
+  }
+
+  const checkContent = isLoading ? (
+    <p>
+      <Loader inline className="me-1" size={16} />
+      Checking status from statuspage.io...
+    </p>
+  ) : error || summary == null ? (
+    <>
+      <p>
+        <XCircleFill className={cx("bi", "me-1", "text-danger")} />
+        Error: could not retrieve RenkuLab&apos;s status from statuspage.io.
+      </p>
+      {error && <RtkOrNotebooksError error={error} dismissible={false} />}
+    </>
+  ) : (
+    <p>
+      <CheckCircleFill className={cx("bi", "me-1", "text-success")} />
+      Status retrieved from{" "}
+      <Link to={summary.page.url} target="_blank" rel="noreferrer noopener">
+        {summary.page.url}
+        <BoxArrowUpRight className={cx("bi", "ms-1")} />
+      </Link>
+      .
+    </p>
+  );
+
+  return (
+    <>
+      <p>
+        Status Page ID:{" "}
+        <Link
+          to={statusPageManageUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {statusPageId}
+        </Link>{" "}
+        (click to open the management page)
+      </p>
+      {checkContent}
+    </>
+  );
+}
+
+function IncidentBannerSection() {
+  const {
+    data: platformConfig,
+    isLoading,
+    error,
+  } = useGetPlatformConfigQuery();
+
+  const [patchPlatformConfig, result] = usePatchPlatformConfigMutation();
+
+  const {
+    register,
+    formState: { isDirty },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm<IncidentBannerForm>({
+    defaultValues: { incidentBanner: platformConfig?.incident_banner },
+  });
+  const incidentBanner = watch("incidentBanner");
+
+  const onSubmit = useCallback(
+    (data: IncidentBannerForm) => {
+      const incidentBanner = data.incidentBanner.trim();
+
+      patchPlatformConfig({
+        "If-Match": platformConfig?.etag ?? "",
+        platformConfigPatch: { incident_banner: incidentBanner },
+      });
+    },
+    [patchPlatformConfig, platformConfig?.etag]
+  );
+
+  const onClearIncidentBanner = useCallback(
+    () => onSubmit({ incidentBanner: "" }),
+    [onSubmit]
+  );
+
+  useEffect(() => {
+    if (result.isSuccess) {
+      reset({ incidentBanner: result.data.incident_banner });
+    }
+  }, [reset, result.data?.incident_banner, result.isSuccess]);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const onToggleOpen = useCallback(() => setIsOpen((open) => !open), []);
+
+  const [tab, setTab] = useState<"write-tab" | "preview-tab">("write-tab");
+  const onClickWrite = useCallback(() => setTab("write-tab"), []);
+  const onClickPreview = useCallback(() => setTab("preview-tab"), []);
+
+  if (isLoading) {
+    return (
+      <p>
+        <Loader className="me-1" inline size={16} />
+        Loading platform configuration...
+      </p>
+    );
+  }
+
+  if (error || !platformConfig) {
+    return (
+      <div>
+        <p>Error: could not load platform configuration.</p>
+        {error && <RtkOrNotebooksError error={error} dismissible={false} />}
+      </div>
+    );
+  }
+
+  return (
+    <Card className="mb-3">
+      <CardHeader
+        className={cx("bg-white", "border-0", "rounded", "fs-6", "p-0")}
+        tag="h5"
+      >
+        <button
+          className={cx(
+            "d-flex",
+            "gap-3",
+            "align-items-center",
+            "w-100",
+            "p-3",
+            "bg-transparent",
+            "border-0",
+            "fw-bold"
+          )}
+          onClick={onToggleOpen}
+          type="button"
+        >
+          Incident banner
+          <div className="ms-auto">
+            <ChevronFlippedIcon flipped={isOpen} />
+          </div>
+        </button>
+      </CardHeader>
+      <Collapse isOpen={isOpen}>
+        <CardBody className="pt-0">
+          <Form className="mb-3" noValidate onSubmit={handleSubmit(onSubmit)}>
+            <div className={cx("d-flex", "flex-column", "gap-1", "mb-1")}>
+              <Label for="admin-incident-banner-content">Incident banner</Label>
+              <Nav tabs>
+                <NavItem>
+                  <button
+                    className={cx("nav-link", tab === "write-tab" && "active")}
+                    onClick={onClickWrite}
+                    type="button"
+                  >
+                    Write
+                  </button>
+                </NavItem>
+                <NavItem>
+                  <button
+                    className={cx(
+                      "nav-link",
+                      tab === "preview-tab" && "active"
+                    )}
+                    onClick={onClickPreview}
+                    type="button"
+                  >
+                    Preview
+                  </button>
+                </NavItem>
+              </Nav>
+              <TabContent activeTab={tab}>
+                <TabPane tabId="write-tab">
+                  <textarea
+                    {...register("incidentBanner")}
+                    id="admin-incident-banner-content"
+                    className={cx("form-control", "border-0", "bg-body")}
+                  />
+                </TabPane>
+                <TabPane tabId="preview-tab">
+                  {incidentBanner ? (
+                    <Alert
+                      color="danger"
+                      className={cx(
+                        "container-xxl",
+                        "renku-container",
+                        "border-0",
+                        "rounded-0"
+                      )}
+                      fade={false}
+                    >
+                      <h3>Ongoing incident</h3>
+                      <LazyRenkuMarkdown markdownText={incidentBanner} />
+                    </Alert>
+                  ) : (
+                    <p className="fst-italic">No content</p>
+                  )}
+                </TabPane>
+              </TabContent>
+            </div>
+            <div>
+              <Button type="submit" disabled={result.isLoading || !isDirty}>
+                Update incident banner
+              </Button>
+              {platformConfig.incident_banner && (
+                <Button
+                  className="ms-2"
+                  color="outline-danger"
+                  disabled={result.isLoading}
+                  onClick={onClearIncidentBanner}
+                >
+                  <XLg className={cx("bi", "me-1")} />
+                  Clear incident banner
+                </Button>
+              )}
+            </div>
+            {result.error && <RtkOrNotebooksError error={error} />}
+          </Form>
+        </CardBody>
+      </Collapse>
+    </Card>
+  );
+}
+
+interface IncidentBannerForm {
+  incidentBanner: string;
+}
diff --git a/client/src/features/dashboardV2/HelpV2.tsx b/client/src/features/dashboardV2/HelpV2.tsx
index 424f484c5..4c2689f8a 100644
--- a/client/src/features/dashboardV2/HelpV2.tsx
+++ b/client/src/features/dashboardV2/HelpV2.tsx
@@ -15,11 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License
  */
-import cx from "classnames";
 import { faDiscourse, faGitter } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Github } from "react-bootstrap-icons";
+import cx from "classnames";
 import { useContext } from "react";
+import { Github } from "react-bootstrap-icons";
 import { Route, Routes } from "react-router-dom-v5-compat";
 import { Nav, NavItem } from "reactstrap";
 import {
@@ -30,10 +30,11 @@ import RenkuNavLinkV2 from "../../components/RenkuNavLinkV2";
 import HelpRelease from "../../help/HelpRelease";
 import PrivacyPolicy from "../../help/PrivacyPolicy";
 import TermsOfService from "../../help/TermsOfService";
-import { StatuspageDisplay, isStatusConfigured } from "../../statuspage";
+import { isStatusConfigured } from "../../statuspage";
 import { Links } from "../../utils/constants/Docs";
 import AppContext from "../../utils/context/appContext";
 import { DEFAULT_APP_PARAMS } from "../../utils/context/appParams.constants";
+import StatusSummary from "../platform/components/StatusSummary";
 
 type HelpNavProps = {
   statuspageId: string;
@@ -143,12 +144,11 @@ function HelpGetting() {
 }
 
 function HelpContent() {
-  const { model } = useContext(AppContext);
   return (
     <Routes>
       <Route path="/" element={<HelpGetting />} />
       <Route path="contact" element={<HelpGetting />} />
-      <Route path="status" element={<StatuspageDisplay model={model} />} />
+      <Route path="status" element={<StatusSummary />} />
       <Route path="release" element={<HelpRelease />} />
       <Route path="tos" element={<TermsOfService />} />
       <Route path="privacy" element={<PrivacyPolicy />} />
diff --git a/client/src/features/platform/api/platform-empty.api.ts b/client/src/features/platform/api/platform-empty.api.ts
new file mode 100644
index 000000000..2fa620ef7
--- /dev/null
+++ b/client/src/features/platform/api/platform-empty.api.ts
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+// initialize an empty api service that we'll inject endpoints into later as needed
+export const platformEmptyApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: "/ui-server/api/data" }),
+  endpoints: () => ({}),
+  reducerPath: "platformApi",
+});
diff --git a/client/src/features/platform/api/platform.api-config.ts b/client/src/features/platform/api/platform.api-config.ts
new file mode 100644
index 000000000..c14a1b773
--- /dev/null
+++ b/client/src/features/platform/api/platform.api-config.ts
@@ -0,0 +1,32 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Run `npm run generate-api:platform` to generate the API
+import type { ConfigFile } from "@rtk-query/codegen-openapi";
+import path from "path";
+
+const config: ConfigFile = {
+  apiFile: "./platform-empty.api.ts",
+  apiImport: "platformEmptyApi",
+  outputFile: "./platform.generated-api.ts",
+  exportName: "platformGeneratedApi",
+  hooks: true,
+  schemaFile: path.join(__dirname, "platform.openapi.json"),
+};
+
+export default config;
diff --git a/client/src/features/platform/api/platform.api.ts b/client/src/features/platform/api/platform.api.ts
new file mode 100644
index 000000000..a2c11eaca
--- /dev/null
+++ b/client/src/features/platform/api/platform.api.ts
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { platformGeneratedApi } from "./platform.generated-api";
+
+export const platformApi = platformGeneratedApi.enhanceEndpoints({
+  addTagTypes: ["PlatformConfig"],
+  endpoints: {
+    getPlatformConfig: {
+      providesTags: ["PlatformConfig"],
+    },
+    patchPlatformConfig: {
+      invalidatesTags: ["PlatformConfig"],
+    },
+  },
+});
+export const { useGetPlatformConfigQuery, usePatchPlatformConfigMutation } =
+  platformApi;
+export type * from "./platform.generated-api";
diff --git a/client/src/features/platform/api/platform.generated-api.ts b/client/src/features/platform/api/platform.generated-api.ts
new file mode 100644
index 000000000..74a2bf1b0
--- /dev/null
+++ b/client/src/features/platform/api/platform.generated-api.ts
@@ -0,0 +1,52 @@
+import { platformEmptyApi as api } from "./platform-empty.api";
+const injectedRtkApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getPlatformConfig: build.query<
+      GetPlatformConfigApiResponse,
+      GetPlatformConfigApiArg
+    >({
+      query: () => ({ url: `/platform/config` }),
+    }),
+    patchPlatformConfig: build.mutation<
+      PatchPlatformConfigApiResponse,
+      PatchPlatformConfigApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/platform/config`,
+        method: "PATCH",
+        body: queryArg.platformConfigPatch,
+        headers: { "If-Match": queryArg["If-Match"] },
+      }),
+    }),
+  }),
+  overrideExisting: false,
+});
+export { injectedRtkApi as platformGeneratedApi };
+export type GetPlatformConfigApiResponse =
+  /** status 200 The platform configuration */ PlatformConfig;
+export type GetPlatformConfigApiArg = void;
+export type PatchPlatformConfigApiResponse =
+  /** status 200 The updated platform configuration */ PlatformConfig;
+export type PatchPlatformConfigApiArg = {
+  /** If-Match header, for avoiding mid-air collisions */
+  "If-Match": ETag;
+  platformConfigPatch: PlatformConfigPatch;
+};
+export type ETag = string;
+export type IncidentBanner = string;
+export type PlatformConfig = {
+  etag: ETag;
+  incident_banner: IncidentBanner;
+};
+export type ErrorResponse = {
+  error: {
+    code: number;
+    detail?: string;
+    message: string;
+  };
+};
+export type PlatformConfigPatch = {
+  incident_banner?: IncidentBanner;
+};
+export const { useGetPlatformConfigQuery, usePatchPlatformConfigMutation } =
+  injectedRtkApi;
diff --git a/client/src/features/platform/api/platform.openapi.json b/client/src/features/platform/api/platform.openapi.json
new file mode 100644
index 000000000..808a11739
--- /dev/null
+++ b/client/src/features/platform/api/platform.openapi.json
@@ -0,0 +1,161 @@
+{
+  "openapi": "3.0.2",
+  "info": {
+    "title": "Renku Data Services API",
+    "description": "Service that allows creating, updating, deleting, and managing Renku native projects.\nAll errors have the same format as the schema called ErrorResponse.\n",
+    "version": "v1"
+  },
+  "servers": [
+    {
+      "url": "/api/data"
+    },
+    {
+      "url": "/ui-server/api/data"
+    }
+  ],
+  "paths": {
+    "/platform/config": {
+      "get": {
+        "summary": "Get the current configuration of RenkuLab",
+        "responses": {
+          "200": {
+            "description": "The platform configuration",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/PlatformConfig"
+                }
+              }
+            }
+          },
+          "default": {
+            "$ref": "#/components/responses/Error"
+          }
+        },
+        "tags": ["platform"]
+      },
+      "patch": {
+        "summary": "Update the configuration of RenkuLab",
+        "description": "Requires admin permissions.\nWill fail if the platform configuration has not been initialized.\n",
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/If-Match"
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/PlatformConfigPatch"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "The updated platform configuration",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/PlatformConfig"
+                }
+              }
+            }
+          },
+          "default": {
+            "$ref": "#/components/responses/Error"
+          }
+        },
+        "tags": ["platform"]
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "PlatformConfig": {
+        "description": "The configuration of RenkuLab",
+        "type": "object",
+        "properties": {
+          "etag": {
+            "$ref": "#/components/schemas/ETag"
+          },
+          "incident_banner": {
+            "$ref": "#/components/schemas/IncidentBanner"
+          }
+        },
+        "required": ["etag", "incident_banner"],
+        "additionalProperties": false
+      },
+      "PlatformConfigPatch": {
+        "description": "Patch of the configuration of RenkuLab",
+        "type": "object",
+        "properties": {
+          "incident_banner": {
+            "$ref": "#/components/schemas/IncidentBanner"
+          }
+        },
+        "additionalProperties": false
+      },
+      "ETag": {
+        "type": "string",
+        "description": "Entity Tag",
+        "example": "9EE498F9D565D0C41E511377425F32F3"
+      },
+      "IncidentBanner": {
+        "type": "string",
+        "description": "The contents of the incident banner.\nThis value accepts content written using Markdown.\n",
+        "example": "RenkuLab is experiencing issues, some features may be unavailable."
+      },
+      "ErrorResponse": {
+        "type": "object",
+        "properties": {
+          "error": {
+            "type": "object",
+            "properties": {
+              "code": {
+                "type": "integer",
+                "minimum": 0,
+                "exclusiveMinimum": true,
+                "example": 1404
+              },
+              "detail": {
+                "type": "string",
+                "example": "A more detailed optional message showing what the problem was"
+              },
+              "message": {
+                "type": "string",
+                "example": "Something went wrong - please try again later"
+              }
+            },
+            "required": ["code", "message"]
+          }
+        },
+        "required": ["error"]
+      }
+    },
+    "responses": {
+      "Error": {
+        "description": "The schema for all 4xx and 5xx responses",
+        "content": {
+          "application/json": {
+            "schema": {
+              "$ref": "#/components/schemas/ErrorResponse"
+            }
+          }
+        }
+      }
+    },
+    "parameters": {
+      "If-Match": {
+        "in": "header",
+        "name": "If-Match",
+        "description": "If-Match header, for avoiding mid-air collisions",
+        "required": true,
+        "schema": {
+          "$ref": "#/components/schemas/ETag"
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/features/platform/components/StatusBanner.tsx b/client/src/features/platform/components/StatusBanner.tsx
new file mode 100644
index 000000000..c0f12b899
--- /dev/null
+++ b/client/src/features/platform/components/StatusBanner.tsx
@@ -0,0 +1,350 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+import { skipToken } from "@reduxjs/toolkit/query";
+import cx from "classnames";
+import { Duration } from "luxon";
+import { useMemo } from "react";
+import {
+  BoxArrowUpRight,
+  WrenchAdjustableCircleFill,
+} from "react-bootstrap-icons";
+import { Link, useLocation } from "react-router-dom-v5-compat";
+import { Alert, Container } from "reactstrap";
+
+import LazyRenkuMarkdown from "../../../components/markdown/LazyRenkuMarkdown";
+import { TimeCaption } from "../../../components/TimeCaption";
+import { DEFAULT_APP_PARAMS } from "../../../utils/context/appParams.constants";
+import { AppParams } from "../../../utils/context/appParams.types";
+import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
+import useNow from "../../../utils/customHooks/useNow.hook";
+import { ensureDateTime } from "../../../utils/helpers/DateTimeUtils";
+import { useGetPlatformConfigQuery } from "../api/platform.api";
+import { useGetSummaryQuery } from "../statuspage-api/statuspage.api";
+import type {
+  Incident,
+  Incidents,
+  ScheduledMaintenance,
+  ScheduledMaintenances,
+  StatusPageSummary,
+} from "../statuspage-api/statuspage.types";
+import StatusPageIncidentUpdates from "./StatusPageIncidentUpdates";
+
+const FIVE_MINUTES_MILLIS = Duration.fromObject({ minutes: 5 }).valueOf();
+
+const SOON_MAINTENANCE_CUTOFF = Duration.fromObject({ days: 2 });
+const MAINTENANCE_CUTOFF = Duration.fromObject({ days: 7 });
+
+interface StatusBannerProps {
+  params: AppParams | undefined;
+}
+
+export default function StatusBanner({ params }: StatusBannerProps) {
+  const statusPageId =
+    params?.STATUSPAGE_ID ?? DEFAULT_APP_PARAMS.STATUSPAGE_ID;
+
+  const { data: summary } = useGetSummaryQuery(
+    statusPageId ? { statusPageId } : skipToken,
+    {
+      pollingInterval: FIVE_MINUTES_MILLIS,
+    }
+  );
+
+  const { data: platformConfig } = useGetPlatformConfigQuery(undefined, {
+    pollingInterval: FIVE_MINUTES_MILLIS,
+  });
+
+  return (
+    <StatusBannerDisplay
+      summary={summary}
+      incidentBannerContent={platformConfig?.incident_banner ?? ""}
+    />
+  );
+}
+
+interface StatusBannerDisplayProps {
+  summary: StatusPageSummary | null | undefined;
+  incidentBannerContent: string;
+}
+
+function StatusBannerDisplay({
+  summary,
+  incidentBannerContent,
+}: StatusBannerDisplayProps) {
+  const incidents = summary?.incidents ?? [];
+  const scheduledMaintenances = summary?.scheduled_maintenances ?? [];
+
+  return (
+    <>
+      <IncidentsBanner
+        incidents={incidents}
+        incidentBannerContent={incidentBannerContent}
+        summaryPageUrl={summary?.page.url ?? ""}
+      />
+      <MaintenanceBanner
+        scheduledMaintenances={scheduledMaintenances}
+        summaryPageUrl={summary?.page.url ?? ""}
+      />
+    </>
+  );
+}
+
+interface IncidentsBannerProps {
+  incidents: Incidents;
+  incidentBannerContent: string;
+  summaryPageUrl: string;
+}
+
+function IncidentsBanner({
+  incidents,
+  incidentBannerContent,
+  summaryPageUrl,
+}: IncidentsBannerProps) {
+  if (!incidents.length && !incidentBannerContent) {
+    return null;
+  }
+
+  if (incidents.length) {
+    return (
+      <StatusPageIncidents
+        incidents={incidents}
+        summaryPageUrl={summaryPageUrl}
+      />
+    );
+  }
+
+  return (
+    <ManuallyDeclaredIncident incidentBannerContent={incidentBannerContent} />
+  );
+}
+
+interface StatusPageIncidentsProps {
+  incidents: Incidents;
+  summaryPageUrl: string;
+}
+
+function StatusPageIncidents({
+  incidents,
+  summaryPageUrl,
+}: StatusPageIncidentsProps) {
+  return (
+    <>
+      {incidents.map((incident) => (
+        <StatusPageIncident
+          key={incident.id}
+          incident={incident}
+          summaryPageUrl={summaryPageUrl}
+        />
+      ))}
+    </>
+  );
+}
+
+interface StatusPageIncidentProps {
+  incident: Incident;
+  summaryPageUrl: string;
+}
+
+function StatusPageIncident({
+  incident,
+  summaryPageUrl,
+}: StatusPageIncidentProps) {
+  const color =
+    incident.impact === "none"
+      ? "dark"
+      : incident.impact === "maintenance"
+      ? "info"
+      : incident.impact === "minor"
+      ? "warning"
+      : "danger";
+
+  return (
+    <Alert
+      color={color}
+      className={cx("border-0", "rounded-0", "mb-0")}
+      fade={false}
+    >
+      <Container className={cx("container-xxl", "renku-container")}>
+        <h3>Ongoing incident: {incident.name}</h3>
+        <StatusPageIncidentUpdates
+          incidentUpdates={incident.incident_updates}
+        />
+        {summaryPageUrl && (
+          <p className="mb-0">
+            For further information, see{" "}
+            <Link to={summaryPageUrl} target="_blank" rel="noreferrer noopener">
+              {summaryPageUrl}
+              <BoxArrowUpRight className={cx("bi", "ms-1")} />
+            </Link>
+            .
+          </p>
+        )}
+      </Container>
+    </Alert>
+  );
+}
+
+interface ManuallyDeclaredIncidentProps {
+  incidentBannerContent: string;
+}
+
+function ManuallyDeclaredIncident({
+  incidentBannerContent,
+}: ManuallyDeclaredIncidentProps) {
+  return (
+    <Alert
+      color="danger"
+      className={cx("border-0", "rounded-0", "mb-0")}
+      fade={false}
+    >
+      <Container className={cx("container-xxl", "renku-container")}>
+        <h3>Ongoing incident</h3>
+        <LazyRenkuMarkdown markdownText={incidentBannerContent} />
+      </Container>
+    </Alert>
+  );
+}
+
+interface MaintenanceBannerProps {
+  scheduledMaintenances: ScheduledMaintenances;
+  summaryPageUrl: string;
+}
+
+function MaintenanceBanner({
+  scheduledMaintenances,
+  summaryPageUrl,
+}: MaintenanceBannerProps) {
+  const now = useNow();
+
+  // We display:
+  // 1. All ongoing maintenances
+  // 2. If no maintenance is ongoing, we display the next upcoming maintenance.
+  const maintenancesToDisplay = useMemo(() => {
+    const sortedMaintenances = [...scheduledMaintenances].sort((a, b) =>
+      ensureDateTime(a.scheduled_for)
+        .diff(ensureDateTime(b.scheduled_for))
+        .valueOf()
+    );
+    const ongoingMaintenances = sortedMaintenances.filter(
+      (m) =>
+        m.status === "in_progress" ||
+        m.status === "verifying" ||
+        ensureDateTime(m.scheduled_for).diff(now).valueOf() < 0
+    );
+    if (ongoingMaintenances.length > 0) {
+      return ongoingMaintenances;
+    }
+    return sortedMaintenances.slice(0, 1);
+  }, [now, scheduledMaintenances]);
+
+  if (!scheduledMaintenances.length) {
+    return null;
+  }
+
+  return (
+    <>
+      {maintenancesToDisplay.map((maintenance) => (
+        <StatusPageMaintenance
+          key={maintenance.id}
+          maintenance={maintenance}
+          summaryPageUrl={summaryPageUrl}
+        />
+      ))}
+    </>
+  );
+}
+
+interface StatusPageMaintenanceProps {
+  maintenance: ScheduledMaintenance;
+  summaryPageUrl: string;
+}
+
+function StatusPageMaintenance({
+  maintenance,
+  summaryPageUrl,
+}: StatusPageMaintenanceProps) {
+  const { name, incident_updates, scheduled_for, status } = maintenance;
+
+  const color =
+    status === "in_progress" || status === "verifying" ? "warning" : "info";
+
+  const now = useNow();
+
+  const ongoing =
+    status === "in_progress" ||
+    status === "verifying" ||
+    ensureDateTime(scheduled_for).diff(now).valueOf() < 0;
+
+  const caption = ongoing
+    ? "Ongoing maintenance started"
+    : "Maintenance scheduled in";
+
+  const userLogged = useLegacySelector<boolean>(
+    (state) => state.stateModel.user.logged
+  );
+
+  const location = useLocation();
+  const isDashboard =
+    (userLogged && location.pathname === "/") ||
+    location.pathname === "/v2" ||
+    location.pathname === "/v2/";
+
+  // 1. There is a scheduled maintenance in < 48 hours: show it on all pages except the landing page
+  // 2. There is a scheduled maintenance in < 7 days: show it on the v1 Dashboard and the v2 Dashboard
+  const shouldDisplay = useMemo(
+    () =>
+      ensureDateTime(scheduled_for).diff(now).valueOf() <
+        SOON_MAINTENANCE_CUTOFF.valueOf() ||
+      (isDashboard &&
+        ensureDateTime(scheduled_for).diff(now).valueOf() <
+          MAINTENANCE_CUTOFF.valueOf()),
+    [isDashboard, now, scheduled_for]
+  );
+
+  if (!shouldDisplay) {
+    return null;
+  }
+
+  return (
+    <Alert
+      color={color}
+      className={cx("border-0", "rounded-0", "mb-0")}
+      fade={false}
+    >
+      <Container className={cx("container-xxl", "renku-container")}>
+        <h3 className="fs-5">
+          <WrenchAdjustableCircleFill className={cx("bi", "me-1")} />
+          {caption}{" "}
+          <TimeCaption datetime={scheduled_for} enableTooltip noCaption />:{" "}
+          {name}
+        </h3>
+        <StatusPageIncidentUpdates incidentUpdates={incident_updates} />
+        {summaryPageUrl && (
+          <p className="mb-0">
+            For further information, see{" "}
+            <Link to={summaryPageUrl} target="_blank" rel="noreferrer noopener">
+              {summaryPageUrl}
+              <BoxArrowUpRight className={cx("bi", "ms-1")} />
+            </Link>
+            .
+          </p>
+        )}
+      </Container>
+    </Alert>
+  );
+}
diff --git a/client/src/features/platform/components/StatusPageIncidentUpdates.tsx b/client/src/features/platform/components/StatusPageIncidentUpdates.tsx
new file mode 100644
index 000000000..99774c496
--- /dev/null
+++ b/client/src/features/platform/components/StatusPageIncidentUpdates.tsx
@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+import { startCase } from "lodash-es";
+
+import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils";
+import type {
+  IncidentUpdate,
+  IncidentUpdates,
+} from "../statuspage-api/statuspage.types";
+
+interface StatusPageIncidentUpdatesProps {
+  incidentUpdates: IncidentUpdates;
+}
+
+export default function StatusPageIncidentUpdates({
+  incidentUpdates,
+}: StatusPageIncidentUpdatesProps) {
+  return (
+    <>
+      {incidentUpdates.map((update) => (
+        <StatusPageIncidentUpdate key={update.id} update={update} />
+      ))}
+    </>
+  );
+}
+
+interface StatusPageIncidentUpdateProps {
+  update: IncidentUpdate;
+}
+
+function StatusPageIncidentUpdate({ update }: StatusPageIncidentUpdateProps) {
+  const { body, display_at, id, status } = update;
+  const title = startCase(status);
+
+  return (
+    <p key={id} className="mb-1">
+      <span className="fw-bold">{title}</span> - {body}{" "}
+      <span className="time-caption" style={{ fontSize: "smaller" }}>
+        Posted at{" "}
+        {toHumanDateTime({
+          datetime: display_at,
+          format: "full",
+        })}
+      </span>
+    </p>
+  );
+}
diff --git a/client/src/features/platform/components/StatusSummary.tsx b/client/src/features/platform/components/StatusSummary.tsx
new file mode 100644
index 000000000..b889a3e9e
--- /dev/null
+++ b/client/src/features/platform/components/StatusSummary.tsx
@@ -0,0 +1,339 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+import { skipToken } from "@reduxjs/toolkit/query";
+import cx from "classnames";
+import { startCase } from "lodash-es";
+import { Fragment, useContext, useMemo } from "react";
+import {
+  BoxArrowUpRight,
+  CheckCircleFill,
+  DashCircleFill,
+  ExclamationCircleFill,
+  WrenchAdjustableCircleFill,
+  XCircleFill,
+} from "react-bootstrap-icons";
+import { Link } from "react-router-dom-v5-compat";
+import { Col, Row } from "reactstrap";
+
+import { WarnAlert } from "../../../components/Alert";
+import { Loader } from "../../../components/Loader";
+import { TimeCaption } from "../../../components/TimeCaption";
+import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
+import AppContext from "../../../utils/context/appContext";
+import { DEFAULT_APP_PARAMS } from "../../../utils/context/appParams.constants";
+import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
+import {
+  ensureDateTime,
+  toHumanDateTime,
+} from "../../../utils/helpers/DateTimeUtils";
+import { toHumanDuration } from "../../../utils/helpers/DurationUtils";
+import keycloakUserApi, {
+  useGetUserInfoQuery,
+} from "../../user/keycloakUser.api";
+import { useGetSummaryQuery } from "../statuspage-api/statuspage.api";
+import type {
+  ScheduledMaintenance,
+  StatusPageComponent,
+  StatusPageSummary,
+} from "../statuspage-api/statuspage.types";
+import StatusPageIncidentUpdates from "./StatusPageIncidentUpdates";
+
+const FIVE_MINUTES_MILLIS = 5 * 60 * 1_000;
+
+export default function StatusSummary() {
+  const { params } = useContext(AppContext);
+  const statusPageId =
+    params?.STATUSPAGE_ID ?? DEFAULT_APP_PARAMS.STATUSPAGE_ID;
+
+  if (!statusPageId) {
+    return <NoStatusPage />;
+  }
+
+  return <StatuspageDisplay statusPageId={statusPageId} />;
+}
+
+function NoStatusPage() {
+  const userLogged = useLegacySelector<boolean>(
+    (state) => state.stateModel.user.logged
+  );
+  const { data: userInfo } = useGetUserInfoQuery(
+    userLogged ? undefined : skipToken
+  );
+
+  return (
+    <WarnAlert dismissible={false}>
+      <h3>Status Page not configured</h3>
+      <p className="mb-0">
+        This instance of Renku cannot provide its current status.
+      </p>
+      {userInfo?.isLoggedIn && userInfo.isAdmin && (
+        <p className={cx("mb-0", "mt-1")}>
+          As a Renku administrator, you can see the current configuration in the{" "}
+          <Link to="/admin">admin panel</Link>.
+        </p>
+      )}
+    </WarnAlert>
+  );
+}
+
+interface StatuspageDisplayProps {
+  statusPageId: string;
+}
+
+function StatuspageDisplay({ statusPageId }: StatuspageDisplayProps) {
+  const userLogged = useLegacySelector<boolean>(
+    (state) => state.stateModel.user.logged
+  );
+  const { data: userInfo } =
+    keycloakUserApi.endpoints.getUserInfo.useQueryState(
+      userLogged ? undefined : skipToken
+    );
+
+  const {
+    data: summary,
+    isLoading,
+    error,
+    fulfilledTimeStamp,
+  } = useGetSummaryQuery(
+    { statusPageId },
+    { pollingInterval: FIVE_MINUTES_MILLIS }
+  );
+
+  if (isLoading) {
+    return <Loader className="align-self-center" />;
+  }
+
+  if (error || !summary) {
+    return (
+      <>
+        <p>
+          Error: could not retrieve RenkuLab&apos;s status from statuspage.io.
+        </p>
+        {userInfo?.isLoggedIn && userInfo.isAdmin && (
+          <p>
+            As a Renku administrator, you can see the current configuration in
+            the <Link to="/admin">admin panel</Link>.
+          </p>
+        )}
+        <RtkOrNotebooksError error={error} dismissible={false} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Row>
+        <Col>
+          <h3>RenkuLab Status</h3>
+          <OverallStatus summary={summary} />
+
+          <h3>Scheduled Maintenance</h3>
+          <ScheduledMaintenanceDisplay summary={summary} />
+
+          <h3 className="mt-3">Components</h3>
+          <ComponentsStatus summary={summary} />
+
+          <p className={cx("mt-3", "mb-0")}>
+            For further information, see{" "}
+            <Link
+              to={summary.page.url}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {summary.page.url}
+              <BoxArrowUpRight className={cx("bi", "ms-1")} />
+            </Link>
+            .
+          </p>
+          <p>
+            <TimeCaption
+              datetime={new Date(fulfilledTimeStamp)}
+              prefix="Status retrieved"
+              suffix="; "
+              enableTooltip
+            />
+            <TimeCaption
+              datetime={summary.page.updated_at}
+              prefix="last updated"
+              suffix="."
+              enableTooltip
+            />
+          </p>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+interface OverallStatusProps {
+  summary: StatusPageSummary;
+}
+
+function OverallStatus({ summary }: OverallStatusProps) {
+  const indicator = summary.status.indicator;
+
+  const alertColor =
+    indicator === "none"
+      ? "alert-success"
+      : indicator === "maintenance"
+      ? "alert-info"
+      : indicator === "minor"
+      ? "alert-warning"
+      : "alert-danger";
+  const Icon =
+    indicator === "none"
+      ? CheckCircleFill
+      : indicator === "maintenance"
+      ? WrenchAdjustableCircleFill
+      : indicator === "minor"
+      ? DashCircleFill
+      : XCircleFill;
+
+  return (
+    <div className={cx("alert", alertColor, "rounded", "p-3")}>
+      <Icon className={cx("bi", "me-1")} />
+      {summary.status.description}
+    </div>
+  );
+}
+
+interface ScheduledMaintenanceDisplayProps {
+  summary: StatusPageSummary;
+}
+
+function ScheduledMaintenanceDisplay({
+  summary,
+}: ScheduledMaintenanceDisplayProps) {
+  const maintenances = useMemo(
+    () =>
+      [...summary.scheduled_maintenances].sort((a, b) =>
+        ensureDateTime(a.scheduled_for)
+          .diff(ensureDateTime(b.scheduled_for))
+          .valueOf()
+      ),
+    [summary.scheduled_maintenances]
+  );
+
+  if (!maintenances.length) {
+    return (
+      <p>
+        <CheckCircleFill className={cx("bi", "me-1", "text-success")} />
+        No scheduled maintenance.
+      </p>
+    );
+  }
+
+  return (
+    <Row className={cx("row-cols-1", "gy-2")}>
+      {maintenances.map((maintenance) => (
+        <MaintenanceItem key={maintenance.id} maintenance={maintenance} />
+      ))}
+    </Row>
+  );
+}
+
+interface MaintenanceItemProps {
+  maintenance: ScheduledMaintenance;
+}
+
+function MaintenanceItem({ maintenance }: MaintenanceItemProps) {
+  const maintenanceStart = ensureDateTime(maintenance.scheduled_for);
+  const maintenanceDuration = ensureDateTime(maintenance.scheduled_until).diff(
+    maintenanceStart
+  );
+  const displayStart = toHumanDateTime({
+    datetime: maintenanceStart,
+    format: "full",
+  });
+  const displayTime = toHumanDuration({ duration: maintenanceDuration });
+
+  return (
+    <Col key={maintenance.id} xs={12}>
+      <h4 className={cx("fw-bold", "fs-6")}>
+        {maintenance.name} on {displayStart} for {displayTime}
+      </h4>
+      <StatusPageIncidentUpdates
+        incidentUpdates={maintenance.incident_updates}
+      />
+    </Col>
+  );
+}
+
+interface ComponentsStatusProps {
+  summary: StatusPageSummary;
+}
+
+function ComponentsStatus({ summary }: ComponentsStatusProps) {
+  const components = useMemo(
+    () =>
+      [...summary.components]
+        .filter(({ showcase }) => showcase)
+        .sort((a, b) => a.position - b.position),
+    [summary.components]
+  );
+
+  return (
+    <Row className={cx("row-cols-2", "gy-2")}>
+      {components.map((component) => (
+        <ComponentStatus key={component.id} component={component} />
+      ))}
+    </Row>
+  );
+}
+
+interface ComponentStatusProps {
+  component: StatusPageComponent;
+}
+
+function ComponentStatus({ component }: ComponentStatusProps) {
+  const { name, status } = component;
+
+  const statusStr = startCase(status);
+
+  const Icon =
+    status === "operational"
+      ? CheckCircleFill
+      : status === "under_maintenance"
+      ? WrenchAdjustableCircleFill
+      : status === "degraded_performance"
+      ? DashCircleFill
+      : status === "partial_outage"
+      ? ExclamationCircleFill
+      : XCircleFill;
+  const iconColor =
+    status === "operational"
+      ? "text-success"
+      : status === "under_maintenance"
+      ? "text-info"
+      : status === "degraded_performance"
+      ? "text-warning"
+      : "text-danger";
+
+  return (
+    <Fragment>
+      <Col xs={6} className="fw-bold">
+        {name}
+      </Col>
+      <Col xs={6}>
+        <Icon className={cx("bi", "me-1", iconColor)} />
+        {statusStr}
+      </Col>
+    </Fragment>
+  );
+}
diff --git a/client/src/features/platform/statuspage-api/statuspage-empty.api.ts b/client/src/features/platform/statuspage-api/statuspage-empty.api.ts
new file mode 100644
index 000000000..d7e286093
--- /dev/null
+++ b/client/src/features/platform/statuspage-api/statuspage-empty.api.ts
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+// initialize an empty api service that we'll inject endpoints into later as needed
+export const statuspageEmptyApi = createApi({
+  baseQuery: fetchBaseQuery(),
+  endpoints: () => ({}),
+  reducerPath: "statuspageApi",
+});
diff --git a/client/src/features/platform/statuspage-api/statuspage.api.ts b/client/src/features/platform/statuspage-api/statuspage.api.ts
new file mode 100644
index 000000000..6ebaf57e3
--- /dev/null
+++ b/client/src/features/platform/statuspage-api/statuspage.api.ts
@@ -0,0 +1,35 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+import { statuspageEmptyApi } from "./statuspage-empty.api";
+import { GetSummaryParams, StatusPageSummary } from "./statuspage.types";
+
+export const statuspageApi = statuspageEmptyApi.injectEndpoints({
+  endpoints: (build) => ({
+    getSummary: build.query<StatusPageSummary, GetSummaryParams>({
+      query: ({ statusPageId }) => {
+        return {
+          url: `https://${statusPageId}.statuspage.io/api/v2/summary.json`,
+        };
+      },
+    }),
+  }),
+  overrideExisting: false,
+});
+
+export const { useGetSummaryQuery } = statuspageApi;
diff --git a/client/src/features/platform/statuspage-api/statuspage.types.ts b/client/src/features/platform/statuspage-api/statuspage.types.ts
new file mode 100644
index 000000000..bfef7fc70
--- /dev/null
+++ b/client/src/features/platform/statuspage-api/statuspage.types.ts
@@ -0,0 +1,116 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+export interface StatusPageSummary {
+  page: StatusPageMetadata;
+  components: StatusPageComponents;
+  incidents: Incidents;
+  scheduled_maintenances: ScheduledMaintenances;
+  status: StatusPageOverallStatus;
+}
+
+export interface StatusPageMetadata {
+  id: string;
+  name: string;
+  url: string;
+  time_zone: string;
+  updated_at: string;
+}
+
+export type StatusPageComponents = StatusPageComponent[];
+
+export interface StatusPageComponent {
+  id: string;
+  name: string;
+  status: ComponentStatus;
+  position: number;
+  showcase: boolean;
+  only_show_if_degraded: boolean;
+}
+
+export type ComponentStatus =
+  | "operational"
+  | "degraded_performance"
+  | "partial_outage"
+  | "major_outage"
+  | "under_maintenance";
+
+export type Incidents = Incident[];
+
+export interface Incident {
+  id: string;
+  name: string;
+  status: IncidentStatus;
+  impact: StatusIndicator;
+  incident_updates: IncidentUpdates;
+  components: StatusPageComponents;
+}
+
+export type IncidentStatus =
+  | "investigating"
+  | "identified"
+  | "monitoring"
+  | "resolved";
+
+export type ScheduledMaintenances = ScheduledMaintenance[];
+
+export interface ScheduledMaintenance {
+  id: string;
+  name: string;
+  status: ScheduledMaintenanceStatus;
+  scheduled_for: string;
+  scheduled_until: string;
+  incident_updates: IncidentUpdates;
+}
+
+export type ScheduledMaintenanceStatus =
+  | "scheduled"
+  | "in_progress"
+  | "verifying"
+  | "completed";
+
+export type IncidentUpdates = IncidentUpdate[];
+
+export interface IncidentUpdate {
+  id: string;
+  status: IncidentUpdateStatus;
+  body: string;
+  display_at: string;
+}
+
+export type IncidentUpdateStatus =
+  | "investigating"
+  | "identified"
+  | "monitoring"
+  | "resolved";
+
+export interface StatusPageOverallStatus {
+  indicator: StatusIndicator;
+  description: string;
+}
+
+export type StatusIndicator =
+  | "none"
+  | "maintenance"
+  | "minor"
+  | "major"
+  | "critical";
+
+export interface GetSummaryParams {
+  statusPageId: string;
+}
diff --git a/client/src/features/rootV2/NavbarV2.tsx b/client/src/features/rootV2/NavbarV2.tsx
index 60d7cb6ea..6727733f0 100644
--- a/client/src/features/rootV2/NavbarV2.tsx
+++ b/client/src/features/rootV2/NavbarV2.tsx
@@ -45,6 +45,7 @@ import { Links } from "../../utils/constants/Docs";
 import AppContext from "../../utils/context/appContext";
 import BackToV1Button from "../projectsV2/shared/BackToV1Button";
 import WipBadge from "../projectsV2/shared/WipBadge";
+import StatusBanner from "../platform/components/StatusBanner";
 
 const RENKU_ALPHA_LOGO = "/static/public/img/logo-yellow.svg";
 
@@ -166,92 +167,99 @@ export default function NavbarV2() {
   }
 
   return (
-    <header
-      className={cx(
-        "bg-rk-blue",
-        "navbar",
-        "navbar-expand-lg",
-        "navbar-dark",
-        "p-0",
-        "rk-navbar"
-      )}
-    >
-      <Navbar
-        color="primary"
+    <>
+      <header
         className={cx(
-          "container-fluid",
-          "flex-wrap",
-          "flex-lg-nowrap",
-          "renku-container",
-          "px-2"
+          "bg-rk-blue",
+          "navbar",
+          "navbar-expand-lg",
+          "navbar-dark",
+          "p-0",
+          "rk-navbar"
         )}
       >
-        <div
+        <Navbar
+          color="primary"
           className={cx(
-            "text-white",
-            "d-flex",
-            "align-items-center",
+            "container-fluid",
             "flex-wrap",
-            "gap-2"
+            "flex-lg-nowrap",
+            "renku-container",
+            "px-2"
           )}
         >
-          <RenkuNavLinkV2
-            id="link-home"
-            data-cy="link-home"
-            to={ABSOLUTE_ROUTES.v2.root}
-            className={cx("navbar-brand", "me-2", "pb-0", "pt-0")}
-          >
-            <img
-              src={RENKU_ALPHA_LOGO}
-              alt="Renku 2.0 (beta)"
-              className="pe-2"
-              height="50"
-            />
-          </RenkuNavLinkV2>
-          <WipBadge>2.0 Beta</WipBadge>
-          <BackToV1Button outline={true} />
-        </div>
-        <NavbarToggler onClick={onToggle} className="border-0">
-          <List className={cx("bi", "text-rk-white")} />
-        </NavbarToggler>
-        <Collapse isOpen={isOpen} navbar>
-          <Nav
+          <div
             className={cx(
-              "flex-row",
-              "flex-wrap",
-              "flex-sm-nowrap",
-              "justify-content-end",
+              "text-white",
+              "d-flex",
               "align-items-center",
-              "ms-lg-auto"
+              "flex-wrap",
+              "gap-2"
             )}
-            navbar
           >
-            <NavItem className="me-3">
-              <RenkuNavLinkV2 end to={ABSOLUTE_ROUTES.v2.search} title="Search">
-                <Search className="bi" /> Search
-              </RenkuNavLinkV2>
-            </NavItem>
-            <NavItem className="me-3">
-              <RenkuNavLinkV2
-                end
-                to={ABSOLUTE_ROUTES.v2.root}
-                title="Dashboard"
-              >
-                Dashboard
-              </RenkuNavLinkV2>
-            </NavItem>
-            <NavItem className={cx("me-2", "nav-item", "col-auto")}>
-              <NavbarItemPlus />
-            </NavItem>
-            <NavItem className={cx("me-2", "nav-item", "col-auto")}>
-              <NavbarItemHelp />
-            </NavItem>
-            <NavItem className={cx("nav-item", "col-auto")}>
-              <RenkuToolbarItemUser params={params!} />
-            </NavItem>
-          </Nav>
-        </Collapse>
-      </Navbar>
-    </header>
+            <RenkuNavLinkV2
+              id="link-home"
+              data-cy="link-home"
+              to={ABSOLUTE_ROUTES.v2.root}
+              className={cx("navbar-brand", "me-2", "pb-0", "pt-0")}
+            >
+              <img
+                src={RENKU_ALPHA_LOGO}
+                alt="Renku 2.0 (beta)"
+                className="pe-2"
+                height="50"
+              />
+            </RenkuNavLinkV2>
+            <WipBadge>2.0 Beta</WipBadge>
+            <BackToV1Button outline={true} />
+          </div>
+          <NavbarToggler onClick={onToggle} className="border-0">
+            <List className={cx("bi", "text-rk-white")} />
+          </NavbarToggler>
+          <Collapse isOpen={isOpen} navbar>
+            <Nav
+              className={cx(
+                "flex-row",
+                "flex-wrap",
+                "flex-sm-nowrap",
+                "justify-content-end",
+                "align-items-center",
+                "ms-lg-auto"
+              )}
+              navbar
+            >
+              <NavItem className="me-3">
+                <RenkuNavLinkV2
+                  end
+                  to={ABSOLUTE_ROUTES.v2.search}
+                  title="Search"
+                >
+                  <Search className="bi" /> Search
+                </RenkuNavLinkV2>
+              </NavItem>
+              <NavItem className="me-3">
+                <RenkuNavLinkV2
+                  end
+                  to={ABSOLUTE_ROUTES.v2.root}
+                  title="Dashboard"
+                >
+                  Dashboard
+                </RenkuNavLinkV2>
+              </NavItem>
+              <NavItem className={cx("me-2", "nav-item", "col-auto")}>
+                <NavbarItemPlus />
+              </NavItem>
+              <NavItem className={cx("me-2", "nav-item", "col-auto")}>
+                <NavbarItemHelp />
+              </NavItem>
+              <NavItem className={cx("nav-item", "col-auto")}>
+                <RenkuToolbarItemUser params={params!} />
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Navbar>
+      </header>
+      <StatusBanner params={params} />
+    </>
   );
 }
diff --git a/client/src/help/Help.tsx b/client/src/help/Help.tsx
index e3ca560c5..a57b1e69d 100644
--- a/client/src/help/Help.tsx
+++ b/client/src/help/Help.tsx
@@ -35,11 +35,12 @@ import {
   ExternalIconLink,
 } from "../components/ExternalLinks";
 import RenkuNavLinkV2 from "../components/RenkuNavLinkV2";
-import { StatuspageDisplay, isStatusConfigured } from "../statuspage";
+import { isStatusConfigured } from "../statuspage";
 import { Docs, Links, RenkuPythonDocs } from "../utils/constants/Docs";
 import AppContext from "../utils/context/appContext";
 import { DEFAULT_APP_PARAMS } from "../utils/context/appParams.constants";
 
+import StatusSummary from "../features/platform/components/StatusSummary";
 import HelpRelease from "./HelpRelease";
 import PrivacyPolicy from "./PrivacyPolicy";
 import TermsOfService from "./TermsOfService";
@@ -197,12 +198,11 @@ function HelpDocumentation() {
 }
 
 function HelpContent() {
-  const { model } = useContext(AppContext);
   return (
     <Routes>
       <Route path="/" element={<HelpGetting />} />
       <Route path="docs" element={<HelpDocumentation />} />
-      <Route path="status" element={<StatuspageDisplay model={model} />} />
+      <Route path="status" element={<StatusSummary />} />
       <Route path="release" element={<HelpRelease />} />
       <Route path="tos" element={<TermsOfService />} />
       <Route path="privacy" element={<PrivacyPolicy />} />
diff --git a/client/src/landing/AnonymousHome.tsx b/client/src/landing/AnonymousHome.tsx
index 21dddd169..f116baa57 100644
--- a/client/src/landing/AnonymousHome.tsx
+++ b/client/src/landing/AnonymousHome.tsx
@@ -32,7 +32,6 @@ import { Col, Row } from "reactstrap";
 
 import LazyRenkuMarkdown from "../components/markdown/LazyRenkuMarkdown";
 import { stateToSearchString } from "../features/kgSearch";
-import { StatuspageBanner } from "../statuspage";
 import AppContext from "../utils/context/appContext";
 import { DEFAULT_APP_PARAMS } from "../utils/context/appParams.constants";
 import { Url } from "../utils/helpers/url";
@@ -74,16 +73,10 @@ export default function AnonymousHome() {
 }
 
 export function HomeHeader(props: AnonymousHomeConfig) {
-  const { urlMap } = props;
   return (
     <Fragment>
       <Row key="statuspage">
         <Col>
-          <StatuspageBanner
-            siteStatusUrl={urlMap.siteStatusUrl}
-            model={props.model}
-            location={{ pathname: Url.get(Url.pages.landing) }}
-          />
           <NavBarWarnings
             model={props.model}
             uiShortSha={props.params["UI_SHORT_SHA"]}
diff --git a/client/src/utils/customHooks/useNow.hook.ts b/client/src/utils/customHooks/useNow.hook.ts
new file mode 100644
index 000000000..294de5b17
--- /dev/null
+++ b/client/src/utils/customHooks/useNow.hook.ts
@@ -0,0 +1,51 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+
+import { DateTime, Duration } from "luxon";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+interface UseNowArgs {
+  refresh?: Duration;
+}
+/**
+ * Provides `now` for functional components, refreshed using `refresh` intervals.
+ */
+export default function useNow(args?: UseNowArgs) {
+  const refresh = useMemo(
+    () => args?.refresh ?? Duration.fromObject({ minute: 1 }),
+    [args?.refresh]
+  );
+
+  const [now, setNow] = useState<DateTime>(DateTime.utc());
+
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    timeoutRef.current = window.setInterval(() => {
+      setNow(DateTime.utc());
+    }, refresh.valueOf());
+    return () => {
+      if (timeoutRef.current) {
+        window.clearInterval(timeoutRef.current);
+      }
+      timeoutRef.current = null;
+    };
+  }, [refresh]);
+
+  return now;
+}
diff --git a/client/src/utils/helpers/EnhancedState.ts b/client/src/utils/helpers/EnhancedState.ts
index 20e884f78..3907c1863 100644
--- a/client/src/utils/helpers/EnhancedState.ts
+++ b/client/src/utils/helpers/EnhancedState.ts
@@ -65,6 +65,8 @@ import { versionsApi } from "../../features/versions/versions.api";
 import { workflowsApi } from "../../features/workflows/WorkflowsApi";
 import { workflowsSlice } from "../../features/workflows/WorkflowsSlice";
 import featureFlagsSlice from "../feature-flags/featureFlags.slice";
+import { platformEmptyApi as platformApi } from "../../features/platform/api/platform-empty.api";
+import { statuspageEmptyApi as statuspageApi } from "../../features/platform/statuspage-api/statuspage-empty.api";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const createStore = <S = any, A extends Action = AnyAction>(
@@ -95,6 +97,7 @@ export const createStore = <S = any, A extends Action = AnyAction>(
     [inactiveKgProjectsApi.reducerPath]: inactiveKgProjectsApi.reducer,
     [keycloakUserApi.reducerPath]: keycloakUserApi.reducer,
     [kgSearchApi.reducerPath]: kgSearchApi.reducer,
+    [platformApi.reducerPath]: platformApi.reducer,
     [projectCloudStorageApi.reducerPath]: projectCloudStorageApi.reducer,
     [projectCoreApi.reducerPath]: projectCoreApi.reducer,
     [projectGitLabApi.reducerPath]: projectGitLabApi.reducer,
@@ -108,6 +111,7 @@ export const createStore = <S = any, A extends Action = AnyAction>(
     [sessionsApi.reducerPath]: sessionsApi.reducer,
     [sessionSidecarApi.reducerPath]: sessionSidecarApi.reducer,
     [sessionsV2Api.reducerPath]: sessionsV2Api.reducer,
+    [statuspageApi.reducerPath]: statuspageApi.reducer,
     [termsApi.reducerPath]: termsApi.reducer,
     [userPreferencesApi.reducerPath]: userPreferencesApi.reducer,
     [versionsApi.reducerPath]: versionsApi.reducer,
@@ -132,6 +136,7 @@ export const createStore = <S = any, A extends Action = AnyAction>(
         .concat(inactiveKgProjectsApi.middleware)
         .concat(keycloakUserApi.middleware)
         .concat(kgSearchApi.middleware)
+        .concat(platformApi.middleware)
         .concat(projectCloudStorageApi.middleware)
         .concat(projectCoreApi.middleware)
         .concat(projectGitLabApi.middleware)
@@ -146,6 +151,7 @@ export const createStore = <S = any, A extends Action = AnyAction>(
         .concat(sessionSidecarApi.middleware)
         .concat(sessionSidecarApi.middleware)
         .concat(sessionsV2Api.middleware)
+        .concat(statuspageApi.middleware)
         .concat(termsApi.middleware)
         .concat(userPreferencesApi.middleware)
         .concat(versionsApi.middleware)
diff --git a/tests/cypress/e2e/maintenance.spec.ts b/tests/cypress/e2e/maintenance.spec.ts
index 0605b98cb..bec00228d 100644
--- a/tests/cypress/e2e/maintenance.spec.ts
+++ b/tests/cypress/e2e/maintenance.spec.ts
@@ -78,18 +78,7 @@ describe("display the status page", () => {
     cy.get(".alert").should("not.exist");
   });
 
-  it("Shows the banner on the home page if there is a major incident", () => {
-    fixtures
-      .config()
-      .versions()
-      .userNone()
-      .getStatuspageInfo({ fixture: "statuspage/statuspage-outage.json" });
-    cy.visit("/");
-    cy.wait("@getStatuspageInfo");
-    cy.get(".alert").contains("RenkuLab is unstable").should("be.visible");
-  });
-
-  it("Shows the banner everywhere if there is a major incident", () => {
+  it("Shows the banner on the dashboard if there is an incident", () => {
     fixtures
       .config()
       .versions()
@@ -97,30 +86,17 @@ describe("display the status page", () => {
       .getStatuspageInfo({ fixture: "statuspage/statuspage-outage.json" });
     cy.visit("/");
     cy.wait("@getStatuspageInfo");
-    cy.get(".alert").contains("RenkuLab is unstable").should("be.visible");
-    cy.contains("Search").click();
-    cy.get(".alert").contains("RenkuLab is unstable").should("be.visible");
-    cy.get(".btn-close").should("not.exist");
+    cy.get(".alert").contains("Ongoing incident").should("be.visible");
   });
 
-  it("Shows the banner only on the dashboard if there is a minor incident", () => {
-    fixtures
-      .config()
-      .versions()
-      .userTest()
-      .getStatuspageInfo({
-        overrides: {
-          status: {
-            indicator: "minor",
-            description: "Everything is a little slow, but working",
-          },
-        },
-      });
+  it("Shows the banner everywhere if there is an incident", () => {
+    fixtures.config().versions().userTest().getStatuspageInfo({
+      fixture: "statuspage/statuspage-outage.json",
+    });
     cy.visit("/");
     cy.wait("@getStatuspageInfo");
-    cy.get(".alert").contains("RenkuLab is unstable").should("be.visible");
-    cy.get(".btn-close").should("be.visible");
+    cy.get(".alert").contains("Ongoing incident").should("be.visible");
     cy.contains("Search").click();
-    cy.get(".alert").should("not.exist");
+    cy.get(".alert").contains("Ongoing incident").should("be.visible");
   });
 });