Refactored query filters.

vgtom · Aug 4, 2023 · 1578628 · 1578628
1 parent b65c478
commit 1578628
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 147 deletions.
diff --git a/components/pages/reports/FieldSelectForm.js b/components/pages/reports/FieldSelectForm.js
@@ -13,7 +13,7 @@ export default function FieldSelectForm({ fields, onSelect }) {
             return (
               <Item key={index} className={styles.item}>
                 <div>{label || name}</div>
-                <div className={styles.type}>{type}</div>
+                {type && <div className={styles.type}>{type}</div>}
               </Item>
             );
           })}

diff --git a/components/pages/reports/funnel/FunnelParameters.js b/components/pages/reports/funnel/FunnelParameters.js
@@ -16,6 +16,7 @@ import UrlAddForm from './UrlAddForm';
 import { ReportContext } from 'components/pages/reports/Report';
 import BaseParameters from '../BaseParameters';
 import ParameterList from '../ParameterList';
+import PopupForm from '../PopupForm';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@@ -53,7 +54,11 @@ export function FunnelParameters() {
         </Icon>
         <Popup position="bottom" alignment="start">
           {(close, element) => {
-            return <UrlAddForm element={element} onAdd={handleAddUrl} onClose={close} />;
+            return (
+              <PopupForm element={element} onClose={close}>
+                <UrlAddForm onAdd={handleAddUrl} />
+              </PopupForm>
+            );
           }}
         </Popup>
       </PopupTrigger>

diff --git a/components/pages/reports/funnel/UrlAddForm.js b/components/pages/reports/funnel/UrlAddForm.js
@@ -2,16 +2,14 @@ import { useState } from 'react';
 import { useMessages } from 'hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
-import PopupForm from '../PopupForm';
 
-export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
+export function UrlAddForm({ defaultValue = '', onAdd }) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
 
   const handleSave = () => {
     onAdd(url);
     setUrl('');
-    onClose();
   };
 
   const handleChange = e => {
@@ -26,25 +24,23 @@ export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
   };
 
   return (
-    <PopupForm element={element}>
-      <Form>
-        <FormRow label={formatMessage(labels.url)}>
-          <Flexbox gap={10}>
-            <TextField
-              className={styles.input}
-              value={url}
-              onChange={handleChange}
-              autoFocus={true}
-              autoComplete="off"
-              onKeyDown={handleKeyDown}
-            />
-            <Button variant="primary" onClick={handleSave}>
-              {formatMessage(labels.add)}
-            </Button>
-          </Flexbox>
-        </FormRow>
-      </Form>
-    </PopupForm>
+    <Form>
+      <FormRow label={formatMessage(labels.url)}>
+        <Flexbox gap={10}>
+          <TextField
+            className={styles.input}
+            value={url}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+          <Button variant="primary" onClick={handleSave}>
+            {formatMessage(labels.add)}
+          </Button>
+        </Flexbox>
+      </FormRow>
+    </Form>
   );
 }
 

diff --git a/components/pages/reports/insights/InsightsParameters.js b/components/pages/reports/insights/InsightsParameters.js
@@ -2,12 +2,28 @@ import { useContext, useRef } from 'react';
 import { useMessages } from 'hooks';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
 import { ReportContext } from 'components/pages/reports/Report';
-import { REPORT_PARAMETERS, WEBSITE_EVENT_FIELDS } from 'lib/constants';
+import { REPORT_PARAMETERS } from 'lib/constants';
 import Icons from 'components/icons';
 import BaseParameters from '../BaseParameters';
-import FieldAddForm from '../FieldAddForm';
 import ParameterList from '../ParameterList';
 import styles from './InsightsParameters.module.css';
