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

Bug/UI/tra 4473 grpc decoding error (#1025)

Browse Source 
* note added and formatting added

* showing message on ui instead of console error
This commit is contained in:
AmitUp9 2022-04-20 11:20:14 +03:00 committed by GitHub
parent de533730d3
commit e03db7b09b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-common/package.json
View File

@ -49,7 +49,7 @@
"moment": "^2.29.1", "moment": "^2.29.1",
"node-fetch": "^3.1.1", "node-fetch": "^3.1.1",
"numeral": "^2.0.6", "numeral": "^2.0.6",
"protobuf-decoder": "^0.1.0", "protobuf-decoder": "^0.1.2",
"react-graph-vis": "^1.0.7", "react-graph-vis": "^1.0.7",
"react-lowlight": "^3.0.0", "react-lowlight": "^3.0.0",
"react-router-dom": "^6.2.1", "react-router-dom": "^6.2.1",

149
ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx
View File

@ -1,13 +1,13 @@
import styles from "./EntrySections.module.sass"; import styles from "./EntrySections.module.sass";
import React, {useState} from "react"; import React, { useState } from "react";
import {SyntaxHighlighter} from "../../UI/SyntaxHighlighter/index"; import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
import CollapsibleContainer from "../../UI/CollapsibleContainer"; import CollapsibleContainer from "../../UI/CollapsibleContainer";
import FancyTextDisplay from "../../UI/FancyTextDisplay"; import FancyTextDisplay from "../../UI/FancyTextDisplay";
import Queryable from "../../UI/Queryable"; import Queryable from "../../UI/Queryable";
import Checkbox from "../../UI/Checkbox"; import Checkbox from "../../UI/Checkbox";
import ProtobufDecoder from "protobuf-decoder"; import ProtobufDecoder from "protobuf-decoder";
import {default as jsonBeautify} from "json-beautify"; import { default as jsonBeautify } from "json-beautify";
import {default as xmlBeautify} from "xml-formatter"; import { default as xmlBeautify } from "xml-formatter";
interface EntryViewLineProps { interface EntryViewLineProps {
label: string; label: string;
@ -18,40 +18,40 @@ interface EntryViewLineProps {
useTooltip?: boolean; useTooltip?: boolean;
} }
const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true}) => { const EntryViewLine: React.FC<EntryViewLineProps> = ({ label, value, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true }) => {
let query: string; let query: string;
if (!selector) { if (!selector) {
query = ""; query = "";
} else if (overrideQueryValue) { } else if (overrideQueryValue) {
query = `${selector} == ${overrideQueryValue}`; query = `${selector} == ${overrideQueryValue}`;
} else if (typeof(value) == "string") { } else if (typeof (value) == "string") {
query = `${selector} == "${JSON.stringify(value).slice(1, -1)}"`; query = `${selector} == "${JSON.stringify(value).slice(1, -1)}"`;
} else { } else {
query = `${selector} == ${value}`; query = `${selector} == ${value}`;
} }
return (label && <tr className={styles.dataLine}> return (label && <tr className={styles.dataLine}>
<td className={`${styles.dataKey}`}> <td className={`${styles.dataKey}`}>
<Queryable <Queryable
query={query} query={query}
style={{float: "right", height: "18px"}} style={{ float: "right", height: "18px" }}
iconStyle={{marginRight: "20px"}} iconStyle={{ marginRight: "20px" }}
flipped={true} flipped={true}
useTooltip={useTooltip} useTooltip={useTooltip}
displayIconOnMouseOver={displayIconOnMouseOver} displayIconOnMouseOver={displayIconOnMouseOver}
> >
{label} {label}
</Queryable> </Queryable>
</td> </td>
<td> <td>
<FancyTextDisplay <FancyTextDisplay
className={styles.dataValue} className={styles.dataValue}
text={value} text={value}
applyTextEllipsis={false} applyTextEllipsis={false}
flipped={true} flipped={true}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
/> />
</td> </td>
</tr>) || null; </tr>) || null;
} }
@ -63,11 +63,11 @@ interface EntrySectionCollapsibleTitleProps {
query?: string, query?: string,
} }
const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, expanded, setExpanded, query = ""}) => { const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({ title, color, expanded, setExpanded, query = "" }) => {
return <div className={styles.title}> return <div className={styles.title}>
<div <div
className={`${styles.button} ${expanded ? styles.expanded : ''}`} className={`${styles.button} ${expanded ? styles.expanded : ''}`}
style={{backgroundColor: color}} style={{ backgroundColor: color }}
onClick={() => { onClick={() => {
setExpanded(!expanded) setExpanded(!expanded)
}} }}
@ -90,12 +90,12 @@ interface EntrySectionContainerProps {
query?: string, query?: string,
} }
export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({title, color, children, query = ""}) => { export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({ title, color, children, query = "" }) => {
const [expanded, setExpanded] = useState(true); const [expanded, setExpanded] = useState(true);
return <CollapsibleContainer return <CollapsibleContainer
className={styles.collapsibleContainer} className={styles.collapsibleContainer}
expanded={expanded} expanded={expanded}
title={<EntrySectionCollapsibleTitle title={title} color={color} expanded={expanded} setExpanded={setExpanded} query={query}/>} title={<EntrySectionCollapsibleTitle title={title} color={color} expanded={expanded} setExpanded={setExpanded} query={query} />}
> >
{children} {children}
</CollapsibleContainer> </CollapsibleContainer>
@ -130,6 +130,7 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
const isBase64Encoding = encoding === 'base64'; const isBase64Encoding = encoding === 'base64';
const supportsPrettying = supportedFormats.some(format => contentType?.indexOf(format) > -1); const supportsPrettying = supportedFormats.some(format => contentType?.indexOf(format) > -1);
const [isDecodeGrpc, setIsDecodeGrpc] = useState(true);
const formatTextBody = (body: any): string => { const formatTextBody = (body: any): string => {
if (!decodeBase64) return body; if (!decodeBase64) return body;
@ -141,7 +142,7 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
if (jsonLikeFormats.some(format => contentType?.indexOf(format) > -1)) { if (jsonLikeFormats.some(format => contentType?.indexOf(format) > -1)) {
if (!isPretty) return bodyBuf; if (!isPretty) return bodyBuf;
return jsonBeautify(JSON.parse(bodyBuf), null, 2, 80); return jsonBeautify(JSON.parse(bodyBuf), null, 2, 80);
} else if (xmlLikeFormats.some(format => contentType?.indexOf(format) > -1)) { } else if (xmlLikeFormats.some(format => contentType?.indexOf(format) > -1)) {
if (!isPretty) return bodyBuf; if (!isPretty) return bodyBuf;
return xmlBeautify(bodyBuf, { return xmlBeautify(bodyBuf, {
indentation: ' ', indentation: ' ',
@ -157,49 +158,55 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
return jsonBeautify(protobufDecoded, null, 2, 80); return jsonBeautify(protobufDecoded, null, 2, 80);
} }
} catch (error) { } catch (error) {
console.error(error); if(isDecodeGrpc)
setIsDecodeGrpc(false);
if (!String(error).includes("More than one message in")){
console.error(error);
}
} }
return bodyBuf; return bodyBuf;
} }
return <React.Fragment> return <React.Fragment>
{content && content?.length > 0 && <EntrySectionContainer {content && content?.length > 0 && <EntrySectionContainer
title={title} title={title}
color={color} color={color}
query={`${selector} == r".*"`} query={`${selector} == r".*"`}
> >
<div style={{display: 'flex', alignItems: 'center', alignContent: 'center', margin: "5px 0"}}> <div style={{ display: 'flex', alignItems: 'center', alignContent: 'center', margin: "5px 0" }}>
{supportsPrettying && <div style={{paddingTop: 3}}> {supportsPrettying && <div style={{ paddingTop: 3 }}>
<Checkbox checked={isPretty} onToggle={() => {setIsPretty(!isPretty)}}/> <Checkbox checked={isPretty} onToggle={() => { setIsPretty(!isPretty) }} />
</div>} </div>}
{supportsPrettying && <span style={{marginLeft: '.2rem'}}>Pretty</span>} {supportsPrettying && <span style={{ marginLeft: '.2rem' }}>Pretty</span>}
<div style={{paddingTop: 3, paddingLeft: supportsPrettying ? 20 : 0}}> <div style={{ paddingTop: 3, paddingLeft: supportsPrettying ? 20 : 0 }}>
<Checkbox checked={showLineNumbers} onToggle={() => {setShowLineNumbers(!showLineNumbers)}}/> <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} />
</div> </div>
<span style={{marginLeft: '.2rem'}}>Line numbers</span> <span style={{ marginLeft: '.2rem' }}>Line numbers</span>
{isBase64Encoding && <div style={{ paddingTop: 3, paddingLeft: 20 }}>
{isBase64Encoding && <div style={{paddingTop: 3, paddingLeft: 20}}> <Checkbox checked={decodeBase64} onToggle={() => { setDecodeBase64(!decodeBase64) }} />
<Checkbox checked={decodeBase64} onToggle={() => {setDecodeBase64(!decodeBase64)}}/>
</div>} </div>}
{isBase64Encoding && <span style={{marginLeft: '.2rem'}}>Decode Base64</span>} {isBase64Encoding && <span style={{ marginLeft: '.2rem' }}>Decode Base64</span>}
</div> {!isDecodeGrpc && <span style={{ fontSize: '12px', color: '#DB2156', marginLeft: '.8rem' }}>More than one message in protobuf payload is not supported</span>}
</div>
<SyntaxHighlighter <SyntaxHighlighter
code={formatTextBody(content)} code={formatTextBody(content)}
showLineNumbers={showLineNumbers} showLineNumbers={showLineNumbers}
/> />
</EntrySectionContainer>} </EntrySectionContainer>}
</React.Fragment> </React.Fragment>
} }
interface EntrySectionProps { interface EntrySectionProps {
title: string, title: string,
color: string, color: string,
arrayToIterate: any[], arrayToIterate: any[],
} }
export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, arrayToIterate}) => { export const EntryTableSection: React.FC<EntrySectionProps> = ({ title, color, arrayToIterate }) => {
let arrayToIterateSorted: any[]; let arrayToIterateSorted: any[];
if (arrayToIterate) { if (arrayToIterate) {
arrayToIterateSorted = arrayToIterate.sort((a, b) => { arrayToIterateSorted = arrayToIterate.sort((a, b) => {
@ -220,7 +227,7 @@ export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, ar
<EntrySectionContainer title={title} color={color}> <EntrySectionContainer title={title} color={color}>
<table> <table>
<tbody id={`tbody-${title}`}> <tbody id={`tbody-${title}`}>
{arrayToIterateSorted.map(({name, value, selector}, index) => <EntryViewLine {arrayToIterateSorted.map(({ name, value, selector }, index) => <EntryViewLine
key={index} key={index}
label={name} label={name}
value={value} value={value}
@ -228,7 +235,7 @@ export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, ar
/>)} />)}
</tbody> </tbody>
</table> </table>
</EntrySectionContainer> : <span/> </EntrySectionContainer> : <span />
} }
</React.Fragment> </React.Fragment>
} }
@ -247,7 +254,7 @@ interface EntryPolicySectionCollapsibleTitleProps {
setExpanded: any; setExpanded: any;
} }
const EntryPolicySectionCollapsibleTitle: React.FC<EntryPolicySectionCollapsibleTitleProps> = ({label, matched, expanded, setExpanded}) => { const EntryPolicySectionCollapsibleTitle: React.FC<EntryPolicySectionCollapsibleTitleProps> = ({ label, matched, expanded, setExpanded }) => {
return <div className={styles.title}> return <div className={styles.title}>
<span <span
className={`${styles.button} className={`${styles.button}
@ -260,8 +267,8 @@ const EntryPolicySectionCollapsibleTitle: React.FC<EntryPolicySectionCollapsible
</span> </span>
<span> <span>
<tr className={styles.dataLine}> <tr className={styles.dataLine}>
<td className={`${styles.dataKey} ${styles.rulesTitleSuccess}`}>{label}</td> <td className={`${styles.dataKey} ${styles.rulesTitleSuccess}`}>{label}</td>
<td className={`${styles.dataKey} ${matched === 'Success' ? styles.rulesMatchedSuccess : styles.rulesMatchedFailure}`}>{matched}</td> <td className={`${styles.dataKey} ${matched === 'Success' ? styles.rulesMatchedSuccess : styles.rulesMatchedFailure}`}>{matched}</td>
</tr> </tr>
</span> </span>
</div> </div>
@ -273,28 +280,28 @@ interface EntryPolicySectionContainerProps {
children?: any; children?: any;
} }
export const EntryPolicySectionContainer: React.FC<EntryPolicySectionContainerProps> = ({label, matched, children}) => { export const EntryPolicySectionContainer: React.FC<EntryPolicySectionContainerProps> = ({ label, matched, children }) => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
return <CollapsibleContainer return <CollapsibleContainer
className={styles.collapsibleContainer} className={styles.collapsibleContainer}
expanded={expanded} expanded={expanded}
title={<EntryPolicySectionCollapsibleTitle label={label} matched={matched} expanded={expanded} setExpanded={setExpanded}/>} title={<EntryPolicySectionCollapsibleTitle label={label} matched={matched} expanded={expanded} setExpanded={setExpanded} />}
> >
{children} {children}
</CollapsibleContainer> </CollapsibleContainer>
} }
export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({title, color, latency, arrayToIterate}) => { export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({ title, color, latency, arrayToIterate }) => {
return <React.Fragment> return <React.Fragment>
{ {
arrayToIterate && arrayToIterate.length > 0 ? arrayToIterate && arrayToIterate.length > 0 ?
<React.Fragment> <React.Fragment>
<EntrySectionContainer title={title} color={color}> <EntrySectionContainer title={title} color={color}>
<table> <table>
<tbody> <tbody>
{arrayToIterate.map(({rule, matched}, index) => { {arrayToIterate.map(({ rule, matched }, index) => {
return ( return (
<EntryPolicySectionContainer key={index} label={rule.Name} matched={matched && (rule.Type === 'slo' ? rule.ResponseTime >= latency : true)? "Success" : "Failure"}> <EntryPolicySectionContainer key={index} label={rule.Name} matched={matched && (rule.Type === 'slo' ? rule.ResponseTime >= latency : true) ? "Success" : "Failure"}>
{ {
<React.Fragment> <React.Fragment>
{ {
@ -330,11 +337,11 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({titl
</EntryPolicySectionContainer> </EntryPolicySectionContainer>
) )
} }
) )
} }
</tbody> </tbody>
</table> </table>
</EntrySectionContainer> </EntrySectionContainer>
</React.Fragment> : <span className={styles.noRules}>No rules could be applied to this request.</span> </React.Fragment> : <span className={styles.noRules}>No rules could be applied to this request.</span>
} }
</React.Fragment> </React.Fragment>
@ -347,7 +354,7 @@ interface EntryContractSectionProps {
contractContent: string, contractContent: string,
} }
export const EntryContractSection: React.FC<EntryContractSectionProps> = ({color, requestReason, responseReason, contractContent}) => { export const EntryContractSection: React.FC<EntryContractSectionProps> = ({ color, requestReason, responseReason, contractContent }) => {
return <React.Fragment> return <React.Fragment>
{requestReason && <EntrySectionContainer title="Request" color={color}> {requestReason && <EntrySectionContainer title="Request" color={color}>
{requestReason} {requestReason}

1
ui/package.json
View File

@ -27,7 +27,6 @@
"node-fetch": "^3.1.1", "node-fetch": "^3.1.1",
"node-sass": "^6.0.0", "node-sass": "^6.0.0",
"numeral": "^2.0.6", "numeral": "^2.0.6",
"protobuf-decoder": "^0.1.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.3", "react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",