Updates to insights, event data, telemetry.

components/pages/event-data/EventDataTable.js

@@ -7,14 +7,6 @@ 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 />;
   }
@@ -22,10 +14,14 @@ export function EventDataTable({ data = [] }) {
   return (
     <GridTable data={data}>
       <GridColumn name="event" label={formatMessage(labels.event)}>
-        {row => linkToView(row, row.event)}
+        {row => (
+          <Link href={resolveUrl({ event: row.event })} shallow={true}>
+            {row.event}
+          </Link>
+        )}
       </GridColumn>
       <GridColumn name="field" label={formatMessage(labels.field)}>
-        {row => linkToView(row, row.field)}
+        {row => row.field}
       </GridColumn>
       <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}

components/pages/event-data/EventDataValueTable.js

@@ -5,14 +5,14 @@ import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
 
-export function EventDataTable({ data = [], field, event }) {
+export function EventDataValueTable({ data = [], event }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
   const Title = () => {
     return (
       <>
-        <Link href={resolveUrl({ view: undefined })}>
+        <Link href={resolveUrl({ event: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />
@@ -20,9 +20,7 @@ export function EventDataTable({ data = [], field, event }) {
             <Text>{formatMessage(labels.back)}</Text>
           </Button>
         </Link>
-        <Text>
-          {event} - {field}
-        </Text>
+        <Text>{event}</Text>
       </>
     );
   };
@@ -33,6 +31,7 @@ export function EventDataTable({ data = [], field, event }) {
       {data.length <= 0 && <Empty />}
       {data.length > 0 && (
         <GridTable data={data}>
+          <GridColumn name="field" label={formatMessage(labels.field)} />
           <GridColumn name="value" label={formatMessage(labels.value)} />
           <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
             {({ total }) => total.toLocaleString()}
@@ -43,4 +42,4 @@ export function EventDataTable({ data = [], field, event }) {
   );
 }
 
-export default EventDataTable;
+export default EventDataValueTable;

components/pages/websites/WebsiteEventData.js

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