Plugin memory warning 1/n

Summary:
Added a warning on top of plugin list when queued message consumption passes a threshold.

This is designed to make users aware of the resource use of background plugins

Reviewed By: antonk52

Differential Revision: D57904618

fbshipit-source-id: b5514826c53c477407f1b1f13350c874d884d267

desktop/flipper-ui/src/Client.tsx

@@ -129,7 +129,7 @@ export default class Client extends EventEmitter {
     string /*pluginKey*/,
     {
       plugin: _SandyPluginInstance;
-      messages: Params[];
+      messages: (Params & {rawSize: number})[];
     }
   > = {};
 
@@ -396,8 +396,12 @@ export default class Client extends EventEmitter {
           if (!data.params) {
             throw new Error('expected params');
           }
-          const params: Params = data.params;
+
           const bytes = msg.length * 2; // string lengths are measured in UTF-16 units (not characters), so 2 bytes per char
+          const params: Params & {rawSize: number} = {
+            ...data.params,
+            rawSize: bytes,
+          };
           this.emit('bytes-received', params.api, bytes);
           if (bytes > 5 * 1024 * 1024) {
             console.warn(

desktop/flipper-ui/src/reducers/pluginMessageQueue.tsx

@@ -14,6 +14,8 @@ export const DEFAULT_MAX_QUEUE_SIZE = 10000;
 
 export type Message = {
   method: string;
+  /** raw size of message in bytes */
+  rawSize: number;
   params?: any;
 };
 

desktop/flipper-ui/src/sandy-chrome/appinspect/PluginList.tsx

@@ -35,6 +35,7 @@ import {reportUsage} from 'flipper-common';
 import ConnectivityStatus from './fb-stubs/ConnectivityStatus';
 import {useSelector} from 'react-redux';
 import {getPluginLists} from '../../selectors/connections';
+import {PluginMemoryWarning} from './PluginMemoryWarning';
 
 const {SubMenu} = Menu;
 const {Text} = Typography;
@@ -201,6 +202,7 @@ export const PluginList = memo(function PluginList({
             connections.selectedPlugin ? [connections.selectedPlugin] : []
           }
           mode="inline">
+          <PluginMemoryWarning />
           <PluginGroup key="enabled" title="Enabled">
             {allEnabledPlugins}
           </PluginGroup>

desktop/flipper-ui/src/sandy-chrome/appinspect/PluginMemoryWarning.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {WarningOutlined} from '@ant-design/icons';
+import {Button} from 'antd';
+import {Layout, theme} from 'flipper-plugin';
+import {getStore} from 'flipper-ui/src/store';
+import React, {useEffect, useState} from 'react';
+
+const PluginQueueMemoryUsageScanInterval = 2500;
+
+export function PluginMemoryWarning() {
+  const [_, rerender] = useState(0);
+
+  useEffect(() => {
+    const handle = setInterval(() => {
+      rerender((x) => x + 1);
+    }, PluginQueueMemoryUsageScanInterval);
+
+    return () => {
+      clearInterval(handle);
+    };
+  }, []);
+
+  const totalSizeMb = getQueuedMessagedConsumption();
+
+  if (totalSizeMb < 50) {
+    return null;
+  }
+
+  const color = totalSizeMb < 150 ? theme.warningColor : theme.errorColor;
+
+  return (
+    <Layout.Container pad="small">
+      <Button
+        style={{padding: 4}}
+        type="ghost"
+        icon={
+          <WarningOutlined style={{color, fontSize: theme.fontSize.large}} />
+        }>
+        {totalSizeMb.toFixed(0)}Mb queued messages
+      </Button>
+    </Layout.Container>
+  );
+}
+
+function getQueuedMessagedConsumption() {
+  const messageQueues = getStore().getState().pluginMessageQueue;
+  let totalSize = 0;
+  for (const queue of Object.values(messageQueues)) {
+    for (const message of queue) {
+      totalSize += message.rawSize;
+    }
+  }
+
+  const totalSizeMb = totalSize / 1000000;
+  return totalSizeMb;
+}

desktop/flipper-ui/src/utils/__tests__/messageQueueSandy.node.tsx

@@ -718,7 +718,11 @@ test('queue will be cleaned up when it exceeds maximum size', () => {
   for (i = 0; i < queueSize; i++) {
     state = pluginMessageQueue(
       state,
-      queueMessages(pluginKey, [{method: 'test', params: {i}}], queueSize),
+      queueMessages(
+        pluginKey,
+        [{method: 'test', params: {i}, rawSize: 10}],
+        queueSize,
+      ),
     );
   }
   // almost full
@@ -731,7 +735,11 @@ test('queue will be cleaned up when it exceeds maximum size', () => {
 
   state = pluginMessageQueue(
     state,
-    queueMessages(pluginKey, [{method: 'test', params: {i: ++i}}], queueSize),
+    queueMessages(
+      pluginKey,
+      [{method: 'test', params: {i: ++i}, rawSize: 10}],
+      queueSize,
+    ),
   );
 
   const newLength = Math.ceil(0.9 * queueSize) + 1; // ~4500

desktop/flipper-ui/src/utils/__tests__/pluginUtils.node.tsx

@@ -119,7 +119,7 @@ test('getActivePersistentPlugins, with message queue', async () => {
 
   state.pluginMessageQueue = {
     [getPluginKey(client.id, device, 'ClientPlugin3')]: [
-      {method: 'msg', params: {msg: 'ClientPlugin3'}},
+      {method: 'msg', params: {msg: 'ClientPlugin3'}, rawSize: 10},
     ],
   };