mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-19 05:05:58 +08:00
fix: alerts tag popup vibrating (#4812)
This commit is contained in:
parent
f05b94c01e
commit
33383a4503
@ -1,10 +1,10 @@
|
|||||||
import './LabelColumn.styles.scss';
|
import './LabelColumn.styles.scss';
|
||||||
|
|
||||||
import { Popover, Tag } from 'antd';
|
import { Popover, Tag } from 'antd';
|
||||||
import { popupContainer } from 'utils/selectPopupContainer';
|
|
||||||
|
|
||||||
import { LabelColumnProps } from './TableRenderer.types';
|
import { LabelColumnProps } from './TableRenderer.types';
|
||||||
import TagWithToolTip from './TagWithToolTip';
|
import TagWithToolTip from './TagWithToolTip';
|
||||||
|
import { getLabelAndValueContent } from './utils';
|
||||||
|
|
||||||
function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
|
function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
|
||||||
const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
|
const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
|
||||||
@ -19,19 +19,17 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
|
|||||||
)}
|
)}
|
||||||
{remainingLabels.length > 0 && (
|
{remainingLabels.length > 0 && (
|
||||||
<Popover
|
<Popover
|
||||||
getPopupContainer={popupContainer}
|
|
||||||
placement="bottomRight"
|
placement="bottomRight"
|
||||||
showArrow={false}
|
showArrow={false}
|
||||||
content={
|
content={
|
||||||
<div>
|
<div>
|
||||||
{labels.map(
|
{labels.map(
|
||||||
(label: string): JSX.Element => (
|
(label: string): JSX.Element => (
|
||||||
<TagWithToolTip
|
<div key={label}>
|
||||||
key={label}
|
<Tag className="label-column--tag" color={color}>
|
||||||
label={label}
|
{getLabelAndValueContent(label, value && value[label])}
|
||||||
color={color}
|
</Tag>
|
||||||
value={value}
|
</div>
|
||||||
/>
|
|
||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,6 +38,16 @@ export const getLabelRenderingValue = (
|
|||||||
return label;
|
return label;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getLabelAndValueContent = (
|
||||||
|
label: string,
|
||||||
|
value?: string,
|
||||||
|
): string => {
|
||||||
|
if (value) {
|
||||||
|
return `${label}: ${value}`;
|
||||||
|
}
|
||||||
|
return `${label}`;
|
||||||
|
};
|
||||||
|
|
||||||
interface GeneratorResizeTableColumnsProp<T> {
|
interface GeneratorResizeTableColumnsProp<T> {
|
||||||
baseColumnOptions: ColumnsType<T>;
|
baseColumnOptions: ColumnsType<T>;
|
||||||
dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];
|
dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];
|
||||||
|
Loading…
x
Reference in New Issue
Block a user