ConnectivityHub integration

Summary:
This change has a minimal Connectivity Hub with a log viewer of connectivity related events.

The hub is integrated so that is usable.

Reviewed By: antonk52

Differential Revision: D47296027

fbshipit-source-id: 7611ce0b1480e9bdb7cdff2bcedeb445a322c195

desktop/flipper-ui-core/src/chrome/ConnectivityHub.tsx

@@ -8,8 +8,145 @@
  */
 
 import {Layout} from '../ui';
-import React from 'react';
+import React, {createRef, CSSProperties} from 'react';
+import {
+  createDataSource,
+  DataFormatter,
+  DataTable,
+  DataTableColumn,
+  DataTableManager,
+  theme,
+} from 'flipper-plugin';
+import {CloseCircleFilled} from '@ant-design/icons';
+import {
+  CommandRecordEntry,
+  ConnectionRecordEntry,
+  FlipperServer,
+} from 'flipper-common';
+
+const rows = createDataSource<ConnectionRecordEntry>([], {
+  limit: 200000,
+  persist: 'connectivity-logs',
+});
+
+export function enableConnectivityHub(flipperServer: FlipperServer) {
+  flipperServer.on(
+    'connectivity-troubleshoot-log',
+    (entry: ConnectionRecordEntry) => {
+      rows.append(entry);
+    },
+  );
+  flipperServer.on(
+    'connectivity-troubleshoot-cmd',
+    (entry: CommandRecordEntry) => {
+      rows.append(entry);
+    },
+  );
+}
+
+const iconStyle = {
+  fontSize: '16px',
+};
+
+const baseRowStyle = {
+  ...theme.monospace,
+};
+
+const logTypes: {
+  [level: string]: {
+    label: string;
+    icon?: React.ReactNode;
+    style?: CSSProperties;
+    enabled: boolean;
+  };
+} = {
+  log: {
+    label: 'Log',
+    enabled: true,
+  },
+  cmd: {
+    label: 'Shell',
+    enabled: true,
+    style: {
+      ...baseRowStyle,
+      color: theme.primaryColor,
+    },
+    icon: <CloseCircleFilled style={iconStyle} />,
+  },
+  error: {
+    label: 'Error',
+    style: {
+      ...baseRowStyle,
+      color: theme.errorColor,
+    },
+    icon: <CloseCircleFilled style={iconStyle} />,
+    enabled: true,
+  },
+};
+
+function createColumnConfig(): DataTableColumn<ConnectionRecordEntry>[] {
+  return [
+    {
+      key: 'time',
+      title: 'Time',
+      width: 160,
+    },
+    {
+      key: 'device',
+      title: 'Device',
+      width: 160,
+    },
+    {
+      key: 'app',
+      title: 'App',
+      width: 160,
+      visible: true,
+    },
+    {
+      key: 'medium',
+      title: 'Medium',
+      width: 80,
+      visible: false,
+    },
+    {
+      key: 'message',
+      title: 'Message',
+      wrap: true,
+      formatters: [
+        DataFormatter.truncate(400),
+        DataFormatter.prettyPrintJson,
+        DataFormatter.linkify,
+      ],
+    },
+  ];
+}
+
+function getRowStyle(entry: ConnectionRecordEntry): CSSProperties | undefined {
+  return (logTypes[entry.type]?.style as any) ?? baseRowStyle;
+}
 
 export function ConnectivityHub() {
-  return <Layout.Container grow>Connection Troubleshoot</Layout.Container>;
+  const columns = createColumnConfig();
+
+  const tableManagerRef = createRef<
+    undefined | DataTableManager<ConnectionRecordEntry>
+  >();
+
+  const LogView = () => (
+    <DataTable<ConnectionRecordEntry>
+      dataSource={rows}
+      columns={columns}
+      enableAutoScroll
+      enableMultiPanels
+      onRowStyle={getRowStyle}
+      enableHorizontalScroll={false}
+      tableManagerRef={tableManagerRef}
+    />
+  );
+
+  return (
+    <Layout.Container grow>
+      <LogView />
+    </Layout.Container>
+  );
 }

desktop/flipper-ui-core/src/startFlipperDesktop.tsx

@@ -45,7 +45,7 @@ import {getRenderHostInstance} from 'flipper-frontend-core';
 import {startGlobalErrorHandling} from './utils/globalErrorHandling';
 import {loadTheme} from './utils/loadTheme';
 import {connectFlipperServerToStore} from './dispatcher/flipperServer';
-import ReactDOM from 'react-dom';
+import {enableConnectivityHub} from './chrome/ConnectivityHub';
 
 class AppFrame extends React.Component<
   {logger: Logger; persistor: Persistor},
@@ -140,7 +140,9 @@ class AppFrame extends React.Component<
 function init(flipperServer: FlipperServer) {
   const settings = getRenderHostInstance().serverConfig.settings;
   const store = getStore();
+
   initLogTailer();
+
   const logger = initLogger(store);
 
   setLoggerInstance(logger);
@@ -173,6 +175,7 @@ function init(flipperServer: FlipperServer) {
   }
 
   enableConsoleHook();
+  enableConnectivityHub(flipperServer);
 
   const launcherMessage =
     getRenderHostInstance().serverConfig.processConfig.launcherMsg;