fix(FR-2802): allow custom resource allocation when creating a new deployment

Author: agatha197

data/schema.graphql

@@ -4695,6 +4695,9 @@ input DeleteModelCardsV2Input
 {
   """List of model card UUIDs to delete."""
   ids: [UUID!]!
+
+  """Added in UNRELEASED. Options for the delete operation."""
+  options: DeleteModelCardV2Options = null
 }
 
 """Added in 26.4.2. Payload for bulk model card deletion."""
@@ -4705,6 +4708,16 @@ type DeleteModelCardsV2Payload
   deletedCount: Int!
 }
 
+"""Added in UNRELEASED. Options for the model card delete operation."""
+input DeleteModelCardV2Options
+  @join__type(graph: STRAWBERRY)
+{
+  """
+  If true, also soft-delete (move to trash) the model VFolder(s) associated with the deleted model card(s).
+  """
+  deleteAssociatedVfolder: Boolean! = false
+}
+
 """Added in 24.12.0."""
 type DeleteNetwork
   @join__type(graph: GRAPHENE)
@@ -11279,7 +11292,7 @@ type Mutation
   adminUpdateModelCardV2(input: UpdateModelCardV2Input!): UpdateModelCardPayloadGQL! @join__field(graph: STRAWBERRY)
 
   """Added in 26.4.2. Delete a model card (admin only)."""
-  adminDeleteModelCardV2(id: UUID!): DeleteModelCardPayloadGQL! @join__field(graph: STRAWBERRY)
+  adminDeleteModelCardV2(id: UUID!, options: DeleteModelCardV2Options = null): DeleteModelCardPayloadGQL! @join__field(graph: STRAWBERRY)
 
   """Added in 26.4.2. Delete multiple model cards (admin only)."""
   adminDeleteModelCardsV2(input: DeleteModelCardsV2Input!): DeleteModelCardsV2Payload! @join__field(graph: STRAWBERRY)

packages/backend.ai-ui/src/components/BAIText.tsx

