feat: event data dashboard now shows associated event

components/messages.js

@@ -81,6 +81,7 @@ export const labels = defineMessages({
   devices: { id: 'label.devices', defaultMessage: 'Devices' },
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
+  event: { id: 'label.event', defaultMessage: 'Event' },
   events: { id: 'label.events', defaultMessage: 'Events' },
   query: { id: 'label.query', defaultMessage: 'Query' },
   queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },

components/pages/event-data/EventDataTable.js

@@ -7,20 +7,25 @@ export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
+  function linkToView(row, cell) {
+    return (
+      <Link href={resolveUrl({ view: row.field, event: row.event })} shallow={true}>
+        {cell}
+      </Link>
+    );
+  }
+
   if (data.length === 0) {
     return <Empty />;
   }
 
   return (
     <GridTable data={data}>
+      <GridColumn name="event" label={formatMessage(labels.event)}>
+        {row => linkToView(row, row.event)}
+      </GridColumn>
       <GridColumn name="field" label={formatMessage(labels.field)}>
-        {row => {
+        {row => linkToView(row, row.field)}
-          return (
-            <Link href={resolveUrl({ view: row.field })} shallow={true}>
-              {row.field}
-            </Link>
-          );
-        }}
       </GridColumn>
       <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}

components/pages/event-data/EventDataValueTable.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
 
-export function EventDataTable({ data = [], field }) {
+export function EventDataTable({ data = [], field, event }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
@@ -20,7 +20,9 @@ export function EventDataTable({ data = [], field }) {
             <Text>{formatMessage(labels.back)}</Text>
           </Button>
         </Link>
-        <Text>{field}</Text>
+        <Text>
+          {event} - {field}
+        </Text>
       </>
     );
   };

components/pages/websites/WebsiteEventData.js

@@ -5,7 +5,7 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric
 import { useDateRange, useApi, usePageQuery } from 'hooks';
 import styles from './WebsiteEventData.module.css';
 
-function useFields(websiteId, field) {
+function useFields(websiteId, field, event) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
@@ -17,6 +17,7 @@ function useFields(websiteId, field) {
         startAt: +startDate,
         endAt: +endDate,
         field,
+        withEventNames: true,
       }),
     { enabled: !!(websiteId && startDate && endDate) },
   );
@@ -26,15 +27,15 @@ function useFields(websiteId, field) {
 
 export default function WebsiteEventData({ websiteId }) {
   const {
-    query: { view },
+    query: { view, event },
   } = usePageQuery();
-  const { data } = useFields(websiteId, view);
+  const { data } = useFields(websiteId, view, event);
 
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
       {!view && <EventDataTable data={data} />}
-      {view && <EventDataValueTable field={view} data={data} />}
+      {view && <EventDataValueTable field={view} event={event} data={data} />}
     </Flexbox>
   );
 }