badges for all

Author: leafty

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

@@ -130,9 +130,7 @@ export default function SessionLauncherCard({
 
   const { data: containerImage, isLoading: isLoadingContainerImage } =
     useGetSessionsImagesQuery(
-      environment &&
-        environment.environment_kind === "CUSTOM" &&
-        environment.container_image
+      environment?.container_image != null
         ? { imageUrl: environment.container_image }
         : skipToken
     );
@@ -215,10 +213,13 @@ export default function SessionLauncherCard({
                   <SessionEnvironmentGitLabWarningBadge launcher={launcher} />
                 </Col>
               </Row>
-              {isCodeEnvironment && (
+              {isCodeEnvironment ? (
                 <Row className="g-2">
                   <Col xs={12} xl={4}>
-                    {isCodeEnvironment && isLoading ? (
+                    {isCodeEnvironment &&
+                    (isLoading ||
+                      isLoadingContainerImage ||
+                      isLoadingResourcePools) ? (
                       <SessionBadge
                         className={cx("border-warning", "bg-warning-subtle")}
                       >
@@ -232,7 +233,11 @@ export default function SessionLauncherCard({
                         </span>
                       </SessionBadge>
                     ) : isCodeEnvironment && lastBuild ? (
-                      <BuildStatusBadge status={lastBuild?.status} />
+                      <BuildStatusBadge
+                        buildStatus={lastBuild?.status}
+                        imageCheck={containerImage}
+                        resourcePool={resourcePool}
+                      />
                     ) : !hasSession ? (
                       <SessionBadge
                         className={cx("border-dark-subtle", "bg-light")}
@@ -265,8 +270,7 @@ export default function SessionLauncherCard({
                     />
                   </Col>
                 </Row>
-              )}
-              {isExternalImageEnvironment && (
+              ) : (
                 <Row>
                   <Col>
                     <SessionImageBadge

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

@@ -155,16 +155,18 @@ function CustomEnvironmentValues({ launcher }: { launcher: SessionLauncher }) {
   const { environment } = launcher;
 
   if (environment.environment_image_source === "image") {
-    return <CustomImageEnvironmentValues launcher={launcher} />;
+    return <CustomImageEnvironmentValues launcher={launcher} showImageBadge />;
   }
 
   return <CustomBuildEnvironmentValues launcher={launcher} />;
 }
 
 function CustomImageEnvironmentValues({
   launcher,
+  showImageBadge,
 }: {
   launcher: SessionLauncher;
+  showImageBadge?: boolean;
 }) {
   const { pathname, hash } = useLocation();
   const environment = launcher.environment;
@@ -199,12 +201,14 @@ function CustomImageEnvironmentValues({
   return (
     <>
       <div className="mb-2">
-        <SessionImageBadge
-          data={data}
-          isLoading={isLoading}
-          resourcePool={resourcePool}
-          isLoadingResourcePools={isLoadingResourcePools}
-        />
+        {showImageBadge && (
+          <SessionImageBadge
+            data={data}
+            isLoading={isLoading}
+            resourcePool={resourcePool}
+            isLoadingResourcePools={isLoadingResourcePools}
+          />
+        )}
         {!isLoading && data?.accessible === false && (
           <div className="mt-2">
             {!data.connection && !data.provider ? (
@@ -352,6 +356,23 @@ function CustomBuildEnvironmentValues({
     }
   );
 
+  const { data: imageCheck, isLoading: isLoadingContainerImage } =
+    useGetSessionsImagesQuery(
+      environment.container_image != null
+        ? { imageUrl: environment.container_image }
+        : 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]);
+
   // Invalidate launchers if the container image is not the same as the
   // image from the last successful build
   const dispatch = useAppDispatch();
@@ -384,7 +405,12 @@ function CustomBuildEnvironmentValues({
           <NotReadyStatusBadge />
         ) : (
           <>
-            <ReadyStatusBadge />
+            <SessionImageBadge
+              data={imageCheck}
+              isLoading={isLoadingContainerImage}
+              resourcePool={resourcePool}
+              isLoadingResourcePools={isLoadingResourcePools}
+            />
             {lastSuccessfulBuild && (
               <BuildStatusDescription
                 isOldImage={
@@ -431,7 +457,7 @@ function CustomBuildEnvironmentValues({
               Last build status:
             </label>
             <span>
-              <BuildStatusBadge status={lastBuild.status} />
+              <BuildStatusBadge buildStatus={lastBuild.status} />
             </span>
           </div>
         )}
@@ -521,25 +547,6 @@ function EnvironmentJSONArrayRowWithLabel({
   );
 }
 
-function ReadyStatusBadge() {
-  return (
-    <Badge
-      className={cx(
-        "border",
-        "bg-success-subtle",
-        "border-success",
-        "text-success-emphasis",
-        "fs-small",
-        "fw-normal"
-      )}
-      pill
-    >
-      <CircleFill className={cx("bi", "me-1")} />
-      Ready
-    </Badge>
-  );
-}
-
 function NotReadyStatusBadge() {
   return (
     <Badge

client/src/features/sessionsV2/components/BuildStatusComponents.tsx

@@ -50,45 +50,67 @@ import ScrollableModal from "../../../components/modal/ScrollableModal";
 import { TimeCaption } from "../../../components/TimeCaption";
 import PermissionsGuard from "../../permissionsV2/PermissionsGuard";
 import useProjectPermissions from "../../ProjectPageV2/utils/useProjectPermissions.hook";
+import type { ResourcePoolWithId } from "../api/computeResources.api";
+import type {
+  Build,
+  BuildList,
+  CreationDate,
+} from "../api/sessionLaunchersV2.api";
 import {
   SessionLauncher,
   useGetBuildsByBuildIdLogsQuery as useGetBuildLogsQuery,
   useGetEnvironmentsByEnvironmentIdBuildsQuery as useGetBuildsQuery,
   usePatchBuildsByBuildIdMutation as usePatchBuildMutation,
   usePostEnvironmentsByEnvironmentIdBuildsMutation as usePostBuildMutation,
 } from "../api/sessionLaunchersV2.api";
-import {
-  Build,
-  BuildList,
-  CreationDate,
-} from "../api/sessionLaunchersV2.generated-api";
+import type { ImageCheckResponse } from "../api/sessionsV2.api";
 import { IMAGE_BUILD_DOCS } from "../session.constants";
+import { isImageCompatibleWith } from "../session.utils";
 
 interface BuildStatusBadgeProps {
-  status: Build["status"];
+  buildStatus: Build["status"];
+  imageCheck?: ImageCheckResponse | null;
+  resourcePool?: ResourcePoolWithId;
 }
 
-export function BuildStatusBadge({ status }: BuildStatusBadgeProps) {
+export function BuildStatusBadge({
+  buildStatus,
+  imageCheck,
+  resourcePool,
+}: BuildStatusBadgeProps) {
+  const isCompatible = useMemo(() => {
+    if (imageCheck == null || resourcePool == null) {
+      return "unknown";
+    }
+    return isImageCompatibleWith(imageCheck, resourcePool.platform);
+  }, [imageCheck, resourcePool]);
+
   const badgeIcon =
-    status === "in_progress" ? (
+    buildStatus === "in_progress" ? (
       <Loader className="me-1" inline size={12} />
     ) : (
       <CircleFill className={cx("me-1", "bi")} />
     );
 
   const badgeText =
-    status === "in_progress"
+    isCompatible === false
+      ? `Image incompatible${
+          resourcePool?.platform ? ` with ${resourcePool.platform}` : ""
+        }`
+      : buildStatus === "in_progress"
       ? "Build in progress"
-      : status === "cancelled"
+      : buildStatus === "cancelled"
       ? "Build cancelled"
-      : status === "succeeded"
+      : buildStatus === "succeeded"
       ? "Build succeeded"
       : "Build failed";
 
   const badgeColorClasses =
-    status === "in_progress"
+    isCompatible === false
+      ? ["border-danger", "bg-danger-subtle", "text-danger-emphasis"]
+      : buildStatus === "in_progress"
       ? ["border-warning", "bg-warning-subtle", "text-warning-emphasis"]
-      : status === "succeeded"
+      : buildStatus === "succeeded"
       ? ["border-success", "bg-success-subtle", "text-success-emphasis"]
       : ["border-danger", "bg-danger-subtle", "text-danger-emphasis"];