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

Use FormattedMessage. Updated icons. Fixed bugs.

Browse source
This commit is contained in:
Mike Cao 2025-09-23 23:08:40 -07:00
parent 3afe843461
commit 83a014e884
20 changed files with 129 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/websites/WebsitesPage.tsx
View file

@ -14,7 +14,7 @@ export function WebsitesPage() {
return (
<PageBody>
<Column gap="6" margin="2">
<PageHeader title={formatMessage(labels.websites)}>
<PageHeader title={formatMessage(labels.websites)} label={'back'} description={'Websites'}>
<WebsiteAddButton teamId={teamId} />
</PageHeader>
<Panel>

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

@ -14,12 +14,12 @@ export function WebsiteFilterButton({
showText?: boolean;
}) {
const { formatMessage, labels } = useMessages();
const { replaceParams, router } = useNavigation();
const { updateParams, router } = useNavigation();
const handleChange = ({ filters, segment, cohort }: any) => {
const params = filtersArrayToObject(filters);
const url = replaceParams({ ...params, segment, cohort });
const url = updateParams({ ...params, segment, cohort });
router.push(url);
};

13
src/app/(main)/websites/[websiteId]/cohorts/CohortDeleteButton.tsx
View file

@ -16,7 +16,7 @@ export function CohortDeleteButton({
name: string;
onSave?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { formatMessage, labels, FormattedMessage } = useMessages();
const { mutateAsync, isPending, error, touch } = useDeleteQuery(
`/websites/${websiteId}/segments/${cohortId}`,
);
@ -36,9 +36,14 @@ export function CohortDeleteButton({
<Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: name,
})}
message={
<FormattedMessage
{...messages.confirmRemove}
values={{
target: <b>{name}</b>,
}}
/>
}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}

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

@ -3,7 +3,7 @@ import { useFormat, useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Avatar } from '@/components/common/Avatar';
import Link from 'next/link';
import { Bolt, Eye } from '@/components/icons';
import { LightningSvg, Eye } from '@/components/icons';
import { DateDistance } from '@/components/common/DateDistance';
import { TypeIcon } from '@/components/common/TypeIcon';
@ -25,7 +25,7 @@ export function EventsTable({ data = [] }) {
<Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
<Avatar seed={row.sessionId} size={32} />
</Link>
<Icon>{row.eventName ? <Bolt /> : <Eye />}</Icon>
<Icon>{row.eventName ? <LightningSvg /> : <Eye />}</Icon>
<Text>
{formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
</Text>

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

@ -8,7 +8,7 @@ import {
useTimezone,
useWebsite,
} from '@/components/hooks';
import { Eye, Visitor, Bolt } from '@/components/icons';
import { Eye, User, LightningSvg } from '@/components/icons';
import { BROWSERS, OS_NAMES } from '@/lib/constants';
import { stringToColor } from '@/lib/format';
import { useMemo, useState } from 'react';
@ -23,14 +23,14 @@ const TYPE_EVENT = 'event';
const icons = {
[TYPE_PAGEVIEW]: <Eye />,
[TYPE_SESSION]: <Visitor />,
[TYPE_EVENT]: <Bolt />,
[TYPE_SESSION]: <User />,
[TYPE_EVENT]: <LightningSvg />,
};
export function RealtimeLog({ data }: { data: any }) {
const website = useWebsite();
const [search, setSearch] = useState('');
const { formatMessage, labels, messages } = useMessages();
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { formatValue } = useFormat();
const { locale } = useLocale();
const { formatTimezoneDate } = useTimezone();
@ -74,20 +74,25 @@ export function RealtimeLog({ data }: { data: any }) {
const { __type, eventName, urlPath, browser, os, country, device } = log;
if (__type === TYPE_EVENT) {
return formatMessage(messages.eventLog, {
event: <b key="b">{eventName || formatMessage(labels.unknown)}</b>,
url: (
<a
key="a"
href={`//${website?.domain}${urlPath}`}
className={styles.link}
target="_blank"
rel="noreferrer noopener"
>
{urlPath}
</a>
),
});
return (
<FormattedMessage
{...messages.eventLog}
values={{
event: <b key="b">{eventName || formatMessage(labels.unknown)}</b>,
url: (
<a
key="a"
href={`//${website?.domain}${urlPath}`}
className={styles.link}
target="_blank"
rel="noreferrer noopener"
>
{urlPath}
</a>
),
}}
/>
);
}
if (__type === TYPE_PAGEVIEW) {
@ -104,12 +109,17 @@ export function RealtimeLog({ data }: { data: any }) {
}
if (__type === TYPE_SESSION) {
return formatMessage(messages.visitorLog, {
country: <b key="country">{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b key="browser">{BROWSERS[browser]}</b>,
os: <b key="os">{OS_NAMES[os] || os}</b>,
device: <b key="device">{formatMessage(labels[device] || labels.unknown)}</b>,
});
return (
<FormattedMessage
{...messages.visitorLog}
values={{
country: <b key="country">{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b key="browser">{BROWSERS[browser]}</b>,
os: <b key="os">{OS_NAMES[os] || os}</b>,
device: <b key="device">{formatMessage(labels[device] || labels.unknown)}</b>,
}}
/>
);
}
};

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

@ -16,7 +16,7 @@ export function SegmentDeleteButton({
name: string;
onSave?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { formatMessage, labels, FormattedMessage } = useMessages();
const { mutateAsync, isPending, error, touch } = useDeleteQuery(
`/websites/${websiteId}/segments/${segmentId}`,
);
@ -36,9 +36,14 @@ export function SegmentDeleteButton({
<Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmRemove, {
target: name,
})}
message={
<FormattedMessage
{...messages.confirmRemove}
values={{
target: <b>{name}</b>,
}}
/>
}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}

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

@ -12,7 +12,7 @@ import {
Dialog,
} from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Bolt, Eye, FileText } from '@/components/icons';
import { LightningSvg, Eye, FileText } from '@/components/icons';
import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks';
import { EventData } from '@/components/metrics/EventData';
@ -52,7 +52,7 @@ export function SessionActivity({
{formatTimezoneDate(createdAt, 'pp')}
</StatusLight>
<Row alignItems="center" gap="2">
<Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
<Icon>{eventName ? <LightningSvg /> : <Eye />}</Icon>
<Text>
{eventName
? formatMessage(labels.triggeredEvent)