fix(proxies): latency widget

This commit is contained in:
kunish 2023-09-03 06:08:53 +08:00
parent b3c1bde4c2
commit b511b88cd1
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
7 changed files with 43 additions and 43 deletions

View File

@ -22,18 +22,16 @@ export const Latency = (props: { name?: string }) => {
}) })
return ( return (
<>
<Show <Show
when={ when={
typeof latency() === 'number' && typeof latency() === 'number' &&
latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
} }
> >
<span class={`whitespace-nowrap ${textClassName()}`}> <span class={`whitespace-nowrap text-xs ${textClassName()}`}>
{latency()} {latency()}
{t('ms')} {t('ms')}
</span> </span>
</Show> </Show>
</>
) )
} }

View File

@ -3,17 +3,17 @@ import { createMemo, createSignal } from 'solid-js'
import { ProxyNodeCard } from '~/components' import { ProxyNodeCard } from '~/components'
export const ProxyCardGroups = (props: { export const ProxyCardGroups = (props: {
proxies: string[] proxyNames: string[]
now?: string now?: string
onClick?: (name: string) => void onClick?: (name: string) => void
}) => { }) => {
const [maxRender, setMaxRender] = createSignal(100) const [maxRender, setMaxRender] = createSignal(100)
const proxies = createMemo(() => props.proxies.slice(0, maxRender())) const proxyNames = createMemo(() => props.proxyNames.slice(0, maxRender()))
return ( return (
<InfiniteScroll <InfiniteScroll
each={proxies()} each={proxyNames()}
hasMore={proxies().length < props.proxies.length} hasMore={proxyNames().length < props.proxyNames.length}
next={() => setMaxRender(maxRender() + 30)} next={() => setMaxRender(maxRender() + 30)}
> >
{(proxy) => ( {(proxy) => (

View File

@ -8,7 +8,7 @@ export const ProxyPreviewBar = (props: {
}) => { }) => {
const { latencyMap } = useProxies() const { latencyMap } = useProxies()
const latencyList = createMemo(() => const latencyList = createMemo(() =>
props.proxyNameList.map((i) => latencyMap()[i]), props.proxyNameList.map((name) => latencyMap()[name]),
) )
const all = createMemo(() => latencyList().length) const all = createMemo(() => latencyList().length)
const good = createMemo( const good = createMemo(
@ -42,7 +42,7 @@ export const ProxyPreviewBar = (props: {
) )
return ( return (
<div class="flex h-6 w-full items-center"> <div class="flex h-6 w-full items-center gap-2">
<div class="flex flex-1 overflow-hidden rounded-2xl"> <div class="flex flex-1 overflow-hidden rounded-2xl">
<div <div
class="h-2 bg-success" class="h-2 bg-success"
@ -69,9 +69,8 @@ export const ProxyPreviewBar = (props: {
}} }}
></div> ></div>
</div> </div>
<div class="ml-3 w-8 text-xs">
<Latency name={props.now} /> <Latency name={props.now} />
</div> </div>
</div>
) )
} }

View File

@ -1,5 +1,5 @@
export * from './Button' export * from './Button'
export * from './Collpase' export * from './Collapse'
export * from './ConnectionsTableOrderingModal' export * from './ConnectionsTableOrderingModal'
export * from './ForTwoColumns' export * from './ForTwoColumns'
export * from './Header' export * from './Header'

View File

@ -45,6 +45,12 @@ export default () => {
</h1> </h1>
<ForTwoColumns <ForTwoColumns
subChild={proxies().map((proxy) => { subChild={proxies().map((proxy) => {
const sortedProxyNames = sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)
const title = ( const title = (
<> <>
<div class="mr-10 flex items-center justify-between"> <div class="mr-10 flex items-center justify-between">
@ -61,11 +67,7 @@ export default () => {
</div> </div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}> <Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview <ProxyNodePreview
proxyNameList={sortProxiesByOrderingType( proxyNameList={sortedProxyNames}
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)}
now={proxy.now} now={proxy.now}
/> />
</Show> </Show>
@ -74,11 +76,7 @@ export default () => {
const content = ( const content = (
<ProxyCardGroups <ProxyCardGroups
proxies={sortProxiesByOrderingType( proxyNames={sortedProxyNames}
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)}
now={proxy.now} now={proxy.now}
onClick={(name) => { onClick={(name) => {
onProxyNodeClick(proxy, name) onProxyNodeClick(proxy, name)

View File

@ -9,8 +9,12 @@ import {
ProxyNodePreview, ProxyNodePreview,
SubscriptionInfo, SubscriptionInfo,
} from '~/components' } from '~/components'
import { formatTimeFromNow, getBtnElFromClickEvent } from '~/helpers' import {
import { useProxies } from '~/signals' formatTimeFromNow,
getBtnElFromClickEvent,
sortProxiesByOrderingType,
} from '~/helpers'
import { proxiesOrderingType, useProxies } from '~/signals'
export default () => { export default () => {
const [t] = useI18n() const [t] = useI18n()
@ -19,6 +23,7 @@ export default () => {
updateProviderByProviderName, updateProviderByProviderName,
updateAllProvider, updateAllProvider,
healthCheckByProviderName, healthCheckByProviderName,
latencyMap,
} = useProxies() } = useProxies()
const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>( const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
@ -66,6 +71,12 @@ export default () => {
</h1> </h1>
<ForTwoColumns <ForTwoColumns
subChild={proxyProviders().map((proxyProvider) => { subChild={proxyProviders().map((proxyProvider) => {
const sortedProxyNames = sortProxiesByOrderingType(
proxyProvider.proxies.map((i) => i.name) ?? [],
latencyMap(),
proxiesOrderingType(),
)
const title = ( const title = (
<> <>
<div class="mr-8 flex items-center justify-between"> <div class="mr-8 flex items-center justify-between">
@ -96,18 +107,12 @@ export default () => {
{formatTimeFromNow(proxyProvider.updatedAt)} {formatTimeFromNow(proxyProvider.updatedAt)}
</div> </div>
<Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}> <Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
<ProxyNodePreview <ProxyNodePreview proxyNameList={sortedProxyNames} />
proxyNameList={proxyProvider.proxies.map((i) => i.name) ?? []}
/>
</Show> </Show>
</> </>
) )
const content = ( const content = <ProxyCardGroups proxyNames={sortedProxyNames} />
<ProxyCardGroups
proxies={proxyProvider.proxies.map((i) => i.name)}
/>
)
return ( return (
<Collapse <Collapse