fix: add limit of width to some columns and adjust ui of text if is overflow, in table (#45)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2024-12-17 20:09:43 +08:00 committed by GitHub
parent 01c0bda677
commit b01a4e167b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 60 additions and 14 deletions

3
web/src/common.less Normal file
View File

@ -0,0 +1,3 @@
.maxColumnWidth {
max-width: 200px;
}

View File

@ -20,16 +20,22 @@ export default (props) => {
}); });
}); });
if (textRef.current && showTooltip) { if (textRef.current) {
resizeObserver.observe(textRef.current); resizeObserver.observe(textRef.current);
} }
return () => { return () => {
if (textRef.current && showTooltip) { if (textRef.current) {
resizeObserver.unobserve(textRef.current); resizeObserver.unobserve(textRef.current);
} }
}; };
}, [showTooltip]); }, []);
const ellipsisDom = (
<div style={{ position: 'absolute', left: 0, top: 0, overflow: 'hidden', height, width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{children}
</div>
)
return ( return (
<div style={{ position: 'relative', width, height }} onClick={(e) => e.stopPropagation()}> <div style={{ position: 'relative', width, height }} onClick={(e) => e.stopPropagation()}>
@ -37,12 +43,12 @@ export default (props) => {
{children} {children}
</div> </div>
{ {
showTooltip && textHeight > height ? ( textHeight > height ? (
<Tooltip title={children} overlayStyle={{ maxWidth: 'unset !important'}}> showTooltip ? (
<div style={{ position: 'absolute', left: 0, top: 0, overflow: 'hidden', height, width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> <Tooltip title={children} overlayStyle={{ maxWidth: 'unset !important'}}>
{children} {ellipsisDom}
</div> </Tooltip>
</Tooltip> ) : ellipsisDom
) : ( ) : (
<div style={{ position: 'absolute', left: 0, top: 0 }}> <div style={{ position: 'absolute', left: 0, top: 0 }}>
{children} {children}

View File

@ -25,6 +25,8 @@ import Logs from "@/pages/Platform/Overview/Node/Detail/Logs";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import { SearchEngineIcon } from "@/lib/search_engines"; import { SearchEngineIcon } from "@/lib/search_engines";
import { hasAuthority } from "@/utils/authority"; import { hasAuthority } from "@/utils/authority";
import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { TabPane } = Tabs; const { TabPane } = Tabs;
@ -190,6 +192,8 @@ export const AgentRowDetail = ({ agentID, t }) => {
{ {
title: "Home", title: "Home",
dataIndex: "node_info.settings.path.home", dataIndex: "node_info.settings.path.home",
render: (text) => <AutoTextEllipsis >{text}</AutoTextEllipsis>,
className: commonStyles.maxColumnWidth
}, },
{ {
title: "Status", title: "Status",

View File

@ -474,7 +474,7 @@ const AgentList = (props) => {
columns={columns} columns={columns}
onChange={handleTableChange} onChange={handleTableChange}
expandedRowRender={expandedRowRender} expandedRowRender={expandedRowRender}
scroll={{x: 1100 }} scroll={{x: 'max-content' }}
/> />
<Drawer <Drawer
title={`Task Settings(${editState.editItem?.remote_ip})`} title={`Task Settings(${editState.editItem?.remote_ip})`}

View File

@ -35,6 +35,7 @@ import { hasAuthority } from "@/utils/authority";
import DeleteIndexModal from "./components/DeleteIndexModal"; import DeleteIndexModal from "./components/DeleteIndexModal";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import AutoTextEllipsis from "@/components/AutoTextEllipsis"; import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -192,6 +193,7 @@ class Index extends PureComponent {
/> />
), ),
sorter: (a, b) => sorter.string(a, b, "index"), sorter: (a, b) => sorter.string(a, b, "index"),
className: commonStyles.maxColumnWidth
}, },
{ {
title: formatMessage({ id: "indices.field.health" }), title: formatMessage({ id: "indices.field.health" }),

View File

@ -18,6 +18,8 @@ import ReestOffsetModal from "./ResetOffsetModal";
import { encodeProxyPath } from "@/lib/util"; import { encodeProxyPath } from "@/lib/util";
import { filterSearchValue, sorter } from "@/utils/utils"; import { filterSearchValue, sorter } from "@/utils/utils";
import { hasAuthority } from "@/utils/authority"; import { hasAuthority } from "@/utils/authority";
import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -42,7 +44,12 @@ export default (props) => {
}; };
const columns = [ const columns = [
{ title: "Group", dataIndex: "group" }, {
title: "Group",
dataIndex: "group",
render: (text) => <AutoTextEllipsis >{text}</AutoTextEllipsis>,
className: commonStyles.maxColumnWidth
},
{ {
title: "LastActive", title: "LastActive",
dataIndex: "last_active", dataIndex: "last_active",

View File

@ -23,6 +23,8 @@ import { hasAuthority } from "@/utils/authority";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import Consumer from "./Consumer"; import Consumer from "./Consumer";
import QueueTypeIcon from "./QueueTypeIcon"; import QueueTypeIcon from "./QueueTypeIcon";
import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -107,7 +109,12 @@ export default (props) => {
text={ text={
<Popover <Popover
content={consumerLabelRender(row?.metadata?.label)} content={consumerLabelRender(row?.metadata?.label)}
title={`ID:${row?.metadata?.id}`} title={(
<>
<div>{`ID: ${row?.metadata?.id}`}</div>
<div>{`Name: ${name}`}</div>
</>
)}
> >
<a <a
onClick={() => { onClick={() => {
@ -117,7 +124,7 @@ export default (props) => {
); );
}} }}
> >
{name} <AutoTextEllipsis showTooltip={false}>{name}</AutoTextEllipsis>
</a> </a>
</Popover> </Popover>
} }
@ -126,6 +133,7 @@ export default (props) => {
</> </>
), ),
sorter: (a, b) => sorter.string(a, b, "name"), sorter: (a, b) => sorter.string(a, b, "name"),
className: commonStyles.maxColumnWidth
}, },
{ {
title: "Local Storage", title: "Local Storage",
@ -422,6 +430,7 @@ export default (props) => {
? "offset-normal" ? "offset-normal"
: ""; : "";
}} }}
scroll={{ x: 'max-content' }}
/> />
</div> </div>
); );

View File

@ -11,6 +11,7 @@ import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
import { formatTimeRange } from "@/lib/elasticsearch/util"; import { formatTimeRange } from "@/lib/elasticsearch/util";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import AutoTextEllipsis from "@/components/AutoTextEllipsis"; import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -114,6 +115,7 @@ const Indices = ({
/> />
), ),
sorter: (a, b) => sorter.string(a, b, "index"), sorter: (a, b) => sorter.string(a, b, "index"),
className: commonStyles.maxColumnWidth
}, },
{ {
title: "Health", title: "Health",
@ -272,6 +274,7 @@ const Indices = ({
dispatch({ type: "pageSizeChange", value: size }); dispatch({ type: "pageSizeChange", value: size });
}, },
}} }}
scroll={{x: 'max-content' }}
/> />
</> </>
); );

View File

@ -13,6 +13,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import moment from "moment"; import moment from "moment";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import AutoTextEllipsis from "@/components/AutoTextEllipsis"; import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
const InputGroup = Input.Group; const InputGroup = Input.Group;
@ -128,7 +129,7 @@ export default ({
</span> </span>
), ),
sorter: (a, b) => sorter.string(a, b, "name"), sorter: (a, b) => sorter.string(a, b, "name"),
className: "verticalAlign", className: `verticalAlign ${commonStyles.maxColumnWidth}`,
}, },
]; ];
if (showRealtime) { if (showRealtime) {
@ -325,6 +326,7 @@ export default ({
dispatch({ type: "pageSizeChange", value: size }); dispatch({ type: "pageSizeChange", value: size });
}, },
}} }}
scroll={{x: 'max-content' }}
/> />
</> </>
); );

