Apply usage quotas

client/package.json

@@ -21,7 +21,7 @@
     "storybook-wait-server": "wait-on http://127.0.0.1:6006",
     "storybook-test": "test-storybook",
     "storybook-compile-and-test": "concurrently -k -s first -n 'BUILD,TEST' -c 'magenta,blue' 'npm run storybook-build && npm run storybook-start-server' 'npm run storybook-wait-server && npm run storybook-test'",
-    "generate-api": "npm run generate-api:computeResources && npm run generate-api:connectedServices && npm run generate-api:data-connectors && npm run generate-api:doiResolver && npm run generate-api:namespaceV2 && npm run generate-api:notifications && npm run generate-api:platform && npm run generate-api:projectCloudStorage && npm run generate-api:projectV2 && npm run generate-api:repositories && npm run generate-api:searchV2 && npm run generate-api:sessionLaunchersV2 && npm run generate-api:sessionsV2 && npm run generate-api:users",
+    "generate-api": "npm run generate-api:computeResources && npm run generate-api:connectedServices && npm run generate-api:data-connectors && npm run generate-api:doiResolver && npm run generate-api:namespaceV2 && npm run generate-api:notifications && npm run generate-api:platform && npm run generate-api:projectCloudStorage && npm run generate-api:projectV2 && npm run generate-api:repositories && npm run generate-api:resourceUsage && npm run generate-api:searchV2 && npm run generate-api:sessionLaunchersV2 && npm run generate-api:sessionsV2 && npm run generate-api:users",
     "generate-api:computeResources": "rtk-query-codegen-openapi src/features/sessionsV2/api/computeResources.api-config.ts",
     "generate-api:connectedServices": "rtk-query-codegen-openapi src/features/connectedServices/api/connectedServices.api-config.ts",
     "generate-api:data-connectors": "rtk-query-codegen-openapi src/features/dataConnectorsV2/api/data-connectors.api-config.ts",
@@ -32,11 +32,12 @@
     "generate-api:projectCloudStorage": "rtk-query-codegen-openapi src/features/cloudStorage/api/projectCloudStorage.api-config.ts",
     "generate-api:projectV2": "rtk-query-codegen-openapi src/features/projectsV2/api/projectV2.api-config.ts",
     "generate-api:repositories": "rtk-query-codegen-openapi src/features/repositories/api/repositories.api-config.ts",
+    "generate-api:resourceUsage": "rtk-query-codegen-openapi src/features/resourceUsage/api/resourceUsage.api-config.ts",
     "generate-api:searchV2": "rtk-query-codegen-openapi src/features/searchV2/api/searchV2.api-config.ts",
     "generate-api:sessionLaunchersV2": "rtk-query-codegen-openapi src/features/sessionsV2/api/sessionLaunchersV2.api-config.ts",
     "generate-api:sessionsV2": "rtk-query-codegen-openapi src/features/sessionsV2/api/sessionsV2.api-config.ts",
     "generate-api:users": "rtk-query-codegen-openapi src/features/usersV2/api/users.api-config.ts",
-    "update-api": "node scripts/update_api_spec.js computeResources connectedServices dataConnectors namespaceV2 notifications platform projectCloudStorage projectV2 repositories searchV2 sessionLaunchersV2 sessionsV2 users",
+    "update-api": "node scripts/update_api_spec.js computeResources connectedServices dataConnectors namespaceV2 notifications platform projectCloudStorage projectV2 repositories resourceUsage searchV2 sessionLaunchersV2 sessionsV2 users",
     "update-api:computeResources": "node scripts/update_api_spec.js computeResources",
     "update-api:connectedServices": "node scripts/update_api_spec.js connectedServices",
     "update-api:dataConnectors": "node scripts/update_api_spec.js dataConnectors",
@@ -46,6 +47,7 @@
     "update-api:projectCloudStorage": "node scripts/update_api_spec.js projectCloudStorage",
     "update-api:projectV2": "node scripts/update_api_spec.js projectV2",
     "update-api:repositories": "node scripts/update_api_spec.js repositories",
