diff --git a/frontend/src/container/TriggeredAlerts/Filter.tsx b/frontend/src/container/TriggeredAlerts/Filter.tsx index 4a54916685..e7ebdb0d76 100644 --- a/frontend/src/container/TriggeredAlerts/Filter.tsx +++ b/frontend/src/container/TriggeredAlerts/Filter.tsx @@ -1,11 +1,35 @@ /* eslint-disable react/no-unstable-nested-components */ import type { SelectProps } from 'antd'; -import { Tag } from 'antd'; -import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'; +import { Tag, Tooltip } from 'antd'; +import { BaseOptionType } from 'antd/es/select'; +import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import { Container, Select } from './styles'; +function TextOverflowTooltip({ + option, +}: { + option: BaseOptionType; +}): JSX.Element { + const contentRef = useRef(null); + const isOverflow = contentRef.current + ? contentRef.current?.offsetWidth < contentRef.current?.scrollWidth + : false; + return ( + +
+ {option.value} +
+
+ ); +} + function Filter({ setSelectedFilter, setSelectedGroup, @@ -51,6 +75,7 @@ function Filter({ const options = uniqueLabels.map((e) => ({ value: e, + title: '', })); const getTags: SelectProps['tagRender'] = (props): JSX.Element => { @@ -88,6 +113,9 @@ function Filter({ placeholder="Group by any tag" tagRender={(props): JSX.Element => getTags(props)} options={options} + optionRender={(option): JSX.Element => ( + + )} /> );