From e03db7b09b392a0023c113aafed27fbc419564bb Mon Sep 17 00:00:00 2001 From: AmitUp9 <96980485+AmitUp9@users.noreply.github.com> Date: Wed, 20 Apr 2022 11:20:14 +0300 Subject: [PATCH] Bug/UI/tra 4473 grpc decoding error (#1025) * note added and formatting added * showing message on ui instead of console error --- ui-common/package.json | 2 +- .../EntryDetailed/EntrySections.tsx | 149 +++++++++--------- ui/package.json | 1 - 3 files changed, 79 insertions(+), 73 deletions(-) diff --git a/ui-common/package.json b/ui-common/package.json index 511f081d1..e8f00e77c 100644 --- a/ui-common/package.json +++ b/ui-common/package.json @@ -49,7 +49,7 @@ "moment": "^2.29.1", "node-fetch": "^3.1.1", "numeral": "^2.0.6", - "protobuf-decoder": "^0.1.0", + "protobuf-decoder": "^0.1.2", "react-graph-vis": "^1.0.7", "react-lowlight": "^3.0.0", "react-router-dom": "^6.2.1", diff --git a/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx b/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx index ac582dc88..02321c5e1 100644 --- a/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx +++ b/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx @@ -1,13 +1,13 @@ import styles from "./EntrySections.module.sass"; -import React, {useState} from "react"; -import {SyntaxHighlighter} from "../../UI/SyntaxHighlighter/index"; +import React, { useState } from "react"; +import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index"; import CollapsibleContainer from "../../UI/CollapsibleContainer"; import FancyTextDisplay from "../../UI/FancyTextDisplay"; import Queryable from "../../UI/Queryable"; import Checkbox from "../../UI/Checkbox"; import ProtobufDecoder from "protobuf-decoder"; -import {default as jsonBeautify} from "json-beautify"; -import {default as xmlBeautify} from "xml-formatter"; +import { default as jsonBeautify } from "json-beautify"; +import { default as xmlBeautify } from "xml-formatter"; interface EntryViewLineProps { label: string; @@ -18,40 +18,40 @@ interface EntryViewLineProps { useTooltip?: boolean; } -const EntryViewLine: React.FC = ({label, value, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true}) => { +const EntryViewLine: React.FC = ({ label, value, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true }) => { let query: string; if (!selector) { query = ""; } else if (overrideQueryValue) { query = `${selector} == ${overrideQueryValue}`; - } else if (typeof(value) == "string") { + } else if (typeof (value) == "string") { query = `${selector} == "${JSON.stringify(value).slice(1, -1)}"`; } else { query = `${selector} == ${value}`; } return (label && - - - {label} - - - - - - ) || null; + + + {label} + + + + + + ) || null; } @@ -63,11 +63,11 @@ interface EntrySectionCollapsibleTitleProps { query?: string, } -const EntrySectionCollapsibleTitle: React.FC = ({title, color, expanded, setExpanded, query = ""}) => { +const EntrySectionCollapsibleTitle: React.FC = ({ title, color, expanded, setExpanded, query = "" }) => { return
{ setExpanded(!expanded) }} @@ -90,12 +90,12 @@ interface EntrySectionContainerProps { query?: string, } -export const EntrySectionContainer: React.FC = ({title, color, children, query = ""}) => { +export const EntrySectionContainer: React.FC = ({ title, color, children, query = "" }) => { const [expanded, setExpanded] = useState(true); return } + title={} > {children} @@ -130,6 +130,7 @@ export const EntryBodySection: React.FC = ({ const isBase64Encoding = encoding === 'base64'; const supportsPrettying = supportedFormats.some(format => contentType?.indexOf(format) > -1); + const [isDecodeGrpc, setIsDecodeGrpc] = useState(true); const formatTextBody = (body: any): string => { if (!decodeBase64) return body; @@ -141,7 +142,7 @@ export const EntryBodySection: React.FC = ({ if (jsonLikeFormats.some(format => contentType?.indexOf(format) > -1)) { if (!isPretty) return bodyBuf; 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; return xmlBeautify(bodyBuf, { indentation: ' ', @@ -157,49 +158,55 @@ export const EntryBodySection: React.FC = ({ return jsonBeautify(protobufDecoded, null, 2, 80); } } catch (error) { - console.error(error); + if(isDecodeGrpc) + setIsDecodeGrpc(false); + if (!String(error).includes("More than one message in")){ + console.error(error); + } } return bodyBuf; } return {content && content?.length > 0 && -
- {supportsPrettying &&
- {setIsPretty(!isPretty)}}/> + title={title} + color={color} + query={`${selector} == r".*"`} + > +
+ {supportsPrettying &&
+ { setIsPretty(!isPretty) }} />
} - {supportsPrettying && Pretty} + {supportsPrettying && Pretty} -
- {setShowLineNumbers(!showLineNumbers)}}/> +
+ { setShowLineNumbers(!showLineNumbers) }} />
- Line numbers - - {isBase64Encoding &&
- {setDecodeBase64(!decodeBase64)}}/> + Line numbers + {isBase64Encoding &&
+ { setDecodeBase64(!decodeBase64) }} />
} - {isBase64Encoding && Decode Base64} -
+ {isBase64Encoding && Decode Base64} + {!isDecodeGrpc && More than one message in protobuf payload is not supported} +
- + } } + interface EntrySectionProps { title: string, color: string, arrayToIterate: any[], } -export const EntryTableSection: React.FC = ({title, color, arrayToIterate}) => { +export const EntryTableSection: React.FC = ({ title, color, arrayToIterate }) => { let arrayToIterateSorted: any[]; if (arrayToIterate) { arrayToIterateSorted = arrayToIterate.sort((a, b) => { @@ -220,7 +227,7 @@ export const EntryTableSection: React.FC = ({title, color, ar - {arrayToIterateSorted.map(({name, value, selector}, index) => = ({title, color, ar />)}
- : + : } } @@ -247,7 +254,7 @@ interface EntryPolicySectionCollapsibleTitleProps { setExpanded: any; } -const EntryPolicySectionCollapsibleTitle: React.FC = ({label, matched, expanded, setExpanded}) => { +const EntryPolicySectionCollapsibleTitle: React.FC = ({ label, matched, expanded, setExpanded }) => { return
- {label} - {matched} + {label} + {matched}
@@ -273,28 +280,28 @@ interface EntryPolicySectionContainerProps { children?: any; } -export const EntryPolicySectionContainer: React.FC = ({label, matched, children}) => { +export const EntryPolicySectionContainer: React.FC = ({ label, matched, children }) => { const [expanded, setExpanded] = useState(false); return } + title={} > {children} } -export const EntryTablePolicySection: React.FC = ({title, color, latency, arrayToIterate}) => { +export const EntryTablePolicySection: React.FC = ({ title, color, latency, arrayToIterate }) => { return { arrayToIterate && arrayToIterate.length > 0 ? - - - - {arrayToIterate.map(({rule, matched}, index) => { + +
+ + {arrayToIterate.map(({ rule, matched }, index) => { return ( - = latency : true)? "Success" : "Failure"}> + = latency : true) ? "Success" : "Failure"}> { { @@ -330,11 +337,11 @@ export const EntryTablePolicySection: React.FC = ({titl ) } - ) - } - -
- + ) + } + + + : No rules could be applied to this request. } @@ -347,7 +354,7 @@ interface EntryContractSectionProps { contractContent: string, } -export const EntryContractSection: React.FC = ({color, requestReason, responseReason, contractContent}) => { +export const EntryContractSection: React.FC = ({ color, requestReason, responseReason, contractContent }) => { return {requestReason && {requestReason} diff --git a/ui/package.json b/ui/package.json index 4d6e96dc2..096d2b5b8 100644 --- a/ui/package.json +++ b/ui/package.json @@ -27,7 +27,6 @@ "node-fetch": "^3.1.1", "node-sass": "^6.0.0", "numeral": "^2.0.6", - "protobuf-decoder": "^0.1.0", "react": "^17.0.2", "react-copy-to-clipboard": "^5.0.3", "react-dom": "^17.0.2",