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,69 +34,73 @@ export type ExtendedLogEntry = DeviceLogEntry & {
   count: number;
 };
 
-const columns: DataTableColumn<ExtendedLogEntry>[] = [
+function createColumnConfig(
-  {
+  os: 'iOS' | 'Android' | 'Metro',
-    key: 'type',
+): DataTableColumn<ExtendedLogEntry>[] {
-    title: '',
+  return [
-    width: 30,
+    {
-    filters: Object.entries(logTypes).map(([value, config]) => ({
+      key: 'type',
-      label: config.label,
+      title: '',
-      value,
+      width: 30,
-      enabled: config.enabled,
+      filters: Object.entries(logTypes).map(([value, config]) => ({
-    })),
+        label: config.label,
-    onRender(entry) {
+        value,
-      return entry.count > 1 ? (
+        enabled: config.enabled,
-        <Badge
+      })),
-          count={entry.count}
+      onRender(entry) {
-          size="small"
+        return entry.count > 1 ? (
-          style={{
+          <Badge
-            marginTop: 4,
+            count={entry.count}
-            color: theme.white,
+            size="small"
-            background:
+            style={{
-              (logTypes[entry.type]?.style as any)?.color ??
+              marginTop: 4,
-              theme.textColorSecondary,
+              color: theme.white,
-          }}
+              background:
-        />
+                (logTypes[entry.type]?.style as any)?.color ??
-      ) : (
+                theme.textColorSecondary,
-        logTypes[entry.type]?.icon
+            }}
-      );
+          />
+        ) : (
+          logTypes[entry.type]?.icon
+        );
+      },
     },
-  },
+    {
-  {
+      key: 'date',
-    key: 'date',
+      title: 'Time',
-    title: 'Time',
+      width: 120,
-    width: 120,
+    },
-  },
+    {
-  {
+      key: 'pid',
-    key: 'pid',
+      title: 'PID',
-    title: 'PID',
+      width: 60,
-    width: 60,
+      visible: os === 'Android',
-    visible: false,
+    },
-  },
+    {
-  {
+      key: 'tid',
-    key: 'tid',
+      title: 'TID',
-    title: 'TID',
+      width: 60,
-    width: 60,
+      visible: false,
-    visible: false,
+    },
-  },
+    {
-  {
+      key: 'tag',
-    key: 'tag',
+      title: 'Tag',
-    title: 'Tag',
+      width: 160,
-    width: 160,
+    },
-  },
+    {
-  {
+      key: 'app',
-    key: 'app',
+      title: 'App',
-    title: 'App',
+      width: 160,
-    width: 160,
+      visible: false,
-    visible: false,
+    },
-  },
+    {
-  {
+      key: 'message',
-    key: 'message',
+      title: 'Message',
-    title: 'Message',
+      wrap: true,
-    wrap: true,
+      formatters: [DataFormatter.prettyPrintJson, DataFormatter.linkify],
-    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={