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