m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-15 09:45:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/umami-software/umami into feat/um-171-cloud-mode-env-variable

Browse Source
This commit is contained in:
Francis Cao 2023-03-01 11:40:34 -08:00
commit a777b2916f
88 changed files with 1014 additions and 945 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/common/FilterLink.js
View File

@ -6,13 +6,13 @@ import { Icon, Icons } from 'react-basics';
import styles from './FilterLink.module.css';
export default function FilterLink({ id, value, label, externalUrl }) {
const { resolve, query } = usePageQuery();
const { resolveUrl, query } = usePageQuery();
const active = query[id] !== undefined;
const selected = query[id] === value;
return (
<div className={styles.row}>
<Link href={resolve({ [id]: value })} replace>
<Link href={resolveUrl({ [id]: value })} replace>
<a
className={classNames(styles.label, {
[styles.inactive]: active && !selected,

60
components/common/OverflowText.js
View File

@ -1,60 +0,0 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import ReactTooltip from 'react-tooltip';
import styles from './OverflowText.module.css';
const OverflowText = ({ children, tooltipId }) => {
const measureEl = useRef();
const [isOverflown, setIsOverflown] = useState(false);
const measure = useCallback(
el => {
if (!el) return;
setIsOverflown(el.scrollWidth > el.clientWidth);
},
[setIsOverflown],
);
// Do one measure on mount
useEffect(() => {
measure(measureEl.current);
}, [measure]);
// Set up resize listener for subsequent measures
useEffect(() => {
if (!measureEl.current) return;
// Destructure ref in case it changes out from under us
const el = measureEl.current;
if ('ResizeObserver' in global) {
// Ideally, we have access to ResizeObservers
const observer = new ResizeObserver(() => {
measure(el);
});
observer.observe(el);
return () => observer.unobserve(el);
} else {
// Otherwise, fall back to measuring on window resizes
const handler = () => measure(el);
window.addEventListener('resize', handler, { passive: true });
return () => window.removeEventListener('resize', handler, { passive: true });
}
});
return (
<span
ref={measureEl}
data-tip={children.toString()}
data-effect="solid"
data-for={tooltipId}
className={styles.root}
>
{children}
{isOverflown && <ReactTooltip id={tooltipId}>{children}</ReactTooltip>}
</span>
);
};
export default OverflowText;

6
components/common/OverflowText.module.css
View File

@ -1,6 +0,0 @@
.root {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

4
components/icons.ts
View File

@ -4,6 +4,7 @@ import Bolt from 'assets/bolt.svg';
import Calendar from 'assets/calendar.svg';
import Clock from 'assets/clock.svg';
import Dashboard from 'assets/dashboard.svg';
import Eye from 'assets/eye.svg';
import Gear from 'assets/gear.svg';
import Globe from 'assets/globe.svg';
import Lock from 'assets/lock.svg';
@ -13,6 +14,7 @@ import Profile from 'assets/profile.svg';
import Sun from 'assets/sun.svg';
import User from 'assets/user.svg';
import Users from 'assets/users.svg';
import Visitor from 'assets/visitor.svg';
const icons = {
...Icons,
@ -21,6 +23,7 @@ const icons = {
Calendar,
Clock,
Dashboard,
Eye,
Gear,
Globe,
Lock,
@ -30,6 +33,7 @@ const icons = {
Sun,
User,
Users,
Visitor,
};
export default icons;

89
components/common/DateFilter.js → components/input/DateFilter.js
View File

@ -1,68 +1,74 @@
import { endOfYear, isSameDay } from 'date-fns';
import { useState } from 'react';
import { Icon, Modal, Dropdown, Item } from 'react-basics';
import { useIntl, defineMessages } from 'react-intl';
import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import { endOfYear, isSameDay } from 'date-fns';
import DatePickerForm from 'components/metrics/DatePickerForm';
import useLocale from 'hooks/useLocale';
import { dateFormat } from 'lib/date';
import Calendar from 'assets/calendar.svg';
import { dateFormat, getDateRangeValues } from 'lib/date';
import Icons from 'components/icons';
import { labels } from 'components/messages';
import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
const messages = defineMessages({
today: { id: 'label.today', defaultMessage: 'Today' },
lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' },
yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
thisWeek: { id: 'label.this-week', defaultMessage: 'This week' },
lastDays: { id: 'label.last-days', defaultMessage: 'Last {x} days' },
thisMonth: { id: 'label.this-month', defaultMessage: 'This month' },
thisYear: { id: 'label.this-year', defaultMessage: 'This year' },
allTime: { id: 'label.all-time', defaultMessage: 'All time' },
customRange: { id: 'label.custom-range', defaultMessage: 'Custom-range' },
});
function DateFilter({ value, startDate, endDate, onChange, className }) {
function DateFilter({ websiteId, value, className }) {
const { formatMessage } = useIntl();
const { get } = useApi();
const [dateRange, setDateRange] = useDateRange(websiteId);
const { startDate, endDate } = dateRange;
const [showPicker, setShowPicker] = useState(false);
async function handleDateChange(value) {
if (value === 'all') {
const data = await get(`/websites/${websiteId}`);
if (data) {
setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) });
}
} else {
setDateRange(value);
}
}
const options = [
{ label: formatMessage(messages.today), value: '1day' },
{ label: formatMessage(labels.today), value: '1day' },
{
label: formatMessage(messages.lastHours, { x: 24 }),
label: formatMessage(labels.lastHours, { x: 24 }),
value: '24hour',
},
{
label: formatMessage(messages.yesterday),
label: formatMessage(labels.yesterday),
value: '-1day',
},
{
label: formatMessage(messages.thisWeek),
label: formatMessage(labels.thisWeek),
value: '1week',
divider: true,
},
{
label: formatMessage(messages.lastDays, { x: 7 }),
label: formatMessage(labels.lastDays, { x: 7 }),
value: '7day',
},
{
label: formatMessage(messages.thisMonth),
label: formatMessage(labels.thisMonth),
value: '1month',
divider: true,
},
{
label: formatMessage(messages.lastDays, { x: 30 }),
label: formatMessage(labels.lastDays, { x: 30 }),
value: '30day',
},
{
label: formatMessage(messages.lastDays, { x: 90 }),
label: formatMessage(labels.lastDays, { x: 90 }),
value: '90day',
},
{ label: formatMessage(messages.thisYear), value: '1year' },
{ label: formatMessage(labels.thisYear), value: '1year' },
{
label: formatMessage(messages.allTime),
label: formatMessage(labels.allTime),
value: 'all',
divider: true,
},
{
label: formatMessage(messages.customRange),
label: formatMessage(labels.customRange),
value: 'custom',
divider: true,
},
@ -76,17 +82,17 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
);
};
const handleChange = async value => {
const handleChange = value => {
if (value === 'custom') {
setShowPicker(true);
return;
}
onChange(value);
handleDateChange(value);
};
const handlePickerChange = value => {
setShowPicker(false);
onChange(value);
handleDateChange(value);
};
const handleClose = () => setShowPicker(false);
@ -98,9 +104,14 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
items={options}
renderValue={renderValue}
value={value}
alignment="end"
onChange={handleChange}
>
{({ label, value }) => <Item key={value}>{label}</Item>}
{({ label, value, divider }) => (
<Item key={value} divider={divider}>
{label}
</Item>
)}
</Dropdown>
{showPicker && (
<Modal onClose={handleClose}>
@ -128,13 +139,15 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
}
return (
<>
<Flexbox gap={10} alignItems="center" wrap="nowrap">
<Icon className="mr-2" onClick={handleClick}>
<Calendar />
<Icons.Calendar />
</Icon>
{dateFormat(startDate, 'd LLL y', locale)}
{!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
</>
<Text>
{dateFormat(startDate, 'd LLL y', locale)}
{!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
</Text>
</Flexbox>
);
};

20
components/input/RefreshButton.js
View File

@ -1,22 +1,16 @@
import { useState, useEffect, useCallback } from 'react';
import { useIntl } from 'react-intl';
import { Button, Icon, Tooltip } from 'react-basics';
import useStore from 'store/queries';
import { LoadingButton, Icon, Tooltip } from 'react-basics';
import { setDateRange } from 'store/websites';
import useDateRange from 'hooks/useDateRange';
import Icons from 'components/icons';
import { labels } from 'components/messages';
function RefreshButton({ websiteId }) {
function RefreshButton({ websiteId, isLoading }) {
const { formatMessage } = useIntl();
const [dateRange] = useDateRange(websiteId);
const [loading, setLoading] = useState(false);
const selector = useCallback(state => state[`/websites/${websiteId}/stats`], [websiteId]);
const completed = useStore(selector);
function handleClick() {
if (!loading && dateRange) {
setLoading(true);
if (!isLoading && dateRange) {
if (/^\d+/.test(dateRange.value)) {
setDateRange(websiteId, dateRange.value);
} else {
@ -25,17 +19,13 @@ function RefreshButton({ websiteId }) {
}
}
useEffect(() => {
setLoading(false);
}, [completed]);
return (
<Tooltip label={formatMessage(labels.refresh)}>
<Button onClick={handleClick}>
<LoadingButton loading={isLoading} onClick={handleClick}>
<Icon>
<Icons.Refresh />
</Icon>
</Button>
</LoadingButton>
</Tooltip>
);
}

28
components/input/WebsiteSelect.js Normal file
View File

@ -0,0 +1,28 @@
import { useIntl } from 'react-intl';
import { Dropdown, Item } from 'react-basics';
import { labels } from 'components/messages';
import useApi from 'hooks/useApi';
export default function WebsiteSelect({ websiteId, onSelect }) {
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const { data } = useQuery(['websites:me'], () => get('/me/websites'));
const renderValue = value => {
return data?.find(({ id }) => id === value)?.name;
};
return (
<Dropdown
items={data}
value={websiteId}
renderValue={renderValue}
onChange={onSelect}
alignment="end"
placeholder={formatMessage(labels.selectWebsite)}
style={{ width: 200 }}
>
{({ id, name }) => <Item key={id}>{name}</Item>}
</Dropdown>
);
}

4
components/layout/AppLayout.js
View File

@ -2,13 +2,15 @@ import { Container } from 'react-basics';
import Head from 'next/head';
import NavBar from 'components/layout/NavBar';
import useRequireLogin from 'hooks/useRequireLogin';
import useConfig from 'hooks/useConfig';
import { UI_LAYOUT_BODY } from 'lib/constants';
import styles from './AppLayout.module.css';
export default function AppLayout({ title, children }) {
const { user } = useRequireLogin();
const config = useConfig();
if (!user) {
if (!user || !config) {
return null;
}

13
components/layout/Grid.js Normal file
View File

@ -0,0 +1,13 @@
import { Row, Column } from 'react-basics';
import classNames from 'classnames';
import styles from './Grid.module.css';
export function GridRow(props) {
const { className, ...otherProps } = props;
return <Row {...otherProps} className={classNames(styles.row, className)} />;
}
export function GridColumn(props) {
const { className, ...otherProps } = props;
return <Column {...otherProps} className={classNames(styles.col, className)} />;
}

35
components/layout/Grid.module.css Normal file
View File

@ -0,0 +1,35 @@
.col {
display: flex;
flex-direction: column;
padding: 20px;
}
.row {
border-top: 1px solid var(--base300);
min-height: 430px;
}
.row > .col {
border-left: 1px solid var(--base300);
}
.row > .col:first-child {
border-left: 0;
padding-left: 0;
}
.row > .col:last-child {
padding-right: 0;
}
@media only screen and (max-width: 992px) {
.row {
border: 0;
}
.row > .col {
border-top: 1px solid var(--base300);
border-left: 0;
padding: 20px 0;
}
}

16
components/layout/NavBar.js
View File

@ -10,9 +10,11 @@ import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import NavGroup from './NavGroup';
import styles from './NavBar.module.css';
import useConfig from 'hooks/useConfig';
export default function NavBar() {
const { user } = useUser();
const { cloudMode } = useConfig();
const { formatMessage } = useIntl();
const [minimized, setMinimized] = useState(false);
const tooltipPosition = minimized ? 'right' : 'top';
@ -24,13 +26,21 @@ export default function NavBar() {
];
const settings = [
{ label: formatMessage(labels.websites), url: '/settings/websites', icon: <Icons.Globe /> },
!cloudMode && {
label: formatMessage(labels.websites),
url: '/settings/websites',
icon: <Icons.Globe />,
},
user?.isAdmin && {
label: formatMessage(labels.users),
url: '/settings/users',
icon: <Icons.User />,
},
{ label: formatMessage(labels.teams), url: '/settings/teams', icon: <Icons.Users /> },
!cloudMode && {
label: formatMessage(labels.teams),
url: '/settings/teams',
icon: <Icons.Users />,
},
{ label: formatMessage(labels.profile), url: '/settings/profile', icon: <Icons.Profile /> },
].filter(n => n);
@ -53,7 +63,7 @@ export default function NavBar() {
<div className={styles.buttons}>
<ThemeButton tooltipPosition={tooltipPosition} />
<LanguageButton tooltipPosition={tooltipPosition} />
<LogoutButton tooltipPosition={tooltipPosition} />
{!cloudMode && <LogoutButton tooltipPosition={tooltipPosition} />}
</div>
</div>
</div>

4
components/layout/PageHeader.module.css
View File

@ -19,7 +19,7 @@
.title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: bold;
font-size: 24px;
font-weight: 700;
gap: 20px;
}

24
components/messages.js
View File

@ -81,9 +81,23 @@ export const labels = defineMessages({
visitors: { id: 'label.visitors', defaultMessage: 'Visitors' },
filterCombined: { id: 'label.filter-combined', defaultMessage: 'Combined' },
filterRaw: { id: 'label.filter-raw', defaultMessage: 'Raw' },
views: { id: 'label.views', defaultMessage: 'View' },
views: { id: 'label.views', defaultMessage: 'Views' },
none: { id: 'label.none', defaultMessage: 'None' },
clearAll: { id: 'label.clear-all', defaultMessage: 'Clear all' },
today: { id: 'label.today', defaultMessage: 'Today' },
lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' },
yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
thisWeek: { id: 'label.this-week', defaultMessage: 'This week' },
lastDays: { id: 'label.last-days', defaultMessage: 'Last {x} days' },
thisMonth: { id: 'label.this-month', defaultMessage: 'This month' },
thisYear: { id: 'label.this-year', defaultMessage: 'This year' },
allTime: { id: 'label.all-time', defaultMessage: 'All time' },
customRange: { id: 'label.custom-range', defaultMessage: 'Custom-range' },
selectWebsite: { id: 'label.select-website', defaultMessage: 'Select website' },
all: { id: 'label.all', defaultMessage: 'All' },
sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
logs: { id: 'label.activity-log', defaultMessage: 'Activity log' },
});
export const messages = defineMessages({
@ -155,6 +169,14 @@ export const messages = defineMessages({
id: 'message.team-not-found',
defaultMessage: 'Team not found.',
},
visitorLog: {
id: 'message.visitor-log',
defaultMessage: 'Visitor from {country} using {browser} on {os} {device}',
},
eventLog: {
id: 'message.event-log',
defaultMessage: '{event} on {url}',
},
});
export const devices = defineMessages({

1
components/metrics/ActiveUsers.js
View File

@ -13,6 +13,7 @@ export default function ActiveUsers({ websiteId, value, refetchInterval = 60000
() => get(`/websites/${websiteId}/active`),
{
refetchInterval,
enabled: !!websiteId,
},
);

2
components/metrics/DataTable.js
View File

@ -8,7 +8,7 @@ import { formatNumber, formatLongNumber } from 'lib/format';
import styles from './DataTable.module.css';
export default function DataTable({
data,
data = [],
title,
metric,
className,

2
components/metrics/DatePickerForm.js
View File

@ -42,7 +42,7 @@ export default function DatePickerForm({
return (
<div className={styles.container}>
<div className={styles.filter}>
<ButtonGroup size="sm" selectedKey={selected} onSelect={setSelected}>
<ButtonGroup selectedKey={selected} onSelect={setSelected}>
<Button key={FILTER_DAY}>{formatMessage(labels.singleDay)}</Button>
<Button key={FILTER_RANGE}>{formatMessage(labels.dateRange)}</Button>
</ButtonGroup>

2
components/metrics/EventDataForm.js
View File

@ -1,6 +1,6 @@
import { useMutation } from '@tanstack/react-query';
import classNames from 'classnames';
import DateFilter from 'components/common/DateFilter';
import DateFilter from 'components/input/DateFilter';
import DataTable from 'components/metrics/DataTable';
import FilterTags from 'components/metrics/FilterTags';
import useApi from 'hooks/useApi';

23
components/metrics/FilterTags.js
View File

@ -1,26 +1,39 @@
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import { safeDecodeURI } from 'next-basics';
import { Button, Icon, Icons, Text } from 'react-basics';
import { labels } from 'components/messages';
import usePageQuery from 'hooks/usePageQuery';
import styles from './FilterTags.module.css';
export default function FilterTags({ className, params, onClick }) {
export default function FilterTags({ websiteId, params, onClick }) {
const { formatMessage } = useIntl();
const {
router,
resolveUrl,
query: { view },
} = usePageQuery();
if (Object.keys(params).filter(key => params[key]).length === 0) {
return null;
}
function handleCloseFilter(param) {
if (param === null) {
router.push(`/websites/${websiteId}/?view=${view}`);
} else {
router.push(resolveUrl({ [param]: undefined }));
}
}
return (
<div className={classNames(styles.filters, className)}>
<div className={styles.filters}>
{Object.keys(params).map(key => {
if (!params[key]) {
return null;
}
return (
<div key={key} className={styles.tag}>
<Button onClick={() => onClick(key)} variant="primary" size="sm">
<Button onClick={() => handleCloseFilter(key)} variant="primary" size="sm">
<Text>
<b>{`${key}`}</b> — {`${safeDecodeURI(params[key])}`}
</Text>
@ -31,7 +44,7 @@ export default function FilterTags({ className, params, onClick }) {
</div>
);
})}
<Button size="sm" variant="quiet" onClick={() => onClick(null)}>
<Button size="sm" variant="quiet" onClick={() => handleCloseFilter(null)}>
<Icon>
<Icons.Close />
</Icon>

4
components/metrics/MetricsTable.js
View File

@ -31,7 +31,7 @@ export default function MetricsTable({
}) {
const [{ startDate, endDate, modified }] = useDateRange(websiteId);
const {
resolve,
resolveUrl,
router,
query: { url, referrer, os, browser, device, country },
} = usePageQuery();
@ -79,7 +79,7 @@ export default function MetricsTable({
{data && !error && <DataTable {...props} data={filteredData} className={className} />}
<div className={styles.footer}>
{data && !error && limit && (
<Link href={router.pathname} as={resolve({ view: type })}>
<Link href={router.pathname} as={resolveUrl({ view: type })}>
<a>
<Button variant="quiet">
<Text>{formatMessage(messages.more)}</Text>

26
components/metrics/RealtimeChart.js
View File

@ -1,5 +1,5 @@
import { useMemo, useRef } from 'react';
import { format, parseISO, startOfMinute, subMinutes, isBefore } from 'date-fns';
import { format, startOfMinute, subMinutes, isBefore } from 'date-fns';
import PageviewsChart from './PageviewsChart';
import { getDateArray } from 'lib/date';
import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
@ -8,13 +8,12 @@ function mapData(data) {
let last = 0;
const arr = [];
data.reduce((obj, val) => {
const { createdAt } = val;
const t = startOfMinute(parseISO(createdAt));
data?.reduce((obj, { timestamp }) => {
const t = startOfMinute(new Date(timestamp));
if (t.getTime() > last) {
obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
arr.push(obj);
last = t;
last = t.getTime();
} else {
obj.y += 1;
}
@ -30,14 +29,15 @@ export default function RealtimeChart({ data, unit, ...props }) {
const prevEndDate = useRef(endDate);
const chartData = useMemo(() => {
if (data) {
return {
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
};
if (!data) {
return { pageviews: [], sessions: [] };
}
return { pageviews: [], sessions: [] };
}, [data]);
return {
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
sessions: getDateArray(mapData(data.visitors), startDate, endDate, unit),
};
}, [data, startDate, endDate, unit]);
// Don't animate the bars shifting over because it looks weird
const animationDuration = useMemo(() => {
@ -46,7 +46,7 @@ export default function RealtimeChart({ data, unit, ...props }) {
return 0;
}
return DEFAULT_ANIMATION_DURATION;
}, [data]);
}, [data, endDate]);
return (
<PageviewsChart

52
components/metrics/RealtimeHeader.js
View File

@ -1,52 +0,0 @@
import { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { differenceInMinutes } from 'date-fns';
import PageHeader from 'components/layout/PageHeader';
import ActiveUsers from './ActiveUsers';
import MetricCard from './MetricCard';
import styles from './RealtimeHeader.module.css';
export default function RealtimeHeader({ data, websiteId }) {
const { pageviews, sessions, events, countries } = data;
const count = useMemo(() => {
return sessions.filter(
({ createdAt }) => differenceInMinutes(new Date(), new Date(createdAt)) <= 5,
).length;
}, [sessions, websiteId]);
return (
<>
<PageHeader>
<div>
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</div>
<div>
<ActiveUsers className={styles.active} value={count} />
</div>
</PageHeader>
<div className={styles.metrics}>
<MetricCard
label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
value={pageviews.length}
hideComparison
/>
<MetricCard
label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
value={sessions.length}
hideComparison
/>
<MetricCard
label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
value={events.length}
hideComparison
/>
<MetricCard
label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
value={countries.length}
hideComparison
/>
</div>
</>
);
}

11
components/metrics/RealtimeHeader.module.css
View File

@ -1,11 +0,0 @@
.metrics {
display: flex;
margin-bottom: 10px;
overflow: auto;
}
@media only screen and (max-width: 576px) {
.active {
display: none;
}
}

182
components/metrics/RealtimeLog.js
View File

@ -1,182 +0,0 @@
import { useMemo, useState } from 'react';
import { StatusLight } from 'react-basics';
import { FormattedMessage, useIntl } from 'react-intl';
import { FixedSizeList } from 'react-window';
import firstBy from 'thenby';
import { Icon } from 'react-basics';
import FilterButtons from 'components/common/FilterButtons';
import NoData from 'components/common/NoData';
import { getDeviceMessage, labels } from 'components/messages';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { BROWSERS } from 'lib/constants';
import Bolt from 'assets/bolt.svg';
import Visitor from 'assets/visitor.svg';
import Eye from 'assets/eye.svg';
import { stringToColor } from 'lib/format';
import { dateFormat } from 'lib/date';
import { safeDecodeURI } from 'next-basics';
import styles from './RealtimeLog.module.css';
const TYPE_ALL = 0;
const TYPE_PAGEVIEW = 1;
const TYPE_SESSION = 2;
const TYPE_EVENT = 3;
const TYPE_ICONS = {
[TYPE_PAGEVIEW]: <Eye />,
[TYPE_SESSION]: <Visitor />,
[TYPE_EVENT]: <Bolt />,
};
export default function RealtimeLog({ data, websites, websiteId }) {
const intl = useIntl();
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const [filter, setFilter] = useState(TYPE_ALL);
const logs = useMemo(() => {
const { pageviews, sessions, events } = data;
const logs = [...pageviews, ...sessions, ...events].sort(firstBy('createdAt', -1));
if (filter) {
return logs.filter(row => getType(row) === filter);
}
return logs;
}, [data, filter]);
const uuids = useMemo(() => {
return data.sessions.reduce((obj, { sessionId, sessionUuid }) => {
obj[sessionId] = sessionUuid;
return obj;
}, {});
}, [data]);
const buttons = [
{
label: <FormattedMessage id="label.all" defaultMessage="All" />,
key: TYPE_ALL,
},
{
label: <FormattedMessage id="metrics.views" defaultMessage="Views" />,
key: TYPE_PAGEVIEW,
},
{
label: <FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />,
key: TYPE_SESSION,
},
{
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
key: TYPE_EVENT,
},
];
function getType({ pageviewId, sessionId, eventId }) {
if (eventId) {
return TYPE_EVENT;
}
if (pageviewId) {
return TYPE_PAGEVIEW;
}
if (sessionId) {
return TYPE_SESSION;
}
return null;
}
function getIcon(row) {
return TYPE_ICONS[getType(row)];
}
function getWebsite({ websiteId }) {
return websites.find(n => n.id === websiteId);
}
function getDetail({
eventName,
pageviewId,
sessionId,
url,
browser,
os,
country,
device,
websiteId,
}) {
if (eventName) {
return <div>{eventName}</div>;
}
if (pageviewId) {
const domain = getWebsite({ websiteId })?.domain;
return (
<a
className={styles.link}
href={`//${domain}${url}`}
target="_blank"
rel="noreferrer noopener"
>
{safeDecodeURI(url)}
</a>
);
}
if (sessionId) {
return (
<FormattedMessage
id="message.log.visitor"
defaultMessage="Visitor from {country} using {browser} on {os} {device}"
values={{
country: <b>{countryNames[country] || intl.formatMessage(labels.unknown)}</b>,
browser: <b>{BROWSERS[browser]}</b>,
os: <b>{os}</b>,
device: <b>{intl.formatMessage(getDeviceMessage(device))}</b>,
}}
/>
);
}
}
function getTime({ createdAt }) {
return dateFormat(new Date(createdAt), 'pp', locale);
}
function getColor(row) {
const { sessionId } = row;
return stringToColor(uuids[sessionId] || `${sessionId}${getWebsite(row)}`);
}
const Row = ({ index, style }) => {
const row = logs[index];
return (
<div className={styles.row} style={style}>
<div>
<StatusLight color={getColor(row)} />
</div>
<div className={styles.time}>{getTime(row)}</div>
<div className={styles.detail}>
<Icon className={styles.icon} icon={getIcon(row)} />
{getDetail(row)}
</div>
{!websiteId && websites.length > 1 && (
<div className={styles.website}>{getWebsite(row)?.domain}</div>
)}
</div>
);
};
return (
<div className={styles.table}>
<FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
<div className={styles.header}>
<FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
</div>
<div className={styles.body}>
{logs?.length === 0 && <NoData />}
{logs?.length > 0 && (
<FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
{Row}
</FixedSizeList>
)}
</div>
</div>
);
}

48
components/metrics/WebsiteChart.js
View File

@ -1,14 +1,15 @@
import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { Button, Icon, Text, Row, Column, Container } from 'react-basics';
import { Button, Icon, Text, Row, Column, Flexbox } from 'react-basics';
import Link from 'next/link';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
import DateFilter from 'components/common/DateFilter';
import DateFilter from 'components/input/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader';
import ErrorMessage from 'components/common/ErrorMessage';
import FilterTags from 'components/metrics/FilterTags';
import RefreshButton from 'components/input/RefreshButton';
import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
@ -28,13 +29,11 @@ export default function WebsiteChart({
onDataLoad = () => {},
}) {
const { formatMessage } = useIntl();
const [dateRange, setDateRange] = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const {
router,
resolve,
query: { view, url, referrer, os, browser, device, country },
query: { url, referrer, os, browser, device, country },
} = usePageQuery();
const { get, useQuery } = useApi();
@ -66,26 +65,6 @@ export default function WebsiteChart({
return { pageviews: [], sessions: [] };
}, [data, startDate, endDate, unit]);
function handleCloseFilter(param) {
if (param === null) {
router.push(`/websites/${websiteId}/?view=${view}`);
} else {
router.push(resolve({ [param]: undefined }));
}
}
async function handleDateChange(value) {
if (value === 'all') {
const data = await get(`/websites/${websiteId}`);
if (data) {
setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) });
}
} else {
setDateRange(value);
}
}
return (
<>
<WebsiteHeader websiteId={websiteId} title={title} domain={domain}>
@ -102,22 +81,15 @@ export default function WebsiteChart({
</Link>
)}
</WebsiteHeader>
<FilterTags
params={{ url, referrer, os, browser, device, country }}
onClick={handleCloseFilter}
/>
<FilterTags websiteId={websiteId} params={{ url, referrer, os, browser, device, country }} />
<StickyHeader stickyClassName={styles.sticky} enabled={stickyHeader}>
<Row className={styles.header}>
<Column xs={12} sm={12} md={12} defaultSize={10}>
<Column>
<MetricsBar websiteId={websiteId} />
</Column>
<Column className={styles.filter} xs={12} sm={12} md={12} defaultSize={2}>
<DateFilter
value={value}
startDate={startDate}
endDate={endDate}
onChange={handleDateChange}
/>
<Column className={styles.actions}>
<RefreshButton websiteId={websiteId} isLoading={isLoading} />
<DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
</Column>
</Row>
</StickyHeader>

16
components/metrics/WebsiteChart.module.css
View File

@ -7,7 +7,7 @@
.chart {
position: relative;
padding-bottom: 20px;
padding-bottom: 10px;
}
.title {
@ -32,9 +32,17 @@
border-bottom: 1px solid var(--base300);
z-index: 3;
width: inherit;
padding-top: 20px;
padding-top: 10px;
}
.filter {
align-self: center;
.actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 10px;
flex: 1;
}
.dropdown {
min-width: 200px;
}

5
components/metrics/WebsiteHeader.js
View File

@ -1,6 +1,5 @@
import { Row, Column } from 'react-basics';
import { Row, Column, Text } from 'react-basics';
import Favicon from 'components/common/Favicon';
import OverflowText from 'components/common/OverflowText';
import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css';
@ -9,7 +8,7 @@ export default function WebsiteHeader({ websiteId, title, domain, children }) {
<Row className={styles.header} justifyContent="center">
<Column className={styles.title} variant="two">
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
<Text>{title}</Text>
</Column>
<Column className={styles.body} variant="two">
<ActiveUsers websiteId={websiteId} />

13
components/pages/console/TestConsole.js
View File

@ -6,12 +6,13 @@ import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import EventsChart from 'components/metrics/EventsChart';
import WebsiteChart from 'components/metrics/WebsiteChart';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useApi from 'hooks/useApi';
import styles from './TestConsole.module.css';
export default function TestConsole() {
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['websites:test-console'], () => get('/websites'));
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
const router = useRouter();
const {
basePath,
@ -50,15 +51,7 @@ export default function TestConsole() {
)}
</Head>
<PageHeader title="Test console">
<Dropdown
items={data}
renderValue={() => website?.name || 'Select website'}
value={website?.id}
onChange={handleChange}
style={{ width: 300 }}
>
{({ id, name }) => <Item key={id}>{name}</Item>}
</Dropdown>
<WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
</PageHeader>
{website && (
<>

26
components/pages/realtime/RealtimeCountries.js Normal file
View File

@ -0,0 +1,26 @@
import { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { labels } from 'components/messages';
import DataTable from 'components/metrics/DataTable';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
export default function RealtimeCountries({ data }) {
const { formatMessage } = useIntl();
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const renderCountryName = useCallback(
({ x }) => <span className={locale}>{countryNames[x]}</span>,
[countryNames, locale],
);
return (
<DataTable
title={formatMessage(labels.countries)}
metric={formatMessage(labels.visitors)}
data={data}
renderLabel={renderCountryName}
/>
);
}

220
components/pages/realtime/RealtimeDashboard.js
View File

@ -1,155 +1,131 @@
import { useState, useEffect, useMemo, useCallback } from 'react';
import { Row, Column } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import { useState, useEffect, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { subMinutes, startOfMinute } from 'date-fns';
import { useRouter } from 'next/router';
import firstBy from 'thenby';
import { GridRow, GridColumn } from 'components/layout/Grid';
import Page from 'components/layout/Page';
import RealtimeChart from 'components/metrics/RealtimeChart';
import RealtimeLog from 'components/metrics/RealtimeLog';
import RealtimeHeader from 'components/metrics/RealtimeHeader';
import StickyHeader from 'components/helpers/StickyHeader';
import PageHeader from 'components/layout/PageHeader';
import WorldMap from 'components/common/WorldMap';
import DataTable from 'components/metrics/DataTable';
import RealtimeViews from 'components/metrics/RealtimeViews';
import RealtimeLog from 'components/pages/realtime/RealtimeLog';
import RealtimeHeader from 'components/pages/realtime/RealtimeHeader';
import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useApi from 'hooks/useApi';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { percentFilter } from 'lib/filters';
import { SHARE_TOKEN_HEADER, REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
import { labels } from 'components/messages';
import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
import styles from './RealtimeDashboard.module.css';
function mergeData(state, data, time) {
function mergeData(state = [], data = [], time) {
const ids = state.map(({ __id }) => __id);
return state
.concat(data.filter(({ __id }) => !ids.includes(__id)))
.filter(({ createdAt }) => new Date(createdAt).getTime() >= time);
.filter(({ timestamp }) => timestamp >= time);
}
function filterWebsite(data, id) {
return data.filter(({ websiteId }) => websiteId === id);
}
export default function RealtimeDashboard() {
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const [data, setData] = useState();
const [websiteId, setWebsiteId] = useState(null);
export default function RealtimeDashboard({ websiteId }) {
const { formatMessage } = useIntl();
const router = useRouter();
const [currentData, setCurrentData] = useState();
const { get, useQuery } = useApi();
const { data: init, isLoading } = useQuery(['realtime:init'], () => get('/realtime/init'));
const { data: updates } = useQuery(
['realtime:updates'],
() =>
get('/realtime/update', { startAt: data?.timestamp }, { [SHARE_TOKEN_HEADER]: init?.token }),
const { data: website } = useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`));
const { data, isLoading, error } = useQuery(
['realtime', websiteId],
() => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
{
disabled: !init?.websites?.length || !data,
retryInterval: REALTIME_INTERVAL,
enabled: !!(websiteId && website),
refetchInterval: REALTIME_INTERVAL,
cache: false,
},
);
const renderCountryName = useCallback(
({ x }) => <span className={locale}>{countryNames[x]}</span>,
[countryNames],
);
const realtimeData = useMemo(() => {
useEffect(() => {
if (data) {
const { pageviews, sessions, events } = data;
const date = subMinutes(startOfMinute(new Date()), REALTIME_RANGE);
const time = date.getTime();
if (websiteId) {
const { id } = init.websites.find(n => n.id === websiteId);
return {
pageviews: filterWebsite(pageviews, id),
sessions: filterWebsite(sessions, id),
events: filterWebsite(events, id),
};
}
}
return data;
}, [data, websiteId]);
const countries = useMemo(() => {
if (realtimeData?.sessions) {
return percentFilter(
realtimeData.sessions
.reduce((arr, { country }) => {
if (country) {
const row = arr.find(({ x }) => x === country);
if (!row) {
arr.push({ x: country, y: 1 });
} else {
row.y += 1;
}
}
return arr;
}, [])
.sort(firstBy('y', -1)),
);
}
return [];
}, [realtimeData?.sessions]);
useEffect(() => {
if (init && !data) {
const { websites, data } = init;
setData({ websites, ...data });
}
}, [init]);
useEffect(() => {
if (updates) {
const { pageviews, sessions, events, timestamp } = updates;
const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
setData(state => ({
...state,
pageviews: mergeData(state.pageviews, pageviews, time),
sessions: mergeData(state.sessions, sessions, time),
events: mergeData(state.events, events, time),
timestamp,
setCurrentData(state => ({
pageviews: mergeData(state?.pageviews, data.pageviews, time),
sessions: mergeData(state?.sessions, data.sessions, time),
events: mergeData(state?.events, data.events, time),
timestamp: data.timestamp,
}));
}
}, [updates]);
}, [data]);
if (!init || !data || isLoading) {
return null;
}
const realtimeData = useMemo(() => {
if (!currentData) {
return { pageviews: [], sessions: [], events: [], countries: [], visitors: [] };
}
const { websites } = data;
currentData.countries = percentFilter(
currentData.sessions
.reduce((arr, data) => {
if (!arr.find(({ sessionId }) => sessionId === data.sessionId)) {
return arr.concat(data);
}
return arr;
}, [])
.reduce((arr, { country }) => {
if (country) {
const row = arr.find(({ x }) => x === country);
if (!row) {
arr.push({ x: country, y: 1 });
} else {
row.y += 1;
}
}
return arr;
}, [])
.sort(firstBy('y', -1)),
);
currentData.visitors = currentData.sessions.reduce((arr, val) => {
if (!arr.find(({ sessionId }) => sessionId === val.sessionId)) {
return arr.concat(val);
}
return arr;
}, []);
return currentData;
}, [currentData]);
const handleSelect = id => {
router.push(`/realtime/${id}`);
};
return (
<Page>
<RealtimeHeader
websites={websites}
websiteId={websiteId}
data={{ ...realtimeData, countries }}
onSelect={setWebsiteId}
/>
<Page loading={isLoading} error={error}>
<PageHeader title={formatMessage(labels.realtime)}>
<WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
</PageHeader>
<StickyHeader stickyClassName={styles.sticky}>
<RealtimeHeader websiteId={websiteId} data={currentData} />
</StickyHeader>
<div className={styles.chart}>
<RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
</div>
<Row>
<Column xs={12} lg={4}>
<RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
</Column>
<Column xs={12} lg={8}>
<RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
</Column>
</Row>
<Row>
<Column xs={12} lg={4}>
<DataTable
title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
data={countries}
renderLabel={renderCountryName}
/>
</Column>
<Column xs={12} lg={8}>
<WorldMap data={countries} />
</Column>
</Row>
<GridRow>
<GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>
<RealtimeUrls websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
</GridColumn>
<GridColumn xs={12} sm={12} md={12} lg={8} xl={8}>
<RealtimeLog websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} lg={4}>
<RealtimeCountries data={realtimeData?.countries} />
</GridColumn>
<GridColumn xs={12} lg={8}>
<WorldMap data={realtimeData?.countries} />
</GridColumn>
</GridRow>
</Page>
);
}

9
components/pages/realtime/RealtimeDashboard.module.css
View File

@ -5,3 +5,12 @@
.chart {
margin-bottom: 30px;
}
.sticky {
position: fixed;
top: 0;
background: var(--base50);
border-bottom: 1px solid var(--base300);
z-index: 3;
padding: 10px 0;
}

28
components/pages/realtime/RealtimeHeader.js Normal file
View File

@ -0,0 +1,28 @@
import { useIntl } from 'react-intl';
import MetricCard from 'components/metrics/MetricCard';
import { labels } from 'components/messages';
import styles from './RealtimeHeader.module.css';
export default function RealtimeHeader({ data = {} }) {
const { formatMessage } = useIntl();
const { pageviews, visitors, events, countries } = data;
return (
<div className={styles.header}>
<div className={styles.metrics}>
<MetricCard label={formatMessage(labels.views)} value={pageviews?.length} hideComparison />
<MetricCard
label={formatMessage(labels.visitors)}
value={visitors?.length}
hideComparison
/>
<MetricCard label={formatMessage(labels.events)} value={events?.length} hideComparison />
<MetricCard
label={formatMessage(labels.countries)}
value={countries?.length}
hideComparison
/>
</div>
</div>
);
}

9
components/pages/realtime/RealtimeHeader.module.css Normal file
View File

@ -0,0 +1,9 @@
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.metrics {
display: flex;
}

28
components/pages/realtime/RealtimeHome.js Normal file
View File

@ -0,0 +1,28 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useIntl } from 'react-intl';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
export default function RealtimeHome() {
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const router = useRouter();
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
useEffect(() => {
if (data?.length) {
router.push(`realtime/${data[0].id}`);
}
}, [data, router]);
return (
<Page loading={isLoading || data?.length > 0} error={error}>
<PageHeader title={formatMessage(labels.realtime)} />
{data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noWebsites)} />}
</Page>
);
}

157
components/pages/realtime/RealtimeLog.js Normal file
View File

@ -0,0 +1,157 @@
import { useMemo, useState } from 'react';
import { StatusLight, Icon, Text } from 'react-basics';
import { useIntl, FormattedMessage } from 'react-intl';
import { FixedSizeList } from 'react-window';
import firstBy from 'thenby';
import FilterButtons from 'components/common/FilterButtons';
import NoData from 'components/common/NoData';
import { getDeviceMessage, labels, messages } from 'components/messages';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { BROWSERS } from 'lib/constants';
import { stringToColor } from 'lib/format';
import { dateFormat } from 'lib/date';
import { safeDecodeURI } from 'next-basics';
import Icons from 'components/icons';
import styles from './RealtimeLog.module.css';
const TYPE_ALL = 'all';
const TYPE_PAGEVIEW = 'pageview';
const TYPE_SESSION = 'session';
const TYPE_EVENT = 'event';
const icons = {
[TYPE_PAGEVIEW]: <Icons.Eye />,
[TYPE_SESSION]: <Icons.Visitor />,
[TYPE_EVENT]: <Icons.Bolt />,
};
export default function RealtimeLog({ data, websiteDomain }) {
const { formatMessage } = useIntl();
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const [filter, setFilter] = useState(TYPE_ALL);
const buttons = [
{
label: formatMessage(labels.all),
key: TYPE_ALL,
},
{
label: formatMessage(labels.views),
key: TYPE_PAGEVIEW,
},
{
label: formatMessage(labels.visitors),
key: TYPE_SESSION,
},
{
label: formatMessage(labels.events),
key: TYPE_EVENT,
},
];
const getTime = ({ createdAt }) => dateFormat(new Date(createdAt), 'pp', locale);
const getColor = ({ sessionId }) => stringToColor(sessionId);
const getIcon = ({ __type }) => icons[__type];
const getDetail = log => {
const { __type, eventName, url, browser, os, country, device } = log;
if (__type === TYPE_EVENT) {
return (
<FormattedMessage
{...messages.eventLog}
values={{
event: <b>{eventName || formatMessage(labels.unknown)}</b>,
url: (
<a
href={`//${websiteDomain}${url}`}
className={styles.link}
target="_blank"
rel="noreferrer noopener"
>
{url}
</a>
),
}}
/>
);
}
if (__type === TYPE_PAGEVIEW) {
return (
<a
href={`//${websiteDomain}${url}`}
className={styles.link}
target="_blank"
rel="noreferrer noopener"
>
{safeDecodeURI(url)}
</a>
);
}
if (__type === TYPE_SESSION) {
return (
<FormattedMessage
{...messages.visitorLog}
values={{
country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b>{BROWSERS[browser]}</b>,
os: <b>{os}</b>,
device: <b>{formatMessage(getDeviceMessage(device))}</b>,
}}
/>
);
}
};
const Row = ({ index, style }) => {
const row = logs[index];
return (
<div className={styles.row} style={style}>
<div>
<StatusLight color={getColor(row)} />
</div>
<div className={styles.time}>{getTime(row)}</div>
<div className={styles.detail}>
<Icon className={styles.icon}>{getIcon(row)}</Icon>
<Text>{getDetail(row)}</Text>
</div>
</div>
);
};
const logs = useMemo(() => {
if (!data) {
return [];
}
const { pageviews, visitors, events } = data;
const logs = [...pageviews, ...visitors, ...events].sort(firstBy('createdAt', -1));
if (filter !== TYPE_ALL) {
return logs.filter(({ __type }) => __type === filter);
}
return logs;
}, [data, filter]);
return (
<div className={styles.table}>
<FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
<div className={styles.header}>{formatMessage(labels.logs)}</div>
<div className={styles.body}>
{logs?.length === 0 && <NoData />}
{logs?.length > 0 && (
<FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
{Row}
</FixedSizeList>
)}
</div>
</div>
);
}

8
components/metrics/RealtimeLog.module.css → components/pages/realtime/RealtimeLog.module.css
View File

@ -1,16 +1,14 @@
.table {
font-size: var(--font-size-xs);
font-size: var(--font-size-sm);
overflow: hidden;
height: 100%;
display: grid;
grid-template-rows: fit-content(100%) fit-content(100%) auto;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
font-size: var(--font-size-md);
line-height: 40px;
font-weight: 600;
}
@ -18,6 +16,7 @@
.row {
display: flex;
align-items: center;
gap: 10px;
height: 40px;
border-bottom: 1px solid var(--base300);
}
@ -44,6 +43,7 @@
.detail {
display: flex;
flex: 1;
gap: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

50
components/metrics/RealtimeViews.js → components/pages/realtime/RealtimeUrls.js
View File

@ -1,36 +1,30 @@
import { useMemo, useState, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { useMemo, useState } from 'react';
import { ButtonGroup, Button, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import firstBy from 'thenby';
import { percentFilter } from 'lib/filters';
import DataTable from './DataTable';
import FilterButtons from 'components/common/FilterButtons';
import DataTable from 'components/metrics/DataTable';
import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
import { labels } from 'components/messages';
export default function RealtimeViews({ websiteId, data, websites }) {
export default function RealtimeUrls({ websiteDomain, data = {} }) {
const { formatMessage } = useIntl();
const { pageviews } = data;
const [filter, setFilter] = useState(FILTER_REFERRERS);
const domains = useMemo(() => websites.map(({ domain }) => domain), [websites]);
const getDomain = useCallback(
id =>
websites.length === 1
? websites[0]?.domain
: websites.find(({ websiteId }) => websiteId === id)?.domain,
[websites],
);
const buttons = [
{
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
label: formatMessage(labels.referrers),
key: FILTER_REFERRERS,
},
{
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
label: formatMessage(labels.pages),
key: FILTER_PAGES,
},
];
const renderLink = ({ x }) => {
const domain = x.startsWith('/') ? getDomain(websiteId) : '';
const domain = x.startsWith('/') ? websiteDomain : '';
return (
<a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
{x}
@ -38,7 +32,7 @@ export default function RealtimeViews({ websiteId, data, websites }) {
);
};
const [referrers, pages] = useMemo(() => {
const [referrers = [], pages = []] = useMemo(() => {
if (pageviews) {
const referrers = percentFilter(
pageviews
@ -46,7 +40,7 @@ export default function RealtimeViews({ websiteId, data, websites }) {
if (referrer?.startsWith('http')) {
const hostname = new URL(referrer).hostname.replace(/^www\./, '');
if (hostname && !domains.includes(hostname)) {
if (hostname) {
const row = arr.find(({ x }) => x === hostname);
if (!row) {
@ -63,11 +57,8 @@ export default function RealtimeViews({ websiteId, data, websites }) {
const pages = percentFilter(
pageviews
.reduce((arr, { url, websiteId }) => {
.reduce((arr, { url }) => {
if (url?.startsWith('/')) {
if (!websiteId && websites.length > 1) {
url = `${getDomain(websiteId)}${url}`;
}
const row = arr.find(({ x }) => x === url);
if (!row) {
@ -83,24 +74,29 @@ export default function RealtimeViews({ websiteId, data, websites }) {
return [referrers, pages];
}
return [];
}, [pageviews]);
return (
<>
<FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
<Flexbox justifyContent="center">
<ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
{({ key, label }) => <Button key={key}>{label}</Button>}
</ButtonGroup>
</Flexbox>
{filter === FILTER_REFERRERS && (
<DataTable
title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
title={formatMessage(labels.referrers)}
metric={formatMessage(labels.views)}
renderLabel={renderLink}
data={referrers}
/>
)}
{filter === FILTER_PAGES && (
<DataTable
title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
title={formatMessage(labels.pages)}
metric={formatMessage(labels.views)}
renderLabel={renderLink}
data={pages}
/>

2
components/pages/settings/profile/DateRangeSetting.js
View File

@ -1,5 +1,5 @@
import { useIntl } from 'react-intl';
import DateFilter from 'components/common/DateFilter';
import DateFilter from 'components/input/DateFilter';
import { Button, Flexbox } from 'react-basics';
import useDateRange from 'hooks/useDateRange';
import { DEFAULT_DATE_RANGE } from 'lib/constants';

4
components/pages/settings/profile/ProfileSettings.js
View File

@ -4,14 +4,16 @@ import PageHeader from 'components/layout/PageHeader';
import ProfileDetails from './ProfileDetails';
import PasswordChangeButton from './PasswordChangeButton';
import { labels } from 'components/messages';
import useConfig from 'hooks/useConfig';
export default function ProfileSettings() {
const { formatMessage } = useIntl();
const { cloudMode } = useConfig();
return (
<Page>
<PageHeader title={formatMessage(labels.profile)}>
<PasswordChangeButton />
{!cloudMode && <PasswordChangeButton />}
</PageHeader>
<ProfileDetails />
</Page>

2
components/pages/settings/teams/TeamsList.js
View File

@ -65,7 +65,7 @@ export default function TeamsList() {
return (
<Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(labels.team)}>
<PageHeader title={formatMessage(labels.teams)}>
{hasData && (
<Flexbox gap={10}>
{joinButton}

28
components/pages/settings/websites/WebsiteReset.js → components/pages/settings/websites/WebsiteData.js
View File

@ -1,10 +1,10 @@
import { Button, Form, FormRow, Modal, ModalTrigger } from 'react-basics';
import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
import { useIntl } from 'react-intl';
import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
import { labels, messages } from 'components/messages';
export default function WebsiteReset({ websiteId, onSave }) {
export default function WebsiteData({ websiteId, onSave }) {
const { formatMessage } = useIntl();
const handleReset = async () => {
@ -16,29 +16,33 @@ export default function WebsiteReset({ websiteId, onSave }) {
};
return (
<Form>
<FormRow label={formatMessage(labels.resetWebsite)}>
<p>{formatMessage(messages.resetWebsiteWarning)}</p>
<>
<ActionForm
label={formatMessage(labels.resetWebsite)}
description={formatMessage(messages.resetWebsiteWarning)}
>
<ModalTrigger>
<Button>{formatMessage(labels.reset)}</Button>
<Button variant="secondary">{formatMessage(labels.reset)}</Button>
<Modal title={formatMessage(labels.resetWebsite)}>
{close => (
<WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
)}
</Modal>
</ModalTrigger>
</FormRow>
<FormRow label={formatMessage(labels.deleteWebsite)}>
<p>{formatMessage(messages.deleteWebsiteWarning)}</p>
</ActionForm>
<ActionForm
label={formatMessage(labels.deleteWebsite)}
description={formatMessage(messages.deleteWebsiteWarning)}
>
<ModalTrigger>
<Button>Delete</Button>
<Button variant="danger">Delete</Button>
<Modal title={formatMessage(labels.deleteWebsite)}>
{close => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
)}
</Modal>
</ModalTrigger>
</FormRow>
</Form>
</ActionForm>
</>
);
}

8
components/pages/settings/websites/WebsiteSettings.js
View File

@ -6,7 +6,7 @@ import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
import WebsiteData from 'components/pages/settings/websites/WebsiteData';
import TrackingCode from 'components/pages/settings/websites/TrackingCode';
import ShareUrl from 'components/pages/settings/websites/ShareUrl';
import useApi from 'hooks/useApi';
@ -59,8 +59,8 @@ export default function WebsiteSettings({ websiteId }) {
</Breadcrumbs>
}
>
<Link href={`/websites/${websiteId}`}>
<a>
<Link href={`/analytics/websites/${websiteId}`}>
<a target="_blank">
<Button variant="primary">
<Icon>
<Icons.External />
@ -81,7 +81,7 @@ export default function WebsiteSettings({ websiteId }) {
)}
{tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
{tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
{tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleReset} />}
{tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
</Page>
);
}

4
components/pages/websites/WebsiteDetails.js
View File

@ -8,13 +8,10 @@ import WebsiteChart from 'components/metrics/WebsiteChart';
import useApi from 'hooks/useApi';
import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import { labels } from 'components/messages';
import styles from './WebsiteDetails.module.css';
import WebsiteTableView from './WebsiteTableView';
import WebsiteMenuView from './WebsiteMenuView';
export default function WebsiteDetails({ websiteId }) {
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['websites', websiteId], () =>
get(`/websites/${websiteId}`),
@ -22,7 +19,6 @@ export default function WebsiteDetails({ websiteId }) {
const [chartLoaded, setChartLoaded] = useState(false);
const {
resolve,
query: { view },
} = usePageQuery();

24
components/pages/websites/WebsiteMenuView.js
View File

@ -1,7 +1,7 @@
import { Row, Column, Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
import { Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import classNames from 'classnames';
import { GridRow, GridColumn } from 'components/layout/Grid';
import BrowsersTable from 'components/metrics/BrowsersTable';
import CountriesTable from 'components/metrics/CountriesTable';
import DevicesTable from 'components/metrics/DevicesTable';
@ -33,7 +33,7 @@ const views = {
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
const { formatMessage } = useIntl();
const {
resolve,
resolveUrl,
query: { view },
} = usePageQuery();
@ -80,12 +80,12 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
},
];
const DetailsComponent = views[view];
const DetailsComponent = views[view] || (() => null);
return (
<Row className={styles.row}>
<Column defaultSize={3} className={classNames(styles.col, styles.menu)}>
<Link href={resolve({ view: undefined })}>
<GridRow>
<GridColumn xs={12} sm={12} md={12} defaultSize={3} className={styles.menu}>
<Link href={resolveUrl({ view: undefined })}>
<a>
<Flexbox justifyContent="center">
<Button variant="quiet">
@ -100,14 +100,14 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
<Menu items={items} selectedKey={view}>
{({ key, label }) => (
<Item key={key} className={styles.item}>
<Link href={resolve({ view: key })} shallow={true}>
<Link href={resolveUrl({ view: key })} shallow={true}>
<a>{label}</a>
</Link>
</Item>
)}
</Menu>
</Column>
<Column defaultSize={9} className={classNames(styles.col, styles.data)}>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
<DetailsComponent
websiteId={websiteId}
websiteDomain={websiteDomain}
@ -117,7 +117,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
showFilters={true}
virtualize={true}
/>
</Column>
</Row>
</GridColumn>
</GridRow>
);
}

14
components/pages/websites/WebsiteMenuView.module.css
View File

@ -1,17 +1,3 @@
.row {
border-top: 1px solid var(--base300);
}
.col {
border-left: 1px solid var(--base300);
padding: 30px;
}
.col:first-child {
padding-left: 0;
border-left: 0;
}
.menu {
gap: 20px;
}

56
components/pages/websites/WebsiteTableView.js
View File

@ -1,5 +1,6 @@
import { useState } from 'react';
import { Row, Column } from 'react-basics';
import { GridRow, GridColumn } from 'components/layout/Grid';
//import { Row as GridRow, Column as GridColumn } from 'react-basics';
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import BrowsersTable from 'components/metrics/BrowsersTable';
@ -9,7 +10,6 @@ import WorldMap from 'components/common/WorldMap';
import CountriesTable from 'components/metrics/CountriesTable';
import EventsTable from 'components/metrics/EventsTable';
import EventsChart from 'components/metrics/EventsChart';
import styles from './WebsiteTableView.module.css';
export default function WebsiteTableView({ websiteId }) {
const [countryData, setCountryData] = useState();
@ -20,41 +20,41 @@ export default function WebsiteTableView({ websiteId }) {
return (
<>
<Row className={styles.row}>
<Column className={styles.col} variant="two">
<GridRow>
<GridColumn variant="two">
<PagesTable {...tableProps} />
</Column>
<Column className={styles.col} variant="two">
</GridColumn>
<GridColumn variant="two">
<ReferrersTable {...tableProps} />
</Column>
</Row>
<Row className={styles.row}>
<Column className={styles.col} variant="three">
</GridColumn>
</GridRow>
<GridRow>
<GridColumn variant="three">
<BrowsersTable {...tableProps} />
</Column>
<Column className={styles.col} variant="three">
</GridColumn>
<GridColumn variant="three">
<OSTable {...tableProps} />
</Column>
<Column className={styles.col} variant="three">
</GridColumn>
<GridColumn variant="three">
<DevicesTable {...tableProps} />
</Column>
</Row>
<Row className={styles.row}>
<Column className={styles.col} xs={12} sm={12} md={12} defaultSize={8}>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} sm={12} md={12} defaultSize={8}>
<WorldMap data={countryData} />
</Column>
<Column className={styles.col} xs={12} sm={12} md={12} defaultSize={4}>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</Column>
</Row>
<Row className={styles.row}>
<Column className={styles.col} xs={12} md={12} lg={4} defaultSize={4}>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} sm={12} md={12} lg={4} defaultSize={4}>
<EventsTable {...tableProps} />
</Column>
<Column className={styles.col} xs={12} md={12} lg={8} defaultSize={8}>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} lg={8} defaultSize={8}>
<EventsChart websiteId={websiteId} />
</Column>
</Row>
</GridColumn>
</GridRow>
</>
);
}

2
hooks/useLocale.js
View File

@ -51,7 +51,7 @@ export default function useLocale() {
}, [locale]);
useEffect(() => {
const url = new URL(window.location.href);
const url = new URL(window?.location?.href);
const locale = url.searchParams.get('locale');
if (locale) {

4
hooks/usePageQuery.js
View File

@ -23,9 +23,9 @@ export default function usePageQuery() {
}, {});
}, [search]);
function resolve(params) {
function resolveUrl(params) {
return buildUrl(asPath.split('?')[0], { ...query, ...params });
}
return { pathname, query, resolve, router };
return { pathname, query, resolveUrl, router };
}

2
hooks/useTheme.js
View File

@ -24,7 +24,7 @@ export default function useTheme() {
}, [theme]);
useEffect(() => {
const url = new URL(window.location.href);
const url = new URL(window?.location?.href);
const theme = url.searchParams.get('theme');
if (['light', 'dark'].includes(theme)) {

2
lib/constants.ts
View File

@ -21,7 +21,7 @@ export const DEFAULT_DATE_RANGE = '24hour';
export const DEFAULT_WEBSITE_LIMIT = 10;
export const REALTIME_RANGE = 30;
export const REALTIME_INTERVAL = 3000;
export const REALTIME_INTERVAL = 5000;
export const UI_LAYOUT_BODY = 'ui-layout-body';

5
lib/crypto.js
View File

@ -1,3 +1,4 @@
import crypto from 'crypto';
import { v4, v5 } from 'uuid';
import { startOfMonth } from 'date-fns';
import { hash } from 'next-basics';
@ -17,3 +18,7 @@ export function uuid(...args) {
return v5(hash(...args, salt()), v5.DNS);
}
export function md5(...args) {
return crypto.createHash('md5').update(args.join('')).digest('hex');
}

7
lib/types.ts
View File

@ -24,6 +24,13 @@ export interface NextApiRequestAuth extends NextApiRequest {
headers: any;
}
export interface User {
id: string;
username: string;
password?: string;
createdAt?: Date;
}
export interface Website {
id: string;
userId: string;

1
next.config.js
View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-var-requires */
require('dotenv').config();
const pkg = require('./package.json');

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "umami",
"version": "2.0.0-beta.3",
"version": "2.0.0-beta.4",
"description": "A simple, fast, privacy-focused alternative to Google Analytics.",
"author": "Mike Cao <mike@mikecao.com>",
"license": "MIT",

18
pages/404.js
View File

@ -1,18 +1,20 @@
import { Row, Column, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import AppLayout from 'components/layout/AppLayout';
import { useIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
notFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
});
import { labels } from 'components/messages';
export default function Custom404() {
const { formatMessage } = useIntl();
return (
<AppLayout>
<div className="row justify-content-center">
<h1 style={{ textAlign: 'center' }}>{formatMessage(messages.notFound)}</h1>
</div>
<Row>
<Column>
<Flexbox alignItems="center" justifyContent="center" flex={1} style={{ minHeight: 600 }}>
<h1>{formatMessage(labels.pageNotFound)}</h1>
</Flexbox>
</Column>
</Row>
</AppLayout>
);
}

1
pages/_app.js
View File

@ -14,6 +14,7 @@ import '@fontsource/inter/600.css';
const client = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
},
},

4
pages/api/auth/login.ts
View File

@ -8,9 +8,9 @@ import {
getRandomChars,
} from 'next-basics';
import redis from '@umami/redis-client';
import { getUser, User } from 'queries';
import { getUser } from 'queries';
import { secret } from 'lib/crypto';
import { NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody, User } from 'lib/types';
import { NextApiResponse } from 'next';
export interface LoginRequestBody {

4
pages/api/config.ts
View File

@ -7,6 +7,7 @@ export interface ConfigResponse {
updatesDisabled: boolean;
telemetryDisabled: boolean;
adminDisabled: boolean;
cloudMode: boolean;
}
export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>) => {
@ -16,7 +17,8 @@ export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>)
trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
updatesDisabled: !!process.env.DISABLE_UPDATES,
telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
adminDisabled: !!process.env.CLOUD_MODE,
adminDisabled: !!process.env.DISABLE_ADMIN,
cloudMode: process.env.CLOUD_MODE,
});
}

13
pages/api/me/index.ts Normal file
View File

@ -0,0 +1,13 @@
import { NextApiResponse } from 'next';
import { useAuth } from 'lib/middleware';
import { NextApiRequestQueryBody, User } from 'lib/types';
import { ok } from 'next-basics';
export default async (
req: NextApiRequestQueryBody<unknown, unknown>,
res: NextApiResponse<User>,
) => {
await useAuth(req, res);
return ok(res, req.auth.user);
};

9
pages/api/me/password.ts
View File

@ -1,4 +1,4 @@
import { NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody, User } from 'lib/types';
import { canUpdateUser } from 'lib/auth';
import { useAuth } from 'lib/middleware';
import { NextApiResponse } from 'next';
@ -7,10 +7,11 @@ import {
checkPassword,
hashPassword,
methodNotAllowed,
forbidden,
ok,
unauthorized,
} from 'next-basics';
import { getUser, updateUser, User } from 'queries';
import { getUser, updateUser } from 'queries';
export interface UserPasswordRequestQuery {
id: string;
@ -25,6 +26,10 @@ export default async (
req: NextApiRequestQueryBody<UserPasswordRequestQuery, UserPasswordRequestBody>,
res: NextApiResponse<User>,
) => {
if (process.env.CLOUD_MODE) {
return forbidden(res);
}
await useAuth(req, res);
const { currentPassword, newPassword } = req.body;

25
pages/api/realtime/[id].ts Normal file
View File

@ -0,0 +1,25 @@
import { subMinutes } from 'date-fns';
import { RealtimeInit, NextApiRequestAuth } from 'lib/types';
import { useAuth } from 'lib/middleware';
import { NextApiResponse } from 'next';
import { methodNotAllowed, ok } from 'next-basics';
import { getRealtimeData } from 'queries';
export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit>) => {
await useAuth(req, res);
if (req.method === 'GET') {
const { id, startAt } = req.query;
let startTime = subMinutes(new Date(), 30);
if (+startAt > startTime.getTime()) {
startTime = new Date(+startAt);
}
const data = await getRealtimeData(id, startTime);
return ok(res, data);
}
return methodNotAllowed(res);
};

29
pages/api/realtime/init.ts
View File

@ -1,29 +0,0 @@
import { subMinutes } from 'date-fns';
import { RealtimeInit } from 'lib/types';
import { NextApiRequestAuth } from 'lib/types';
import { secret } from 'lib/crypto';
import { useAuth } from 'lib/middleware';
import { NextApiResponse } from 'next';
import { createToken, methodNotAllowed, ok } from 'next-basics';
import { getRealtimeData, getUserWebsites } from 'queries';
export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit>) => {
await useAuth(req, res);
if (req.method === 'GET') {
const { id: userId } = req.auth.user;
const websites = await getUserWebsites(userId);
const ids = websites.map(({ id }) => id);
const token = createToken({ websites: ids }, secret());
const data = await getRealtimeData(ids, subMinutes(new Date(), 30));
return ok(res, {
websites,
token,
data,
});
}
return methodNotAllowed(res);
};

37
pages/api/realtime/update.ts
View File

@ -1,37 +0,0 @@
import { ok, methodNotAllowed, badRequest, parseToken } from 'next-basics';
import { useAuth } from 'lib/middleware';
import { getRealtimeData } from 'queries';
import { SHARE_TOKEN_HEADER } from 'lib/constants';
import { secret } from 'lib/crypto';
import { NextApiRequestQueryBody } from 'lib/types';
import { NextApiResponse } from 'next';
import { RealtimeUpdate } from 'lib/types';
export interface InitUpdateRequestQuery {
startAt: string;
}
export default async (
req: NextApiRequestQueryBody<InitUpdateRequestQuery>,
res: NextApiResponse<RealtimeUpdate>,
) => {
await useAuth(req, res);
if (req.method === 'GET') {
const { startAt } = req.query;
const token = req.headers[SHARE_TOKEN_HEADER];
if (!token) {
return badRequest(res);
}
const { websites } = parseToken(token, secret());
const data = await getRealtimeData(websites, new Date(+startAt));
return ok(res, data);
}
return methodNotAllowed(res);
};

6
pages/api/users/index.ts
View File

@ -2,10 +2,10 @@ import { canCreateUser, canViewUsers } from 'lib/auth';
import { ROLES } from 'lib/constants';
import { uuid } from 'lib/crypto';
import { useAuth } from 'lib/middleware';
import { NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody, User } from 'lib/types';
import { NextApiResponse } from 'next';
import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
import { createUser, getUser, getUsers, User } from 'queries';
import { createUser, getUser, getUsers } from 'queries';
export interface UsersRequestBody {
username: string;
@ -36,7 +36,7 @@ export default async (
const { username, password, id } = req.body;
const existingUser = await getUser({ username });
const existingUser = await getUser({ username }, { showDeleted: true });
if (existingUser) {
return badRequest(res, 'User already exists');

6
pages/console/[[...id]].js
View File

@ -1,8 +1,8 @@
import AppLayout from 'components/layout/AppLayout';
import TestConsole from 'components/pages/console/TestConsole';
export default function ConsolePage({ pageDisabled }) {
if (pageDisabled) {
export default function ConsolePage({ disabled }) {
if (disabled) {
return null;
}
@ -16,7 +16,7 @@ export default function ConsolePage({ pageDisabled }) {
export async function getServerSideProps() {
return {
props: {
pageDisabled: !process.env.ENABLE_TEST_CONSOLE,
disabled: !process.env.ENABLE_TEST_CONSOLE,
},
};
}

0
pages/dashboard/[[...id]].js → pages/dashboard/index.js
View File

6
pages/login.js
View File

@ -1,8 +1,8 @@
import LoginLayout from 'components/pages/login/LoginLayout';
import LoginForm from 'components/pages/login/LoginForm';
export default function LoginPage({ pageDisabled }) {
if (pageDisabled) {
export default function LoginPage({ disabled }) {
if (disabled) {
return null;
}
@ -16,7 +16,7 @@ export default function LoginPage({ pageDisabled }) {
export async function getServerSideProps() {
return {
props: {
pageDisabled: !!process.env.CLOUD_MODE,
disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
},
};
}

22
pages/logout.js
View File

@ -4,7 +4,7 @@ import useApi from 'hooks/useApi';
import { setUser } from 'store/app';
import { removeClientAuthToken } from 'lib/client';
export default function LogoutPage() {
export default function LogoutPage({ disabled }) {
const router = useRouter();
const { post } = useApi();
@ -13,14 +13,24 @@ export default function LogoutPage() {
await post('/logout');
}
removeClientAuthToken();
if (!disabled) {
removeClientAuthToken();
logout();
logout();
router.push('/login');
router.push('/login');
return () => setUser(null);
}, []);
return () => setUser(null);
}
}, [disabled, router, post]);
return null;
}
export async function getServerSideProps() {
return {
props: {
disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
},
};
}

18
pages/realtime/[id]/index.js Normal file
View File

@ -0,0 +1,18 @@
import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
export default function RealtimeDetailsPage() {
const router = useRouter();
const { id: websiteId } = router.query;
if (!websiteId) {
return null;
}
return (
<AppLayout>
<RealtimeDashboard key={websiteId} websiteId={websiteId} />
</AppLayout>
);
}

4
pages/realtime.js → pages/realtime/index.js
View File

@ -1,10 +1,10 @@
import AppLayout from 'components/layout/AppLayout';
import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
import RealtimeHome from 'components/pages/realtime/RealtimeHome';
export default function RealtimePage() {
return (
<AppLayout>
<RealtimeDashboard />
<RealtimeHome />
</AppLayout>
);
}

4
pages/settings/index.js
View File

@ -1,9 +1,11 @@
export default () => null;
export async function getServerSideProps() {
const destination = process.env.CLOUD_MODE ? 'https://cloud.umami.is' : '/settings/websites';
return {
redirect: {
destination: '/settings/websites',
destination,
permanent: true,
},
};

14
pages/settings/teams/[...id].js → pages/settings/teams/[id]/index.js
View File

@ -2,13 +2,25 @@ import AppLayout from 'components/layout/AppLayout';
import TeamSettings from 'components/pages/settings/teams/TeamSettings';
import { useRouter } from 'next/router';
export default function TeamDetailPage() {
export default function TeamDetailPage({ disabled }) {
const router = useRouter();
const { id } = router.query;
if (!id || disabled) {
return null;
}
return (
<AppLayout>
<TeamSettings teamId={id} />
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

14
pages/settings/teams/index.js
View File

@ -1,10 +1,22 @@
import AppLayout from 'components/layout/AppLayout';
import TeamsList from 'components/pages/settings/teams/TeamsList';
export default function TeamsPage() {
export default function TeamsPage({ disabled }) {
if (disabled) {
return null;
}
return (
<AppLayout>
<TeamsList />
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

14
pages/settings/users/[...id].js → pages/settings/users/[id]/index.js
View File

@ -2,13 +2,25 @@ import AppLayout from 'components/layout/AppLayout';
import UserSettings from 'components/pages/settings/users/UserSettings';
import { useRouter } from 'next/router';
export default function TeamDetailPage() {
export default function TeamDetailPage({ disabled }) {
const router = useRouter();
const { id } = router.query;
if (!id || disabled) {
return null;
}
return (
<AppLayout>
<UserSettings userId={id} />
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

16
pages/settings/users/index.js
View File

@ -1,12 +1,8 @@
import AppLayout from 'components/layout/AppLayout';
import useConfig from 'hooks/useConfig';
import UsersList from 'components/pages/settings/users/UsersList';
export default function UsersPage() {
const { adminDisabled } = useConfig();
if (adminDisabled) {
export default function UsersPage({ disabled }) {
if (disabled) {
return null;
}
@ -16,3 +12,11 @@ export default function UsersPage() {
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

12
pages/settings/websites/[id]/index.js
View File

@ -2,11 +2,11 @@ import { useRouter } from 'next/router';
import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
import AppLayout from 'components/layout/AppLayout';
export default function WebsiteSettingsPage() {
export default function WebsiteSettingsPage({ disabled }) {
const router = useRouter();
const { id } = router.query;
if (!id) {
if (!id || disabled) {
return null;
}
@ -16,3 +16,11 @@ export default function WebsiteSettingsPage() {
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

14
pages/settings/websites/index.js
View File

@ -1,10 +1,22 @@
import AppLayout from 'components/layout/AppLayout';
import WebsitesList from 'components/pages/settings/websites/WebsitesList';
export default function WebsitesPage() {
export default function WebsitesPage({ disabled }) {
if (disabled) {
return null;
}
return (
<AppLayout>
<WebsitesList />
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

14
queries/admin/teamWebsite.ts
View File

@ -3,7 +3,7 @@ import { uuid } from 'lib/crypto';
import prisma from 'lib/prisma';
export async function getTeamWebsite(teamId: string, userId: string): Promise<TeamWebsite> {
return prisma.client.TeamWebsite.findFirst({
return prisma.client.teamWebsite.findFirst({
where: {
teamId,
userId,
@ -12,7 +12,7 @@ export async function getTeamWebsite(teamId: string, userId: string): Promise<Te
}
export async function getTeamWebsites(teamId: string): Promise<TeamWebsite[]> {
return prisma.client.TeamWebsite.findMany({
return prisma.client.teamWebsite.findMany({
where: {
teamId,
},
@ -28,7 +28,7 @@ export async function createTeamWebsite(
teamId: string,
websiteId: string,
): Promise<TeamWebsite> {
return prisma.client.TeamWebsite.create({
return prisma.client.teamWebsite.create({
data: {
id: uuid(),
userId,
@ -37,11 +37,3 @@ export async function createTeamWebsite(
},
});
}
export async function deleteTeamWebsite(TeamWebsiteId: string): Promise<TeamWebsite> {
return prisma.client.teamUser.delete({
where: {
id: TeamWebsiteId,
},
});
}

59
queries/admin/user.ts
View File

@ -1,23 +1,16 @@
import { Prisma, Team } from '@prisma/client';
import cache from 'lib/cache';
import prisma from 'lib/prisma';
import { Website } from 'lib/types';
export interface User {
id: string;
username: string;
password?: string;
createdAt?: Date;
}
import { Website, User } from 'lib/types';
export async function getUser(
where: Prisma.UserWhereUniqueInput,
options: { includePassword?: boolean } = {},
where: Prisma.UserWhereInput | Prisma.UserWhereUniqueInput,
options: { includePassword?: boolean; showDeleted?: boolean } = {},
): Promise<User> {
const { includePassword = false } = options;
const { includePassword = false, showDeleted = false } = options;
return prisma.client.user.findUnique({
where,
return prisma.client.user.findFirst({
where: { ...where, ...(showDeleted ? {} : { deletedAt: null }) },
select: {
id: true,
username: true,
@ -69,6 +62,7 @@ export async function getUserWebsites(userId: string): Promise<Website[]> {
return prisma.client.website.findMany({
where: {
userId,
deletedAt: null,
},
orderBy: [
{
@ -118,6 +112,7 @@ export async function deleteUser(
userId: string,
): Promise<[Prisma.BatchPayload, Prisma.BatchPayload, Prisma.BatchPayload, User]> {
const { client } = prisma;
const cloudMode = process.env.CLOUD_MODE;
const websites = await client.website.findMany({
where: { userId },
@ -137,20 +132,30 @@ export async function deleteUser(
client.session.deleteMany({
where: { websiteId: { in: websiteIds } },
}),
client.website.updateMany({
data: {
deletedAt: new Date(),
},
where: { id: { in: websiteIds } },
}),
client.user.update({
data: {
deletedAt: new Date(),
},
where: {
id: userId,
},
}),
cloudMode
? client.website.updateMany({
data: {
deletedAt: new Date(),
},
where: { id: { in: websiteIds } },
})
: client.website.deleteMany({
where: { id: { in: websiteIds } },
}),
cloudMode
? client.user.update({
data: {
deletedAt: new Date(),
},
where: {
id: userId,
},
})
: client.user.delete({
where: {
id: userId,
},
}),
])
.then(async data => {
if (cache.enabled) {

52
queries/admin/website.ts
View File

@ -1,7 +1,6 @@
import { Prisma, Website } from '@prisma/client';
import cache from 'lib/cache';
import prisma from 'lib/prisma';
import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
export async function getWebsite(where: Prisma.WebsiteWhereUniqueInput): Promise<Website> {
return prisma.client.website.findUnique({
@ -70,34 +69,33 @@ export async function resetWebsite(
}
export async function deleteWebsite(
websiteId: string,
websiteId,
): Promise<[Prisma.BatchPayload, Prisma.BatchPayload, Website]> {
const { client, transaction } = prisma;
const cloudMode = process.env.CLOUD_MODE;
if (process.env.CLOUD_MODE) {
return prisma.client.website.update({
data: {
deletedAt: new Date(),
},
where: { id: websiteId },
});
} else {
return transaction([
client.websiteEvent.deleteMany({
where: { websiteId },
}),
client.session.deleteMany({
where: { websiteId },
}),
client.website.delete({
where: { id: websiteId },
}),
]).then(async data => {
if (cache.enabled) {
await cache.deleteWebsite(websiteId);
}
return transaction([
client.websiteEvent.deleteMany({
where: { websiteId },
}),
client.session.deleteMany({
where: { websiteId },
}),
cloudMode
? prisma.client.website.update({
data: {
deletedAt: new Date(),
},
where: { id: websiteId },
})
: client.website.delete({
where: { id: websiteId },
}),
]).then(async data => {
if (cache.enabled) {
await cache.deleteWebsite(websiteId);
}
return data;
});
}
return data;
});
}

27
queries/analytics/event/getEvents.ts
View File

@ -3,19 +3,17 @@ import clickhouse from 'lib/clickhouse';
import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
import { EVENT_TYPE } from 'lib/constants';
export function getEvents(...args: [websites: string[], startAt: Date]) {
export function getEvents(...args: [websiteId: string, startAt: Date]) {
return runQuery({
[PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args),
});
}
function relationalQuery(websites: string[], startAt: Date) {
return prisma.client.event.findMany({
function relationalQuery(websiteId: string, startAt: Date) {
return prisma.client.websiteEvent.findMany({
where: {
websiteId: {
in: websites,
},
websiteId,
createdAt: {
gte: startAt,
},
@ -23,23 +21,24 @@ function relationalQuery(websites: string[], startAt: Date) {
});
}
function clickhouseQuery(websites: string[], startAt: Date) {
function clickhouseQuery(websiteId: string, startAt: Date) {
const { rawQuery } = clickhouse;
return rawQuery(
`select
event_id,
website_id,
session_id,
created_at,
event_id as id,
website_id as websiteId,
session_id as sessionId,
created_at as createdAt,
toUnixTimestamp(created_at) as timestamp,
url,
event_name
event_name as eventName
from event
where event_type = ${EVENT_TYPE.customEvent}
and ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
and website_id = {websiteId:UUID}
and created_at >= {startAt:DateTime('UTC')}`,
{
websites,
websiteId,
startAt,
},
);

23
queries/analytics/pageview/getPageviews.ts
View File

@ -3,19 +3,17 @@ 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]) {
export async function getPageviews(...args: [websiteId: string, startAt: Date]) {
return runQuery({
[PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args),
});
}
async function relationalQuery(websites: string[], startAt: Date) {
return prisma.client.pageview.findMany({
async function relationalQuery(websiteId: string, startAt: Date) {
return prisma.client.websiteEvent.findMany({
where: {
websiteId: {
in: websites,
},
websiteId,
createdAt: {
gte: startAt,
},
@ -23,21 +21,22 @@ async function relationalQuery(websites: string[], startAt: Date) {
});
}
async function clickhouseQuery(websites: string[], startAt: Date) {
async function clickhouseQuery(websiteId: string, startAt: Date) {
const { rawQuery } = clickhouse;
return rawQuery(
`select
website_id,
session_id,
created_at,
website_id as websiteId,
session_id as sessionId,
created_at as createdAt,
toUnixTimestamp(created_at) as timestamp,
url
from event
where event_type = ${EVENT_TYPE.pageView}
and ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
and website_id = {websiteId:UUID}
and created_at >= {startAt:DateTime('UTC')}`,
{
websites,
websiteId,
startAt,
},
);

25
queries/analytics/session/getSessions.ts
View File

@ -2,23 +2,17 @@ import prisma from 'lib/prisma';
import clickhouse from 'lib/clickhouse';
import { runQuery, PRISMA, CLICKHOUSE } from 'lib/db';
export async function getSessions(...args: [websites: string[], startAt: Date]) {
export async function getSessions(...args: [websiteId: string, startAt: Date]) {
return runQuery({
[PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args),
});
}
async function relationalQuery(websites: string[], startAt: Date) {
async function relationalQuery(websiteId: string, startAt: Date) {
return prisma.client.session.findMany({
where: {
...(websites && websites.length > 0
? {
websiteId: {
in: websites,
},
}
: {}),
websiteId,
createdAt: {
gte: startAt,
},
@ -26,14 +20,15 @@ async function relationalQuery(websites: string[], startAt: Date) {
});
}
async function clickhouseQuery(websites: string[], startAt: Date) {
async function clickhouseQuery(websiteId: string, startAt: Date) {
const { rawQuery } = clickhouse;
return rawQuery(
`select distinct
session_id,
website_id,
created_at,
session_id as sessionId,
website_id as websiteId,
created_at as createdAt,
toUnixTimestamp(created_at) as timestamp,
hostname,
browser,
os,
@ -45,10 +40,10 @@ async function clickhouseQuery(websites: string[], startAt: Date) {
subdivision2,
city
from event
where ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
where website_id = {websiteId:UUID}
and created_at >= {startAt:DateTime('UTC')}`,
{
websites,
websiteId,
startAt,
},
);

36
queries/analytics/stats/getRealtimeData.ts
View File

@ -1,30 +1,28 @@
import { md5 } from 'lib/crypto';
import { getPageviews } from '../pageview/getPageviews';
import { getSessions } from '../session/getSessions';
import { getEvents } from '../event/getEvents';
export async function getRealtimeData(websites, time) {
export async function getRealtimeData(websiteId, time) {
const [pageviews, sessions, events] = await Promise.all([
getPageviews(websites, time),
getSessions(websites, time),
getEvents(websites, time),
getPageviews(websiteId, time),
getSessions(websiteId, time),
getEvents(websiteId, time),
]);
const decorate = (id, data) => {
return data.map(props => ({
...props,
__id: md5(id, ...Object.values(props)),
__type: id,
timestamp: props.timestamp ? props.timestamp * 1000 : new Date(props.createdAt).getTime(),
}));
};
return {
pageviews: pageviews.map(({ id, ...props }) => ({
__id: `p${id}`,
pageviewId: id,
...props,
})),
sessions: sessions.map(({ id, ...props }) => ({
__id: `s${id}`,
sessionId: id,
...props,
})),
events: events.map(({ id, ...props }) => ({
__id: `e${id}`,
eventId: id,
...props,
})),
pageviews: decorate('pageview', pageviews),
sessions: decorate('session', sessions),
events: decorate('event', events),
timestamp: Date.now(),
};
}

2
scripts/download-country-names.js
View File

@ -1,4 +1,4 @@
/* eslint-disable no-console */
/* eslint-disable no-console, @typescript-eslint/no-var-requires */
const fs = require('fs-extra');
const path = require('path');
const https = require('https');

20
scripts/test.js
View File

@ -1,20 +0,0 @@
/* eslint-disable no-console */
require('dotenv').config();
const path = require('path');
const maxmind = require('maxmind');
async function getLocation() {
const lookup = await maxmind.open(path.resolve('../node_modules/.geo/GeoLite2-City.mmdb'));
const result = lookup.get('46.135.3.1');
const country = result?.country?.iso_code ?? result?.registered_country?.iso_code;
const subdivision = result?.subdivisions[0]?.iso_code;
const subdivision2 = result?.subdivisions[0]?.names?.en;
const subdivision3 = result?.subdivisions[1]?.names?.en;
const city = result?.city?.names?.en;
console.log(result);
console.log(country, subdivision, city, subdivision2, subdivision3);
}
getLocation();

8
store/queries.js
View File

@ -2,8 +2,12 @@ import create from 'zustand';
const store = create(() => ({}));
export function saveQuery(url, data) {
store.setState({ [url]: data });
export function saveQuery(key, data) {
store.setState({ [key]: data });
}
export function getQuery(key) {
return store.getState()[key];
}
export default store;

2
store/websites.js
View File

@ -1,7 +1,7 @@
import create from 'zustand';
import produce from 'immer';
import app from './app';
import { getDateRange } from '../lib/date';
import { getDateRange } from 'lib/date';
const store = create(() => ({}));

5
styles/index.css
View File

@ -1,3 +1,8 @@
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
html,
body {
font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,