@@ -48,6 +48,7 @@ const BAIText: React.FC<BAITextProps> = ({
   keyboardWithLightBorder,
   ...restProps
 }) => {
+  'use memo';
   const { token } = theme.useToken();
   const { t } = useTranslation();
   const textRef = useRef<HTMLSpanElement>(null);
@@ -57,13 +58,15 @@ const BAIText: React.FC<BAITextProps> = ({
   const expandable = typeof ellipsis === 'object' ? ellipsis.expandable : false;
   const onExpand = typeof ellipsis === 'object' ? ellipsis.onExpand : undefined;
 
+  const ellipsisEnabled = !!ellipsis;
+  const ellipsisRows = typeof ellipsis === 'object' ? (ellipsis.rows ?? 1) : 1;
+
   useEffect(() => {
-    if (!ellipsis || !textRef.current || isExpanded) return;
+    if (!ellipsisEnabled || !textRef.current || isExpanded) return;
     const element = textRef.current;
-    const rows = typeof ellipsis === 'object' ? ellipsis.rows || 1 : 1;
     const check = () => {
       if (!element) return;
-      if (rows === 1) {
+      if (ellipsisRows === 1) {
         setIsOverflowing(element.scrollWidth > element.clientWidth);
       } else {
         setIsOverflowing(element.scrollHeight > element.clientHeight);
@@ -73,7 +76,7 @@ const BAIText: React.FC<BAITextProps> = ({
     const ro = new ResizeObserver(check);
     ro.observe(element);
     return () => ro.disconnect();
-  }, [ellipsis, children, isExpanded]);
+  }, [ellipsisEnabled, ellipsisRows, isExpanded]);
 
   const handleExpand = (e: React.MouseEvent<HTMLElement>) => {
     const newExpandedState = !isExpanded;

react/src/components/DeploymentLauncherPageContent.tsx

@@ -4,11 +4,13 @@
  */
 import { DeploymentLauncherPageContentPresetSummaryQuery } from '../__generated__/DeploymentLauncherPageContentPresetSummaryQuery.graphql';
 import { DeploymentLauncherPageContent_deployment$key } from '../__generated__/DeploymentLauncherPageContent_deployment.graphql';
+import { convertToBinaryUnit } from '../helper';
 import { parseCliCommand } from '../helper/parseCliCommand';
 import {
   mergeExtraArgs,
   reverseMapExtraArgs,
 } from '../helper/runtimeExtraArgsParser';
+import { useSuspendedBackendaiClient } from '../hooks';
 import { ResourceSlotName, useResourceSlots } from '../hooks/backendai';
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
@@ -20,6 +22,7 @@ import {
   getExtraArgsEnvVarName,
   type RuntimeParameterGroup,
 } from '../hooks/useRuntimeParameterSchema';
+import { ResourceNumbersOfSession } from '../pages/SessionLauncherPage';
 import ErrorBoundaryWithNullFallback from './ErrorBoundaryWithNullFallback';
 import ImageEnvironmentSelectFormItems, {
   ImageEnvironmentFormInput,
@@ -28,6 +31,9 @@ import ResourcePresetSelect from './ResourcePresetSelect';
 import RuntimeParameterFormSection, {
   RuntimeParameterValues,
 } from './RuntimeParameterFormSection';
+import ResourceAllocationFormItems, {
+  type ResourceAllocationFormValue,
+} from './SessionFormItems/ResourceAllocationFormItems';
 import SourceCodeView from './SourceCodeView';
 import VFolderLazyView from './VFolderLazyView';
 import VFolderSelect from './VFolderSelect';
@@ -133,6 +139,11 @@ export type DeploymentLauncherFormValue = ImageEnvironmentFormInput & {
   // Step 3 — Resources & Replicas
   resourceGroup: string;
   resourcePresetId?: string;
+  /** Mirrors resourcePresetId so ResourceAllocationFormItems can track custom state. */
+  allocationPreset?: string;
+  /** Custom resource slots — populated when resourcePresetId === 'custom'. */
+  resource?: ResourceAllocationFormValue['resource'];
+  enabledAutomaticShmem?: boolean;
   desiredReplicaCount: number;
 };
 
@@ -146,6 +157,15 @@ export interface DeploymentLauncherPageContentProps {
   deploymentFrgmt?: DeploymentLauncherPageContent_deployment$key | null;
   /** Available runtime variants fetched by the parent page layout. */
   runtimeVariants?: ReadonlyArray<{ name: string; id: string }>;
+  /** Available resource presets — used in edit mode to detect custom allocation. */
+  resourcePresets?: ReadonlyArray<
+    | {
+        name?: string | null;
+        resource_slots?: string | null;
+      }
+    | null
+    | undefined
+  >;
   /**
    * Optional change observer forwarded to the underlying antd `<Form>`.
    * Useful for parent pages that want to persist the draft state
@@ -173,6 +193,95 @@ export interface DeploymentLauncherPageContentProps {
   } | null>;
 }
 
+/**
+ * Compare revision resourceSlots against available presets to detect custom
+ * allocation, and return the matching form fields. Returns `resourcePresetId:
+ * 'custom'` with populated `resource.*` values when no preset matches.
+ */
+const resolveEditModeResourcePreset = (
+  revisionSlots: ReadonlyArray<{
+    slotName: string;
+    quantity: string;
+  } | null> | null,
+  resourceOptsEntries: ReadonlyArray<{
+    name: string;
+    value: string;
+  } | null> | null,
+  presets: ReadonlyArray<
+    | {
+        name?: string | null;
+        resource_slots?: string | null;
+      }
+    | null
+    | undefined
+  > | null,
+): Partial<DeploymentLauncherFormValue> => {
+  if (!revisionSlots || revisionSlots.length === 0) return {};
+
+  const slots = revisionSlots.filter(
+    (s): s is { slotName: string; quantity: string } => s !== null,
+  );
+
+  // Normalize a slot quantity to bytes string for comparison.
+  // Mem values may come as "4g" (preset) or raw bytes "4294967296" (revision).
+  const toComparableBytes = (slotName: string, value: string): string => {
+    if (slotName !== 'mem') return value;
+    return String(convertToBinaryUnit(value, '')?.number ?? value);
+  };
+
+  const matchingPreset = presets?.find((p) => {
+    if (!p?.name || !p?.resource_slots) return false;
+    let presetSlots: Record<string, string>;
+    try {
+      presetSlots = JSON.parse(p.resource_slots);
+    } catch {
+      return false;
+    }
+    const presetKeys = Object.keys(presetSlots);
+    if (presetKeys.length !== slots.length) return false;
+    return presetKeys.every((key) => {
+      const revSlot = slots.find((s) => s.slotName === key);
+      if (!revSlot) return false;
+      return (
+        toComparableBytes(key, String(revSlot.quantity)) ===
+        toComparableBytes(key, String(presetSlots[key]))
+      );
+    });
+  });
+
+  if (matchingPreset?.name) {
+    return {
+      resourcePresetId: matchingPreset.name,
+      allocationPreset: matchingPreset.name,
+    };
+  }
+
+  // No preset matches — custom allocation. Reconstruct resource.* fields.
+  const cpu = Number(slots.find((s) => s.slotName === 'cpu')?.quantity ?? 0);
+  const rawMem = slots.find((s) => s.slotName === 'mem')?.quantity ?? '0g';
+  // Server returns mem in bytes; convert to "Xg" format for the slider.
+  const mem = convertToBinaryUnit(rawMem, 'g', 4)?.value ?? rawMem;
+  const shmemEntry = resourceOptsEntries
+    ?.filter((e): e is { name: string; value: string } => e !== null)
+    .find((e) => e.name === 'shmem');
+  const acceleratorSlot = slots.find(
+    (s) => s.slotName !== 'cpu' && s.slotName !== 'mem',
+  );
+
+  return {
+    resourcePresetId: 'custom',
+    allocationPreset: 'custom',
+    resource: {
+      cpu,
+      mem,
+      shmem: shmemEntry?.value ?? '0g',
+      accelerator: acceleratorSlot ? Number(acceleratorSlot.quantity) : 0,
+      acceleratorType: acceleratorSlot?.slotName,
+    },
+    enabledAutomaticShmem: !shmemEntry,
+  };
+};
+
 /**
  * Default values applied when neither `deploymentFrgmt` nor
  * `preFilledModel` is provided. Also used as the merge base for
@@ -197,6 +306,9 @@ const DEFAULT_FORM_VALUES: DeploymentLauncherFormValue = {
   clusterSize: 1,
   resourceGroup: '',
   resourcePresetId: undefined,
+  allocationPreset: undefined,
+  resource: { cpu: 0, mem: '0g', shmem: '0g', accelerator: 0 },
+  enabledAutomaticShmem: true,
   desiredReplicaCount: 1,
   environments: {
     environment: '',
@@ -227,6 +339,7 @@ const DeploymentLauncherPageContent: React.FC<
   form,
   deploymentFrgmt,
   runtimeVariants = [],
+  resourcePresets,
   onValuesChange,
   onSubmit,
   isSubmitting,
@@ -237,6 +350,7 @@ const DeploymentLauncherPageContent: React.FC<
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const screens = Grid.useBreakpoint();
+  const baiClient = useSuspendedBackendaiClient();
   // Debounced CLI command parser — auto-fills port/health/mount from the
   // pasted command, mirroring ServiceLauncherPageContent behaviour.
   const { run: parseCommandWithDebounce } = useDebounceFn(
@@ -388,6 +502,16 @@ const DeploymentLauncherPageContent: React.FC<
           }
           resourceConfig {
             resourceGroupName
+            resourceOpts {
+              entries {
+                name
+                value
+              }
+            }
+          }
+          resourceSlots @since(version: "26.4.2") {
+            slotName
+            quantity
           }
           modelRuntimeConfig {
             runtimeVariantId
@@ -468,18 +592,26 @@ const DeploymentLauncherPageContent: React.FC<
           revision?.clusterConfig?.size ?? DEFAULT_FORM_VALUES.clusterSize,
         resourceGroup: revision?.resourceConfig?.resourceGroupName ?? '',
         desiredReplicaCount: deployment.replicaState.desiredReplicaCount,
-        // TODO(needs-backend): FR-2787 — resourcePresetId is not exposed in the
-        // ModelRevision schema, so the preset selector cannot be pre-populated in
-        // edit mode. Once the backend exposes resourcePresetName/id on the
-        // revision, add it here.
+        ...resolveEditModeResourcePreset(
+          revision?.resourceSlots ?? null,
+          revision?.resourceConfig?.resourceOpts?.entries ?? null,
+          resourcePresets ?? null,
+        ),
       } satisfies Partial<DeploymentLauncherFormValue>);
     }
     return _.merge({}, DEFAULT_FORM_VALUES, {
       ...(urlModel && { modelFolderId: urlModel }),
       ...(urlResourceGroup && { resourceGroup: urlResourceGroup }),
       ...(urlResourcePresetId && { resourcePresetId: urlResourcePresetId }),
     });
-  }, [mode, deployment, urlModel, urlResourceGroup, urlResourcePresetId]);
+  }, [
+    mode,
+    deployment,
+    urlModel,
+    urlResourceGroup,
+    urlResourcePresetId,
+    resourcePresets,
+  ]);
 
   // Apply initial values to the parent-owned form instance exactly once
   // per mount / deployment change. Using `useEffectEvent` keeps the
@@ -866,6 +998,13 @@ const DeploymentLauncherPageContent: React.FC<
               display: currentStepKey === 'resources' ? 'block' : 'none',
             }}
           >
+            <Form.Item
+              name="desiredReplicaCount"
+              label={t('deployment.DesiredReplicas')}
+              rules={[{ required: true, type: 'number', min: 1 }]}
+            >
+              <InputNumber min={1} style={{ width: '100%' }} />
+            </Form.Item>
             <Form.Item
               name="resourceGroup"
               label={t('session.ResourceGroup')}
@@ -882,21 +1021,35 @@ const DeploymentLauncherPageContent: React.FC<
                 <Form.Item
                   name="resourcePresetId"
                   label={t('resourcePreset.ResourcePresets')}
+                  required
                 >
                   <ResourcePresetSelect
                     resourceGroup={getFieldValue('resourceGroup')}
                     autoSelectDefault
                     showSearch
+                    showCustom={baiClient._config.allowCustomResourceAllocation}
+                    showMinimumRequired={
+                      baiClient._config.allowCustomResourceAllocation
+                    }
+                    onChange={(value) => {
+                      form.setFieldValue('allocationPreset', value);
+                    }}
                   />
                 </Form.Item>
               )}
             </Form.Item>
-            <Form.Item
-              name="desiredReplicaCount"
-              label={t('deployment.DesiredReplicas')}
-              rules={[{ required: true, type: 'number', min: 1 }]}
-            >
-              <InputNumber min={1} style={{ width: '100%' }} />
+            <Form.Item dependencies={['resourcePresetId']} noStyle>
+              {({ getFieldValue }) =>
+                getFieldValue('resourcePresetId') === 'custom' && (
+                  <Suspense>
+                    <ResourceAllocationFormItems
+                      enableResourcePresets={false}
+                      hideClusterFormItems
+                      hideResourceGroup
+                    />
+                  </Suspense>
+                )
+              }
             </Form.Item>
           </Card>
 
@@ -1301,7 +1454,22 @@ const DeploymentReviewSummary: React.FC<{
             {values.resourceGroup || '-'}
           </Descriptions.Item>
           <Descriptions.Item label={t('resourcePreset.ResourcePresets')}>
-            {values.resourcePresetId ? (
+            {values.resourcePresetId === 'custom' ? (
+              <BAIFlex direction="column" gap="xs" align="start">
+                <Typography.Text>
+                  {t('session.launcher.CustomAllocation')}
+                </Typography.Text>
+                {values.resource && (
+                  <BAIFlex
+                    direction="row"
+                    gap="xxs"
+                    style={{ flexWrap: 'wrap' }}
+                  >
+                    <ResourceNumbersOfSession resource={values.resource} />
+                  </BAIFlex>
+                )}
+              </BAIFlex>
+            ) : values.resourcePresetId ? (
               <Suspense fallback={<>{values.resourcePresetId}</>}>
                 <ErrorBoundaryWithNullFallback>
                   <ResourcePresetReviewDisplay