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

Added filter buttons for realtime.

Browse source
This commit is contained in:
Mike Cao 2020-10-12 16:31:51 -07:00
parent 5a73c224b7
commit f1624780ee
13 changed files with 194 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/metrics/RealtimeLog.js
View file

@ -1,10 +1,12 @@
import React, { useMemo } from 'react';
import React, { useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { FixedSizeList } from 'react-window';
import firstBy from 'thenby';
import { format } from 'date-fns';
import Icon from 'components/common/Icon';
import Tag from 'components/common/Tag';
import Dot from 'components/common/Dot';
import FilterButtons from 'components/common/FilterButtons';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { BROWSERS } from 'lib/constants';
@ -13,11 +15,11 @@ import Visitor from 'assets/visitor.svg';
import Eye from 'assets/eye.svg';
import { stringToColor } from 'lib/format';
import styles from './RealtimeLog.module.css';
import Dot from '../common/Dot';
const TYPE_PAGEVIEW = 0;
const TYPE_SESSION = 1;
const TYPE_EVENT = 2;
const TYPE_ALL = 0;
const TYPE_PAGEVIEW = 1;
const TYPE_SESSION = 2;
const TYPE_EVENT = 3;
const TYPE_ICONS = {
[TYPE_PAGEVIEW]: <Eye />,
@ -28,11 +30,16 @@ const TYPE_ICONS = {
export default function RealtimeLog({ data, websites }) {
const [locale] = useLocale();
const countryNames = useCountryNames(locale);
const [filter, setFilter] = useState(TYPE_ALL);
const logs = useMemo(() => {
const { pageviews, sessions, events } = data;
return [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
}, [data]);
const logs = [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
if (filter) {
return logs.filter(row => getType(row) === filter);
}
return logs;
}, [data, filter]);
const uuids = useMemo(() => {
return data.sessions.reduce((obj, { session_id, session_uuid }) => {
@ -41,6 +48,25 @@ export default function RealtimeLog({ data, websites }) {
}, {});
}, [data]);
const buttons = [
{
label: <FormattedMessage id="label.all" defaultMessage="All" />,
value: TYPE_ALL,
},
{
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
value: TYPE_PAGEVIEW,
},
{
label: <FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />,
value: TYPE_SESSION,
},
{
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: TYPE_EVENT,
},
];
function getType({ view_id, session_id, event_id }) {
if (event_id) {
return TYPE_EVENT;
@ -88,7 +114,12 @@ export default function RealtimeLog({ data, websites }) {
<FormattedMessage
id="message.log.visitor"
defaultMessage="Visitor from {country} using {browser} on {os} {device}"
values={{ country: countryNames[country], browser: BROWSERS[browser], os, device }}
values={{
country: <b>{countryNames[country]}</b>,
browser: BROWSERS[browser],
os,
device,
}}
/>
);
}
@ -123,6 +154,7 @@ export default function RealtimeLog({ data, websites }) {
return (
<div className={styles.table}>
<FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
<div className={styles.header}>
<FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
</div>