feat: add session alerts

client/src/features/sessionsV2/SessionShowPage/SessionAlerts.tsx

@@ -0,0 +1,169 @@
+/*!
+ * Copyright 2025 - 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 { useEffect, useRef, useState } from "react";
+import {
+  ExclamationTriangle,
+  ExclamationTriangleFill,
+} from "react-bootstrap-icons";
+import ReactMarkdown from "react-markdown";
+import { Badge, Button, Popover, PopoverBody, PopoverHeader } from "reactstrap";
+
+import { useGetAlertsQuery, type Alert } from "../api/sessionsV2.api";
+
+interface SessionAlertsProps {
+  sessionName?: string;
+}
+
+const POLL_INTERVAL = 12000;
+
+interface LinkRendererProps {
+  href?: string;
+  children?: React.ReactNode;
+}
+
+function LinkRenderer(props: LinkRendererProps) {
+  return (
+    <a href={props.href} target="_blank" rel="noreferrer">
+      {props.children}
+    </a>
+  );
+}
+
+export default function SessionAlerts({ sessionName }: SessionAlertsProps) {
+  const { data: alerts } = useGetAlertsQuery(
+    sessionName ? { sessionName } : skipToken,
+    {
+      pollingInterval: POLL_INTERVAL,
+      refetchOnMountOrArgChange: true,
+    }
+  );
+
+  return <Alerts alerts={alerts ?? []} />;
+}
+
+interface AlertsProps {
+  alerts: Alert[];
+}
+
+function Alerts({ alerts }: AlertsProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [prevAlertIds, setPrevAlertIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!alerts || alerts.length === 0) {
+      setPrevAlertIds(new Set());
+      setIsOpen(false);
+      return;
+    }
+
+    const currentAlertIds = new Set(alerts.map((alert) => alert.id));
+
+    const hasNewAlerts = alerts.some((alert) => !prevAlertIds.has(alert.id));
+
+    if (hasNewAlerts) {
+      setIsOpen(true);
+    }
+
+    setPrevAlertIds(currentAlertIds);
+  }, [alerts, prevAlertIds]);
+
+  const togglePopover = () => setIsOpen(!isOpen);
+
+  if (!alerts || alerts.length === 0) {
+    return (
+      <div>
+        <Button
+          className={cx(
+            "bg-transparent",
+            "border-0",
+            "no-focus",
+            "p-0",
+            "shadow-none",
+            "text-dark"
+          )}
+          data-cy="session-alerts"
+          innerRef={ref}
+        >
+          <ExclamationTriangle className="bi" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="position-relative">
+        <Button
+          innerRef={ref}
+          onClick={togglePopover}
+          className={cx(
+            "bg-transparent",
+            "border-0",
+            "no-focus",
+            "p-0",
+            "shadow-none",
+            "text-danger"
+          )}
+          data-cy="session-alerts"
+        >
+          <ExclamationTriangleFill className="bi" />
+        </Button>
+        {alerts.length > 1 && (
+          <Badge
+            color="dark"
+            pill
+            className="position-absolute"
+            style={{
+              fontSize: "0.65rem",
+              top: "-6px",
+              right: "-12px",
+              minWidth: "20px",
+            }}
+          >
+            {alerts.length}
+          </Badge>
+        )}
+      </div>
+      <Popover
+        target={ref}
+        isOpen={isOpen}
+        toggle={togglePopover}
+        trigger="legacy"
+        placement="auto"
+        popperClassName="session-alerts-popover"
+      >
+        {alerts.map((alert) => (
+          <div key={alert.id}>
+            <PopoverHeader className="text-bg-danger">
+              {alert.title}
+            </PopoverHeader>
+            <PopoverBody className={cx("text-dark", "bg-danger-subtle")}>
+              <ReactMarkdown components={{ a: LinkRenderer }}>
+                {alert.message}
+              </ReactMarkdown>
+            </PopoverBody>
+          </div>
+        ))}
+      </Popover>
+    </>
+  );
+}

client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx

@@ -64,6 +64,7 @@ import PauseOrDeleteSessionModal from "../PauseOrDeleteSessionModal";
 import { getSessionFavicon } from "../session.utils";
 import { SessionV2 } from "../sessionsV2.types";
 import SessionLaunchLinkModal from "../SessionView/SessionLaunchLinkModal";
+import SessionAlerts from "./SessionAlerts";
 import SessionIframe from "./SessionIframe";
 import SessionPaused from "./SessionPaused";
 import SessionUnavailable from "./SessionUnavailable";
@@ -225,6 +226,7 @@ export default function ShowSessionPage() {
               namespace={namespace}
               slug={slug}
             />
+            <SessionAlerts sessionName={sessionName} />
           </div>
           <div
             className={cx(

client/src/features/sessionsV2/api/sessionsV2.api.ts

@@ -80,6 +80,8 @@ export const {
   useDeleteSessionsBySessionIdMutation,
   useGetSessionsBySessionIdLogsQuery,
   useGetSessionsImagesQuery,
+  // "alerts" hooks
+  useGetAlertsQuery,
 } = sessionsV2Api;
 
 export type * from "./sessionsV2.generated-api";

client/src/features/sessionsV2/api/sessionsV2.generated-api.ts

@@ -131,6 +131,12 @@ const injectedRtkApi = api.injectEndpoints({
         params: { image_url: queryArg.imageUrl },
       }),
     }),
+    getAlerts: build.query<GetAlertsApiResponse, GetAlertsApiArg>({
+      query: (queryArg) => ({
+        url: `/alerts`,
+        params: { session_name: queryArg.sessionName },
+      }),
+    }),
   }),
   overrideExisting: false,
 });
@@ -230,6 +236,11 @@ export type GetSessionsImagesApiArg = {
   /** The Docker image URL (tag included) that should be fetched. */
   imageUrl: string;
 };
