floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

24
web/src/components/AutoTextEllipsis/index.js
View File

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

4
web/src/pages/Agent/Instance/components/RowDetail.jsx
View File

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

2
web/src/pages/Agent/Instance/index.jsx
View File

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

2
web/src/pages/DataManagement/Index.js
View File

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

9
web/src/pages/Gateway/Queue/Consumer.jsx
View File

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

13
web/src/pages/Gateway/Queue/Persistent.jsx
View File

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

3
web/src/pages/Platform/Overview/Cluster/Monitor/indices.jsx
View File

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

4
web/src/pages/Platform/Overview/Cluster/Monitor/nodes.jsx
View File

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

3
web/src/pages/Platform/Overview/Indices/Monitor/shards.jsx
View File

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

3
web/src/pages/Platform/Overview/Node/Monitor/shards.jsx
View File

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

4
web/src/pages/System/Credential/Index.js
View File

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