LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

analytics: unify visitor cell across visits, crawlers and abuse tables

Browse Source
This commit is contained in:
LeoVasanko
2026-08-21 23:32:46 +00:00
parent fdb3e42d6f
commit 375b4b6bdb
3 changed files with 56 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/AnalyticsView.vue
+17 -37
View File
@@ -162,15 +162,12 @@ const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], client
</table>
</div>
<p v-else class="empty">no visits recorded yet</p>
</section>
<section>
<h2>Crawlers</h2>
<div v-if="crawlerRows.length" class="visit-table-wrap">
<table class="visit-table">
<thead>
<tr>
<th>pages</th>
<th>pages crawled</th>
<th>visitor</th>
<th class="last-seen">last seen</th>
</tr>
@@ -199,15 +196,12 @@ const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], client
</table>
</div>
<p v-else class="empty">no crawler hits recorded yet</p>
</section>
<section v-if="abuseRows.length">
<h2>Abuse</h2>
<div class="visit-table-wrap">
<div v-if="abuseRows.length" class="visit-table-wrap">
<table class="visit-table">
<thead>
<tr>
<th>paths</th>
<th>paths abused</th>
<th>visitor</th>
<th class="last-seen">last seen</th>
</tr>
@@ -224,19 +218,18 @@ const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], client
<small v-if="a.paths.length > ABUSE_MAX_LINES" class="muted">+{{ a.paths.length - ABUSE_MAX_LINES }} more</small>
</div>
</td>
<td class="ip-ua-cell">
<div><span class="clickable-ip small muted"
:title="a.ip"
@click="copyIp(a.ip, $event)">{{ a.ipDisplay }}</span></div>
<div class="abuse-uas-list clickable-list"
@click="copyList(a.allUas, $event)">
<span v-for="(u, ui) in a.uas.slice(0, ABUSE_MAX_LINES)" :key="ui"
class="inline-item">
<small v-if="u.count > 1" class="muted">{{ formatCount(u.count) }}×</small>{{ u.ua }}
</span>
<small v-if="a.uas.length > ABUSE_MAX_LINES" class="muted">+{{ a.uas.length - ABUSE_MAX_LINES }} more</small>
</div>
</td>
<VisitorCell
:ip="a.ip"
:ip-display="a.ipDisplay"
:ua="a.ua"
:ua-raw="a.uaRaw"
:country="a.country"
:city="a.city"
:lang="a.lang"
:lang-display="a.langDisplay"
:is-host="a.isHost"
:variant-count="a.clientCount"
/>
<td class="last-seen muted"
:title="a.lastSeenLocal"
@click="copyList(a.lastSeenIso, $event)">{{ a.lastSeen }}</td>
@@ -363,7 +356,7 @@ const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], client
}
.visit-table .last-seen {
width: 7.5rem;
width: 5rem;
text-align: right;
white-space: nowrap;
cursor: pointer;
@@ -405,18 +398,13 @@ const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], client
max-width: 22rem;
}
.visit-table .abuse-items,
.visit-table .abuse-uas-list {
.visit-table .abuse-items {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.5rem;
align-items: baseline;
}
.visit-table .abuse-uas-list {
justify-content: flex-end;
}
.visit-table .inline-item {
max-width: 18rem;
min-width: 0;
@@ -434,14 +422,6 @@ const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], client
position: relative;
}
.visit-table .ip-ua-cell {
width: 22ch;
max-width: 22ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.visit-table :deep(.copy-popup) {
position: absolute;
bottom: calc(100% + 0.25rem);
frontend/src/VisitorCell.vue
+9 -3
View File
@@ -1,7 +1,9 @@
<script setup>
// Visitor metadata cell shared by the recent-visits and crawlers tables.
// Visitor metadata cell shared by the recent-visits, crawlers, and abuse tables.
// Displays IP/network/host, country flag/city, UA, and language when available.
// Clicking the IP copies the full address to the clipboard.
// ``variantCount`` overrides the UA line to warn when multiple client
// fingerprints share the same IP (e.g. a scanner rotating UAs).
import { computed } from 'vue'
import * as flagSvgs from 'country-flag-icons/string/3x2'
import { copyIp, formatLang } from './analytics/format.js'
@@ -16,6 +18,7 @@ const props = defineProps({
lang: { type: String, default: '' },
langDisplay: { type: String, default: '' },
isHost: { type: Boolean, default: false },
variantCount: { type: Number, default: 1 },
})
const hasCountry = computed(() => !!(props.country && props.country !== '—'))
@@ -54,8 +57,11 @@ function countryName(code) {
</div>
</div>
<div class="visitor-row">
<div class="ua-line"><small class="muted" :title="uaRaw">{{ ua || '—' }}</small></div>
<div v-if="showLang" class="locale-lang"><small class="muted">{{ langValue }}</small></div>
<div class="ua-line">
<small v-if="variantCount > 1" class="muted variant-hint">{{ variantCount }} client variations</small>
<small v-else class="muted" :title="uaRaw">{{ ua || '—' }}</small>
</div>
<div v-if="showLang && variantCount <= 1" class="locale-lang"><small class="muted">{{ langValue }}</small></div>
</div>
</div>
</td>
frontend/src/analytics/format.js
+30 -24
View File
@@ -395,15 +395,15 @@ export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now())
}
/**
* Group abuse hits by IP (never by UA — scanners randomize theirs to
* masquerade as legitimate crawlers) and format each group as a row with
* the full paths probed. Identical paths are collapsed into one entry
* with their hit count. Flagged paths (the ones that triggered abuse
* classification) are lifted to the top, followed by other 404s, then
* document GETs from the abuser. Within each category paths are sorted by
* count descending, then earliest first. UAs are shown raw, one per line,
* with their occurrence counts. Paths are shown verbatim (query string
* included), not resolved against the page tree.
* Group abuse hits by IP and format each group as a row with the full paths
* probed. Identical paths are collapsed into one entry with their hit count.
* Flagged paths (the ones that triggered abuse classification) are lifted to
* the top, followed by other 404s, then document GETs from the abuser. Within
* each category paths are sorted by count descending, then earliest first.
* Rows are sorted by most recent hit first. Visitor metadata comes from the
* latest client hash seen for the IP; ``clientCount`` tells the visitor cell
* how many distinct client variations the IP produced. Paths are shown
* verbatim (query string included), not resolved against the page tree.
* ``clients`` maps client hashes to client records.
*/
export function formatAbuseRows(abuse, clients, now = Date.now()) {
@@ -414,12 +414,15 @@ export function formatAbuseRows(abuse, clients, now = Date.now()) {
const g = groups.get(ip) || {
ip,
pathCounts: new Map(),
rawUas: [],
uaCounts: new Map(),
clientHashes: new Set(),
lastStart: 0,
lastClient: a.client,
}
const start = new Date(a.start).getTime()
if (start > g.lastStart) g.lastStart = start
if (start > g.lastStart) {
g.lastStart = start
g.lastClient = a.client
}
const path = a.path || ''
const existing = g.pathCounts.get(path) || {
path,
@@ -433,9 +436,7 @@ export function formatAbuseRows(abuse, clients, now = Date.now()) {
if (a.flag) existing.flag = true
if (!a.is_404) existing.is_404 = false
g.pathCounts.set(path, existing)
const ua = client.ua || '(no UA)'
g.rawUas.push(ua)
g.uaCounts.set(ua, (g.uaCounts.get(ua) || 0) + 1)
g.clientHashes.add(a.client)
groups.set(ip, g)
}
const totalHits = (g) => {
@@ -444,7 +445,7 @@ export function formatAbuseRows(abuse, clients, now = Date.now()) {
return n
}
return [...groups.values()]
.sort((a, b) => totalHits(b) - totalHits(a) || b.lastStart - a.lastStart)
.sort((a, b) => b.lastStart - a.lastStart)
.slice(0, 10)
.map((g) => {
const pathCategory = (p) => (p.flag ? 0 : p.is_404 ? 1 : 2)
@@ -454,8 +455,9 @@ export function formatAbuseRows(abuse, clients, now = Date.now()) {
b.count - a.count ||
a.firstStart - b.firstStart,
)
const uas = [...g.uaCounts.entries()]
.sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
const client = (clients || {})[g.lastClient] || {}
const host = client.host || ''
const isHost = !!host
return {
lastSeen: formatWhen(g.lastStart, now),
lastSeenIso: formatWhenIso(g.lastStart),
@@ -469,12 +471,16 @@ export function formatAbuseRows(abuse, clients, now = Date.now()) {
allPaths: paths
.map((p) => (p.count > 1 ? `${p.count}× ${p.path}` : p.path))
.join('\n'),
uas: uas.map(([ua, count]) => ({ ua, count })),
allUas: uas
.map(([ua, count]) => (count > 1 ? `${count}× ${ua}` : ua))
.join('\n'),
ip: g.ip,
ipDisplay: hostIP(g.ip) || g.ip || '—',
clientCount: g.clientHashes.size,
ip: client.ip || g.ip,
ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip || g.ip) || client.ip || g.ip || '—',
isHost,
ua: client.ua_pretty || client.ua || '—',
uaRaw: client.ua || '',
lang: client.lang || '—',
langDisplay: formatLang(client.lang),
country: client.country || '—',
city: client.city || '—',
total: totalHits(g),
}
})