From 31865673293ab88240b2077b0424429fc1ff637f Mon Sep 17 00:00:00 2001
From: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>
Date: Wed, 26 Nov 2025 13:31:12 +0100
Subject: [PATCH] exp: session alert concept

---
 .../SessionShowPage/ShowSessionPage.tsx       | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
index dc6b3ac689..3fb3775d8b 100644
--- a/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
+++ b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
@@ -26,6 +26,7 @@ import {
   Clock,
   Cloud,
   ExclamationTriangle,
+  ExclamationTriangleFill,
   FileEarmarkText,
   Link45deg,
   PauseCircle,
@@ -37,6 +38,9 @@ import {
   Modal,
   ModalBody,
   ModalHeader,
+  PopoverBody,
+  PopoverHeader,
+  UncontrolledPopover,
   UncontrolledTooltip,
 } from "reactstrap";
 
@@ -206,6 +210,7 @@ export default function ShowSessionPage() {
           className={cx("d-flex", styles.fullscreenHeader)}
           data-cy="session-header"
         >
+          <Alerts />
           <div
             className={cx(
               "align-items-center",
@@ -608,3 +613,47 @@ function useSessionProjectAndLauncher({
     project,
   };
 }
+
+function Alerts() {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  return (
+    <>
+      <button
+        ref={ref}
+        className={cx(
+          "fs-2",
+          "text-bg-danger",
+          "text-center",
+          "align-middle",
+          "d-block",
+          "p-0",
+          "border-0"
+        )}
+        style={{ height: "42px", width: "42px" }}
+      >
+        <ExclamationTriangleFill className="bi" />
+      </button>
+      <UncontrolledPopover
+        target={ref}
+        trigger="click"
+        placement="auto"
+        popperClassName="foo"
+        defaultOpen
+      >
+        <PopoverHeader className="text-bg-danger">
+          High memory usage
+        </PopoverHeader>
+        <PopoverBody className={cx("text-danger", "bg-danger-subtle")}>
+          Your session is running out of memory
+        </PopoverBody>
+        <PopoverHeader className={cx("rounded-0", "text-bg-danger")}>
+          High disk usage
+        </PopoverHeader>
+        <PopoverBody className={cx("text-danger", "bg-danger-subtle")}>
+          Your session is running out of disk space
+        </PopoverBody>
+      </UncontrolledPopover>
+    </>
+  );
+}