feat: add support for building linux/arm64 images from code

Author: leafty

client/scripts/update_api_spec.js

@@ -24,7 +24,7 @@ import { parseDocument } from "yaml";
 
 const GH_BASE_URL = "https://raw.githubusercontent.com";
 const DATA_SERVICES_REPO = "SwissDataScienceCenter/renku-data-services";
-const DATA_SERVICES_RELEASE = "main";
+const DATA_SERVICES_RELEASE = "leafty/configure-arm-builds";
 
 async function main() {
   argv.forEach((arg) => {

client/src/features/sessionsV2/api/sessionLaunchersV2.generated-api.ts

@@ -315,12 +315,15 @@ export type EnvironmentWithImageGet = Environment & {
   environment_kind: EnvironmentKind;
 };
 export type Repository = string;
+export type BuildPlatform = string;
+export type BuildPlatforms = BuildPlatform[];
 export type BuilderVariant = string;
 export type FrontendVariant = string;
 export type RepositoryRevision = string;
 export type BuildContextDir = string;
 export type BuildParameters = {
   repository: Repository;
+  platforms?: BuildPlatforms;
   builder_variant: BuilderVariant;
   frontend_variant: FrontendVariant;
   repository_revision?: RepositoryRevision;
@@ -385,6 +388,7 @@ export type RepositoryRevisionPatch = string;
 export type BuildContextDirPatch = string;
 export type BuildParametersPatch = {
   repository?: Repository;
+  platforms?: BuildPlatforms;
   builder_variant?: BuilderVariant;
   frontend_variant?: FrontendVariant;
   repository_revision?: RepositoryRevisionPatch;

client/src/features/sessionsV2/api/sessionLaunchersV2.openapi.json

@@ -1006,6 +1006,19 @@
         "maxLength": 99,
         "example": "My Renku Session :)"
       },
+      "BuildPlatforms": {
+        "description": "The target runtime platforms of a session environment.",
+        "type": "array",
+        "items": {
+          "$ref": "#/components/schemas/BuildPlatform"
+        }
+      },
+      "BuildPlatform": {
+        "description": "A runtime platform, e.g. \"linux/amd64\".",
+        "type": "string",
+        "minLength": 1,
+        "maxLength": 99
+      },
       "BuilderVariant": {
         "description": "Type of virtual environment manager when building custom environments.",
         "type": "string",
@@ -1106,6 +1119,9 @@
           "repository": {
             "$ref": "#/components/schemas/Repository"
           },
+          "platforms": {
+            "$ref": "#/components/schemas/BuildPlatforms"
+          },
           "builder_variant": {
             "$ref": "#/components/schemas/BuilderVariant"
           },
@@ -1144,6 +1160,9 @@
           "repository": {
             "$ref": "#/components/schemas/Repository"
           },
+          "platforms": {
+            "$ref": "#/components/schemas/BuildPlatforms"
+          },
           "builder_variant": {
             "$ref": "#/components/schemas/BuilderVariant"
           },

client/src/features/sessionsV2/components/SessionForm/BuilderAdvancedSettings.tsx

@@ -0,0 +1,130 @@
+/*!
+ * Copyright 2025 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ChevronFlippedIcon from "~/components/icons/ChevronFlippedIcon";
+import cx from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import {
+  Controller,
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { Collapse, Label } from "reactstrap";
+
+import { BUILDER_PLATFORMS } from "../../session.constants";
+import type { SessionLauncherForm } from "../../sessionsV2.types";
+import BuilderSelectorCommon from "./BuilderSelectorCommon";
+
+interface BuilderAdvancedSettingsProps {
+  control: Control<SessionLauncherForm>;
+}
+
+export default function BuilderAdvancedSettings({
+  control,
+}: BuilderAdvancedSettingsProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleIsOpen = useCallback(
+    () => setIsOpen((isAdvancedSettingOpen) => !isAdvancedSettingOpen),
+    []
+  );
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-1")}>
+      <button
+        className={cx(
+          "d-flex",
+          "align-items-center",
+          "w-100",
+          "bg-transparent",
+          "border-0",
+          "p-0",
+          "h4"
+        )}
+        type="button"
+        onClick={toggleIsOpen}
+      >
+        Advanced settings
+        <ChevronFlippedIcon className="ms-1" flipped={isOpen} />
+      </button>
+      <Collapse isOpen={isOpen}>
+        <div className={cx("d-flex", "flex-column", "gap-3")}>
+          <BuilderPlatformSelector name="platform" control={control} />
+        </div>
+      </Collapse>
+    </div>
+  );
+}
+
+interface BuilderPlatformSelectorProps<T extends FieldValues>
+  extends UseControllerProps<T> {}
+
+function BuilderPlatformSelector<T extends FieldValues>({
+  ...controllerProps
+}: BuilderPlatformSelectorProps<T>) {
+  const defaultValue = useMemo(
+    () =>
+      controllerProps.defaultValue
+        ? controllerProps.defaultValue
+        : BUILDER_PLATFORMS[0],
+    [controllerProps.defaultValue]
+  );
+
+  return (
+    <div>
+      <Label for="builder-environment-platform-select-input">Platform</Label>
+      <Controller
+        {...controllerProps}
+        render={({
+          field: { onBlur, onChange, value, disabled },
+          fieldState: { error },
+        }) => (
+          <>
+            <div
+              className={cx(error && "is-invalid")}
+              data-cy="environment-platform-select"
+            >
+              <BuilderSelectorCommon
+                defaultValue={defaultValue}
+                disabled={disabled}
+                id="builder-environment-platform-select"
+                inputId="builder-environment-platform-select-input"
+                name={controllerProps.name}
+                onBlur={onBlur}
+                onChange={onChange}
+                options={BUILDER_PLATFORMS}
+                value={value ?? ""}
+              />
+            </div>
+            <div className="invalid-feedback">
+              {error?.message ? (
+                <>{error.message}</>
+              ) : (
+                <>Please select a valid platform.</>
+              )}
+            </div>
+          </>
+        )}
+        rules={
+          controllerProps.rules ?? {
+            required: "Please select a platform.",
+          }
+        }
+      />
+    </div>
+  );
+}

client/src/features/sessionsV2/components/SessionForm/BuilderEnvironmentFields.tsx

@@ -29,6 +29,7 @@ import { DEFAULT_APP_PARAMS } from "../../../../utils/context/appParams.constant
 import { useProject } from "../../../ProjectPageV2/ProjectPageContainer/ProjectPageContainer";
 import { useGetRepositoriesProbesQuery } from "../../../repositories/repositories.api";
 import type { SessionLauncherForm } from "../../sessionsV2.types";
+import BuilderAdvancedSettings from "./BuilderAdvancedSettings";
 import BuilderFrontendSelector from "./BuilderFrontendSelector";
 import BuilderTypeSelector from "./BuilderTypeSelector";
 import CodeRepositoryAdvancedSettings from "./CodeRepositoryAdvancedSettings";
@@ -104,6 +105,7 @@ export default function BuilderEnvironmentFields({
       </div>
       <BuilderTypeSelector name="builder_variant" control={control} />
       <BuilderFrontendSelector name="frontend_variant" control={control} />
+      <BuilderAdvancedSettings control={control} />
     </div>
   );
 

client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx

@@ -72,6 +72,7 @@ export default function NewSessionLauncherModal({
       default_url: DEFAULT_URL,
       port: DEFAULT_PORT,
       repository: "",
+      platform: "",
     },
   });
   const {

client/src/features/sessionsV2/session.constants.tsx

@@ -136,6 +136,21 @@ export const BUILDER_FRONTENDS = [
   },
 ] as readonly BuilderSelectorOption[];
 
+export const BUILDER_PLATFORMS = [
+  {
+    value: "linux/amd64",
+    label: "linux/amd64",
+    description:
+      "The default runtime platform. Select this option unless you know your session will run on a different platform.",
+  },
+  {
+    value: "linux/arm64",
+    label: "linux/arm64",
+    description:
+      "Select this option if your session will run on ARM64 compute resources.",
+  },
+] as readonly BuilderSelectorOption[];
+
 export const IMAGE_BUILD_DOCS =
   "https://renku.notion.site/How-to-create-a-custom-environment-from-a-code-repository-1960df2efafc801b88f6da59a0aa8234";
 

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

@@ -103,6 +103,7 @@ export function getFormattedEnvironmentValues(data: SessionLauncherForm): {
     gid,
     mount_directory,
     name,
+    platform,
     port,
     repository_revision: repository_revision_,
     repository,
@@ -125,6 +126,7 @@ export function getFormattedEnvironmentValues(data: SessionLauncherForm): {
         builder_variant,
         frontend_variant,
         repository,
+        platforms: [platform],
         ...(context_dir ? { context_dir } : {}),
         ...(repository_revision ? { repository_revision } : {}),
       },
@@ -203,6 +205,7 @@ export function getFormattedEnvironmentValuesForEdit(
     builder_variant,
     context_dir,
     frontend_variant,
+    platform,
     repository_revision,
     repository,
   } = data;
@@ -218,6 +221,7 @@ export function getFormattedEnvironmentValuesForEdit(
         repository,
         repository_revision: repository_revision ?? "",
         context_dir: context_dir ?? "",
+        platforms: [platform],
       },
     },
   };
@@ -277,6 +281,10 @@ export function getLauncherDefaultValues(
       launcher.environment.environment_image_source === "build"
         ? launcher.environment.build_parameters.context_dir ?? ""
         : "",
+    platform:
+      launcher.environment.environment_image_source === "build"
+        ? launcher.environment.build_parameters.platforms?.at(0) ?? ""
+        : "",
   };
 }
 

client/src/features/sessionsV2/sessionsV2.types.ts

@@ -103,7 +103,7 @@ export interface SessionLauncherForm
   // For "global" environments
   environmentId: EnvironmentId;
 
-  // For "custom" + "image" environments
+  // For "custom + image" environments
   default_url: DefaultUrl;
   uid: EnvironmentUid;
   gid: EnvironmentGid;
@@ -112,6 +112,9 @@ export interface SessionLauncherForm
   args: string;
   command: string;
   strip_path_prefix: boolean;
+
+  // For "custom + build" environments
+  platform: string;
 }
 
 export interface SessionResources {