fix(client): improve session scheduling error messages (#3082)

Fixes #3036. Add a user-friendly message when the session cannot be scheduled due to a lack of compute resources.
SwissDataScienceCenter · Mar 26, 2024 · 8f90295 · 8f90295
1 parent ecfd1e6
commit 8f90295
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/client/src/features/session/components/status/SessionStatusBadge.tsx b/client/src/features/session/components/status/SessionStatusBadge.tsx
@@ -26,6 +26,7 @@ import {
   PopoverHeader,
   UncontrolledPopover,
 } from "reactstrap";
+
 import { NotebookAnnotations } from "../../../../notebooks/components/session.types";
 import { SessionStatus, SessionStatusState } from "../../sessions.types";
 import { getSessionStatusColor } from "../../utils/sessionStatus.utils";
@@ -60,7 +61,7 @@ export default function SessionStatusBadge({
           : "Paused Session"}
       </PopoverHeader>
       <PopoverBody>
-        {message}
+        <PrettySessionErrorMessage message={message} />
         {defaultImage && <div>A fallback image was used.</div>}
         {status === "hibernated" && (
           <SessionHibernationStatusDetails annotations={annotations} />
@@ -93,6 +94,46 @@ export default function SessionStatusBadge({
   );
 }
 
+interface PrettySessionErrorMessageProps {
+  message: string | null | undefined;
+}
+
+export function PrettySessionErrorMessage({
+  message,
+}: PrettySessionErrorMessageProps) {
+  // eslint-disable-next-line spellcheck/spell-checker
+  if (message?.includes("Insufficient nvidia.com/gpu")) {
+    return (
+      <>
+        <p className="mb-2">
+          Scheduling error: there are not enough GPUs available to start or
+          resume the session.
+        </p>
+        <h3 className="fs-6">Original error message:</h3>
+        <p className="mb-0">{message}</p>
+      </>
+    );
+  }
+
+  if (
+    message?.includes("nodes are available") ||
+    message?.includes("The resource quota has been exceeded.")
+  ) {
+    return (
+      <>
+        <p className="mb-2">
+          Scheduling error: one or more compute resources have been exhausted in
+          the resource pool.
+        </p>
+        <h3 className="fs-6">Original error message:</h3>
+        <p className="mb-0">{message}</p>
+      </>
+    );
+  }
+
+  return <>{message}</>;
+}
+
 function displayedSessionStatus(status: SessionStatusState): string {
   return status === "running"
     ? "Running"

diff --git a/client/src/notebooks/components/SessionListStatus.tsx b/client/src/notebooks/components/SessionListStatus.tsx
@@ -25,8 +25,10 @@ import {
   PopoverHeader,
   UncontrolledPopover,
 } from "reactstrap";
+
 import { Clipboard } from "../../components/clipboard/Clipboard";
 import SessionHibernationStatusDetails from "../../features/session/components/status/SessionHibernationStatusDetails";
+import { PrettySessionErrorMessage } from "../../features/session/components/status/SessionStatusBadge";
 import SessionStatusIcon from "../../features/session/components/status/SessionStatusIcon";
 import SessionStatusText from "../../features/session/components/status/SessionStatusText";
 import { SessionStatusState } from "../../features/session/sessions.types";
@@ -55,8 +57,7 @@ function SessionListRowStatusExtraDetails({
     <UncontrolledPopover target={uid} trigger="legacy" placement="bottom">
       <PopoverHeader>Kubernetes pod status</PopoverHeader>
       <PopoverBody>
-        <span>{details.message}</span>
-        <br />
+        <PrettySessionErrorMessage message={details.message} />
       </PopoverBody>
     </UncontrolledPopover>
   );
@@ -136,8 +137,7 @@ function SessionListRowStatusIconPopover({
       <UncontrolledPopover target={id} trigger="legacy" placement="right">
         <PopoverHeader>Kubernetes pod status</PopoverHeader>
         <PopoverBody>
-          <span>{details.message}</span>
-          <br />
+          <PrettySessionErrorMessage message={details.message} />
         </PopoverBody>
       </UncontrolledPopover>
     );