github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-21 18:17:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't use Queryable for the Mime type and Encoding fields but use it directly in CollapsibleTitle suffixed components and only enable it for EntryBodySection (#550)

Browse Source 
Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>
This commit is contained in:
M. Mert Yıldıran
2021-12-23 17:45:51 +03:00
committed by GitHub
parent 32dfe40e18
commit 03b1313a9f
2 changed files with 60 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,12 +10,14 @@ import ProtobufDecoder from "protobuf-decoder";
interface EntryViewLineProps { interface EntryViewLineProps {
label: string; label: string;
value: number | string; value: number | string;
updateQuery: any; updateQuery?: any;
selector: string; selector?: string;
overrideQueryValue?: string; overrideQueryValue?: string;
displayIconOnMouseOver?: boolean;
useTooltip?: boolean;
} }
const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery, selector, overrideQueryValue}) => { const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery = null, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true}) => {
let query: string; let query: string;
if (!selector) { if (!selector) {
query = ""; query = "";
@@ -34,7 +36,8 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
style={{float: "right", height: "18px"}} style={{float: "right", height: "18px"}}
iconStyle={{marginRight: "20px"}} iconStyle={{marginRight: "20px"}}
flipped={true} flipped={true}
displayIconOnMouseOver={true} useTooltip={useTooltip}
displayIconOnMouseOver={displayIconOnMouseOver}
> >
{label} {label}
</Queryable> </Queryable>
@@ -55,30 +58,47 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
interface EntrySectionCollapsibleTitleProps { interface EntrySectionCollapsibleTitleProps {
title: string, title: string,
color: string, color: string,
isExpanded: boolean, expanded: boolean,
setExpanded: any,
query?: string,
updateQuery?: any,
} }
const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, isExpanded}) => { const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, expanded, setExpanded, query = "", updateQuery = null}) => {
return <div className={styles.title}> return <div className={styles.title}>
<div className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}> <div
{isExpanded ? '-' : '+'} className={`${styles.button} ${expanded ? styles.expanded : ''}`}
style={{backgroundColor: color}}
onClick={() => {
setExpanded(!expanded)
}}
>
{expanded ? '-' : '+'}
</div> </div>
<span>{title}</span> <Queryable
query={query}
updateQuery={updateQuery}
useTooltip={updateQuery ? true : false}
displayIconOnMouseOver={updateQuery ? true : false}
>
<span>{title}</span>
</Queryable>
</div> </div>
} }
interface EntrySectionContainerProps { interface EntrySectionContainerProps {
title: string, title: string,
color: string, color: string,
query?: string,
updateQuery?: any,
} }
export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({title, color, children}) => { export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({title, color, children, query = "", updateQuery = null}) => {
const [expanded, setExpanded] = useState(true); const [expanded, setExpanded] = useState(true);
return <CollapsibleContainer return <CollapsibleContainer
className={styles.collapsibleContainer} className={styles.collapsibleContainer}
isExpanded={expanded} expanded={expanded}
onClick={() => setExpanded(!expanded)} title={<EntrySectionCollapsibleTitle title={title} color={color} expanded={expanded} setExpanded={setExpanded} query={query} updateQuery={updateQuery}/>}
title={<EntrySectionCollapsibleTitle title={title} color={color} isExpanded={expanded}/>}
> >
{children} {children}
</CollapsibleContainer> </CollapsibleContainer>
@@ -133,11 +153,16 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
} }
return <React.Fragment> return <React.Fragment>
{content && content?.length > 0 && <EntrySectionContainer title='Body' color={color}> {content && content?.length > 0 && <EntrySectionContainer
title='Body'
color={color}
query={`${selector} == r".*"`}
updateQuery={updateQuery}
>
<table> <table>
<tbody> <tbody>
<EntryViewLine label={'Mime type'} value={contentType} updateQuery={updateQuery} selector={selector} overrideQueryValue={`r".*"`}/> <EntryViewLine label={'Mime type'} value={contentType} useTooltip={false}/>
{encoding && <EntryViewLine label={'Encoding'} value={encoding} updateQuery={updateQuery} selector={selector} overrideQueryValue={`r".*"`}/>} {encoding && <EntryViewLine label={'Encoding'} value={encoding} useTooltip={false}/>}
</tbody> </tbody>
</table> </table>
@@ -195,13 +220,20 @@ interface EntryPolicySectionProps {
interface EntryPolicySectionCollapsibleTitleProps { interface EntryPolicySectionCollapsibleTitleProps {
label: string; label: string;
matched: string; matched: string;
isExpanded: boolean; expanded: boolean;
setExpanded: any;
} }
const EntryPolicySectionCollapsibleTitle: React.FC<EntryPolicySectionCollapsibleTitleProps> = ({label, matched, isExpanded}) => { const EntryPolicySectionCollapsibleTitle: React.FC<EntryPolicySectionCollapsibleTitleProps> = ({label, matched, expanded, setExpanded}) => {
return <div className={styles.title}> return <div className={styles.title}>
<span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`}> <span
{isExpanded ? '-' : '+'} className={`${styles.button}
${expanded ? styles.expanded : ''}`}
onClick={() => {
setExpanded(!expanded)
}}
>
{expanded ? '-' : '+'}
</span> </span>
<span> <span>
<tr className={styles.dataLine}> <tr className={styles.dataLine}>
@@ -222,9 +254,8 @@ export const EntryPolicySectionContainer: React.FC<EntryPolicySectionContainerPr
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
return <CollapsibleContainer return <CollapsibleContainer
className={styles.collapsibleContainer} className={styles.collapsibleContainer}
isExpanded={expanded} expanded={expanded}
onClick={() => setExpanded(!expanded)} title={<EntryPolicySectionCollapsibleTitle label={label} matched={matched} expanded={expanded} setExpanded={setExpanded}/>}
title={<EntryPolicySectionCollapsibleTitle label={label} matched={matched} isExpanded={expanded}/>}
> >
{children} {children}
</CollapsibleContainer> </CollapsibleContainer>

25
ui/src/components/UI/CollapsibleContainer.tsx
View File

@@ -1,38 +1,25 @@
import React, {useState} from "react"; import React from "react";
import collapsedImg from "../assets/collapsed.svg"; import collapsedImg from "../assets/collapsed.svg";
import expandedImg from "../assets/expanded.svg"; import expandedImg from "../assets/expanded.svg";
import "./style/CollapsibleContainer.sass"; import "./style/CollapsibleContainer.sass";
interface Props { interface Props {
title: string | React.ReactNode, title: string | React.ReactNode,
onClick?: (e: React.SyntheticEvent) => void, expanded: boolean,
isExpanded?: boolean,
titleClassName?: string, titleClassName?: string,
stickyHeader?: boolean,
className?: string, className?: string,
initialExpanded?: boolean; stickyHeader?: boolean,
passiveOnClick?: boolean; //whether specifying onClick overrides internal _isExpanded state handling
} }
const CollapsibleContainer: React.FC<Props> = ({title, children, isExpanded, onClick, titleClassName, stickyHeader = false, className, initialExpanded = true, passiveOnClick}) => { const CollapsibleContainer: React.FC<Props> = ({title, children, expanded, titleClassName, className, stickyHeader = false}) => {
const [_isExpanded, _setExpanded] = useState(initialExpanded);
let expanded = isExpanded !== undefined ? isExpanded : _isExpanded;
const classNames = `CollapsibleContainer ${expanded ? "CollapsibleContainer-Expanded" : "CollapsibleContainer-Collapsed"} ${className ? className : ''}`; const classNames = `CollapsibleContainer ${expanded ? "CollapsibleContainer-Expanded" : "CollapsibleContainer-Collapsed"} ${className ? className : ''}`;
// This is needed to achieve the sticky header feature. // This is needed to achieve the sticky header feature.
// It is needed an un-contained component for the css to work properly. // It is needed an un-contained component for the css to work properly.
const content = <React.Fragment> const content = <React.Fragment>
<div <div
className={`CollapsibleContainer-Header ${stickyHeader ? "CollapsibleContainer-Header-Sticky" : ""} className={`CollapsibleContainer-Header ${stickyHeader ? "CollapsibleContainer-Header-Sticky" : ""}
${expanded ? "CollapsibleContainer-Header-Expanded" : ""}`} ${expanded ? "CollapsibleContainer-Header-Expanded" : ""}`}
onClick={(e) => {
if (onClick) {
onClick(e)
if (passiveOnClick !== true)
return;
}
_setExpanded(!_isExpanded)
}}
> >
{ {
React.isValidElement(title)? React.isValidElement(title)?