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:
parent
01c0bda677
commit
b01a4e167b
|
@ -0,0 +1,3 @@
|
||||||
|
.maxColumnWidth {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
|
@ -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}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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})`}
|
||||||
|
|
|
@ -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" }),
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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' }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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' }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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' }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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' }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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({
|
||||||
|
|
Loading…
Reference in New Issue