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

Updated session profile page. Added TypeIcon component. Added useRegionNames hook.

Browse source
This commit is contained in:
Mike Cao 2024-07-29 01:38:36 -07:00
parent ac60d08ee5
commit c3c3b46ef6
313 changed files with 197 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -1,17 +1,62 @@
import Profile from 'components/common/Profile';
import { format } from 'date-fns';
import { useFormat, useLocale, useMessages, useRegionNames } from 'components/hooks';
import TypeIcon from 'components/common/TypeIcon';
import { Icon, CopyIcon } from 'react-basics';
import Icons from 'components/icons';
import styles from './SessionInfo.module.css';
export default function SessionInfo({ data }) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { getRegionName } = useRegionNames(locale);
return (
<h1>
<Profile seed={data?.id} />
<div className={styles.info}>
<dl>
<dt>ID</dt>
<dd>{data?.id}</dd>
<dt>Country</dt>
<dd>{data?.country}</dd>
<dt>City</dt>
<dd>{data?.city}</dd>
<dd>
{data?.id} <CopyIcon value={data?.id} />
</dd>
<dt>{formatMessage(labels.firstSeen)}</dt>
<dd>{format(new Date(data?.firstAt), 'PPPpp')}</dd>
<dt>{formatMessage(labels.lastSeen)}</dt>
<dd>{format(new Date(data?.lastAt), 'PPPpp')}</dd>
<dt>{formatMessage(labels.country)}</dt>
<dd>
<TypeIcon type="country" value={data?.country} />
{formatValue(data?.country, 'country')}
</dd>
<dt>{formatMessage(labels.region)}</dt>
<dd>
<Icon>
<Icons.Location />
</Icon>
{getRegionName(data?.subdivision1)}
</dd>
<dt>{formatMessage(labels.city)}</dt>
<dd>
<Icon>
<Icons.Location />
</Icon>
{data?.city}
</dd>
<dt>{formatMessage(labels.os)}</dt>
<dd>
<TypeIcon type="os" value={data?.os?.toLowerCase()?.replaceAll(/\W/g, '-')} />
{formatValue(data?.os, 'os')}
</dd>
<dt>{formatMessage(labels.device)}</dt>
<dd>
<TypeIcon type="device" value={data?.device} />
{formatValue(data?.device, 'device')}
</dd>
<dt>{formatMessage(labels.browser)}</dt>
<dd>
<TypeIcon type="browser" value={data?.browser} />
{formatValue(data?.browser, 'browser')}
</dd>
</dl>
</h1>
</div>
);
}