Events filtering. Closes #3356

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -4,27 +4,33 @@ import EventsDataTable from './EventsDataTable';
 import EventsMetricsBar from './EventsMetricsBar';
 import EventsChart from '@/components/metrics/EventsChart';
 import { GridRow } from '@/components/layout/Grid';
-import MetricsTable from '@/components/metrics/MetricsTable';
+import EventsTable from '@/components/metrics/EventsTable';
 import { useMessages } from '@/components/hooks';
 import { Item, Tabs } from 'react-basics';
 import { useState } from 'react';
 import EventProperties from './EventProperties';
 
 export default function EventsPage({ websiteId }) {
+  const [label, setLabel] = useState(null);
   const [tab, setTab] = useState('activity');
   const { formatMessage, labels } = useMessages();
 
+  const handleLabelClick = (value: string) => {
+    setLabel(value !== label ? value : '');
+  };
+
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
       <EventsMetricsBar websiteId={websiteId} />
       <GridRow columns="two-one">
-        <EventsChart websiteId={websiteId} />
-        <MetricsTable
+        <EventsChart websiteId={websiteId} focusLabel={label} />
+        <EventsTable
           websiteId={websiteId}
           type="event"
           title={formatMessage(labels.events)}
           metric={formatMessage(labels.actions)}
+          onLabelClick={handleLabelClick}
         />
       </GridRow>
       <div>