Convert CPU plugin to Sandy

Summary:
Starts converting the plugin by moving to new model and switching some of the UI components.

No logic changes here, it's just shifting everything over.

Reviewed By: mweststrate

Differential Revision: D28028052

fbshipit-source-id: 7444eab77d9dba49261a70887ee26b8d120e97a6

desktop/plugins/public/cpu/index.tsx

@@ -7,23 +7,29 @@
  * @format
  */
 
-import {FlipperDevicePlugin, Device, AndroidDevice} from 'flipper';
+import {
+  createState,
+  PluginClient,
+  usePlugin,
+  useValue,
+  Panel,
+  theme,
+  Layout,
+} from 'flipper-plugin';
 import adb from 'adbkit';
 import TemperatureTable from './TemperatureTable';
+import {Button, Typography} from 'antd';
+import {PlayCircleOutlined, PauseCircleOutlined} from '@ant-design/icons';
 
 import {
-  FlexColumn,
-  Button,
   Toolbar,
-  Text,
   ManagedTable,
   colors,
   styled,
-  Panel,
   DetailSidebar,
   ToggleButton,
 } from 'flipper';
-import React from 'react';
+import React, {useState} from 'react';
 
 type TableRows = any;
 
@@ -46,7 +52,6 @@ type CPUState = {
   cpuCount: number;
   monitoring: boolean;
   hardwareInfo: string;
-  selectedIds: Array<number>;
   temperatureMap: any;
   thermalAccessible: boolean;
   displayThermalInfo: boolean;
@@ -124,38 +129,255 @@ function formatFrequency(freq: number) {
   }
 }
 
