github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-04 03:48:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Queryable component

Browse Source
This commit is contained in:
M. Mert Yildiran 2021-11-29 09:23:29 +03:00
parent 6f074029ac
commit 1d42c241a0
No known key found for this signature in database
GPG Key ID: D42ADB236521BF7A
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/EntryDetailed/EntrySections.tsx
View File

@ -33,7 +33,7 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
query={query}
updateQuery={updateQuery}
style={{float: "right"}}
className={`queryable ${styles.dataKey}`}
className={`${styles.dataKey}`}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>

18
ui/src/components/UI/Queryable.tsx
View File

@ -17,27 +17,27 @@ interface Props {
}
const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
const [showCopiedNotification, setCopied] = useState(false);
const [showAddedNotification, setAdded] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
text = String(text);
console.log(style);
const onCopy = () => {
setCopied(true)
setAdded(true)
};
useEffect(() => {
let timer;
if (showCopiedNotification) {
if (showAddedNotification) {
updateQuery(query);
timer = setTimeout(() => {
setCopied(false);
setAdded(false);
}, 1000);
}
return () => clearTimeout(timer);
// eslint-disable-next-line
}, [showCopiedNotification]);
}, [showAddedNotification]);
const textElement = <span className={'Queryable-Text'}>{text}</span>;
@ -47,11 +47,12 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
title={`Add "${query}" to the filter`}
>
<AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
{showCopiedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
{showAddedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
</span>
</CopyToClipboard> : null;
return <div
return (
<div
className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
style={style}
onMouseOver={ e => setShowTooltip(true)}
@ -60,7 +61,8 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
{textElement}
{copyButton}
{useTooltip && showTooltip && <span className={'Queryable-CopyNotifier'}>{text}</span>}
</div>;
</div>
);
};
export default Queryable;