github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-29 01:30:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Instead of passing the style to Queryable, pass the children components directly

Browse Source
This commit is contained in:
M. Mert Yildiran 2021-11-29 10:36:23 +03:00
parent fb11d566b1
commit 2ca16a0b81
No known key found for this signature in database
GPG Key ID: D42ADB236521BF7A
8 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,28 +38,36 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
const classes = useStyles();
const response = data.response;
const bodySizeChild = <div
style={{margin: "0 18px", opacity: 0.5}}
>
{formatSize(bodySize)}
</div>;
const elapsedTimeChild = <div
style={{marginRight: 18, opacity: 0.5}}
>
{Math.round(elapsedTime)}ms
</div>;
return <div className={classes.entryTitle}>
<Protocol protocol={protocol} horizontal={true} updateQuery={null}/>
<div style={{right: "30px", position: "absolute", display: "flex"}}>
{response && <Queryable
text={formatSize(bodySize)}
query={`response.bodySize == ${bodySize}`}
updateQuery={updateQuery}
textStyle={{opacity: 0.5}}
wrapperStyle={{margin: "0 18px"}}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>}
>
{bodySizeChild}
</Queryable>}
{response && <Queryable
text={`${Math.round(elapsedTime)}ms`}
query={`elapsedTime >= ${elapsedTime}`}
updateQuery={updateQuery}
textStyle={{opacity: 0.5}}
wrapperStyle={{marginRight: 18}}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>}
>
{elapsedTimeChild}
</Queryable>}
</div>
</div>;
};

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

@ -29,14 +29,12 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
return (label && value && <tr className={styles.dataLine}>
<td>
<Queryable
text={label}
query={query}
updateQuery={updateQuery}
wrapperStyle={{float: "right"}}
className={`${styles.dataKey}`}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>
>
<div className={`${styles.dataKey}`}>{label}</div>
</Queryable>
</td>
<td>
<FancyTextDisplay
@ -59,9 +57,9 @@ interface EntrySectionCollapsibleTitleProps {
const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, isExpanded}) => {
return <div className={styles.title}>
<span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}>
<div className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}>
{isExpanded ? '-' : '+'}
</span>
</div>
<span>{title}</span>
</div>
}

1
ui/src/components/EntryListItem/EntryListItem.module.sass
View File

@ -70,7 +70,6 @@
flex-direction: column
overflow: hidden
padding-right: 10px
padding-left: 10px
flex-grow: 1
.separatorRight

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

@ -4,24 +4,18 @@ import AddCircleIcon from '@material-ui/icons/AddCircle';
import './style/Queryable.sass';
interface Props {
text: string | number,
query: string,
updateQuery: any,
title?: string,
textStyle?: object,
wrapperStyle?: object,
style?: object,
className?: string,
isPossibleToCopy?: boolean,
applyTextEllipsis?: boolean,
useTooltip?: boolean,
displayIconOnMouseOver?: boolean,
onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
flipped?: boolean,
}
const Queryable: React.FC<Props> = ({text, query, updateQuery, title, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
const Queryable: React.FC<Props> = ({query, updateQuery, style, className, useTooltip= false, displayIconOnMouseOver = false, flipped = false, children}) => {
const [showAddedNotification, setAdded] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
text = String(text);
const onCopy = () => {
setAdded(true)
@ -39,28 +33,27 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, title, textStyle,
// eslint-disable-next-line
}, [showAddedNotification]);
const textElement = <span title={title} className={'Queryable-Text'} style={textStyle}>{text}</span>;
const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}>
const addButton = query ? <CopyToClipboard text={query} onCopy={onCopy}>
<span
className={`Queryable-Icon`}
title={`Add "${query}" to the filter`}
>
<AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
{showAddedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
{showAddedNotification && <span className={'Queryable-AddNotifier'}>Added</span>}
</span>
</CopyToClipboard> : null;
return (
<div
className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
style={wrapperStyle}
className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''}`}
style={style}
onMouseOver={ e => setShowTooltip(true)}
onMouseLeave={ e => setShowTooltip(false)}
>
{textElement}
{copyButton}
{useTooltip && showTooltip && <span className={'Queryable-CopyNotifier'}>{text}</span>}
{flipped && addButton}
{children}
{!flipped && addButton}
{useTooltip && showTooltip && <span className={'Queryable-AddNotifier'}></span>}
</div>
);
};

17
ui/src/components/UI/StatusCode.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import styles from './style/StatusCode.module.sass';
import Queryable from "./Queryable";
export enum StatusCodeClassification {
SUCCESS = "success",
@ -16,15 +17,21 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
const classification = getClassification(statusCode)
return <span
const child = <span
title="Status Code"
className={`queryable ${styles[classification]} ${styles.base}`}
onClick={() => {
updateQuery(`response.status == ${statusCode}`)
}}
className={`${styles[classification]} ${styles.base}`}
>
{statusCode}
</span>
return <Queryable
query={`response.status == ${statusCode}`}
updateQuery={updateQuery}
style={{minWidth: "68px"}}
displayIconOnMouseOver={true}
>
{child}
</Queryable>
};
export function getClassification(statusCode: number): string {

32
ui/src/components/UI/Summary.tsx
View File

@ -10,25 +10,35 @@ interface SummaryProps {
}
export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery}) => {
const methodChild = <span
className={`queryable`}
>
{method}
</span>
const summaryChild = <div
className={`queryable ${styles.summary}`}
>
{summary}
</div>
return <div className={styles.container}>
{method && <Queryable
text={method}
query={`method == "${method}"`}
updateQuery={updateQuery}
title="Method"
className={`${miscStyles.protocol} ${miscStyles.method}`}
wrapperStyle={{height: "14px"}}
applyTextEllipsis={false}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
/>}
>
{methodChild}
</Queryable>}
{summary && <Queryable
text={summary}
query={`summary == "${summary}"`}
updateQuery={updateQuery}
title="Summary"
className={`${styles.summary}`}
applyTextEllipsis={false}
displayIconOnMouseOver={true}
/>}
>
{summaryChild}
</Queryable>}
</div>
};

10
ui/src/components/UI/style/Queryable.sass
View File

@ -25,15 +25,7 @@
border-radius: 4px
color: #1E884B
&.Queryable-ContainerEllipsis
.Queryable-Text
text-align: left
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
width: calc(100% - 30px)
.Queryable-CopyNotifier
.Queryable-AddNotifier
background-color: #1E884B
font-weight: normal
padding: 2px 5px

1
ui/src/components/UI/style/misc.module.sass
View File

@ -11,6 +11,7 @@
&.method
margin-right: 10px
height: 14px
&.filterPlate
border-color: #bcc6dd20