umami/components/metrics/RealtimeLog.js

173 lines
4.5 KiB
JavaScript
Raw Normal View History

2020-10-13 01:31:51 +02:00
import React, { useMemo, useState } from 'react';
2020-10-14 23:16:00 +02:00
import { FormattedMessage, useIntl } from 'react-intl';
2020-10-09 13:21:59 +02:00
import { FixedSizeList } from 'react-window';
2020-10-09 11:56:15 +02:00
import firstBy from 'thenby';
import { format } from 'date-fns';
2020-10-09 13:21:59 +02:00
import Icon from 'components/common/Icon';
2020-10-09 21:39:03 +02:00
import Tag from 'components/common/Tag';
2020-10-13 01:31:51 +02:00
import Dot from 'components/common/Dot';
import FilterButtons from 'components/common/FilterButtons';
2020-10-14 23:16:00 +02:00
import { devices } from 'components/messages';
2020-10-09 13:21:59 +02:00
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';
2020-10-09 11:56:15 +02:00
import styles from './RealtimeLog.module.css';
2020-10-14 23:16:00 +02:00
import NoData from '../common/NoData';
2020-10-09 11:56:15 +02:00
2020-10-13 01:31:51 +02:00
const TYPE_ALL = 0;
const TYPE_PAGEVIEW = 1;
const TYPE_SESSION = 2;
const TYPE_EVENT = 3;
2020-10-10 02:58:27 +02:00
const TYPE_ICONS = {
[TYPE_PAGEVIEW]: <Eye />,
[TYPE_SESSION]: <Visitor />,
[TYPE_EVENT]: <Bolt />,
};
2020-10-09 11:56:15 +02:00
export default function RealtimeLog({ data, websites }) {
2020-10-14 23:16:00 +02:00
const intl = useIntl();
2020-10-09 11:56:15 +02:00
const [locale] = useLocale();
const countryNames = useCountryNames(locale);
2020-10-13 01:31:51 +02:00
const [filter, setFilter] = useState(TYPE_ALL);
2020-10-09 11:56:15 +02:00
const logs = useMemo(() => {
const { pageviews, sessions, events } = data;
2020-10-13 01:31:51 +02:00
const logs = [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
if (filter) {
return logs.filter(row => getType(row) === filter);
}
return logs;
}, [data, filter]);
2020-10-09 11:56:15 +02:00
const uuids = useMemo(() => {
return data.sessions.reduce((obj, { session_id, session_uuid }) => {
obj[session_id] = session_uuid;
return obj;
}, {});
}, [data]);
2020-10-13 01:31:51 +02:00
const buttons = [
{
label: <FormattedMessage id="label.all" defaultMessage="All" />,
value: TYPE_ALL,
},
{
2020-10-14 03:24:27 +02:00
label: <FormattedMessage id="metrics.views" defaultMessage="Views" />,
2020-10-13 01:31:51 +02:00
value: TYPE_PAGEVIEW,
},
{
label: <FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />,
value: TYPE_SESSION,
},
{
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: TYPE_EVENT,
},
];
2020-10-09 11:56:15 +02:00
function getType({ view_id, session_id, event_id }) {
if (event_id) {
2020-10-10 02:58:27 +02:00
return TYPE_EVENT;
2020-10-09 11:56:15 +02:00
}
if (view_id) {
2020-10-10 02:58:27 +02:00
return TYPE_PAGEVIEW;
2020-10-09 11:56:15 +02:00
}
if (session_id) {
2020-10-10 02:58:27 +02:00
return TYPE_SESSION;
2020-10-09 13:21:59 +02:00
}
return null;
}
2020-10-10 02:58:27 +02:00
function getIcon(row) {
return TYPE_ICONS[getType(row)];
2020-10-09 11:56:15 +02:00
}
function getWebsite({ website_id }) {
return websites.find(n => n.website_id === website_id)?.name;
}
2020-10-10 02:58:27 +02:00
function getDetail({
2020-10-09 11:56:15 +02:00
event_type,
event_value,
view_id,
session_id,
url,
browser,
os,
country,
device,
}) {
if (event_type) {
2020-10-09 13:21:59 +02:00
return (
<div>
2020-10-09 21:39:03 +02:00
<Tag>{event_type}</Tag> {event_value}
2020-10-09 13:21:59 +02:00
</div>
);
2020-10-09 11:56:15 +02:00
}
if (view_id) {
return url;
}
if (session_id) {
return (
<FormattedMessage
id="message.log.visitor"
defaultMessage="Visitor from {country} using {browser} on {os} {device}"
2020-10-13 01:31:51 +02:00
values={{
country: <b>{countryNames[country]}</b>,
2020-10-14 23:16:00 +02:00
browser: <b>{BROWSERS[browser]}</b>,
os: <b>{os}</b>,
device: <b>{intl.formatMessage(devices[device])?.toLowerCase()}</b>,
2020-10-13 01:31:51 +02:00
}}
2020-10-09 11:56:15 +02:00
/>
);
}
}
2020-10-11 07:36:55 +02:00
function getTime({ created_at }) {
return format(new Date(created_at), 'h:mm:ss');
}
function getColor(row) {
const { session_id } = row;
return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`);
}
2020-10-09 13:21:59 +02:00
const Row = ({ index, style }) => {
2020-10-10 10:16:28 +02:00
const row = logs[index];
2020-10-09 13:21:59 +02:00
return (
2020-10-10 10:16:28 +02:00
<div className={styles.row} style={style}>
<div>
2020-10-11 07:36:55 +02:00
<Dot color={getColor(row)} />
</div>
2020-10-11 07:36:55 +02:00
<div className={styles.time}>{getTime(row)}</div>
2020-10-10 10:16:28 +02:00
<div className={styles.detail}>
<Icon className={styles.icon} icon={getIcon(row)} />
{getDetail(row)}
</div>
2020-10-10 10:28:26 +02:00
<div className={styles.website}>{getWebsite(row)}</div>
2020-10-09 13:21:59 +02:00
</div>
);
};
2020-10-09 11:56:15 +02:00
return (
2020-10-10 10:16:28 +02:00
<div className={styles.table}>
2020-10-13 01:31:51 +02:00
<FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
2020-10-10 05:37:24 +02:00
<div className={styles.header}>
<FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
</div>
2020-10-10 10:16:28 +02:00
<div className={styles.body}>
2020-10-14 23:16:00 +02:00
{logs?.length === 0 && <NoData />}
2020-10-10 10:16:28 +02:00
<FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
2020-10-09 13:21:59 +02:00
{Row}
</FixedSizeList>
2020-10-10 10:16:28 +02:00
</div>
2020-10-09 11:56:15 +02:00
</div>
);
}