diff --git a/desktop/plugins/public/network/__tests__/chunks.node.tsx b/desktop/plugins/public/network/__tests__/chunks.node.tsx index 88f8e796e..bdc5bc024 100644 --- a/desktop/plugins/public/network/__tests__/chunks.node.tsx +++ b/desktop/plugins/public/network/__tests__/chunks.node.tsx @@ -180,7 +180,7 @@ test('Reducer correctly combines initial response and followup chunk', () => { responseHeaders: [{key: 'Content-Type', value: 'text/plain'}], responseIsMock: false, responseLength: 5, - status: 200, + status: '200', url: 'http://test.com', }); }); diff --git a/desktop/plugins/public/network/__tests__/customheaders.node.tsx b/desktop/plugins/public/network/__tests__/customheaders.node.tsx index 63e860d44..0751e478e 100644 --- a/desktop/plugins/public/network/__tests__/customheaders.node.tsx +++ b/desktop/plugins/public/network/__tests__/customheaders.node.tsx @@ -113,7 +113,7 @@ test('Can handle custom headers', async () => { responseIsMock: false, responseLength: 0, 'response_header_second-test-header': 'dolphins', - status: 200, + status: '200', url: 'http://www.fbflipper.com', }, ]); diff --git a/desktop/plugins/public/network/__tests__/encoding.node.tsx b/desktop/plugins/public/network/__tests__/encoding.node.tsx index 29297838b..2df48b125 100644 --- a/desktop/plugins/public/network/__tests__/encoding.node.tsx +++ b/desktop/plugins/public/network/__tests__/encoding.node.tsx @@ -233,7 +233,7 @@ test('binary data gets serialized correctly', async () => { ], responseIsMock: false, responseLength: 24838, - status: 200, + status: '200', url: 'http://www.fbflipper.com', }, ], @@ -265,7 +265,7 @@ test('binary data gets serialized correctly', async () => { ], responseIsMock: false, responseLength: 24838, - status: 200, + status: '200', url: 'http://www.fbflipper.com', }); }); diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx index 5a991a007..cc0e7fd7c 100644 --- a/desktop/plugins/public/network/index.tsx +++ b/desktop/plugins/public/network/index.tsx @@ -28,12 +28,13 @@ import { usePlugin, useValue, createDataSource, - DataTableLegacy as DataTable, - DataTableColumnLegacy as DataTableColumn, - DataTableManagerLegacy as DataTableManager, + _DataTableWithPowerSearch as DataTable, + _DataTableColumnWithPowerSearch as DataTableColumn, + _DataTableWithPowerSearchManager as DataTableManager, theme, renderReactRoot, batch, + dataTablePowerSearchOperators, } from 'flipper-plugin'; import { Request, @@ -50,7 +51,6 @@ import { getHeaderValue, getResponseLength, getRequestLength, - formatStatus, formatBytes, formatDuration, requestsToText, @@ -118,6 +118,7 @@ export function plugin(client: PluginClient) { ); const requests = createDataSource([], { key: 'id', + indices: [['method'], ['status']], }); const selectedId = createState(undefined); const tableManagerRef = createRef>(); @@ -136,11 +137,16 @@ export function plugin(client: PluginClient) { return; } else if (payload.startsWith(searchTermDelim)) { tableManagerRef.current?.clearSelection(); - tableManagerRef.current?.setSearchValue( - payload.slice(searchTermDelim.length), - ); + tableManagerRef.current?.setSearchExpression([ + { + field: {label: 'Row', key: 'entireRow', useWholeRow: true}, + operator: + dataTablePowerSearchOperators.searializable_object_contains(), + searchValue: payload.slice(searchTermDelim.length), + }, + ]); } else { - tableManagerRef.current?.setSearchValue(''); + tableManagerRef.current?.setSearchExpression([]); tableManagerRef.current?.selectItemById(payload); } }); @@ -537,6 +543,7 @@ function createRequestFromRequestInfo( domain, requestHeaders: data.headers, requestData: decodeBody(data.headers, data.data), + status: '...', }; customColumns .filter((c) => c.type === 'request') @@ -557,7 +564,7 @@ function updateRequestWithResponseInfo( const res = { ...request, responseTime: new Date(response.timestamp), - status: response.status, + status: response.status.toString(), reason: response.reason, responseHeaders: response.headers, responseData: decodeBody(response.headers, response.data), @@ -659,12 +666,20 @@ const baseColumns: DataTableColumn[] = [ key: 'requestTime', title: 'Request Time', width: 120, + powerSearchConfig: [ + dataTablePowerSearchOperators.older_than_absolute_date(), + dataTablePowerSearchOperators.newer_than_absolute_date(), + ], }, { key: 'responseTime', title: 'Response Time', width: 120, visible: false, + powerSearchConfig: [ + dataTablePowerSearchOperators.older_than_absolute_date(), + dataTablePowerSearchOperators.newer_than_absolute_date(), + ], }, { key: 'requestData', @@ -672,26 +687,55 @@ const baseColumns: DataTableColumn[] = [ width: 120, visible: false, formatters: formatOperationName, + powerSearchConfig: [ + dataTablePowerSearchOperators.searializable_object_contains(), + dataTablePowerSearchOperators.searializable_object_not_contains(), + ], }, { key: 'domain', + powerSearchConfig: [ + dataTablePowerSearchOperators.string_contains(), + dataTablePowerSearchOperators.string_not_contains(), + dataTablePowerSearchOperators.string_matches_exactly(), + dataTablePowerSearchOperators.string_not_matches_exactly(), + ], }, { key: 'url', title: 'Full URL', visible: false, + powerSearchConfig: [ + dataTablePowerSearchOperators.string_contains(), + dataTablePowerSearchOperators.string_not_contains(), + dataTablePowerSearchOperators.string_matches_exactly(), + dataTablePowerSearchOperators.string_not_matches_exactly(), + ], }, { key: 'method', title: 'Method', width: 70, + powerSearchConfig: { + operators: [ + dataTablePowerSearchOperators.enum_set_is_any_of({}), + dataTablePowerSearchOperators.enum_set_is_none_of({}), + ], + inferEnumOptionsFromData: true, + }, }, { key: 'status', title: 'Status', width: 70, - formatters: formatStatus, align: 'right', + powerSearchConfig: { + operators: [ + dataTablePowerSearchOperators.enum_set_is_any_of({}), + dataTablePowerSearchOperators.enum_set_is_none_of({}), + ], + inferEnumOptionsFromData: true, + }, }, { key: 'requestLength', @@ -699,6 +743,13 @@ const baseColumns: DataTableColumn[] = [ width: 100, formatters: formatBytes, align: 'right', + powerSearchConfig: [ + dataTablePowerSearchOperators.float_equals(), + dataTablePowerSearchOperators.float_greater_than(), + dataTablePowerSearchOperators.float_less_than(), + dataTablePowerSearchOperators.float_greater_or_equal(), + dataTablePowerSearchOperators.float_less_or_equal(), + ], }, { key: 'responseLength', @@ -706,6 +757,13 @@ const baseColumns: DataTableColumn[] = [ width: 100, formatters: formatBytes, align: 'right', + powerSearchConfig: [ + dataTablePowerSearchOperators.float_equals(), + dataTablePowerSearchOperators.float_greater_than(), + dataTablePowerSearchOperators.float_less_than(), + dataTablePowerSearchOperators.float_greater_or_equal(), + dataTablePowerSearchOperators.float_less_or_equal(), + ], }, { key: 'duration', @@ -713,6 +771,13 @@ const baseColumns: DataTableColumn[] = [ width: 100, formatters: formatDuration, align: 'right', + powerSearchConfig: [ + dataTablePowerSearchOperators.float_equals(), + dataTablePowerSearchOperators.float_greater_than(), + dataTablePowerSearchOperators.float_less_than(), + dataTablePowerSearchOperators.float_greater_or_equal(), + dataTablePowerSearchOperators.float_less_or_equal(), + ], }, ]; @@ -727,7 +792,10 @@ const errorStyle = { function getRowStyle(row: Request) { return row.responseIsMock ? mockingStyle - : row.status && row.status >= 400 && row.status < 600 + : row.status && + row.status !== '...' && + parseInt(row.status, 10) >= 400 && + parseInt(row.status, 10) < 600 ? errorStyle : undefined; } diff --git a/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx b/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx index d058e0201..ab3163bf8 100644 --- a/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx +++ b/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx @@ -9,7 +9,7 @@ import { Atom, - DataTableManagerLegacy as DataTableManager, + _DataTableWithPowerSearchManager as DataTableManager, getFlipperLib, } from 'flipper-plugin'; import {createContext} from 'react'; diff --git a/desktop/plugins/public/network/types.tsx b/desktop/plugins/public/network/types.tsx index 383d71eb2..1eef07226 100644 --- a/desktop/plugins/public/network/types.tsx +++ b/desktop/plugins/public/network/types.tsx @@ -23,7 +23,7 @@ export interface Request { requestData: string | Uint8Array | undefined; // response responseTime?: Date; - status?: number; + status: string; reason?: string; responseHeaders?: Array
; responseData?: string | Uint8Array | undefined; diff --git a/desktop/plugins/public/network/utils.tsx b/desktop/plugins/public/network/utils.tsx index a6a62c681..6f65d775d 100644 --- a/desktop/plugins/public/network/utils.tsx +++ b/desktop/plugins/public/network/utils.tsx @@ -268,10 +268,6 @@ export function formatBytes(count: number | undefined): string { return count + ' B'; } -export function formatStatus(status: number | undefined) { - return status ? '' + status : ''; -} - export function formatOperationName(requestData: string): string { try { const parsedData = JSON.parse(requestData);