diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx index 617015f1d6..a96ab8be33 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx @@ -9,6 +9,7 @@ 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 HostsTable from 'components/metrics/HostsTable'; import ScreenTable from 'components/metrics/ScreenTable'; import EventsTable from 'components/metrics/EventsTable'; import SideNav from 'components/layout/SideNav'; @@ -22,6 +23,7 @@ const views = { exit: PagesTable, title: PagesTable, referrer: ReferrersTable, + host: HostsTable, browser: BrowsersTable, os: OSTable, device: DevicesTable, @@ -60,6 +62,11 @@ export default function WebsiteExpandedView({ label: formatMessage(labels.referrers), url: renderUrl({ view: 'referrer' }), }, + { + key: 'host', + label: formatMessage(labels.hosts), + url: renderUrl({ view: 'host' }), + }, { key: 'browser', label: formatMessage(labels.browsers), diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx index e530f2bae7..35b575722c 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { Grid, GridRow } from 'components/layout/Grid'; import PagesTable from 'components/metrics/PagesTable'; import ReferrersTable from 'components/metrics/ReferrersTable'; +import HostsTable from 'components/metrics/HostsTable'; import BrowsersTable from 'components/metrics/BrowsersTable'; import OSTable from 'components/metrics/OSTable'; import DevicesTable from 'components/metrics/DevicesTable'; @@ -19,9 +20,10 @@ export default function WebsiteTableView({ websiteId }: { websiteId: string }) { return ( - + + diff --git a/src/components/hooks/useFields.ts b/src/components/hooks/useFields.ts index 05d2b4588c..d08a234041 100644 --- a/src/components/hooks/useFields.ts +++ b/src/components/hooks/useFields.ts @@ -7,6 +7,7 @@ export function useFields() { { name: 'url', type: 'string', label: formatMessage(labels.url) }, { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) }, { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) }, + { name: 'host', type: 'string', label: formatMessage(labels.host) }, { name: 'query', type: 'string', label: formatMessage(labels.query) }, { name: 'browser', type: 'string', label: formatMessage(labels.browser) }, { name: 'os', type: 'string', label: formatMessage(labels.os) }, diff --git a/src/components/messages.ts b/src/components/messages.ts index dd5eb9ddcc..15fccda671 100644 --- a/src/components/messages.ts +++ b/src/components/messages.ts @@ -91,6 +91,7 @@ export const labels = defineMessages({ entry: { id: 'label.entry', defaultMessage: 'Entry URL' }, exit: { id: 'label.exit', defaultMessage: 'Exit URL' }, referrers: { id: 'label.referrers', defaultMessage: 'Referrers' }, + hosts: { id: 'label.hosts', defaultMessage: 'Hosts' }, screens: { id: 'label.screens', defaultMessage: 'Screens' }, browsers: { id: 'label.browsers', defaultMessage: 'Browsers' }, os: { id: 'label.os', defaultMessage: 'OS' }, @@ -202,6 +203,7 @@ export const labels = defineMessages({ }, dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' }, referrer: { id: 'label.referrer', defaultMessage: 'Referrer' }, + host: { id: 'label.host', defaultMessage: 'Host' }, country: { id: 'label.country', defaultMessage: 'Country' }, region: { id: 'label.region', defaultMessage: 'Region' }, city: { id: 'label.city', defaultMessage: 'City' }, diff --git a/src/components/metrics/HostsTable.tsx b/src/components/metrics/HostsTable.tsx new file mode 100644 index 0000000000..d3a0f3bf39 --- /dev/null +++ b/src/components/metrics/HostsTable.tsx @@ -0,0 +1,35 @@ +import MetricsTable, { MetricsTableProps } from './MetricsTable'; +import FilterLink from 'components/common/FilterLink'; +import { useMessages } from 'components/hooks'; +import { Flexbox } from 'react-basics'; + +export function HostsTable(props: MetricsTableProps) { + const { formatMessage, labels } = useMessages(); + + const renderLink = ({ x: host }) => { + return ( + + + + ); + }; + + return ( + <> + + + ); +} + +export default HostsTable; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index f8447b8b7e..f7200ce312 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -31,8 +31,9 @@ export const FILTER_DAY = 'filter-day'; export const FILTER_RANGE = 'filter-range'; export const FILTER_REFERRERS = 'filter-referrers'; export const FILTER_PAGES = 'filter-pages'; + export const UNIT_TYPES = ['year', 'month', 'hour', 'day', 'minute']; -export const EVENT_COLUMNS = ['url', 'entry', 'exit', 'referrer', 'title', 'query', 'event']; +export const EVENT_COLUMNS = ['url', 'entry', 'exit', 'referrer', 'title', 'query', 'event', 'host']; export const SESSION_COLUMNS = [ 'browser', @@ -43,6 +44,7 @@ export const SESSION_COLUMNS = [ 'country', 'region', 'city', + 'host', ]; export const FILTER_COLUMNS = { @@ -50,6 +52,7 @@ export const FILTER_COLUMNS = { entry: 'url_path', exit: 'url_path', referrer: 'referrer_domain', + host: 'hostname', title: 'page_title', query: 'url_query', os: 'os', diff --git a/src/pages/api/websites/[websiteId]/pageviews.ts b/src/pages/api/websites/[websiteId]/pageviews.ts index 5b63151585..bc363228b0 100644 --- a/src/pages/api/websites/[websiteId]/pageviews.ts +++ b/src/pages/api/websites/[websiteId]/pageviews.ts @@ -17,6 +17,7 @@ export interface WebsitePageviewRequestQuery { timezone?: string; url?: string; referrer?: string; + host?: string; title?: string; os?: string; browser?: string; @@ -36,6 +37,7 @@ const schema = { timezone: TimezoneTest, url: yup.string(), referrer: yup.string(), + host: yup.string(), title: yup.string(), os: yup.string(), browser: yup.string(), diff --git a/src/pages/api/websites/[websiteId]/stats.ts b/src/pages/api/websites/[websiteId]/stats.ts index 1ce616e7ac..3f6c4e340b 100644 --- a/src/pages/api/websites/[websiteId]/stats.ts +++ b/src/pages/api/websites/[websiteId]/stats.ts @@ -14,6 +14,7 @@ export interface WebsiteStatsRequestQuery { endAt: number; url?: string; referrer?: string; + host?: string; title?: string; query?: string; event?: string; @@ -33,6 +34,7 @@ const schema = { endAt: yup.number().required(), url: yup.string(), referrer: yup.string(), + host: yup.string(), title: yup.string(), query: yup.string(), event: yup.string(),