+import FieldSelectForm from '../FieldSelectForm';
+import PopupForm from '../PopupForm';
+import FieldFilterForm from '../FieldFilterForm';
+
+const fieldOptions = [
+  { name: 'url', type: 'string' },
+  { name: 'title', type: 'string' },
+  { name: 'referrer', type: 'string' },
+  { name: 'query', type: 'string' },
+  { name: 'browser', type: 'string' },
+  { name: 'os', type: 'string' },
+  { name: 'device', type: 'string' },
+  { name: 'country', type: 'string' },
+  { name: 'region', type: 'string' },
+  { name: 'city', type: 'string' },
+  { name: 'language', type: 'string' },
+];
 
 export function InsightsParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@@ -16,7 +32,6 @@ export function InsightsParameters() {
   const { parameters } = report || {};
   const { websiteId, dateRange, fields, filters, groups } = parameters || {};
   const queryEnabled = websiteId && dateRange && fields?.length;
-  const fieldOptions = Object.keys(WEBSITE_EVENT_FIELDS).map(key => WEBSITE_EVENT_FIELDS[key]);
 
   const parameterGroups = [
     { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
@@ -57,13 +72,14 @@ export function InsightsParameters() {
         <Popup position="bottom" alignment="start">
           {(close, element) => {
             return (
-              <FieldAddForm
-                fields={fieldOptions}
-                group={group}
-                element={element}
-                onAdd={handleAdd}
-                onClose={close}
-              />
+              <PopupForm element={element} onClose={close}>
+                {group === REPORT_PARAMETERS.fields && (
+                  <FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                )}
+                {group === REPORT_PARAMETERS.filters && (
+                  <FieldFilterForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                )}
+              </PopupForm>
             );
           }}
         </Popup>

diff --git a/lib/clickhouse.ts b/lib/clickhouse.ts
@@ -70,6 +70,10 @@ function getFilterQuery(filters = {}) {
       arr.push(`and ${column} = {${key}:String}`);
     }
 
+    if (key === 'referrer') {
+      arr.push('and referrer_domain != {domain:String}');
+    }
+
     return arr;
   }, []);
 

diff --git a/lib/constants.ts b/lib/constants.ts
@@ -43,11 +43,6 @@ export const SESSION_COLUMNS = [
   'city',
 ];
 
-export const COLLECTION_TYPE = {
-  event: 'event',
-  identify: 'identify',
-};
-
 export const FILTER_COLUMNS = {
   url: 'url_path',
   referrer: 'referrer_domain',
@@ -57,6 +52,11 @@ export const FILTER_COLUMNS = {
   region: 'subdivision1',
 };
 
+export const COLLECTION_TYPE = {
+  event: 'event',
+  identify: 'identify',
+};
+
 export const EVENT_TYPE = {
   pageView: 1,
   customEvent: 2,
@@ -120,37 +120,6 @@ export const ROLE_PERMISSIONS = {
   [ROLES.teamMember]: [],
 } as const;
 
-export const WEBSITE_EVENT_FIELDS = {
-  eventId: { name: 'event_id', type: 'uuid', label: 'Event ID' },
-  websiteId: { name: 'website_id', type: 'uuid', label: 'Website ID' },
-  sessionId: { name: 'session_id', type: 'uuid', label: 'Session ID' },
-  createdAt: { name: 'created_at', type: 'date', label: 'Created date' },
-  urlPath: { name: 'url_path', type: 'string', label: 'URL path' },
-  urlQuery: { name: 'url_query', type: 'string', label: 'URL query' },
-  referrerPath: { name: 'referrer_path', type: 'string', label: 'Referrer path' },
-  referrerQuery: { name: 'referrer_query', type: 'string', label: 'Referrer query' },
-  referrerDomain: { name: 'referrer_domain', type: 'string', label: 'Referrer domain' },
-  pageTitle: { name: 'page_title', type: 'string', label: 'Page title' },
-  eventType: { name: 'event_type', type: 'string', label: 'Event type' },
-  eventName: { name: 'event_name', type: 'string', label: 'Event name' },
-};
-
-export const SESSION_FIELDS = {
-  sessionId: { name: 'session_id', type: 'uuid' },
-  websiteId: { name: 'website_id', type: 'uuid' },
-  hostname: { name: 'hostname', type: 'string' },
-  browser: { name: 'browser', type: 'string' },
-  os: { name: 'os', type: 'string' },
-  device: { name: 'device', type: 'string' },
-  screen: { name: 'screen', type: 'string' },
-  language: { name: 'language', type: 'string' },
-  country: { name: 'country', type: 'string' },
-  subdivision1: { name: 'subdivision1', type: 'string' },
-  subdivision2: { name: 'subdivision2', type: 'string' },
-  city: { name: 'city', type: 'string' },
-  createdAt: { name: 'created_at', type: 'date' },
-};
-
 export const THEME_COLORS = {
   light: {
     primary: '#2680eb',

diff --git a/lib/prisma.ts b/lib/prisma.ts
@@ -73,6 +73,12 @@ function getFilterQuery(filters = {}): string {
       arr.push(`and ${column}={{${key}}}`);
     }
 
+    if (key === 'referrer') {
+      arr.push(
+        'and (website_event.referrer_domain != {{domain}} or website_event.referrer_domain is null)',
+      );
+    }
+
     return arr;
   }, []);
 

diff --git a/pages/api/reports/insights.ts b/pages/api/reports/insights.ts
@@ -11,7 +11,7 @@ export interface InsightsRequestBody {
     startDate: string;
     endDate: string;
   };
-  fields: string[];
+  fields: { name: string; type: string; value: string }[];
   filters: string[];
   groups: string[];
 }

diff --git a/pages/api/websites/[id]/metrics.ts b/pages/api/websites/[id]/metrics.ts
@@ -46,6 +46,7 @@ export default async (
     country,
     region,
     city,
+    language,
   } = req.query;
 
   if (req.method === 'GET') {
@@ -55,19 +56,26 @@ export default async (
 
     const { startDate, endDate } = await parseDateRangeQuery(req);
 
-    if (SESSION_COLUMNS.includes(type)) {
-      const column = FILTER_COLUMNS[type] || type;
-      const filters = {
-        os,
-        browser,
-        device,
-        country,
-        region,
-        city,
-      };
-
-      filters[type] = undefined;
+    const filters = {
+      url,
+      referrer,
+      title,
+      query,
+      event,
+      os,
+      browser,
+      device,
+      country,
+      region,
+      city,
+      language,
+    };
+
+    filters[type] = undefined;
+
+    const column = FILTER_COLUMNS[type] || type;
 
+    if (SESSION_COLUMNS.includes(type)) {
       const data = await getSessionMetrics(websiteId, {
         startDate,
         endDate,
@@ -95,23 +103,6 @@ export default async (
     }
 
     if (EVENT_COLUMNS.includes(type)) {
-      const column = FILTER_COLUMNS[type] || type;
-      const filters = {
-        url,
-        referrer,
-        title,
-        query,
-        event,
-        os,
-        browser,
-        device,
-        country,
-        region,
-        city,
-      };
-
-      filters[type] = undefined;
-
       const data = await getPageviewMetrics(websiteId, {
         startDate,
         endDate,

diff --git a/queries/analytics/events/getEventMetrics.ts b/queries/analytics/events/getEventMetrics.ts
@@ -47,11 +47,12 @@ async function relationalQuery(websiteId: string, criteria: GetEventMetricsCrite
     order by 2
     `,
     {
+      ...filters,
       websiteId,
       startDate: maxDate(startDate, website.resetAt),
       endDate,
       eventType: EVENT_TYPE.customEvent,
-      ...filters,
+      domain: website.domain,
     },
   );
 }
@@ -82,6 +83,7 @@ async function clickhouseQuery(websiteId: string, criteria: GetEventMetricsCrite
       startDate: maxDate(startDate, website.resetAt),
       endDate,
       eventType: EVENT_TYPE.customEvent,
+      domain: website.domain,
     },
   );
 }