mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-27 22:54:03 +08:00
fix(proxies): latency widget
This commit is contained in:
parent
b3c1bde4c2
commit
b511b88cd1
@ -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()}`}>
|
||||
<span class={`whitespace-nowrap text-xs ${textClassName()}`}>
|
||||
{latency()}
|
||||
{t('ms')}
|
||||
</span>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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) => (
|
||||
|
@ -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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
export * from './Button'
|
||||
export * from './Collpase'
|
||||
export * from './Collapse'
|
||||
export * from './ConnectionsTableOrderingModal'
|
||||
export * from './ForTwoColumns'
|
||||
export * from './Header'
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user