wip

Author: leafty

client/src/features/sessionsV2/SessionImageModal.tsx

@@ -76,7 +76,7 @@ export default function SessionImageModal({
     ) : (
       <>
         <div className="mb-2">
-          <SessionImageBadge data={data} loading={isLoading} />
+          <SessionImageBadge data={data} isLoading={isLoading} />
         </div>
         {!data.connection && !data.provider ? (
           <>

client/src/features/sessionsV2/SessionList/SessionLauncherCard.tsx

@@ -18,7 +18,7 @@
 
 import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { CircleFill, Link45deg, Pencil, Trash } from "react-bootstrap-icons";
 import { Card, CardBody, Col, DropdownItem, Row } from "reactstrap";
 
@@ -29,6 +29,7 @@ import { DEFAULT_APP_PARAMS } from "../../../utils/context/appParams.constants";
 import PermissionsGuard from "../../permissionsV2/PermissionsGuard";
 import useProjectPermissions from "../../ProjectPageV2/utils/useProjectPermissions.hook";
 import { Project } from "../../projectsV2/api/projectV2.api";
+import { computeResourcesApi } from "../api/computeResources.api";
 import type { SessionLauncher } from "../api/sessionLaunchersV2.api";
 import {
   sessionLaunchersV2Api,
@@ -127,7 +128,7 @@ export default function SessionLauncherCard({
     "text-muted",
   ];
 
-  const { data: containerImage, isLoading: loadingContainerImage } =
+  const { data: containerImage, isLoading: isLoadingContainerImage } =
     useGetSessionsImagesQuery(
       environment &&
         environment.environment_kind === "CUSTOM" &&
@@ -136,6 +137,17 @@ export default function SessionLauncherCard({
         : skipToken
     );
 
+  const { data: resourcePools, isLoading: isLoadingResourcePools } =
+    computeResourcesApi.endpoints.getResourcePools.useQueryState({});
+  const resourcePool = useMemo(() => {
+    if (launcher?.resource_class_id == null || resourcePools == null) {
+      return undefined;
+    }
+    return resourcePools.find(({ classes }) =>
+      classes.some(({ id }) => id === launcher.resource_class_id)
+    );
+  }, [launcher?.resource_class_id, resourcePools]);
+
   return (
     <Card
       className={cx(
@@ -259,7 +271,9 @@ export default function SessionLauncherCard({
                   <Col>
                     <SessionImageBadge
                       data={containerImage}
-                      loading={loadingContainerImage}
+                      isLoading={isLoadingContainerImage}
+                      resourcePool={resourcePool}
+                      isLoadingResourcePools={isLoadingResourcePools}
                     />
                   </Col>
                 </Row>

client/src/features/sessionsV2/SessionView/EnvironmentCard.tsx

@@ -188,7 +188,7 @@ function CustomImageEnvironmentValues({
   return (
     <>
       <div className="mb-2">
-        <SessionImageBadge data={data} loading={isLoading} />
+        <SessionImageBadge data={data} isLoading={isLoading} />
         {!isLoading && data?.accessible === false && (
           <div className="mt-2">
             {!data.connection && !data.provider ? (

client/src/features/sessionsV2/components/SessionStatus/SessionImageBadge.tsx

@@ -17,26 +17,43 @@
  */
 
 import cx from "classnames";
+import { useMemo } from "react";
 import { CircleFill } from "react-bootstrap-icons";
 
 import { Loader } from "~/components/Loader";
 import RenkuBadge from "~/components/renkuBadge/RenkuBadge";
-import { ImageCheckResponse } from "../../api/sessionsV2.generated-api";
+import type { ResourcePoolWithId } from "../../api/computeResources.api";
+import type { ImageCheckResponse } from "../../api/sessionsV2.api";
+import { isImageCompatibleWith } from "../../session.utils";
 
 interface SessionImageBadgeProps {
   data?: ImageCheckResponse | null;
-  loading: boolean;
+  isLoading: boolean;
+
+  resourcePool?: ResourcePoolWithId;
+  isLoadingResourcePools?: boolean;
 }
 
 export default function SessionImageBadge({
   data,
-  loading,
+  isLoading,
+  resourcePool,
+  isLoadingResourcePools,
 }: SessionImageBadgeProps) {
+  const isCompatible = useMemo(() => {
+    if (data == null || resourcePool == null) {
+      return "unknown";
+    }
+    return isImageCompatibleWith(data, resourcePool.platform);
+  }, [data, resourcePool]);
+
   return (
     <RenkuBadge
       color={
-        loading
+        isLoading || isLoadingResourcePools
           ? "light"
+          : isCompatible === false
+          ? "danger"
           : data?.accessible
           ? "success"
           : data?.provider?.id &&
@@ -47,15 +64,19 @@ export default function SessionImageBadge({
       className="fw-normal"
       pill
     >
-      {loading ? (
+      {isLoading || isLoadingResourcePools ? (
         <>
           <Loader className="me-1" size={12} inline />
           Checking image status.
         </>
       ) : (
         <>
           <CircleFill className={cx("bi", "me-1")} />
-          {data?.accessible
+          {isCompatible === false
+            ? `Image incompatible${
+                resourcePool?.platform ? ` with ${resourcePool.platform}` : ""
+              }`
+            : data?.accessible
             ? "Image accessible"
             : data?.provider?.id &&
               (!data?.connection || data?.connection?.status !== "connected")

client/src/features/sessionsV2/session.utils.ts

@@ -18,18 +18,20 @@
 
 import { FaviconStatus } from "../display/display.types";
 import { SessionStatusState } from "../session/sessions.types";
+import type { ResourcePoolWithId } from "./api/computeResources.api";
 import type {
   EnvironmentList as SessionEnvironmentList,
   SessionLauncher,
   SessionLauncherEnvironmentParams,
   SessionLauncherEnvironmentPatchParams,
 } from "./api/sessionLaunchersV2.api";
+import type { ImageCheckResponse } from "./api/sessionsV2.api";
 import {
   BUILDER_PLATFORMS,
   DEFAULT_URL,
   ENV_VARIABLES_RESERVED_PREFIX,
 } from "./session.constants";
-import { SessionLauncherForm } from "./sessionsV2.types";
+import type { SessionLauncherForm } from "./sessionsV2.types";
 
 export function getSessionFavicon(
   sessionState?: SessionStatusState,
@@ -402,3 +404,16 @@ export function validateEnvVariableName(name: string): true | string {
   }
   return true;
 }
+
+export function isImageCompatibleWith(
+  image: ImageCheckResponse,
+  platform: ResourcePoolWithId["platform"]
+): boolean | "unknown" {
+  if (image.platforms == null) {
+    return "unknown";
+  }
+  const imagePlatforms = image.platforms?.map(
+    ({ os, architecture }) => `${os}/${architecture}`
+  );
+  return imagePlatforms.some((p) => p === platform);
+}