+    "update-api:resourceUsage": "node scripts/update_api_spec.js resourceUsage",
     "update-api:searchV2": "node scripts/update_api_spec.js searchV2",
     "update-api:sessionLaunchersV2": "node scripts/update_api_spec.js sessionLaunchersV2",
     "update-api:sessionsV2": "node scripts/update_api_spec.js sessionsV2",

client/scripts/update_api_spec.js

@@ -46,6 +46,8 @@ async function main() {
       updateProjectV2Api();
     } else if (arg.trim() === "repositories") {
       updateRepositoriesApi();
+    } else if (arg.trim() === "resourceUsage") {
+      updateResourceUsageApi();
     } else if (arg.trim() === "searchV2") {
       updateSearchV2Api();
     } else if (arg.trim() === "sessionLaunchersV2") {
@@ -122,6 +124,13 @@ async function updateRepositoriesApi() {
   });
 }
 
+async function updateResourceUsageApi() {
+  updateApiFiles({
+    specFile: "components/renku_data_services/resource_usage/api.spec.yaml",
+    destFile: "src/features/resourceUsage/api/resourceUsage.openapi.json",
+  });
+}
+
 async function updateSearchV2Api() {
   updateApiFiles({
     specFile: "components/renku_data_services/search/api.spec.yaml",

client/src/components/progress/ProgressSteps.tsx

@@ -71,25 +71,28 @@ interface ProgressStepsIndicatorProps {
   style: ProgressStyle;
   title: string;
   description: string;
-  status: StepsProgressBar[];
   moreOptions?: React.ReactNode;
+  extraDescription?: React.ReactNode;
+  status: StepsProgressBar[];
 }
 
 export default function ProgressStepsIndicator({
   style = ProgressStyle.Dark,
   title,
   description,
-  status,
   moreOptions,
+  extraDescription,
+  status,
 }: ProgressStepsIndicatorProps) {
   const content = status.map((s) => (
     <ProgressStep key={`step-${s.id}`} step={s} />
   ));
   return (
     <div className={cx(styles.progressBox, styles[`progressBox_${style}`])}>
       <h2>{title}</h2>
-      <p className="pb-2">{description}</p>
-      <div className="mt-3">
+      <p className="pb-0">{description}</p>
+      {extraDescription}
+      <div className={cx("mt-3", "pt-2")}>
         {content}
         {moreOptions}
       </div>

client/src/features/admin/AdminPage.tsx

@@ -36,6 +36,9 @@ import ChevronFlippedIcon from "~/components/icons/ChevronFlippedIcon";
 import { Loader } from "~/components/Loader";
 import { isFetchBaseQueryError } from "~/utils/helpers/ApiErrors";
 import { toFullHumanDuration } from "~/utils/helpers/DurationUtils";
+import { useGetResourcePoolsByResourcePoolIdLimitsQuery } from "../resourceUsage/api/resourceUsage.api";
+import UpdateResourceClassCostButton from "../resourceUsage/UpdateResourceClassCostButton";
+import UpdateResourcePoolUsageLimitsButton from "../resourceUsage/UpdateResourcePoolUsageLimitsButton";
 import {
   useDeleteResourcePoolsByResourcePoolIdMutation,
   useDeleteResourcePoolsByResourcePoolIdUsersAndUserIdMutation,
@@ -44,6 +47,7 @@ import {
   type PoolUserWithId,
   type ResourceClassWithId,
   type ResourcePoolWithId,
+  type ResourcePoolWithIdFiltered,
 } from "../sessionsV2/api/computeResources.api";
 import { useGetUsersQuery } from "../usersV2/api/users.api";
 import { useGetNotebooksVersionQuery } from "../versions/versions.api";
@@ -155,7 +159,10 @@ function ResourcePoolsList() {
 }
 
 interface ResourcePoolItemProps {
-  resourcePool: ResourcePoolWithId;
+  // TODO: Cluster is not declared as being in the response
+  // check if it should be added to the API spec
+  resourcePool: ResourcePoolWithIdFiltered &
+    Pick<ResourcePoolWithId, "cluster">;
 }
 
 function ResourcePoolItem({ resourcePool }: ResourcePoolItemProps) {
@@ -173,6 +180,9 @@ function ResourcePoolItem({ resourcePool }: ResourcePoolItemProps) {
   const toggle = useCallback(() => {
     setIsOpen((isOpen) => !isOpen);
   }, []);
+  const { data: usageLimits } = useGetResourcePoolsByResourcePoolIdLimitsQuery({
+    resourcePoolId: resourcePool.id,
+  });
 
   return (
     <Card className="mt-2">
@@ -228,7 +238,7 @@ function ResourcePoolItem({ resourcePool }: ResourcePoolItemProps) {
                 )}
               >
                 <div className={cx("col", "col-sm-12", "col-md", "text-start")}>
-                  Quota:
+                  Resource Quota:
                 </div>
                 <div className="col">{quota.cpu}&nbsp;CPUs</div>
                 <div className="col">{quota.memory}&nbsp;GB RAM</div>
@@ -241,7 +251,37 @@ function ResourcePoolItem({ resourcePool }: ResourcePoolItemProps) {
               <p className="mb-0">No quota</p>
             )}
           </div>
-
+          <div className={cx("border-bottom", "py-2")}>
+            <div
+              className={cx(
+                "align-items-center",
+                "row",
+                "row-cols-1",
+                "row-cols-sm-4",
+                "row-cols-md-5",
+                "text-end",
+              )}
+            >
+              <div className={cx("col", "col-sm-12", "col-md", "text-start")}>
+                Usage Quota:
+              </div>
+              {usageLimits != null && (
+                <div className="col">
+                  {usageLimits.user_limit} credits / user
+                </div>
+              )}
+              {usageLimits != null && (
+                <div className="col">
+                  {usageLimits.total_limit} credits total
+                </div>
+              )}
+              <div className={cx("col", "ms-auto")}>
+                <UpdateResourcePoolUsageLimitsButton
+                  resourcePool={resourcePool}
+                />
+              </div>
+            </div>
+          </div>
           <div className={cx("border-bottom", "py-2")}>
             {clusterId != null ? (
               <p className="mb-0">
@@ -440,6 +480,22 @@ function ResourceClassItem({
         <div className={cx(columnClasses)}>
           node affinities: {node_affinities?.length ?? 0}
         </div>
+        <div
+          className={cx(
+            columnClasses,
+            "ms-auto",
+            "d-flex",
+            "flex-column",
+            "flex-sm-row",
+            "flex-wrap",
+            "justify-content-end",
+          )}
+        >
+          <UpdateResourceClassCostButton
+            resourceClass={resourceClass}
+            resourcePool={resourcePool}
+          />
+        </div>
         <div
           className={cx(
             "col-12",

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -19,13 +19,15 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError, skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
+import { useMemo } from "react";
 import { generatePath, Link } from "react-router";
 import { Col, ListGroup, Row } from "reactstrap";
 
 import RtkOrDataServicesError from "../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../components/Loader";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import { useGetProjectsByProjectIdQuery } from "../projectsV2/api/projectV2.enhanced-api";
+import { useGetResourcePoolsQuery } from "../sessionsV2/api/computeResources.api";
 import { useGetSessionLaunchersByLauncherIdQuery as useGetProjectSessionLauncherQuery } from "../sessionsV2/api/sessionLaunchersV2.api";
 import ActiveSessionButton from "../sessionsV2/components/SessionButton/ActiveSessionButton";
 import {
@@ -138,6 +140,17 @@ function DashboardSession({ session }: DashboardSessionProps) {
 
   const sessionStyles = getSessionStatusStyles(session);
   const state = session.status.state;
+  const { data: resourcePools } = useGetResourcePoolsQuery(
+    session ? {} : skipToken,
+  );
+  const currentSessionClassId = session?.resource_class_id;
+  const userLauncherClass = useMemo(
+    () =>
+      resourcePools
+        ?.flatMap((pool) => pool.classes)
+        .find((c) => c.id == currentSessionClassId),
+    [currentSessionClassId, resourcePools],
+  );
 
   return (
     <div
@@ -218,6 +231,10 @@ function DashboardSession({ session }: DashboardSessionProps) {
       <div className={cx(styles.sessionButton, "position-absolute")}>
         <ActiveSessionButton
           className="my-auto"
+          usageLimit={{
+            resourceClass: userLauncherClass,
+            quotaEnforced: false, // TODO: Pass the actual value when available from the API
+          }}
           session={session}
           showSessionUrl={showSessionUrl}
         />