From 0409a7d261b18ec3ba308e792fef27d369903aa7 Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Thu, 12 Jan 2023 21:17:57 -0800
Subject: [PATCH] Feat/um 154 add event data rewrite queries (#1739)

* Cherry pick prisma query protection.

* Re-write CH queries to use query params.

* Fix query.

* Fix modal.  Re-add form css.
---
 components/common/Modal.module.css            |  2 +-
 components/layout/Layout.js                   |  1 +
 components/pages/WebsiteDetails.js            | 47 +++++++++----
 components/pages/WebsiteDetails.module.css    |  4 ++
 lib/{clickhouse.js => clickhouse.ts}          | 70 +++++++------------
 lib/prisma.ts                                 | 17 ++++-
 pages/api/websites/[id]/pageviews.ts          |  2 +-
 queries/analytics/event/getEventData.ts       | 16 ++---
 queries/analytics/event/getEventMetrics.ts    | 14 ++--
 .../event/{getEvents.js => getEvents.ts}      | 25 +++----
 .../analytics/pageview/getPageviewMetrics.ts  | 27 ++++---
 .../analytics/pageview/getPageviewStats.ts    | 14 ++--
 queries/analytics/pageview/getPageviews.js    | 43 ------------
 queries/analytics/pageview/getPageviews.ts    | 44 ++++++++++++
 queries/analytics/session/getSession.ts       |  4 +-
 .../analytics/session/getSessionMetrics.ts    | 23 +++---
 queries/analytics/stats/getActiveVisitors.ts  | 24 ++++---
 queries/analytics/stats/getWebsiteStats.ts    | 27 +++----
 styles/index.css                              | 38 ++++++++++
 19 files changed, 257 insertions(+), 185 deletions(-)
 rename lib/{clickhouse.js => clickhouse.ts} (69%)
 rename queries/analytics/event/{getEvents.js => getEvents.ts} (50%)
 delete mode 100644 queries/analytics/pageview/getPageviews.js
 create mode 100644 queries/analytics/pageview/getPageviews.ts

diff --git a/components/common/Modal.module.css b/components/common/Modal.module.css
index 3bba9273..09054c55 100644
--- a/components/common/Modal.module.css
+++ b/components/common/Modal.module.css
@@ -5,7 +5,7 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  z-index: 2;
+  z-index: 3;
 }
 
 .modal:before {
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 1a8d4887..e2d652ff 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -27,6 +27,7 @@ export default function Layout({ title, children, header = true, footer = true }
       {header && <Header />}
       <main>{children}</main>
       {footer && <Footer />}
+      <div id="__modals" dir={dir} />
     </Container>
   );
 }
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 9f53c9b6..46c9bcab 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -1,27 +1,30 @@
-import { useState } from 'react';
-import { Column } from 'react-basics';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Arrow from 'assets/arrow-right.svg';
 import classNames from 'classnames';
-import WebsiteChart from 'components/metrics/WebsiteChart';
-import WorldMap from 'components/common/WorldMap';
-import Page from 'components/layout/Page';
-import GridRow from 'components/layout/GridRow';
-import MenuLayout from 'components/layout/MenuLayout';
+import EventDataButton from 'components/common/EventDataButton';
 import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
-import PagesTable from 'components/metrics/PagesTable';
-import ReferrersTable from 'components/metrics/ReferrersTable';
+import WorldMap from 'components/common/WorldMap';
+import GridRow from 'components/layout/GridRow';
+import MenuLayout from 'components/layout/MenuLayout';
+import Page from 'components/layout/Page';
 import BrowsersTable from 'components/metrics/BrowsersTable';
-import OSTable from 'components/metrics/OSTable';
-import DevicesTable from 'components/metrics/DevicesTable';
 import CountriesTable from 'components/metrics/CountriesTable';
