This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new 185b3617d9 [INLONG-12052][Dashboard] Optimization of text display in
long forms on resource details page (#12053)
185b3617d9 is described below
commit 185b3617d96b206f1e6fb296357038224eb42a1d
Author: kamianlaida <[email protected]>
AuthorDate: Mon Nov 24 11:07:27 2025 +0800
[INLONG-12052][Dashboard] Optimization of text display in long forms on
resource details page (#12053)
---
inlong-dashboard/src/ui/locales/cn.json | 1 +
inlong-dashboard/src/ui/locales/en.json | 1 +
.../ui/pages/GroupDetail/ResourceInfo/index.tsx | 95 ++++++++++++++++++++--
3 files changed, 88 insertions(+), 9 deletions(-)
diff --git a/inlong-dashboard/src/ui/locales/cn.json
b/inlong-dashboard/src/ui/locales/cn.json
index fdcf098fb1..1265e24461 100644
--- a/inlong-dashboard/src/ui/locales/cn.json
+++ b/inlong-dashboard/src/ui/locales/cn.json
@@ -755,6 +755,7 @@
"pages.GroupDetail.OperationLog.Table.OperationTarget": "操作目标",
"pages.GroupDetail.OperationLog.Table.Log": "日志",
"pages.GroupDetail.OperationLog.Table.OperationTime": "操作时间",
+ "pages.GroupDetail.Resource.Collapse": "收起",
"pages.ApprovalDetail.GroupConfig.DataStorages": "数据存储",
"pages.ApprovalDetail.GroupConfig.ApprovalInformation": "审批信息",
"pages.ApprovalDetail.GroupConfig.DataFlowInformation": "数据流信息",
diff --git a/inlong-dashboard/src/ui/locales/en.json
b/inlong-dashboard/src/ui/locales/en.json
index 6e479235de..6e0f998074 100644
--- a/inlong-dashboard/src/ui/locales/en.json
+++ b/inlong-dashboard/src/ui/locales/en.json
@@ -749,6 +749,7 @@
"pages.GroupDetail.OperationLog.Table.OperationTarget": "Operation target",
"pages.GroupDetail.OperationLog.Table.Log": "Log",
"pages.GroupDetail.OperationLog.Table.OperationTime": "Operation time",
+ "pages.GroupDetail.Resource.Collapse": "Collapse",
"pages.ApprovalDetail.GroupConfig.DataStorages": "Data storages",
"pages.ApprovalDetail.GroupConfig.ApprovalInformation": "Approval
information",
"pages.ApprovalDetail.GroupConfig.DataFlowInformation": "Data stream
information",
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
b/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
index 57fb9a0fc8..a17e4e4128 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
@@ -18,13 +18,14 @@
*/
import React, { useEffect, useMemo, forwardRef, useState } from 'react';
-import { Divider, Table } from 'antd';
+import { Divider, Table, Tag, Tooltip } from 'antd';
import FormGenerator, { useForm } from '@/ui/components/FormGenerator';
import { useRequest } from '@/ui/hooks';
import { useTranslation } from 'react-i18next';
import { CommonInterface } from '../common';
import { clusters } from '@/plugins/clusters';
import HighTable from '@/ui/components/HighTable';
+import i18n from '@/i18n';
type Props = CommonInterface;
@@ -37,6 +38,7 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
return !!inlongGroupId;
}, [inlongGroupId]);
+ const [expandedFields, setExpandedFields] = useState<Record<string,
boolean>>({});
const [sortOption, setSortOption] = useState({
inlongGroupId: inlongGroupId,
inlongStreamId: '',
@@ -74,12 +76,89 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
let content = [];
if (data[item].constructor === Object) {
for (const key in data[item]) {
- content.push({
- label: key,
- name: item + '_' + key,
- type: 'text',
- initialValue: data[item][key],
- });
+ console.log('key:', data, item, key, data[item]);
+ if (data[item][key]?.constructor === Array) {
+ content.push({
+ label: key,
+ name: item + '_' + key,
+ type: () => {
+ const urlList = Array.isArray(data[item][key]) ? data[item][key]
: [];
+ if (urlList.length === 0) return null;
+
+ const fieldKey = `${item}_${key}`;
+ const isExpanded = expandedFields[fieldKey] || false;
+ const displayCount = 10;
+ const displayList = isExpanded ? urlList : urlList.slice(0,
displayCount);
+ const remainingCount = urlList.length - displayCount;
+
+ return (
+ <div style={{ width: '80vw' }}>
+ <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px'
}}>
+ {displayList.map((url, index) => (
+ <Tooltip key={`url-${index}`} title={url}>
+ <Tag
+ style={{
+ maxWidth: '300px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ cursor: 'default',
+ }}
+ >
+ {url}
+ </Tag>
+ </Tooltip>
+ ))}
+ {!isExpanded && remainingCount > 0 && (
+ <Tag
+ style={{
+ cursor: 'pointer',
+ backgroundColor: '#f0f0f0',
+ borderStyle: 'dashed',
+ }}
+ onClick={() => {
+ setExpandedFields(prev => ({
+ ...prev,
+ [fieldKey]: true,
+ }));
+ }}
+ >
+ +{remainingCount}
+ </Tag>
+ )}
+ {isExpanded && urlList.length > displayCount && (
+ <Tag
+ style={{
+ cursor: 'pointer',
+ backgroundColor: '#f0f0f0',
+ borderStyle: 'dashed',
+ }}
+ onClick={() => {
+ setExpandedFields(prev => ({
+ ...prev,
+ [fieldKey]: false,
+ }));
+ }}
+ >
+ {i18n.t('pages.GroupDetail.Resource.Collapse')}
+ </Tag>
+ )}
+ </div>
+ </div>
+ );
+ },
+ initialValue: data[item][key],
+ visible: !!data[item][key],
+ });
+ } else {
+ content.push({
+ label: key,
+ name: item + '_' + key,
+ type: 'text',
+ initialValue: data[item][key],
+ visible: !!data[item][key],
+ });
+ }
}
return content;
}
@@ -182,7 +261,6 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
]}
style={{ marginTop: 20 }}
dataSource={data?.PULSAR}
- pagination={false}
rowKey="name"
></Table>
</>
@@ -200,7 +278,6 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
]}
style={{ marginTop: 20, width: 1100 }}
dataSource={data?.TUBEMQ}
- pagination={false}
rowKey="name"
></Table>
</>
