Events filtering. Closes #3356

src/components/metrics/EventsTable.tsx

@@ -1,12 +1,28 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { useMessages } from '@/components/hooks';
 
-export function EventsTable(props: MetricsTableProps) {
+export interface EventsTableProps extends MetricsTableProps {
+  onLabelClick?: (value: string) => void;
+}
+
+export function EventsTable({ onLabelClick, ...props }: EventsTableProps) {
   const { formatMessage, labels } = useMessages();
 
-  function handleDataLoad(data: any) {
+  const handleDataLoad = (data: any) => {
     props.onDataLoad?.(data);
-  }
+  };
+
+  const renderLabel = ({ x: label }) => {
+    if (onLabelClick) {
+      return (
+        <div onClick={() => onLabelClick(label)} style={{ cursor: 'pointer' }}>
+          {label}
+        </div>
+      );
+    }
+
+    return label;
+  };
 
   return (
     <MetricsTable
@@ -15,6 +31,7 @@ export function EventsTable(props: MetricsTableProps) {
       type="event"
       metric={formatMessage(labels.actions)}
       onDataLoad={handleDataLoad}
+      renderLabel={renderLabel}
     />
   );
 }