feat: add session alerts

Author: wesjdj

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

@@ -0,0 +1,120 @@
+/*!
+ * 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 cx from "classnames";
+import { useRef } from "react";
+import { ExclamationTriangleFill } from "react-bootstrap-icons";
+import ReactMarkdown from "react-markdown";
+import {
+  Badge,
+  Button,
+  PopoverBody,
+  PopoverHeader,
+  UncontrolledPopover,
+} from "reactstrap";
+import { skipToken } from "@reduxjs/toolkit/query";
+import { useGetAlertsQuery, type Alert } from "../api/sessionsV2.api";
+
+interface SessionAlertsProps {
+  sessionName?: string;
+  inline?: boolean;
+}
+
+const POLL_INTERVAL = 12000;
+
+export default function SessionAlerts({
+  sessionName,
+  inline = false,
+}: SessionAlertsProps) {
+  const { data: alerts } = useGetAlertsQuery(
+    sessionName ? { sessionName } : skipToken,
+    {
+      pollingInterval: POLL_INTERVAL,
+      refetchOnMountOrArgChange: true,
+    }
+  );
+
+  if (!alerts || alerts.length === 0) {
+    return null;
+  }
+
+  return <Alerts alerts={alerts} />;
+}
+
+interface AlertsProps {
+  alerts: Alert[];
+}
+
+function Alerts({ alerts }: AlertsProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  return (
+    <>
+      <div className="position-relative">
+        <Button
+          innerRef={ref}
+          className={cx(
+            "bg-danger",
+            "border-0",
+            "no-focus",
+            "rounded",
+            "shadow-none",
+            "text-white"
+          )}
+          style={{ padding: "0.25rem 0.5rem" }}
+          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: "-8px",
+              minWidth: "20px",
+            }}
+          >
+            {alerts.length}
+          </Badge>
+        )}
+      </div>
+      <UncontrolledPopover
+        target={ref}
+        trigger="click"
+        placement="auto"
+        popperClassName="session-alerts-popover"
+      >
+        {alerts.map((alert, index) => (
+          <div key={alert.id}>
+            <PopoverHeader className="text-bg-danger">
+              {alert.title}
+            </PopoverHeader>
+            <PopoverBody className={cx("text-dark", "bg-danger-subtle")}>
+              <ReactMarkdown>{alert.message}</ReactMarkdown>
+            </PopoverBody>
+          </div>
+        ))}
+      </UncontrolledPopover>
+    </>
+  );
+}
+

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

@@ -59,14 +59,15 @@ import {
   useGetProjectsByProjectIdSessionLaunchersQuery as useGetProjectSessionLaunchersQuery,
   type SessionLauncher,
 } from "../api/sessionLaunchersV2.api";
-import { useGetSessionsQuery } from "../api/sessionsV2.api";
+import { useGetSessionsQuery, useGetAlertsQuery } from "../api/sessionsV2.api";
 import PauseOrDeleteSessionModal from "../PauseOrDeleteSessionModal";
 import { getSessionFavicon } from "../session.utils";
 import { SessionV2 } from "../sessionsV2.types";
 import SessionLaunchLinkModal from "../SessionView/SessionLaunchLinkModal";
 import SessionIframe from "./SessionIframe";
 import SessionPaused from "./SessionPaused";
 import SessionUnavailable from "./SessionUnavailable";
+import SessionAlerts from "./SessionAlerts";
 
 import styles from "../../session/components/ShowSession.module.scss";
 
@@ -99,6 +100,11 @@ export default function ShowSessionPage() {
     return sessions.find(({ name }) => name === sessionName);
   }, [sessionName, sessions]);
 
+  const { data: alerts } = useGetAlertsQuery(
+    sessionName ? { sessionName } : skipToken
+  );
+  const hasAlerts = alerts && alerts.length > 0;
+
   useEffect(() => {
     const faviconByStatus = getSessionFavicon(
       thisSession?.status?.state,
@@ -225,6 +231,7 @@ export default function ShowSessionPage() {
               namespace={namespace}
               slug={slug}
             />
+            <SessionAlerts sessionName={sessionName} inline />
           </div>
           <div
             className={cx(
@@ -243,7 +250,7 @@ export default function ShowSessionPage() {
                 slug={slug}
               />
             </div>
-            <div className={cx("pe-3", "text-white")}>
+            <div className={cx("pe-3", hasAlerts ? "text-warning" : "text-white")}>
               <RenkuFrogIcon size={24} />
             </div>
           </div>

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

@@ -18,6 +18,20 @@
 
 import { sessionsV2GeneratedApi } from "./sessionsV2.generated-api";
 
+// Alert types (manually added - not in generated API yet)
+export interface 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[];
+
 // Adds tag handling for cache management
 const withTagHandling = sessionsV2GeneratedApi.enhanceEndpoints({
   addTagTypes: ["Session"],
@@ -61,13 +75,21 @@ const withTagHandling = sessionsV2GeneratedApi.enhanceEndpoints({
   },
 });
 
-// Adds tag invalidation endpoints
+// Adds tag invalidation endpoints and alerts
 export const sessionsV2Api = withTagHandling.injectEndpoints({
   endpoints: (build) => ({
     invalidateSessions: build.mutation<null, void>({
       queryFn: () => ({ data: null }),
       invalidatesTags: ["Session"],
     }),
+    getAlerts: build.query<AlertList, { sessionName?: string }>({
+      query: (queryArg) => ({
+        url: `/alerts`,
+        params: queryArg.sessionName
+          ? { session_name: queryArg.sessionName }
+          : {},
+      }),
+    }),
   }),
 });
 
@@ -80,6 +102,8 @@ export const {
   useDeleteSessionsBySessionIdMutation,
   useGetSessionsBySessionIdLogsQuery,
   useGetSessionsImagesQuery,
+  // "alerts" hooks
+  useGetAlertsQuery,
 } = sessionsV2Api;
 
 export type * from "./sessionsV2.generated-api";