feat(FR-2679): add TODO(needs-backend) comment for BA-5853 blocking token creation

Author: agatha197

react/src/components/DeploymentAccessTokensTab.tsx

@@ -94,6 +94,10 @@ const DeploymentAccessTokensTab: React.FC<DeploymentAccessTokensTabProps> = ({
     listData?.accessTokens?.edges?.map((edge) => edge?.node),
   );
 
+  // TODO(needs-backend): BA-5853 — createAccessToken mutation fails with a
+  // Pydantic validation error ("deployment_id Field required"). The frontend
+  // sends `modelDeploymentId` per the supergraph schema but the backend
+  // resolver expects `deployment_id`. Token creation is disabled until fixed.
   const commitCreateMutation =
     useMutationWithPromise<DeploymentAccessTokensTabCreateMutation>(graphql`
       mutation DeploymentAccessTokensTabCreateMutation(

react/src/components/DeploymentConfigurationSection.tsx

@@ -5,6 +5,7 @@
 import { DeploymentConfigurationSectionQuery } from '../__generated__/DeploymentConfigurationSectionQuery.graphql';
 import { DeploymentConfigurationSection_deployment$key } from '../__generated__/DeploymentConfigurationSection_deployment.graphql';
 import { useWebUINavigate } from '../hooks';
+import ImageNodeSimpleTag from './ImageNodeSimpleTag';
 import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
 import { Descriptions, Tag, Typography, theme } from 'antd';
 import { DescriptionsItemType } from 'antd/es/descriptions';
@@ -81,7 +82,9 @@ const DeploymentConfigurationSection: React.FC<
               resourceGroupName
             }
             modelRuntimeConfig {
-              runtimeVariant
+              runtimeVariant {
+                name
+              }
               environ {
                 entries {
                   name
@@ -104,6 +107,9 @@ const DeploymentConfigurationSection: React.FC<
                 canonicalName
               }
             }
+            image {
+              ...ImageNodeSimpleTagFragment
+            }
           }
         }
       }
@@ -183,13 +189,16 @@ const DeploymentConfigurationSection: React.FC<
     {
       key: 'runtime-variant',
       label: t('deployment.RuntimeVariant'),
-      children: runtimeConfig?.runtimeVariant || renderFallback(),
+      children: runtimeConfig?.runtimeVariant?.name || renderFallback(),
     },
     {
       key: 'image',
       label: t('deployment.Image'),
-      children:
-        currentRevision?.imageV2?.identity?.canonicalName || renderFallback(),
+      children: currentRevision?.image ? (
+        <ImageNodeSimpleTag imageFrgmt={currentRevision.image} />
+      ) : (
+        renderFallback()
+      ),
     },
     {
       key: 'cluster-mode',

react/src/components/DeploymentLauncherPageContent.tsx

@@ -4,11 +4,8 @@
  */
 import { DeploymentLauncherPageContentPresetSummaryQuery } from '../__generated__/DeploymentLauncherPageContentPresetSummaryQuery.graphql';
 import { DeploymentLauncherPageContent_deployment$key } from '../__generated__/DeploymentLauncherPageContent_deployment.graphql';
-import { useBaiSignedRequestWithPromise } from '../helper';
 import { parseCliCommand } from '../helper/parseCliCommand';
-import { useSuspendedBackendaiClient } from '../hooks';
 import { ResourceSlotName, useResourceSlots } from '../hooks/backendai';
-import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import {
@@ -140,6 +137,8 @@ export interface DeploymentLauncherPageContentProps {
    * Provides the deployment snapshot used to pre-fill the form.
    */
   deploymentFrgmt?: DeploymentLauncherPageContent_deployment$key | null;
+  /** Available runtime variants fetched by the parent page layout. */
+  runtimeVariants?: ReadonlyArray<{ name: string; rowId: string }>;
   /**
    * Optional change observer forwarded to the underlying antd `<Form>`.
    * Useful for parent pages that want to persist the draft state
@@ -212,6 +211,7 @@ const DeploymentLauncherPageContent: React.FC<
   mode,
   form,
   deploymentFrgmt,
+  runtimeVariants = [],
   onValuesChange,
   onCancel,
   onSubmit,
@@ -222,20 +222,6 @@ const DeploymentLauncherPageContent: React.FC<
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const screens = Grid.useBreakpoint();
-  const baiClient = useSuspendedBackendaiClient();
-  const baiRequestWithPromise = useBaiSignedRequestWithPromise();
-
-  // Fetch available runtime variants from the model-service runtimes endpoint.
-  // Falls back to an empty list so the Select renders without crashing.
-  const { data: availableRuntimes } = useSuspenseTanQuery<{
-    runtimes: { name: string; human_readable_name: string }[];
-  }>({
-    queryKey: ['DeploymentLauncher.runtime.list'],
-    queryFn: () =>
-      baiRequestWithPromise({ method: 'GET', url: `/services/_/runtimes` }),
-    staleTime: 60_000,
-  });
-
   // Debounced CLI command parser — auto-fills port/health/mount from the
   // pasted command, mirroring ServiceLauncherPageContent behaviour.
   const { run: parseCommandWithDebounce } = useDebounceFn(
@@ -250,8 +236,6 @@ const DeploymentLauncherPageContent: React.FC<
     { wait: 400 },
   );
 
-  void baiClient; // used only for feature-flag checks in future wiring
-
   const currentProject = useCurrentProjectValue();
 
   // Refs for runtime parameter UI values. Kept outside form state so that
@@ -491,10 +475,10 @@ const DeploymentLauncherPageContent: React.FC<
     { title: t('deployment.step.ReviewAndCreate') },
   ];
 
-  const runtimeVariantOptions = _.map(
-    availableRuntimes?.runtimes ?? [],
-    (rt) => ({ value: rt.name, label: rt.human_readable_name }),
-  );
+  const runtimeVariantOptions = _.map(runtimeVariants, (rt) => ({
+    value: rt.name,
+    label: rt.name,
+  }));
 
   return (
     <BAIFlex direction="row" gap="md" align="start" style={{ width: '100%' }}>

react/src/components/DeploymentReplicasTab.tsx

@@ -11,8 +11,7 @@ import { convertToOrderBy } from '../helper';
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import ReplicaStatusTag, { ReplicaStatus } from './ReplicaStatusTag';
 import SessionDetailDrawer from './SessionDetailDrawer';
-import { Descriptions, Drawer, Tag, Typography } from 'antd';
-import { DescriptionsItemType } from 'antd/es/descriptions';
+import { Tag, Typography } from 'antd';
 import {
   BAIColumnType,
   BAIFetchKeyButton,
@@ -24,7 +23,6 @@ import {
   BAIUnmountAfterClose,
   type GraphQLFilter,
   filterOutEmpty,
-  toLocalId,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
@@ -88,7 +86,6 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
       current: parseAsInteger.withDefault(1),
       pageSize: parseAsInteger.withDefault(10),
       order: parseAsStringLiteral(availableReplicaSorterValues),
-      selected: parseAsString,
       rFilter: parseAsString,
     },
     {
@@ -97,18 +94,15 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
         current: 'rCurrent',
         pageSize: 'rPageSize',
         order: 'rOrder',
-        selected: 'rSelected',
         rFilter: 'rFilter',
       },
     },
   );
 
-  const deployment = useFragment(
+  useFragment(
     graphql`
       fragment DeploymentReplicasTab_deployment on ModelDeployment {
-        networkAccess {
-          endpointUrl
-        }
+        id
       }
     `,
     deploymentFrgmt,
@@ -198,10 +192,6 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
 
   type ReplicaNode = (typeof replicas)[number];
 
-  const selectedReplica = replicas.find(
-    (replica) => replica.id === queryParams.selected,
-  );
-
   const doRefetch = (overrides?: {
     filter?: ReturnType<typeof parseReplicaFilter>;
     orderBy?: ReturnType<typeof convertToOrderBy<ReplicaOrderBy>>;
@@ -240,13 +230,7 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
       title: t('deployment.ReplicaId'),
       dataIndex: 'id',
       fixed: 'left',
-      render: (value: string, record: ReplicaNode) => (
-        <BAINameActionCell
-          title={toLocalId(value)}
-          showActions="always"
-          onTitleClick={() => setQueryParams({ selected: record.id })}
-        />
-      ),
+      render: (value: string) => <BAIId globalId={value} copyable />,
     },
     {
       key: 'livenessStatus',
@@ -278,13 +262,17 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
       render: (value) => value ?? '-',
     },
     {
+      // TODO(needs-backend): BA-5838 — ModelReplica.sessionId returns the
+      // replica's own route_id instead of the compute session ID. Hidden by
+      // default until the backend fix lands so users don't see wrong data.
       key: 'sessionId',
       title: t('deployment.SessionId'),
       dataIndex: 'sessionId',
+      defaultHidden: true,
       render: (value: string | null | undefined) =>
         value ? (
           <BAINameActionCell
-            title={value}
+            title={<BAIId uuid={value} />}
             showActions="always"
             onTitleClick={() => setSelectedSessionId(value)}
           />
@@ -310,84 +298,6 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
     },
   ]);
 
-  const drawerItems: DescriptionsItemType[] = selectedReplica
-    ? filterOutEmpty([
-        {
-          key: 'replicaId',
-          label: t('deployment.ReplicaId'),
-          children: <BAIId globalId={selectedReplica.id} ellipsis={false} />,
-        },
-        {
-          key: 'readinessStatus',
-          label: t('deployment.ReadinessStatus'),
-          children: (
-            <Tag>
-              {t(
-                `replicaStatus.${readinessStatusI18nKey(
-                  selectedReplica.readinessStatus,
-                )}`,
-                {
-                  defaultValue: selectedReplica.readinessStatus ?? '-',
-                },
-              )}
-            </Tag>
-          ),
-        },
-        {
-          key: 'livenessStatus',
-          label: t('deployment.LivenessStatus'),
-          children: (
-            <ReplicaStatusTag
-              status={toReplicaTagStatus(selectedReplica.livenessStatus)}
-            />
-          ),
-        },
-        {
-          key: 'activenessStatus',
-          label: t('deployment.ActivenessStatus'),
-          children: (
-            <Tag
-              color={
-                selectedReplica.activenessStatus === 'ACTIVE'
-                  ? 'green'
-                  : 'default'
-              }
-            >
-              {selectedReplica.activenessStatus ?? '-'}
-            </Tag>
-          ),
-        },
-        selectedReplica.sessionId && {
-          key: 'sessionId',
-          label: t('deployment.SessionId'),
-          children: (
-            <BAIId uuid={selectedReplica.sessionId} ellipsis={false} copyable />
-          ),
-        },
-        selectedReplica.revision && {
-          key: 'revision',
-          label: t('deployment.Revision'),
-          children: selectedReplica.revision.name,
-        },
-        deployment?.networkAccess?.endpointUrl && {
-          key: 'endpointUrl',
-          label: t('deployment.EndpointUrl'),
-          children: (
-            <Typography.Text copyable>
-              {deployment.networkAccess.endpointUrl}
-            </Typography.Text>
-          ),
-        },
-        {
-          key: 'createdAt',
-          label: t('deployment.CreatedAt'),
-          children: selectedReplica.createdAt
-            ? dayjs(selectedReplica.createdAt).format('lll')
-            : '-',
-        },
-      ])
-    : [];
-
   return (
     <>
       <BAIFlex
@@ -445,17 +355,6 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
           },
         }}
       />
-      <Drawer
-        title={t('deployment.ReplicaDetail')}
-        size="large"
-        open={!!selectedReplica}
-        onClose={() => setQueryParams({ selected: null })}
-        destroyOnHidden
-      >
-        {selectedReplica && (
-          <Descriptions column={1} size="small" bordered items={drawerItems} />
-        )}
-      </Drawer>
       <BAIUnmountAfterClose>
         <SessionDetailDrawer
           open={!!selectedSessionId}
@@ -467,23 +366,4 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
   );
 };
 
-/**
- * Maps the GraphQL `ReadinessStatus` enum to the i18n key suffix registered
- * under `replicaStatus.*`. Defaults to `NotChecked` for unknown values so the
- * tag always renders something readable.
- */
-const readinessStatusI18nKey = (
-  readinessStatus: string | null | undefined,
-): string => {
-  switch (readinessStatus) {
-    case 'HEALTHY':
-      return 'Healthy';
-    case 'UNHEALTHY':
-      return 'Unhealthy';
-    case 'NOT_CHECKED':
-    default:
-      return 'NotChecked';
-  }
-};
-
 export default DeploymentReplicasTab;

react/src/components/DeploymentRevisionHistoryTab.tsx

@@ -173,7 +173,9 @@ const DeploymentRevisionHistoryTab: React.FC<
                     size
                   }
                   modelRuntimeConfig {
-                    runtimeVariant
+                    runtimeVariant {
+                      name
+                    }
                   }
                   modelDefinition {
                     models {
@@ -368,7 +370,7 @@ const DeploymentRevisionHistoryTab: React.FC<
       key: 'runtimeVariant',
       dataIndex: 'runtimeVariant',
       render: (_value, record) =>
-        record.modelRuntimeConfig?.runtimeVariant ?? '-',
+        record.modelRuntimeConfig?.runtimeVariant?.name ?? '-',
     },
     {
       title: t('deployment.Image'),

react/src/pages/DeploymentLauncherPage.tsx

@@ -187,11 +187,13 @@ const DeploymentLauncherPageLayout: React.FC<
       { fetchPolicy: 'store-or-network' },
     );
 
+  const runtimeVariantList =
+    runtimeVariants?.edges
+      ?.map((e) => e?.node)
+      ?.filter((n): n is NonNullable<typeof n> => Boolean(n)) ?? [];
+
   const runtimeVariantByName = Object.fromEntries(
-    (runtimeVariants?.edges ?? [])
-      .map((e) => e?.node)
-      .filter((n): n is NonNullable<typeof n> => n != null)
-      .map((n) => [n.name, n]),
+    runtimeVariantList.map((n) => [n.name, n]),
   );
 
   // Track form dirtiness to guard cancel with a confirm dialog. We use
@@ -499,6 +501,7 @@ const DeploymentLauncherPageLayout: React.FC<
         mode={mode}
         form={form}
         deploymentFrgmt={deploymentFrgmt}
+        runtimeVariants={runtimeVariantList}
         onValuesChange={() => setIsDirty(true)}
         onCancel={handleCancel}
         onSubmit={handleSubmit}