From 3214332961008d014a41255f564cc13a93b17154 Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Tue, 26 Aug 2025 16:52:16 +0900
Subject: [PATCH] feat(FR-1407): add modify and delete action buttons for
 deployment detail page

---
 .../src/components/Table/BAITable.tsx         |   1 +
 react/src/components/AccessTokenList.tsx      |   2 +-
 .../src/components/DeploymentModifyModal.tsx  | 139 +++++++++++++++
 .../DeploymentNetworkAccessFormItem.tsx       |   4 +-
 .../components/DeploymentStrategyFormItem.tsx |   2 +-
 .../DeploymentTokenGenerationModal.tsx        | 165 +++++++++++-------
 react/src/pages/DeploymentDetailPage.tsx      | 136 ++++++++++++++-
 resources/i18n/de.json                        |   1 +
 resources/i18n/el.json                        |   1 +
 resources/i18n/en.json                        |  17 +-
 resources/i18n/es.json                        |   1 +
 resources/i18n/fi.json                        |   1 +
 resources/i18n/fr.json                        |   1 +
 resources/i18n/id.json                        |   1 +
 resources/i18n/it.json                        |   1 +
 resources/i18n/ja.json                        |   1 +
 resources/i18n/ko.json                        |   1 +
 resources/i18n/mn.json                        |   1 +
 resources/i18n/ms.json                        |   1 +
 resources/i18n/pl.json                        |   1 +
 resources/i18n/pt-BR.json                     |   1 +
 resources/i18n/pt.json                        |   1 +
 resources/i18n/ru.json                        |   1 +
 resources/i18n/th.json                        |   1 +
 resources/i18n/tr.json                        |   1 +
 resources/i18n/vi.json                        |   1 +
 resources/i18n/zh-CN.json                     |   1 +
 resources/i18n/zh-TW.json                     |   1 +
 28 files changed, 415 insertions(+), 71 deletions(-)
 create mode 100644 react/src/components/DeploymentModifyModal.tsx

