watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 16:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

New settings layouts. Segment management screen.

Browse source
This commit is contained in:
Mike Cao 2025-08-07 05:14:35 -07:00
parent 2dbcf63eeb
commit eb7b6978d3
70 changed files with 762 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
import { ListFilter } from '@/components/icons';
import { FilterEditForm } from '@/components/common/FilterEditForm';
import { FilterEditForm } from '@/components/input/FilterEditForm';
import { useMessages, useNavigation, useFilters } from '@/components/hooks';
import { filtersArrayToObject } from '@/lib/params';

10
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -5,11 +5,17 @@ import { Share, Edit } from '@/components/icons';
import { Favicon } from '@/components/common/Favicon';
import { ActiveUsers } from '@/components/metrics/ActiveUsers';
import { WebsiteShareForm } from '@/app/(main)/settings/websites/[websiteId]/WebsiteShareForm';
import { useMessages } from '@/components/hooks';
import { useMessages, useNavigation } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton';
export function WebsiteHeader() {
const website = useWebsite();
const { renderUrl, pathname } = useNavigation();
const isSettings = pathname.endsWith('/settings');
if (isSettings) {
return null;
}
return (
<PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
@ -17,7 +23,7 @@ export function WebsiteHeader() {
<ActiveUsers websiteId={website.id} />
<Row alignItems="center" gap>
<ShareButton websiteId={website.id} shareId={website.shareId} />
<LinkButton href={`/settings/websites/${website.id}`}>
<LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
<Icon>
<Edit />
</Icon>

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

@ -1,17 +1,23 @@
'use client';
import { ReactNode } from 'react';
import { Column } from '@umami/react-zen';
import { Column, Grid } from '@umami/react-zen';
import { WebsiteProvider } from './WebsiteProvider';
import { PageBody } from '@/components/common/PageBody';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (
<WebsiteProvider websiteId={websiteId}>
<PageBody gap>
<WebsiteHeader />
<Column>{children}</Column>
</PageBody>
<Grid columns="auto 1fr" width="100%" height="100%">
<Column height="100%" border="right" backgroundColor>
<WebsiteNav websiteId={websiteId} />
</Column>
<PageBody gap>
<WebsiteHeader />
<Column>{children}</Column>
</PageBody>
</Grid>
</WebsiteProvider>
);
}

75
src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
View file

@ -1,4 +1,3 @@
import { Icon, Text, Row, NavMenu, NavMenuItem, NavMenuGroup, Column } from '@umami/react-zen';
import {
Eye,
Lightning,
@ -16,14 +15,16 @@ import {
ChartPie,
} from '@/components/icons';
import { useMessages, useNavigation } from '@/components/hooks';
import Link from 'next/link';
import { SideMenu } from '@/components/common/SideMenu';
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
export function WebsiteNav({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { pathname, renderUrl, teamId } = useNavigation();
const links = [
const renderPath = (path: string) => renderUrl(`/websites/${websiteId}${path}`);
const items = [
{
label: formatMessage(labels.traffic),
items: [
@ -31,25 +32,31 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
id: 'overview',
label: formatMessage(labels.overview),
icon: <Eye />,
path: '',
path: renderPath(''),
},
{
id: 'events',
label: formatMessage(labels.events),
icon: <Lightning />,
path: '/events',
path: renderPath('/events'),
},
{
id: 'sessions',
label: formatMessage(labels.sessions),
icon: <User />,
path: '/sessions',
path: renderPath('/sessions'),
},
{
id: 'realtime',
label: formatMessage(labels.realtime),
icon: <Clock />,
path: '/realtime',
path: renderPath('/realtime'),
},
{
id: 'breakdown',
label: formatMessage(labels.breakdown),
icon: <Sheet />,
path: renderPath('/breakdown'),
},
],
},
@ -60,48 +67,42 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
id: 'goals',
label: formatMessage(labels.goals),
icon: <Target />,
path: '/goals',
path: renderPath('/goals'),
},
{
id: 'funnel',
label: formatMessage(labels.funnels),
icon: <Funnel />,
path: '/funnels',
path: renderPath('/funnels'),
},
{
id: 'journeys',
label: formatMessage(labels.journeys),
icon: <Path />,
path: '/journeys',
path: renderPath('/journeys'),
},
{
id: 'retention',
label: formatMessage(labels.retention),
icon: <Magnet />,
path: '/retention',
path: renderPath('/retention'),
},
],
},
{
label: formatMessage(labels.segments),
items: [
{
id: 'breakdown',
label: formatMessage(labels.breakdown),
icon: <Sheet />,
path: '/breakdown',
},
{
id: 'segments',
label: formatMessage(labels.segments),
icon: <ChartPie />,
path: '/segments',
path: renderPath('/segments'),
},
{
id: 'cohorts',
label: formatMessage(labels.cohorts),
icon: <UserPlus />,
path: '/cohorts',
path: renderPath('/cohorts'),
},
],
},
@ -112,53 +113,31 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
id: 'utm',
label: formatMessage(labels.utm),
icon: <Tag />,
path: '/utm',
path: renderPath('/utm'),
},
{
id: 'revenue',
label: formatMessage(labels.revenue),
icon: <Money />,
path: '/revenue',
path: renderPath('/revenue'),
},
{
id: 'attribution',
label: formatMessage(labels.attribution),
icon: <Network />,
path: '/attribution',
path: renderPath('/attribution'),
},
],
},
];
const selected =
links.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path))?.id ||
const selectedKey =
items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path))?.id ||
'overview';
return (
<Column gap padding width="240px" border="left" overflowY="auto">
<SideMenu items={items} selectedKey={selectedKey} allowMinimize={false}>
<WebsiteSelect buttonProps={{ variant: 'quiet' }} websiteId={websiteId} teamId={teamId} />
<NavMenu muteItems={false}>
{links.map(({ label, items }) => {
return (
<NavMenuGroup title={label} key={label} gap="1">
{items.map(({ id, label, icon, path }) => {
const isSelected = selected === id;
return (
<Link key={id} href={renderUrl(`/websites/${websiteId}${path}`)}>
<NavMenuItem isSelected={isSelected}>
<Row alignItems="center" gap>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</Row>
</NavMenuItem>
</Link>
);
})}
</NavMenuGroup>
);
})}
</NavMenu>
</Column>
</SideMenu>
);
}

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

