feat(FR-1407): add modify and delete action buttons for deployment detail page

Author: agatha197

packages/backend.ai-ui/src/components/Table/BAITable.tsx

@@ -331,6 +331,7 @@ const BAITable = <RecordType extends object = any>({
           opacity: loading ? 0.7 : 1,
           transition: 'opacity 0.3s ease',
         }}
+        scroll={tableProps.scroll || { x: 'max-content' }}
         components={
           resizable
             ? _.merge(components || {}, {

react/src/components/DeploymentModifyModal.tsx

@@ -0,0 +1,139 @@
+import BAIModal, { BAIModalProps } from './BAIModal';
+import DeploymentMetadataFormItem from './DeploymentMetadataFormItem';
+import DeploymentNetworkAccessFormItem from './DeploymentNetworkAccessFormItem';
+import DeploymentStrategyFormItem from './DeploymentStrategyFormItem';
+import { App, Form, FormInstance } from 'antd';
+import { toLocalId } from 'backend.ai-ui';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { graphql, useFragment, useMutation } from 'react-relay';
+import {
+  DeploymentModifyModalFragment$data,
+  DeploymentModifyModalFragment$key,
+} from 'src/__generated__/DeploymentModifyModalFragment.graphql';
+import { DeploymentModifyModalMutation } from 'src/__generated__/DeploymentModifyModalMutation.graphql';
+
+interface DeploymentModifyModalProps extends BAIModalProps {
+  deploymentFrgmt?: DeploymentModifyModalFragment$key | null;
+  onRequestClose: (success?: boolean) => void;
+}
+
+const DeploymentModifyModal: React.FC<DeploymentModifyModalProps> = ({
+  onRequestClose,
+  deploymentFrgmt,
+  ...baiModalProps
+}) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const formRef =
+    useRef<FormInstance<DeploymentModifyModalFragment$data>>(null);
+
+  const deployment = useFragment(
+    graphql`
+      fragment DeploymentModifyModalFragment on ModelDeployment {
+        id
+        metadata {
+          name
+          tags
+        }
+        networkAccess {
+          openToPublic
+          preferredDomainName
+        }
+        defaultDeploymentStrategy {
+          type
+        }
+        replicaState {
+          desiredReplicaCount
+        }
+      }
+    `,
+    deploymentFrgmt,
+  );
+
+  const [commitUpdateDeployment, isInFlightUpdateDeployment] =
+    useMutation<DeploymentModifyModalMutation>(graphql`
+      mutation DeploymentModifyModalMutation(
+        $input: UpdateModelDeploymentInput!
+      ) {
+        updateModelDeployment(input: $input) {
+          deployment {
+            id
+            metadata {
+              name
+              tags
+            }
+            networkAccess {
+              openToPublic
+            }
+            defaultDeploymentStrategy {
+              type
+            }
+          }
+        }
+      }
+    `);
+
+  const handleOk = () => {
+    formRef.current?.validateFields().then((values) => {
+      commitUpdateDeployment({
+        variables: {
+          input: {
+            id: toLocalId(deployment?.id || ''),
+            name: values.metadata?.name,
+            tags: values.metadata?.tags,
+            defaultDeploymentStrategy: values?.defaultDeploymentStrategy,
+            desiredReplicaCount: values.replicaState?.desiredReplicaCount,
+            preferredDomainName: values.networkAccess?.preferredDomainName,
+            openToPublic: values.networkAccess?.openToPublic,
+          },
+        },
+        onCompleted: (res, errors) => {
+          if (!res?.updateModelDeployment?.deployment?.id) {
+            message.error(t('message.FailedToUpdate'));
+            return;
+          }
+          if (errors && errors.length > 0) {
+            const errorMsgList = errors.map((error) => error.message);
+            for (const error of errorMsgList) {
+              message.error(error);
+            }
+          } else {
+            message.success(t('message.SuccessfullyUpdated'));
+            onRequestClose(true);
+          }
+        },
+        onError: (err) => {
+          message.error(err.message || t('message.FailedToUpdate'));
+        },
+      });
+    });
+  };
+
+  return (
+    <BAIModal
+      {...baiModalProps}
+      destroyOnClose
+      onOk={handleOk}
+      onCancel={() => onRequestClose(false)}
+      okText={t('button.Update')}
+      confirmLoading={isInFlightUpdateDeployment}
+      title={t('deployment.ModifyDeployment')}
+    >
+      <Form
+        ref={formRef}
+        layout="vertical"
+        initialValues={{
+          ...deployment,
+        }}
+        style={{ maxWidth: '100%' }}
+      >
+        <DeploymentMetadataFormItem />
+        <DeploymentStrategyFormItem />
+        <DeploymentNetworkAccessFormItem />
+      </Form>
+    </BAIModal>
+  );
+};
+
+export default DeploymentModifyModal;

react/src/components/DeploymentNetworkAccessFormItem.tsx

@@ -18,9 +18,7 @@ const DeploymentNetworkAccessFormItem: React.FC = () => {
         name={['networkAccess', 'preferredDomainName']}
         label={t('deployment.launcher.PreferredDomainName')}
       >
-        <Input
-          placeholder={t('deployment.launcher.PreferredDomainNamePlaceholder')}
-        />
+        <Input placeholder={'my-model.example.com'} />
       </Form.Item>
 
       <Form.Item

react/src/components/DeploymentStrategyFormItem.tsx

@@ -103,7 +103,7 @@ const DeploymentStrategyFormItem: React.FC = () => {
         }}
       </Form.Item>
       <Form.Item
-        name={['desiredReplicaCount']}
+        name={['replicaState', 'desiredReplicaCount']}
         label={t('deployment.NumberOfDesiredReplicas')}
         rules={[
           {

react/src/components/DeploymentTokenGenerationModal.tsx

@@ -81,7 +81,6 @@ const DeploymentTokenGenerationModal: React.FC<
       onCancel={() => onRequestClose(false)}
       okText={t('button.Generate')}
       confirmLoading={isInFlightCreateAccessToken}
-      centered
       title={t('deployment.GenerateNewToken')}
     >
       <Form

react/src/pages/DeploymentDetailPage.tsx

@@ -1,16 +1,20 @@
 import AccessTokenList from '../components/AccessTokenList';
+import BAIConfirmModalWithInput from '../components/BAIConfirmModalWithInput';
 import DeploymentRevisionList from '../components/DeploymentRevisionList';
 import FlexActivityIndicator from '../components/FlexActivityIndicator';
 import {
   CheckOutlined,
   CloseOutlined,
+  DownOutlined,
   ReloadOutlined,
 } from '@ant-design/icons';
 import { useToggle } from 'ahooks';
 import {
+  Alert,
   App,
   Button,
   Descriptions,
+  Dropdown,
   Tag,
   theme,
   Tooltip,
@@ -30,10 +34,12 @@ import { Suspense, useState, useTransition } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
 import { useParams } from 'react-router-dom';
+import { DeploymentDetailPageDeleteMutation } from 'src/__generated__/DeploymentDetailPageDeleteMutation.graphql';
 import {
   DeploymentDetailPageQuery,
   DeploymentDetailPageQuery$data,
 } from 'src/__generated__/DeploymentDetailPageQuery.graphql';
+import DeploymentModifyModal from 'src/components/DeploymentModifyModal';
 import DeploymentTokenGenerationModal from 'src/components/DeploymentTokenGenerationModal';
 import RevisionCreationModal from 'src/components/RevisionCreationModal';
 import RouteList from 'src/components/RouteList';
@@ -60,12 +66,14 @@ const DeploymentDetailPage: React.FC = () => {
     useToggle();
   const [isTokenGenerationModalOpen, { toggle: toggleTokenGenerationModal }] =
     useToggle();
+  const [isModifyModalOpen, { toggle: toggleModifyModal }] = useToggle();
+  const [isDeleteModalOpen, { toggle: toggleDeleteModal }] = useToggle();
 
   const { deployment } = useLazyLoadQuery<DeploymentDetailPageQuery>(
     graphql`
       query DeploymentDetailPageQuery($deploymentId: ID!) {
         deployment(id: $deploymentId) {
-          id
+          id @required(action: THROW)
           metadata {
             name
             status
@@ -131,6 +139,7 @@ const DeploymentDetailPage: React.FC = () => {
           createdUser {
             email
           }
+          ...DeploymentModifyModalFragment
         }
       }
     `,
@@ -154,6 +163,19 @@ const DeploymentDetailPage: React.FC = () => {
     `,
   );
 
+  const [commitDeleteDeployment, isInFlightDeleteDeployment] =
+    useMutation<DeploymentDetailPageDeleteMutation>(graphql`
+      mutation DeploymentDetailPageDeleteMutation(
+        $input: DeleteModelDeploymentInput!
+      ) {
+        deleteModelDeployment(input: $input) {
+          deployment {
+            id
+          }
+        }
+      }
+    `);
+
   const deploymentInfoItems: DescriptionsProps['items'] = [
     {
       key: 'name',
@@ -258,7 +280,7 @@ const DeploymentDetailPage: React.FC = () => {
         <Typography.Title level={3} style={{ margin: 0 }}>
           {deployment?.metadata?.name || ''}
         </Typography.Title>
-        <BAIFlex gap={'xxs'}>
+        <BAIFlex gap={'xs'}>
           <Tooltip title={t('button.Refresh')}>
             <Button
               loading={isPendingRefetch}
@@ -270,6 +292,34 @@ const DeploymentDetailPage: React.FC = () => {
               }}
             />
           </Tooltip>
+          <Button
+            onClick={() => {
+              toggleModifyModal();
+            }}
+          >
+            {t('button.Edit')}
+          </Button>
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: 'delete',
+                  label: t('button.Delete'),
+                  onClick: () => {
+                    toggleDeleteModal();
+                  },
+                },
+              ],
+            }}
+            trigger={['click']}
+          >
+            <Button>
+              <BAIFlex gap={'xxs'}>
+                {t('button.Action')}
+                <DownOutlined />
+              </BAIFlex>
+            </Button>
+          </Dropdown>
         </BAIFlex>
       </BAIFlex>
 
@@ -492,6 +542,85 @@ const DeploymentDetailPage: React.FC = () => {
           toggleTokenGenerationModal();
         }}
       />
+
+      <Suspense>
+        <DeploymentModifyModal
+          deploymentFrgmt={deployment}
+          open={isModifyModalOpen}
+          onRequestClose={(success) => {
+            if (success) {
+              startRefetchTransition(() => {
+                updateFetchKey();
+              });
+            }
+            toggleModifyModal();
+          }}
+        />
+      </Suspense>
+
+      <BAIConfirmModalWithInput
+        open={isDeleteModalOpen}
+        onOk={() => {
+          commitDeleteDeployment({
+            variables: {
+              input: {
+                id: deploymentId || '',
+              },
+            },
+            onCompleted: (res, errors) => {
+              if (!res?.deleteModelDeployment?.deployment?.id) {
+                message.error(t('message.FailedToDelete'));
+                return;
+              }
+              if (errors && errors.length > 0) {
+                const errorMsgList = _.map(errors, (error) => error.message);
+                for (const error of errorMsgList) {
+                  message.error(error);
+                }
+              } else {
+                message.success(t('message.SuccessfullyDeleted'));
+              }
+            },
+            onError: (err) => {
+              message.error(err.message || t('message.FailedToDelete'));
+            },
+          });
+          toggleDeleteModal();
+        }}
+        onCancel={() => {
+          toggleDeleteModal();
+        }}
+        confirmText={deployment?.metadata?.name ?? ''}
+        content={
+          <BAIFlex
+            direction="column"
+            gap="md"
+            align="stretch"
+            style={{ marginBottom: token.marginXS, width: '100%' }}
+          >
+            <Alert
+              type="warning"
+              message={t('dialog.warning.DeleteForeverDesc')}
+              style={{ width: '100%' }}
+            />
+            <BAIFlex>
+              <Typography.Text style={{ marginRight: token.marginXXS }}>
+                {t('deployment.TypeDeploymentNameToDelete')}
+              </Typography.Text>
+              (
+              <Typography.Text code>
+                {deployment?.metadata?.name}
+              </Typography.Text>
+              )
+            </BAIFlex>
+          </BAIFlex>
+        }
+        title={t('deployment.DeleteDeployment')}
+        okText={t('button.Delete')}
+        okButtonProps={{
+          loading: isInFlightDeleteDeployment,
+        }}
+      />
     </BAIFlex>
   );
 };

resources/i18n/de.json

@@ -50,6 +50,7 @@
     "Threshold": "Schwelle"
   },
   "button": {
+    "Action": "Aktion",
     "Add": "Hinzufügen",
     "Apply": "Bewerbung",
     "Cancel": "Stornieren",

resources/i18n/el.json

@@ -50,6 +50,7 @@
     "Threshold": "Κατώφλι"
   },
   "button": {
+    "Action": "Δράση",
     "Add": "Προσθήκη",
     "Apply": "Εφαρμογή",
     "Cancel": "Ματαίωση",