Limit the size of the containers and make it scrollable

Summary:
Improves the UI of crash reporter plugin

- Added max height on the value container with scrollable capabilities
- Fixed the bug in UI of the plugin where it showed the latest crash data even though one navigated to the plugin from old crash notification

Reviewed By: danielbuechele

Differential Revision: D13307302

fbshipit-source-id: 97eb96d3d9947a2835cd5572053256e0bdc01e27

src/plugins/crash_reporter/index.js

@@ -39,12 +39,15 @@ const Value = styled(View)({
   paddingLeft: '8px',
   fontSize: '100%',
   fontFamily: 'Monospace',
+  maxHeight: '200px',
+  overflow: 'scroll',
 });
 
 const RootColumn = styled(FlexColumn)({
   paddingLeft: '16px',
   paddingRight: '16px',
   paddingTop: '8px',
+  overflow: 'scroll',
 });
 
 const CrashRow = styled(FlexRow)({
@@ -55,6 +58,8 @@ const CallStack = styled('pre')({
   fontFamily: 'Monospace',
   fontSize: '100%',
   paddingLeft: '8px',
+  maxHeight: '500px',
+  overflow: 'scroll',
 });
 
 export default class CrashReporterPlugin extends FlipperDevicePlugin {
@@ -105,7 +110,7 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin {
         message: crash.callStack,
         severity: 'error',
         title: 'CRASH: ' + crash.name + ' ' + crash.reason,
-        action: 'Inspect',
+        action: JSON.stringify(crash),
       };
     });
   };
@@ -115,8 +120,15 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin {
   }
 
   render() {
-    if (this.props.persistedState.crashes.length > 0) {
-      const crash = this.props.persistedState.crashes.slice(-1)[0];
+    let crash =
+      this.props.persistedState.crashes.length > 0
+        ? this.props.persistedState.crashes.slice(-1)[0]
+        : undefined;
+    if (this.props.deepLinkPayload) {
+      // In case of the deeplink from the notifications use the notifications crash, otherwise show the latest crash
+      crash = JSON.parse(this.props.deepLinkPayload);
+    }
+    if (crash) {
       const callStackString = this.convertCallstackToString(crash);
       return (
         <RootColumn>

src/plugins/logs/index.js

@@ -294,7 +294,14 @@ export default class LogTable extends FlipperDevicePlugin<
       if (!matched) {
         return matched;
       }
-      for (let i = 0; i < crash.callStack.length && matched; ++i) {
+      // If top 10 callstack entries are present in a row then it most probably matches the row.
+      // The reason why we do not perform the full callstack check is that sometimes the row in logs plugins has truncated data
+      // TODO: T37573722
+      for (
+        let i = 0;
+        i < Math.min(crash.callStack.length, 10) && matched;
+        ++i
+      ) {
         //$FlowFixMe: x.filterValue is not undefined
         matched = x.filterValue.includes(crash.callStack[i]);
       }