Request all metadata for Images plugin before export

Summary:
Fresco plugin on the desktop side used to ask for all the image list along with the metadata when it was mounted. The mobile side never sent the image list and other information if not requested from it. That means, although Fresco plugin is a background plugin, there weren't any messages sent from the mobile side. Thus there was no trace available for Images plugin when the trace was exported. This diff, adds a hook which gets called before the export, where we request all the metadata from the mobile SDK.

BUG:

{F159305887}

Reviewed By: passy

Differential Revision: D15407962

fbshipit-source-id: 0012de2ab29d0f62e92d00f4926b04b1e394b62a

src/plugins/fresco/index.js

@@ -15,7 +15,7 @@ import type {
   CacheInfo,
 } from './api.js';
 import type {ImagesMap} from './ImagePool.js';
-import type {MetricType} from 'flipper';
+import type {MetricType, MiddlewareAPI} from 'flipper';
 import React from 'react';
 import ImagesCacheOverview from './ImagesCacheOverview.js';
 import {
@@ -65,6 +65,12 @@ const debugLog = (...args) => {
   }
 };
 
+type ImagesMetaData = {|
+  levels: ImagesListResponse,
+  events: Array<ImageEventWithId>,
+  imageDataList: Array<ImageData>,
+|};
+
 export default class extends FlipperPlugin<PluginState, *, PersistedState> {
   static defaultPersistedState: PersistedState = {
     images: [],
@@ -73,6 +79,52 @@ export default class extends FlipperPlugin<PluginState, *, PersistedState> {
     surfaceList: new Set(),
   };
 
+  static exportPersistedState = (
+    callClient: (string, ?Object) => Promise<Object>,
+    persistedState: ?PersistedState,
+    store: ?MiddlewareAPI,
+  ): Promise<?PersistedState> => {
+    if (persistedState) {
+      return Promise.resolve(persistedState);
+    }
+    const defaultPromise = Promise.resolve(persistedState);
+    if (!store) {
+      return defaultPromise;
+    }
+    return callClient('getAllImageData').then((data: ImagesMetaData) => {
+      if (!data) {
+        return;
+      }
+      const {levels, events, imageDataList} = data;
+      let pluginData: PersistedState = {
+        images: [...levels.levels],
+        surfaceList: new Set(),
+        events: [],
+        imagesMap: {},
+      };
+
+      events.forEach((event: ImageEventWithId, index) => {
+        const {attribution} = event;
+        if (attribution instanceof Array && attribution.length > 0) {
+          const surface = attribution[0].trim();
+          if (surface.length > 0) {
+            pluginData.surfaceList.add(surface);
+          }
+        }
+        pluginData = {
+          ...pluginData,
+          events: [{eventId: index, ...event}, ...pluginData.events],
+        };
+      });
+
+      imageDataList.forEach((imageData: ImageData) => {
+        const {imageId} = imageData;
+        pluginData.imagesMap[imageId] = imageData;
+      });
+      return pluginData;
+    });
+  };
+
   static metricsReducer = (
     persistedState: PersistedState,
   ): Promise<MetricType> => {
@@ -113,42 +165,6 @@ export default class extends FlipperPlugin<PluginState, *, PersistedState> {
     coldStartFilter: false,
   };
 
-  init() {
-    debugLog('init()');
-    this.updateCaches('init');
-    this.client.subscribe('events', (event: ImageEvent) => {
-      const {surfaceList} = this.props.persistedState;
-      const {attribution} = event;
-      if (attribution instanceof Array && attribution.length > 0) {
-        const surface = attribution[0].trim();
-        if (surface.length > 0) {
-          surfaceList.add(surface);
-        }
-      }
-      this.props.setPersistedState({
-        events: [
-          {eventId: this.nextEventId, ...event},
-          ...this.props.persistedState.events,
-        ],
-      });
-      this.nextEventId++;
-    });
-    this.client.subscribe(
-      'debug_overlay_event',
-      (event: FrescoDebugOverlayEvent) => {
-        this.setState({isDebugOverlayEnabled: event.enabled});
-      },
-    );
-
-    this.imagePool = new ImagePool(this.getImage, (images: ImagesMap) =>
-      this.props.setPersistedState({imagesMap: images}),
-    );
-  }
-
-  teardown() {
-    this.imagePool.clear();
-  }
-
   filterImages = (
     images: ImagesList,
     events: Array<ImageEventWithId>,
@@ -183,6 +199,49 @@ export default class extends FlipperPlugin<PluginState, *, PersistedState> {
     return imageList;
   };
 
+  init() {
+    debugLog('init()');
+    this.updateCaches('init');
+    this.client.subscribe('events', (event: ImageEvent) => {
+      const {surfaceList} = this.props.persistedState;
+      const {attribution} = event;
+      if (attribution instanceof Array && attribution.length > 0) {
+        const surface = attribution[0].trim();
+        if (surface.length > 0) {
+          surfaceList.add(surface);
+        }
+      }
+      this.props.setPersistedState({
+        events: [
+          {eventId: this.nextEventId, ...event},
+          ...this.props.persistedState.events,
+        ],
+      });
+      this.nextEventId++;
+    });
+    this.client.subscribe(
+      'debug_overlay_event',
+      (event: FrescoDebugOverlayEvent) => {
+        this.setState({isDebugOverlayEnabled: event.enabled});
+      },
+    );
+    this.imagePool = new ImagePool(this.getImage, (images: ImagesMap) =>
+      this.props.setPersistedState({imagesMap: images}),
+    );
+
+    let images = this.filterImages(
+      this.props.persistedState.images,
+      this.props.persistedState.events,
+      this.state.selectedSurface,
+      this.state.coldStartFilter,
+    );
+    this.setState({images});
+  }
+
+  teardown() {
+    this.imagePool.clear();
+  }
+
   updateImagesOnUI = (
     images: ImagesList,
     surface: string,

src/utils/exportData.js

@@ -319,6 +319,15 @@ export function importDataToStore(data: string, store: Store) {
 
   const {pluginStates} = json.store;
   const keys = Object.keys(pluginStates);
+  keys.forEach(key => {
+    store.dispatch({
+      type: 'SET_PLUGIN_STATE',
+      payload: {
+        pluginKey: key,
+        state: pluginStates[key],
+      },
+    });
+  });
   clients.forEach(client => {
     const clientPlugins = keys
       .filter(key => {
@@ -340,15 +349,6 @@ export function importDataToStore(data: string, store: Store) {
       ),
     });
   });
-  keys.forEach(key => {
-    store.dispatch({
-      type: 'SET_PLUGIN_STATE',
-      payload: {
-        pluginKey: key,
-        state: pluginStates[key],
-      },
-    });
-  });
 }
 
 export const importFileToStore = (file: string, store: Store) => {