fix: use parseAsString for tab param in DeploymentDetailPage to prevent reset loop on invalid values

Author: agatha197

react/src/components/AutoScalingRuleList.tsx

@@ -17,7 +17,7 @@ import {
   PlusOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { App, Button, Card, Tag, Tooltip, Typography, theme } from 'antd';
+import { App, Button, Tag, Tooltip, Typography } from 'antd';
 import {
   BAIFlex,
   BAIGraphQLPropertyFilter,
@@ -335,7 +335,6 @@ const AutoScalingRuleList: React.FC<AutoScalingRuleListProps> = ({
 }) => {
   'use memo';
   const { t } = useTranslation();
-  const { token } = theme.useToken();
   const { message, modal } = App.useApp();
   const [isPendingRefetch, startRefetchTransition] = useTransition();
   const [fetchKey, updateFetchKey] = useFetchKey();
@@ -504,9 +503,34 @@ const AutoScalingRuleList: React.FC<AutoScalingRuleListProps> = ({
 
   return (
     <>
-      <Card
-        title={t('modelService.AutoScalingRules')}
-        extra={
+      <BAIFlex direction="column" align="stretch" gap="sm">
+        <BAIFlex align="center" gap="sm">
+          <BAIGraphQLPropertyFilter
+            style={{ flex: 1 }}
+            filterProperties={[
+              {
+                key: 'createdAt',
+                propertyLabel: t('autoScalingRule.CreatedAt'),
+                type: 'datetime',
+                operators: ['after', 'before'],
+                defaultOperator: 'after',
+              },
+              {
+                key: 'lastTriggeredAt',
+                propertyLabel: t('autoScalingRule.LastTriggered'),
+                type: 'datetime',
+                operators: ['after', 'before'],
+                defaultOperator: 'after',
+              },
+            ]}
+            value={graphQLFilter}
+            onChange={(filter) => {
+              startRefetchTransition(() => {
+                setQueryParams({ filter: filter ?? null });
+                setTablePaginationOption({ current: 1 });
+              });
+            }}
+          />
           <Button
             type="primary"
             icon={<PlusOutlined />}
@@ -518,34 +542,7 @@ const AutoScalingRuleList: React.FC<AutoScalingRuleListProps> = ({
           >
             {t('modelService.AddRules')}
           </Button>
-        }
-      >
-        <BAIGraphQLPropertyFilter
-          style={{ marginBottom: token.marginMD }}
-          filterProperties={[
-            {
-              key: 'createdAt',
-              propertyLabel: t('autoScalingRule.CreatedAt'),
-              type: 'datetime',
-              operators: ['after', 'before'],
-              defaultOperator: 'after',
-            },
-            {
-              key: 'lastTriggeredAt',
-              propertyLabel: t('autoScalingRule.LastTriggered'),
-              type: 'datetime',
-              operators: ['after', 'before'],
-              defaultOperator: 'after',
-            },
-          ]}
-          value={graphQLFilter}
-          onChange={(filter) => {
-            startRefetchTransition(() => {
-              setQueryParams({ filter: filter ?? null });
-              setTablePaginationOption({ current: 1 });
-            });
-          }}
-        />
+        </BAIFlex>
         <AutoScalingRuleListNodes
           autoScalingRulesFrgmt={autoScalingRuleNodes}
           presetMap={presetMap}
@@ -580,7 +577,7 @@ const AutoScalingRuleList: React.FC<AutoScalingRuleListProps> = ({
           }}
           onDeleteRule={handleDeleteRule}
         />
-      </Card>
+      </BAIFlex>
       <BAIUnmountAfterClose>
         <AutoScalingRuleEditorModal
           open={isOpenEditorModal}

react/src/components/DeploymentAccessTokensTab.tsx

@@ -8,16 +8,7 @@ import {
   DeploymentAccessTokensTab_deployment$key,
 } from '../__generated__/DeploymentAccessTokensTab_deployment.graphql';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import {
-  Alert,
-  App,
-  Button,
-  Card,
-  DatePicker,
-  Form,
-  Typography,
-  theme,
-} from 'antd';
+import { Alert, App, Button, DatePicker, Form, Typography, theme } from 'antd';
 import {
   BAIFlex,
   BAIModal,
@@ -142,9 +133,8 @@ const DeploymentAccessTokensTab: React.FC<DeploymentAccessTokensTabProps> = ({
 
   return (
     <>
-      <Card
-        title={t('deployment.AccessTokens')}
-        extra={
+      <BAIFlex direction="column" align="stretch" gap="sm">
+        <BAIFlex justify="end">
           <Button
             type="primary"
             icon={<PlusOutlined />}
@@ -153,8 +143,7 @@ const DeploymentAccessTokensTab: React.FC<DeploymentAccessTokensTabProps> = ({
           >
             {t('deployment.accessToken.Create')}
           </Button>
-        }
-      >
+        </BAIFlex>
         <BAITable<AccessTokenNode>
           scroll={{ x: 'max-content' }}
           rowKey="id"
@@ -193,7 +182,7 @@ const DeploymentAccessTokensTab: React.FC<DeploymentAccessTokensTabProps> = ({
             },
             {
               key: 'createdAt',
-              title: t('deployment.accessToken.Created'),
+              title: t('deployment.CreatedAt'),
               dataIndex: 'createdAt',
               render: (_text, row) =>
                 row?.createdAt ? dayjs(row.createdAt).format('ll LT') : '-',
@@ -209,7 +198,7 @@ const DeploymentAccessTokensTab: React.FC<DeploymentAccessTokensTabProps> = ({
             },
           ]}
         />
-      </Card>
+      </BAIFlex>
 
       <BAIUnmountAfterClose>
         <CreateAccessTokenModal

react/src/components/DeploymentConfigurationSection.tsx

@@ -2,6 +2,7 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
+import { DeploymentConfigurationSectionRefetchQuery } from '../__generated__/DeploymentConfigurationSectionRefetchQuery.graphql';
 import { DeploymentConfigurationSection_deployment$key } from '../__generated__/DeploymentConfigurationSection_deployment.graphql';
 import { useWebUINavigate } from '../hooks';
 import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
@@ -11,28 +12,36 @@ import {
   filterOutEmpty,
   BAIButton,
   BAICard,
+  BAIFetchKeyButton,
   BAIFlex,
   toLocalId,
 } from 'backend.ai-ui';
+import { useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useFragment } from 'react-relay';
+import { graphql, useRefetchableFragment } from 'react-relay';
 
 interface DeploymentConfigurationSectionProps {
   deploymentFrgmt: DeploymentConfigurationSection_deployment$key;
+  isDeploymentDestroying?: boolean;
 }
 
 const DeploymentConfigurationSection: React.FC<
   DeploymentConfigurationSectionProps
-> = ({ deploymentFrgmt }) => {
+> = ({ deploymentFrgmt, isDeploymentDestroying = false }) => {
   'use memo';
 
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const webuiNavigate = useWebUINavigate();
+  const [isPendingRefetch, startRefetchTransition] = useTransition();
 
-  const deployment = useFragment(
+  const [deployment, refetch] = useRefetchableFragment<
+    DeploymentConfigurationSectionRefetchQuery,
+    DeploymentConfigurationSection_deployment$key
+  >(
     graphql`
-      fragment DeploymentConfigurationSection_deployment on ModelDeployment {
+      fragment DeploymentConfigurationSection_deployment on ModelDeployment
+      @refetchable(queryName: "DeploymentConfigurationSectionRefetchQuery") {
         id
         metadata {
           name
@@ -215,7 +224,7 @@ const DeploymentConfigurationSection: React.FC<
     },
     {
       key: 'environ',
-      label: t('deployment.EnvironmentVariables'),
+      label: t('deployment.Environ'),
       children:
         environEntries.length > 0 ? (
           <BAIFlex direction="column" align="start">
@@ -232,19 +241,33 @@ const DeploymentConfigurationSection: React.FC<
     },
   ]);
 
+  const handleRefetch = () => {
+    startRefetchTransition(() => {
+      refetch({}, { fetchPolicy: 'network-only' });
+    });
+  };
+
   return (
     <BAICard
       title={t('deployment.Configuration')}
       extra={
-        <BAIButton
-          type="primary"
-          icon={<EditOutlined />}
-          onClick={() => {
-            webuiNavigate(`/deployments/${deploymentId}/edit`);
-          }}
-        >
-          {t('deployment.EditConfiguration')}
-        </BAIButton>
+        <BAIFlex gap="xs" align="center">
+          <BAIFetchKeyButton
+            loading={isPendingRefetch}
+            value=""
+            onChange={handleRefetch}
+          />
+          <BAIButton
+            type="primary"
+            icon={<EditOutlined />}
+            disabled={isDeploymentDestroying}
+            onClick={() => {
+              webuiNavigate(`/deployments/${deploymentId}/edit`);
+            }}
+          >
+            {t('deployment.EditConfiguration')}
+          </BAIButton>
+        </BAIFlex>
       }
     >
       <Descriptions

react/src/components/DeploymentReplicasTab.tsx

@@ -13,8 +13,10 @@ import {
   BAIFetchKeyButton,
   BAIFlex,
   BAIId,
+  BAINameActionCell,
   BAITable,
   filterOutEmpty,
+  toLocalId,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import {
@@ -163,7 +165,14 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
       key: 'id',
       title: t('deployment.ReplicaId'),
       dataIndex: 'id',
-      render: (value: string) => <BAIId globalId={value} />,
+      fixed: 'left',
+      render: (value: string, record: ReplicaNode) => (
+        <BAINameActionCell
+          title={toLocalId(value)}
+          showActions="always"
+          onTitleClick={() => setQueryParams({ selected: record.id })}
+        />
+      ),
     },
     {
       key: 'livenessStatus',
@@ -325,10 +334,6 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
         loading={isPendingRefetch}
         size="small"
         scroll={{ x: 'max-content' }}
-        onRow={(record) => ({
-          onClick: () => setQueryParams({ selected: record.id }),
-          style: { cursor: 'pointer' },
-        })}
         pagination={{
           pageSize: queryParams.pageSize,
           current: queryParams.current,

react/src/components/DeploymentRevisionHistoryTab.tsx

@@ -12,9 +12,9 @@ import { convertToOrderBy } from '../helper';
 import { UndoOutlined } from '@ant-design/icons';
 import { App, Tag, Typography, theme } from 'antd';
 import {
-  BAIButton,
   BAIFetchKeyButton,
   BAIFlex,
+  BAINameActionCell,
   BAITable,
   filterOutNullAndUndefined,
   toLocalId,
@@ -45,6 +45,7 @@ type RevisionNode = NonNullable<
 
 export interface DeploymentRevisionHistoryTabProps {
   deploymentFrgmt: DeploymentRevisionHistoryTab_deployment$key;
+  isDeploymentDestroying?: boolean;
 }
 
 /**
@@ -59,7 +60,7 @@ export interface DeploymentRevisionHistoryTabProps {
  */
 const DeploymentRevisionHistoryTab: React.FC<
   DeploymentRevisionHistoryTabProps
-> = ({ deploymentFrgmt }) => {
+> = ({ deploymentFrgmt, isDeploymentDestroying = false }) => {
   'use memo';
   const { t } = useTranslation();
   const { token } = theme.useToken();
@@ -249,17 +250,37 @@ const DeploymentRevisionHistoryTab: React.FC<
       title: t('deployment.RevisionNumber'),
       dataIndex: 'name',
       key: 'name',
+      fixed: 'left',
       render: (_value, record) => {
         const isCurrent = record.id === deployment.currentRevisionId;
         return (
-          <BAIFlex gap="xs" align="center">
-            <Typography.Text strong={isCurrent}>
-              {record.name ?? '-'}
-            </Typography.Text>
-            {isCurrent ? (
-              <Tag color={token.colorPrimary}>{t('deployment.Current')}</Tag>
-            ) : null}
-          </BAIFlex>
+          <BAINameActionCell
+            title={
+              <BAIFlex gap="xs" align="center">
+                <Typography.Text strong={isCurrent}>
+                  {record.name ?? '-'}
+                </Typography.Text>
+                {isCurrent ? (
+                  <Tag color={token.colorPrimary}>
+                    {t('deployment.Current')}
+                  </Tag>
+                ) : null}
+              </BAIFlex>
+            }
+            showActions="always"
+            actions={[
+              {
+                key: 'rollback',
+                title: t('deployment.Rollback'),
+                icon: <UndoOutlined />,
+                disabled:
+                  isCurrent ||
+                  isDeploymentDestroying ||
+                  rollingBackRevisionId === record.id,
+                onClick: () => handleRollback(record),
+              },
+            ]}
+          />
         );
       },
     },
@@ -321,25 +342,6 @@ const DeploymentRevisionHistoryTab: React.FC<
         return mode ? `${size} (${mode})` : `${size}`;
       },
     },
-    {
-      title: t('general.Actions'),
-      key: 'actions',
-      fixed: 'right',
-      render: (_value, record) => {
-        const isCurrent = record.id === deployment.currentRevisionId;
-        return (
-          <BAIButton
-            size="small"
-            icon={<UndoOutlined />}
-            disabled={isCurrent}
-            loading={rollingBackRevisionId === record.id}
-            onClick={() => handleRollback(record)}
-          >
-            {t('deployment.Rollback')}
-          </BAIButton>
-        );
-      },
-    },
   ];
 
   return (