From afee624ad6710ec5369dc11c2114f37899961d54 Mon Sep 17 00:00:00 2001
From: Pascal Hartig <realpassy@fb.com>
Date: Fri, 10 Jan 2020 05:16:54 -0800
Subject: [PATCH] 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 | 110 ++++++++++++++----------
 src/plugins/layout/package.json         |   5 +-
 src/plugins/layout/yarn.lock            |   5 ++
 3 files changed, 74 insertions(+), 46 deletions(-)

diff --git a/src/plugins/layout/InspectorSidebar.tsx b/src/plugins/layout/InspectorSidebar.tsx
index 43733500e..01197cf70 100644
--- a/src/plugins/layout/InspectorSidebar.tsx
+++ b/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),
       )) ||
-    [];
-
-  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;
-        }
-        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}
-        />,
-      );
-    }
-  }
+    []
+  ).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;
diff --git a/src/plugins/layout/package.json b/src/plugins/layout/package.json
index 07b7b2505..9a626ff9d 100644
--- a/src/plugins/layout/package.json
+++ b/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"
   },
diff --git a/src/plugins/layout/yarn.lock b/src/plugins/layout/yarn.lock
index d2948747c..47a2347f5 100644
--- a/src/plugins/layout/yarn.lock
+++ b/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"