Minor UI improvements

Summary:
Addresses feedback from: https://github.com/facebook/flipper/issues/2076

- fix filtering non-string columns
- fix overflow in filter dropdown
- hide app column on all devices
- show pid column on android, to simplify filtering per app

Reviewed By: passy

Differential Revision: D27188458

fbshipit-source-id: b6180fb5a8d0a47e50dd5dc3533da3ff1b0a1a2e

desktop/flipper-plugin/src/ui/datatable/ColumnFilter.tsx

@@ -79,7 +79,7 @@ export function FilterIcon({
         filters?.map((filter, index) => (
           <Menu.Item key={index}>
             <Layout.Right center>
-              <Checkbox
+              <FilterCheckbox
                 checked={filter.enabled}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -91,7 +91,7 @@ export function FilterIcon({
                   });
                 }}>
                 {filter.label}
-              </Checkbox>
+              </FilterCheckbox>
               {!filter.predefined && (
                 <MinusCircleOutlined
                   onClick={(e) => {
@@ -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',
+});

desktop/flipper-plugin/src/ui/datatable/DataTableManager.tsx

@@ -323,13 +323,13 @@ function addColumnFilter<T>(
   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,
     });

desktop/plugins/logs/index.tsx

@@ -34,7 +34,10 @@ export type ExtendedLogEntry = DeviceLogEntry & {
   count: number;
 };
 
-const columns: DataTableColumn<ExtendedLogEntry>[] = [
+function createColumnConfig(
+  os: 'iOS' | 'Android' | 'Metro',
+): DataTableColumn<ExtendedLogEntry>[] {
+  return [
     {
       key: 'type',
       title: '',
@@ -71,7 +74,7 @@ const columns: DataTableColumn<ExtendedLogEntry>[] = [
       key: 'pid',
       title: 'PID',
       width: 60,
-    visible: false,
+      visible: os === 'Android',
     },
     {
       key: 'tid',
@@ -97,6 +100,7 @@ const columns: DataTableColumn<ExtendedLogEntry>[] = [
       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 (
     <DataTable<ExtendedLogEntry>
       dataSource={plugin.rows}
-      columns={columns}
+      columns={plugin.columns}
       autoScroll
       onRowStyle={getRowStyle}
       extraActions={