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

Use the Queryable component Summary

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

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

@ -7,6 +7,7 @@ interface Props {
text: string | number, text: string | number,
query: string, query: string,
updateQuery: any, updateQuery: any,
title?: string,
textStyle?: object, textStyle?: object,
wrapperStyle?: object, wrapperStyle?: object,
className?: string, className?: string,
@ -17,7 +18,7 @@ interface Props {
onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>; onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
} }
const Queryable: React.FC<Props> = ({text, query, updateQuery, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => { const Queryable: React.FC<Props> = ({text, query, updateQuery, title, 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);
@ -38,7 +39,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, textStyle, wrappe
// eslint-disable-next-line // eslint-disable-next-line
}, [showAddedNotification]); }, [showAddedNotification]);
const textElement = <span className={'Queryable-Text'} style={textStyle}>{text}</span>; const textElement = <span title={title} 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

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

@ -1,6 +1,7 @@
import miscStyles from "./style/misc.module.sass"; import miscStyles from "./style/misc.module.sass";
import React from "react"; import React from "react";
import styles from './style/Summary.module.sass'; import styles from './style/Summary.module.sass';
import Queryable from "./Queryable";
interface SummaryProps { interface SummaryProps {
method: string method: string
@ -10,23 +11,24 @@ interface SummaryProps {
export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery}) => { export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery}) => {
return <div className={styles.container}> return <div className={styles.container}>
{method && <span {method && <Queryable
text={method}
query={`method == "${method}"`}
updateQuery={updateQuery}
title="Method" title="Method"
className={`queryable ${miscStyles.protocol} ${miscStyles.method}`} className={`${miscStyles.protocol} ${miscStyles.method}`}
onClick={() => { wrapperStyle={{height: "14px"}}
updateQuery(`method == "${method}"`) applyTextEllipsis={false}
}} displayIconOnMouseOver={true}
> />}
{method} {summary && <Queryable
</span>} text={summary}
{summary && <div query={`summary == "${summary}"`}
updateQuery={updateQuery}
title="Summary" title="Summary"
className={`queryable ${styles.summary}`} className={`${styles.summary}`}
onClick={() => { applyTextEllipsis={false}
updateQuery(`summary == "${summary}"`) displayIconOnMouseOver={true}
}} />}
>
{summary}
</div>}
</div> </div>
}; };

2
ui/src/components/UI/style/Summary.module.sass
View File

@ -3,6 +3,4 @@
align-items: center align-items: center
.summary .summary
text-overflow: ellipsis
overflow: hidden
white-space: nowrap white-space: nowrap