From 2fcd0cbcacf963c643587e6ce76fc17f5427810b Mon Sep 17 00:00:00 2001 From: Pascal Hartig Date: Mon, 16 Sep 2019 09:11:36 -0700 Subject: [PATCH] Convert logs plugin to TypeScript Summary: _typescript_ Reviewed By: danielbuechele Differential Revision: D17184173 fbshipit-source-id: c7a055544ee4d9e07e5685fa84669d68fd68bf31 --- src/index.tsx | 5 +- src/plugins/logs/__tests__/index.node.js | 2 +- src/plugins/logs/{index.js => index.tsx} | 146 ++++++++++++----------- src/plugins/logs/package.json | 2 +- src/ui/components/table/ManagedTable.tsx | 4 +- 5 files changed, 87 insertions(+), 72 deletions(-) rename src/plugins/logs/{index.js => index.tsx} (84%) diff --git a/src/index.tsx b/src/index.tsx index 1e594d4c9..a5fe50904 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -70,7 +70,10 @@ export { TableColumnOrderVal, TableColumnSizes, } from './ui/components/table/types'; -export {default as ManagedTable} from './ui/components/table/ManagedTable'; +export { + default as ManagedTable, + ManagedTable as ManagedTableClass, +} from './ui/components/table/ManagedTable'; export {ManagedTableProps} from './ui/components/table/ManagedTable'; export { default as ManagedTable_immutable, diff --git a/src/plugins/logs/__tests__/index.node.js b/src/plugins/logs/__tests__/index.node.js index 89b987112..7ee37bb90 100644 --- a/src/plugins/logs/__tests__/index.node.js +++ b/src/plugins/logs/__tests__/index.node.js @@ -5,7 +5,7 @@ * @format */ -import {addEntriesToState, processEntry} from '../index'; +import {addEntriesToState, processEntry} from '../index.tsx'; const entry = { tag: 'OpenGLRenderer', diff --git a/src/plugins/logs/index.js b/src/plugins/logs/index.tsx similarity index 84% rename from src/plugins/logs/index.js rename to src/plugins/logs/index.tsx index dcfd5e2ec..a6c0bf730 100644 --- a/src/plugins/logs/index.js +++ b/src/plugins/logs/index.tsx @@ -5,19 +5,20 @@ * @format */ -import type { +import { TableBodyRow, TableColumnOrder, TableColumnSizes, TableColumns, } from 'flipper'; -import type {Counter} from './LogWatcher.tsx'; -import type {Props as PluginProps} from '../../plugin.tsx'; -import type {DeviceLogEntry} from '../../devices/BaseDevice.tsx'; +import {Counter} from './LogWatcher'; +import {Props as PluginProps, BaseAction} from '../../plugin'; +import {DeviceLogEntry} from '../../devices/BaseDevice'; import { Text, ManagedTable, + ManagedTableClass, Button, colors, ContextMenu, @@ -30,27 +31,33 @@ import { Device, createPaste, textContent, + KeyboardActions, } from 'flipper'; -import LogWatcher from './LogWatcher.tsx'; +import LogWatcher from './LogWatcher'; +import React from 'react'; +import {MenuTemplate} from 'src/ui/components/ContextMenu'; const LOG_WATCHER_LOCAL_STORAGE_KEY = 'LOG_WATCHER_LOCAL_STORAGE_KEY'; type Entries = Array<{ - row: TableBodyRow, - entry: DeviceLogEntry, + row: TableBodyRow; + entry: DeviceLogEntry; }>; -type State = {| - rows: Array, - entries: Entries, - key2entry: {[key: string]: DeviceLogEntry}, - highlightedRows: Set, - counters: Array, -|}; +type BaseState = { + rows: Array; + entries: Entries; + key2entry: {[key: string]: DeviceLogEntry}; +}; -type Actions = {||}; +type AdditionalState = { + highlightedRows: Set; + counters: Array; +}; -type PersistedState = {||}; +type State = BaseState & AdditionalState; + +type PersistedState = {}; const Icon = styled(Glyph)({ marginTop: 5, @@ -69,8 +76,8 @@ function getLineCount(str: string): number { return count; } -function keepKeys(obj, keys) { - const result = {}; +function keepKeys(obj: A, keys: Array): A { + const result: A = {} as A; for (const key in obj) { if (keys.includes(key)) { result[key] = obj[key]; @@ -146,11 +153,11 @@ const INITIAL_COLUMN_ORDER = [ const LOG_TYPES: { [level: string]: { - label: string, - color: string, - icon?: React.Node, - style?: Object, - }, + label: string; + color: string; + icon?: React.ReactNode; + style?: Object; + }; } = { verbose: { label: 'Verbose', @@ -221,24 +228,26 @@ const HiddenScrollText = styled(Text)({ }, }); -const LogCount = styled('div')(({backgroundColor}) => ({ - backgroundColor, - borderRadius: '999em', - fontSize: 11, - marginTop: 4, - minWidth: 16, - height: 16, - color: colors.white, - textAlign: 'center', - lineHeight: '16px', - paddingLeft: 4, - paddingRight: 4, - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', -})); +const LogCount = styled('div')( + ({backgroundColor}: {backgroundColor: string}) => ({ + backgroundColor, + borderRadius: '999em', + fontSize: 11, + marginTop: 4, + minWidth: 16, + height: 16, + color: colors.white, + textAlign: 'center', + lineHeight: '16px', + paddingLeft: 4, + paddingRight: 4, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }), +); -function pad(chunk: mixed, len: number): string { +function pad(chunk: any, len: number): string { let str = String(chunk); while (str.length < len) { str = `0${str}`; @@ -248,12 +257,12 @@ function pad(chunk: mixed, len: number): string { export function addEntriesToState( items: Entries, - state: $Shape = { + state: BaseState = { rows: [], entries: [], key2entry: {}, }, -): $Shape { +): BaseState { const rows = [...state.rows]; const entries = [...state.entries]; const key2entry = {...state.key2entry}; @@ -263,7 +272,7 @@ export function addEntriesToState( entries.push({row, entry}); key2entry[row.key] = entry; - let previousEntry: ?DeviceLogEntry = null; + let previousEntry: DeviceLogEntry | null = null; if (i > 0) { previousEntry = items[i - 1].entry; @@ -285,7 +294,7 @@ export function addRowIfNeeded( rows: Array, row: TableBodyRow, entry: DeviceLogEntry, - previousEntry: ?DeviceLogEntry, + previousEntry: DeviceLogEntry | null, ) { const previousRow = rows.length > 0 ? rows[rows.length - 1] : null; if ( @@ -315,10 +324,10 @@ export function processEntry( entry: DeviceLogEntry, key: string, ): { - row: TableBodyRow, - entry: DeviceLogEntry, + row: TableBodyRow; + entry: DeviceLogEntry; } { - const {icon, style} = LOG_TYPES[(entry.type: string)] || LOG_TYPES.debug; + const {icon, style} = LOG_TYPES[entry.type] || LOG_TYPES.debug; // build the item, it will either be batched or added straight away return { entry, @@ -374,13 +383,16 @@ export function processEntry( export default class LogTable extends FlipperDevicePlugin< State, - Actions, - PersistedState, + BaseAction, + PersistedState > { - static keyboardActions = ['clear', 'goToBottom', 'createPaste']; + static keyboardActions: KeyboardActions = [ + 'clear', + 'goToBottom', + 'createPaste', + ]; - initTimer: ?TimeoutID; - batchTimer: ?TimeoutID; + batchTimer: NodeJS.Timeout | undefined; static supportsDevice(device: Device) { return device.os === 'iOS' || device.os === 'Android'; @@ -407,10 +419,10 @@ export default class LogTable extends FlipperDevicePlugin< }; calculateHighlightedRows = ( - deepLinkPayload: ?string, + deepLinkPayload: string | null, rows: Array, ): Set => { - const highlightedRows = new Set(); + const highlightedRows = new Set(); if (!deepLinkPayload) { return highlightedRows; } @@ -418,10 +430,8 @@ export default class LogTable extends FlipperDevicePlugin< // Run through array from last to first, because we want to show the last // time it the log we are looking for appeared. for (let i = rows.length - 1; i >= 0; i--) { - if ( - rows[i].filterValue && - rows[i].filterValue.includes(deepLinkPayload) - ) { + const filterValue = rows[i].filterValue; + if (filterValue != null && filterValue.includes(deepLinkPayload)) { highlightedRows.add(rows[i].key); break; } @@ -431,7 +441,8 @@ export default class LogTable extends FlipperDevicePlugin< const arr = deepLinkPayload.split('\n'); for (const msg of arr) { for (let i = rows.length - 1; i >= 0; i--) { - if (rows[i].filterValue && rows[i].filterValue.includes(msg)) { + const filterValue = rows[i].filterValue; + if (filterValue != null && filterValue.includes(msg)) { highlightedRows.add(rows[i].key); break; } @@ -441,11 +452,11 @@ export default class LogTable extends FlipperDevicePlugin< return highlightedRows; }; - tableRef: ?ManagedTable; + tableRef: ManagedTableClass | undefined; columns: TableColumns; columnSizes: TableColumnSizes; columnOrder: TableColumnOrder; - logListener: ?Symbol; + logListener: Symbol | undefined; batch: Entries = []; queued: boolean = false; @@ -464,6 +475,7 @@ export default class LogTable extends FlipperDevicePlugin< this.device .getLogs() .map(log => processEntry(log, String(this.counter++))), + this.state, ); this.state = { ...initialState, @@ -487,7 +499,7 @@ export default class LogTable extends FlipperDevicePlugin< if (entry.message.match(counter.expression)) { counterUpdated = true; if (counter.notify) { - new window.Notification(`${counter.label}`, { + new Notification(`${counter.label}`, { body: 'The watched log message appeared', }); } @@ -505,8 +517,8 @@ export default class LogTable extends FlipperDevicePlugin< }; scheudleEntryForBatch = (item: { - row: TableBodyRow, - entry: DeviceLogEntry, + row: TableBodyRow; + entry: DeviceLogEntry; }) => { // batch up logs to be processed every 250ms, if we have lots of log // messages coming in, then calling an setState 200+ times is actually @@ -553,7 +565,7 @@ export default class LogTable extends FlipperDevicePlugin< createPaste = () => { let paste = ''; - const mapFn = row => + const mapFn = (row: TableBodyRow) => Object.keys(COLUMNS) .map(key => textContent(row.columns[key].value)) .join('\t'); @@ -571,7 +583,7 @@ export default class LogTable extends FlipperDevicePlugin< createPaste(paste); }; - setTableRef = (ref: React.ElementRef) => { + setTableRef = (ref: ManagedTableClass) => { this.tableRef = ref; }; @@ -608,7 +620,7 @@ export default class LogTable extends FlipperDevicePlugin< flex: 1, }); - buildContextMenuItems = () => [ + buildContextMenuItems: () => MenuTemplate = () => [ { type: 'separator', }, diff --git a/src/plugins/logs/package.json b/src/plugins/logs/package.json index b00107e76..a943361c0 100644 --- a/src/plugins/logs/package.json +++ b/src/plugins/logs/package.json @@ -1,7 +1,7 @@ { "name": "DeviceLogs", "version": "1.0.0", - "main": "index.js", + "main": "index.tsx", "license": "MIT", "dependencies": {}, "title": "Logs", diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx index 3d584b36a..f4e8735b3 100644 --- a/src/ui/components/table/ManagedTable.tsx +++ b/src/ui/components/table/ManagedTable.tsx @@ -149,7 +149,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({ const globalTableState: {[key: string]: TableColumnSizes} = {}; -class ManagedTable extends React.Component< +export class ManagedTable extends React.Component< ManagedTableProps, ManagedTableState > { @@ -607,7 +607,7 @@ class ManagedTable extends React.Component< getRow = ({index, style}: {index: number; style: React.CSSProperties}) => { const {onAddFilter, multiline, zebra, rows} = this.props; const {columnOrder, columnSizes, highlightedRows} = this.state; - const columnKeys = columnOrder + const columnKeys: Array = columnOrder .map(k => (k.visible ? k.key : null)) .filter(notNull);