[INLONG-10592][Dashboard] When there are too many selections in the d…

…rop-down box, omit some of them
apache · Jul 10, 2024 · fe641ff · fe641ff
1 parent 7e2897c
commit fe641ff
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json
@@ -920,5 +920,7 @@
   "pages.GroupDataTemplate.Modifier":"修改人",
   "pages.GroupDataTemplate.VisibleRange.All":"全局",
   "pages.GroupDataTemplate.VisibleRange.InCharges":"责任人",
-  "pages.GroupDataTemplate.VisibleRange.Tenant":"租户"
+  "pages.GroupDataTemplate.VisibleRange.Tenant":"租户",
+  "miscellaneous.total": "... 共",
+  "miscellaneous.tenants": "个租户"
 }
diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json
@@ -920,5 +920,7 @@
   "pages.GroupDataTemplate.Modifier":"Modifier",
   "pages.GroupDataTemplate.VisibleRange.All":"Global",
   "pages.GroupDataTemplate.VisibleRange.InCharges":"Owner",
-  "pages.GroupDataTemplate.VisibleRange.Tenant":"Tenant"
+  "pages.GroupDataTemplate.VisibleRange.Tenant":"Tenant",
+  "miscellaneous.total": "... total ",
+  "miscellaneous.tenants": " tenants"
 }
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx b/inlong-dashboard/src/ui/pages/ClusterTags/TagDetailModal.tsx
@@ -104,6 +104,18 @@ const TagDetailModal: React.FC<TagDetailModalProps> = ({ id, ...modalProps }) =>
           showSearch: true,
           allowClear: true,
           mode: 'multiple',
+          maxTagCount: 9,
+          maxTagTextLength: 20,
+          maxTagPlaceholder: omittedValues => {
+            console.log('omittedValues', omittedValues);
+            return (
+              <span>
+                {i18n.t('miscellaneous.total')}
+                {omittedValues.length}
+                {i18n.t('miscellaneous.tenants')}
+              </span>
+            );
+          },
           options: {
             requestTrigger: ['onOpen', 'onSearch'],
             requestService: keyword => ({
@@ -136,6 +148,7 @@ const TagDetailModal: React.FC<TagDetailModalProps> = ({ id, ...modalProps }) =>
 
   return (
     <Modal
+      width={600}
       {...modalProps}
       title={i18n.t(id ? 'basic.Edit' : 'basic.Create') + i18n.t('pages.ClusterTags.Name')}
       onOk={onOk}