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,56 +102,74 @@ const Sidebar: React.FC<Props> = (props: Props) => {
     return <NoData grow>No data</NoData>;
   }
 
-  const sections: Array<any> =
+  const [sectionDefs, sectionKeys] = useMemo(() => {
+    const sectionKeys = [];
+    const sectionDefs = [];
+
+    for (const key in element.data) {
+      if (key === 'Extra Sections') {
+        for (const extraSection in element.data[key]) {
+          const section = element.data[key][extraSection];
+          let data = {};
+
+          // data might be sent as stringified JSON, we want to parse it for a nicer persentation.
+          if (typeof section === 'string') {
+            try {
+              data = JSON.parse(section);
+            } catch (e) {
+              // data was not a valid JSON, type is required to be an object
+              console.error(
+                `ElementsInspector unable to parse extra section: ${extraSection}`,
+              );
+              data = {};
+            }
+          } else {
+            data = section;
+          }
+          sectionKeys.push(kebabCase(extraSection));
+          sectionDefs.push({
+            key: extraSection,
+            id: extraSection,
+            data: data,
+          });
+        }
+      } else {
+        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(
-  for (const key in element.data) {
+    sectionDefs.map(def => (
-    if (key === 'Extra Sections') {
+      <InspectorSidebarSection
-      for (const extraSection in element.data[key]) {
+        tooltips={props.tooltips}
-        const section = element.data[key][extraSection];
+        key={def.key}
-        let data = {};
+        id={def.id}
-
+        data={def.data}
-        // data might be sent as stringified JSON, we want to parse it for a nicer persentation.
+        onValueChanged={props.onValueChanged}
-        if (typeof section === 'string') {
+      />
-          try {
+    )),
-            data = JSON.parse(section);
+  );
-          } catch (e) {
-            // data was not a valid JSON, type is required to be an object
-            console.error(
-              `ElementsInspector unable to parse extra section: ${extraSection}`,
-            );
-            data = {};
-          }
-        } else {
-          data = section;
-        }
-        sections.push(
-          <InspectorSidebarSection
-            tooltips={props.tooltips}
-            key={extraSection}
-            id={extraSection}
-            data={data}
-            onValueChanged={props.onValueChanged}
-          />,
-        );
-      }
-    } else {
-      sections.push(
-        <InspectorSidebarSection
-          tooltips={props.tooltips}
-          key={key}
-          id={key}
-          data={element.data[key]}
-          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"