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

Use the Queryable component EntryDetailed

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

37
ui/src/components/EntryDetailed.tsx
View File

@ -3,6 +3,7 @@ import EntryViewer from "./EntryDetailed/EntryViewer";
import {EntryItem} from "./EntryListItem/EntryListItem"; import {EntryItem} from "./EntryListItem/EntryListItem";
import {makeStyles} from "@material-ui/core"; import {makeStyles} from "@material-ui/core";
import Protocol from "./UI/Protocol" import Protocol from "./UI/Protocol"
import Queryable from "./UI/Queryable";
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
entryTitle: { entryTitle: {
@ -41,24 +42,24 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
return <div className={classes.entryTitle}> return <div className={classes.entryTitle}>
<Protocol protocol={protocol} horizontal={true} updateQuery={null}/> <Protocol protocol={protocol} horizontal={true} updateQuery={null}/>
<div style={{right: "30px", position: "absolute", display: "flex"}}> <div style={{right: "30px", position: "absolute", display: "flex"}}>
{response && <div {response && <Queryable
className="queryable" text={formatSize(bodySize)}
style={{margin: "0 18px", opacity: 0.5}} query={`response.bodySize == ${bodySize}`}
onClick={() => { updateQuery={updateQuery}
updateQuery(`response.bodySize == ${bodySize}`) textStyle={{opacity: 0.5}}
}} wrapperStyle={{margin: "0 18px"}}
> applyTextEllipsis={false}
{formatSize(bodySize)} displayIconOnMouseOver={true}
</div>} />}
{response && <div {response && <Queryable
className="queryable" text={`${Math.round(elapsedTime)}ms`}
style={{marginRight: 18, opacity: 0.5}} query={`elapsedTime >= ${elapsedTime}`}
onClick={() => { updateQuery={updateQuery}
updateQuery(`elapsedTime >= ${elapsedTime}`) textStyle={{opacity: 0.5}}
}} wrapperStyle={{marginRight: 18}}
> applyTextEllipsis={false}
{Math.round(elapsedTime)}ms displayIconOnMouseOver={true}
</div>} />}
</div> </div>
</div>; </div>;
}; };

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

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

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

@ -7,7 +7,8 @@ interface Props {
text: string | number, text: string | number,
query: string, query: string,
updateQuery: any, updateQuery: any,
style?: object, textStyle?: object,
wrapperStyle?: object,
className?: string, className?: string,
isPossibleToCopy?: boolean, isPossibleToCopy?: boolean,
applyTextEllipsis?: boolean, applyTextEllipsis?: boolean,
@ -16,13 +17,11 @@ interface Props {
onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>; onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
} }
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, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
const [showAddedNotification, setAdded] = 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);
const onCopy = () => { const onCopy = () => {
setAdded(true) setAdded(true)
}; };
@ -39,7 +38,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
// eslint-disable-next-line // eslint-disable-next-line
}, [showAddedNotification]); }, [showAddedNotification]);
const textElement = <span className={'Queryable-Text'}>{text}</span>; const textElement = <span className={'Queryable-Text'} style={textStyle}>{text}</span>;
const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}> const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}>
<span <span
@ -54,7 +53,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
return ( return (
<div <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={wrapperStyle}
onMouseOver={ e => setShowTooltip(true)} onMouseOver={ e => setShowTooltip(true)}
onMouseLeave={ e => setShowTooltip(false)} onMouseLeave={ e => setShowTooltip(false)}
> >