Use the resource pool hybernation warning

client/src/features/admin/AddResourcePoolButton.tsx

@@ -39,6 +39,7 @@ import {
   usePostResourcePoolsMutation,
   type RemoteConfiguration,
 } from "../sessionsV2/api/computeResources.api";
+import { PAUSE_SESSION_WARNING_GRACE_PERIOD_SECONDS } from "../sessionsV2/session.constants";
 import { useGetNotebooksVersionQuery } from "../versions/versions.api";
 import type { ResourcePoolForm } from "./adminComputeResources.types";
 import ResourcePoolClusterIdInput from "./forms/ResourcePoolClusterIdInput";
@@ -105,6 +106,7 @@ function AddResourcePoolModal({ isOpen, toggle }: AddResourcePoolModalProps) {
         gpu: defaultQuota.gpu,
       },
       idleThresholdMinutes: undefined,
+      pauseWarningMinutes: undefined,
       hibernationThresholdMinutes: undefined,
       clusterId: "",
       remote: {
@@ -159,6 +161,9 @@ function AddResourcePoolModal({ isOpen, toggle }: AddResourcePoolModalProps) {
           idle_threshold: data.idleThresholdMinutes
             ? data.idleThresholdMinutes * 60
             : undefined,
+          hibernation_warning_period: data.pauseWarningMinutes
+            ? data.pauseWarningMinutes * 60
+            : undefined,
           name: data.name,
           public: data.public,
           quota: data.quota,
@@ -180,6 +185,7 @@ function AddResourcePoolModal({ isOpen, toggle }: AddResourcePoolModalProps) {
         gpu: defaultQuota.gpu,
       },
       idleThresholdMinutes: undefined,
+      pauseWarningMinutes: undefined,
       hibernationThresholdMinutes: undefined,
       clusterId: "",
       remote: {
@@ -248,9 +254,10 @@ function AddResourcePoolModal({ isOpen, toggle }: AddResourcePoolModalProps) {
             />
             <div className="invalid-feedback">Please provide a name</div>
           </div>
+
           <div>
             <Label className="form-label" for="addResourcePoolIdleThreshold">
-              Maximum idle time before hibernating (minutes)
+              Maximum idle time before pausing (minutes)
             </Label>
             <Controller
               control={control}
@@ -282,6 +289,44 @@ function AddResourcePoolModal({ isOpen, toggle }: AddResourcePoolModalProps) {
               isLoading={notebookVersion.isLoading}
             />
           </div>
+
+          <div>
+            <Label
+              className="form-label"
+              for="addResourcePoolPauseWarningMinutes"
+            >
+              How long in advance should users be warned about pausing (minutes)
+            </Label>
+            <Controller
+              control={control}
+              name="pauseWarningMinutes"
+              render={({ field }) => (
+                <Input
+                  className={cx(
+                    "form-control",
+                    errors.pauseWarningMinutes && "is-invalid"
+                  )}
+                  id="addResourcePoolPauseWarningMinutes"
+                  min="0"
+                  placeholder="pause warning"
+                  step="1"
+                  type="number"
+                  {...field}
+                />
+              )}
+              rules={{ min: 0 }}
+            />
+            <div className="invalid-feedback">
+              Please enter 0 (or leave it blank) for default or anything greater
+              than 0 to specify a custom value.
+            </div>
+            <Label className="form-text">
+              Default:{" "}
+              {toFullHumanDuration(PAUSE_SESSION_WARNING_GRACE_PERIOD_SECONDS)}.
+              The value cannot be higher than Max idle time.
+            </Label>
+          </div>
+
           <div>
             <Label
               className="form-label"

client/src/features/admin/AdminPage.tsx

@@ -314,6 +314,7 @@ function ResourcePoolItem({ resourcePool }: ResourcePoolItemProps) {
 function ResourcePoolThresholds({ resourcePool }: ResourcePoolItemProps) {
   const {
     idle_threshold: idleThreshold,
+    hibernation_warning_period: hibernationWarningPeriod,
     hibernation_threshold: hibernationThreshold,
   } = resourcePool;
 
@@ -325,8 +326,8 @@ function ResourcePoolThresholds({ resourcePool }: ResourcePoolItemProps) {
         "align-items-center",
         "row",
         "row-cols-1",
-        "row-cols-sm-3",
-        "row-cols-lg-4",
+        "row-cols-sm-4",
+        "row-cols-md-5",
         "text-end"
       )}
     >
@@ -347,6 +348,18 @@ function ResourcePoolThresholds({ resourcePool }: ResourcePoolItemProps) {
             : "unknown"}
         </span>
       </div>
+      <div className="col">
+        Warn in advance{" "}
+        <span className="text-nowrap">
+          {hibernationWarningPeriod
+            ? toFullHumanDuration(hibernationWarningPeriod)
+            : isLoading
+            ? "(Loading...)"
+            : isError
+            ? "unavailable"
+            : "(unknown default)"}
+        </span>
+      </div>
       <div className="col">
         Delete after{" "}
         <span className="text-nowrap">

client/src/features/admin/UpdateResourceClassButton.tsx

@@ -18,7 +18,13 @@
 
 import cx from "classnames";
 import { useCallback, useEffect, useState } from "react";
-import { CheckLg, PlusLg, TrashFill, XLg } from "react-bootstrap-icons";
+import {
+  CheckLg,
+  PencilSquare,
+  PlusLg,
+  TrashFill,
+  XLg,
+} from "react-bootstrap-icons";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import {
   Button,
@@ -60,7 +66,8 @@ export default function UpdateResourceClassButton({
   return (
     <>
       <Button size="sm" color="outline-primary" onClick={toggle}>
-        Update
+        <PencilSquare className={cx("bi", "me-1")} />
+        Edit
       </Button>
       <UpdateResourceClassModal
         isOpen={isOpen}
@@ -453,7 +460,7 @@ function UpdateResourceClassModal({
       <ModalFooter>
         <Button color="outline-primary" onClick={toggle}>
           <XLg className={cx("bi", "me-1")} />
-          Close
+          Cancel
         </Button>
         <Button
           color="primary"

client/src/features/admin/UpdateResourcePoolQuotaButton.tsx

@@ -18,7 +18,7 @@
 
 import cx from "classnames";
 import { useCallback, useEffect, useState } from "react";
-import { CheckLg, XLg } from "react-bootstrap-icons";
+import { CheckLg, PencilSquare, XLg } from "react-bootstrap-icons";
 import { Controller, useForm } from "react-hook-form";
 import {
   Button,
@@ -62,7 +62,8 @@ export default function UpdateResourcePoolQuotaButton({
         disabled={resourcePool.quota == null}
         onClick={toggle}
       >
-        Update
+        <PencilSquare className={cx("bi", "me-1")} />
+        Edit
       </Button>
       <UpdateResourcePoolQuotaModal
         isOpen={isOpen}
@@ -200,7 +201,7 @@ function UpdateResourcePoolQuotaModal({
       <ModalFooter>
         <Button color="outline-primary" onClick={toggle}>
           <XLg className={cx("bi", "me-1")} />
-          Close
+          Cancel
         </Button>
         <Button
           color="primary"

client/src/features/admin/UpdateResourcePoolRemoteButton.tsx

@@ -18,7 +18,7 @@
 
 import cx from "classnames";
 import { useCallback, useEffect, useState } from "react";
-import { CheckLg, XLg } from "react-bootstrap-icons";
+import { CheckLg, PencilSquare, XLg } from "react-bootstrap-icons";
 import { useForm } from "react-hook-form";
 import {
   Button,
@@ -53,7 +53,8 @@ export default function UpdateResourcePoolRemoteButton({
   return (
     <>
       <Button size="sm" color="outline-primary" onClick={toggle}>
-        Update
+        <PencilSquare className={cx("bi", "me-1")} />
+        Edit
       </Button>
       <UpdateResourcePoolRemoteModal
         isOpen={isOpen}
@@ -163,7 +164,7 @@ function UpdateResourcePoolRemoteModal({
       <ModalFooter>
         <Button color="outline-primary" onClick={toggle}>
           <XLg className={cx("bi", "me-1")} />
-          Close
+          Cancel
         </Button>
         <Button
           color="primary"