fix: text wrap in log details view, remove json/raw tag (#5231)

This commit is contained in:
Yunus M 2024-06-15 13:07:26 +05:30 committed by GitHub
parent a788230e70
commit e6ee5fc9e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 8 deletions

View File

@ -10,7 +10,7 @@ import { JSONViewProps } from './LogDetailedView.types';
import { aggregateAttributesResourcesToString } from './utils'; import { aggregateAttributesResourcesToString } from './utils';
function JSONView({ logData }: JSONViewProps): JSX.Element { function JSONView({ logData }: JSONViewProps): JSX.Element {
const [isWrapWord, setIsWrapWord] = useState<boolean>(false); const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
const LogJsonData = useMemo( const LogJsonData = useMemo(
() => aggregateAttributesResourcesToString(logData), () => aggregateAttributesResourcesToString(logData),
@ -22,7 +22,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
const options: EditorProps['options'] = { const options: EditorProps['options'] = {
automaticLayout: true, automaticLayout: true,
readOnly: true, readOnly: true,
wordWrap: 'on', wordWrap: isWrapWord ? 'on' : 'off',
minimap: { minimap: {
enabled: false, enabled: false,
}, },
@ -68,7 +68,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
return ( return (
<div className="json-view-container"> <div className="json-view-container">
<MEditor <MEditor
value={isWrapWord ? JSON.stringify(LogJsonData) : LogJsonData} value={LogJsonData}
language="json" language="json"
options={options} options={options}
onChange={(): void => {}} onChange={(): void => {}}

View File

@ -35,7 +35,7 @@ function Overview({
onClickActionItem, onClickActionItem,
isListViewPanel = false, isListViewPanel = false,
}: Props): JSX.Element { }: Props): JSX.Element {
const [isWrapWord, setIsWrapWord] = useState<boolean>(false); const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false); const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>( const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
true, true,
@ -48,7 +48,7 @@ function Overview({
automaticLayout: true, automaticLayout: true,
readOnly: true, readOnly: true,
height: '40vh', height: '40vh',
wordWrap: 'on', wordWrap: isWrapWord ? 'on' : 'off',
minimap: { minimap: {
enabled: false, enabled: false,
}, },
@ -118,8 +118,8 @@ function Overview({
children: ( children: (
<div className="logs-body-content"> <div className="logs-body-content">
<MEditor <MEditor
value={isWrapWord ? JSON.stringify(logData.body) : logData.body} value={logData.body}
language={isWrapWord ? 'placetext' : 'json'} language="json"
options={options} options={options}
onChange={(): void => {}} onChange={(): void => {}}
height="20vh" height="20vh"
@ -143,7 +143,7 @@ function Overview({
</div> </div>
</div> </div>
), ),
extra: <Tag className="tag">{isWrapWord ? 'Raw' : 'JSON'}</Tag>, // extra: <Tag className="tag">JSON</Tag>,
className: 'collapse-content', className: 'collapse-content',
}, },
]} ]}