added Tooltip on Fallback serde icon

This commit is contained in:
davitbejanyan 2023-05-05 17:05:50 +04:00
parent 727f38401b
commit 0d51554427

View file

@ -8,6 +8,7 @@ import { formatTimestamp } from 'lib/dateTimeHelpers';
import { JSONPath } from 'jsonpath-plus'; import { JSONPath } from 'jsonpath-plus';
import Ellipsis from 'components/common/Ellipsis/Ellipsis'; import Ellipsis from 'components/common/Ellipsis/Ellipsis';
import WarningRedIcon from 'components/common/Icons/WarningRedIcon'; import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
import Tooltip from 'components/common/Tooltip/Tooltip';
import MessageContent from './MessageContent/MessageContent'; import MessageContent from './MessageContent/MessageContent';
import * as S from './MessageContent/MessageContent.styled'; import * as S from './MessageContent/MessageContent.styled';
@ -110,14 +111,26 @@ const Message: React.FC<Props> = ({
</td> </td>
<S.DataCell title={key}> <S.DataCell title={key}>
<Ellipsis text={renderFilteredJson(key, keyFilters)}> <Ellipsis text={renderFilteredJson(key, keyFilters)}>
{keySerde === 'Fallback' && <WarningRedIcon />} {keySerde === 'Fallback' && (
<Tooltip
value={<WarningRedIcon />}
content="Fallback serde was used"
placement="left"
/>
)}
</Ellipsis> </Ellipsis>
</S.DataCell> </S.DataCell>
<S.DataCell title={content}> <S.DataCell title={content}>
<S.Metadata> <S.Metadata>
<S.MetadataValue> <S.MetadataValue>
<Ellipsis text={renderFilteredJson(content, contentFilters)}> <Ellipsis text={renderFilteredJson(content, contentFilters)}>
{valueSerde === 'Fallback' && <WarningRedIcon />} {valueSerde === 'Fallback' && (
<Tooltip
value={<WarningRedIcon />}
content="Fallback serde was used"
placement="left"
/>
)}
</Ellipsis> </Ellipsis>
</S.MetadataValue> </S.MetadataValue>
</S.Metadata> </S.Metadata>