Add clear button and autoscroll to table

Reviewed By: lblasa

Differential Revision: D48600634

fbshipit-source-id: 4ccf82314e3ef3c7466e91e8c181f35ee264bc0a

desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {PartitionOutlined} from '@ant-design/icons';
+import {DeleteOutlined, PartitionOutlined} from '@ant-design/icons';
 import {
   DataTable,
   DataTableColumn,
@@ -84,11 +84,13 @@ export function FrameworkEventsTable({
   return (
     <Layout.Container grow>
       <DataTable<FrameworkEvent>
+        enableAutoScroll
         dataSource={instance.frameworkEvents}
         tableManagerRef={managerRef}
         onSelect={onSelectRow}
         columns={allColumns}
         extraActions={
+          <>
             <Tooltip title="Back to tree">
               <Button
                 onClick={() => {
@@ -97,6 +99,15 @@ export function FrameworkEventsTable({
                 }}
                 icon={<PartitionOutlined />}></Button>
             </Tooltip>
+            <Tooltip title="Delete all events">
+              <Button
+                onClick={() => {
+                  instance.frameworkEvents.clear();
+                  managerRef.current?.clearSelection();
+                }}
+                icon={<DeleteOutlined />}></Button>
+            </Tooltip>
+          </>
         }
       />
       <DetailSidebar width={450}>