terminate a rebuilding index, fix #477 (#511)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/i18n/cn/index.ts

@@ -12,6 +12,7 @@ const indexTrans = {
   metric: '度量类型',
   createSuccess: '开始创建索引',
   deleteWarning: '您正在尝试删除一个索引。此操作无法撤销。',
+  cancelCreate: '取消创建索引',
 };
 
 export default indexTrans;

client/src/i18n/en/index.ts

@@ -13,6 +13,7 @@ const indexTrans = {
   createSuccess: 'Start creating index',
   deleteWarning:
     'You are trying to delete an index. This action cannot be undone.',
+  cancelCreate: 'Cancel Index Creation',
 };
 
 export default indexTrans;

client/src/pages/databases/collections/overview/IndexTypeElement.tsx

@@ -150,6 +150,37 @@ const IndexTypeElement: FC<{
     });
   };
 
+  const chipComp = (
+    text = field.index.indexType,
+    icon = <Icons.delete classes={{ root: 'icon' }} />,
+    tooltip = ''
+  ) => {
+    const IndexElem = () => (
+      <Chip
+        label={text}
+        classes={{ root: classes.chip, label: classes.chipLabel }}
+        deleteIcon={icon}
+        onDelete={handleDelete}
+        disabled={disabled}
+        onClick={e => {
+          e.stopPropagation();
+          handleDelete();
+        }}
+        size="small"
+      />
+    );
+
+    return tooltip ? (
+      <Tooltip interactive arrow title={tooltip} placement="top">
+        <div>
+          <IndexElem />
+        </div>
+      </Tooltip>
+    ) : (
+      <IndexElem />
+    );
+  };
+
   const generateElement = () => {
     if (
       field.is_primary_key ||
@@ -176,38 +207,21 @@ const IndexTypeElement: FC<{
     switch (field.index.indexType) {
       default: {
         if (field.index.state === IndexState.InProgress) {
-          return <StatusIcon type={LoadingType.CREATING} />;
+          return (
+            <>
+              {chipComp(
+                field.index.indexType,
+                <StatusIcon type={LoadingType.CREATING} />,
+                indexTrans('cancelCreate')
+              )}
+            </>
+          );
         }
 
-        const chipComp = () => (
-          <Chip
-            label={field.index.indexType}
-            classes={{ root: classes.chip, label: classes.chipLabel }}
-            deleteIcon={<Icons.delete classes={{ root: 'icon' }} />}
-            onDelete={handleDelete}
-            disabled={disabled}
-            onClick={(e: MouseEvent<HTMLDivElement>) => {
-              e.stopPropagation();
-              handleDelete();
-            }}
-            size="small"
-          />
-        );
         /**
          * if creating finished, show chip that contains index type
          */
-        return disabled ? (
-          <Tooltip
-            interactive
-            arrow
-            title={disabledTooltip ?? ''}
-            placement={'top'}
-          >
-            <div>{chipComp()}</div>
-          </Tooltip>
-        ) : (
-          <div>{chipComp()}</div>
-        );
+        return chipComp(field.index.indexType);
       }
     }
   };