diff --git a/packages/backend.ai-ui/src/components/Table/BAITable.tsx b/packages/backend.ai-ui/src/components/Table/BAITable.tsx
index 9ed1255732..a06c280b4e 100644
--- a/packages/backend.ai-ui/src/components/Table/BAITable.tsx
+++ b/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 || {}, {
diff --git a/react/src/components/AccessTokenList.tsx b/react/src/components/AccessTokenList.tsx
index d29f9be6e2..f30403a469 100644
--- a/react/src/components/AccessTokenList.tsx
+++ b/react/src/components/AccessTokenList.tsx
@@ -65,7 +65,7 @@ const AccessTokenList: React.FC<AccessTokenListProps> = ({
     },
     {
       key: 'validUntil',
-      title: t('deployment.ExpiredDate'),
+      title: t('deployment.ExpirationDate'),
       dataIndex: 'validUntil',
       render: (value) => dayjs(value).format('LLL'),
     },
diff --git a/react/src/components/DeploymentModifyModal.tsx b/react/src/components/DeploymentModifyModal.tsx
new file mode 100644
index 0000000000..655d9cebb4
--- /dev/null
+++ b/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;
diff --git a/react/src/components/DeploymentNetworkAccessFormItem.tsx b/react/src/components/DeploymentNetworkAccessFormItem.tsx
index 0cfc605c4d..060a557472 100644
--- a/react/src/components/DeploymentNetworkAccessFormItem.tsx
+++ b/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
diff --git a/react/src/components/DeploymentStrategyFormItem.tsx b/react/src/components/DeploymentStrategyFormItem.tsx
index d87a751a78..498d55963d 100644
--- a/react/src/components/DeploymentStrategyFormItem.tsx
+++ b/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={[
           {
diff --git a/react/src/components/DeploymentTokenGenerationModal.tsx b/react/src/components/DeploymentTokenGenerationModal.tsx
index dd3409fbdb..184b1592bd 100644
--- a/react/src/components/DeploymentTokenGenerationModal.tsx
+++ b/react/src/components/DeploymentTokenGenerationModal.tsx
@@ -1,5 +1,5 @@
 import BAIModal, { BAIModalProps } from './BAIModal';
-import { DatePicker, Form, FormInstance, message } from 'antd';
+import { DatePicker, Form, FormInstance, message, Select } from 'antd';
 import { BAIFlex } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import React, { useRef } from 'react';
@@ -18,6 +18,7 @@ const DeploymentTokenGenerationModal: React.FC<
 > = ({ onRequestClose, onCancel, deploymentId, ...baiModalProps }) => {
   const { t } = useTranslation();
   const formRef = useRef<FormInstance>(null);
+  // expiryOption은 Form.Item에서 관리
 
   const [commitCreateAccessToken, isInFlightCreateAccessToken] =
     useMutation<DeploymentTokenGenerationModalMutation>(graphql`
@@ -36,41 +37,51 @@ const DeploymentTokenGenerationModal: React.FC<
     `);
 
   const handleOk = () => {
-    formRef.current?.validateFields().then((values) => {
-      const validUntil = values.datetime.unix();
-      commitCreateAccessToken({
-        variables: {
-          input: {
-            validUntil: validUntil,
-            modelDeploymentId: deploymentId,
+    formRef.current
+      ?.validateFields()
+      .then((values) => {
+        let validUntil;
+        if (values.expiryOption === 'custom') {
+          validUntil = values.datetime.unix();
+        } else {
+          const daysToAdd = parseInt(values.expiryOption.replace('days', ''));
+          validUntil = dayjs().add(daysToAdd, 'day').unix();
+        }
+
+        commitCreateAccessToken({
+          variables: {
+            input: {
+              validUntil: validUntil,
+              modelDeploymentId: deploymentId,
+            },
           },
-        },
-        onCompleted: (res, errors) => {
-          if (!res?.createAccessToken?.accessToken) {
-            message.error(t('deployment.TokenGenerationFailed'));
-            return;
-          }
-          if (errors && errors.length > 0) {
-            const errorMsgList = errors.map((error) => error.message);
-            for (const error of errorMsgList) {
-              message.error(error);
+          onCompleted: (res, errors) => {
+            if (!res?.createAccessToken?.accessToken) {
+              message.error(t('deployment.TokenGenerationFailed'));
+              return;
             }
-          } else {
-            message.success(t('deployment.TokenGenerated'));
-            onRequestClose(true);
-          }
-        },
-        onError: (err) => {
-          if (err?.message?.includes('valid_until is older than now')) {
-            message.error(t('deployment.TokenExpiredDateError'));
-            return;
-          } else {
-            message.error(t('deployment.TokenGenerationFailed'));
-            console.log(err);
-          }
-        },
-      });
-    });
+            if (errors && errors.length > 0) {
+              const errorMsgList = errors.map((error) => error.message);
+              for (const error of errorMsgList) {
+                message.error(error);
+              }
+            } else {
+              message.success(t('deployment.TokenGenerated'));
+              onRequestClose(true);
+            }
+          },
+          onError: (err) => {
+            if (err?.message?.includes('valid_until is older than now')) {
+              message.error(t('deployment.TokenExpiredDateError'));
+              return;
+            } else {
+              message.error(t('deployment.TokenGenerationFailed'));
+              console.log(err);
+            }
+          },
+        });
+      })
+      .catch(() => {});
   };
 
   return (
@@ -81,45 +92,75 @@ const DeploymentTokenGenerationModal: React.FC<
       onCancel={() => onRequestClose(false)}
       okText={t('button.Generate')}
       confirmLoading={isInFlightCreateAccessToken}
-      centered
       title={t('deployment.GenerateNewToken')}
     >
       <Form
         ref={formRef}
         preserve={false}
-        labelCol={{ span: 10 }}
+        labelCol={{ span: 12 }}
         initialValues={{
-          datetime: dayjs().add(24, 'hour'),
+          expiryOption: '7days',
+          datetime: dayjs().add(7, 'day'),
         }}
         validateTrigger={['onChange', 'onBlur']}
       >
         <BAIFlex direction="column" gap="sm" align="stretch" justify="center">
-          <Form.Item
-            name="datetime"
-            label={t('deployment.ExpiredDate')}
-            rules={[
-              {
-                type: 'object',
-                required: true,
-                message: t('deployment.PleaseSelectTime'),
-              },
-              () => ({
-                validator(_, value) {
-                  if (value.isAfter(dayjs())) {
-                    return Promise.resolve();
-                  }
-                  return Promise.reject(
-                    new Error(t('deployment.TokenExpiredDateError')),
-                  );
+          <BAIFlex direction="row" align="stretch" justify="around">
+            <Form.Item
+              name="expiryOption"
+              label={t('deployment.ExpirationDate')}
+              rules={[
+                {
+                  required: true,
+                  message: t('deployment.PleaseSelectTime'),
                 },
-              }),
-            ]}
-          >
-            <DatePicker
-              showTime
-              format="YYYY-MM-DD HH:mm:ss"
-              style={{ width: 200 }}
-            />
+              ]}
+            >
+              <Select
+                style={{ width: 200 }}
+                options={[
+                  { value: '7days', label: t('general.Days', { num: 7 }) },
+                  { value: '30days', label: t('general.Days', { num: 30 }) },
+                  { value: '90days', label: t('general.Days', { num: 90 }) },
+                  { value: 'custom', label: t('deployment.Custom') },
+                ]}
+              />
+            </Form.Item>
+          </BAIFlex>
+          <Form.Item dependencies={['expiryOption']} noStyle>
+            {({ getFieldValue }) =>
+              getFieldValue('expiryOption') === 'custom' ? (
+                <BAIFlex direction="row" align="stretch" justify="around">
+                  <Form.Item
+                    name="datetime"
+                    label={t('deployment.CustomExpirationDate')}
+                    rules={[
+                      {
+                        type: 'object' as const,
+                        required: true,
+                        message: t('deployment.PleaseSelectTime'),
+                      },
+                      () => ({
+                        validator(_, value) {
+                          if (value && value.isAfter(dayjs())) {
+                            return Promise.resolve();
+                          }
+                          return Promise.reject(
+                            new Error(t('deployment.TokenExpiredDateError')),
+                          );
+                        },
+                      }),
+                    ]}
+                  >
+                    <DatePicker
+                      showTime
+                      format="YYYY-MM-DD HH:mm:ss"
+                      style={{ width: 200 }}
+                    />
+                  </Form.Item>
+                </BAIFlex>
+              ) : null
+            }
           </Form.Item>
         </BAIFlex>
       </Form>
diff --git a/react/src/pages/DeploymentDetailPage.tsx b/react/src/pages/DeploymentDetailPage.tsx
index b26133b362..12b53dbd27 100644
--- a/react/src/pages/DeploymentDetailPage.tsx
+++ b/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,12 +34,17 @@ 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';
+<<<<<<< HEAD
 import { DeploymentDetailPageSetActiveRevisionMutation } from 'src/__generated__/DeploymentDetailPageSetActiveRevisionMutation.graphql';
 import { DeploymentDetailPageSyncReplicasMutation } from 'src/__generated__/DeploymentDetailPageSyncReplicasMutation.graphql';
+=======
+import DeploymentModifyModal from 'src/components/DeploymentModifyModal';
+>>>>>>> cc7bb3933 (feat(FR-1407): add modify and delete action buttons for deployment detail page)
 import DeploymentTokenGenerationModal from 'src/components/DeploymentTokenGenerationModal';
 import ReplicaList from 'src/components/ReplicaList';
 import RevisionCreationModal from 'src/components/RevisionCreationModal';
@@ -62,12 +71,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
@@ -125,6 +136,7 @@ const DeploymentDetailPage: React.FC = () => {
           createdUser {
             email
           }
+          ...DeploymentModifyModalFragment
         }
       }
     `,
@@ -160,6 +172,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',
@@ -264,7 +289,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}
@@ -276,6 +301,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>
 
@@ -529,6 +582,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>
   );
 };
diff --git a/resources/i18n/de.json b/resources/i18n/de.json
index 6abf29b2f7..d0e72806ae 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -50,6 +50,7 @@
     "Threshold": "Schwelle"
   },
   "button": {
+    "Action": "Aktion",
     "Add": "Hinzufügen",
     "Apply": "Bewerbung",
     "Cancel": "Stornieren",
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
index 24d9b6697f..f0b7d09bec 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -50,6 +50,7 @@
     "Threshold": "Κατώφλι"
   },
   "button": {
+    "Action": "Δράση",
     "Add": "Προσθήκη",
     "Apply": "Εφαρμογή",
     "Cancel": "Ματαίωση",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index acbbc382dd..0c27825274 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -52,6 +52,7 @@
     "Threshold": "Threshold"
   },
   "button": {
+    "Action": "Action",
     "Add": "Add",
     "Apply": "Apply",
     "Cancel": "Cancel",
@@ -507,7 +508,11 @@
     "CreatedAt": "Created At",
     "CreatedBy": "Created By",
     "CreatorEmail": "Creator Email",
+    "Custom": "Custom",
+    "CustomExpirationDate": "Custom Expiration Date",
+    "CustomExpiredDate": "Custom Expiration Date",
     "DefaultDeploymentStrategy": "Deployment Strategy",
+    "DeleteDeployment": "Delete Deployment",
     "DeploymentAndNetwork": "Deployment & Network",
     "DeploymentDetail": "Deployment Detail",
     "DeploymentInfo": "Deployment Info",
@@ -527,7 +532,7 @@
     "ExpertMode": "Expert Mode",
     "ExpertModeDescription": "Direct configuration based",
     "ExpertModeTooltip": "Expert mode allows direct configuration of all deployment settings",
-    "ExpiredDate": "Expired Date",
+    "ExpirationDate": "Expiration Date",
     "GenerateNewToken": "Generate New Token",
     "GenerateToken": "Generate Token",
     "Hibernate": "Hibernate",
@@ -539,6 +544,7 @@
     "ModeRequired": "Mode selection is required",
     "ModeWarning": "Mode cannot be changed after creation",
     "ModeWarningDescription": "Please choose carefully as this setting is permanent",
+    "ModifyDeployment": "Modify Deployment",
     "Name": "Name",
     "NumberOfDesiredReplicas": "Number of Desired Replicas",
     "Owner": "Owner",
@@ -577,6 +583,7 @@
     "TrafficRatio": "Traffic Ratio",
     "TrafficRatioEditDescription": "Total traffic ratio must equal 100%",
     "TrafficRatioEditWarning": "Editing traffic ratios",
+    "TypeDeploymentNameToDelete": "Type deployment name to delete",
     "URL": "URL",
     "UpdatedAt": "Updated At",
     "Weight": "Weight",
@@ -646,7 +653,6 @@
       "OpenToPublic": "Open to Public",
       "PleaseCompleteForm": "Please complete the form to proceed",
       "PreferredDomainName": "Preferred Domain Name",
-      "PreferredDomainNamePlaceholder": "my-model.example.com",
       "ResetFormConfirm": "Do you want to reset all form values? This action cannot be undone.",
       "ResourceAllocation": "Resource Allocation",
       "ResourceConfig": "Resource Configuration",
@@ -860,6 +866,7 @@
     "ConfirmPassword": "Confirm Password",
     "Control": "Control",
     "Cores": "cores",
+    "Days": "{{ num }} Days",
     "Disabled": "Disabled",
     "E-Mail": "Email",
     "Enabled": "Enabled",
@@ -1108,6 +1115,12 @@
     "512chars": "(maximum 512 chars)",
     "64chars": "(maximum 64 chars)"
   },
+  "message": {
+    "FailedToDelete": "Failed to delete",
+    "FailedToUpdate": "Failed to update",
+    "SuccessfullyDeleted": "Successfully deleted",
+    "SuccessfullyUpdated": "Successfully updated"
+  },
   "modelService": {
     "Active": "Active",
     "Active/Total": "Active/Total",
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index 9fbc10018e..18f31c0398 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -50,6 +50,7 @@
     "Threshold": "Límite"
   },
   "button": {
+    "Action": "Acción",
     "Add": "Añadir",
     "Apply": "Solicitar",
     "Cancel": "Cancelar",
diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
index f6f3cd2c58..f32063a6e9 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -50,6 +50,7 @@
     "Threshold": "Kynnys"
   },
   "button": {
+    "Action": "Toiminta",
     "Add": "Lisää",
     "Apply": "Hae",
     "Cancel": "Peruuta",
diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
index 4ff00c6c25..79f2131f8d 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -50,6 +50,7 @@
     "Threshold": "Seuil"
   },
   "button": {
+    "Action": "Action",
     "Add": "Ajouter",
     "Apply": "Appliquer",
     "Cancel": "Annuler",
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index f6c94e0f7a..7862ce702b 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -50,6 +50,7 @@
     "Threshold": "Ambang"
   },
   "button": {
+    "Action": "Tindakan",
     "Add": "Tambah",
     "Apply": "Menerapkan",
     "Cancel": "Batalkan",
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index c637192a43..bb2d82a260 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -50,6 +50,7 @@
     "Threshold": "Soglia"
   },
   "button": {
+    "Action": "Azione",
     "Add": "Inserisci",
     "Apply": "Applicare",
     "Cancel": "Annulla",
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index 9a7a72ee08..3da99967e7 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -50,6 +50,7 @@
     "Threshold": "しきい値"
   },
   "button": {
+    "Action": "アクション",
     "Add": "追加",
     "Apply": "応募する",
     "Cancel": "キャンセル",
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index 179b0afcb6..77bdd31e39 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -52,6 +52,7 @@
     "Threshold": "기준값"
   },
   "button": {
+    "Action": "작업",
     "Add": "추가",
     "Apply": "적용",
     "Cancel": "취소",
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index 457ded252b..7476519d3f 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -50,6 +50,7 @@
     "Threshold": "Босго"
   },
   "button": {
+    "Action": "Үйл ажиллагаа",
     "Add": "Нэмэх",
     "Apply": "Өргөдөл гаргах",
     "Cancel": "Цуцлах",
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index 6b18105f20..bb76015ca6 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -50,6 +50,7 @@
     "Threshold": "Ambang"
   },
   "button": {
+    "Action": "Tindakan",
     "Add": "Tambah",
     "Apply": "Mohon",
     "Cancel": "Batal",
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index a9b53cd5c1..de4a5e9eae 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -50,6 +50,7 @@
     "Threshold": "Próg"
   },
   "button": {
+    "Action": "Działanie",
     "Add": "Dodaj",
     "Apply": "Zastosuj",
     "Cancel": "Anuluj",
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index 5451edddfd..345f0ea375 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -50,6 +50,7 @@
     "Threshold": "Limite"
   },
   "button": {
+    "Action": "Ação",
     "Add": "Adicionar",
     "Apply": "Aplicar",
     "Cancel": "Cancelar",
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index a99098f792..19e2504e2d 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -50,6 +50,7 @@
     "Threshold": "Limite"
   },
   "button": {
+    "Action": "Ação",
     "Add": "Adicionar",
     "Apply": "Aplicar",
     "Cancel": "Cancelar",
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index 0da64b6c1f..48ea1a860f 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -50,6 +50,7 @@
     "Threshold": "Порог"
   },
   "button": {
+    "Action": "Действие",
     "Add": "Добавлять",
     "Apply": "Применить",
     "Cancel": "Отмена",
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 9bd7635324..9d4bb7adda 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -50,6 +50,7 @@
     "Threshold": "เกณฑ์"
   },
   "button": {
+    "Action": "การกระทำ",
     "Add": "เพิ่ม",
     "Apply": "นำมาใช้",
     "Cancel": "ยกเลิก",
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index c6707a2eff..c5f5cd8ad7 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -50,6 +50,7 @@
     "Threshold": "Eşik"
   },
   "button": {
+    "Action": "Aksiyon",
     "Add": "Ekle",
     "Apply": "Başvurmak",
     "Cancel": "İptal etmek",
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index 8cf5b1dc4b..d7aaa57a02 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -50,6 +50,7 @@
     "Threshold": "Ngưỡng"
   },
   "button": {
+    "Action": "Hoạt động",
     "Add": "Thêm vào",
     "Apply": "Áp dụng",
     "Cancel": "Huỷ bỏ",
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index cd866d4925..d21b84add9 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -50,6 +50,7 @@
     "Threshold": "临界点"
   },
   "button": {
+    "Action": "行动",
     "Add": "添加",
     "Apply": "申请",
     "Cancel": "取消",
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index 119a6ea5ab..3b34acad43 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -50,6 +50,7 @@
     "Threshold": "臨界點"
   },
   "button": {
+    "Action": "行動",
     "Add": "添加",
     "Apply": "申请",
     "Cancel": "取消",