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

Updated expanded view. Some style fixes.

Browse source
This commit is contained in:
Mike Cao 2025-08-23 03:05:21 -07:00
parent c8fe93dd9d
commit 08f9adaddf
13 changed files with 164 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

191
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -1,7 +1,7 @@
import Link from 'next/link';
import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
import { Grid, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
import { SideMenu } from '@/components/common/SideMenu';
export function WebsiteExpandedView({
websiteId,
@ -18,94 +18,131 @@ export function WebsiteExpandedView({
const items = [
{
id: 'path',
label: formatMessage(labels.pages),
path: updateParams({ view: 'path' }),
items: [
{
id: 'path',
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
},
{
id: 'entry',
label: formatMessage(labels.entry),
path: updateParams({ view: 'entry' }),
},
{
id: 'exit',
label: formatMessage(labels.exit),
path: updateParams({ view: 'exit' }),
},
{
id: 'title',
label: formatMessage(labels.title),
path: updateParams({ view: 'title' }),
},
{
id: 'query',
label: formatMessage(labels.query),
path: updateParams({ view: 'query' }),
},
],
},
{
id: 'referrer',
label: formatMessage(labels.referrers),
path: updateParams({ view: 'referrer' }),
label: formatMessage(labels.sources),
items: [
{
id: 'referrer',
label: formatMessage(labels.referrers),
path: updateParams({ view: 'referrer' }),
},
{
id: 'channel',
label: formatMessage(labels.channels),
path: updateParams({ view: 'channel' }),
},
{
id: 'domain',
label: formatMessage(labels.domain),
path: updateParams({ view: 'domain' }),
},
],
},
{
id: 'channel',
label: formatMessage(labels.channels),
path: updateParams({ view: 'channel' }),
label: formatMessage(labels.location),
items: [
{
id: 'country',
label: formatMessage(labels.countries),
path: updateParams({ view: 'country' }),
},
{
id: 'region',
label: formatMessage(labels.regions),
path: updateParams({ view: 'region' }),
},
{
id: 'city',
label: formatMessage(labels.cities),
path: updateParams({ view: 'city' }),
},
],
},
{
id: 'browser',
label: formatMessage(labels.browsers),
path: updateParams({ view: 'browser' }),
label: formatMessage(labels.environment),
items: [
{
id: 'browser',
label: formatMessage(labels.browsers),
path: updateParams({ view: 'browser' }),
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
},
{
id: 'device',
label: formatMessage(labels.devices),
path: updateParams({ view: 'device' }),
},
{
id: 'language',
label: formatMessage(labels.languages),
path: updateParams({ view: 'language' }),
},
{
id: 'screen',
label: formatMessage(labels.screens),
path: updateParams({ view: 'screen' }),
},
],
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
},
{
id: 'device',
label: formatMessage(labels.devices),
path: updateParams({ view: 'device' }),
},
{
id: 'country',
label: formatMessage(labels.countries),
path: updateParams({ view: 'country' }),
},
{
id: 'region',
label: formatMessage(labels.regions),
path: updateParams({ view: 'region' }),
},
{
id: 'city',
label: formatMessage(labels.cities),
path: updateParams({ view: 'city' }),
},
{
id: 'language',
label: formatMessage(labels.languages),
path: updateParams({ view: 'language' }),
},
{
id: 'screen',
label: formatMessage(labels.screens),
path: updateParams({ view: 'screen' }),
},
{
id: 'event',
label: formatMessage(labels.events),
path: updateParams({ view: 'event' }),
},
{
id: 'query',
label: formatMessage(labels.queryParameters),
path: updateParams({ view: 'query' }),
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
},
{
id: 'tag',
label: formatMessage(labels.tags),
path: updateParams({ view: 'tag' }),
label: formatMessage(labels.other),
items: [
{
id: 'event',
label: formatMessage(labels.events),
path: updateParams({ view: 'event' }),
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
},
{
id: 'tag',
label: formatMessage(labels.tags),
path: updateParams({ view: 'tag' }),
},
],
},
];
return (
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" width="200px" border="right" paddingRight="3">
<NavMenu position="sticky" top="0">
{items.map(({ id, label, path }) => {
return (
<Link key={id} href={path}>
<NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
</Link>
);
})}
</NavMenu>
<Column gap="6" border="right" paddingRight="3">
<SideMenu items={items} selectedKey={view} />
</Column>
<Column overflow="hidden">
<MetricsExpandedTable
@ -113,8 +150,6 @@ export function WebsiteExpandedView({
type={view}
websiteId={websiteId}
onClose={onClose}
allowSearch
allowDownload
/>
</Column>
</Grid>