watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 07:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Fixed properties queries.

Browse source
This commit is contained in:
Mike Cao 2025-07-15 01:31:08 -07:00
parent 465a03f987
commit 5e6799a715
38 changed files with 139 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/app/(main)/settings/websites/WebsiteAddButton.tsx
View file

@ -1,14 +1,5 @@
import { useMessages, useModified } from '@/components/hooks';
import {
Button,
Icon,
Modal,
Dialog,
DialogTrigger,
Text,
Column,
useToast,
} from '@umami/react-zen';
import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
import { Plus } from '@/components/icons';
import { WebsiteAddForm } from './WebsiteAddForm';
@ -33,11 +24,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
</Button>
<Modal>
<Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
{({ close }) => (
<Column width="300px">
<WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
</Column>
)}
{({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
</Dialog>
</Modal>
</DialogTrigger>

10
src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
View file

@ -1,21 +1,15 @@
'use client';
import { Column } from '@umami/react-zen';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { WebsitesDataTable } from './WebsitesDataTable';
import { ROLES } from '@/lib/constants';
import { SectionHeader } from '@/components/common/SectionHeader';
import { WebsiteAddButton } from './WebsiteAddButton';
export function WebsitesSettingsPage({ teamId }: { teamId: string }) {
const { user } = useLoginQuery();
const canCreate = user.role !== ROLES.viewOnly;
const { formatMessage, labels } = useMessages();
return (
<Column gap>
<SectionHeader title={formatMessage(labels.websites)}>
{canCreate && <WebsiteAddButton teamId={teamId} />}
</SectionHeader>
<SectionHeader title={formatMessage(labels.websites)} />
<WebsitesDataTable teamId={teamId} />
</Column>
);

2
src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
View file

@ -4,14 +4,12 @@ import { Column } from '@umami/react-zen';
import { WebsiteProvider } from './WebsiteProvider';
import { PageBody } from '@/components/common/PageBody';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteTabs } from './WebsiteTabs';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (
<WebsiteProvider websiteId={websiteId}>
<PageBody>
<WebsiteHeader />
<WebsiteTabs />
<Column>{children}</Column>
</PageBody>
</WebsiteProvider>

2
src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
View file

@ -13,8 +13,8 @@ export function EventsDataTable({
children?: ReactNode;
}) {
const { formatMessage, labels } = useMessages();
const query = useWebsiteEventsQuery(websiteId);
const [view, setView] = useState('all');
const query = useWebsiteEventsQuery(websiteId);
const buttons = [
{

42
src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
View file

@ -1,5 +1,5 @@
import { DataTable, DataColumn, Icon, Row } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { useFormat, useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Avatar } from '@/components/common/Avatar';
import Link from 'next/link';
@ -10,6 +10,7 @@ import { TypeIcon } from '@/components/common/TypeIcon';
export function EventsTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { renderUrl } = useNavigation();
const { formatValue } = useFormat();
if (data.length === 0) {
return <Empty />;
@ -20,7 +21,10 @@ export function EventsTable({ data = [] }) {
<DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
{(row: any) => {
return (
<Row alignItems="center" gap="2">
<Row alignItems="center" gap>
<Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
<Avatar seed={row.sessionId} size={32} />
</Link>
<Icon>{row.eventName ? <Bolt /> : <Eye />}</Icon>
{formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
<strong>{row.eventName || row.urlPath}</strong>
@ -28,22 +32,30 @@ export function EventsTable({ data = [] }) {
);
}}
</DataColumn>
<DataColumn id="created" width="1fr" align="end">
<DataColumn id="location" label={formatMessage(labels.location)}>
{(row: any) => (
<Row alignItems="center" gap>
<DateDistance date={new Date(row.createdAt)} />
<Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
<Avatar seed={row.sessionId} size={32} />
</Link>
<Row alignItems="center" gap="1">
<TypeIcon type="country" value={row.country} />
<TypeIcon type="browser" value={row.browser} />
<TypeIcon type="os" value={row.os} />
<TypeIcon type="device" value={row.device} />
</Row>
</Row>
<TypeIcon type="country" value={row.country}>
{row.city ? `${row.city}, ` : ''} {formatValue(row.country, 'country')}
</TypeIcon>
)}
</DataColumn>
<DataColumn id="browser" label={formatMessage(labels.browser)}>
{(row: any) => (
<TypeIcon type="browser" value={row.browser}>
{formatValue(row.browser, 'browser')}
</TypeIcon>
)}
</DataColumn>
<DataColumn id="device" label={formatMessage(labels.device)}>
{(row: any) => (
<TypeIcon type="device" value={row.device}>
{formatValue(row.device, 'device')}
</TypeIcon>
)}
</DataColumn>
<DataColumn id="created" width="160px" align="end">
{(row: any) => <DateDistance date={new Date(row.createdAt)} />}
</DataColumn>
</DataTable>
);
}

2
src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
View file

@ -14,7 +14,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
<DataColumn id="id" label={formatMessage(labels.session)} width="100px">
{(row: any) => (
<Link href={`sessions/${row.id}`}>
<Avatar seed={row.id} size={48} />
<Avatar seed={row.id} size={32} />
</Link>
)}
</DataColumn>

12
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
View file

@ -13,7 +13,7 @@ import {
} from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Bolt, Eye, FileText } from '@/components/icons';
import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks';
import { EventData } from '@/components/metrics/EventData';
export function SessionActivity({
@ -27,6 +27,7 @@ export function SessionActivity({
startDate: Date;
endDate: Date;
}) {
const { formatMessage, labels } = useMessages();
const { formatTimezoneDate } = useTimezone();
const { data, isLoading, error } = useSessionActivityQuery(
websiteId,
@ -50,9 +51,14 @@ export function SessionActivity({
<StatusLight color={`#${visitId?.substring(0, 6)}`}>
{formatTimezoneDate(createdAt, 'pp')}
</StatusLight>
<Row alignItems="center" gap>
<Row alignItems="center" gap="2">
<Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
<Text>{eventName || urlPath}</Text>
<Text>
{eventName
? formatMessage(labels.triggeredEvent)
: formatMessage(labels.viewedPage)}
</Text>
<Text weight="bold">{eventName || urlPath}</Text>
{hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
</Row>
</Row>

14
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -44,6 +44,13 @@ export function SessionInfo({ data }) {
{data?.city}
</Info>
<Info
label={formatMessage(labels.browser)}
icon={<TypeIcon type="browser" value={data?.browser} />}
>
{formatValue(data?.browser, 'browser')}
</Info>
<Info
label={formatMessage(labels.os)}
icon={<TypeIcon type="os" value={data?.os?.toLowerCase()?.replaceAll(/\W/g, '-')} />}
@ -57,13 +64,6 @@ export function SessionInfo({ data }) {
>
{formatValue(data?.device, 'device')}
</Info>
<Info
label={formatMessage(labels.browser)}
icon={<TypeIcon type="browser" value={data?.browser} />}
>
{formatValue(data?.browser, 'browser')}
</Info>
</Column>
);
}

12
src/app/api/realtime/[websiteId]/route.ts
View file

@ -21,12 +21,14 @@ export async function GET(
return unauthorized();
}
const filters = await getQueryFilters({
...query,
const filters = await getQueryFilters(
{
...query,
startAt: subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime(),
endAt: Date.now(),
},
websiteId,
startAt: subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime(),
endAt: Date.now(),
});
);
const data = await getRealtimeData(websiteId, filters);

2
src/app/api/reports/attribution/route.ts
View file

@ -18,7 +18,7 @@ export async function POST(request: Request) {
}
const parameters = await setWebsiteDate(websiteId, body.parameters);
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const data = await getAttribution(websiteId, parameters as AttributionParameters, filters);

2
src/app/api/reports/breakdown/route.ts
View file

@ -18,7 +18,7 @@ export async function POST(request: Request) {
}
const parameters = await setWebsiteDate(websiteId, body.parameters);
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const data = await getBreakdown(websiteId, parameters as BreakdownParameters, filters);

2
src/app/api/reports/funnel/route.ts
View file

@ -18,7 +18,7 @@ export async function POST(request: Request) {
}
const parameters = await setWebsiteDate(websiteId, body.parameters);
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const data = await getFunnel(websiteId, parameters as FunnelParameters, filters);

2
src/app/api/reports/goal/route.ts
View file

@ -18,7 +18,7 @@ export async function POST(request: Request) {
}
const parameters = await setWebsiteDate(websiteId, body.parameters);
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const data = await getGoal(websiteId, parameters as GoalParameters, filters);

4
src/app/api/reports/journey/route.ts
View file

@ -1,6 +1,6 @@
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { getQueryFilters, parseRequest, setWebsiteDate } from '@/lib/request';
import { getQueryFilters, parseRequest } from '@/lib/request';
import { getJourney } from '@/queries';
import { reportResultSchema } from '@/lib/schema';
@ -17,7 +17,7 @@ export async function POST(request: Request) {
return unauthorized();
}
const queryFilters = await setWebsiteDate(websiteId, await getQueryFilters(filters));
const queryFilters = await getQueryFilters(filters, websiteId);
const data = await getJourney(websiteId, parameters, queryFilters);

2
src/app/api/reports/retention/route.ts
View file

@ -17,7 +17,7 @@ export async function POST(request: Request) {
return unauthorized();
}
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const parameters = await setWebsiteDate(websiteId, body.parameters);
const data = await getRetention(websiteId, parameters as RetentionParameters, filters);

2
src/app/api/reports/revenue/route.ts
View file

@ -18,7 +18,7 @@ export async function POST(request: Request) {
}
const parameters = await setWebsiteDate(websiteId, body.parameters);
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const data = await getRevenue(websiteId, parameters as RevenuParameters, filters);

2
src/app/api/reports/utm/route.ts
View file

@ -18,7 +18,7 @@ export async function POST(request: Request) {
}
const parameters = await setWebsiteDate(websiteId, body.parameters);
const filters = await getQueryFilters(body.filters);
const filters = await getQueryFilters(body.filters, websiteId);
const data = await getUTM(websiteId, parameters as UTMParameters, filters);

2
src/app/api/websites/[websiteId]/event-data/events/route.ts
View file

@ -26,7 +26,7 @@ export async function GET(
}
const { event } = query;
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getEventDataEvents(websiteId, {
...filters,

2
src/app/api/websites/[websiteId]/event-data/fields/route.ts
View file

@ -25,7 +25,7 @@ export async function GET(
return unauthorized();
}
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getEventDataFields(websiteId, filters);

2
src/app/api/websites/[websiteId]/event-data/properties/route.ts
View file

@ -27,7 +27,7 @@ export async function GET(
}
const { propertyName } = query;
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getEventDataProperties(websiteId, { ...filters, propertyName });

2
src/app/api/websites/[websiteId]/event-data/stats/route.ts
View file

@ -26,7 +26,7 @@ export async function GET(
return unauthorized();
}
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getEventDataStats(websiteId, filters);

2
src/app/api/websites/[websiteId]/event-data/values/route.ts
View file

@ -28,7 +28,7 @@ export async function GET(
}
const { eventName, propertyName } = query;
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getEventDataValues(websiteId, {
...filters,

5
src/app/api/websites/[websiteId]/session-data/properties/route.ts
View file

@ -21,13 +21,14 @@ export async function GET(
}
const { websiteId } = await params;
const { propertyName } = query;
const filters = await getQueryFilters(query);
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const { propertyName } = query;
const filters = await getQueryFilters(query, websiteId);
const data = await getSessionDataProperties(websiteId, { ...filters, propertyName });
return json(data);

7
src/app/api/websites/[websiteId]/session-data/values/route.ts
View file

@ -1,5 +1,5 @@
import { canViewWebsite } from '@/lib/auth';
import { getQueryFilters, parseRequest, setWebsiteDate } from '@/lib/request';
import { getQueryFilters, parseRequest } from '@/lib/request';
import { json, unauthorized } from '@/lib/response';
import { getSessionDataValues } from '@/queries';
import { z } from 'zod';
@ -20,14 +20,15 @@ export async function GET(
return error();
}
const { propertyName } = query;
const { websiteId } = await params;
const filters = await setWebsiteDate(websiteId, await getQueryFilters(query));
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const { propertyName } = query;
const filters = await getQueryFilters(query, websiteId);
const data = await getSessionDataValues(websiteId, {
...filters,
propertyName,

2
src/app/api/websites/[websiteId]/sessions/[sessionId]/activity/route.ts
View file

@ -25,7 +25,7 @@ export async function GET(
return unauthorized();
}
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getSessionActivity(websiteId, sessionId, filters);

4
src/app/api/websites/[websiteId]/sessions/route.ts
View file

@ -1,5 +1,5 @@
import { z } from 'zod';
import { getQueryFilters, parseRequest, setWebsiteDate } from '@/lib/request';
import { getQueryFilters, parseRequest } from '@/lib/request';
import { unauthorized, json } from '@/lib/response';
import { canViewWebsite } from '@/lib/auth';
import { dateRangeParams, filterParams, pagingParams } from '@/lib/schema';
@ -27,7 +27,7 @@ export async function GET(
return unauthorized();
}
const filters = await setWebsiteDate(websiteId, await getQueryFilters(query));
const filters = await getQueryFilters(query, websiteId);
const data = await getWebsiteSessions(websiteId, filters);

4
src/app/api/websites/[websiteId]/sessions/stats/route.ts
View file

@ -1,5 +1,5 @@
import { z } from 'zod';
import { parseRequest, getQueryFilters, setWebsiteDate } from '@/lib/request';
import { parseRequest, getQueryFilters } from '@/lib/request';
import { unauthorized, json } from '@/lib/response';
import { canViewWebsite } from '@/lib/auth';
import { filterParams } from '@/lib/schema';
@ -27,7 +27,7 @@ export async function GET(
return unauthorized();
}
const filters = await setWebsiteDate(websiteId, await getQueryFilters(query));
const filters = await getQueryFilters(query, websiteId);
const metrics = await getWebsiteSessionStats(websiteId, filters);

2
src/app/api/websites/[websiteId]/sessions/weekly/route.ts
View file

@ -28,7 +28,7 @@ export async function GET(
return unauthorized();
}
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
const data = await getWebsiteSessionsWeekly(websiteId, filters);

2
src/app/api/websites/[websiteId]/values/route.ts
View file

@ -39,7 +39,7 @@ export async function GET(
if (FILTER_GROUPS[type]) {
values = (await getWebsiteSegments(websiteId, type)).map(segment => ({ value: segment.name }));
} else {
const filters = await getQueryFilters(query);
const filters = await getQueryFilters(query, websiteId);
values = await getValues(websiteId, FILTER_COLUMNS[type], filters);
}

15
src/components/hooks/queries/useWebsiteEventsQuery.ts
View file

@ -4,15 +4,24 @@ import { useDateParameters } from '../useDateParameters';
import { usePagedQuery } from '../usePagedQuery';
import { ReactQueryOptions } from '@/lib/types';
export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
export function useWebsiteEventsQuery(
websiteId: string,
params?: Record<string, any>,
options?: ReactQueryOptions<any>,
) {
const { get } = useApi();
const date = useDateParameters(websiteId);
const filters = useFilterParameters();
return usePagedQuery({
queryKey: ['websites:events', { websiteId, ...date, ...filters }],
queryKey: ['websites:events', { websiteId, ...date, ...filters, ...params }],
queryFn: pageParams =>
get(`/websites/${websiteId}/events`, { ...date, ...filters, ...pageParams, pageSize: 20 }),
get(`/websites/${websiteId}/events`, {
...date,
...filters,
...pageParams,
...params,
}),
enabled: !!websiteId,
...options,
});

1
src/components/input/WebsiteSelect.tsx
View file

@ -28,6 +28,7 @@ export function WebsiteSelect({
return (
<Select
{...props}
placeholder=""
items={data?.['data'] || []}
value={websiteId}
isLoading={isLoading}

2
src/components/messages.ts
View file

@ -74,6 +74,7 @@ export const labels = defineMessages({
language: { id: 'label.language', defaultMessage: 'Language' },
theme: { id: 'label.theme', defaultMessage: 'Theme' },
profile: { id: 'label.profile', defaultMessage: 'Profile' },
profiles: { id: 'label.profiles', defaultMessage: 'Profiles' },
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
more: { id: 'label.more', defaultMessage: 'More' },
realtime: { id: 'label.realtime', defaultMessage: 'Realtime' },
@ -335,6 +336,7 @@ export const labels = defineMessages({
lastClick: { id: 'label.last-click', defaultMessage: 'Last click' },
online: { id: 'label.online', defaultMessage: 'Online' },
preferences: { id: 'label.preferences', defaultMessage: 'Preferences' },
location: { id: 'label.location', defaultMessage: 'Location' },
});
export const messages = defineMessages({

4
src/lib/request.ts
View file

@ -105,16 +105,16 @@ export async function getQueryFilters(
): Promise<QueryFilters> {
const dateRange = getRequestDateRange(params);
const filters = getRequestFilters(params);
const segments = websiteId ? await getRequestSegments(websiteId, params) : null;
if (websiteId) {
await setWebsiteDate(websiteId, dateRange);
Object.assign(filters, await getRequestSegments(websiteId, params));
}
return {
...dateRange,
...filters,
...segments,
page: params?.page,
pageSize: params?.page ? params?.pageSize || DEFAULT_PAGE_SIZE : undefined,
orderBy: params?.orderBy,

18
src/queries/sql/events/getEventDataProperties.ts
View file

@ -17,9 +17,12 @@ async function relationalQuery(
filters: QueryFilters & { propertyName?: string },
) {
const { rawQuery, parseFilters } = prisma;
const { filterQuery, cohortQuery, queryParams } = parseFilters(filters, {
columns: { propertyName: 'data_key' },
});
const { filterQuery, cohortQuery, queryParams } = parseFilters(
{ ...filters, websiteId },
{
columns: { propertyName: 'data_key' },
},
);
return rawQuery(
`
@ -48,9 +51,12 @@ async function clickhouseQuery(
filters: QueryFilters & { propertyName?: string },
): Promise<{ eventName: string; propertyName: string; total: number }[]> {
const { rawQuery, parseFilters } = clickhouse;
const { filterQuery, cohortQuery, queryParams } = parseFilters(filters, {
columns: { propertyName: 'data_key' },
});
const { filterQuery, cohortQuery, queryParams } = parseFilters(
{ ...filters, websiteId },
{
columns: { propertyName: 'data_key' },
},
);
return rawQuery(
`

9
src/queries/sql/events/getWebsiteEvents.ts
View file

@ -36,6 +36,11 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
referrer_path as "referrerPath",
referrer_query as "referrerQuery",
referrer_domain as "referrerDomain",
country as country,
city as city,
device as device,
os as os,
browser as browser,
page_title as "pageTitle",
event_type as "eventType",
event_name as "eventName"
@ -77,12 +82,14 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
referrer_query as referrerQuery,
referrer_domain as referrerDomain,
country as country,
city as city,
device as device,
os as os,
browser as browser,
page_title as pageTitle,
event_type as eventType,
event_name as eventName
event_name as eventName,
event_id IN (SELECT event_id FROM event_data) AS hasData
from website_event
${cohortQuery}
where website_id = {websiteId:UUID}

18
src/queries/sql/sessions/getSessionDataProperties.ts
View file

@ -17,9 +17,12 @@ async function relationalQuery(
filters: QueryFilters & { propertyName?: string },
) {
const { rawQuery, parseFilters } = prisma;
const { filterQuery, cohortQuery, queryParams } = parseFilters(filters, {
columns: { propertyName: 'data_key' },
});
const { filterQuery, cohortQuery, queryParams } = parseFilters(
{ ...filters, websiteId },
{
columns: { propertyName: 'data_key' },
},
);
return rawQuery(
`
@ -46,9 +49,12 @@ async function clickhouseQuery(
filters: QueryFilters & { propertyName?: string },
): Promise<{ propertyName: string; total: number }[]> {
const { rawQuery, parseFilters } = clickhouse;
const { filterQuery, cohortQuery, queryParams } = parseFilters(filters, {
columns: { propertyName: 'data_key' },
});
const { filterQuery, cohortQuery, queryParams } = parseFilters(
{ ...filters, websiteId },
{
columns: { propertyName: 'data_key' },
},
);
return rawQuery(
`