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,
     });