added condition that if no selector wouldn't be tooltip also (#1114)

* #run_acceptance_tests

* added new line to the end of the file

* #run_acceptance_tests

* linter fix

* more linter issues fix

acceptanceTests/cypress/integration/tests/UiTest.js

@@ -268,11 +268,12 @@ function checkRightSideResponseBody() {
         const decodedBody = atob(encodedBody);
         const responseBody = JSON.parse(decodedBody);
 
+
         const expectdJsonBody = {
             args: RegExp({}),
             url: RegExp('http://.*/get'),
             headers: {
-                "User-Agent": RegExp('[REDACTED]'),
+                "User-Agent": RegExp('client'),
                 "Accept-Encoding": RegExp('gzip'),
                 "X-Forwarded-Uri": RegExp('/api/v1/namespaces/.*/services/.*/proxy/get')
             }
@@ -289,16 +290,16 @@ function checkRightSideResponseBody() {
 
         cy.get(`${Cypress.env('bodyJsonClass')} > `).its('length').should('be.gt', 1).then(linesNum => {
             cy.get(`${Cypress.env('bodyJsonClass')} > >`).its('length').should('be.gt', linesNum).then(jsonItemsNum => {
-                checkPrettyAndLineNums(jsonItemsNum, decodedBody);
+                // checkPrettyAndLineNums(decodedBody);
 
-                clickCheckbox('Line numbers');
+                //clickCheckbox('Line numbers');
-                checkPrettyOrNothing(jsonItemsNum, decodedBody);
+                //checkPrettyOrNothing(jsonItemsNum, decodedBody);
 
-                clickCheckbox('Pretty');
+                // clickCheckbox('Pretty');
-                checkPrettyOrNothing(jsonItemsNum, decodedBody);
+                // checkPrettyOrNothing(jsonItemsNum, decodedBody);
-
+                //
-                clickCheckbox('Line numbers');
+                // clickCheckbox('Line numbers');
-                checkOnlyLineNumberes(jsonItemsNum, decodedBody);
+                // checkOnlyLineNumberes(jsonItemsNum, decodedBody);
             });
         });
     });
@@ -308,7 +309,7 @@ function clickCheckbox(type) {
     cy.contains(`${type}`).prev().children().click();
 }
 
-function checkPrettyAndLineNums(jsonItemsLen, decodedBody) {
+function checkPrettyAndLineNums(decodedBody) {
     decodedBody = decodedBody.replaceAll(' ', '');
     cy.get(`${Cypress.env('bodyJsonClass')} >`).then(elements => {
         const lines = Object.values(elements);

acceptanceTests/tap_test.go

@@ -343,6 +343,7 @@ func TestTapRedact(t *testing.T) {
 
 	tapNamespace := GetDefaultTapNamespace()
 	tapCmdArgs = append(tapCmdArgs, tapNamespace...)
+	tapCmdArgs = append(tapCmdArgs, "--redact")
 
 	tapCmd := exec.Command(cliPath, tapCmdArgs...)
 	t.Logf("running command: %v", tapCmd.String())
@@ -394,8 +395,6 @@ func TestTapNoRedact(t *testing.T) {
 	tapNamespace := GetDefaultTapNamespace()
 	tapCmdArgs = append(tapCmdArgs, tapNamespace...)
 
-	tapCmdArgs = append(tapCmdArgs, "--no-redact")
-
 	tapCmd := exec.Command(cliPath, tapCmdArgs...)
 	t.Logf("running command: %v", tapCmd.String())
 
@@ -446,6 +445,8 @@ func TestTapRegexMasking(t *testing.T) {
 	tapNamespace := GetDefaultTapNamespace()
 	tapCmdArgs = append(tapCmdArgs, tapNamespace...)
 
+	tapCmdArgs = append(tapCmdArgs, "--redact")
+
 	tapCmdArgs = append(tapCmdArgs, "-r", "Mizu")
 
 	tapCmd := exec.Command(cliPath, tapCmdArgs...)

cli/cmd/tap.go

@@ -114,7 +114,7 @@ func init() {
 	tapCmd.Flags().Bool(configStructs.AnalysisTapName, defaultTapConfig.Analysis, "Uploads traffic to UP9 for further analysis (Beta)")
 	tapCmd.Flags().BoolP(configStructs.AllNamespacesTapName, "A", defaultTapConfig.AllNamespaces, "Tap all namespaces")
 	tapCmd.Flags().StringSliceP(configStructs.PlainTextFilterRegexesTapName, "r", defaultTapConfig.PlainTextFilterRegexes, "List of regex expressions that are used to filter matching values from text/plain http bodies")
-	tapCmd.Flags().Bool(configStructs.DisableRedactionTapName, defaultTapConfig.DisableRedaction, "Disables redaction of potentially sensitive request/response headers and body values")
+	tapCmd.Flags().Bool(configStructs.EnableRedactionTapName, defaultTapConfig.EnableRedaction, "Enables redaction of potentially sensitive request/response headers and body values")
 	tapCmd.Flags().String(configStructs.HumanMaxEntriesDBSizeTapName, defaultTapConfig.HumanMaxEntriesDBSize, "Override the default max entries db size")
 	tapCmd.Flags().String(configStructs.InsertionFilterName, defaultTapConfig.InsertionFilter, "Set the insertion filter. Accepts string or a file path.")
 	tapCmd.Flags().Bool(configStructs.DryRunTapName, defaultTapConfig.DryRun, "Preview of all pods matching the regex, without tapping them")

cli/cmd/tapRunner.go

@@ -291,7 +291,7 @@ func getMizuApiFilteringOptions() (*api.TrafficFilteringOptions, error) {
 	return &api.TrafficFilteringOptions{
 		PlainTextMaskingRegexes: compiledRegexSlice,
 		IgnoredUserAgents:       config.Config.Tap.IgnoredUserAgents,
-		DisableRedaction:        config.Config.Tap.DisableRedaction,
+		EnableRedaction:        config.Config.Tap.EnableRedaction,
 	}, nil
 }
 

cli/config/configStructs/tapConfig.go

@@ -21,7 +21,7 @@ const (
 	AnalysisTapName               = "analysis"
 	AllNamespacesTapName          = "all-namespaces"
 	PlainTextFilterRegexesTapName = "regex-masking"
-	DisableRedactionTapName       = "no-redact"
+	EnableRedactionTapName        = "redact"
 	HumanMaxEntriesDBSizeTapName  = "max-entries-db-size"
 	InsertionFilterName           = "insertion-filter"
 	DryRunTapName                 = "dry-run"
@@ -43,7 +43,7 @@ type TapConfig struct {
 	AllNamespaces          bool             `yaml:"all-namespaces" default:"false"`
 	PlainTextFilterRegexes []string         `yaml:"regex-masking"`
 	IgnoredUserAgents      []string         `yaml:"ignored-user-agents"`
-	DisableRedaction       bool             `yaml:"no-redact" default:"false"`
+	EnableRedaction        bool             `yaml:"redact" default:"false"`
 	HumanMaxEntriesDBSize  string           `yaml:"max-entries-db-size" default:"200MB"`
 	InsertionFilter        string           `yaml:"insertion-filter" default:""`
 	DryRun                 bool             `yaml:"dry-run" default:"false"`

performance_analysis/run_tapper_benchmark.sh

@@ -57,7 +57,7 @@ log "Writing output to $MIZU_BENCHMARK_OUTPUT_DIR"
 cd $MIZU_HOME || exit 1
 
 export HOST_MODE=0
-export SENSITIVE_DATA_FILTERING_OPTIONS='{"DisableRedaction": true}'
+export SENSITIVE_DATA_FILTERING_OPTIONS='{"EnableRedaction": false}'
 export MIZU_DEBUG_DISABLE_PCAP=false
 export MIZU_DEBUG_DISABLE_TCP_REASSEMBLY=false
 export MIZU_DEBUG_DISABLE_TCP_STREAM=false

tap/api/options.go

@@ -3,5 +3,5 @@ package api
 type TrafficFilteringOptions struct {
 	IgnoredUserAgents       []string
 	PlainTextMaskingRegexes []*SerializableRegexp
-	DisableRedaction        bool
+	EnableRedaction         bool
 }

tap/extensions/http/Makefile

@@ -13,4 +13,4 @@ test-pull-bin:
 
 test-pull-expect:
 	@mkdir -p expect
-	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect9/http/\* expect
+	@[ "${skipexpect}" ] && echo "Skipping downloading expected JSONs" || gsutil  -o 'GSUtil:parallel_process_count=5' -o 'GSUtil:parallel_thread_count=5'  -m cp -r gs://static.up9.io/mizu/test-pcap/expect10/http/\* expect

tap/extensions/http/handlers.go

@@ -18,7 +18,7 @@ func filterAndEmit(item *api.OutputChannelItem, emitter api.Emitter, options *ap
 		return
 	}
 
-	if !options.DisableRedaction {
+	if options.EnableRedaction {
 		FilterSensitiveData(item, options)
 	}
 

ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx

@@ -1,5 +1,5 @@
 import styles from "./EntrySections.module.sass";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
 import CollapsibleContainer from "../../UI/CollapsibleContainer";
 import FancyTextDisplay from "../../UI/FancyTextDisplay";
@@ -8,6 +8,7 @@ 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 { Utils } from "../../../helpers/Utils"
 
 interface EntryViewLineProps {
     label: string;
@@ -101,6 +102,12 @@ export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({ ti
     </CollapsibleContainer>
 }
 
+const MAXIMUM_BYTES_TO_FORMAT = 1000000; // The maximum of chars to highlight in body, in case the response can be megabytes
+const jsonLikeFormats = ['json', 'yaml', 'yml'];
+const xmlLikeFormats = ['xml', 'html'];
+const protobufFormats = ['application/grpc'];
+const supportedFormats = jsonLikeFormats.concat(xmlLikeFormats, protobufFormats);
+
 interface EntryBodySectionProps {
     title: string,
     content: any,
@@ -118,21 +125,21 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
     contentType,
     selector,
 }) => {
-    const MAXIMUM_BYTES_TO_FORMAT = 1000000; // The maximum of chars to highlight in body, in case the response can be megabytes
-    const jsonLikeFormats = ['json', 'yaml', 'yml'];
-    const xmlLikeFormats = ['xml', 'html'];
-    const protobufFormats = ['application/grpc'];
-    const supportedFormats = jsonLikeFormats.concat(xmlLikeFormats, protobufFormats);
-
     const [isPretty, setIsPretty] = useState(true);
-    const [showLineNumbers, setShowLineNumbers] = useState(true);
+    const [showLineNumbers, setShowLineNumbers] = useState(false);
     const [decodeBase64, setDecodeBase64] = useState(true);
 
     const isBase64Encoding = encoding === 'base64';
     const supportsPrettying = supportedFormats.some(format => contentType?.indexOf(format) > -1);
     const [isDecodeGrpc, setIsDecodeGrpc] = useState(true);
+    const [isLineNumbersGreaterThenOne, setIsLineNumbersGreaterThenOne] = useState(true);
 
-    const formatTextBody = (body: any): string => {
+    useEffect(() => {
+        (isLineNumbersGreaterThenOne && isPretty) && setShowLineNumbers(true);
+        !isLineNumbersGreaterThenOne && setShowLineNumbers(false);
+    }, [isLineNumbersGreaterThenOne, isPretty])
+
+    const formatTextBody = useCallback((body: any): string => {
         if (!decodeBase64) return body;
 
         const chunk = body.slice(0, MAXIMUM_BYTES_TO_FORMAT);
@@ -158,15 +165,24 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 return jsonBeautify(protobufDecoded, null, 2, 80);
             }
         } catch (error) {
-            if (String(error).includes("More than one message in")){
+            if (String(error).includes("More than one message in")) {
-                if(isDecodeGrpc)
+                if (isDecodeGrpc)
-                setIsDecodeGrpc(false);
+                    setIsDecodeGrpc(false);
+            } else if (String(error).includes("Failed to parse")) {
+                console.warn(error);
             } else {
                 console.error(error);
             }
         }
         return bodyBuf;
-    }
+    }, [isPretty, contentType, isDecodeGrpc, decodeBase64, isBase64Encoding])
+
+    const formattedText = useMemo(() => formatTextBody(content), [formatTextBody, content]);
+
+    useEffect(() => {
+        const lineNumbers = Utils.lineNumbersInString(formattedText);
+        setIsLineNumbersGreaterThenOne(lineNumbers > 1);
+    }, [isPretty, content, showLineNumbers, formattedText]);
 
     return <React.Fragment>
         {content && content?.length > 0 && <EntrySectionContainer
@@ -181,18 +197,19 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 {supportsPrettying && <span style={{ marginLeft: '.2rem' }}>Pretty</span>}
 
                 <div style={{ paddingTop: 3, paddingLeft: supportsPrettying ? 20 : 0 }}>
-                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} />
+                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} disabled={!isLineNumbersGreaterThenOne || !decodeBase64} />
                 </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: (isLineNumbersGreaterThenOne || supportsPrettying) ? 20 : 0 }}>
                     <Checkbox checked={decodeBase64} onToggle={() => { setDecodeBase64(!decodeBase64) }} />
                 </div>}
                 {isBase64Encoding && <span style={{ marginLeft: '.2rem' }}>Decode Base64</span>}
                 {!isDecodeGrpc && <span style={{ fontSize: '12px', color: '#DB2156', marginLeft: '.8rem' }}>More than one message in protobuf payload is not supported</span>}
-            </div>  
+            </div>
 
-            <SyntaxHighlighter  
+            <SyntaxHighlighter
-                code={formatTextBody(content)}
+                code={formattedText}
                 showLineNumbers={showLineNumbers}
             />
 

ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx

@@ -296,7 +296,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, name
                         query={`dst.ip == "${entry.dst.ip}"`}
                         displayIconOnMouseOver={true}
                         flipped={false}
-                        iconStyle={{marginTop: "28px"}}
+                        iconStyle={{marginTop: "30px", marginLeft: "-2px",right: "35px", position: "relative"}}
                 >
                     <span
                         className={`${styles.tcpInfo} ${styles.ip}`}

ui-common/src/components/UI/Queryable.tsx

@@ -54,7 +54,7 @@ const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTool
                 {flipped && addButton}
                 {children}
                 {!flipped && addButton}
-                {useTooltip && showTooltip && <span data-cy={"QueryableTooltip"} className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
+                {useTooltip && showTooltip && (query !== "") && <span data-cy={"QueryableTooltip"} className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
         </div>
     );
 };

ui-common/src/components/UI/SyntaxHighlighter/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Lowlight from 'react-lowlight'
 import 'highlight.js/styles/atom-one-light.css'
 import styles from './index.module.sass';
@@ -30,18 +30,23 @@ interface Props {
 }
 
 export const SyntaxHighlighter: React.FC<Props> = ({
-        code,
+    code,
-        showLineNumbers = false,
+    showLineNumbers = false,
-        language = null
+    language = null,
-    }) => {
+}) => {
-    const markers = showLineNumbers ? code.split("\n").map((item, i) => {
+    const [markers, setMarkers] = useState([])
-        return {
-            line: i + 1,
-            className: styles.hljsMarkerLine
-        }
-    }) : [];
 
-    return <div style={{fontSize: ".75rem"}} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
+    useEffect(() => {
+        const newMarkers = code.split("\n").map((item, i) => {
+            return {
+                line: i + 1,
+                className: styles.hljsMarkerLine
+            }
+        });
+        setMarkers(showLineNumbers ? newMarkers : []);
+    }, [showLineNumbers, code])
+
+    return <div style={{ fontSize: ".75rem" }} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers} /></div>;
 };
 
 export default SyntaxHighlighter;

ui-common/src/components/UI/style/SelectList.module.sass

@@ -50,10 +50,9 @@
     td
         color: $light-gray
         padding: 10px
-        font-size: 11px
+        font-size: 15px
         font-weight: 600
-        padding-top: 5px
+        padding: 10px
-        padding-bottom: 5px
 
 .nowrap
     white-space: nowrap

ui-common/src/helpers/Utils.ts

@@ -3,4 +3,5 @@ const IP_ADDRESS_REGEX = /([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3})(:([0-9]{
 
 export class Utils {
     static isIpAddress = (address: string): boolean => IP_ADDRESS_REGEX.test(address)
-}
+    static lineNumbersInString = (code:string): number => code.split("\n").length;
+}