diff --git a/desktop/flipper-plugin/src/ui/datatable/ColumnFilter.tsx b/desktop/flipper-plugin/src/ui/datatable/ColumnFilter.tsx index aceb847d9..3236c02fe 100644 --- a/desktop/flipper-plugin/src/ui/datatable/ColumnFilter.tsx +++ b/desktop/flipper-plugin/src/ui/datatable/ColumnFilter.tsx @@ -79,7 +79,7 @@ export function FilterIcon({ filters?.map((filter, index) => ( - { e.stopPropagation(); @@ -91,7 +91,7 @@ export function FilterIcon({ }); }}> {filter.label} - + {!filter.predefined && ( { @@ -185,3 +185,9 @@ export const FilterButton = styled.div<{isActive?: boolean}>(({isActive}) => ({ backgroundColor: theme.backgroundWash, }, })); + +const FilterCheckbox = styled(Checkbox)({ + maxWidth: 600, + overflow: 'hidden', + textOverflow: 'ellipsis', +}); diff --git a/desktop/flipper-plugin/src/ui/datatable/DataTableManager.tsx b/desktop/flipper-plugin/src/ui/datatable/DataTableManager.tsx index 214af432e..1a3b9ef69 100644 --- a/desktop/flipper-plugin/src/ui/datatable/DataTableManager.tsx +++ b/desktop/flipper-plugin/src/ui/datatable/DataTableManager.tsx @@ -323,13 +323,13 @@ function addColumnFilter( disableOthers: boolean = false, ): void { const column = columns.find((c) => c.key === columnId)!; - const filterValue = value.toLowerCase(); + const filterValue = String(value).toLowerCase(); const existing = column.filters!.find((c) => c.value === filterValue); if (existing) { existing.enabled = true; } else { column.filters!.push({ - label: value, + label: String(value), value: filterValue, enabled: true, }); diff --git a/desktop/plugins/logs/index.tsx b/desktop/plugins/logs/index.tsx index bda860870..cef7c6d61 100644 --- a/desktop/plugins/logs/index.tsx +++ b/desktop/plugins/logs/index.tsx @@ -34,69 +34,73 @@ export type ExtendedLogEntry = DeviceLogEntry & { count: number; }; -const columns: DataTableColumn[] = [ - { - key: 'type', - title: '', - width: 30, - filters: Object.entries(logTypes).map(([value, config]) => ({ - label: config.label, - value, - enabled: config.enabled, - })), - onRender(entry) { - return entry.count > 1 ? ( - - ) : ( - logTypes[entry.type]?.icon - ); +function createColumnConfig( + os: 'iOS' | 'Android' | 'Metro', +): DataTableColumn[] { + return [ + { + key: 'type', + title: '', + width: 30, + filters: Object.entries(logTypes).map(([value, config]) => ({ + label: config.label, + value, + enabled: config.enabled, + })), + onRender(entry) { + return entry.count > 1 ? ( + + ) : ( + logTypes[entry.type]?.icon + ); + }, }, - }, - { - key: 'date', - title: 'Time', - width: 120, - }, - { - key: 'pid', - title: 'PID', - width: 60, - visible: false, - }, - { - key: 'tid', - title: 'TID', - width: 60, - visible: false, - }, - { - key: 'tag', - title: 'Tag', - width: 160, - }, - { - key: 'app', - title: 'App', - width: 160, - visible: false, - }, - { - key: 'message', - title: 'Message', - wrap: true, - formatters: [DataFormatter.prettyPrintJson, DataFormatter.linkify], - }, -]; + { + key: 'date', + title: 'Time', + width: 120, + }, + { + key: 'pid', + title: 'PID', + width: 60, + visible: os === 'Android', + }, + { + key: 'tid', + title: 'TID', + width: 60, + visible: false, + }, + { + key: 'tag', + title: 'Tag', + width: 160, + }, + { + key: 'app', + title: 'App', + width: 160, + visible: false, + }, + { + key: 'message', + title: 'Message', + wrap: true, + formatters: [DataFormatter.prettyPrintJson, DataFormatter.linkify], + }, + ]; +} function getRowStyle(entry: DeviceLogEntry): CSSProperties | undefined { return (logTypes[entry.type]?.style as any) ?? baseRowStyle; @@ -198,7 +202,10 @@ export function devicePlugin(client: DevicePluginClient) { // start listening to the logs resumePause(); + const columns = createColumnConfig(client.device.os as any); + return { + columns, isConnected: client.device.isConnected, isPaused, tableManagerRef, @@ -214,7 +221,7 @@ export function Component() { return ( dataSource={plugin.rows} - columns={columns} + columns={plugin.columns} autoScroll onRowStyle={getRowStyle} extraActions={