fps graph + network graph

Reviewed By: LukeDefeo

Differential Revision: D47436168

fbshipit-source-id: 02faf84b513ed724bd4e3b5ebd606758301392d5

desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx

@@ -38,9 +38,6 @@ import {setStaticView} from '../reducers/connections';
 import {SandyRatingButton} from '../chrome/RatingButton';
 import {filterNotifications} from './notification/notificationUtils';
 import {useMemoize} from 'flipper-plugin';
-import isProduction from '../utils/isProduction';
-import NetworkGraph from '../chrome/NetworkGraph';
-import FpsGraph from '../chrome/FpsGraph';
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import constants from '../fb-stubs/constants';
 import {
@@ -173,12 +170,6 @@ export const LeftRail = withTrackingScope(function LeftRail({
           />
         </Layout.Container>
         <Layout.Container center gap={10} padh={6}>
-          {!isProduction() && (
-            <div>
-              <FpsGraph />
-              <NetworkGraph />
-            </div>
-          )}
           <UpdateIndicator />
           <SandyRatingButton />
           <RightSidebarToggleButton />

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -32,6 +32,9 @@ import {toggleLeftSidebarVisible} from '../reducers/application';
 import PluginManager from '../chrome/plugin-manager/PluginManager';
 import {showEmulatorLauncher} from './appinspect/LaunchEmulator';
 import SetupDoctorScreen, {checkHasNewProblem} from './SetupDoctorScreen';
+import {isProduction} from 'flipper-common';
+import FpsGraph from '../chrome/FpsGraph';
+import NetworkGraph from '../chrome/NetworkGraph';
 
 export function Navbar() {
   return (
@@ -51,6 +54,12 @@ export function Navbar() {
         <NavbarButton label="Screenshot" icon={CameraOutlined} />
         <NavbarButton label="Record" icon={VideoCameraOutlined} />
         <LaunchEmulatorButton />
+        {!isProduction() && (
+          <div>
+            <FpsGraph />
+            <NetworkGraph />
+          </div>
+        )}
       </Layout.Horizontal>
       <Layout.Horizontal style={{gap: 4, alignItems: 'center'}}>
         <NavbarButton
@@ -135,7 +144,7 @@ function NavbarButton({
   // TODO remove optional
   onClick?: () => void;
   toggled?: boolean;
-  /** red bubble in top right corner, notification like */
+  /** TODO red bubble in top right corner, notification like */
   count?: number | true;
 }) {
   const color = toggled ? theme.primaryColor : theme.textColorActive;