Logging for inspector sections

Summary:
This is what I wanted to have the functional component for. This makes it super easy to keep track of the sections we've loaded and then make a side-effecting logging call "on mount" to keep track of the impressions different sidebar extensions get.

This should also save some CPU cycles when calculating what to show in the sidebar. Not sure how meaningful that is, though.

Reviewed By: jknoxville

Differential Revision: D19331682

fbshipit-source-id: 44f83006634f50d8f7437286b8915b63f9c47d40

src/plugins/layout/InspectorSidebar.tsx

@@ -22,6 +22,8 @@ import {Logger} from '../../fb-interfaces/Logger';
 import {Component} from 'react';
 import deepEqual from 'deep-equal';
 import React from 'react';
+import {useMemo, useEffect} from 'react';
+import {kebabCase} from 'lodash';
 
 const NoData = styled(FlexCenter)({
   fontSize: 18,
@@ -100,12 +102,9 @@ const Sidebar: React.FC<Props> = (props: Props) => {
     return <NoData grow>No data</NoData>;
   }
 
-  const sections: Array<any> =
-    (SidebarExtensions &&
-      SidebarExtensions.map(ext =>
-        ext(props.client, props.realClient, element.id, props.logger),
-      )) ||
-    [];
+  const [sectionDefs, sectionKeys] = useMemo(() => {
+    const sectionKeys = [];
+    const sectionDefs = [];
 
     for (const key in element.data) {
       if (key === 'Extra Sections') {
@@ -127,29 +126,50 @@ const Sidebar: React.FC<Props> = (props: Props) => {
           } else {
             data = section;
           }
-        sections.push(
-          <InspectorSidebarSection
-            tooltips={props.tooltips}
-            key={extraSection}
-            id={extraSection}
-            data={data}
-            onValueChanged={props.onValueChanged}
-          />,
-        );
+          sectionKeys.push(kebabCase(extraSection));
+          sectionDefs.push({
+            key: extraSection,
+            id: extraSection,
+            data: data,
+          });
         }
       } else {
-      sections.push(
-        <InspectorSidebarSection
-          tooltips={props.tooltips}
-          key={key}
-          id={key}
-          data={element.data[key]}
-          onValueChanged={props.onValueChanged}
-        />,
-      );
+        sectionKeys.push(kebabCase(key));
+        sectionDefs.push({
+          key,
+          id: key,
+          data: element.data[key],
+        });
       }
     }
 
+    return [sectionDefs, sectionKeys];
+  }, [props.element]);
+
+  const sections: Array<React.ReactNode> = (
+    (SidebarExtensions &&
+      SidebarExtensions.map(ext =>
+        ext(props.client, props.realClient, element.id, props.logger),
+      )) ||
+    []
+  ).concat(
+    sectionDefs.map(def => (
+      <InspectorSidebarSection
+        tooltips={props.tooltips}
+        key={def.key}
+        id={def.id}
+        data={def.data}
+        onValueChanged={props.onValueChanged}
+      />
+    )),
+  );
+
+  useEffect(() => {
+    sectionKeys.map(key =>
+      props.logger.track('usage', `layout-sidebar-extension:${key}:loaded`),
+    );
+  }, [props.element?.data]);
   return <>{sections}</>;
 };
+
 export default Sidebar;

src/plugins/layout/package.json

@@ -3,9 +3,12 @@
   "version": "1.0.0",
   "main": "index.tsx",
   "license": "MIT",
-  "keywords": ["flipper-plugin"],
+  "keywords": [
+    "flipper-plugin"
+  ],
   "dependencies": {
     "deep-equal": "^2.0.1",
+    "lodash": "^4.17.15",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8"
   },

src/plugins/layout/yarn.lock

@@ -195,6 +195,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
 object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"