fix: disable edit button based on endpoint status

lablup · Sep 6, 2024 · 0057960 · 0057960
1 parent 7fe5730
commit 0057960
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx
@@ -300,7 +300,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
       children: endpoint?.url ? (
         <>
           <Typography.Text copyable>{endpoint?.url}</Typography.Text>
-          <Tooltip title={'LLM Playground'}>
+          <Tooltip title={'LLM Chat Test'}>
             <Button
               type="link"
               icon={<BotMessageSquareIcon />}
@@ -490,7 +490,9 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
             icon={<SettingOutlined />}
             disabled={
               (endpoint?.desired_session_count || 0) < 0 ||
-              endpoint?.status === 'DESTROYING' ||
+              ['destroying', 'destroyed'].includes(
+                endpoint?.status?.toLowerCase() || '',
+              ) ||
               (!!endpoint?.created_user_email &&
                 endpoint?.created_user_email !== currentUser.email)
             }
@@ -517,7 +519,9 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
           <Button
             type="primary"
             icon={<PlusOutlined />}
-            disabled={endpoint?.status === 'DESTROYING'}
+            disabled={['destroying', 'destroyed'].includes(
+              endpoint?.status?.toLowerCase() || '',
+            )}
             onClick={() => {
               setIsOpenTokenGenerationModal(true);
             }}
@@ -600,6 +604,9 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
             <Button
               icon={<SyncOutlined />}
               loading={mutationToSyncRoutes.isPending}
+              disabled={['destroying', 'destroyed'].includes(
+                endpoint?.status?.toLowerCase() || '',
+              )}
               onClick={() => {
                 endpoint?.endpoint_id &&
                   mutationToSyncRoutes.mutateAsync(endpoint?.endpoint_id, {

diff --git a/react/src/pages/EndpointListPage.tsx b/react/src/pages/EndpointListPage.tsx
@@ -138,7 +138,9 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
             icon={<SettingOutlined />}
             style={
               row.desired_session_count < 0 ||
-              row.status?.toLowerCase() === 'destroying' ||
+              ['destroying', 'destroyed'].includes(
+                row.status?.toLowerCase() || '',
+              ) ||
               (!!row.created_user_email &&
                 row.created_user_email !== currentUser.email)
                 ? {
@@ -150,7 +152,9 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
             }
             disabled={
               row.desired_session_count < 0 ||
-              row.status?.toLowerCase() === 'destroying' ||
+              ['destroying', 'destroyed'].includes(
+                row.status?.toLowerCase() || '',
+              ) ||
               (!!row.created_user_email &&
                 row.created_user_email !== currentUser.email)
             }
@@ -164,7 +168,9 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
               <DeleteOutlined
                 style={
                   row.desired_session_count < 0 ||
-                  row.status?.toLowerCase() === 'destroying'
+                  ['destroying', 'destroyed'].includes(
+                    row.status?.toLowerCase() || '',
+                  )
                     ? undefined
                     : {
                         color: token.colorError,
@@ -178,7 +184,9 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
             }
             disabled={
               row.desired_session_count < 0 ||
-              row.status?.toLowerCase() === 'destroying'
+              ['destroying', 'destroyed'].includes(
+                row.status?.toLowerCase() || '',
+              )
             }
             onClick={() => {
               modal.confirm({