support user defined device plugins

Summary:
* move CPU and Logs plugin to plugins directory, set up package.json for them
* adjust plugins/index.js to expose device and client plugins in the same place, adding two new exports

Reviewed By: danielbuechele

Differential Revision: D10247606

fbshipit-source-id: 347bf8b3f9629987ad29d1d2ed025e0c88b9c967

src/Client.js

@@ -9,7 +9,7 @@ import type {FlipperPlugin} from './plugin.js';
 import type {App} from './App.js';
 import type Logger from './fb-stubs/Logger.js';
 
-import plugins from './plugins/index.js';
+import {clientPlugins} from './plugins/index.js';
 import {ReactiveSocket, PartialResponder} from 'rsocket-core';
 
 const EventEmitter = (require('events'): any);
@@ -93,7 +93,7 @@ export default class Client extends EventEmitter {
   }
 
   getFirstSupportedPlugin(): ?string {
-    for (const Plugin of plugins) {
+    for (const Plugin of clientPlugins) {
       if (this.supportsPlugin(Plugin)) {
         return Plugin.id;
       }

src/MenuBar.js

@@ -7,7 +7,6 @@
 
 import type {FlipperBasePlugin} from './plugin.js';
 
-import {devicePlugins} from './device-plugins/index.js';
 import plugins from './plugins/index.js';
 import electron from 'electron';
 
@@ -69,7 +68,7 @@ export function setupMenuBar() {
 
   // collect all keyboard actions from all plugins
   const registeredActions: Set<?KeyboardAction> = new Set(
-    [...devicePlugins, ...plugins]
+    plugins
       .map((plugin: Class<FlipperBasePlugin<>>) => plugin.keyboardActions || [])
       .reduce((acc: KeyboardActions, cv) => acc.concat(cv), [])
       .map(

src/PluginContainer.js

@@ -23,8 +23,7 @@ import Client from './Client.js';
 import {connect} from 'react-redux';
 import {setPluginState} from './reducers/pluginStates.js';
 import {setActiveNotifications} from './reducers/notifications.js';
-import {devicePlugins} from './device-plugins/index.js';
-import plugins from './plugins/index.js';
+import {devicePlugins, clientPlugins} from './plugins/index.js';
 import {activateMenuItems} from './MenuBar.js';
 
 const Container = styled(FlexColumn)({
@@ -75,7 +74,7 @@ function computeState(props: Props): State {
     target = props.clients.find(
       (client: Client) => client.id === props.selectedApp,
     );
-    activePlugin = plugins.find(
+    activePlugin = clientPlugins.find(
       (p: Class<FlipperPlugin<>>) => p.id === props.selectedPlugin,
     );
     if (!activePlugin || !target) {

src/chrome/MainSidebar.js

@@ -5,11 +5,7 @@
  * @format
  */
 
-import type {
-  FlipperPlugin,
-  FlipperDevicePlugin,
-  FlipperBasePlugin,
-} from '../plugin.js';
+import {FlipperBasePlugin} from '../plugin.js';
 import type BaseDevice from '../devices/BaseDevice.js';
 import type Client from '../Client.js';
 import type {PluginNotification} from '../reducers/notifications';
@@ -24,13 +20,19 @@ import {
   Glyph,
   styled,
   GK,
+  FlipperPlugin,
+  FlipperDevicePlugin,
 } from 'flipper';
 import React from 'react';
-import {devicePlugins} from '../device-plugins/index.js';
-import plugins from '../plugins/index.js';
+import {devicePlugins, clientPlugins} from '../plugins/index.js';
+import notificationPlugin from '../device-plugins/notifications/index.js';
 import {selectPlugin} from '../reducers/connections.js';
 import {connect} from 'react-redux';
 
+if (GK.get('flipper_notifications')) {
+  devicePlugins.push(notificationPlugin);
+}
+
 const ListItem = styled('div')(({active}) => ({
   paddingLeft: 10,
   display: 'flex',
@@ -253,7 +255,7 @@ class MainSidebar extends Component<MainSidebarProps> {
           .map((client: Client) => (
             <React.Fragment key={client.id}>
               <SidebarHeader>{client.query.app}</SidebarHeader>
-              {plugins
+              {clientPlugins
                 .filter(
                   (p: Class<FlipperPlugin<>>) =>
                     client.plugins.indexOf(p.id) > -1,

src/device-plugins/index.js

@@ -1,25 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import type {FlipperDevicePlugin} from '../plugin.js';
-
-import {GK} from 'flipper';
-import logs from './logs/index.js';
-import cpu from './cpu/index.js';
-import notifications from './notifications/index.js';
-
-const plugins: Array<Class<FlipperDevicePlugin<any>>> = [logs];
-
-if (GK.get('sonar_uiperf')) {
-  plugins.push(cpu);
-}
-
-if (GK.get('flipper_notifications')) {
-  plugins.push(notifications);
-}
-
-export const devicePlugins = plugins;

src/device-plugins/notifications/index.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {SearchableProps, FlipperPlugin} from 'flipper';
+import type {SearchableProps, FlipperBasePlugin, Device} from 'flipper';
 import type {PluginNotification} from '../../reducers/notifications';
 import {selectPlugin} from '../../reducers/connections';
 
@@ -42,6 +42,10 @@ export default class Notifications extends FlipperDevicePlugin<{}> {
     store: PropTypes.object.isRequired,
   };
 
+  static supportsDevice(device: Device) {
+    return false;
+  }
+
   onKeyboardAction = (action: string) => {
     if (action === 'clear') {
       this.onClear();
@@ -347,7 +351,7 @@ class NotificationItem extends Component<ItemProps> {
     this.plugin = plugin;
   }
 
-  plugin: ?Class<FlipperPlugin<>>;
+  plugin: ?Class<FlipperBasePlugin<>>;
   contextMenuItems;
   deepLinkButton = React.createRef();
 

src/devices/BaseDevice.js

@@ -6,7 +6,6 @@
  */
 
 import type stream from 'stream';
-import {FlipperDevicePlugin} from 'flipper';
 
 export type LogLevel =
   | 'unknown'

src/plugins/cpu/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "flipper-plugin-device-cpu",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "adbkit-fb": "2.10.1"
+  }
+}

src/plugins/cpu/yarn.lock

@@ -0,0 +1,72 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+adbkit-fb@2.10.1:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/adbkit-fb/-/adbkit-fb-2.10.1.tgz#accd6209d8da9388124ace97f4fc3047aead18cc"
+  integrity sha512-ERq2JXpDkr/tpSDYKwQ4SbBakozBWnWbz3Pjc8EQ1bGCzxD0XkAnUjTaW4ANX9ijrj/fWgrCqp3FDTNq8fIYDQ==
+  dependencies:
+    adbkit-logcat-fb "^1.1.0"
+    adbkit-monkey "~1.0.1"
+    bluebird "~2.9.24"
+    commander "^2.3.0"
+    debug "~2.6.3"
+    node-forge "^0.7.1"
+    split "~0.3.3"
+
+adbkit-logcat-fb@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/adbkit-logcat-fb/-/adbkit-logcat-fb-1.1.0.tgz#af6416c7be95c18220a128a320276602881ec6b7"
+  integrity sha512-4A4gpQk0Y+xryVvQRkXFTMiqRauwGDQU5CKujymtcS/CQP78oDWfHkbjtm2ryc7O9DqrMlnsGRch1q41ErXJlA==
+
+adbkit-monkey@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/adbkit-monkey/-/adbkit-monkey-1.0.1.tgz#f291be701a2efc567a63fc7aa6afcded31430be1"
+  integrity sha1-8pG+cBou/FZ6Y/x6pq/N7TFDC+E=
+  dependencies:
+    async "~0.2.9"
+
+async@~0.2.9:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
+bluebird@~2.9.24:
+  version "2.9.34"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.34.tgz#2f7b4ec80216328a9fddebdf69c8d4942feff7d8"
+  integrity sha1-L3tOyAIWMoqf3evfacjUlC/v99g=
+
+commander@^2.3.0:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
+  integrity sha512-6CYPa+JP2ftfRU2qkDK+UTVeQYosOg/2GbcjIcKPHfinyOLPVGXu/ovN86RP49Re5ndJK1N0kuiidFFuepc4ZQ==
+
+debug@~2.6.3:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+node-forge@^0.7.1:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
+  integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==
+
+split@~0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
+  integrity sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=
+  dependencies:
+    through "2"
+
+through@2:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=

src/plugins/index.js

@@ -9,7 +9,11 @@ import {GK} from 'flipper';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as Flipper from 'flipper';
-import {FlipperPlugin, FlipperBasePlugin} from '../plugin.js';
+import {
+  FlipperPlugin,
+  FlipperBasePlugin,
+  FlipperDevicePlugin,
+} from '../plugin.js';
 import {remote} from 'electron';
 
 const plugins = new Map();
@@ -54,7 +58,7 @@ bundledPlugins
   }))
   .forEach(addIfNotAdded);
 
-const exportedPlugins: Array<Class<FlipperPlugin<>>> = Array.from(
+const exportedPlugins: Array<Class<FlipperBasePlugin<>>> = Array.from(
   plugins.values(),
 )
   .map(plugin => {
@@ -82,3 +86,11 @@ const exportedPlugins: Array<Class<FlipperPlugin<>>> = Array.from(
   .sort((a, b) => (a.title || '').localeCompare(b.title || ''));
 
 export default exportedPlugins;
+export const devicePlugins: Array<Class<FlipperDevicePlugin<>>> =
+  // $FlowFixMe
+  exportedPlugins.filter(
+    plugin => plugin.prototype instanceof FlipperDevicePlugin,
+  );
+export const clientPlugins: Array<Class<FlipperPlugin<>>> =
+  // $FlowFixMe
+  exportedPlugins.filter(plugin => plugin.prototype instanceof FlipperPlugin);

src/plugins/logs/index.js

@@ -15,7 +15,6 @@ import type {Counter} from './LogWatcher.js';
 import type {DeviceLogEntry} from '../../devices/BaseDevice.js';
 import type {Props as PluginProps} from '../../plugin';
 
-import * as React from 'react';
 import {
   Text,
   ManagedTable,
@@ -29,9 +28,9 @@ import {
   SearchableTable,
   styled,
   Device,
+  createPaste,
+  textContent,
 } from 'flipper';
-import textContent from '../../utils/textContent.js';
-import createPaste from '../../utils/createPaste.js';
 import LogWatcher from './LogWatcher';
 
 const LOG_WATCHER_LOCAL_STORAGE_KEY = 'LOG_WATCHER_LOCAL_STORAGE_KEY';

src/plugins/logs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "flipper-plugin-device-logs",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {}
+}

src/plugins/logs/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+