View File

@ -11,6 +11,7 @@ import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
import { formatTimeRange } from "@/lib/elasticsearch/util"; import { formatTimeRange } from "@/lib/elasticsearch/util";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import AutoTextEllipsis from "@/components/AutoTextEllipsis"; import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -155,6 +156,7 @@ export default ({
); );
}, },
sorter: (a, b) => sorter.string(a, b, "node"), sorter: (a, b) => sorter.string(a, b, "node"),
className: commonStyles.maxColumnWidth
}, },
{ {
title: "State", title: "State",
@ -255,6 +257,7 @@ export default ({
dispatch({ type: "pageSizeChange", value: size }); dispatch({ type: "pageSizeChange", value: size });
}, },
}} }}
scroll={{x: 'max-content' }}
/> />
</> </>
); );

View File

@ -11,6 +11,7 @@ import { filterSearchValue, sorter, formatUtcTimeToLocal } from "@/utils/utils";
import { formatTimeRange } from "@/lib/elasticsearch/util"; import { formatTimeRange } from "@/lib/elasticsearch/util";
import IconText from "@/components/infini/IconText"; import IconText from "@/components/infini/IconText";
import AutoTextEllipsis from "@/components/AutoTextEllipsis"; import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -105,6 +106,7 @@ export default ({ clusterID, clusterName, nodeID, timeRange, bucketSize }) => {
); );
}, },
sorter: (a, b) => sorter.string(a, b, "index"), sorter: (a, b) => sorter.string(a, b, "index"),
className: commonStyles.maxColumnWidth
}, },
{ {
title: "Shard", title: "Shard",
@ -257,6 +259,7 @@ export default ({ clusterID, clusterName, nodeID, timeRange, bucketSize }) => {
dispatch({ type: "pageSizeChange", value: size }); dispatch({ type: "pageSizeChange", value: size });
}, },
}} }}
scroll={{x: 'max-content' }}
/> />
</> </>
); );

View File

@ -18,6 +18,8 @@ import { formatESSearchResult } from "@/lib/elasticsearch/util";
import useFetch from "@/lib/hooks/use_fetch"; import useFetch from "@/lib/hooks/use_fetch";
import CredentialForm from "./CredentialForm"; import CredentialForm from "./CredentialForm";
import { hasAuthority } from "@/utils/authority"; import { hasAuthority } from "@/utils/authority";
import AutoTextEllipsis from "@/components/AutoTextEllipsis";
import commonStyles from "@/common.less"
const { Search } = Input; const { Search } = Input;
@ -182,6 +184,8 @@ export default () => {
}), }),
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
render: (text) => <AutoTextEllipsis >{text}</AutoTextEllipsis>,
className: commonStyles.maxColumnWidth
}, },
{ {
title: formatMessage({ title: formatMessage({