Clear connectivity logs button

Summary: Add the option to clear the connectivity logs.

Reviewed By: antonk52

Differential Revision: D47797301

fbshipit-source-id: ce9414f3057cab367d34524717c83bfbf0703c0c

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

@@ -19,7 +19,7 @@ import {
   Tabs,
   theme,
 } from 'flipper-plugin';
-import {CloseCircleFilled} from '@ant-design/icons';
+import {CloseCircleFilled, DeleteOutlined} from '@ant-design/icons';
 import {
   CommandRecordEntry,
   ConnectionRecordEntry,
@@ -28,6 +28,7 @@ import {
 import SetupDoctorScreen from '../sandy-chrome/SetupDoctorScreen';
 import {ConsoleLogs} from './ConsoleLogs';
 import {FlipperMessages} from './FlipperMessages';
+import {Button} from 'antd';
 
 const rows = createDataSource<ConnectionRecordEntry>([], {
   limit: 200000,
@@ -130,6 +131,10 @@ function getRowStyle(entry: ConnectionRecordEntry): CSSProperties | undefined {
   return (logTypes[entry.type]?.style as any) ?? baseRowStyle;
 }
 
+function clearMessages() {
+  rows.clear();
+}
+
 export function ConnectivityHub() {
   const columns = createColumnConfig();
 
@@ -137,6 +142,16 @@ export function ConnectivityHub() {
     undefined | DataTableManager<ConnectionRecordEntry>
   >();
 
+  const clearButton = (
+    <Button
+      title="Clear logs"
+      onClick={() => {
+        clearMessages();
+      }}>
+      <DeleteOutlined />
+    </Button>
+  );
+
   const LogView = () => (
     <DataTable<ConnectionRecordEntry>
       dataSource={rows}
@@ -146,6 +161,7 @@ export function ConnectivityHub() {
       onRowStyle={getRowStyle}
       enableHorizontalScroll={false}
       tableManagerRef={tableManagerRef}
+      extraActions={clearButton}
     />
   );