feat(proxy): single proxy node latency testing state indicator

This commit is contained in:
kunish 2023-09-24 18:05:52 +08:00
parent 8f8a54af0a
commit 0052ce4325
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 52 additions and 30 deletions

View File

@ -10,7 +10,7 @@ export const ProxyNodeCard = (props: {
isSelected?: boolean
onClick?: () => void
}) => {
const { proxyLatencyTest } = useProxies()
const { proxyLatencyTest, proxyLatencyTestingMap } = useProxies()
const { proxyName, isSelected, onClick } = props
const { proxyNodeMap } = useProxies()
const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
@ -38,7 +38,14 @@ export const ProxyNodeCard = (props: {
<Button
class="btn-circle btn-ghost btn-sm"
icon={<IconBrandSpeedtest />}
icon={
<IconBrandSpeedtest
class={twMerge(
proxyLatencyTestingMap()[proxyName] &&
'animate-pulse text-success',
)}
/>
}
onClick={(e) => {
e.stopPropagation()

View File

@ -48,8 +48,8 @@ export default () => {
proxyProviderLatencyTest,
collapsedMap,
setCollapsedMap,
latencyTestingMap,
healthCheckingMap,
proxyGroupLatencyTestingMap,
proxyProviderLatencyTestingMap,
isAllProviderUpdating,
updatingMap,
} = useProxies()
@ -170,14 +170,16 @@ export default () => {
<Button
class="btn-circle btn-sm"
disabled={latencyTestingMap()[proxyGroup.name]}
disabled={
proxyGroupLatencyTestingMap()[proxyGroup.name]
}
onClick={(e) =>
onProxyGroupLatencyTestClick(e, proxyGroup.name)
}
icon={
<IconBrandSpeedtest
class={twMerge(
latencyTestingMap()[proxyGroup.name] &&
proxyGroupLatencyTestingMap()[proxyGroup.name] &&
'animate-pulse text-success',
)}
/>
@ -264,7 +266,9 @@ export default () => {
<Button
class="btn btn-circle btn-sm"
disabled={healthCheckingMap()[proxyProvider.name]}
disabled={
proxyProviderLatencyTestingMap()[proxyProvider.name]
}
onClick={(e) =>
onProxyProviderLatencyTestClick(
e,
@ -274,8 +278,9 @@ export default () => {
icon={
<IconBrandSpeedtest
class={twMerge(
healthCheckingMap()[proxyProvider.name] &&
'animate-pulse text-success',
proxyProviderLatencyTestingMap()[
proxyProvider.name
] && 'animate-pulse text-success',
)}
/>
}

View File

@ -28,10 +28,18 @@ type ProxyInfo = {
}
const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
useStringBooleanMap()
const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
useStringBooleanMap()
const {
map: proxyLatencyTestingMap,
setWithCallback: setProxyLatencyTestingMap,
} = useStringBooleanMap()
const {
map: proxyGroupLatencyTestingMap,
setWithCallback: setProxyGroupLatencyTestingMap,
} = useStringBooleanMap()
const {
map: proxyProviderLatencyTestingMap,
setWithCallback: setProxyProviderLatencyTestingMap,
} = useStringBooleanMap()
const { map: updatingMap, setWithCallback: setUpdatingMap } =
useStringBooleanMap()
const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
@ -123,21 +131,22 @@ export const useProxies = () => {
}
}
const proxyLatencyTest = async (proxyName: string) => {
const { delay } = await proxyLatencyTestAPI(
proxyName,
urlForLatencyTest(),
latencyTestTimeoutDuration(),
)
const proxyLatencyTest = (proxyName: string) =>
setProxyLatencyTestingMap(proxyName, async () => {
const { delay } = await proxyLatencyTestAPI(
proxyName,
urlForLatencyTest(),
latencyTestTimeoutDuration(),
)
setLatencyMap((latencyMap) => ({
...latencyMap,
[proxyName]: delay,
}))
}
setLatencyMap((latencyMap) => ({
...latencyMap,
[proxyName]: delay,
}))
})
const proxyGroupLatencyTest = async (proxyGroupName: string) =>
setLatencyTestingMap(proxyGroupName, async () => {
const proxyGroupLatencyTest = (proxyGroupName: string) =>
setProxyGroupLatencyTestingMap(proxyGroupName, async () => {
const newLatencyMap = await proxyGroupLatencyTestAPI(
proxyGroupName,
urlForLatencyTest(),
@ -152,7 +161,7 @@ export const useProxies = () => {
await fetchProxies()
})
const updateProviderByProviderName = async (providerName: string) =>
const updateProviderByProviderName = (providerName: string) =>
setUpdatingMap(providerName, async () => {
try {
await updateProxyProviderAPI(providerName)
@ -175,7 +184,7 @@ export const useProxies = () => {
}
const proxyProviderLatencyTest = (providerName: string) =>
setHealthCheckingMap(providerName, async () => {
setProxyProviderLatencyTestingMap(providerName, async () => {
await proxyProviderLatencyTest(providerName)
await fetchProxies()
})
@ -183,8 +192,9 @@ export const useProxies = () => {
return {
collapsedMap,
setCollapsedMap,
latencyTestingMap,
healthCheckingMap,
proxyLatencyTestingMap,
proxyGroupLatencyTestingMap,
proxyProviderLatencyTestingMap,
updatingMap,
isAllProviderUpdating,
proxies,