github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-01 10:34:38 +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 {makeStyles} from "@material-ui/core";
import Protocol from "./UI/Protocol"
import Queryable from "./UI/Queryable";
const useStyles = makeStyles(() => ({
entryTitle: {
@ -41,24 +42,24 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
return <div className={classes.entryTitle}>
<Protocol protocol={protocol} horizontal={true} updateQuery={null}/>
<div style={{right: "30px", position: "absolute", display: "flex"}}>
{response && <div
className="queryable"
style={{margin: "0 18px", opacity: 0.5}}
onClick={() => {
updateQuery(`response.bodySize == ${bodySize}`)
}}
>
{formatSize(bodySize)}
</div>}
{response && <div
className="queryable"
style={{marginRight: 18, opacity: 0.5}}
onClick={() => {
updateQuery(`elapsedTime >= ${elapsedTime}`)
}}
>
{Math.round(elapsedTime)}ms
</div>}
{response && <Queryable
text={formatSize(bodySize)}
query={`response.bodySize == ${bodySize}`}
updateQuery={updateQuery}
textStyle={{opacity: 0.5}}
wrapperStyle={{margin: "0 18px"}}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>}
{response && <Queryable
text={`${Math.round(elapsedTime)}ms`}
query={`elapsedTime >= ${elapsedTime}`}
updateQuery={updateQuery}
textStyle={{opacity: 0.5}}
wrapperStyle={{marginRight: 18}}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>}
</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}
query={query}
updateQuery={updateQuery}
style={{float: "right"}}
wrapperStyle={{float: "right"}}
className={`${styles.dataKey}`}
applyTextEllipsis={false}
displayIconOnMouseOver={true}

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

@ -7,7 +7,8 @@ interface Props {
text: string | number,
query: string,
updateQuery: any,
style?: object,
textStyle?: object,
wrapperStyle?: object,
className?: string,
isPossibleToCopy?: boolean,
applyTextEllipsis?: boolean,
@ -16,13 +17,11 @@ interface Props {
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 [showTooltip, setShowTooltip] = useState(false);
text = String(text);
console.log(style);
const onCopy = () => {
setAdded(true)
};
@ -39,7 +38,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
// eslint-disable-next-line
}, [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}>
<span
@ -54,7 +53,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
return (
<div
className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
style={style}
style={wrapperStyle}
onMouseOver={ e => setShowTooltip(true)}
onMouseLeave={ e => setShowTooltip(false)}
>