feat(connections): pausing support

This commit is contained in:
kunish 2023-09-06 02:41:30 +08:00
parent 26b9658ea7
commit 6076619485
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430

View File

@ -5,6 +5,8 @@ import { makePersisted } from '@solid-primitives/storage'
import { createReconnectingWS } from '@solid-primitives/websocket' import { createReconnectingWS } from '@solid-primitives/websocket'
import { import {
IconCircleX, IconCircleX,
IconPlayerPause,
IconPlayerPlay,
IconSettings, IconSettings,
IconSortAscending, IconSortAscending,
IconSortDescending, IconSortDescending,
@ -27,7 +29,7 @@ import byteSize from 'byte-size'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { isIPv6 } from 'is-ip' import { isIPv6 } from 'is-ip'
import { differenceWith, isEqualWith } from 'lodash' import { differenceWith, isEqualWith } from 'lodash'
import { For, createEffect, createSignal } from 'solid-js' import { For, createEffect, createMemo, createSignal, untrack } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { Button, ConnectionsTableOrderingModal } from '~/components' import { Button, ConnectionsTableOrderingModal } from '~/components'
import { import {
@ -74,6 +76,12 @@ export default () => {
const [activeConnectionsWithSpeed, setActiveConnectionsWithSpeed] = const [activeConnectionsWithSpeed, setActiveConnectionsWithSpeed] =
createSignal<ConnectionWithSpeed[]>([]) createSignal<ConnectionWithSpeed[]>([])
const [paused, setPaused] = createSignal(false)
const [pausedActiveConnectionsSnapshot, setPausedActiveConnectionsSnapshot] =
createSignal<ConnectionWithSpeed[]>([])
const [pausedClosedConnectionsSnapshot, setPausedClosedConnectionsSnapshot] =
createSignal<ConnectionWithSpeed[]>([])
createEffect(() => { createEffect(() => {
const data = messageEvent()?.data const data = messageEvent()?.data
@ -119,6 +127,26 @@ export default () => {
}) })
}) })
createEffect(() => {
if (paused()) {
setPausedActiveConnectionsSnapshot(
untrack(() => activeConnectionsWithSpeed()),
)
setPausedClosedConnectionsSnapshot(
untrack(() => closedConnectionsWithSpeed()),
)
}
})
const activeConnectionsWithSpeedAndPausing = createMemo(() =>
paused() ? pausedActiveConnectionsSnapshot() : activeConnectionsWithSpeed(),
)
const closedConnectionsWithSpeedAndPausing = createMemo(() =>
paused() ? pausedClosedConnectionsSnapshot() : closedConnectionsWithSpeed(),
)
const onCloseConnection = (id: string) => request.delete(`connections/${id}`) const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
const [columnVisibility, setColumnVisibility] = makePersisted( const [columnVisibility, setColumnVisibility] = makePersisted(
@ -269,8 +297,8 @@ export default () => {
}, },
get data() { get data() {
return activeTab() === ActiveTab.activeConnections return activeTab() === ActiveTab.activeConnections
? activeConnectionsWithSpeed() ? activeConnectionsWithSpeedAndPausing()
: closedConnectionsWithSpeed() : closedConnectionsWithSpeedAndPausing()
}, },
sortDescFirst: true, sortDescFirst: true,
enableHiding: true, enableHiding: true,
@ -311,12 +339,12 @@ export default () => {
{ {
type: ActiveTab.activeConnections, type: ActiveTab.activeConnections,
name: t('activeConnections'), name: t('activeConnections'),
count: activeConnectionsWithSpeed().length, count: activeConnectionsWithSpeedAndPausing().length,
}, },
{ {
type: ActiveTab.closedConnections, type: ActiveTab.closedConnections,
name: t('closedConnections'), name: t('closedConnections'),
count: closedConnectionsWithSpeed().length, count: closedConnectionsWithSpeedAndPausing().length,
}, },
] ]
@ -342,6 +370,13 @@ export default () => {
onInput={(e) => setSearch(e.target.value)} onInput={(e) => setSearch(e.target.value)}
/> />
<Button
class="btn-circle"
onClick={() => setPaused((paused) => !paused)}
>
{paused() ? <IconPlayerPause /> : <IconPlayerPlay />}
</Button>
<Button <Button
class="btn-circle" class="btn-circle"
onClick={() => request.delete('connections')} onClick={() => request.delete('connections')}