+export type GetAlertsApiResponse = /** status 200 List of alerts */ AlertList;
+export type GetAlertsApiArg = {
+  /** Filter alerts by session name */
+  sessionName?: string;
+};
 export type ImagePlatform = {
   architecture: string;
   os: string;
@@ -485,6 +496,17 @@ export type SessionPatchRequest = {
 export type SessionLogsResponse = {
   [key: string]: string;
 };
+export type Alert = {
+  id: string;
+  title: string;
+  message: string;
+  event_type: string;
+  user_id: string;
+  session_name?: string;
+  creation_date: string;
+  resolved_at?: string;
+};
+export type AlertList = Alert[];
 export const {
   useGetNotebooksImagesQuery,
   useGetNotebooksLogsByServerNameQuery,
@@ -501,4 +523,5 @@ export const {
   usePatchSessionsBySessionIdMutation,
   useGetSessionsBySessionIdLogsQuery,
   useGetSessionsImagesQuery,
+  useGetAlertsQuery,
 } = injectedRtkApi;

client/src/features/sessionsV2/api/sessionsV2.openapi.json

@@ -591,6 +591,38 @@
         },
         "tags": ["sessions"]
       }
+    },
+    "/alerts": {
+      "get": {
+        "summary": "Get alerts for the user",
+        "parameters": [
+          {
+            "description": "Filter alerts by session name",
+            "in": "query",
+            "name": "session_name",
+            "required": false,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "List of alerts",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/AlertList"
+                }
+              }
+            }
+          },
+          "default": {
+            "$ref": "#/components/responses/Error"
+          }
+        },
+        "tags": ["alerts"]
+      }
     }
   },
   "components": {
@@ -1570,6 +1602,52 @@
           }
         },
         "required": ["architecture", "os"]
+      },
+      "Alert": {
+        "type": "object",
+        "description": "An alert notification for a session event.",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "message": {
+            "type": "string"
+          },
+          "event_type": {
+            "type": "string"
+          },
+          "user_id": {
+            "type": "string"
+          },
+          "session_name": {
+            "type": "string"
+          },
+          "creation_date": {
+            "type": "string",
+            "format": "date-time"
+          },
+          "resolved_at": {
+            "type": "string",
+            "format": "date-time"
+          }
+        },
+        "required": [
+          "id",
+          "title",
+          "message",
+          "event_type",
+          "user_id",
+          "creation_date"
+        ]
+      },
+      "AlertList": {
+        "type": "array",
+        "items": {
+          "$ref": "#/components/schemas/Alert"
+        }
       }
     },
     "responses": {