Merge remote-tracking branch 'origin/dev' into dev

components/common/Pager.js

@@ -1,7 +1,9 @@
 import styles from './Pager.module.css';
 import { Button, Flexbox, Icon, Icons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
 
-export function Pager({ page, pageSize, count, onPageChange, onPageSizeChange }) {
+export function Pager({ page, pageSize, count, onPageChange }) {
+  const { formatMessage, labels } = useMessages();
   const maxPage = Math.ceil(count / pageSize);
   const lastPage = page === maxPage;
   const firstPage = page === 1;
@@ -24,7 +26,9 @@ export function Pager({ page, pageSize, count, onPageChange, onPageSizeChange })
           <Icons.ChevronDown />
         </Icon>
       </Button>
-      <Flexbox alignItems="center" className={styles.text}>{`Page ${page} of ${maxPage}`}</Flexbox>
+      <Flexbox alignItems="center" className={styles.text}>
+        {formatMessage(labels.pageOf, { x: page, y: maxPage })}
+      </Flexbox>
       <Button onClick={() => handlePageChange(1)} disabled={lastPage}>
         <Icon size="lg" className={styles.icon} rotate={270}>
           <Icons.ChevronDown />

components/common/SettingsTable.js

@@ -41,6 +41,7 @@ export function SettingsTable({
           onChange={handleFilterChange}
           delay={1000}
           value={filter}
+          autoFocus={true}
           placeholder="Search"
           style={{ maxWidth: '300px', marginBottom: '10px' }}
         />

lib/constants.ts

@@ -213,8 +213,11 @@ export const EVENT_COLORS = [
 
 export const DOMAIN_REGEX =
   /^(localhost(:[1-9]\d{0,4})?|((?=[a-z0-9-]{1,63}\.)(xn--)?[a-z0-9-]+(-[a-z0-9-]+)*\.)+(xn--)?[a-z0-9-]{2,63})$/;
-
 export const SHARE_ID_REGEX = /^[a-zA-Z0-9]{16}$/;
+export const UUID_REGEX =
+  /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+export const HOSTNAME_REGEX =
+  /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/;
 
 export const DESKTOP_SCREEN_WIDTH = 1920;
 export const LAPTOP_SCREEN_WIDTH = 1024;

pages/api/event-data/stats.ts

@@ -3,7 +3,7 @@ import { useCors, useAuth } from 'lib/middleware';
 import { NextApiRequestQueryBody } from 'lib/types';
 import { NextApiResponse } from 'next';
 import { ok, methodNotAllowed, unauthorized } from 'next-basics';
-import { getEventDataFields } from 'queries';
+import { getEventDataStats } from 'queries';
 
 export interface EventDataStatsRequestQuery {
   websiteId: string;
@@ -11,7 +11,6 @@ export interface EventDataStatsRequestQuery {
     startDate: string;
     endDate: string;
   };
-  field?: string;
 }
 
 export default async (
@@ -31,19 +30,9 @@ export default async (
     const startDate = new Date(+startAt);
     const endDate = new Date(+endAt);
 
-    const results = await getEventDataFields(websiteId, { startDate, endDate });
+    const data = await getEventDataStats(websiteId, { startDate, endDate });
-    const fields = new Set();
 
-    const data = results.reduce(
+    return ok(res, data);
-      (obj, row) => {
-        fields.add(row.fieldName);
-        obj.records += Number(row.total);
-        return obj;
-      },
-      { events: results.length, records: 0 },
-    );
-
-    return ok(res, { ...data, fields: fields.size });
   }
 
   return methodNotAllowed(res);

queries/analytics/eventData/getEventDataStats.ts

@@ -0,0 +1,69 @@
+import prisma from 'lib/prisma';
+import clickhouse from 'lib/clickhouse';
+import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
+import { QueryFilters } from 'lib/types';
+
+export async function getEventDataStats(
+  ...args: [websiteId: string, filters: QueryFilters]
+): Promise<{
+  events: number;
+  fields: number;
+  records: number;
+}> {
+  return runQuery({
+    [PRISMA]: () => relationalQuery(...args),
+    [CLICKHOUSE]: () => clickhouseQuery(...args),
+  }).then(results => results[0]);
+}
+
+async function relationalQuery(websiteId: string, filters: QueryFilters) {
+  const { rawQuery, parseFilters } = prisma;
+  const { filterQuery, params } = await parseFilters(websiteId, filters);
+
+  return rawQuery(
+    `
+    select 
+      count(distinct t.website_event_id) as "events",
+      count(distinct t.event_key) as "fields",
+      sum(t.total) as "records"
+    from (
+      select
+        website_event_id,
+        event_key,
+        count(*) as "total"
+      from event_data
+      where website_id = {{websiteId::uuid}}
+        and created_at between {{startDate}} and {{endDate}}
+      ${filterQuery}
+      group by website_event_id, event_key
+      ) as t
+    `,
+    params,
+  );
+}
+
+async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
+  const { rawQuery, parseFilters } = clickhouse;
+  const { filterQuery, params } = await parseFilters(websiteId, filters);
+
+  return rawQuery(
+    `
+    select 
+      count(distinct t.event_id) as "events",
+      count(distinct t.event_key) as "fields",
+      sum(t.total) as "records"
+    from (
+      select
+        event_id,
+        event_key,
+        count(*) as "total"
+      from event_data
+      where website_id = {websiteId:UUID}
+        and created_at between {startDate:DateTime} and {endDate:DateTime}
+      ${filterQuery}
+      group by event_id, event_key
+      ) as t
+    `,
+    params,
+  );
+}

queries/index.js

@@ -9,6 +9,7 @@ export * from './analytics/events/getEventUsage';
 export * from './analytics/events/getEvents';
 export * from './analytics/eventData/getEventDataEvents';
 export * from './analytics/eventData/getEventDataFields';
+export * from './analytics/eventData/getEventDataStats';
 export * from './analytics/eventData/getEventDataUsage';
 export * from './analytics/events/saveEvent';
 export * from './analytics/reports/getFunnel';