github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-30 16:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the protocol color affect the details layout color and write protocol abbreviation vertically

Browse Source
This commit is contained in:
M. Mert Yildiran 2021-08-21 09:06:53 +03:00
parent c5969c267e
commit d20cc1412b
No known key found for this signature in database
GPG Key ID: D42ADB236521BF7A
10 changed files with 54 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tap/extensions/amqp/main.go
View File

@ -13,7 +13,7 @@ var protocol api.Protocol = api.Protocol{
Abbreviation: "AMQP",
BackgroundColor: "#ff6600",
ForegroundColor: "#ffffff",
FontSize: 10,
FontSize: 12,
ReferenceLink: "https://www.rabbitmq.com/amqp-0-9-1-reference.html",
OutboundPorts: []string{"5671", "5672"},
InboundPorts: []string{},

6
tap/extensions/http/main.go
View File

@ -21,7 +21,7 @@ var protocol api.Protocol = api.Protocol{
Abbreviation: "HTTP",
BackgroundColor: "#205cf5",
ForegroundColor: "#ffffff",
FontSize: 10,
FontSize: 12,
ReferenceLink: "https://datatracker.ietf.org/doc/html/rfc2616",
OutboundPorts: []string{"80", "8080", "443"},
InboundPorts: []string{},
@ -29,11 +29,11 @@ var protocol api.Protocol = api.Protocol{
var http2Protocol api.Protocol = api.Protocol{
Name: "http",
LongName: "Hypertext Transfer Protocol Version 2 (HTTP/2)",
LongName: "Hypertext Transfer Protocol Version 2 (HTTP/2) (gRPC)",
Abbreviation: "HTTP/2",
BackgroundColor: "#244c5a",
ForegroundColor: "#ffffff",
FontSize: 10,
FontSize: 12,
ReferenceLink: "https://datatracker.ietf.org/doc/html/rfc7540",
OutboundPorts: []string{"80", "8080", "443"},
InboundPorts: []string{},

2
tap/extensions/kafka/main.go
View File

@ -13,7 +13,7 @@ var protocol api.Protocol = api.Protocol{
Abbreviation: "KAFKA",
BackgroundColor: "#000000",
ForegroundColor: "#ffffff",
FontSize: 10,
FontSize: 12,
ReferenceLink: "https://kafka.apache.org/protocol",
OutboundPorts: []string{"9092"},
InboundPorts: []string{},

4
ui/src/components/HarEntry.tsx
View File

@ -89,9 +89,9 @@ export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isS
<div className={styles.directionContainer}>
<span className={styles.port} title="Source Port">{entry.source_port}</span>
{entry.isOutgoing ?
<img src={outgoingIcon} alt="Outgoing traffic" title="Outgoing"/>
<img src={outgoingIcon} alt="Ingoing traffic" title="Ingoing"/>
:
<img src={ingoingIcon} alt="Ingoing traffic" title="Ingoing"/>
<img src={ingoingIcon} alt="Outgoing traffic" title="Outgoing"/>
}
<span className={styles.port} title="Destination Port">{entry.destination_port}</span>
</div>

2
ui/src/components/HarEntryDetailed.tsx
View File

@ -77,7 +77,7 @@ export const HAREntryDetailed: React.FC<HarEntryDetailedProps> = ({classes, harE
<HarEntryTitle protocol={harEntry.protocol} har={har}/>
{har && <HarEntrySummary har={har}/>}
<>
{har && <HAREntryViewer representation={harEntry.representation}/>}
{har && <HAREntryViewer representation={harEntry.representation} color={harEntry.protocol.background_color}/>}
</>
</>
};

44
ui/src/components/HarEntryViewer/HAREntrySections.tsx
View File

@ -29,13 +29,14 @@ const HAREntryViewLine: React.FC<HAREntryViewLineProps> = ({label, value}) => {
interface HAREntrySectionCollapsibleTitleProps {
title: string;
isExpanded: boolean;
title: string,
color: string,
isExpanded: boolean,
}
const HAREntrySectionCollapsibleTitle: React.FC<HAREntrySectionCollapsibleTitleProps> = ({title, isExpanded}) => {
const HAREntrySectionCollapsibleTitle: React.FC<HAREntrySectionCollapsibleTitleProps> = ({title, color, isExpanded}) => {
return <div className={styles.title}>
<span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`}>
<span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}>
{isExpanded ? '-' : '+'}
</span>
<span>{title}</span>
@ -43,32 +44,35 @@ const HAREntrySectionCollapsibleTitle: React.FC<HAREntrySectionCollapsibleTitleP
}
interface HAREntrySectionContainerProps {
title: string;
title: string,
color: string,
}
export const HAREntrySectionContainer: React.FC<HAREntrySectionContainerProps> = ({title, children}) => {
export const HAREntrySectionContainer: React.FC<HAREntrySectionContainerProps> = ({title, color, children}) => {
const [expanded, setExpanded] = useState(true);
return <CollapsibleContainer
className={styles.collapsibleContainer}
isExpanded={expanded}
onClick={() => setExpanded(!expanded)}
title={<HAREntrySectionCollapsibleTitle title={title} isExpanded={expanded}/>}
title={<HAREntrySectionCollapsibleTitle title={title} color={color} isExpanded={expanded}/>}
>
{children}
</CollapsibleContainer>
}
interface HAREntryBodySectionProps {
content: any;
encoding?: string;
contentType?: string;
content: any,
color: string,
encoding?: string,
contentType?: string,
}
export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
content,
encoding,
contentType,
}) => {
color,
content,
encoding,
contentType,
}) => {
const MAXIMUM_BYTES_TO_HIGHLIGHT = 10000; // The maximum of chars to highlight in body, in case the response can be megabytes
const supportedLanguages = [['html', 'html'], ['json', 'json'], ['application/grpc', 'json']]; // [[indicator, languageToUse],...]
const jsonLikeFormats = ['json'];
@ -101,7 +105,7 @@ export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
}
return <React.Fragment>
{content && content?.length > 0 && <HAREntrySectionContainer title='Body'>
{content && content?.length > 0 && <HAREntrySectionContainer title='Body' color={color}>
<table>
<tbody>
<HAREntryViewLine label={'Mime type'} value={contentType}/>
@ -127,14 +131,15 @@ export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
interface HAREntrySectionProps {
title: string,
color: string,
arrayToIterate: any[],
}
export const HAREntryTableSection: React.FC<HAREntrySectionProps> = ({title, arrayToIterate}) => {
export const HAREntryTableSection: React.FC<HAREntrySectionProps> = ({title, color, arrayToIterate}) => {
return <React.Fragment>
{
arrayToIterate && arrayToIterate.length > 0 ?
<HAREntrySectionContainer title={title}>
<HAREntrySectionContainer title={title} color={color}>
<table>
<tbody>
{arrayToIterate.map(({name, value}, index) => <HAREntryViewLine key={index} label={name}
@ -151,6 +156,7 @@ export const HAREntryTableSection: React.FC<HAREntrySectionProps> = ({title, arr
interface HAREntryPolicySectionProps {
service: string,
title: string,
color: string,
response: any,
latency?: number,
arrayToIterate: any[],
@ -195,13 +201,13 @@ export const HAREntryPolicySectionContainer: React.FC<HAREntryPolicySectionConta
</CollapsibleContainer>
}
export const HAREntryTablePolicySection: React.FC<HAREntryPolicySectionProps> = ({service, title, response, latency, arrayToIterate}) => {
export const HAREntryTablePolicySection: React.FC<HAREntryPolicySectionProps> = ({service, title, color, response, latency, arrayToIterate}) => {
const base64ToJson = response.content.mimeType === "application/json; charset=utf-8" ? JSON.parse(Buffer.from(response.content.text, "base64").toString()) : {};
return <React.Fragment>
{
arrayToIterate && arrayToIterate.length > 0 ?
<>
<HAREntrySectionContainer title={title}>
<HAREntrySectionContainer title={title} color={color}>
<table>
<tbody>
{arrayToIterate.map(({rule, matched}, index) => {

22
ui/src/components/HarEntryViewer/HAREntryViewer.tsx
View File

@ -3,19 +3,19 @@ import styles from './HAREntryViewer.module.sass';
import Tabs from "../Tabs";
import {HAREntryTableSection, HAREntryBodySection, HAREntryTablePolicySection} from "./HAREntrySections";
const SectionsRepresentation: React.FC<any> = ({data}) => {
const SectionsRepresentation: React.FC<any> = ({data, color}) => {
const sections = []
for (const [i, row] of data.entries()) {
switch (row.type) {
case "table":
sections.push(
<HAREntryTableSection title={row.title} arrayToIterate={JSON.parse(row.data)}/>
<HAREntryTableSection title={row.title} color={color} arrayToIterate={JSON.parse(row.data)}/>
)
break;
case "body":
sections.push(
<HAREntryBodySection content={row.data} encoding={row.encoding} contentType={row.mime_type}/>
<HAREntryBodySection color={color} content={row.data} encoding={row.encoding} contentType={row.mime_type}/>
)
break;
default:
@ -26,8 +26,7 @@ const SectionsRepresentation: React.FC<any> = ({data}) => {
return <>{sections}</>;
}
const AutoRepresentation: React.FC<any> = ({representation, isResponseMocked}) => {
console.log(representation)
const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMocked}) => {
const {request, response} = JSON.parse(representation);
const rulesMatched = []
@ -47,18 +46,18 @@ const AutoRepresentation: React.FC<any> = ({representation, isResponseMocked}) =
return <div className={styles.harEntry}>
{<div className={styles.body}>
<div className={styles.bodyHeader}>
<Tabs tabs={TABS} currentTab={currentTab} onChange={setCurrentTab} leftAligned/>
<Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
{request?.url && <a className={styles.endpointURL} href={request.payload.url} target='_blank' rel="noreferrer">{request.payload.url}</a>}
</div>
{currentTab === TABS[0].tab && <React.Fragment>
<SectionsRepresentation data={request}/>
<SectionsRepresentation data={request} color={color}/>
</React.Fragment>}
{currentTab === TABS[1].tab && <React.Fragment>
<SectionsRepresentation data={response}/>
<SectionsRepresentation data={response} color={color}/>
</React.Fragment>}
{currentTab === TABS[2].tab && <React.Fragment>
{// FIXME: Fix here
<HAREntryTablePolicySection service={representation.log.entries[0].service} title={'Rule'} latency={0} response={response} arrayToIterate={rulesMatched ? rulesMatched : []}/>}
<HAREntryTablePolicySection service={representation.log.entries[0].service} title={'Rule'} color={color} latency={0} response={response} arrayToIterate={rulesMatched ? rulesMatched : []}/>}
</React.Fragment>}
</div>}
</div>;
@ -66,12 +65,13 @@ const AutoRepresentation: React.FC<any> = ({representation, isResponseMocked}) =
interface Props {
representation: any;
color: string,
isResponseMocked?: boolean;
showTitle?: boolean;
}
const HAREntryViewer: React.FC<Props> = ({representation, isResponseMocked, showTitle=true}) => {
return <AutoRepresentation representation={representation} isResponseMocked={isResponseMocked} showTitle={showTitle}/>
const HAREntryViewer: React.FC<Props> = ({representation, color, isResponseMocked, showTitle=true}) => {
return <AutoRepresentation representation={representation} color={color} isResponseMocked={isResponseMocked} showTitle={showTitle}/>
};
export default HAREntryViewer;

2
ui/src/components/Protocol.tsx
View File

@ -26,7 +26,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
style={{
backgroundColor: protocol.background_color,
color: protocol.foreground_color,
fontSize: protocol.font_size * 1.3,
fontSize: protocol.font_size * 1.1,
}}
title={protocol.abbreviation}
>

8
ui/src/components/Tabs.tsx
View File

@ -16,6 +16,7 @@ interface Props {
classes?: any,
tabs: Tab[],
currentTab: string,
color: string,
onChange: (string) => void,
leftAligned?: boolean,
dark?: boolean,
@ -28,7 +29,7 @@ const useTabsStyles = makeStyles((theme) => ({
paddingTop: 15
},
tab: {
tab: {
display: 'inline-block',
textTransform: 'uppercase',
color: variables.blueColor,
@ -71,7 +72,7 @@ const useTabsStyles = makeStyles((theme) => ({
}));
const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAligned, dark}) => {
const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, color, onChange, leftAligned, dark}) => {
const _classes = {...useTabsStyles(), ...classes};
return <div className={`${_classes.root} ${leftAligned ? _classes.tabsAlignLeft : ''}`}>
{tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
@ -80,6 +81,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
key={tab}
className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`}
onClick={() => !disabled && onChange(tab)}
style={{color: color}}
>
{tab}
@ -94,4 +96,4 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
</div>;
}
export default Tabs;
export default Tabs;

8
ui/src/components/style/Protocol.module.sass
View File

@ -5,7 +5,6 @@
text-align: center
font-size: 10px
font-weight: 600
// letter-spacing: 2px;
background-color: #000
color: #fff
margin-left: -8px;
@ -13,12 +12,13 @@
.vertical
line-height: 22px
letter-spacing: 0.5px;
width: 22px
height: 48px
border-radius: 4px 0 0 4px
border-radius: 0px 4px 4px 0
writing-mode: vertical-lr;
// transform: rotate(-180deg);
text-orientation: upright;
transform: rotate(-180deg);
text-orientation: mixed;
.horizontal
border-radius: 4px