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}
+
+ }
+ onClick={() =>
+ tryGetFlipperLibImplementation()?.writeTextToClipboard(value)
+ }
+ size="small"
+ type="text">
+ Copy
+
+ >
+ );
+})({
+ '& 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,
+ ],
},
];
}