Updated log merge logic to prevent duplicates.

This commit is contained in:
Mike Cao 2020-10-09 10:48:47 -07:00
parent 8e0ea48c87
commit 5dd3110fbf
5 changed files with 44 additions and 17 deletions

View File

@ -21,6 +21,7 @@
} }
.row { .row {
display: flex;
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--gray300);
padding: 10px 0; padding: 10px 0;
} }

View File

@ -103,7 +103,7 @@ export default function RealtimeLog({ data, websites }) {
return ( return (
<FormattedMessage <FormattedMessage
id="message.log.visitor" id="message.log.visitor"
defaultMessage="A visitor from {country} using {browser} on {os} {device}" defaultMessage="Visitor from {country} using {browser} on {os} {device}"
values={{ country: countryNames[country], browser: BROWSERS[browser], os, device }} values={{ country: countryNames[country], browser: BROWSERS[browser], os, device }}
/> />
); );

View File

@ -11,20 +11,22 @@ import RealtimeLog from '../metrics/RealtimeLog';
const REALTIME_RANGE = 30; const REALTIME_RANGE = 30;
const REALTIME_INTERVAL = 5000; const REALTIME_INTERVAL = 5000;
function filterTime(data, time) { function mergeData(state, data, time) {
return data.filter(({ created_at }) => new Date(created_at).getTime() >= time); const ids = state.map(({ __id }) => __id);
return state
.concat(data.filter(({ __id }) => !ids.includes(__id)))
.filter(({ created_at }) => new Date(created_at).getTime() >= time);
} }
export default function RealtimeDashboard() { export default function RealtimeDashboard() {
const [data, setData] = useState(); const [data, setData] = useState();
const [website, setWebsite] = useState(); const [website, setWebsite] = useState();
const [lastTime, setLastTime] = useState();
const { data: init, loading } = useFetch('/api/realtime', { type: 'init' }); const { data: init, loading } = useFetch('/api/realtime', { type: 'init' });
const { data: updates } = useFetch( const { data: updates } = useFetch(
'/api/realtime', '/api/realtime',
{ type: 'update', start_at: lastTime }, { type: 'update', start_at: data?.timestamp },
{ {
disabled: !init?.token, disabled: !init?.token || !data,
interval: REALTIME_INTERVAL, interval: REALTIME_INTERVAL,
headers: { 'x-umami-token': init?.token }, headers: { 'x-umami-token': init?.token },
}, },
@ -34,15 +36,15 @@ export default function RealtimeDashboard() {
if (init && !data) { if (init && !data) {
setData(init.data); setData(init.data);
} else if (updates) { } else if (updates) {
const { pageviews, sessions, events } = updates; const { pageviews, sessions, events, timestamp } = updates;
const minTime = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime(); const minTime = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
setData(state => ({ setData(state => ({
pageviews: filterTime(state.pageviews.concat(pageviews), minTime), pageviews: mergeData(state.pageviews, pageviews, minTime),
sessions: filterTime(state.sessions.concat(sessions), minTime), sessions: mergeData(state.sessions, sessions, minTime),
events: filterTime(state.events.concat(events), minTime), events: mergeData(state.events, events, minTime),
timestamp,
})); }));
} }
setLastTime(Date.now());
}, [init, updates]); }, [init, updates]);
if (!init || loading || !data) { if (!init || loading || !data) {

View File

@ -6,6 +6,8 @@ import { createToken } from 'lib/crypto';
import { getIpAddress } from '../../lib/request'; import { getIpAddress } from '../../lib/request';
export default async (req, res) => { export default async (req, res) => {
await useCors(req, res);
if (isBot(req.headers['user-agent'])) { if (isBot(req.headers['user-agent'])) {
return ok(res); return ok(res);
} }
@ -19,7 +21,6 @@ export default async (req, res) => {
} }
} }
await useCors(req, res);
await useSession(req, res); await useSession(req, res);
const { type, payload } = req.body; const { type, payload } = req.body;

View File

@ -8,11 +8,30 @@ export default async (req, res) => {
await useAuth(req, res); await useAuth(req, res);
async function getData(websites, time) { async function getData(websites, time) {
return Promise.all([ const [pageviews, sessions, events] = await Promise.all([
getPageviews(websites, time), getPageviews(websites, time),
getSessions(websites, time), getSessions(websites, time),
getEvents(websites, time), getEvents(websites, time),
]); ]);
return {
pageviews: pageviews.map(({ view_id, ...props }) => ({
__id: `p${view_id}`,
view_id,
...props,
})),
sessions: sessions.map(({ session_id, ...props }) => ({
__id: `s${session_id}`,
session_id,
...props,
})),
events: events.map(({ event_id, ...props }) => ({
__id: `e${event_id}`,
event_id,
...props,
})),
timestamp: Date.now(),
};
} }
if (req.method === 'GET') { if (req.method === 'GET') {
@ -22,10 +41,14 @@ export default async (req, res) => {
if (type === 'init') { if (type === 'init') {
const websites = await getUserWebsites(user_id); const websites = await getUserWebsites(user_id);
const ids = websites.map(({ website_id }) => website_id); const ids = websites.map(({ website_id }) => website_id);
const [pageviews, sessions, events] = await getData(ids, subMinutes(new Date(), 30));
const token = await createToken({ websites: ids }); const token = await createToken({ websites: ids });
const data = await getData(ids, subMinutes(new Date(), 30));
return ok(res, { websites, token, data: { pageviews, sessions, events } }); return ok(res, {
websites,
token,
data,
});
} }
if (type === 'update') { if (type === 'update') {
@ -37,9 +60,9 @@ export default async (req, res) => {
const { websites } = await parseToken(token); const { websites } = await parseToken(token);
const [pageviews, sessions, events] = await getData(websites, new Date(+start_at)); const data = await getData(websites, new Date(+start_at));
return ok(res, { pageviews, sessions, events }); return ok(res, data);
} }
return badRequest(res); return badRequest(res);