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={