jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Introduce custom header columns

Browse Source 
Summary:
Changelog: [Network] It is now possible to add custom columns for specific request / response headers

This implements #3 papercut. See also https://fb.workplace.com/groups/flippersupport/permalink/1080685582412099/

Didn't include a way to remove custom columns yet. But they can be hidden just like normal columns. Custom columns aren't remembered across Flipper sessions or apps. We can add that later if desired.

Reviewed By: passy

Differential Revision: D28223515

fbshipit-source-id: 3ed008883430be4ae51a645c6a4ac780467ba442
This commit is contained in:
Michel Weststrate
2021-05-06 04:26:41 -07:00
committed by Facebook GitHub Bot
parent 9c5967caf9
commit 0c2348ebdb
2 changed files with 336 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
desktop/plugins/public/network/__tests__/customheaders.node.tsx Normal file
View File

@@ -0,0 +1,160 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {TestUtils} from 'flipper-plugin';
import * as NetworkPlugin from '../index';
test('Can handle custom headers', async () => {
const {
instance,
sendEvent,
act,
renderer,
exportState,
} = TestUtils.renderPlugin(NetworkPlugin);
act(() => {
sendEvent('newRequest', {
id: '1',
timestamp: 123,
data: 'hello',
headers: [
{
key: 'test-header',
value: 'fluffie',
},
],
method: 'post',
url: 'http://www.fbflipper.com',
});
});
// record visible
expect(await renderer.findByText('www.fbflipper.com/')).not.toBeNull();
// header not found
expect(renderer.queryByText('fluffie')).toBeNull();
// add column
act(() => {
instance.addCustomColumn({
type: 'request',
header: 'test-header',
});
});
// applied to backlog, so header found
expect(await renderer.findByText('fluffie')).not.toBeNull();
// add response column
act(() => {
instance.addCustomColumn({
type: 'response',
header: 'second-test-header',
});
});
// newly arriving data should respect custom columns
sendEvent('newResponse', {
id: '1',
headers: [
{
key: 'second-test-header',
value: 'dolphins',
},
],
timestamp: 124,
data: '',
status: 200,
reason: '',
isMock: false,
insights: undefined,
});
expect(await renderer.findByText('dolphins')).not.toBeNull();
// verify internal storage
expect(instance.columns.get().slice(-2)).toMatchInlineSnapshot(`
Array [
Object {
"key": "request_header_test-header",
"title": "test-header (request)",
"width": 200,
},
Object {
"key": "response_header_second-test-header",
"title": "second-test-header (response)",
"width": 200,
},
]
`);
expect(instance.requests.records()).toMatchObject([
{
domain: 'www.fbflipper.com/',
duration: 1,
id: '1',
insights: undefined,
method: 'post',
reason: '',
requestHeaders: [
{
key: 'test-header',
value: 'fluffie',
},
],
'request_header_test-header': 'fluffie',
responseData: undefined,
responseHeaders: [
{
key: 'second-test-header',
value: 'dolphins',
},
],
responseIsMock: false,
responseLength: 0,
'response_header_second-test-header': 'dolphins',
status: 200,
url: 'http://www.fbflipper.com',
},
]);
renderer.unmount();
// after import, columns should be visible and restored
{
const snapshot = exportState();
// Note: snapshot is set in the previous test
const {instance: instance2, renderer: renderer2} = TestUtils.renderPlugin(
NetworkPlugin,
{
initialState: snapshot,
},
);
// record visible
expect(await renderer2.findByText('www.fbflipper.com/')).not.toBeNull();
expect(await renderer2.findByText('fluffie')).not.toBeNull();
expect(await renderer2.findByText('dolphins')).not.toBeNull();
// verify internal storage
expect(instance2.columns.get().slice(-2)).toMatchInlineSnapshot(`
Array [
Object {
"key": "request_header_test-header",
"title": "test-header (request)",
"width": 200,
},
Object {
"key": "response_header_second-test-header",
"title": "second-test-header (response)",
"width": 200,
},
]
`);
}
});

