diff --git a/desktop/flipper-plugin/src/ui/DataFormatter.tsx b/desktop/flipper-plugin/src/ui/DataFormatter.tsx index 5f9f960a9..bf89d0773 100644 --- a/desktop/flipper-plugin/src/ui/DataFormatter.tsx +++ b/desktop/flipper-plugin/src/ui/DataFormatter.tsx @@ -7,9 +7,16 @@ * @format */ -import {Typography} from 'antd'; +import { + CaretRightOutlined, + CaretUpOutlined, + CopyOutlined, +} from '@ant-design/icons'; +import {Button, Typography} from 'antd'; import {pad} from 'lodash'; -import React, {createElement, Fragment, isValidElement} from 'react'; +import React, {createElement, Fragment, isValidElement, useState} from 'react'; +import styled from '@emotion/styled'; +import {tryGetFlipperLibImplementation} from '../plugin/FlipperLib'; import {safeStringify} from '../utils/safeStringify'; import {urlRegex} from '../utils/urlRegex'; @@ -57,6 +64,15 @@ export const DataFormatter = { } }, + truncate(maxLength: number) { + return (value: any) => { + if (typeof value === 'string' && value.length > maxLength) { + return ; + } + return value; + }; + }, + /** * Formatter that will automatically create links for any urls inside the data */ @@ -119,3 +135,38 @@ export const DataFormatter = { return DataFormatter.defaultFormatter(res); }, }; + +const TruncateHelper = styled(function TruncateHelper({ + value, + maxLength, +}: { + value: string; + maxLength: number; +}) { + const [collapsed, setCollapsed] = useState(true); + return ( + <> + {collapsed ? value.substr(0, maxLength) : value} + + + + ); +})({ + '& button': { + marginRight: 4, + }, +}); diff --git a/desktop/plugins/logs/index.tsx b/desktop/plugins/logs/index.tsx index b971d38db..178b1f0ce 100644 --- a/desktop/plugins/logs/index.tsx +++ b/desktop/plugins/logs/index.tsx @@ -97,7 +97,11 @@ function createColumnConfig( key: 'message', title: 'Message', wrap: true, - formatters: [DataFormatter.prettyPrintJson, DataFormatter.linkify], + formatters: [ + DataFormatter.truncate(400), + DataFormatter.prettyPrintJson, + DataFormatter.linkify, + ], }, ]; }