@ -3,7 +3,7 @@ import { useMessages, useWebsiteEventsQuery } from '@/components/hooks';
import { EventsTable } from './EventsTable';
import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react';
import { FilterButtons } from '@/components/common/FilterButtons';
import { FilterButtons } from '@/components/input/FilterButtons';
export function EventsDataTable({
websiteId,

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

@ -1,6 +1,6 @@
import { useFormat } from '@/components//hooks/useFormat';
import { Empty } from '@/components/common/Empty';
import { FilterButtons } from '@/components/common/FilterButtons';
import { FilterButtons } from '@/components/input/FilterButtons';
import { useCountryNames, useLocale, useMessages, useTimezone } from '@/components/hooks';
import { Eye, Visitor, Bolt } from '@/components/icons';
import { BROWSERS, OS_NAMES } from '@/lib/constants';

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

@ -6,7 +6,7 @@ import { ListTable } from '@/components/metrics/ListTable';
import { useMessages } from '@/components/hooks';
import { RealtimeData } from '@/lib/types';
import { WebsiteContext } from '../WebsiteProvider';
import { FilterButtons } from '@/components/common/FilterButtons';
import { FilterButtons } from '@/components/input/FilterButtons';
const FILTER_REFERRERS = 'filter-referrers';
const FILTER_PAGES = 'filter-pages';

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

@ -1,7 +1,7 @@
import { Button, DialogTrigger, Modal, Text, Icon, Dialog } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { Plus } from '@/components/icons';
import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
import { SegmentEditForm } from './SegmentEditForm';
export function SegmentAddButton({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();

55
src/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton.tsx Normal file
View file

@ -0,0 +1,55 @@
import { Dialog } from '@umami/react-zen';
import { ActionButton } from '@/components/input/ActionButton';
import { Trash } from '@/components/icons';
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
import { messages } from '@/components/messages';
import { useApi, useMessages, useModified } from '@/components/hooks';
export function SegmentDeleteButton({
segmentId,
websiteId,
name,
onSave,
}: {
segmentId: string;
websiteId: string;
name: string;
onSave?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { del, useMutation } = useApi();
const { mutate, isPending, error } = useMutation({
mutationFn: () => del(`/websites/${websiteId}/segments/${segmentId}`),
});
const { touch } = useModified();
const handleConfirm = (close: () => void) => {
mutate(null, {
onSuccess: () => {
touch('segments');
onSave?.();
close();
},
});
};
return (
<ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
<Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: name,
})}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.delete)}
buttonVariant="danger"
/>
)}
</Dialog>
</ActionButton>
);
}

34
src/app/(main)/websites/[websiteId]/segments/SegmentEditButton.tsx Normal file
View file

@ -0,0 +1,34 @@
import { ActionButton } from '@/components/input/ActionButton';
import { Edit } from '@/components/icons';
import { Dialog } from '@umami/react-zen';
import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
import { useMessages } from '@/components/hooks';
export function SegmentEditButton({
segmentId,
websiteId,
filters,
}: {
segmentId: string;
websiteId: string;
filters: any[];
}) {
const { formatMessage, labels } = useMessages();
return (
<ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800 }}>
{({ close }) => {
return (
<SegmentEditForm
segmentId={segmentId}
websiteId={websiteId}
filters={filters}
onClose={close}
/>
);
}}
</Dialog>
</ActionButton>
);
}

