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 (
<>
<Show
when={
typeof latency() === 'number' &&
latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
}
>
<span class={`whitespace-nowrap ${textClassName()}`}>
{latency()}
{t('ms')}
</span>
</Show>
</>
<Show
when={
typeof latency() === 'number' &&
latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
}
>
<span class={`whitespace-nowrap text-xs ${textClassName()}`}>
{latency()}
{t('ms')}
</span>
</Show>
)
}

View File

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

View File

@ -8,7 +8,7 @@ export const ProxyPreviewBar = (props: {
}) => {
const { latencyMap } = useProxies()
const latencyList = createMemo(() =>
props.proxyNameList.map((i) => latencyMap()[i]),
props.proxyNameList.map((name) => latencyMap()[name]),
)
const all = createMemo(() => latencyList().length)
const good = createMemo(
@ -42,7 +42,7 @@ export const ProxyPreviewBar = (props: {
)
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="h-2 bg-success"
@ -69,9 +69,8 @@ export const ProxyPreviewBar = (props: {
}}
></div>
</div>
<div class="ml-3 w-8 text-xs">
<Latency name={props.now} />
</div>
<Latency name={props.now} />
</div>
)
}

View File

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

View File

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

View File

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