metacubexd/src/pages/Overview.tsx

176 lines
4.9 KiB
TypeScript
Raw Normal View History

2023-08-24 04:20:53 +08:00
import { createEventSignal } from '@solid-primitives/event-listener'
2023-09-01 23:57:58 +08:00
import { useI18n } from '@solid-primitives/i18n'
import { makeTimer } from '@solid-primitives/timer'
2023-08-24 04:20:53 +08:00
import { createReconnectingWS } from '@solid-primitives/websocket'
import type { ApexOptions } from 'apexcharts'
2023-08-24 04:20:53 +08:00
import byteSize from 'byte-size'
import { merge } from 'lodash'
2023-08-24 04:20:53 +08:00
import { SolidApexCharts } from 'solid-apexcharts'
import {
JSX,
ParentComponent,
children,
createEffect,
createMemo,
createSignal,
} from 'solid-js'
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
import { secret, wsEndpointURL } from '~/signals'
2023-08-24 04:20:53 +08:00
import type { Connection } from '~/types'
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
<div class="stat flex-1 place-items-center">
<div class="stat-title text-primary-content">{props.label}</div>
<div class="stat-value text-2xl text-primary-content lg:text-3xl">
{children(() => props.children)()}
</div>
</div>
)
export default () => {
2023-09-01 23:57:58 +08:00
const [t] = useI18n()
2023-09-02 00:15:19 +08:00
2023-08-24 04:20:53 +08:00
const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
[],
)
const [memories, setMemories] = createSignal<number[]>([])
// https://github.com/apexcharts/apexcharts.js/blob/main/samples/source/line/realtime.xml
// TODO: needs a better way
makeTimer(
() => {
setTraffics((traffics) => traffics.slice(-CHART_MAX_XAXIS))
setMemories((memo) => memo.slice(-CHART_MAX_XAXIS))
},
// we shrink the chart data array size down every 10 minutes to prevent memory leaks
10 * 60 * 1000,
setInterval,
)
const trafficWS = createReconnectingWS(
2023-08-29 20:20:01 +08:00
`${wsEndpointURL()}/traffic?token=${secret()}`,
)
2023-08-24 04:20:53 +08:00
const trafficWSMessageEvent = createEventSignal(trafficWS, 'message')
2023-08-24 04:20:53 +08:00
const traffic = () => {
const data = trafficWSMessageEvent()?.data
return data ? (JSON.parse(data) as { down: number; up: number }) : null
}
createEffect(() => {
const t = traffic()
if (t) setTraffics((traffics) => [...traffics, t])
2023-08-24 04:20:53 +08:00
})
const trafficChartOptions = createMemo<ApexOptions>(() =>
merge({ title: { text: t('traffic') } }, DEFAULT_CHART_OPTIONS),
)
2023-08-24 04:20:53 +08:00
const trafficChartSeries = createMemo(() => [
{
2023-09-02 00:15:19 +08:00
name: t('down'),
2023-08-24 04:20:53 +08:00
data: traffics().map((t) => t.down),
},
{
2023-09-02 00:15:19 +08:00
name: t('up'),
2023-08-24 04:20:53 +08:00
data: traffics().map((t) => t.up),
},
])
const memoryWS = createReconnectingWS(
`${wsEndpointURL()}/memory?token=${secret()}`,
)
2023-08-24 04:20:53 +08:00
const memoryWSMessageEvent = createEventSignal(memoryWS, 'message')
2023-08-24 04:20:53 +08:00
const memory = () => {
const data = memoryWSMessageEvent()?.data
return data ? (JSON.parse(data) as { inuse: number }).inuse : null
}
createEffect(() => {
const m = memory()
if (m) setMemories((memories) => [...memories, m])
2023-08-24 04:20:53 +08:00
})
const memoryChartOptions = createMemo<ApexOptions>(() =>
merge({ title: { text: t('memory') } }, DEFAULT_CHART_OPTIONS),
)
2023-08-24 04:20:53 +08:00
const memoryChartSeries = createMemo(() => [
{ name: t('memory'), data: memories() },
])
2023-08-24 04:20:53 +08:00
const connectionsWS = createReconnectingWS(
2023-08-29 20:20:01 +08:00
`${wsEndpointURL()}/connections?token=${secret()}`,
)
2023-08-24 04:20:53 +08:00
const connectionsWSMessageEvent = createEventSignal<{
message: WebSocketEventMap['message']
}>(connectionsWS, 'message')
const connection = () => {
const data = connectionsWSMessageEvent()?.data
return data
? (JSON.parse(data) as {
downloadTotal: number
uploadTotal: number
connections: Connection[]
})
: null
}
return (
<div class="flex flex-col gap-4">
<div class="stats stats-vertical w-full grid-cols-2 bg-primary shadow lg:stats-horizontal lg:flex">
2023-09-02 00:15:19 +08:00
<TrafficWidget label={t('upload')}>
{byteSize(traffic()?.up || 0).toString()}/s
</TrafficWidget>
2023-09-02 00:15:19 +08:00
<TrafficWidget label={t('download')}>
{byteSize(traffic()?.down || 0).toString()}/s
</TrafficWidget>
2023-09-02 00:15:19 +08:00
<TrafficWidget label={t('uploadTotal')}>
{byteSize(connection()?.uploadTotal || 0).toString()}
</TrafficWidget>
2023-09-02 00:15:19 +08:00
<TrafficWidget label={t('downloadTotal')}>
{byteSize(connection()?.downloadTotal || 0).toString()}
</TrafficWidget>
2023-09-02 00:15:19 +08:00
<TrafficWidget label={t('activeConnections')}>
{connection()?.connections.length || 0}
</TrafficWidget>
2023-09-02 00:15:19 +08:00
<TrafficWidget label={t('memoryUsage')}>
{byteSize(memory() || 0).toString()}
</TrafficWidget>
2023-08-24 04:20:53 +08:00
</div>
<div class="rounded-box flex flex-col gap-2 bg-base-300 py-4 lg:flex-row">
<div class="flex-1">
2023-09-02 13:50:24 +08:00
<SolidApexCharts
type="area"
options={trafficChartOptions()}
series={trafficChartSeries()}
/>
</div>
<div class="flex-1">
2023-09-02 13:50:24 +08:00
<SolidApexCharts
type="line"
options={memoryChartOptions()}
series={memoryChartSeries()}
/>
</div>
2023-08-24 04:20:53 +08:00
</div>
</div>
)
}