47
src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx
View file

@ -6,24 +6,30 @@ import {
FormSubmitButton,
TextField,
Label,
Loading,
} from '@umami/react-zen';
import { subMonths, endOfDay } from 'date-fns';
import { FieldFilters } from '@/components/input/FieldFilters';
import { useState } from 'react';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { useApi, useMessages, useModified, useWebsiteSegmentQuery } from '@/components/hooks';
import { filtersArrayToObject } from '@/lib/params';
export function SegmentEditForm({
segmentId,
websiteId,
filters = [],
showFilters = true,
onSave,
onClose,
}: {
segmentId: string;
websiteId: string;
filters?: any[];
showFilters?: boolean;
onSave?: () => void;
onClose?: () => void;
}) {
const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
const { formatMessage, labels } = useMessages();
const [currentFilters, setCurrentFilters] = useState(filters);
const { touch } = useModified();
@ -33,7 +39,10 @@ export function SegmentEditForm({
const { post, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) =>
post(`/websites/${websiteId}/segments`, { ...data, type: 'segment' }),
post(`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`, {
...data,
type: 'segment',
}),
});
const handleSubmit = async (data: any) => {
@ -49,28 +58,40 @@ export function SegmentEditForm({
);
};
if (segmentId && !data) {
return <Loading position="page" />;
}
return (
<Form error={error} onSubmit={handleSubmit}>
<Form error={error} onSubmit={handleSubmit} defaultValues={data}>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
<TextField autoFocus />
</FormField>
<Label>{formatMessage(labels.filters)}</Label>
<FieldFilters
websiteId={websiteId}
filters={currentFilters}
startDate={startDate}
endDate={endDate}
onSave={setCurrentFilters}
/>
{showFilters && (
<>
<Label>{formatMessage(labels.filters)}</Label>
<FieldFilters
websiteId={websiteId}
filters={currentFilters}
startDate={startDate}
endDate={endDate}
onSave={setCurrentFilters}
/>
</>
)}
<FormButtons>
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
<FormSubmitButton
variant="primary"
data-test="button-submit"
isDisabled={isPending || currentFilters.length === 0}
>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons>

38
src/app/(main)/websites/[websiteId]/segments/SegmentsTable.tsx
View file

@ -1,12 +1,14 @@
import { DataTable, DataColumn, Icon, Row, Text, MenuItem } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { DataTable, DataColumn, Row } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Edit, Trash } from '@/components/icons';
import { DateDistance } from '@/components/common/DateDistance';
import { MenuButton } from '@/components/input/MenuButton';
import { filtersObjectToArray } from '@/lib/params';
import { SegmentEditButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditButton';
import { SegmentDeleteButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton';
export function SegmentsTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { websiteId } = useNavigation();
if (data.length === 0) {
return <Empty />;
@ -20,27 +22,17 @@ export function SegmentsTable({ data = [] }) {
</DataColumn>
<DataColumn id="action" align="end" width="100px">
{(row: any) => {
const { id } = row;
const { id, name, parameters } = row;
return (
<MenuButton>
<MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
<Row alignItems="center" gap>
<Icon>
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
<MenuItem id="delete" onAction={null} data-test="link-button-delete">
<Row alignItems="center" gap>
<Icon>
<Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Row>
</MenuItem>
</MenuButton>
<Row>
<SegmentEditButton
segmentId={id}
websiteId={websiteId}
filters={filtersObjectToArray(parameters)}
/>
<SegmentDeleteButton segmentId={id} websiteId={websiteId} name={name} />
</Row>
);
}}
</DataColumn>

25
src/app/(main)/websites/[websiteId]/settings/SettingsPage.tsx Normal file
View file

@ -0,0 +1,25 @@
'use client';
import { Column, Icon, Row, Text } from '@umami/react-zen';
import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage';
import { LinkButton } from '@/components/common/LinkButton';
import { Arrow } from '@/components/icons';
import { useNavigation } from '@/components/hooks';
export function SettingsPage({ websiteId }: { websiteId: string }) {
const { pathname } = useNavigation();
return (
<Column gap>
<Row marginTop="3">
<LinkButton href={pathname.replace('/settings', '')}>
<Row alignItems="center" gap>
<Icon rotate={180}>
<Arrow />
</Icon>
<Text>Back</Text>
</Row>
</LinkButton>
</Row>
<WebsiteSettingsPage websiteId={websiteId} />
</Column>
);
}

12
src/app/(main)/websites/[websiteId]/settings/page.tsx Normal file
View file

@ -0,0 +1,12 @@
import { SettingsPage } from './SettingsPage';
import { Metadata } from 'next';
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <SettingsPage websiteId={websiteId} />;
}
export const metadata: Metadata = {
title: 'Settings',
};