github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-19 13:03:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

TRA_4437- disable line numbers checkbox when only one line in content (#1109)

Browse Source 
* number of lines state added

* added useEffect to update to showLineNubers state dynamically

* small cr fixes
This commit is contained in:
AmitUp9 2022-05-24 15:07:40 +03:00 committed by GitHub
parent 3901f3f3fe
commit 11e8b5eb65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import styles from "./EntrySections.module.sass";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
import CollapsibleContainer from "../../UI/CollapsibleContainer";
import FancyTextDisplay from "../../UI/FancyTextDisplay";
@ -125,12 +125,18 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
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);
useEffect(() => {
(isLineNumbersGreaterThenOne && isPretty) && setShowLineNumbers(true);
!isLineNumbersGreaterThenOne && setShowLineNumbers(false);
}, [isLineNumbersGreaterThenOne, isPretty])
const formatTextBody = (body: any): string => {
if (!decodeBase64) return body;
@ -161,6 +167,8 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
if (String(error).includes("More than one message in")) {
if (isDecodeGrpc)
setIsDecodeGrpc(false);
} else if (String(error).includes("Failed to parse")) {
console.warn(error);
} else {
console.error(error);
}
@ -181,10 +189,11 @@ 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>
{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>}
@ -194,6 +203,7 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
<SyntaxHighlighter
code={formatTextBody(content)}
showLineNumbers={showLineNumbers}
setIsLineNumbersGreaterThenOne={setIsLineNumbersGreaterThenOne}
/>
</EntrySectionContainer>}

16
ui-common/src/components/UI/SyntaxHighlighter/index.tsx
View File

@ -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';
@ -27,19 +27,27 @@ interface Props {
code: string;
showLineNumbers?: boolean;
language?: string;
setIsLineNumbersGreaterThenOne?: (flag: boolean) => void;
}
export const SyntaxHighlighter: React.FC<Props> = ({
code,
showLineNumbers = false,
language = null
language = null,
setIsLineNumbersGreaterThenOne
}) => {
const markers = showLineNumbers ? code.split("\n").map((item, i) => {
const [markers, setMarkers] = useState([])
useEffect(() => {
const newMarkers = code.split("\n").map((item, i) => {
setIsLineNumbersGreaterThenOne(i > 1 ? true : false);
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>;
};