+import DevicesTable from 'components/metrics/DevicesTable';
+import EventsChart from 'components/metrics/EventsChart';
+import EventsTable from 'components/metrics/EventsTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
-import ScreenTable from 'components/metrics/ScreenTable';
+import OSTable from 'components/metrics/OSTable';
+import PagesTable from 'components/metrics/PagesTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import ScreenTable from 'components/metrics/ScreenTable';
+import WebsiteChart from 'components/metrics/WebsiteChart';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import Arrow from 'assets/arrow-right.svg';
+import { useState } from 'react';
+import { Column } from 'react-basics';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import styles from './WebsiteDetails.module.css';
 
 const messages = defineMessages({
@@ -33,6 +36,7 @@ const messages = defineMessages({
   devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
   countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
   languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
+  events: { id: 'metrics.events', defaultMessage: 'Events' },
   query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
 });
 
@@ -45,6 +49,7 @@ const views = {
   screen: ScreenTable,
   country: CountriesTable,
   language: LanguagesTable,
+  event: EventsTable,
   query: QueryParametersTable,
 };
 
@@ -52,6 +57,7 @@ export default function WebsiteDetails({ websiteId }) {
   const { data } = useFetch(`/websites/${websiteId}`);
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
+  const [eventsData, setEventsData] = useState();
   const {
     resolve,
     query: { view },
@@ -102,6 +108,10 @@ export default function WebsiteDetails({ websiteId }) {
       label: formatMessage(messages.screens),
       value: resolve({ view: 'screen' }),
     },
+    {
+      label: formatMessage(messages.events),
+      value: resolve({ view: 'event' }),
+    },
     {
       label: formatMessage(messages.query),
       value: resolve({ view: 'query' }),
@@ -166,6 +176,15 @@ export default function WebsiteDetails({ websiteId }) {
               <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </Column>
           </GridRow>
+          <GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
+            <Column xs={12} md={12} lg={12} defaultSize={4}>
+              <EventsTable {...tableProps} onDataLoad={setEventsData} />
+            </Column>
+            <Column xs={12} md={12} lg={12} defaultSize={8}>
+              <EventDataButton websiteId={websiteId} />
+              <EventsChart className={styles.eventschart} websiteId={websiteId} />
+            </Column>
+          </GridRow>
         </>
       )}
       {view && chartLoaded && (
diff --git a/components/pages/WebsiteDetails.module.css b/components/pages/WebsiteDetails.module.css
index b0632be6..2f92b575 100644
--- a/components/pages/WebsiteDetails.module.css
+++ b/components/pages/WebsiteDetails.module.css
@@ -29,3 +29,7 @@
 .hidden {
   display: none;
 }
+
+.eventschart {
+  padding-top: 30px;
+}
diff --git a/lib/clickhouse.js b/lib/clickhouse.ts
similarity index 69%
rename from lib/clickhouse.js
rename to lib/clickhouse.ts
index b28694b6..f59e04c6 100644
--- a/lib/clickhouse.js
+++ b/lib/clickhouse.ts
@@ -14,7 +14,7 @@ export const CLICKHOUSE_DATE_FORMATS = {
 
 const log = debug('umami:clickhouse');
 
-let clickhouse;
+let clickhouse: ClickHouse;
 const enabled = Boolean(process.env.CLICKHOUSE_URL);
 
 function getClient() {
@@ -49,7 +49,7 @@ function getDateStringQuery(data, unit) {
   return `formatDateTime(${data}, '${CLICKHOUSE_DATE_FORMATS[unit]}')`;
 }
 
-function getDateQuery(field, unit, timezone) {
+function getDateQuery(field, unit, timezone?) {
   if (timezone) {
     return `date_trunc('${unit}', ${field}, '${timezone}')`;
   }
@@ -60,12 +60,8 @@ function getDateFormat(date) {
   return `'${dateFormat(date, 'UTC:yyyy-mm-dd HH:MM:ss')}'`;
 }
 
-function getCommaSeparatedStringFormat(data) {
-  return data.map(a => `'${a}'`).join(',') || '';
-}
-
-function getBetweenDates(field, start_at, end_at) {
-  return `${field} between ${getDateFormat(start_at)} and ${getDateFormat(end_at)}`;
+function getBetweenDates(field, startAt, endAt) {
+  return `${field} between ${getDateFormat(startAt)} and ${getDateFormat(endAt)}`;
 }
 
 function getJsonField(column, property) {
@@ -106,7 +102,7 @@ function getEventDataFilterQuery(column, filters) {
   return query.join('\nand ');
 }
 
-function getFilterQuery(filters = {}, params = []) {
+function getFilterQuery(filters = {}, params = {}) {
   const query = Object.keys(filters).reduce((arr, key) => {
     const filter = filters[key];
 
@@ -120,20 +116,24 @@ function getFilterQuery(filters = {}, params = []) {
       case 'browser':
       case 'device':
       case 'country':
-      case 'event_name':
-        arr.push(`and ${key}=$${params.length + 1}`);
-        params.push(decodeURIComponent(filter));
+        arr.push(`and ${key} = {${key}:String}`);
+        params[key] = filter;
+        break;
+
+      case 'eventName':
+        arr.push(`and event_name = {${key}:String}`);
+        params[key] = filter;
         break;
 
       case 'referrer':
-        arr.push(`and referrer like $${params.length + 1}`);
-        params.push(`%${decodeURIComponent(filter)}%`);
+        arr.push(`and referrer ILIKE {${key}:String}`);
+        params[key] = `%${filter}`;
         break;
 
       case 'domain':
-        arr.push(`and referrer not like $${params.length + 1}`);
-        arr.push(`and referrer not like '/%'`);
-        params.push(`%://${filter}/%`);
+        arr.push(`and referrer NOT ILIKE {${key}:String}`);
+        arr.push(`and referrer NOT ILIKE '/%'`);
+        params[key] = `%://${filter}/%`;
         break;
 
       case 'query':
@@ -146,49 +146,32 @@ function getFilterQuery(filters = {}, params = []) {
   return query.join('\n');
 }
 
-function parseFilters(filters = {}, params = []) {
-  const { domain, url, event_url, referrer, os, browser, device, country, event_name, query } =
+function parseFilters(filters: any = {}, params: any = {}) {
+  const { domain, url, eventUrl, referrer, os, browser, device, country, eventName, query } =
     filters;
 
   const pageviewFilters = { domain, url, referrer, query };
   const sessionFilters = { os, browser, device, country };
-  const eventFilters = { url: event_url, event_name };
+  const eventFilters = { url: eventUrl, eventName };
 
   return {
     pageviewFilters,
     sessionFilters,
     eventFilters,
-    event: { event_name },
+    event: { eventName },
     filterQuery: getFilterQuery(filters, params),
   };
 }
 
-function formatQuery(str, params = []) {
-  let formattedString = str;
-
-  params.forEach((param, i) => {
-    let replace = param;
-
-    if (typeof param === 'string' || param instanceof String) {
-      replace = `'${replace}'`;
-    }
-
-    formattedString = formattedString.replace(`$${i + 1}`, replace);
-  });
-
-  return formattedString;
-}
-
-async function rawQuery(query, params = []) {
-  let formattedQuery = formatQuery(query, params);
-
+async function rawQuery(query, params = {}) {
   if (process.env.LOG_QUERY) {
-    log(formattedQuery);
+    log(query);
+    log(params);
   }
 
   await connect();
 
-  return clickhouse.query(formattedQuery).toPromise();
+  return clickhouse.query(query, { params }).toPromise();
 }
 
 async function findUnique(data) {
@@ -204,7 +187,7 @@ async function findFirst(data) {
 }
 
 async function connect() {
-  if (!clickhouse) {
+  if (enabled && !clickhouse) {
     clickhouse = process.env.CLICKHOUSE_URL && (global[CLICKHOUSE] || getClient());
   }
 
@@ -219,7 +202,6 @@ export default {
   getDateStringQuery,
   getDateQuery,
   getDateFormat,
-  getCommaSeparatedStringFormat,
   getBetweenDates,
   getEventDataColumnsQuery,
   getEventDataFilterQuery,
diff --git a/lib/prisma.ts b/lib/prisma.ts
index 08cfb0e0..9100e17f 100644
--- a/lib/prisma.ts
+++ b/lib/prisma.ts
@@ -54,7 +54,19 @@ function getClient(options) {
   return prisma;
 }
 
-function getDateQuery(field, unit, timezone?): string {
+function toUuid(): string {
+  const db = getDatabaseType(process.env.DATABASE_URL);
+
+  if (db === POSTGRESQL) {
+    return '::uuid';
+  }
+
+  if (db === MYSQL) {
+    return '';
+  }
+}
+
+function getDateQuery(field: string, unit: string, timezone?: string): string {
   const db = getDatabaseType(process.env.DATABASE_URL);
 
   if (db === POSTGRESQL) {
@@ -201,7 +213,7 @@ function parseFilters(
     event: { event_name },
     joinSession:
       os || browser || device || country
-        ? `inner join session on ${sessionKey} = session.${sessionKey}`
+        ? `inner join session on website_event.${sessionKey} = session.${sessionKey}`
         : '',
     filterQuery: getFilterQuery(filters, params),
   };
@@ -235,6 +247,7 @@ export default {
   getFilterQuery,
   getEventDataColumnsQuery,
   getEventDataFilterQuery,
+  toUuid,
   parseFilters,
   rawQuery,
   transaction,
diff --git a/pages/api/websites/[id]/pageviews.ts b/pages/api/websites/[id]/pageviews.ts
index a9d91444..bbb3701e 100644
--- a/pages/api/websites/[id]/pageviews.ts
+++ b/pages/api/websites/[id]/pageviews.ts
@@ -82,7 +82,7 @@ export default async (
         endDate,
         timezone: tz,
         unit,
-        count: 'distinct pageview.',
+        count: 'distinct website_event.',
         filters: {
           url,
           os,
diff --git a/queries/analytics/event/getEventData.ts b/queries/analytics/event/getEventData.ts
index ae8b8503..103c3184 100644
--- a/queries/analytics/event/getEventData.ts
+++ b/queries/analytics/event/getEventData.ts
@@ -38,17 +38,17 @@ async function relationalQuery(
   },
 ) {
   const { startDate, endDate, eventName, columns, filters } = data;
-  const { rawQuery, getEventDataColumnsQuery, getEventDataFilterQuery } = prisma;
-  const params = [startDate, endDate];
+  const { toUuid, rawQuery, getEventDataColumnsQuery, getEventDataFilterQuery } = prisma;
+  const params: any = [websiteId, startDate, endDate, eventName];
 
   return rawQuery(
     `select
       ${getEventDataColumnsQuery('event_data', columns)}
     from website_event
-    where website_id ='${websiteId}'
-      and created_at between $1 and $2
+    where website_id = $1${toUuid()}
+      and created_at between $2 and $3
       and event_type = ${EVENT_TYPE.customEvent}
-      ${eventName ? `and eventName = ${eventName}` : ''}
+      ${eventName ? `and eventName = $4` : ''}
       ${
         Object.keys(filters).length > 0
           ? `and ${getEventDataFilterQuery('event_data', filters)}`
@@ -72,14 +72,14 @@ async function clickhouseQuery(
   const { rawQuery, getBetweenDates, getEventDataColumnsQuery, getEventDataFilterQuery } =
     clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0];
+  const params = { websiteId, revId: website?.revId || 0 };
 
   return rawQuery(
     `select
       ${getEventDataColumnsQuery('event_data', columns)}
     from event
-    where website_id = $1
-      and rev_id = $2
+    where website_id = {websiteId:UUID}
+      and rev_id = {revId:UInt32}
       and event_type = ${EVENT_TYPE.customEvent}
       ${eventName ? `and eventName = ${eventName}` : ''}
       and ${getBetweenDates('created_at', startDate, endDate)}
diff --git a/queries/analytics/event/getEventMetrics.ts b/queries/analytics/event/getEventMetrics.ts
index 0440cb3f..31cfe327 100644
--- a/queries/analytics/event/getEventMetrics.ts
+++ b/queries/analytics/event/getEventMetrics.ts
@@ -45,8 +45,8 @@ async function relationalQuery(
     };
   },
 ) {
-  const { rawQuery, getDateQuery, getFilterQuery } = prisma;
-  const params = [startDate, endDate];
+  const { toUuid, rawQuery, getDateQuery, getFilterQuery } = prisma;
+  const params: any = [websiteId, startDate, endDate];
 
   return rawQuery(
     `select
@@ -54,8 +54,8 @@ async function relationalQuery(
       ${getDateQuery('created_at', unit, timezone)} t,
       count(*) y
     from website_event
-    where website_id='${websiteId}'
-      and created_at between $1 and $2
+    where website_id = $1${toUuid()}
+      and created_at between $2 and $3
       and event_type = ${EVENT_TYPE.customEvent}
       ${getFilterQuery(filters, params)}
     group by 1, 2
@@ -85,7 +85,7 @@ async function clickhouseQuery(
 ) {
   const { rawQuery, getDateQuery, getBetweenDates, getFilterQuery } = clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0];
+  const params = { websiteId, revId: website?.revId || 0 };
 
   return rawQuery(
     `select
@@ -93,8 +93,8 @@ async function clickhouseQuery(
       ${getDateQuery('created_at', unit, timezone)} t,
       count(*) y
     from event
-    where website_id = $1
-      and rev_id = $2
+    where website_id = {websiteId:UUID}
+    and rev_id = {revId:UInt32}
       and event_type = ${EVENT_TYPE.customEvent}
       and ${getBetweenDates('created_at', startDate, endDate)}
       ${getFilterQuery(filters, params)}
diff --git a/queries/analytics/event/getEvents.js b/queries/analytics/event/getEvents.ts
similarity index 50%
rename from queries/analytics/event/getEvents.js
rename to queries/analytics/event/getEvents.ts
index 81a187ce..5d01824c 100644
--- a/queries/analytics/event/getEvents.js
+++ b/queries/analytics/event/getEvents.ts
@@ -1,29 +1,30 @@
 import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
+import { EVENT_TYPE } from 'lib/constants';
 
-export function getEvents(...args) {
+export function getEvents(...args: [websites: string[], startAt: Date]) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-function relationalQuery(websites, start_at) {
+function relationalQuery(websites: string[], startAt: Date) {
   return prisma.client.event.findMany({
     where: {
       websiteId: {
         in: websites,
       },
       createdAt: {
-        gte: start_at,
+        gte: startAt,
       },
     },
   });
 }
 
-function clickhouseQuery(websites, start_at) {
-  const { rawQuery, getDateFormat, getCommaSeparatedStringFormat } = clickhouse;
+function clickhouseQuery(websites: string[], startAt: Date) {
+  const { rawQuery } = clickhouse;
 
   return rawQuery(
     `select
@@ -34,12 +35,12 @@ function clickhouseQuery(websites, start_at) {
       url,
       event_name
     from event
-    where event_name != ''
-      and ${
-        websites && websites.length > 0
-          ? `website_id in (${getCommaSeparatedStringFormat(websites)})`
-          : '0 = 0'
-      }
-      and created_at >= ${getDateFormat(start_at)}`,
+    where event_type = ${EVENT_TYPE.customEvent}
+      and ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
+      and created_at >= {startAt:DateTime('UTC')}`,
+    {
+      websites,
+      startAt,
+    },
   );
 }
diff --git a/queries/analytics/pageview/getPageviewMetrics.ts b/queries/analytics/pageview/getPageviewMetrics.ts
index 1e619fb8..582eb006 100644
--- a/queries/analytics/pageview/getPageviewMetrics.ts
+++ b/queries/analytics/pageview/getPageviewMetrics.ts
@@ -33,17 +33,22 @@ async function relationalQuery(
   },
 ) {
   const { startDate, endDate, column, filters = {} } = data;
-  const { rawQuery, parseFilters } = prisma;
-  const params = [startDate, endDate];
+  const { rawQuery, parseFilters, toUuid } = prisma;
+  const params: any = {
+    websiteId,
+    startDate,
+    endDate,
+    type: EVENT_TYPE.pageView,
+  };
   const { filterQuery, joinSession } = parseFilters(filters, params);
 
   return rawQuery(
     `select ${column} x, count(*) y
     from website_event
       ${joinSession}
-    where website_id='${websiteId}'
-      and website_event.created_at between $1 and $2
-      and event_type = ${EVENT_TYPE.pageView}
+    where website_event.website_id = $1${toUuid()}
+      and website_event.created_at between $2 and $3
+      and event_type = $4
       ${filterQuery}
     group by 1
     order by 2 desc`,
@@ -63,15 +68,19 @@ async function clickhouseQuery(
   const { startDate, endDate, column, filters = {} } = data;
   const { rawQuery, parseFilters, getBetweenDates } = clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0, EVENT_TYPE.pageView];
+  const params = {
+    websiteId,
+    revId: website?.revId || 0,
+    eventType: EVENT_TYPE.pageView,
+  };
   const { filterQuery } = parseFilters(filters, params);
 
   return rawQuery(
     `select ${column} x, count(*) y
     from event
-    where website_id = $1
-      and rev_id = $2
-      and event_type = $3
+    where website_id = {websiteId:UUID}
+      and rev_id = {revId:UInt32}
+      and event_type = {eventType:UInt32}
       and ${getBetweenDates('created_at', startDate, endDate)}
       ${filterQuery}
     group by x
diff --git a/queries/analytics/pageview/getPageviewStats.ts b/queries/analytics/pageview/getPageviewStats.ts
index b23f782b..b2d86b33 100644
--- a/queries/analytics/pageview/getPageviewStats.ts
+++ b/queries/analytics/pageview/getPageviewStats.ts
@@ -45,8 +45,8 @@ async function relationalQuery(
     filters = {},
     sessionKey = 'session_id',
   } = data;
-  const { getDateQuery, parseFilters, rawQuery } = prisma;
-  const params = [startDate, endDate];
+  const { toUuid, getDateQuery, parseFilters, rawQuery } = prisma;
+  const params: any = [websiteId, startDate, endDate];
   const { filterQuery, joinSession } = parseFilters(filters, params);
 
   return rawQuery(
@@ -54,8 +54,8 @@ async function relationalQuery(
         count(${count !== '*' ? `${count}${sessionKey}` : count}) y
       from website_event
         ${joinSession}
-      where website.website_id='${websiteId}'
-        and pageview.created_at between $1 and $2
+      where website_event.website_id = $1${toUuid()}
+        and website_event.created_at between $2 and $3
         and event_type = ${EVENT_TYPE.pageView}
         ${filterQuery}
       group by 1`,
@@ -78,7 +78,7 @@ async function clickhouseQuery(
   const { startDate, endDate, timezone = 'UTC', unit = 'day', count = '*', filters = {} } = data;
   const { parseFilters, rawQuery, getDateStringQuery, getDateQuery, getBetweenDates } = clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0];
+  const params = { websiteId, revId: website?.revId || 0 };
   const { filterQuery } = parseFilters(filters, params);
 
   return rawQuery(
@@ -90,8 +90,8 @@ async function clickhouseQuery(
         ${getDateQuery('created_at', unit, timezone)} t,
         count(${count !== '*' ? 'distinct session_id' : count}) y
       from event
-      where website_id = $1      
-        and rev_id = $2  
+      where website_id = {websiteId:UUID}
+        and rev_id = {revId:UInt32}
         and event_type = ${EVENT_TYPE.pageView}
         and ${getBetweenDates('created_at', startDate, endDate)}
         ${filterQuery}
diff --git a/queries/analytics/pageview/getPageviews.js b/queries/analytics/pageview/getPageviews.js
deleted file mode 100644
index 2bf41b0b..00000000
--- a/queries/analytics/pageview/getPageviews.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import prisma from 'lib/prisma';
-import clickhouse from 'lib/clickhouse';
-import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
-
-export async function getPageviews(...args) {
-  return runQuery({
-    [PRISMA]: () => relationalQuery(...args),
-    [CLICKHOUSE]: () => clickhouseQuery(...args),
-  });
-}
-
-async function relationalQuery(websites, start_at) {
-  return prisma.client.pageview.findMany({
-    where: {
-      websiteId: {
-        in: websites,
-      },
-      createdAt: {
-        gte: start_at,
-      },
-    },
-  });
-}
-
-async function clickhouseQuery(websites, start_at) {
-  const { rawQuery, getCommaSeparatedStringFormat } = clickhouse;
-
-  return rawQuery(
-    `select
-        website_id,
-        session_id,
-        created_at,
-        url
-      from event
-      where event_name = ''
-        and ${
-          websites && websites.length > 0
-            ? `website_id in (${getCommaSeparatedStringFormat(websites)})`
-            : '0 = 0'
-        }
-      and created_at >= ${clickhouse.getDateFormat(start_at)}`,
-  );
-}
diff --git a/queries/analytics/pageview/getPageviews.ts b/queries/analytics/pageview/getPageviews.ts
new file mode 100644
index 00000000..eb60a1f5
--- /dev/null
+++ b/queries/analytics/pageview/getPageviews.ts
@@ -0,0 +1,44 @@
+import prisma from 'lib/prisma';
+import clickhouse from 'lib/clickhouse';
+import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
+import { EVENT_TYPE } from 'lib/constants';
+
+export async function getPageviews(...args: [websites: string[], startAt: Date]) {
+  return runQuery({
+    [PRISMA]: () => relationalQuery(...args),
+    [CLICKHOUSE]: () => clickhouseQuery(...args),
+  });
+}
+
+async function relationalQuery(websites: string[], startAt: Date) {
+  return prisma.client.pageview.findMany({
+    where: {
+      websiteId: {
+        in: websites,
+      },
+      createdAt: {
+        gte: startAt,
+      },
+    },
+  });
+}
+
+async function clickhouseQuery(websites: string[], startAt: Date) {
+  const { rawQuery } = clickhouse;
+
+  return rawQuery(
+    `select
+        website_id,
+        session_id,
+        created_at,
+        url
+      from event
+      where event_type = ${EVENT_TYPE.pageView}
+        and ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
+        and created_at >= {startAt:DateTime('UTC')}`,
+    {
+      websites,
+      startAt,
+    },
+  );
+}
diff --git a/queries/analytics/session/getSession.ts b/queries/analytics/session/getSession.ts
index 19875117..09b238f2 100644
--- a/queries/analytics/session/getSession.ts
+++ b/queries/analytics/session/getSession.ts
@@ -18,7 +18,7 @@ async function relationalQuery(where: Prisma.SessionWhereUniqueInput) {
 
 async function clickhouseQuery({ id: sessionId }: { id: string }) {
   const { rawQuery, findFirst } = clickhouse;
-  const params = [sessionId];
+  const params = { sessionId };
 
   return rawQuery(
     `select
@@ -33,7 +33,7 @@ async function clickhouseQuery({ id: sessionId }: { id: string }) {
       language, 
       country 
     from event
-      where session_id = $1
+      where session_id = {sessionId:UUID}
     limit 1`,
     params,
   ).then(result => findFirst(result));
diff --git a/queries/analytics/session/getSessionMetrics.ts b/queries/analytics/session/getSessionMetrics.ts
index 04e1801a..3465967e 100644
--- a/queries/analytics/session/getSessionMetrics.ts
+++ b/queries/analytics/session/getSessionMetrics.ts
@@ -2,6 +2,7 @@ import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
 import cache from 'lib/cache';
+import { EVENT_TYPE } from 'lib/constants';
 
 export async function getSessionMetrics(
   ...args: [
@@ -20,21 +21,21 @@ async function relationalQuery(
   data: { startDate: Date; endDate: Date; field: string; filters: object },
 ) {
   const { startDate, endDate, field, filters = {} } = data;
-  const { parseFilters, rawQuery } = prisma;
-  const params = [startDate, endDate];
+  const { toUuid, parseFilters, rawQuery } = prisma;
+  const params: any = [websiteId, startDate, endDate];
   const { filterQuery, joinSession } = parseFilters(filters, params);
 
   return rawQuery(
     `select ${field} x, count(*) y
     from session as x
     where x.session_id in (
-      select pageview.session_id
-      from pageview
+      select website_event.session_id
+      from website_event
         join website 
-          on pageview.website_id = website.website_id
+          on website_event.website_id = website.website_id
         ${joinSession}
-      where website.website_id='${websiteId}'
-      and pageview.created_at between $1 and $2
+      where website.website_id = $1${toUuid()}
+      and website_event.created_at between $2 and $3
       ${filterQuery}
     )
     group by 1
@@ -50,15 +51,15 @@ async function clickhouseQuery(
   const { startDate, endDate, field, filters = {} } = data;
   const { parseFilters, getBetweenDates, rawQuery } = clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0];
+  const params = { websiteId, revId: website?.revId || 0 };
   const { filterQuery } = parseFilters(filters, params);
 
   return rawQuery(
     `select ${field} x, count(distinct session_id) y
     from event as x
-    where website_id = $1
-      and rev_id = $2
-      and event_name = ''
+    where website_id = {websiteId:UUID}
+    and rev_id = {revId:UInt32}
+    and event_type = ${EVENT_TYPE.pageView}
       and ${getBetweenDates('created_at', startDate, endDate)}
       ${filterQuery}
     group by x
diff --git a/queries/analytics/stats/getActiveVisitors.ts b/queries/analytics/stats/getActiveVisitors.ts
index 0b07574d..60a1e5c1 100644
--- a/queries/analytics/stats/getActiveVisitors.ts
+++ b/queries/analytics/stats/getActiveVisitors.ts
@@ -11,29 +11,31 @@ export async function getActiveVisitors(...args: [websiteId: string]) {
 }
 
 async function relationalQuery(websiteId: string) {
-  const date = subMinutes(new Date(), 5);
-  const params = [date];
+  const { toUuid, rawQuery } = prisma;
 
-  return prisma.rawQuery(
+  const date = subMinutes(new Date(), 5);
+  const params: any = [websiteId, date];
+
+  return rawQuery(
     `select count(distinct session_id) x
-    from pageview
+    from website_event
       join website 
-        on pageview.website_id = website.website_id
-    where website.website_id = '${websiteId}'
-    and pageview.created_at >= $1`,
+        on website_event.website_id = website.website_id
+    where website.website_id = $1${toUuid()}
+    and website_event.created_at >= $2`,
     params,
   );
 }
 
 async function clickhouseQuery(websiteId: string) {
-  const { rawQuery, getDateFormat } = clickhouse;
-  const params = [websiteId];
+  const { rawQuery } = clickhouse;
+  const params = { websiteId, startAt: subMinutes(new Date(), 5) };
 
   return rawQuery(
     `select count(distinct session_id) x
     from event
-    where website_id = $1
-    and created_at >= ${getDateFormat(subMinutes(new Date(), 5))}`,
+    where website_id = {websiteId:UUID}
+    and created_at >= {startAt:DateTime('UTC')}`,
     params,
   );
 }
diff --git a/queries/analytics/stats/getWebsiteStats.ts b/queries/analytics/stats/getWebsiteStats.ts
index bf5cdd96..73d28fb6 100644
--- a/queries/analytics/stats/getWebsiteStats.ts
+++ b/queries/analytics/stats/getWebsiteStats.ts
@@ -2,6 +2,7 @@ import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
 import cache from 'lib/cache';
+import { EVENT_TYPE } from 'lib/constants';
 
 export async function getWebsiteStats(
   ...args: [websiteId: string, data: { startDate: Date; endDate: Date; filters: object }]
@@ -17,8 +18,8 @@ async function relationalQuery(
   data: { startDate: Date; endDate: Date; filters: object },
 ) {
   const { startDate, endDate, filters = {} } = data;
-  const { getDateQuery, getTimestampInterval, parseFilters, rawQuery } = prisma;
-  const params = [startDate, endDate];
+  const { toUuid, getDateQuery, getTimestampInterval, parseFilters, rawQuery } = prisma;
+  const params: any = [websiteId, startDate, endDate];
   const { filterQuery, joinSession } = parseFilters(filters, params);
 
   return rawQuery(
@@ -27,16 +28,16 @@ async function relationalQuery(
         sum(case when t.c = 1 then 1 else 0 end) as "bounces",
         sum(t.time) as "totaltime"
       from (
-        select pageview.session_id,
-          ${getDateQuery('pageview.created_at', 'hour')},
+        select website_event.session_id,
+          ${getDateQuery('website_event.created_at', 'hour')},
           count(*) c,
-          ${getTimestampInterval('pageview.created_at')} as "time"
-        from pageview
+          ${getTimestampInterval('website_event.created_at')} as "time"
+        from website_event
           join website 
-            on pageview.website_id = website.website_id
+            on website_event.website_id = website.website_id
           ${joinSession}
-        where website.website_id='${websiteId}'
-          and pageview.created_at between $1 and $2
+        where website.website_id = $1${toUuid()}
+          and website_event.created_at between $2 and $3
           ${filterQuery}
         group by 1, 2
      ) t`,
@@ -51,7 +52,7 @@ async function clickhouseQuery(
   const { startDate, endDate, filters = {} } = data;
   const { rawQuery, getDateQuery, getBetweenDates, parseFilters } = clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0];
+  const params = { websiteId, revId: website?.revId || 0 };
   const { filterQuery } = parseFilters(filters, params);
 
   return rawQuery(
@@ -67,9 +68,9 @@ async function clickhouseQuery(
          min(created_at) min_time,
          max(created_at) max_time
        from event
-       where event_name = ''
-         and website_id = $1
-         and rev_id = $2
+       where event_type = ${EVENT_TYPE.pageView}
+        and website_id = {websiteId:UUID}
+        and rev_id = {revId:UInt32}
          and ${getBetweenDates('created_at', startDate, endDate)}
          ${filterQuery}
        group by session_id, time_series
diff --git a/styles/index.css b/styles/index.css
index 4159bb98..8f27f778 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -88,3 +88,41 @@ svg {
   height: 100%;
   flex: 1;
 }
+
+input[type='text'],
+input[type='password'],
+select,
+textarea {
+  color: var(--base900);
+  background: var(--base50);
+  padding: 4px 8px;
+  font-size: var(--font-size-normal);
+  line-height: 1.8;
+  border: 1px solid var(--base500);
+  border-radius: 4px;
+  outline: none;
+  resize: none;
+  flex: 1;
+}
+
+input[type='checkbox'] + label {
+  margin-left: 10px;
+}
+
+label {
+  flex: 1;
+  margin-right: 20px;
+}
+
+label:empty {
+  flex: 0;
+}
+
+dt {
+  font-weight: 600;
+  margin: 0 0 5px 0;
+}
+
+dd {
+  margin: 0 0 30px 0;
+}