fix(proxy): selectProxyInGroup

This commit is contained in:
kunish 2023-09-17 14:55:03 +08:00
parent 72797aaf20
commit dc0b286a88
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 32 additions and 38 deletions

View File

@ -26,7 +26,6 @@ import {
proxiesOrderingType, proxiesOrderingType,
useProxies, useProxies,
} from '~/signals' } from '~/signals'
import type { Proxy } from '~/types'
enum ActiveTab { enum ActiveTab {
proxyProviders = 'proxyProviders', proxyProviders = 'proxyProviders',
@ -37,7 +36,7 @@ export default () => {
const [t] = useI18n() const [t] = useI18n()
const { const {
proxies, proxies,
setProxyGroupByProxyName, selectProxyInGroup,
latencyTestByProxyGroupName, latencyTestByProxyGroupName,
latencyMap, latencyMap,
proxyProviders, proxyProviders,
@ -50,10 +49,6 @@ export default () => {
const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } = const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
useStringBooleanMap() useStringBooleanMap()
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
void setProxyGroupByProxyName(proxy, proxyName)
}
const onLatencyTestClick = async (e: MouseEvent, name: string) => { const onLatencyTestClick = async (e: MouseEvent, name: string) => {
e.stopPropagation() e.stopPropagation()
void setLatencyTestingMap(name, () => latencyTestByProxyGroupName(name)) void setLatencyTestingMap(name, () => latencyTestByProxyGroupName(name))
@ -153,11 +148,11 @@ export default () => {
<Show when={activeTab() === ActiveTab.proxies}> <Show when={activeTab() === ActiveTab.proxies}>
<div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2"> <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
<For each={proxies()}> <For each={proxies()}>
{(proxy) => { {(proxyGroup) => {
const sortedProxyNames = createMemo(() => const sortedProxyNames = createMemo(() =>
filterProxiesByAvailability( filterProxiesByAvailability(
sortProxiesByOrderingType( sortProxiesByOrderingType(
proxy.all ?? [], proxyGroup.all ?? [],
latencyMap(), latencyMap(),
proxiesOrderingType(), proxiesOrderingType(),
), ),
@ -170,18 +165,20 @@ export default () => {
<> <>
<div class="mr-8 flex items-center justify-between"> <div class="mr-8 flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span>{proxy.name}</span> <span>{proxyGroup.name}</span>
<div class="badge badge-sm">{proxy.all?.length}</div> <div class="badge badge-sm">
{proxyGroup.all?.length}
</div>
</div> </div>
<Button <Button
class="btn-circle btn-sm" class="btn-circle btn-sm"
disabled={latencyTestingMap()[proxy.name]} disabled={latencyTestingMap()[proxyGroup.name]}
onClick={(e) => onLatencyTestClick(e, proxy.name)} onClick={(e) => onLatencyTestClick(e, proxyGroup.name)}
> >
<IconBrandSpeedtest <IconBrandSpeedtest
class={twMerge( class={twMerge(
latencyTestingMap()[proxy.name] && latencyTestingMap()[proxyGroup.name] &&
'animate-pulse text-success', 'animate-pulse text-success',
)} )}
/> />
@ -189,13 +186,14 @@ export default () => {
</div> </div>
<div class="text-sm text-slate-500"> <div class="text-sm text-slate-500">
{proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`} {proxyGroup.type}{' '}
{proxyGroup.now?.length > 0 && ` :: ${proxyGroup.now}`}
</div> </div>
<Show when={!collapsedMap()[proxy.name]}> <Show when={!collapsedMap()[proxyGroup.name]}>
<ProxyNodePreview <ProxyNodePreview
proxyNameList={sortedProxyNames()} proxyNameList={sortedProxyNames()}
now={proxy.now} now={proxyGroup.now}
/> />
</Show> </Show>
</> </>
@ -203,14 +201,16 @@ export default () => {
return ( return (
<Collapse <Collapse
isOpen={collapsedMap()[proxy.name]} isOpen={collapsedMap()[proxyGroup.name]}
title={title} title={title}
onCollapse={(val) => setCollapsedMap(proxy.name, val)} onCollapse={(val) => setCollapsedMap(proxyGroup.name, val)}
> >
<ProxyCardGroups <ProxyCardGroups
proxyNames={sortedProxyNames()} proxyNames={sortedProxyNames()}
now={proxy.now} now={proxyGroup.now}
onClick={(name) => void onProxyNodeClick(proxy, name)} onClick={(name) =>
void selectProxyInGroup(proxyGroup, name)
}
/> />
</Collapse> </Collapse>
) )

View File

@ -47,10 +47,11 @@ export const useConnections = () => {
rawConns, rawConns,
activeConnections(), activeConnections(),
) )
const allConns = mergeAllConnections(activeConns)
mergeAllConnections(activeConnections())
if (!paused()) { if (!paused()) {
const closedConns = diffClosedConnections(activeConns, allConns) const closedConns = diffClosedConnections(activeConns, allConnections())
setActiveConnections(activeConns) setActiveConnections(activeConns)
setClosedConnections( setClosedConnections(
@ -58,8 +59,8 @@ export const useConnections = () => {
) )
} }
setAllConnections( setAllConnections((allConnections) =>
allConns.slice( allConnections.slice(
-(activeConns.length + CONNECTIONS_TABLE_MAX_CLOSED_ROWS), -(activeConns.length + CONNECTIONS_TABLE_MAX_CLOSED_ROWS),
), ),
) )
@ -101,12 +102,12 @@ export const restructRawMsgToConnection = (
} }
export const mergeAllConnections = (activeConns: Connection[]) => { export const mergeAllConnections = (activeConns: Connection[]) => {
return unionWith(allConnections(), activeConns, (a, b) => a.id === b.id) setAllConnections((allConnections) =>
unionWith(allConnections, activeConns, (a, b) => a.id === b.id),
)
} }
const diffClosedConnections = ( const diffClosedConnections = (
activeConns: Connection[], activeConns: Connection[],
allConns: Connection[], allConns: Connection[],
) => { ) => differenceWith(allConns, activeConns, (a, b) => a.id === b.id)
return differenceWith(allConns, activeConns, (a, b) => a.id === b.id)
}

View File

@ -13,7 +13,6 @@ import {
latencyQualityMap, latencyQualityMap,
latencyTestTimeoutDuration, latencyTestTimeoutDuration,
latestConnectionMsg, latestConnectionMsg,
mergeAllConnections,
restructRawMsgToConnection, restructRawMsgToConnection,
urlForLatencyTest, urlForLatencyTest,
} from '~/signals' } from '~/signals'
@ -90,11 +89,9 @@ export const useProxies = () => {
}) })
} }
const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => { const selectProxyInGroup = async (proxy: Proxy, proxyName: string) => {
const proxyGroupList = proxies().slice()
const proxyGroup = proxyGroupList.find((i) => i.name === proxy.name)!
await selectProxyInGroupAPI(proxy.name, proxyName) await selectProxyInGroupAPI(proxy.name, proxyName)
await updateProxies()
if (autoCloseConns()) { if (autoCloseConns()) {
// we don't use activeConns from useConnection here for better performance, // we don't use activeConns from useConnection here for better performance,
@ -111,13 +108,9 @@ export const useProxies = () => {
closeSingleConnectionAPI(id) closeSingleConnectionAPI(id)
} }
}) })
mergeAllConnections(activeConns)
} }
}) })
} }
proxyGroup.now = proxyName
setProxies(proxyGroupList)
} }
const latencyTestByProxyGroupName = async (proxyGroupName: string) => { const latencyTestByProxyGroupName = async (proxyGroupName: string) => {
@ -159,7 +152,7 @@ export const useProxies = () => {
latencyMap, latencyMap,
proxyNodeMap, proxyNodeMap,
updateProxies, updateProxies,
setProxyGroupByProxyName, selectProxyInGroup,
updateProviderByProviderName, updateProviderByProviderName,
updateAllProvider, updateAllProvider,
healthCheckByProviderName, healthCheckByProviderName,