mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 18:26:20 +01:00
Fixed realtime logs.
This commit is contained in:
parent
8ecc6400ef
commit
7d3334ccce
@ -97,6 +97,7 @@ export const labels = defineMessages({
|
||||
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({
|
||||
@ -168,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({
|
||||
|
@ -8,7 +8,7 @@ function mapData(data) {
|
||||
let last = 0;
|
||||
const arr = [];
|
||||
|
||||
data.reduce((obj, { timestamp }) => {
|
||||
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 };
|
||||
@ -33,16 +33,9 @@ export default function RealtimeChart({ data, unit, ...props }) {
|
||||
return { pageviews: [], sessions: [] };
|
||||
}
|
||||
|
||||
const visitors = data.sessions?.reduce((arr, val) => {
|
||||
if (!arr.find(({ sessionId }) => sessionId === val.sessionId)) {
|
||||
return arr.concat(val);
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
|
||||
return {
|
||||
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
|
||||
sessions: getDateArray(mapData(visitors), startDate, endDate, unit),
|
||||
sessions: getDateArray(mapData(data.visitors), startDate, endDate, unit),
|
||||
};
|
||||
}, [data, startDate, endDate, unit]);
|
||||
|
||||
|
@ -58,7 +58,7 @@ export default function RealtimeDashboard({ websiteId }) {
|
||||
|
||||
const realtimeData = useMemo(() => {
|
||||
if (!currentData) {
|
||||
return { pageviews: [], sessions: [], events: [], countries: [] };
|
||||
return { pageviews: [], sessions: [], events: [], countries: [], visitors: [] };
|
||||
}
|
||||
|
||||
currentData.countries = percentFilter(
|
||||
@ -84,6 +84,13 @@ export default function RealtimeDashboard({ websiteId }) {
|
||||
.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]);
|
||||
|
||||
|
@ -5,14 +5,7 @@ import styles from './RealtimeHeader.module.css';
|
||||
|
||||
export default function RealtimeHeader({ data = {} }) {
|
||||
const { formatMessage } = useIntl();
|
||||
const { pageviews, sessions, events, countries } = data;
|
||||
|
||||
const visitors = sessions?.reduce((arr, { sessionId }) => {
|
||||
if (sessionId && !arr.includes(sessionId)) {
|
||||
return arr.concat(sessionId);
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
const { pageviews, visitors, events, countries } = data;
|
||||
|
||||
return (
|
||||
<div className={styles.header}>
|
||||
|
@ -1,11 +1,11 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { StatusLight, Icon } from 'react-basics';
|
||||
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 } from 'components/messages';
|
||||
import { getDeviceMessage, labels, messages } from 'components/messages';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import useCountryNames from 'hooks/useCountryNames';
|
||||
import { BROWSERS } from 'lib/constants';
|
||||
@ -15,12 +15,12 @@ import { safeDecodeURI } from 'next-basics';
|
||||
import Icons from 'components/icons';
|
||||
import styles from './RealtimeLog.module.css';
|
||||
|
||||
const TYPE_ALL = 'type-all';
|
||||
const TYPE_PAGEVIEW = 'type-pageview';
|
||||
const TYPE_SESSION = 'type-session';
|
||||
const TYPE_EVENT = 'type-event';
|
||||
const TYPE_ALL = 'all';
|
||||
const TYPE_PAGEVIEW = 'pageview';
|
||||
const TYPE_SESSION = 'session';
|
||||
const TYPE_EVENT = 'event';
|
||||
|
||||
const TYPE_ICONS = {
|
||||
const icons = {
|
||||
[TYPE_PAGEVIEW]: <Icons.Eye />,
|
||||
[TYPE_SESSION]: <Icons.Visitor />,
|
||||
[TYPE_EVENT]: <Icons.Bolt />,
|
||||
@ -32,30 +32,6 @@ export default function RealtimeLog({ data, websiteDomain }) {
|
||||
const countryNames = useCountryNames(locale);
|
||||
const [filter, setFilter] = useState(TYPE_ALL);
|
||||
|
||||
const logs = useMemo(() => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
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(() => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return data.sessions.reduce((obj, { sessionId, sessionUuid }) => {
|
||||
obj[sessionId] = sessionUuid;
|
||||
return obj;
|
||||
}, {});
|
||||
}, [data]);
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: formatMessage(labels.all),
|
||||
@ -66,7 +42,7 @@ export default function RealtimeLog({ data, websiteDomain }) {
|
||||
key: TYPE_PAGEVIEW,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.sessions),
|
||||
label: formatMessage(labels.visitors),
|
||||
key: TYPE_SESSION,
|
||||
},
|
||||
{
|
||||
@ -75,42 +51,41 @@ export default function RealtimeLog({ data, websiteDomain }) {
|
||||
},
|
||||
];
|
||||
|
||||
function getType({ pageviewId, sessionId, eventId }) {
|
||||
if (eventId) {
|
||||
return TYPE_EVENT;
|
||||
}
|
||||
if (pageviewId) {
|
||||
return TYPE_PAGEVIEW;
|
||||
}
|
||||
if (sessionId) {
|
||||
return TYPE_SESSION;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const getTime = ({ createdAt }) => dateFormat(new Date(createdAt), 'pp', locale);
|
||||
|
||||
function getIcon(row) {
|
||||
return TYPE_ICONS[getType(row)];
|
||||
}
|
||||
const getColor = ({ sessionId }) => stringToColor(sessionId);
|
||||
|
||||
function getDetail({
|
||||
eventName,
|
||||
pageviewId,
|
||||
sessionId,
|
||||
url,
|
||||
browser,
|
||||
os,
|
||||
country,
|
||||
device,
|
||||
websiteId,
|
||||
}) {
|
||||
if (eventName) {
|
||||
return <div>{eventName}</div>;
|
||||
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 (pageviewId) {
|
||||
|
||||
if (__type === TYPE_PAGEVIEW) {
|
||||
return (
|
||||
<a
|
||||
className={styles.link}
|
||||
href={`//${websiteDomain}${url}`}
|
||||
className={styles.link}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
@ -118,11 +93,11 @@ export default function RealtimeLog({ data, websiteDomain }) {
|
||||
</a>
|
||||
);
|
||||
}
|
||||
if (sessionId) {
|
||||
|
||||
if (__type === TYPE_SESSION) {
|
||||
return (
|
||||
<FormattedMessage
|
||||
id="message.log.visitor"
|
||||
defaultMessage="Visitor from {country} using {browser} on {os} {device}"
|
||||
{...messages.visitorLog}
|
||||
values={{
|
||||
country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
|
||||
browser: <b>{BROWSERS[browser]}</b>,
|
||||
@ -132,17 +107,7 @@ export default function RealtimeLog({ data, websiteDomain }) {
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getTime({ createdAt }) {
|
||||
return dateFormat(new Date(createdAt), 'pp', locale);
|
||||
}
|
||||
|
||||
function getColor(row) {
|
||||
const { sessionId } = row;
|
||||
|
||||
return stringToColor(uuids[sessionId] || `${sessionId}}`);
|
||||
}
|
||||
};
|
||||
|
||||
const Row = ({ index, style }) => {
|
||||
const row = logs[index];
|
||||
@ -153,19 +118,32 @@ export default function RealtimeLog({ data, websiteDomain }) {
|
||||
</div>
|
||||
<div className={styles.time}>{getTime(row)}</div>
|
||||
<div className={styles.detail}>
|
||||
<Icon className={styles.icon} icon={getIcon(row)} />
|
||||
{getDetail(row)}
|
||||
<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}>
|
||||
<FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
|
||||
</div>
|
||||
<div className={styles.header}>{formatMessage(labels.logs)}</div>
|
||||
<div className={styles.body}>
|
||||
{logs?.length === 0 && <NoData />}
|
||||
{logs?.length > 0 && (
|
||||
|
@ -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;
|
||||
|
@ -14,15 +14,15 @@ export async function getRealtimeData(websiteId, time) {
|
||||
return data.map(props => ({
|
||||
...props,
|
||||
__id: md5(id, ...Object.values(props)),
|
||||
timestamp: props.timestamp * 1000,
|
||||
timestampCompare: new Date(props.createdAt).getTime(),
|
||||
__type: id,
|
||||
timestamp: props.timestamp ? props.timestamp * 1000 : new Date(props.createdAt).getTime(),
|
||||
}));
|
||||
};
|
||||
|
||||
return {
|
||||
pageviews: decorate('pageviews', pageviews),
|
||||
sessions: decorate('sessions', sessions),
|
||||
events: decorate('events', events),
|
||||
pageviews: decorate('pageview', pageviews),
|
||||
sessions: decorate('session', sessions),
|
||||
events: decorate('event', events),
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user