199
desktop/plugins/public/network/index.tsx
View File

@@ -8,7 +8,16 @@
*/
import React, {createRef} from 'react';
import {Button, Menu, message, Modal, Typography} from 'antd';
import {
Button,
Form,
Input,
Menu,
message,
Modal,
Radio,
Typography,
} from 'antd';
import {
Layout,
@@ -23,6 +32,8 @@ import {
DataTableColumn,
DataTableManager,
theme,
renderReactRoot,
batch,
} from 'flipper-plugin';
import {
Request,
@@ -78,6 +89,11 @@ type Methods = {
mockResponses(params: {routes: MockRoute[]}): Promise<void>;
};
type CustomColumnConfig = {
header: string;
type: 'response' | 'request';
};
export function plugin(client: PluginClient<Events, Methods>) {
const networkRouteManager = createState<NetworkRouteManager>(
nullNetworkRouteManager,
@@ -106,6 +122,11 @@ export function plugin(client: PluginClient<Events, Methods>) {
{persist: 'partialResponses'},
);
const customColumns = createState<CustomColumnConfig[]>([], {
persist: 'customColumns', // Store in local storage as well: T69989583
});
const columns = createState<DataTableColumn<Request>[]>(baseColumns); // not persistable
client.onDeepLink((payload: unknown) => {
const searchTermDelim = 'searchTerm=';
if (typeof payload !== 'string') {
@@ -133,7 +154,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
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));
requests.upsert(createRequestFromRequestInfo(data, customColumns.get()));
});
function storeResponse(response: ResponseInfo) {
@@ -142,7 +163,9 @@ export function plugin(client: PluginClient<Events, Methods>) {
return; // request table might have been cleared
}
requests.upsert(updateRequestWithResponseInfo(request, response));
requests.upsert(
updateRequestWithResponseInfo(request, response, customColumns.get()),
);
}
client.onMessage('newResponse', (data) => {
@@ -213,10 +236,12 @@ export function plugin(client: PluginClient<Events, Methods>) {
localStorage.getItem(LOCALSTORAGE_MOCK_ROUTE_LIST_KEY + client.appId) ||
'{}',
);
routes.set(newRoutes);
isMockResponseSupported.set(result);
showMockResponseDialog.set(false);
nextRouteId.set(Object.keys(routes.get()).length);
batch(() => {
routes.set(newRoutes);
isMockResponseSupported.set(result);
showMockResponseDialog.set(false);
nextRouteId.set(Object.keys(routes.get()).length);
});
informClientMockChange(routes.get());
});
@@ -267,7 +292,53 @@ export function plugin(client: PluginClient<Events, Methods>) {
}
}
function addCustomColumn(column: CustomColumnConfig) {
// prevent doubles
if (
customColumns
.get()
.find((c) => c.header === column.header && c.type === column.type)
) {
return;
}
// add custom column config
customColumns.update((d) => {
d.push(column);
});
// generate DataTable column config
addDataTableColumnConfig(column);
// update existing entries
for (let i = 0; i < requests.size; i++) {
const request = requests.get(i);
requests.update(i, {
...request,
[`${column.type}_header_${column.header}`]: getHeaderValue(
column.type === 'request'
? request.requestHeaders
: request.responseHeaders,
column.header,
),
});
}
}
function addDataTableColumnConfig(column: CustomColumnConfig) {
columns.update((d) => {
d.push({
key: `${column.type}_header_${column.header}` as any,
width: 200,
title: `${column.header} (${column.type})`,
});
});
}
client.onReady(() => {
// after restoring a snapshot, let's make sure we update the columns
customColumns.get().forEach(addDataTableColumnConfig);
});
return {
columns,
routes,
nextRouteId,
isMockResponseSupported,
@@ -295,27 +366,85 @@ export function plugin(client: PluginClient<Events, Methods>) {
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>
<>
<Menu.Item
key="curl"
onClick={() => {
if (!request) {
return;
}
const command = convertRequestToCurlCommand(request);
client.writeTextToClipboard(command);
}}>
Copy cURL command
</Menu.Item>
<Menu.Item
key="custom header"
onClick={() => {
showCustomColumnDialog(addCustomColumn);
}}>
Add header column{'\u2026'}
</Menu.Item>
</>
);
},
onCopyText(text: string) {
client.writeTextToClipboard(text);
message.success('Text copied to clipboard');
},
addCustomColumn,
};
}
function createRequestFromRequestInfo(data: RequestInfo): Request {
function showCustomColumnDialog(
addCustomColumn: (column: CustomColumnConfig) => void,
) {
function CustomColumnDialog({unmount}: {unmount(): void}) {
const [form] = Form.useForm();
return (
<Modal
title="Add custom column"
visible
onOk={() => {
const header = form.getFieldValue('header');
const type = form.getFieldValue('type');
if (header && type) {
addCustomColumn({
header,
type,
});
unmount();
}
}}
onCancel={unmount}>
<Form
layout={'vertical'}
form={form}
initialValues={{
type: 'response',
header: '',
}}>
<Form.Item label="Header name" name="header">
<Input placeholder="Header name" />
</Form.Item>
<Form.Item label="Header type" name="type">
<Radio.Group>
<Radio value={'request'}>Request</Radio>
<Radio value={'response'}>Response</Radio>
</Radio.Group>
</Form.Item>
</Form>
</Modal>
);
}
renderReactRoot((unmount) => <CustomColumnDialog unmount={unmount} />);
}
function createRequestFromRequestInfo(
data: RequestInfo,
customColumns: CustomColumnConfig[],
): Request {
let url: URL | undefined = undefined;
try {
url = data.url ? new URL(data.url) : undefined;
@@ -326,7 +455,7 @@ function createRequestFromRequestInfo(data: RequestInfo): Request {
getHeaderValue(data.headers, 'X-FB-Friendly-Name') ||
(url ? (url.pathname ? url.host + url.pathname : url.host) : '<unknown>');
return {
const res = {
id: data.id,
// request
requestTime: new Date(data.timestamp),
@@ -336,13 +465,23 @@ function createRequestFromRequestInfo(data: RequestInfo): Request {
requestHeaders: data.headers,
requestData: decodeBody(data.headers, data.data),
};
customColumns
.filter((c) => c.type === 'request')
.forEach(({header}) => {
(res as any)['request_header_' + header] = getHeaderValue(
data.headers,
header,
);
});
return res;
}
function updateRequestWithResponseInfo(
request: Request,
response: ResponseInfo,
customColumns: CustomColumnConfig[],
): Request {
return {
const res = {
...request,
responseTime: new Date(response.timestamp),
status: response.status,
@@ -354,6 +493,15 @@ function updateRequestWithResponseInfo(
duration: response.timestamp - request.requestTime.getTime(),
insights: response.insights ?? undefined,
};
customColumns
.filter((c) => c.type === 'response')
.forEach(({header}) => {
(res as any)['response_header_' + header] = getHeaderValue(
response.headers,
header,
);
});
return res;
}
export function Component() {
@@ -362,10 +510,15 @@ export function Component() {
const isMockResponseSupported = useValue(instance.isMockResponseSupported);
const showMockResponseDialog = useValue(instance.showMockResponseDialog);
const networkRouteManager = useValue(instance.networkRouteManager);
const columns = useValue(instance.columns);
return (
<NetworkRouteContext.Provider value={networkRouteManager}>
<Layout.Container grow={true}>
<Layout.Container
grow={true}
key={
columns.length /* make sure to reset the table if colums change */
}>
<DataTable
columns={columns}
dataSource={instance.requests}
@@ -427,7 +580,7 @@ function Sidebar() {
);
}
const columns: DataTableColumn<Request>[] = [
const baseColumns: DataTableColumn<Request>[] = [
{
key: 'requestTime',
title: 'Request Time',