From 8f90deda55f352c4b08db9f18122b52772700753 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 19 Mar 2021 08:57:24 -0700
Subject: [PATCH] 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
---
 .../src/ui/datatable/ColumnFilter.tsx         |  10 +-
 .../src/ui/datatable/DataTableManager.tsx     |   4 +-
 desktop/plugins/logs/index.tsx                | 133 +++++++++---------
 3 files changed, 80 insertions(+), 67 deletions(-)

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) => (
           <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',
+});
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<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,
     });
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<ExtendedLogEntry>[] = [
-  {
-    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 ? (
-        <Badge
-          count={entry.count}
-          size="small"
-          style={{
-            marginTop: 4,
-            color: theme.white,
-            background:
-              (logTypes[entry.type]?.style as any)?.color ??
-              theme.textColorSecondary,
-          }}
-        />
-      ) : (
-        logTypes[entry.type]?.icon
-      );
+function createColumnConfig(
+  os: 'iOS' | 'Android' | 'Metro',
+): DataTableColumn<ExtendedLogEntry>[] {
+  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 ? (
+          <Badge
+            count={entry.count}
+            size="small"
+            style={{
+              marginTop: 4,
+              color: theme.white,
+              background:
+                (logTypes[entry.type]?.style as any)?.color ??
+                theme.textColorSecondary,
+            }}
+          />
+        ) : (
+          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 (
     <DataTable<ExtendedLogEntry>
       dataSource={plugin.rows}
-      columns={columns}
+      columns={plugin.columns}
       autoScroll
       onRowStyle={getRowStyle}
       extraActions={