mirror of
https://github.com/umami-software/umami.git
synced 2025-12-06 01:18:00 +01:00
Compare commits
28 commits
a6d4519a98
...
13ab84d50e
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
13ab84d50e | ||
|
|
a1d6204373 | ||
|
|
49e1582c28 | ||
|
|
64a6379c3c | ||
|
|
f3e246c64b | ||
|
|
9230f3cb7b | ||
|
|
f30724629c | ||
|
|
c44f6f8c9c | ||
|
|
bf548c5aca | ||
|
|
227201a73c | ||
|
|
1879c161ee | ||
|
|
6ba9c1c40c | ||
|
|
de6515139e | ||
|
|
e3ca002d77 | ||
|
|
8119dae3c3 | ||
|
|
6ee93f7ac9 | ||
|
|
3e9ca8761e | ||
|
|
d2f512cae7 | ||
|
|
df3ca02e8b | ||
|
|
a90b788138 | ||
|
|
dd6556968c | ||
|
|
04a05bbf26 | ||
|
|
437c9603db | ||
|
|
03ed5349f4 | ||
|
|
4272bb4c4d | ||
|
|
6135ef9dd2 | ||
|
|
b5795a8b3f | ||
|
|
98092004b6 |
20 changed files with 213 additions and 221 deletions
58
.github/workflows/cd-manual.yml
vendored
58
.github/workflows/cd-manual.yml
vendored
|
|
@ -1,58 +0,0 @@
|
||||||
name: Create docker images (manual)
|
|
||||||
|
|
||||||
on:
|
|
||||||
workflow_dispatch:
|
|
||||||
inputs:
|
|
||||||
version:
|
|
||||||
type: string
|
|
||||||
description: Version
|
|
||||||
required: true
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
name: Build, push, and deploy
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
db-type: [postgresql]
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v3
|
|
||||||
|
|
||||||
- name: Extract version parts from input
|
|
||||||
id: extract_version
|
|
||||||
run: |
|
|
||||||
echo "version=$(echo ${{ github.event.inputs.version }})" >> $GITHUB_ENV
|
|
||||||
echo "major=$(echo ${{ github.event.inputs.version }} | cut -d. -f1)" >> $GITHUB_ENV
|
|
||||||
echo "minor=$(echo ${{ github.event.inputs.version }} | cut -d. -f2)" >> $GITHUB_ENV
|
|
||||||
|
|
||||||
- name: Generate tags
|
|
||||||
id: generate_tags
|
|
||||||
run: |
|
|
||||||
echo "tag_major=$(echo ${{ matrix.db-type }}-${{ env.major }})" >> $GITHUB_ENV
|
|
||||||
echo "tag_minor=$(echo ${{ matrix.db-type }}-${{ env.major }}.${{ env.minor }})" >> $GITHUB_ENV
|
|
||||||
echo "tag_patch=$(echo ${{ matrix.db-type }}-${{ env.version }})" >> $GITHUB_ENV
|
|
||||||
echo "tag_latest=$(echo ${{ matrix.db-type }}-latest)" >> $GITHUB_ENV
|
|
||||||
|
|
||||||
- uses: mr-smithers-excellent/docker-build-push@v6
|
|
||||||
name: Build & push Docker image to ghcr.io for ${{ matrix.db-type }}
|
|
||||||
with:
|
|
||||||
image: umami
|
|
||||||
tags: ${{ env.tag_major }}, ${{ env.tag_minor }}, ${{ env.tag_patch }}, ${{ env.tag_latest }}
|
|
||||||
buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
|
|
||||||
registry: ghcr.io
|
|
||||||
multiPlatform: true
|
|
||||||
platform: linux/amd64,linux/arm64
|
|
||||||
username: ${{ github.actor }}
|
|
||||||
password: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
|
|
||||||
- uses: mr-smithers-excellent/docker-build-push@v6
|
|
||||||
name: Build & push Docker image to docker.io for ${{ matrix.db-type }}
|
|
||||||
with:
|
|
||||||
image: umamisoftware/umami
|
|
||||||
tags: ${{ env.tag_major }}, ${{ env.tag_minor }}, ${{ env.tag_patch }}, ${{ env.tag_latest }}
|
|
||||||
buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
|
|
||||||
registry: docker.io
|
|
||||||
username: ${{ secrets.DOCKER_USERNAME }}
|
|
||||||
password: ${{ secrets.DOCKER_PASSWORD }}
|
|
||||||
112
.github/workflows/cd.yml
vendored
112
.github/workflows/cd.yml
vendored
|
|
@ -5,6 +5,11 @@ on:
|
||||||
tags:
|
tags:
|
||||||
- 'v*.*.*'
|
- 'v*.*.*'
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
inputs:
|
||||||
|
version:
|
||||||
|
description: 'Optional image version (e.g. 3.0.0, v3.0.0, or 3.0.0-beta.1)'
|
||||||
|
required: false
|
||||||
|
default: ''
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
build:
|
build:
|
||||||
|
|
@ -13,22 +18,20 @@ jobs:
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
packages: write
|
packages: write
|
||||||
id-token: write
|
|
||||||
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
db-type: [postgresql]
|
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v5
|
- uses: actions/checkout@v5
|
||||||
|
|
||||||
# Install cosign (for image signing)
|
|
||||||
- name: Install cosign
|
|
||||||
uses: sigstore/cosign-installer@v3
|
|
||||||
|
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
uses: docker/setup-buildx-action@v3
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
- name: Log into GHCR
|
||||||
|
uses: docker/login-action@v3
|
||||||
|
with:
|
||||||
|
registry: ghcr.io
|
||||||
|
username: ${{ github.actor }}
|
||||||
|
password: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
||||||
- name: Log into Docker Hub
|
- name: Log into Docker Hub
|
||||||
if: github.repository == 'umami-software/umami'
|
if: github.repository == 'umami-software/umami'
|
||||||
uses: docker/login-action@v3
|
uses: docker/login-action@v3
|
||||||
|
|
@ -37,44 +40,61 @@ jobs:
|
||||||
username: ${{ secrets.DOCKER_USERNAME }}
|
username: ${{ secrets.DOCKER_USERNAME }}
|
||||||
password: ${{ secrets.DOCKER_PASSWORD }}
|
password: ${{ secrets.DOCKER_PASSWORD }}
|
||||||
|
|
||||||
- name: Log into GHCR
|
- name: Compute version tags
|
||||||
uses: docker/login-action@v3
|
id: compute
|
||||||
with:
|
run: |
|
||||||
registry: ghcr.io
|
INPUT="${{ github.event.inputs.version }}"
|
||||||
username: ${{ github.actor }}
|
REF_TYPE="${{ github.ref_type }}"
|
||||||
password: ${{ secrets.GITHUB_TOKEN }}
|
REF_NAME="${{ github.ref_name }}"
|
||||||
|
|
||||||
- name: Extract Docker metadata
|
# Determine version source
|
||||||
id: meta
|
if [[ -n "$INPUT" ]]; then
|
||||||
uses: docker/metadata-action@v5
|
VERSION="${INPUT#v}"
|
||||||
with:
|
elif [[ "$REF_TYPE" == "tag" ]]; then
|
||||||
images: |
|
VERSION="${REF_NAME#v}"
|
||||||
umamisoftware/umami,enable=${{ github.repository == 'umami-software/umami' }}
|
else
|
||||||
ghcr.io/${{ github.repository }}
|
VERSION=""
|
||||||
flavor: |
|
fi
|
||||||
latest=auto
|
|
||||||
prefix=${{ matrix.db-type }}-
|
TAGS=""
|
||||||
tags: |
|
|
||||||
type=semver,pattern={{version}}
|
if [[ -n "$VERSION" ]]; then
|
||||||
type=semver,pattern={{major}}.{{minor}}
|
MAJOR=$(echo "$VERSION" | cut -d. -f1)
|
||||||
type=semver,pattern={{major}}
|
MINOR=$(echo "$VERSION" | cut -d. -f2)
|
||||||
|
|
||||||
|
if [[ "$VERSION" == *-* ]]; then
|
||||||
|
# prerelease: only version tag
|
||||||
|
TAGS="$VERSION"
|
||||||
|
else
|
||||||
|
# stable release: version + hierarchy + latest
|
||||||
|
TAGS="$VERSION,${MAJOR}.${MINOR},${MAJOR},postgresql-latest,latest"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
# Non-tag build (e.g. from main branch)
|
||||||
|
TAGS="${REF_NAME}"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "tags=$TAGS" >> $GITHUB_OUTPUT
|
||||||
|
echo "Computed tags: $TAGS"
|
||||||
|
|
||||||
- name: Build and push Docker image
|
- name: Build and push Docker image
|
||||||
id: build-and-push
|
run: |
|
||||||
uses: docker/build-push-action@v6
|
TAGS="${{ steps.compute.outputs.tags }}"
|
||||||
with:
|
|
||||||
context: .
|
|
||||||
platforms: linux/amd64,linux/arm64
|
|
||||||
build-args: DATABASE_TYPE=${{ matrix.db-type }}
|
|
||||||
push: true
|
|
||||||
tags: ${{ steps.meta.outputs.tags }}
|
|
||||||
labels: ${{ steps.meta.outputs.labels }}
|
|
||||||
cache-from: type=gha
|
|
||||||
cache-to: type=gha,mode=max
|
|
||||||
|
|
||||||
# Sign the published image digest
|
# Set image targets conditionally
|
||||||
- name: Sign the published Docker image
|
if [[ "${{ github.repository }}" == "umami-software/umami" ]]; then
|
||||||
env:
|
IMAGES=("umamisoftware/umami" "ghcr.io/${{ github.repository }}")
|
||||||
TAGS: ${{ steps.meta.outputs.tags }}
|
else
|
||||||
DIGEST: ${{ steps.build-and-push.outputs.digest }}
|
IMAGES=("ghcr.io/${{ github.repository }}")
|
||||||
run: echo "${TAGS}" | xargs -I {} cosign sign --yes "{}@${DIGEST}"
|
fi
|
||||||
|
|
||||||
|
for IMAGE in "${IMAGES[@]}"; do
|
||||||
|
echo "Building and pushing $IMAGE with tags: $TAGS"
|
||||||
|
docker buildx build \
|
||||||
|
--platform linux/amd64,linux/arm64 \
|
||||||
|
--push \
|
||||||
|
$(echo "$TAGS" | tr ',' '\n' | sed "s|^|--tag ${IMAGE}:|") \
|
||||||
|
--cache-from type=gha \
|
||||||
|
--cache-to type=gha,mode=max \
|
||||||
|
.
|
||||||
|
done
|
||||||
|
|
|
||||||
22
.github/workflows/delete-untagged-images.yml
vendored
22
.github/workflows/delete-untagged-images.yml
vendored
|
|
@ -1,22 +0,0 @@
|
||||||
name: Delete untagged GHCR images
|
|
||||||
|
|
||||||
on:
|
|
||||||
workflow_dispatch: # Run manually from the Actions tab
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
cleanup:
|
|
||||||
name: Delete all untagged images
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
packages: write
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Delete untagged GHCR images
|
|
||||||
uses: actions/delete-package-versions@v5
|
|
||||||
with:
|
|
||||||
package-name: "umami" # 👈 change if your GHCR package name differs
|
|
||||||
package-type: "container"
|
|
||||||
delete-only-untagged-versions: true
|
|
||||||
min-versions-to-keep: 0
|
|
||||||
|
|
@ -89,7 +89,7 @@ docker compose up -d
|
||||||
Alternatively, to pull just the Umami Docker image with PostgreSQL support:
|
Alternatively, to pull just the Umami Docker image with PostgreSQL support:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
docker pull docker.umami.is/umami-software/umami:postgresql-latest
|
docker pull docker.umami.is/umami-software/umami:latest
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
services:
|
services:
|
||||||
umami:
|
umami:
|
||||||
image: ghcr.io/umami-software/umami:postgresql-latest
|
image: ghcr.io/umami-software/umami:latest
|
||||||
ports:
|
ports:
|
||||||
- "3000:3000"
|
- "3000:3000"
|
||||||
environment:
|
environment:
|
||||||
|
|
|
||||||
|
|
@ -9,18 +9,14 @@ import { MobileNav } from '@/app/(main)/MobileNav';
|
||||||
export function App({ children }) {
|
export function App({ children }) {
|
||||||
const { user, isLoading, error } = useLoginQuery();
|
const { user, isLoading, error } = useLoginQuery();
|
||||||
const config = useConfig();
|
const config = useConfig();
|
||||||
const { pathname, router } = useNavigation();
|
const { pathname } = useNavigation();
|
||||||
|
|
||||||
if (isLoading || !config) {
|
if (isLoading || !config) {
|
||||||
return <Loading placement="absolute" />;
|
return <Loading placement="absolute" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
if (process.env.cloudMode) {
|
window.location.href = `${process.env.basePath || ''}/login`;
|
||||||
window.location.href = '/login';
|
|
||||||
} else {
|
|
||||||
router.push('/login');
|
|
||||||
}
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { useEffect, useCallback, useState } from 'react';
|
import { useEffect, useCallback, useState } from 'react';
|
||||||
import { Button, AlertBanner, Flexbox } from '@umami/react-zen';
|
import { Button, AlertBanner, Column, Row } from '@umami/react-zen';
|
||||||
import { setItem } from '@/lib/storage';
|
import { setItem } from '@/lib/storage';
|
||||||
import { useVersion, checkVersion } from '@/store/version';
|
import { useVersion, checkVersion } from '@/store/version';
|
||||||
import { REPO_URL, VERSION_CHECK } from '@/lib/constants';
|
import { REPO_URL, VERSION_CHECK } from '@/lib/constants';
|
||||||
|
|
@ -47,13 +47,15 @@ export function UpdateNotice({ user, config }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flexbox justifyContent="space-between" alignItems="center">
|
<Column justifyContent="center" alignItems="center" position="fixed" top="10px" width="100%">
|
||||||
<AlertBanner title={formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}>
|
<Row width="600px">
|
||||||
<Button variant="primary" onPress={handleViewClick}>
|
<AlertBanner title={formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}>
|
||||||
{formatMessage(labels.viewDetails)}
|
<Button variant="primary" onPress={handleViewClick}>
|
||||||
</Button>
|
{formatMessage(labels.viewDetails)}
|
||||||
<Button onPress={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
|
</Button>
|
||||||
</AlertBanner>
|
<Button onPress={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
|
||||||
</Flexbox>
|
</AlertBanner>
|
||||||
|
</Row>
|
||||||
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,24 @@
|
||||||
import { DataTable, DataColumn, Row, Text, DataTableProps, IconLabel } from '@umami/react-zen';
|
import {
|
||||||
|
DataTable,
|
||||||
|
DataColumn,
|
||||||
|
Row,
|
||||||
|
Text,
|
||||||
|
DataTableProps,
|
||||||
|
IconLabel,
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
DialogTrigger,
|
||||||
|
Icon,
|
||||||
|
Popover,
|
||||||
|
} from '@umami/react-zen';
|
||||||
import { useFormat, useMessages, useNavigation } from '@/components/hooks';
|
import { useFormat, useMessages, useNavigation } from '@/components/hooks';
|
||||||
import { Avatar } from '@/components/common/Avatar';
|
import { Avatar } from '@/components/common/Avatar';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { Eye } from '@/components/icons';
|
import { Eye, FileText } from '@/components/icons';
|
||||||
import { Lightning } from '@/components/svg';
|
import { Lightning } from '@/components/svg';
|
||||||
import { DateDistance } from '@/components/common/DateDistance';
|
import { DateDistance } from '@/components/common/DateDistance';
|
||||||
import { TypeIcon } from '@/components/common/TypeIcon';
|
import { TypeIcon } from '@/components/common/TypeIcon';
|
||||||
|
import { EventData } from '@/components/metrics/EventData';
|
||||||
|
|
||||||
export function EventsTable(props: DataTableProps) {
|
export function EventsTable(props: DataTableProps) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
@ -32,6 +45,7 @@ export function EventsTable(props: DataTableProps) {
|
||||||
>
|
>
|
||||||
{row.eventName || row.urlPath}
|
{row.eventName || row.urlPath}
|
||||||
</Text>
|
</Text>
|
||||||
|
{row.hasData > 0 && <PropertiesButton websiteId={row.websiteId} eventId={row.id} />}
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|
@ -72,3 +86,22 @@ export function EventsTable(props: DataTableProps) {
|
||||||
</DataTable>
|
</DataTable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PropertiesButton = props => {
|
||||||
|
return (
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button variant="quiet">
|
||||||
|
<Row alignItems="center" gap>
|
||||||
|
<Icon>
|
||||||
|
<FileText />
|
||||||
|
</Icon>
|
||||||
|
</Row>
|
||||||
|
</Button>
|
||||||
|
<Popover placement="right">
|
||||||
|
<Dialog>
|
||||||
|
<EventData {...props} />
|
||||||
|
</Dialog>
|
||||||
|
</Popover>
|
||||||
|
</DialogTrigger>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import {
|
||||||
useCountryNames,
|
useCountryNames,
|
||||||
useLocale,
|
useLocale,
|
||||||
useMessages,
|
useMessages,
|
||||||
|
useMobile,
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useTimezone,
|
useTimezone,
|
||||||
useWebsite,
|
useWebsite,
|
||||||
|
|
@ -40,6 +41,7 @@ export function RealtimeLog({ data }: { data: any }) {
|
||||||
const { countryNames } = useCountryNames(locale);
|
const { countryNames } = useCountryNames(locale);
|
||||||
const [filter, setFilter] = useState(TYPE_ALL);
|
const [filter, setFilter] = useState(TYPE_ALL);
|
||||||
const { updateParams } = useNavigation();
|
const { updateParams } = useNavigation();
|
||||||
|
const { isPhone } = useMobile();
|
||||||
|
|
||||||
const buttons = [
|
const buttons = [
|
||||||
{
|
{
|
||||||
|
|
@ -123,12 +125,18 @@ export function RealtimeLog({ data }: { data: any }) {
|
||||||
const row = logs[index];
|
const row = logs[index];
|
||||||
return (
|
return (
|
||||||
<Row alignItems="center" style={style} gap>
|
<Row alignItems="center" style={style} gap>
|
||||||
<Link href={updateParams({ session: row.sessionId })}>
|
<Row minWidth="30px">
|
||||||
<Avatar seed={row.sessionId} size={32} />
|
<Link href={updateParams({ session: row.sessionId })}>
|
||||||
</Link>
|
<Avatar seed={row.sessionId} size={32} />
|
||||||
<Row width="100px">{getTime(row)}</Row>
|
</Link>
|
||||||
|
</Row>
|
||||||
|
<Row minWidth="100px">
|
||||||
|
<Text wrap="nowrap">{getTime(row)}</Text>
|
||||||
|
</Row>
|
||||||
<IconLabel icon={getIcon(row)}>
|
<IconLabel icon={getIcon(row)}>
|
||||||
<Text>{getDetail(row)}</Text>
|
<Text style={{ maxWidth: isPhone ? '400px' : null }} truncate>
|
||||||
|
{getDetail(row)}
|
||||||
|
</Text>
|
||||||
</IconLabel>
|
</IconLabel>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
|
|
@ -168,10 +176,22 @@ export function RealtimeLog({ data }: { data: any }) {
|
||||||
return (
|
return (
|
||||||
<Column gap>
|
<Column gap>
|
||||||
<Heading size="2">{formatMessage(labels.activity)}</Heading>
|
<Heading size="2">{formatMessage(labels.activity)}</Heading>
|
||||||
<Row alignItems="center" justifyContent="space-between">
|
{isPhone ? (
|
||||||
<SearchField value={search} onSearch={setSearch} />
|
<>
|
||||||
<FilterButtons items={buttons} value={filter} onChange={setFilter} />
|
<Row>
|
||||||
</Row>
|
<SearchField value={search} onSearch={setSearch} />
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<FilterButtons items={buttons} value={filter} onChange={setFilter} />
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Row alignItems="center" justifyContent="space-between">
|
||||||
|
<SearchField value={search} onSearch={setSearch} />
|
||||||
|
<FilterButtons items={buttons} value={filter} onChange={setFilter} />
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
|
|
||||||
<Column>
|
<Column>
|
||||||
{logs?.length === 0 && <Empty />}
|
{logs?.length === 0 && <Empty />}
|
||||||
{logs?.length > 0 && (
|
{logs?.length > 0 && (
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { PageBody } from '@/components/common/PageBody';
|
||||||
import { Panel } from '@/components/common/Panel';
|
import { Panel } from '@/components/common/Panel';
|
||||||
import { RealtimeChart } from '@/components/metrics/RealtimeChart';
|
import { RealtimeChart } from '@/components/metrics/RealtimeChart';
|
||||||
import { WorldMap } from '@/components/metrics/WorldMap';
|
import { WorldMap } from '@/components/metrics/WorldMap';
|
||||||
import { useRealtimeQuery } from '@/components/hooks';
|
import { useMobile, useRealtimeQuery } from '@/components/hooks';
|
||||||
import { RealtimeLog } from './RealtimeLog';
|
import { RealtimeLog } from './RealtimeLog';
|
||||||
import { RealtimeHeader } from './RealtimeHeader';
|
import { RealtimeHeader } from './RealtimeHeader';
|
||||||
import { RealtimePaths } from './RealtimePaths';
|
import { RealtimePaths } from './RealtimePaths';
|
||||||
|
|
@ -16,6 +16,7 @@ import { percentFilter } from '@/lib/filters';
|
||||||
|
|
||||||
export function RealtimePage({ websiteId }: { websiteId: string }) {
|
export function RealtimePage({ websiteId }: { websiteId: string }) {
|
||||||
const { data, isLoading, error } = useRealtimeQuery(websiteId);
|
const { data, isLoading, error } = useRealtimeQuery(websiteId);
|
||||||
|
const { isMobile } = useMobile();
|
||||||
|
|
||||||
if (isLoading || error) {
|
if (isLoading || error) {
|
||||||
return <PageBody isLoading={isLoading} error={error} />;
|
return <PageBody isLoading={isLoading} error={error} />;
|
||||||
|
|
@ -48,7 +49,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
|
||||||
<Panel>
|
<Panel>
|
||||||
<RealtimeCountries data={countries} />
|
<RealtimeCountries data={countries} />
|
||||||
</Panel>
|
</Panel>
|
||||||
<Panel gridColumn="span 2" padding="0">
|
<Panel gridColumn={isMobile ? null : 'span 2'} padding="0">
|
||||||
<WorldMap data={countries} />
|
<WorldMap data={countries} />
|
||||||
</Panel>
|
</Panel>
|
||||||
</GridRow>
|
</GridRow>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import {
|
||||||
import { LoadingPanel } from '@/components/common/LoadingPanel';
|
import { LoadingPanel } from '@/components/common/LoadingPanel';
|
||||||
import { Eye, FileText } from '@/components/icons';
|
import { Eye, FileText } from '@/components/icons';
|
||||||
import { Lightning } from '@/components/svg';
|
import { Lightning } from '@/components/svg';
|
||||||
import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks';
|
import { useMessages, useMobile, useSessionActivityQuery, useTimezone } from '@/components/hooks';
|
||||||
import { EventData } from '@/components/metrics/EventData';
|
import { EventData } from '@/components/metrics/EventData';
|
||||||
|
|
||||||
export function SessionActivity({
|
export function SessionActivity({
|
||||||
|
|
@ -36,6 +36,7 @@ export function SessionActivity({
|
||||||
startDate,
|
startDate,
|
||||||
endDate,
|
endDate,
|
||||||
);
|
);
|
||||||
|
const { isMobile } = useMobile();
|
||||||
let lastDay = null;
|
let lastDay = null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -50,16 +51,16 @@ export function SessionActivity({
|
||||||
{showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
|
{showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
|
||||||
<Row alignItems="center" gap="6" height="40px">
|
<Row alignItems="center" gap="6" height="40px">
|
||||||
<StatusLight color={`#${visitId?.substring(0, 6)}`}>
|
<StatusLight color={`#${visitId?.substring(0, 6)}`}>
|
||||||
{formatTimezoneDate(createdAt, 'pp')}
|
<Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>
|
||||||
</StatusLight>
|
</StatusLight>
|
||||||
<Row alignItems="center" gap="2">
|
<Row alignItems="center" gap="2">
|
||||||
<Icon>{eventName ? <Lightning /> : <Eye />}</Icon>
|
<Icon>{eventName ? <Lightning /> : <Eye />}</Icon>
|
||||||
<Text>
|
<Text wrap="nowrap">
|
||||||
{eventName
|
{eventName
|
||||||
? formatMessage(labels.triggeredEvent)
|
? formatMessage(labels.triggeredEvent)
|
||||||
: formatMessage(labels.viewedPage)}
|
: formatMessage(labels.viewedPage)}
|
||||||
</Text>
|
</Text>
|
||||||
<Text weight="bold" style={{ maxWidth: '400px' }} truncate>
|
<Text weight="bold" style={{ maxWidth: isMobile ? '400px' : null }} truncate>
|
||||||
{eventName || urlPath}
|
{eventName || urlPath}
|
||||||
</Text>
|
</Text>
|
||||||
{hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
|
{hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ export function LogoutPage() {
|
||||||
async function logout() {
|
async function logout() {
|
||||||
await post('/auth/logout');
|
await post('/auth/logout');
|
||||||
|
|
||||||
router.push('/login');
|
window.location.href = `${process.env.basePath || ''}/login`;
|
||||||
}
|
}
|
||||||
|
|
||||||
removeClientAuthToken();
|
removeClientAuthToken();
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
import { useMemo, useState, useEffect } from 'react';
|
|
||||||
import { colord } from 'colord';
|
|
||||||
import { BarChart, BarChartProps } from '@/components/charts/BarChart';
|
import { BarChart, BarChartProps } from '@/components/charts/BarChart';
|
||||||
|
import { LoadingPanel } from '@/components/common/LoadingPanel';
|
||||||
import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
|
import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
|
||||||
import { renderDateLabels } from '@/lib/charts';
|
import { renderDateLabels } from '@/lib/charts';
|
||||||
import { CHART_COLORS } from '@/lib/constants';
|
import { CHART_COLORS } from '@/lib/constants';
|
||||||
import { LoadingPanel } from '@/components/common/LoadingPanel';
|
import { generateTimeSeries } from '@/lib/date';
|
||||||
|
import { colord } from 'colord';
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
export interface EventsChartProps extends BarChartProps {
|
export interface EventsChartProps extends BarChartProps {
|
||||||
websiteId: string;
|
websiteId: string;
|
||||||
|
|
@ -15,7 +16,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
|
||||||
const {
|
const {
|
||||||
dateRange: { startDate, endDate, unit },
|
dateRange: { startDate, endDate, unit },
|
||||||
} = useDateRange();
|
} = useDateRange();
|
||||||
const { locale } = useLocale();
|
const { locale, dateLocale } = useLocale();
|
||||||
const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
|
const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
|
||||||
const [label, setLabel] = useState<string>(focusLabel);
|
const [label, setLabel] = useState<string>(focusLabel);
|
||||||
|
|
||||||
|
|
@ -37,7 +38,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
|
||||||
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
|
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
|
||||||
return {
|
return {
|
||||||
label: key,
|
label: key,
|
||||||
data: map[key],
|
data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale),
|
||||||
lineTension: 0,
|
lineTension: 0,
|
||||||
backgroundColor: color.alpha(0.6).toRgbString(),
|
backgroundColor: color.alpha(0.6).toRgbString(),
|
||||||
borderColor: color.alpha(0.7).toRgbString(),
|
borderColor: color.alpha(0.7).toRgbString(),
|
||||||
|
|
@ -54,6 +55,8 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
|
||||||
}
|
}
|
||||||
}, [focusLabel]);
|
}, [focusLabel]);
|
||||||
|
|
||||||
|
const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LoadingPanel isLoading={isLoading} error={error} minHeight="400px">
|
<LoadingPanel isLoading={isLoading} error={error} minHeight="400px">
|
||||||
{chartData && (
|
{chartData && (
|
||||||
|
|
@ -63,7 +66,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
|
||||||
maxDate={endDate}
|
maxDate={endDate}
|
||||||
unit={unit}
|
unit={unit}
|
||||||
stacked={true}
|
stacked={true}
|
||||||
renderXLabel={renderDateLabels(unit, locale)}
|
renderXLabel={renderXLabel}
|
||||||
height="400px"
|
height="400px"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ export function ListTable({
|
||||||
showPercentage={showPercentage}
|
showPercentage={showPercentage}
|
||||||
change={renderChange ? renderChange(row, index) : null}
|
change={renderChange ? renderChange(row, index) : null}
|
||||||
currency={currency}
|
currency={currency}
|
||||||
isMobile={isPhone}
|
isPhone={isPhone}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -101,7 +101,7 @@ const AnimatedRow = ({
|
||||||
animate,
|
animate,
|
||||||
showPercentage = true,
|
showPercentage = true,
|
||||||
currency,
|
currency,
|
||||||
isMobile,
|
isPhone,
|
||||||
}) => {
|
}) => {
|
||||||
const props = useSpring({
|
const props = useSpring({
|
||||||
width: percent,
|
width: percent,
|
||||||
|
|
@ -120,7 +120,7 @@ const AnimatedRow = ({
|
||||||
gap
|
gap
|
||||||
>
|
>
|
||||||
<Row alignItems="center">
|
<Row alignItems="center">
|
||||||
<Text truncate={true} style={{ maxWidth: isMobile ? '200px' : '400px' }}>
|
<Text truncate={true} style={{ maxWidth: isPhone ? '200px' : '400px' }}>
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</Text>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import * as detect from '../detect';
|
import { getIpAddress } from '../ip';
|
||||||
|
|
||||||
const IP = '127.0.0.1';
|
const IP = '127.0.0.1';
|
||||||
const BAD_IP = '127.127.127.127';
|
const BAD_IP = '127.127.127.127';
|
||||||
|
|
@ -6,23 +6,23 @@ const BAD_IP = '127.127.127.127';
|
||||||
test('getIpAddress: Custom header', () => {
|
test('getIpAddress: Custom header', () => {
|
||||||
process.env.CLIENT_IP_HEADER = 'x-custom-ip-header';
|
process.env.CLIENT_IP_HEADER = 'x-custom-ip-header';
|
||||||
|
|
||||||
expect(detect.getIpAddress(new Headers({ 'x-custom-ip-header': IP }))).toEqual(IP);
|
expect(getIpAddress(new Headers({ 'x-custom-ip-header': IP }))).toEqual(IP);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('getIpAddress: CloudFlare header', () => {
|
test('getIpAddress: CloudFlare header', () => {
|
||||||
expect(detect.getIpAddress(new Headers({ 'cf-connecting-ip': IP }))).toEqual(IP);
|
expect(getIpAddress(new Headers({ 'cf-connecting-ip': IP }))).toEqual(IP);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('getIpAddress: Standard header', () => {
|
test('getIpAddress: Standard header', () => {
|
||||||
expect(detect.getIpAddress(new Headers({ 'x-forwarded-for': IP }))).toEqual(IP);
|
expect(getIpAddress(new Headers({ 'x-forwarded-for': IP }))).toEqual(IP);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('getIpAddress: CloudFlare header is lower priority than standard header', () => {
|
test('getIpAddress: CloudFlare header is lower priority than standard header', () => {
|
||||||
expect(
|
expect(getIpAddress(new Headers({ 'cf-connecting-ip': BAD_IP, 'x-forwarded-for': IP }))).toEqual(
|
||||||
detect.getIpAddress(new Headers({ 'cf-connecting-ip': BAD_IP, 'x-forwarded-for': IP })),
|
IP,
|
||||||
).toEqual(IP);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('getIpAddress: No header', () => {
|
test('getIpAddress: No header', () => {
|
||||||
expect(detect.getIpAddress(new Headers())).toEqual(null);
|
expect(getIpAddress(new Headers())).toEqual(null);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -19,20 +19,20 @@ async function relationalQuery(websiteId: string, eventId: string) {
|
||||||
|
|
||||||
return rawQuery(
|
return rawQuery(
|
||||||
`
|
`
|
||||||
select website_id as "websiteId",
|
select event_data.website_id as "websiteId",
|
||||||
session_id as "sessionId",
|
event_data.website_event_id as "eventId",
|
||||||
event_id as "eventId",
|
website_event.event_name as "eventName",
|
||||||
url_path as "urlPath",
|
event_data.data_key as "dataKey",
|
||||||
event_name as "eventName",
|
event_data.string_value as "stringValue",
|
||||||
data_key as "dataKey",
|
event_data.number_value as "numberValue",
|
||||||
string_value as "stringValue",
|
event_data.date_value as "dateValue",
|
||||||
number_value as "numberValue",
|
event_data.data_type as "dataType",
|
||||||
date_value as "dateValue",
|
event_data.created_at as "createdAt"
|
||||||
data_type as "dataType",
|
|
||||||
created_at as "createdAt"
|
|
||||||
from event_data
|
from event_data
|
||||||
website_id = {{websiteId::uuid}}
|
join website_event on website_event.event_id = event_data.website_event_id
|
||||||
event_id = {{eventId::uuid}}
|
and website_event.website_id = {{websiteId::uuid}}
|
||||||
|
where event_data.website_id = {{websiteId::uuid}}
|
||||||
|
and event_data.website_event_id = {{eventId::uuid}}
|
||||||
`,
|
`,
|
||||||
{ websiteId, eventId },
|
{ websiteId, eventId },
|
||||||
FUNCTION_NAME,
|
FUNCTION_NAME,
|
||||||
|
|
@ -45,9 +45,7 @@ async function clickhouseQuery(websiteId: string, eventId: string): Promise<Even
|
||||||
return rawQuery(
|
return rawQuery(
|
||||||
`
|
`
|
||||||
select website_id as websiteId,
|
select website_id as websiteId,
|
||||||
session_id as sessionId,
|
|
||||||
event_id as eventId,
|
event_id as eventId,
|
||||||
url_path as urlPath,
|
|
||||||
event_name as eventName,
|
event_name as eventName,
|
||||||
data_key as dataKey,
|
data_key as dataKey,
|
||||||
string_value as stringValue,
|
string_value as stringValue,
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,11 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
|
||||||
browser as browser,
|
browser as browser,
|
||||||
page_title as "pageTitle",
|
page_title as "pageTitle",
|
||||||
website_event.event_type as "eventType",
|
website_event.event_type as "eventType",
|
||||||
website_event.event_name as "eventName"
|
website_event.event_name as "eventName",
|
||||||
|
event_id IN (select website_event_id
|
||||||
|
from event_data
|
||||||
|
where website_id = {{websiteId::uuid}}
|
||||||
|
and created_at between {{startDate}} and {{endDate}}) AS "hasData"
|
||||||
from website_event
|
from website_event
|
||||||
${cohortQuery}
|
${cohortQuery}
|
||||||
join session on session.session_id = website_event.session_id
|
join session on session.session_id = website_event.session_id
|
||||||
|
|
|
||||||
|
|
@ -36,11 +36,11 @@ async function relationalQuery(
|
||||||
return rawQuery(
|
return rawQuery(
|
||||||
`
|
`
|
||||||
select
|
select
|
||||||
sum(t.c) as "pageviews",
|
cast(coalesce(sum(t.c), 0) as bigint) as "pageviews",
|
||||||
count(distinct t.session_id) as "visitors",
|
count(distinct t.session_id) as "visitors",
|
||||||
count(distinct t.visit_id) as "visits",
|
count(distinct t.visit_id) as "visits",
|
||||||
sum(case when t.c = 1 then 1 else 0 end) as "bounces",
|
coalesce(sum(case when t.c = 1 then 1 else 0 end), 0) as "bounces",
|
||||||
sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime"
|
cast(coalesce(sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}), 0) as bigint) as "totaltime"
|
||||||
from (
|
from (
|
||||||
select
|
select
|
||||||
website_event.session_id,
|
website_event.session_id,
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,15 @@ async function relationalQuery(
|
||||||
currency,
|
currency,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const joinQuery = filterQuery
|
||||||
|
? `join website_event
|
||||||
|
on website_event.website_id = revenue.website_id
|
||||||
|
and website_event.session_id = revenue.session_id
|
||||||
|
and website_event.event_id = revenue.event_id
|
||||||
|
and website_event.website_id = {{websiteId::uuid}}
|
||||||
|
and website_event.created_at between {{startDate}} and {{endDate}}`
|
||||||
|
: '';
|
||||||
|
|
||||||
const chart = await rawQuery(
|
const chart = await rawQuery(
|
||||||
`
|
`
|
||||||
select
|
select
|
||||||
|
|
@ -48,17 +57,12 @@ async function relationalQuery(
|
||||||
${getDateSQL('revenue.created_at', unit, timezone)} t,
|
${getDateSQL('revenue.created_at', unit, timezone)} t,
|
||||||
sum(revenue.revenue) y
|
sum(revenue.revenue) y
|
||||||
from revenue
|
from revenue
|
||||||
join website_event
|
${joinQuery}
|
||||||
on website_event.website_id = revenue.website_id
|
|
||||||
and website_event.session_id = revenue.session_id
|
|
||||||
and website_event.event_id = revenue.event_id
|
|
||||||
and website_event.website_id = {{websiteId::uuid}}
|
|
||||||
and website_event.created_at between {{startDate}} and {{endDate}}
|
|
||||||
${cohortQuery}
|
${cohortQuery}
|
||||||
${joinSessionQuery}
|
${joinSessionQuery}
|
||||||
where revenue.website_id = {{websiteId::uuid}}
|
where revenue.website_id = {{websiteId::uuid}}
|
||||||
and revenue.created_at between {{startDate}} and {{endDate}}
|
and revenue.created_at between {{startDate}} and {{endDate}}
|
||||||
and revenue.currency like {{currency}}
|
and revenue.currency ilike {{currency}}
|
||||||
${filterQuery}
|
${filterQuery}
|
||||||
group by x, t
|
group by x, t
|
||||||
order by t
|
order by t
|
||||||
|
|
@ -72,19 +76,14 @@ async function relationalQuery(
|
||||||
session.country as name,
|
session.country as name,
|
||||||
sum(revenue) value
|
sum(revenue) value
|
||||||
from revenue
|
from revenue
|
||||||
join website_event
|
${joinQuery}
|
||||||
on website_event.website_id = revenue.website_id
|
|
||||||
and website_event.session_id = revenue.session_id
|
|
||||||
and website_event.event_id = revenue.event_id
|
|
||||||
and website_event.website_id = {{websiteId::uuid}}
|
|
||||||
and website_event.created_at between {{startDate}} and {{endDate}}
|
|
||||||
join session
|
join session
|
||||||
on session.website_id = revenue.website_id
|
on session.website_id = revenue.website_id
|
||||||
and session.session_id = revenue.session_id
|
and session.session_id = revenue.session_id
|
||||||
${cohortQuery}
|
${cohortQuery}
|
||||||
where revenue.website_id = {{websiteId::uuid}}
|
where revenue.website_id = {{websiteId::uuid}}
|
||||||
and revenue.created_at between {{startDate}} and {{endDate}}
|
and revenue.created_at between {{startDate}} and {{endDate}}
|
||||||
and revenue.currency = {{currency}}
|
and revenue.currency ilike {{currency}}
|
||||||
${filterQuery}
|
${filterQuery}
|
||||||
group by session.country
|
group by session.country
|
||||||
`,
|
`,
|
||||||
|
|
@ -98,23 +97,18 @@ async function relationalQuery(
|
||||||
count(distinct revenue.event_id) as count,
|
count(distinct revenue.event_id) as count,
|
||||||
count(distinct revenue.session_id) as unique_count
|
count(distinct revenue.session_id) as unique_count
|
||||||
from revenue
|
from revenue
|
||||||
join website_event
|
${joinQuery}
|
||||||
on website_event.website_id = revenue.website_id
|
|
||||||
and website_event.session_id = revenue.session_id
|
|
||||||
and website_event.event_id = revenue.event_id
|
|
||||||
and website_event.website_id = {{websiteId::uuid}}
|
|
||||||
and website_event.created_at between {{startDate}} and {{endDate}}
|
|
||||||
${cohortQuery}
|
${cohortQuery}
|
||||||
${joinSessionQuery}
|
${joinSessionQuery}
|
||||||
where revenue.website_id = {{websiteId::uuid}}
|
where revenue.website_id = {{websiteId::uuid}}
|
||||||
and revenue.created_at between {{startDate}} and {{endDate}}
|
and revenue.created_at between {{startDate}} and {{endDate}}
|
||||||
and revenue.currency = {{currency}}
|
and revenue.currency ilike {{currency}}
|
||||||
${filterQuery}
|
${filterQuery}
|
||||||
`,
|
`,
|
||||||
queryParams,
|
queryParams,
|
||||||
).then(result => result?.[0]);
|
).then(result => result?.[0]);
|
||||||
|
|
||||||
total.average = total.count > 0 ? total.sum / total.count : 0;
|
total.average = total.count > 0 ? Number(total.sum) / Number(total.count) : 0;
|
||||||
|
|
||||||
return { chart, country, total };
|
return { chart, country, total };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,10 +29,10 @@ async function relationalQuery(websiteId: string, sessionId: string, filters: Qu
|
||||||
event_type as "eventType",
|
event_type as "eventType",
|
||||||
event_name as "eventName",
|
event_name as "eventName",
|
||||||
visit_id as "visitId",
|
visit_id as "visitId",
|
||||||
event_id IN (select event_id
|
event_id IN (select website_event_id
|
||||||
from event_data
|
from event_data
|
||||||
where website_id = {{websiteId::uuid}}
|
where website_id = {{websiteId::uuid}}
|
||||||
and session_id = {{sessionId::uuid}}) AS "hasData"
|
and created_at between {{startDate}} and {{endDate}}) AS "hasData"
|
||||||
from website_event
|
from website_event
|
||||||
where website_id = {{websiteId::uuid}}
|
where website_id = {{websiteId::uuid}}
|
||||||
and session_id = {{sessionId::uuid}}
|
and session_id = {{sessionId::uuid}}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue