flipper-plugin-analytics-tracer.ts

import React from 'react';
import { PluginClient, usePlugin, createState, useValue, Layout } from 'flipper-plugin';
import { Table } from 'antd';
import { ColumnProps } from "antd/lib/table";

type LogEntry = {
  time: Number;
  name: string;
  properties: string;
  params: String,
};


// Read more: https://fbflipper.com/docs/tutorial/js-custom#creating-a-first-plugin
// API: https://fbflipper.com/docs/extending/flipper-plugin#pluginclient
export function plugin(client: PluginClient) {

  const items = createState<LogEntry[]>([], { persist: 'items' });

  client.onMessage('event', (event) => {
    const oldRows = items.get();

    const newRow = {
      time: event['time'],
      name: event['name'],
      properties: JSON.stringify(event['properties'], null, 4),
      params: JSON.stringify(event['params'], null, 4),
    };

    items.update((draft) => {
      draft.unshift(newRow);
    });
  });

  return { items }
}

// Read more: https://fbflipper.com/docs/tutorial/js-custom#building-a-user-interface-for-the-plugin
// API: https://fbflipper.com/docs/extending/flipper-plugin#react-hooks
export function Component() {
  const instance = usePlugin(plugin);

  const items = useValue(instance.items);

  const data = Object.entries(items).map(([id, row]) => (row));


  const COLUMNS: ColumnProps<LogEntry>[] = [
    {
      dataIndex: 'time', title: 'time', width: 150,
      render: (text, record) => (formatDate(Date(text))),
    },
    { dataIndex: 'name', title: 'name', width: 150 },
    {
      dataIndex: 'properties', title: 'properties', width: 300,
      render: (text, record) => (
        <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          <pre>
            {text}
          </pre>
        </div>
      ),
    },
    {
      dataIndex: 'params', title: 'params',
      render: (text, record) => (
        <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          <pre>
            {text}
          </pre>
        </div>
      ),
    }
  ];


  return (
    <Layout.ScrollContainer>
      <Table
        columns={COLUMNS}
        dataSource={data}
        pagination={false}
      />
    </Layout.ScrollContainer>
  );

}


function formatDate(date: Date) {
  var d = new Date(date),
    hour = '' + d.getHours(),
    minues = '' + d.getMinutes(),
    secounds = '' + d.getSeconds();

  if (hour.length < 2)
    hour = '0' + hour;
  if (minues.length < 2)
    minues = '0' + minues;
  if (secounds.length < 2)
    secounds = '0' + secounds;

  return [hour, minues, secounds].join(':');
}