Plugin folders re-structuring

Summary:
Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions.

Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually).

New proposed structure for plugin packages:
```
- root
- node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion
-- plugins
 --- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936)
 --- public
---- node_modules - modules used by public plugins
---- pluginA
----- node_modules - modules used by plugin A exclusively
---- pluginB
----- node_modules - modules used by plugin B exclusively
 --- fb
---- node_modules - modules used by fb-internal plugins
---- pluginC
----- node_modules - modules used by plugin C exclusively
---- pluginD
----- node_modules - modules used by plugin D exclusively
```
I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies.

Reviewed By: mweststrate

Differential Revision: D27034108

fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586

desktop/plugins/public/logs/__tests__/logs.node.tsx

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {sleep, TestUtils} from 'flipper-plugin';
+import * as LogsPlugin from '../index';
+
+const entry1 = {
+  date: new Date(1611854112859),
+  message: 'test1',
+  pid: 0,
+  tag: 'test',
+  tid: 1,
+  type: 'error',
+  app: 'X',
+} as const;
+const entry2 = {
+  date: new Date(1611854117859),
+  message: 'test2',
+  pid: 2,
+  tag: 'test',
+  tid: 3,
+  type: 'warn',
+  app: 'Y',
+} as const;
+const entry3 = {
+  date: new Date(1611854112859),
+  message: 'test3',
+  pid: 0,
+  tag: 'test',
+  tid: 1,
+  type: 'error',
+  app: 'X',
+} as const;
+
+test('it will merge equal rows', () => {
+  const {instance, sendLogEntry} = TestUtils.startDevicePlugin(LogsPlugin);
+
+  sendLogEntry(entry1);
+  sendLogEntry(entry2);
+  sendLogEntry({
+    ...entry2,
+    date: new Date(1611954117859),
+  });
+  sendLogEntry(entry3);
+
+  expect(instance.rows.records()).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "app": "X",
+        "count": 1,
+        "date": 2021-01-28T17:15:12.859Z,
+        "message": "test1",
+        "pid": 0,
+        "tag": "test",
+        "tid": 1,
+        "type": "error",
+      },
+      Object {
+        "app": "Y",
+        "count": 2,
+        "date": 2021-01-28T17:15:17.859Z,
+        "message": "test2",
+        "pid": 2,
+        "tag": "test",
+        "tid": 3,
+        "type": "warn",
+      },
+      Object {
+        "app": "X",
+        "count": 1,
+        "date": 2021-01-28T17:15:12.859Z,
+        "message": "test3",
+        "pid": 0,
+        "tag": "test",
+        "tid": 1,
+        "type": "error",
+      },
+    ]
+  `);
+});
+
+test('it supports deeplink and select nodes + navigating to bottom', async () => {
+  const {
+    instance,
+    sendLogEntry,
+    triggerDeepLink,
+    act,
+    triggerMenuEntry,
+  } = TestUtils.renderDevicePlugin(LogsPlugin);
+
+  sendLogEntry(entry1);
+  sendLogEntry(entry2);
+  sendLogEntry(entry3);
+
+  expect(instance.tableManagerRef).not.toBeUndefined();
+  expect(instance.tableManagerRef.current?.getSelectedItems()).toEqual([]);
+
+  act(() => {
+    triggerDeepLink('test2');
+  });
+
+  await sleep(1000);
+
+  expect(instance.tableManagerRef.current?.getSelectedItems()).toEqual([
+    {
+      ...entry2,
+      count: 1,
+    },
+  ]);
+
+  act(() => {
+    triggerMenuEntry('goToBottom');
+  });
+  expect(instance.tableManagerRef.current?.getSelectedItems()).toEqual([
+    {
+      ...entry3,
+      count: 1,
+    },
+  ]);
+});
+
+test('export / import plugin does work', async () => {
+  const {
+    instance,
+    exportStateAsync,
+    sendLogEntry,
+  } = TestUtils.startDevicePlugin(LogsPlugin);
+
+  sendLogEntry(entry1);
+  sendLogEntry(entry2);
+
+  const data = await exportStateAsync();
+  expect(data).toMatchInlineSnapshot(`
+    Object {
+      "logs": Array [
+        Object {
+          "app": "X",
+          "count": 1,
+          "date": 2021-01-28T17:15:12.859Z,
+          "message": "test1",
+          "pid": 0,
+          "tag": "test",
+          "tid": 1,
+          "type": "error",
+        },
+        Object {
+          "app": "Y",
+          "count": 1,
+          "date": 2021-01-28T17:15:17.859Z,
+          "message": "test2",
+          "pid": 2,
+          "tag": "test",
+          "tid": 3,
+          "type": "warn",
+        },
+      ],
+    }
+  `);
+
+  expect(instance.rows.size).toBe(2);
+
+  // Run a second import
+  {
+    const {exportStateAsync} = TestUtils.startDevicePlugin(LogsPlugin, {
+      initialState: data,
+    });
+
+    expect(await exportStateAsync()).toEqual(data);
+  }
+});

desktop/plugins/public/logs/index.tsx

@@ -0,0 +1,249 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {
+  DevicePluginClient,
+  DeviceLogEntry,
+  usePlugin,
+  createDataSource,
+  DataTable,
+  DataTableColumn,
+  theme,
+  DataTableManager,
+  createState,
+  useValue,
+  DataFormatter,
+} from 'flipper-plugin';
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import React, {createRef, CSSProperties} from 'react';
+import {Badge, Button} from 'antd';
+
+import {baseRowStyle, logTypes} from './logTypes';
+
+export type ExtendedLogEntry = DeviceLogEntry & {
+  count: number;
+};
+
+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: true,
+    },
+    {
+      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.truncate(400),
+        DataFormatter.prettyPrintJson,
+        DataFormatter.linkify,
+      ],
+    },
+  ];
+}
+
+function getRowStyle(entry: DeviceLogEntry): CSSProperties | undefined {
+  return (logTypes[entry.type]?.style as any) ?? baseRowStyle;
+}
+
+export function devicePlugin(client: DevicePluginClient) {
+  const rows = createDataSource<ExtendedLogEntry>([], {
+    limit: 200000,
+    persist: 'logs',
+  });
+  const isPaused = createState(true);
+  const tableManagerRef = createRef<
+    undefined | DataTableManager<ExtendedLogEntry>
+  >();
+
+  client.onDeepLink((payload: unknown) => {
+    if (typeof payload === 'string') {
+      // timeout as we want to await restoring any previous scroll positin first, then scroll to the
+      setTimeout(() => {
+        let hasMatch = false;
+        rows.view.output(0, rows.view.size).forEach((row, index) => {
+          if (row.message.includes(payload)) {
+            tableManagerRef.current?.selectItem(index, hasMatch);
+            hasMatch = true;
+          }
+        });
+      }, 500);
+    }
+  });
+
+  client.addMenuEntry(
+    {
+      action: 'clear',
+      handler: clearLogs,
+    },
+    {
+      action: 'createPaste',
+      handler: createPaste,
+    },
+    {
+      action: 'goToBottom',
+      handler: goToBottom,
+    },
+  );
+
+  let logDisposer: (() => void) | undefined;
+
+  function resumePause() {
+    if (isPaused.get() && client.device.isConnected) {
+      // start listening to the logs
+      isPaused.set(false);
+      logDisposer = client.device.onLogEntry((entry: DeviceLogEntry) => {
+        const lastIndex = rows.size - 1;
+        const previousRow = rows.get(lastIndex);
+        if (
+          previousRow &&
+          previousRow.message === entry.message &&
+          previousRow.tag === entry.tag &&
+          previousRow.type === entry.type
+        ) {
+          rows.update(lastIndex, {
+            ...previousRow,
+            count: previousRow.count + 1,
+          });
+        } else {
+          rows.append({
+            ...entry,
+            count: 1,
+          });
+        }
+      });
+    } else {
+      logDisposer?.();
+      isPaused.set(true);
+    }
+  }
+
+  function clearLogs() {
+    // Non public Android specific api
+    (client.device.realDevice as any)?.clearLogs?.();
+    rows.clear();
+    tableManagerRef.current?.clearSelection();
+  }
+
+  function createPaste() {
+    let selection = tableManagerRef.current?.getSelectedItems();
+    if (!selection?.length) {
+      selection = rows.view.output(0, rows.view.size);
+    }
+    if (selection?.length) {
+      client.createPaste(JSON.stringify(selection, null, 2));
+    }
+  }
+
+  function goToBottom() {
+    tableManagerRef?.current?.selectItem(rows.view.size - 1);
+  }
+
+  // start listening to the logs
+  resumePause();
+
+  const columns = createColumnConfig(client.device.os as any);
+
+  return {
+    columns,
+    isConnected: client.device.isConnected,
+    isPaused,
+    tableManagerRef,
+    rows,
+    clearLogs,
+    resumePause,
+  };
+}
+
+export function Component() {
+  const plugin = usePlugin(devicePlugin);
+  const paused = useValue(plugin.isPaused);
+  return (
+    <DataTable<ExtendedLogEntry>
+      dataSource={plugin.rows}
+      columns={plugin.columns}
+      autoScroll
+      onRowStyle={getRowStyle}
+      extraActions={
+        plugin.isConnected ? (
+          <>
+            <Button
+              title={`Click to ${paused ? 'resume' : 'pause'} the log stream`}
+              danger={paused}
+              onClick={plugin.resumePause}>
+              {paused ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
+            </Button>
+            <Button title="Clear logs" onClick={plugin.clearLogs}>
+              <DeleteOutlined />
+            </Button>
+          </>
+        ) : undefined
+      }
+      tableManagerRef={plugin.tableManagerRef}
+    />
+  );
+}

desktop/plugins/public/logs/logTypes.tsx

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {theme} from 'flipper-plugin';
+import {WarningFilled, CloseCircleFilled} from '@ant-design/icons';
+import React, {CSSProperties} from 'react';
+
+const iconStyle = {
+  fontSize: '16px',
+};
+
+export const baseRowStyle = {
+  ...theme.monospace,
+};
+
+export const logTypes: {
+  [level: string]: {
+    label: string;
+    icon?: React.ReactNode;
+    style?: CSSProperties;
+    enabled: boolean;
+  };
+} = {
+  verbose: {
+    label: 'Verbose',
+    style: {
+      ...baseRowStyle,
+      color: theme.textColorSecondary,
+    },
+    enabled: false,
+  },
+  debug: {
+    label: 'Debug',
+    style: {
+      ...baseRowStyle,
+      color: theme.textColorSecondary,
+    },
+    enabled: false,
+  },
+  info: {
+    label: 'Info',
+    enabled: true,
+  },
+  warn: {
+    label: 'Warn',
+    style: {
+      ...baseRowStyle,
+      color: theme.warningColor,
+    },
+    icon: <WarningFilled style={iconStyle} />,
+    enabled: true,
+  },
+  error: {
+    label: 'Error',
+    style: {
+      ...baseRowStyle,
+      color: theme.errorColor,
+    },
+    icon: <CloseCircleFilled style={iconStyle} />,
+    enabled: true,
+  },
+  fatal: {
+    label: 'Fatal',
+    style: {
+      ...baseRowStyle,
+      background: theme.errorColor,
+      color: theme.white,
+    },
+    icon: <CloseCircleFilled style={iconStyle} />,
+    enabled: true,
+  },
+};

desktop/plugins/public/logs/package.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
+  "name": "flipper-plugin-device-logs",
+  "id": "DeviceLogs",
+  "pluginType": "device",
+  "supportedDevices": [
+    {
+      "os": "Android",
+      "type": "emulator"
+    },
+    {
+      "os": "Android",
+      "type": "physical"
+    },
+    {
+      "os": "iOS",
+      "type": "emulator"
+    },
+    {
+      "os": "iOS",
+      "type": "physical"
+    },
+    {
+      "os": "Metro"
+    }
+  ],
+  "version": "0.0.0",
+  "main": "dist/bundle.js",
+  "flipperBundlerEntry": "index.tsx",
+  "license": "MIT",
+  "keywords": [
+    "flipper-plugin"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "flipper-plugin": "*"
+  },
+  "title": "Logs",
+  "icon": "arrow-right",
+  "bugs": {
+    "email": "oncall+flipper@xmail.facebook.com",
+    "url": "https://fb.workplace.com/groups/flippersupport/"
+  }
+}