532 lines
20 KiB
TypeScript
532 lines
20 KiB
TypeScript
"use client"
|
||
|
||
import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
|
||
import { useSearchParams } from "next/navigation"
|
||
import {
|
||
ActivityIcon,
|
||
DatabaseIcon,
|
||
GaugeIcon,
|
||
ServerIcon,
|
||
UsersIcon,
|
||
} from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { PageHeader } from "@/components/page-header"
|
||
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
|
||
import { DataPageCard } from "@/components/data-page-card"
|
||
import { DataPageToolbar } from "@/components/data-page-toolbar"
|
||
import { SegmentedControl } from "@/components/form-kit"
|
||
import { EmptyState } from "@/components/empty-state"
|
||
import { PeriodSelector, rangeForPreset, type DateRangeYmd } from "@/components/statistics/period-selector"
|
||
import { StatisticsVolumeChart } from "@/components/statistics/statistics-volume-chart"
|
||
import { DimensionSelect, PivotDimSelect } from "@/components/statistics/dimension-select"
|
||
import { SliceChips } from "@/components/statistics/slice-chips"
|
||
import { BreakdownDashboard } from "@/components/statistics/breakdown-dashboard"
|
||
import { StatisticsPivotGrid } from "@/components/statistics/statistics-pivot-grid"
|
||
import {
|
||
StatisticsBreakdownDataGrid,
|
||
type StatisticsSliceKind,
|
||
} from "@/components/data-grids/statistics-breakdown-data-grid"
|
||
import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
|
||
import { StatisticsFilters } from "@/components/statistics/statistics-filters"
|
||
import {
|
||
isStatisticsPivotDim,
|
||
isStatisticsSliceKind,
|
||
STATISTICS_DIMS,
|
||
} from "@/lib/statistics-dims"
|
||
import { statisticsContextError, STATISTICS_CONTEXT_KEYS } from "@/lib/statistics-context"
|
||
import { readStatisticsRange } from "@/lib/statistics-range"
|
||
import { useDataSource } from "@/lib/data-source"
|
||
import { fmtBps, formatBytes } from "@/lib/fmt-rate"
|
||
import {
|
||
getStatistics,
|
||
getStatisticsPivot,
|
||
STATISTICS_UNBOUND_USER_ID,
|
||
type StatisticsDto,
|
||
type StatisticsPivotDto,
|
||
type StatisticsQuery,
|
||
} from "@/shared/api/statistics"
|
||
import type { StatisticsBreakdownRow, StatisticsPivotDim } from "@mmapp/contracts/statistics"
|
||
|
||
/**
|
||
* BI-куб трафика: критерий → остальные разрезы + pivot.
|
||
* Preview: https://reui.io/preview/base/dashboard-1 · https://reui.io/preview/base/stats-12
|
||
* · https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/preview/base/solution-analytics-8
|
||
* · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/data-grid
|
||
*/
|
||
|
||
const EMPTY: StatisticsDto = {
|
||
from: "",
|
||
to: "",
|
||
grain: "day",
|
||
kpis: {
|
||
bytes: 0,
|
||
packets: 0,
|
||
avgBps: 0,
|
||
users: 0,
|
||
servers: 0,
|
||
ifaces: 0,
|
||
topCountry: "",
|
||
topService: "",
|
||
},
|
||
series: [],
|
||
users: [],
|
||
servers: [],
|
||
interfaces: [],
|
||
countries: [],
|
||
services: [],
|
||
asns: [],
|
||
}
|
||
|
||
const EMPTY_PIVOT: StatisticsPivotDto = {
|
||
rowDim: "country",
|
||
colDim: "service",
|
||
metric: "bytes",
|
||
columns: [],
|
||
rows: [],
|
||
otherBytes: 0,
|
||
}
|
||
|
||
interface CubeSlices {
|
||
country?: string
|
||
service?: string
|
||
asn?: string
|
||
serverId?: string
|
||
userId?: string
|
||
iface?: string
|
||
}
|
||
|
||
const SLICE_KEYS = ["country", "service", "asn", "serverId", "userId", "iface"] as const
|
||
|
||
function readDim(sp: URLSearchParams): StatisticsSliceKind {
|
||
const t = sp.get("dim") ?? sp.get("tab")
|
||
return t && isStatisticsSliceKind(t) ? t : "users"
|
||
}
|
||
|
||
function readView(sp: URLSearchParams): "explore" | "pivot" {
|
||
return sp.get("view") === "pivot" ? "pivot" : "explore"
|
||
}
|
||
|
||
function readPlanes(sp: URLSearchParams): "unique" | "all" {
|
||
return sp.get("planes") === "all" ? "all" : "unique"
|
||
}
|
||
|
||
function readPivotDim(sp: URLSearchParams, key: string, fallback: StatisticsPivotDim): StatisticsPivotDim {
|
||
const v = sp.get(key)
|
||
return v && isStatisticsPivotDim(v) ? v : fallback
|
||
}
|
||
|
||
function readSlices(sp: URLSearchParams): CubeSlices {
|
||
const next: CubeSlices = {}
|
||
for (const key of SLICE_KEYS) {
|
||
const v = sp.get(key)?.trim()
|
||
if (v) next[key] = v
|
||
}
|
||
return next
|
||
}
|
||
|
||
function toQuery(range: DateRangeYmd, slices: CubeSlices, planes: "unique" | "all"): StatisticsQuery {
|
||
const serverId = slices.serverId ? Number(slices.serverId) : undefined
|
||
const asn = slices.asn != null && slices.asn !== "" ? Number(slices.asn) : undefined
|
||
return {
|
||
from: range.from,
|
||
to: range.to,
|
||
serverId: Number.isFinite(serverId) && (serverId ?? 0) > 0 ? serverId : undefined,
|
||
userId: slices.userId,
|
||
iface: slices.iface,
|
||
country: slices.country && slices.country.length === 2 ? slices.country : undefined,
|
||
service: slices.service,
|
||
asn: Number.isFinite(asn) ? asn : undefined,
|
||
planes,
|
||
}
|
||
}
|
||
|
||
function selectedIdForKind(kind: StatisticsSliceKind, slices: CubeSlices): string | undefined {
|
||
if (kind === "users") return slices.userId
|
||
if (kind === "servers") return slices.serverId
|
||
if (kind === "countries") return slices.country
|
||
if (kind === "services") return slices.service
|
||
if (kind === "asns") return slices.asn
|
||
if (kind === "interfaces" && slices.serverId && slices.iface) {
|
||
return `${slices.serverId}:${slices.iface}`
|
||
}
|
||
if (kind === "interfaces") return slices.iface
|
||
return undefined
|
||
}
|
||
|
||
function rowsForKind(data: StatisticsDto, kind: StatisticsSliceKind) {
|
||
if (kind === "users") return data.users
|
||
if (kind === "servers") return data.servers
|
||
if (kind === "interfaces") return data.interfaces
|
||
if (kind === "countries") return data.countries
|
||
if (kind === "services") return data.services
|
||
return data.asns
|
||
}
|
||
|
||
function hasAnySlice(slices: CubeSlices): boolean {
|
||
return SLICE_KEYS.some((k) => Boolean(slices[k]))
|
||
}
|
||
|
||
function hiddenKinds(slices: CubeSlices): Set<StatisticsSliceKind> {
|
||
const hidden = new Set<StatisticsSliceKind>()
|
||
if (slices.userId) hidden.add("users")
|
||
if (slices.serverId) hidden.add("servers")
|
||
if (slices.iface) hidden.add("interfaces")
|
||
if (slices.country) hidden.add("countries")
|
||
if (slices.service) hidden.add("services")
|
||
if (slices.asn) hidden.add("asns")
|
||
return hidden
|
||
}
|
||
|
||
function applyDimValue(slices: CubeSlices, kind: StatisticsSliceKind, rowId: string): CubeSlices {
|
||
const next: CubeSlices = { ...slices }
|
||
if (kind === "users") {
|
||
if (rowId === STATISTICS_UNBOUND_USER_ID) return next
|
||
if (next.userId === rowId) delete next.userId
|
||
else next.userId = rowId
|
||
} else if (kind === "servers") {
|
||
if (next.serverId === rowId) delete next.serverId
|
||
else next.serverId = rowId
|
||
} else if (kind === "countries") {
|
||
if (next.country === rowId) delete next.country
|
||
else next.country = rowId
|
||
} else if (kind === "services") {
|
||
if (next.service === rowId) delete next.service
|
||
else next.service = rowId
|
||
} else if (kind === "asns") {
|
||
if (next.asn === rowId) delete next.asn
|
||
else next.asn = rowId
|
||
} else {
|
||
const colon = rowId.indexOf(":")
|
||
const sid = colon >= 0 ? rowId.slice(0, colon) : undefined
|
||
const iface = colon >= 0 ? rowId.slice(colon + 1) : rowId
|
||
if (next.iface === iface && next.serverId === sid) {
|
||
delete next.iface
|
||
delete next.serverId
|
||
} else {
|
||
next.iface = iface
|
||
if (sid) next.serverId = sid
|
||
}
|
||
}
|
||
return next
|
||
}
|
||
|
||
function applyPivotDim(slices: CubeSlices, dim: StatisticsPivotDim, id: string): CubeSlices {
|
||
const kind = STATISTICS_DIMS.find((d) => d.pivot === dim)?.id ?? "users"
|
||
return applyDimValue(slices, kind, id)
|
||
}
|
||
|
||
function chipList(slices: CubeSlices): { key: string; label: string }[] {
|
||
const chips: { key: string; label: string }[] = []
|
||
if (slices.country) chips.push({ key: "country", label: `страна ${slices.country}` })
|
||
if (slices.service) chips.push({ key: "service", label: `сервис ${slices.service}` })
|
||
if (slices.asn) chips.push({ key: "asn", label: `ASN ${slices.asn}` })
|
||
if (slices.serverId) chips.push({ key: "serverId", label: `сервер ${slices.serverId}` })
|
||
if (slices.userId) chips.push({ key: "userId", label: `пользователь ${slices.userId}` })
|
||
if (slices.iface) chips.push({ key: "iface", label: `iface ${slices.iface}` })
|
||
return chips
|
||
}
|
||
|
||
function StatisticsPageInner() {
|
||
const searchParams = useSearchParams()
|
||
const { mode, backendUrl, prefsHydrated } = useDataSource()
|
||
const isLive = mode === "live"
|
||
|
||
const { range, error: rangeError } = useMemo(() => readStatisticsRange(searchParams, rangeForPreset("7d")), [searchParams])
|
||
const paramsError = useMemo(() => statisticsContextError(searchParams), [searchParams])
|
||
const slices = useMemo(() => readSlices(searchParams), [searchParams])
|
||
const dim = useMemo(() => readDim(searchParams), [searchParams])
|
||
const view = useMemo(() => readView(searchParams), [searchParams])
|
||
const planes = useMemo(() => readPlanes(searchParams), [searchParams])
|
||
const pivotRow = useMemo(() => readPivotDim(searchParams, "pivotRow", "country"), [searchParams])
|
||
const pivotCol = useMemo(() => readPivotDim(searchParams, "pivotCol", "service"), [searchParams])
|
||
|
||
const [retry, setRetry] = useState(0)
|
||
const requestKey = JSON.stringify({ backendUrl, isLive, range, slices, view, pivotRow, pivotCol, planes, retry, rangeError, paramsError })
|
||
const [result, setResult] = useState<{
|
||
key: string; data: StatisticsDto; pivot: StatisticsPivotDto; error: string | null
|
||
} | null>(null)
|
||
const current = result?.key === requestKey ? result : null
|
||
const loading = isLive && !rangeError && !paramsError && current === null
|
||
const error = rangeError ?? paramsError ?? current?.error ?? null
|
||
const dataReady = isLive && current !== null && !error
|
||
const pivot = dataReady ? current.pivot : EMPTY_PIVOT
|
||
|
||
const updateParams = useCallback(
|
||
(patch: Record<string, string | undefined>) => {
|
||
const sp = new URLSearchParams(window.location.search)
|
||
for (const [k, v] of Object.entries(patch)) {
|
||
if (v) sp.set(k, v)
|
||
else sp.delete(k)
|
||
}
|
||
const qs = sp.toString()
|
||
if (qs === searchParams.toString()) return
|
||
window.history.pushState(null, "", (qs ? `/statistics?${qs}` : "/statistics") + window.location.hash)
|
||
},
|
||
[searchParams],
|
||
)
|
||
|
||
const setRange = useCallback(
|
||
(next: DateRangeYmd) => {
|
||
updateParams({ from: next.from, to: next.to })
|
||
},
|
||
[updateParams],
|
||
)
|
||
|
||
const setSlices = useCallback(
|
||
(next: CubeSlices) => {
|
||
updateParams({
|
||
country: next.country,
|
||
service: next.service,
|
||
asn: next.asn,
|
||
serverId: next.serverId,
|
||
userId: next.userId,
|
||
iface: next.iface,
|
||
})
|
||
},
|
||
[updateParams],
|
||
)
|
||
|
||
useEffect(() => {
|
||
if (!prefsHydrated || !isLive || rangeError || paramsError) return
|
||
let cancelled = false
|
||
void (async () => {
|
||
try {
|
||
const query = toQuery(range, slices, planes)
|
||
const dto = await getStatistics(backendUrl, query)
|
||
if (cancelled) return
|
||
let matrix = EMPTY_PIVOT
|
||
if (view === "pivot" && pivotRow !== pivotCol) {
|
||
matrix = await getStatisticsPivot(backendUrl, {
|
||
...query,
|
||
row: pivotRow,
|
||
col: pivotCol,
|
||
metric: "bytes",
|
||
})
|
||
}
|
||
if (!cancelled) setResult({ key: requestKey, data: dto, pivot: matrix, error: null })
|
||
} catch (e: unknown) {
|
||
if (!cancelled) {
|
||
setResult({ key: requestKey, data: EMPTY, pivot: EMPTY_PIVOT, error: e instanceof Error ? e.message : "Не удалось загрузить статистику" })
|
||
}
|
||
}
|
||
})()
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [backendUrl, isLive, prefsHydrated, range, slices, view, pivotRow, pivotCol, planes, requestKey, rangeError, paramsError])
|
||
|
||
const viewData = dataReady ? current.data : EMPTY
|
||
const sliced = hasAnySlice(slices)
|
||
const emptyCube = !isLive || (!loading && viewData.kpis.bytes === 0 && viewData.interfaces.length === 0)
|
||
|
||
function handleRowClick(kind: StatisticsSliceKind, row: StatisticsBreakdownRow) {
|
||
if (kind === "users" && row.id === STATISTICS_UNBOUND_USER_ID) return
|
||
if (kind === "interfaces" && row.label.includes("· дубль")) return
|
||
setSlices(applyDimValue(slices, kind, row.id))
|
||
}
|
||
|
||
function handlePivotCell(rowId: string, colId: string) {
|
||
if (rowId === "__other__" || colId === "__other__") return
|
||
let next = applyPivotDim(slices, pivotRow, rowId)
|
||
next = applyPivotDim(next, pivotCol, colId)
|
||
updateParams({
|
||
country: next.country,
|
||
service: next.service,
|
||
asn: next.asn,
|
||
serverId: next.serverId,
|
||
userId: next.userId,
|
||
iface: next.iface,
|
||
view: "explore",
|
||
})
|
||
}
|
||
|
||
const kpis = viewData.kpis
|
||
const chips = chipList(slices)
|
||
const countLabel =
|
||
view === "pivot"
|
||
? `${pivot.rows.length} × ${pivot.columns.length}`
|
||
: sliced
|
||
? `${STATISTICS_DIMS.filter((d) => !hiddenKinds(slices).has(d.id)).length} разрезов`
|
||
: `${rowsForKind(viewData, dim).length} строк`
|
||
|
||
return (
|
||
<div className="flex h-full flex-col">
|
||
<PageHeader
|
||
crumbs={[{ label: "Обзор", href: "/dashboard" }, { label: "Статистика" }]}
|
||
actions={rangeError ? <Button type="button" variant="outline" onClick={() => setRange(rangeForPreset("7d"))}>Выбрать последние 7 дней</Button> : <PeriodSelector range={range} onChange={setRange} />}
|
||
/>
|
||
|
||
<div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-4 md:gap-6 md:px-6 md:py-5">
|
||
{!isLive ? (
|
||
<Alert>
|
||
<AlertTitle>Живые данные выключены</AlertTitle>
|
||
<AlertDescription>
|
||
Куб статистики строится из IPFIX. Переключитесь на живой источник, чтобы увидеть отчёт.
|
||
</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{error ? (
|
||
<Alert variant="destructive" role="alert">
|
||
<AlertTitle>{rangeError ? "Некорректный период" : paramsError ? "Параметры отчёта требуют внимания" : "Ошибка загрузки"}</AlertTitle>
|
||
<AlertDescription>{error}{!rangeError && !paramsError && <Button type="button" variant="outline" size="sm" onClick={() => setRetry(n => n + 1)}>Повторить загрузку</Button>}{paramsError && <Button type="button" variant="outline" size="sm" onClick={() => updateParams(Object.fromEntries(STATISTICS_CONTEXT_KEYS.map(key => [key, undefined])))}>Сбросить параметры отчёта</Button>}</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{!slices.serverId && dataReady && !emptyCube ? (
|
||
<Alert>
|
||
<AlertTitle>Уникальный объём</AlertTitle>
|
||
<AlertDescription>
|
||
Объём — трафик клиентов на GRE/WG, без повторного учёта JH↔EN и WAN.
|
||
</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{(dataReady || loading) && <KpiStatGrid
|
||
aria-label="Сводка трафика"
|
||
isLoading={loading}
|
||
skeletonCount={5}
|
||
items={[
|
||
{
|
||
id: "bytes",
|
||
label: "Объём",
|
||
value: formatBytes(kpis.bytes),
|
||
hint: "GRE/WG клиентов, без hops",
|
||
icon: <DatabaseIcon />,
|
||
iconClassName: "text-muted-foreground",
|
||
},
|
||
{
|
||
id: "packets",
|
||
label: "Пакеты",
|
||
value: kpis.packets.toLocaleString("ru-RU"),
|
||
hint: kpis.topService ? `топ: ${kpis.topService}` : undefined,
|
||
icon: <ActivityIcon />,
|
||
iconClassName: "text-muted-foreground",
|
||
},
|
||
{
|
||
id: "bps",
|
||
label: "Средний bitrate",
|
||
value: fmtBps(kpis.avgBps),
|
||
icon: <GaugeIcon />,
|
||
iconClassName: "text-muted-foreground",
|
||
},
|
||
{
|
||
id: "users",
|
||
label: "Пользователи",
|
||
value: String(kpis.users),
|
||
icon: <UsersIcon />,
|
||
iconClassName: "text-muted-foreground",
|
||
},
|
||
{
|
||
id: "servers",
|
||
label: "Серверы",
|
||
value: String(kpis.servers),
|
||
hint: slices.serverId
|
||
? (kpis.ifaces ? `${kpis.ifaces} iface` : undefined)
|
||
: planes === "all"
|
||
? "WAN и дубли в списке"
|
||
: "без WAN и overlay",
|
||
icon: <ServerIcon />,
|
||
iconClassName: "text-muted-foreground",
|
||
},
|
||
]}
|
||
/>}
|
||
|
||
{dataReady && <StatisticsVolumeChart series={viewData.series} grain={viewData.grain} />}
|
||
|
||
<DataPageCard>
|
||
<DataPageToolbar
|
||
leading={
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<SegmentedControl
|
||
value={view}
|
||
onChange={(next) => updateParams({ view: next === "pivot" ? "pivot" : "explore" })}
|
||
options={[
|
||
{ value: "explore", label: "Разрез" },
|
||
{ value: "pivot", label: "Сводка" },
|
||
]}
|
||
/>
|
||
<SegmentedControl
|
||
value={planes}
|
||
onChange={(next) => updateParams({ planes: next === "all" ? "all" : undefined })}
|
||
options={[
|
||
{ value: "unique", label: "Уникальный" },
|
||
{ value: "all", label: "Все плоскости" },
|
||
]}
|
||
/>
|
||
{view === "explore" && !sliced ? (
|
||
<DimensionSelect
|
||
label="Критерий"
|
||
value={dim}
|
||
onChange={(next) => updateParams({ dim: next, tab: undefined })}
|
||
/>
|
||
) : null}
|
||
{view === "pivot" ? (
|
||
<>
|
||
<PivotDimSelect
|
||
label="Строки"
|
||
value={pivotRow}
|
||
exclude={pivotCol}
|
||
onChange={(next) => updateParams({ pivotRow: next })}
|
||
/>
|
||
<PivotDimSelect
|
||
label="Колонки"
|
||
value={pivotCol}
|
||
exclude={pivotRow}
|
||
onChange={(next) => updateParams({ pivotCol: next })}
|
||
/>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
}
|
||
filterControl={<StatisticsFilters key={JSON.stringify(slices)} slices={slices} onApply={setSlices} />}
|
||
countLabel={dataReady ? countLabel : undefined}
|
||
/>
|
||
<SliceChips
|
||
chips={chips}
|
||
onRemove={(key) => {
|
||
const next = { ...slices }
|
||
delete next[key as keyof CubeSlices]
|
||
setSlices(next)
|
||
}}
|
||
/>
|
||
{isLive && !dataReady ? (
|
||
<div role="status" className="p-6 text-sm text-muted-foreground">{loading ? "Загрузка статистики…" : rangeError || paramsError ? "Исправьте параметры отчёта для загрузки статистики." : "Статистика недоступна. Повторите загрузку."}</div>
|
||
) : emptyCube ? (
|
||
<EmptyState
|
||
title="Нет данных куба"
|
||
description="За выбранный период нет IPFIX-фактов. Куб заполняется с момента деплоя, без бэкфилла за год."
|
||
/>
|
||
) : view === "pivot" ? (
|
||
<StatisticsPivotGrid data={isLive ? pivot : EMPTY_PIVOT} onCellClick={handlePivotCell} isLoading={loading} />
|
||
) : sliced ? (
|
||
<BreakdownDashboard
|
||
data={viewData}
|
||
hidden={hiddenKinds(slices)}
|
||
selectedIdFor={(kind) => selectedIdForKind(kind, slices)}
|
||
onRowClick={handleRowClick}
|
||
isLoading={loading}
|
||
/>
|
||
) : (
|
||
<StatisticsBreakdownDataGrid
|
||
rows={rowsForKind(viewData, dim)}
|
||
kind={dim}
|
||
selectedId={selectedIdForKind(dim, slices)}
|
||
onRowClick={(row) => handleRowClick(dim, row)}
|
||
isLoading={loading}
|
||
/>
|
||
)}
|
||
</DataPageCard>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function StatisticsPage() {
|
||
return (
|
||
<Suspense fallback={null}>
|
||
<StatisticsPageInner />
|
||
</Suspense>
|
||
)
|
||
}
|