-export default class CPUFrequencyTable extends FlipperDevicePlugin<
+export function devicePlugin(client: PluginClient<{}, {}>) {
-  CPUState,
+  const device = client.device;
-  any,
+
-  any
+  const executeShell = (callback: ShellCallBack, command: string) => {
-> {
+    return (device.realDevice as any).adb
-  intervalID: NodeJS.Timer | null = null;
+      .shell(device.serial, command)
-  state: CPUState = {
+      .then(adb.util.readAll)
+      .then(function (output: {toString: () => {trim: () => string}}) {
+        return callback(output.toString().trim());
+      });
+  };
+
+  let intervalID: NodeJS.Timer | null = null;
+  const cpuState = createState<CPUState>({
     cpuCount: 0,
     cpuFreq: [],
     monitoring: false,
     hardwareInfo: '',
-    selectedIds: [],
     temperatureMap: {},
     thermalAccessible: true,
     displayThermalInfo: false,
     displayCPUDetail: true,
+  });
+
+  const updateCoreFrequency = (core: number, type: string) => {
+    executeShell((output: string) => {
+      cpuState.update((draft) => {
+        const newFreq = isNormalInteger(output) ? parseInt(output, 10) : -1;
+        // update table only if frequency changed
+        if (draft.cpuFreq[core][type] != newFreq) {
+          draft.cpuFreq[core][type] = newFreq;
+          if (type == 'scaling_cur_freq' && draft.cpuFreq[core][type] < 0) {
+            // cannot find current freq means offline
+            draft.cpuFreq[core][type] = -2;
+          }
+        }
+        return draft;
+      });
+    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/' + type);
   };
 
-  static supportsDevice(device: Device) {
+  const updateAvailableFrequencies = (core: number) => {
-    return (
+    executeShell((output: string) => {
-      device.os === 'Android' &&
+      cpuState.update((draft) => {
-      device.deviceType === 'physical' &&
+        const freqs = output.split(' ').map((num: string) => {
-      !device.isArchived
+          return parseInt(num, 10);
-    );
+        });
+        draft.cpuFreq[core].scaling_available_freqs = freqs;
+        const maxFreq = draft.cpuFreq[core].scaling_max_freq;
+        if (maxFreq > 0 && freqs.indexOf(maxFreq) == -1) {
+          freqs.push(maxFreq); // always add scaling max to available frequencies
+        }
+        return draft;
+      });
+    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_available_frequencies');
+  };
+
+  const updateCoreGovernor = (core: number) => {
+    executeShell((output: string) => {
+      cpuState.update((draft) => {
+        if (output.toLowerCase().includes('no such file')) {
+          draft.cpuFreq[core].scaling_governor = 'N/A';
+        } else {
+          draft.cpuFreq[core].scaling_governor = output;
+        }
+        return draft;
+      });
+    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_governor');
+  };
+
+  const readAvailableGovernors = (core: number) => {
+    executeShell((output: string) => {
+      cpuState.update((draft) => {
+        draft.cpuFreq[core].scaling_available_governors = output.split(' ');
+        return draft;
+      });
+    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_available_governors');
+  };
+
+  const readCoreFrequency = (core: number) => {
+    const freq = cpuState.get().cpuFreq[core];
+    if (freq.cpuinfo_max_freq < 0) {
+      updateCoreFrequency(core, 'cpuinfo_max_freq');
+    }
+    if (freq.cpuinfo_min_freq < 0) {
+      updateCoreFrequency(core, 'cpuinfo_min_freq');
+    }
+    updateCoreFrequency(core, 'scaling_cur_freq');
+    updateCoreFrequency(core, 'scaling_min_freq');
+    updateCoreFrequency(core, 'scaling_max_freq');
+  };
+
+  const updateHardwareInfo = () => {
+    executeShell((output: string) => {
+      let hwInfo = '';
+      if (
+        output.startsWith('msm') ||
+        output.startsWith('apq') ||
+        output.startsWith('sdm')
+      ) {
+        hwInfo = 'QUALCOMM ' + output.toUpperCase();
+      } else if (output.startsWith('exynos')) {
+        executeShell((output: string) => {
+          if (output != null) {
+            cpuState.update((draft) => {
+              draft.hardwareInfo = 'SAMSUMG ' + output.toUpperCase();
+            });
+          }
+        }, 'getprop ro.chipname');
+        return;
+      } else if (output.startsWith('mt')) {
+        hwInfo = 'MEDIATEK ' + output.toUpperCase();
+      } else if (output.startsWith('sc')) {
+        hwInfo = 'SPREADTRUM ' + output.toUpperCase();
+      } else if (output.startsWith('hi') || output.startsWith('kirin')) {
+        hwInfo = 'HISILICON ' + output.toUpperCase();
+      } else if (output.startsWith('rk')) {
+        hwInfo = 'ROCKCHIP ' + output.toUpperCase();
+      } else if (output.startsWith('bcm')) {
+        hwInfo = 'BROADCOM ' + output.toUpperCase();
+      }
+      cpuState.update((draft) => {
+        draft.hardwareInfo = hwInfo;
+        return draft;
+      });
+    }, 'getprop ro.board.platform');
+  };
+
+  const readThermalZones = () => {
+    const thermal_dir = '/sys/class/thermal/';
+    const map = {};
+    executeShell(async (output: string) => {
+      if (output.toLowerCase().includes('permission denied')) {
+        cpuState.update((draft) => {
+          draft.thermalAccessible = false;
+          return draft;
+        });
+        return;
+      }
+      const dirs = output.split(/\s/);
+      const promises = [];
+      for (let d of dirs) {
+        d = d.trim();
+        if (d.length == 0) {
+          continue;
+        }
+        const path = thermal_dir + d;
+        promises.push(readThermalZone(path, d, map));
+      }
+      await Promise.all(promises);
+      cpuState.update((draft) => {
+        draft.temperatureMap = map;
+        draft.thermalAccessible = true;
+        return draft;
+      });
+      if (cpuState.get().displayThermalInfo) {
+        setTimeout(readThermalZones, 1000);
+      }
+    }, 'ls ' + thermal_dir);
+  };
+
+  const readThermalZone = (path: string, dir: string, map: any) => {
+    return executeShell((type: string) => {
+      if (type.length == 0) {
+        return;
+      }
+      return executeShell((temp: string) => {
+        if (Number.isNaN(Number(temp))) {
+          return;
+        }
+        map[type] = {
+          path: dir,
+          temp: parseInt(temp, 10),
+        };
+      }, 'cat ' + path + '/temp');
+    }, 'cat ' + path + '/type');
+  };
+
+  const onStartMonitor = () => {
+    if (intervalID) {
+      return;
     }
 
-  init() {
+    for (let i = 0; i < cpuState.get().cpuCount; ++i) {
-    this.updateHardwareInfo();
+      readAvailableGovernors(i);
-    this.readThermalZones();
+    }
+
+    intervalID = setInterval(() => {
+      console.log('Starting task');
+      for (let i = 0; i < cpuState.get().cpuCount; ++i) {
+        readCoreFrequency(i);
+        updateCoreGovernor(i);
+        updateAvailableFrequencies(i); // scaling max might change, so we also update this
+      }
+    }, 500);
+    cpuState.update((draft) => {
+      draft.monitoring = true;
+    });
+  };
+
+  const onStopMonitor = () => {
+    if (!intervalID) {
+      return;
+    } else {
+      clearInterval(intervalID);
+      intervalID = null;
+      cpuState.update((draft) => {
+        draft.monitoring = false;
+        return draft;
+      });
+      cleanup();
+    }
+  };
+
+  const cleanup = () => {
+    cpuState.update((draft) => {
+      for (let i = 0; i < draft.cpuCount; ++i) {
+        draft.cpuFreq[i].scaling_cur_freq = -1;
+        draft.cpuFreq[i].scaling_min_freq = -1;
+        draft.cpuFreq[i].scaling_max_freq = -1;
+        draft.cpuFreq[i].scaling_available_freqs = [];
+        draft.cpuFreq[i].scaling_governor = 'N/A';
+        // we don't cleanup cpuinfo_min_freq, cpuinfo_max_freq
+        // because usually they are fixed (hardware)
+      }
+    });
+  };
+
+  const toggleThermalSidebar = () => {
+    if (!cpuState.get().displayThermalInfo) {
+      readThermalZones();
+    }
+    cpuState.update((draft) => {
+      draft.displayThermalInfo = !draft.displayThermalInfo;
+      draft.displayCPUDetail = false;
+      return draft;
+    });
+  };
+
+  const toggleCPUSidebar = () => {
+    cpuState.update((draft) => {
+      draft.displayCPUDetail = !draft.displayCPUDetail;
+      draft.displayThermalInfo = false;
+      return draft;
+    });
+  };
 
   // check how many cores we have on this device
-    this.executeShell((output: string) => {
+  executeShell((output: string) => {
     const idx = output.indexOf('-');
     const cpuFreq = [];
     const count = parseInt(output.substring(idx + 1), 10) + 1;
@@ -172,237 +394,49 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
         scaling_available_governors: [],
       };
     }
-      this.setState({
+    cpuState.set({
       cpuCount: count,
       cpuFreq: cpuFreq,
       monitoring: false,
       hardwareInfo: '',
-        selectedIds: [],
       temperatureMap: {},
       thermalAccessible: true,
       displayThermalInfo: false,
       displayCPUDetail: true,
     });
   }, 'cat /sys/devices/system/cpu/possible');
-  }
+
-  executeShell = (callback: ShellCallBack, command: string) => {
+  client.onDeactivate(() => cleanup());
-    return (this.device as AndroidDevice).adb
+  client.onActivate(() => {
-      .shell(this.device.serial, command)
+    updateHardwareInfo();
-      .then(adb.util.readAll)
+    readThermalZones();
-      .then(function (output: {toString: () => {trim: () => string}}) {
-        return callback(output.toString().trim());
   });
+
+  return {
+    executeShell,
+    cpuState,
+    onStartMonitor,
+    onStopMonitor,
+    toggleCPUSidebar,
+    toggleThermalSidebar,
   };
-
-  updateCoreFrequency = (core: number, type: string) => {
-    this.executeShell((output: string) => {
-      const cpuFreq = this.state.cpuFreq;
-      const newFreq = isNormalInteger(output) ? parseInt(output, 10) : -1;
-      // update table only if frequency changed
-      if (cpuFreq[core][type] != newFreq) {
-        cpuFreq[core][type] = newFreq;
-        if (type == 'scaling_cur_freq' && cpuFreq[core][type] < 0) {
-          // cannot find current freq means offline
-          cpuFreq[core][type] = -2;
 }
 
-        this.setState({
+export function Component() {
-          cpuFreq: cpuFreq,
+  const instance = usePlugin(devicePlugin);
-        });
+  const {
-      }
+    onStartMonitor,
-    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/' + type);
+    onStopMonitor,
-  };
+    toggleCPUSidebar,
+    toggleThermalSidebar,
+  } = instance;
 
-  updateAvailableFrequencies = (core: number) => {
+  const cpuState = useValue(instance.cpuState);
-    this.executeShell((output: string) => {
-      const cpuFreq = this.state.cpuFreq;
-      const freqs = output.split(' ').map((num: string) => {
-        return parseInt(num, 10);
-      });
-      cpuFreq[core].scaling_available_freqs = freqs;
-      const maxFreq = cpuFreq[core].scaling_max_freq;
-      if (maxFreq > 0 && freqs.indexOf(maxFreq) == -1) {
-        freqs.push(maxFreq); // always add scaling max to available frequencies
-      }
-      this.setState({
-        cpuFreq: cpuFreq,
-      });
-    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_available_frequencies');
-  };
 
-  updateCoreGovernor = (core: number) => {
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-    this.executeShell((output: string) => {
-      const cpuFreq = this.state.cpuFreq;
-      if (output.toLowerCase().includes('no such file')) {
-        cpuFreq[core].scaling_governor = 'N/A';
-      } else {
-        cpuFreq[core].scaling_governor = output;
-      }
-      this.setState({
-        cpuFreq: cpuFreq,
-      });
-    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_governor');
-  };
 
-  readAvailableGovernors = (core: number) => {
+  const buildRow = (freq: CPUFrequency, idx: number) => {
-    this.executeShell((output: string) => {
+    const selected = selectedIds.indexOf(idx) >= 0;
-      const cpuFreq = this.state.cpuFreq;
-      cpuFreq[core].scaling_available_governors = output.split(' ');
-
-      this.setState({
-        cpuFreq: cpuFreq,
-      });
-    }, 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_available_governors');
-  };
-
-  readCoreFrequency = (core: number) => {
-    const freq = this.state.cpuFreq[core];
-    if (freq.cpuinfo_max_freq < 0) {
-      this.updateCoreFrequency(core, 'cpuinfo_max_freq');
-    }
-    if (freq.cpuinfo_min_freq < 0) {
-      this.updateCoreFrequency(core, 'cpuinfo_min_freq');
-    }
-    this.updateCoreFrequency(core, 'scaling_cur_freq');
-    this.updateCoreFrequency(core, 'scaling_min_freq');
-    this.updateCoreFrequency(core, 'scaling_max_freq');
-  };
-
-  updateHardwareInfo = () => {
-    this.executeShell((output: string) => {
-      let hwInfo = '';
-      if (
-        output.startsWith('msm') ||
-        output.startsWith('apq') ||
-        output.startsWith('sdm')
-      ) {
-        hwInfo = 'QUALCOMM ' + output.toUpperCase();
-      } else if (output.startsWith('exynos')) {
-        this.executeShell((output: string) => {
-          if (output != null) {
-            this.setState({
-              hardwareInfo: 'SAMSUMG ' + output.toUpperCase(),
-            });
-          }
-        }, 'getprop ro.chipname');
-        return;
-      } else if (output.startsWith('mt')) {
-        hwInfo = 'MEDIATEK ' + output.toUpperCase();
-      } else if (output.startsWith('sc')) {
-        hwInfo = 'SPREADTRUM ' + output.toUpperCase();
-      } else if (output.startsWith('hi') || output.startsWith('kirin')) {
-        hwInfo = 'HISILICON ' + output.toUpperCase();
-      } else if (output.startsWith('rk')) {
-        hwInfo = 'ROCKCHIP ' + output.toUpperCase();
-      } else if (output.startsWith('bcm')) {
-        hwInfo = 'BROADCOM ' + output.toUpperCase();
-      }
-      this.setState({
-        hardwareInfo: hwInfo,
-      });
-    }, 'getprop ro.board.platform');
-  };
-
-  readThermalZones = () => {
-    const thermal_dir = '/sys/class/thermal/';
-    const map = {};
-    this.executeShell(async (output: string) => {
-      if (output.toLowerCase().includes('permission denied')) {
-        this.setState({thermalAccessible: false});
-        return;
-      }
-      const dirs = output.split(/\s/);
-      const promises = [];
-      for (let d of dirs) {
-        d = d.trim();
-        if (d.length == 0) {
-          continue;
-        }
-        const path = thermal_dir + d;
-        promises.push(this.readThermalZone(path, d, map));
-      }
-      await Promise.all(promises);
-      this.setState({temperatureMap: map, thermalAccessible: true});
-      if (this.state.displayThermalInfo) {
-        setTimeout(this.readThermalZones, 1000);
-      }
-    }, 'ls ' + thermal_dir);
-  };
-
-  readThermalZone = (path: string, dir: string, map: any) => {
-    return this.executeShell((type: string) => {
-      if (type.length == 0) {
-        return;
-      }
-      return this.executeShell((temp: string) => {
-        if (Number.isNaN(Number(temp))) {
-          return;
-        }
-        map[type] = {
-          path: dir,
-          temp: parseInt(temp, 10),
-        };
-      }, 'cat ' + path + '/temp');
-    }, 'cat ' + path + '/type');
-  };
-
-  onStartMonitor = () => {
-    if (this.intervalID) {
-      return;
-    }
-
-    for (let i = 0; i < this.state.cpuCount; ++i) {
-      this.readAvailableGovernors(i);
-    }
-
-    this.intervalID = setInterval(() => {
-      for (let i = 0; i < this.state.cpuCount; ++i) {
-        this.readCoreFrequency(i);
-        this.updateCoreGovernor(i);
-        this.updateAvailableFrequencies(i); // scaling max might change, so we also update this
-      }
-    }, 500);
-
-    this.setState({
-      monitoring: true,
-    });
-  };
-
-  onStopMonitor = () => {
-    if (!this.intervalID) {
-      return;
-    } else {
-      clearInterval(this.intervalID);
-      this.intervalID = null;
-      this.setState({
-        monitoring: false,
-      });
-      this.cleanup();
-    }
-  };
-
-  cleanup = () => {
-    const cpuFreq = this.state.cpuFreq;
-    for (let i = 0; i < this.state.cpuCount; ++i) {
-      cpuFreq[i].scaling_cur_freq = -1;
-      cpuFreq[i].scaling_min_freq = -1;
-      cpuFreq[i].scaling_max_freq = -1;
-      cpuFreq[i].scaling_available_freqs = [];
-      cpuFreq[i].scaling_governor = 'N/A';
-      // we don't cleanup cpuinfo_min_freq, cpuinfo_max_freq
-      // because usually they are fixed (hardware)
-    }
-    this.setState({
-      cpuFreq: cpuFreq,
-    });
-  };
-
-  teardown() {
-    this.cleanup();
-  }
-
-  buildRow = (freq: CPUFrequency, idx: number) => {
-    const selected = this.state.selectedIds.indexOf(idx) >= 0;
     let style = {};
     if (freq.scaling_cur_freq == -2) {
       style = {
@@ -440,24 +474,44 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
 
     return {
       columns: {
-        cpu_id: {value: <Text>CPU_{freq.cpu_id}</Text>},
+        cpu_id: {value: <Typography.Text>CPU_{freq.cpu_id}</Typography.Text>},
         scaling_cur_freq: {
-          value: <Text>{formatFrequency(freq.scaling_cur_freq)}</Text>,
+          value: (
+            <Typography.Text>
+              {formatFrequency(freq.scaling_cur_freq)}
+            </Typography.Text>
+          ),
         },
         scaling_min_freq: {
-          value: <Text>{formatFrequency(freq.scaling_min_freq)}</Text>,
+          value: (
+            <Typography.Text>
+              {formatFrequency(freq.scaling_min_freq)}
+            </Typography.Text>
+          ),
         },
         scaling_max_freq: {
-          value: <Text>{formatFrequency(freq.scaling_max_freq)}</Text>,
+          value: (
+            <Typography.Text>
+              {formatFrequency(freq.scaling_max_freq)}
+            </Typography.Text>
+          ),
         },
         cpuinfo_min_freq: {
-          value: <Text>{formatFrequency(freq.cpuinfo_min_freq)}</Text>,
+          value: (
+            <Typography.Text>
+              {formatFrequency(freq.cpuinfo_min_freq)}
+            </Typography.Text>
+          ),
         },
         cpuinfo_max_freq: {
-          value: <Text>{formatFrequency(freq.cpuinfo_max_freq)}</Text>,
+          value: (
+            <Typography.Text>
+              {formatFrequency(freq.cpuinfo_max_freq)}
+            </Typography.Text>
+          ),
         },
         scaling_governor: {
-          value: <Text>{freq.scaling_governor}</Text>,
+          value: <Typography.Text>{freq.scaling_governor}</Typography.Text>,
         },
       },
       key: freq.cpu_id,
@@ -466,17 +520,17 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
     };
   };
 
-  frequencyRows = (cpuFreqs: Array<CPUFrequency>): TableRows => {
+  const frequencyRows = (cpuFreqs: Array<CPUFrequency>): TableRows => {
-    return cpuFreqs.map(this.buildRow);
+    return cpuFreqs.map(buildRow);
   };
 
-  buildAvailableFreqList = (freq: CPUFrequency) => {
+  const buildAvailableFreqList = (freq: CPUFrequency) => {
     if (freq.scaling_available_freqs.length == 0) {
-      return <Text>N/A</Text>;
+      return <Typography.Text>N/A</Typography.Text>;
     }
     const info = freq;
     return (
-      <Text>
+      <Typography.Text>
         {freq.scaling_available_freqs.map((freq, idx) => {
           const style: React.CSSProperties = {};
           if (
@@ -487,36 +541,39 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
             style.fontWeight = 'bold';
           }
           return (
-            <Text key={idx} style={style}>
+            <Typography.Text key={idx} style={style}>
               {formatFrequency(freq)}
               {freq == info.scaling_cur_freq && (
-                <Text style={style}> (scaling current)</Text>
+                <Typography.Text style={style}>
+                  {' '}
+                  (scaling current)
+                </Typography.Text>
               )}
               {freq == info.scaling_min_freq && (
-                <Text style={style}> (scaling min)</Text>
+                <Typography.Text style={style}> (scaling min)</Typography.Text>
               )}
               {freq == info.scaling_max_freq && (
-                <Text style={style}> (scaling max)</Text>
+                <Typography.Text style={style}> (scaling max)</Typography.Text>
               )}
               <br />
-            </Text>
+            </Typography.Text>
           );
         })}
-      </Text>
+      </Typography.Text>
     );
   };
 
-  buildAvailableGovList = (freq: CPUFrequency): string => {
+  const buildAvailableGovList = (freq: CPUFrequency): string => {
     if (freq.scaling_available_governors.length == 0) {
       return 'N/A';
     }
     return freq.scaling_available_governors.join(', ');
   };
 
-  buildSidebarRow = (key: string, val: any) => {
+  const buildSidebarRow = (key: string, val: any) => {
     return {
       columns: {
-        key: {value: <Text>{key}</Text>},
+        key: {value: <Typography.Text>{key}</Typography.Text>},
         value: {
           value: val,
         },
@@ -525,9 +582,9 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
     };
   };
 
-  sidebarRows = (id: number) => {
+  const sidebarRows = (id: number) => {
     let availableFreqTitle = 'Scaling Available Frequencies';
-    const selected = this.state.cpuFreq[id];
+    const selected = cpuState.cpuFreq[id];
     if (selected.scaling_available_freqs.length > 0) {
       availableFreqTitle +=
         ' (' + selected.scaling_available_freqs.length.toString() + ')';
@@ -536,19 +593,19 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
     const keys = [availableFreqTitle, 'Scaling Available Governors'];
 
     const vals = [
-      this.buildAvailableFreqList(selected),
+      buildAvailableFreqList(selected),
-      this.buildAvailableGovList(selected),
+      buildAvailableGovList(selected),
     ];
     return keys.map<any>((key, idx) => {
-      return this.buildSidebarRow(key, vals[idx]);
+      return buildSidebarRow(key, vals[idx]);
     });
   };
 
-  renderCPUSidebar = () => {
+  const renderCPUSidebar = () => {
-    if (!this.state.displayCPUDetail || this.state.selectedIds.length == 0) {
+    if (!cpuState.displayCPUDetail || selectedIds.length == 0) {
       return null;
     }
-    const id = this.state.selectedIds[0];
+    const id = selectedIds[0];
     const cols = {
       key: {
         value: 'key',
@@ -565,12 +622,7 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
     };
     return (
       <DetailSidebar width={500}>
-        <Panel
+        <Panel pad={theme.space.small} title="CPU details">
-          padded={true}
-          heading="CPU details"
-          floating={false}
-          collapsable={true}
-          grow={true}>
           <Heading>CPU_{id}</Heading>
           <ManagedTable
             columnSizes={colSizes}
@@ -579,27 +631,22 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
             autoHeight={true}
             floating={false}
             zebra={true}
-            rows={this.sidebarRows(id)}
+            rows={sidebarRows(id)}
           />
         </Panel>
       </DetailSidebar>
     );
   };
 
-  renderThermalSidebar = () => {
+  const renderThermalSidebar = () => {
-    if (!this.state.displayThermalInfo) {
+    if (!cpuState.displayThermalInfo) {
       return null;
     }
     return (
       <DetailSidebar width={500}>
-        <Panel
+        <Panel pad={theme.space.small} title="Thermal Information">
-          padded={true}
+          {cpuState.thermalAccessible ? (
-          heading="Thermal Information"
+            <TemperatureTable temperatureMap={cpuState.temperatureMap} />
-          floating={false}
-          collapsable={true}
-          grow={false}>
-          {this.state.thermalAccessible ? (
-            <TemperatureTable temperatureMap={this.state.temperatureMap} />
           ) : (
             'Temperature information not accessible on this device.'
           )}
@@ -608,58 +655,35 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
     );
   };
 
-  toggleThermalSidebar = () => {
-    if (!this.state.displayThermalInfo) {
-      this.readThermalZones();
-    }
-    this.setState({
-      displayThermalInfo: !this.state.displayThermalInfo,
-      displayCPUDetail: false,
-    });
-  };
-
-  toggleCPUSidebar = () => {
-    this.setState({
-      displayCPUDetail: !this.state.displayCPUDetail,
-      displayThermalInfo: false,
-    });
-  };
-
-  render() {
   return (
-      <Panel
+    <Panel pad={theme.space.small} title="CPU info">
-        padded={false}
-        heading="CPU info"
-        floating={false}
-        collapsable={false}
-        grow={true}>
       <Toolbar position="top">
-          {this.state.monitoring ? (
+        {cpuState.monitoring ? (
-            <Button onClick={this.onStopMonitor} icon="pause">
+          <Button onClick={onStopMonitor} icon={<PauseCircleOutlined />}>
             Pause
           </Button>
         ) : (
-            <Button onClick={this.onStartMonitor} icon="play">
+          <Button onClick={onStartMonitor} icon={<PlayCircleOutlined />}>
             Start
           </Button>
         )}
-          &nbsp; {this.state.hardwareInfo}
+        &nbsp; {cpuState.hardwareInfo}
         <ToggleButton
-            toggled={this.state.displayThermalInfo}
+          toggled={cpuState.displayThermalInfo}
-            onClick={this.toggleThermalSidebar}
+          onClick={toggleThermalSidebar}
         />
         Thermal Information
         <ToggleButton
-            onClick={this.toggleCPUSidebar}
+          onClick={toggleCPUSidebar}
-            toggled={this.state.displayCPUDetail}
+          toggled={cpuState.displayCPUDetail}
         />
         CPU Details
-          {this.state.displayCPUDetail &&
+        {cpuState.displayCPUDetail &&
-            this.state.selectedIds.length == 0 &&
+          selectedIds.length == 0 &&
           ' (Please select a core in the table below)'}
       </Toolbar>
 
-        <FlexColumn grow={true}>
+      <Layout.Container grow={true}>
         <ManagedTable
           multiline={true}
           columnSizes={ColumnSizes}
@@ -667,17 +691,14 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
           autoHeight={true}
           floating={false}
           zebra={true}
-            rows={this.frequencyRows(this.state.cpuFreq)}
+          rows={frequencyRows(cpuState.cpuFreq)}
           onRowHighlighted={(selectedIds) => {
-              this.setState({
+            setSelectedIds(selectedIds.map(parseInt));
-                selectedIds: selectedIds.map(parseInt),
-              });
           }}
         />
-          {this.renderCPUSidebar()}
+        {renderCPUSidebar()}
-          {this.renderThermalSidebar()}
+        {renderThermalSidebar()}
-        </FlexColumn>
+      </Layout.Container>
     </Panel>
   );
 }
-}

desktop/plugins/public/cpu/package.json

@@ -10,13 +10,16 @@
       "archived": false
     }
   ],
-  "version": "0.0.0",
+  "version": "0.0.1",
   "main": "dist/bundle.js",
   "flipperBundlerEntry": "index.tsx",
   "license": "MIT",
   "keywords": [
     "flipper-plugin"
   ],
+  "peerDependencies": {
+    "flipper-plugin": "*"
+  },
   "title": "CPU",
   "icon": "underline",
   "bugs": {