mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +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 (
|
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 text-xs ${textClassName()}`}>
|
||||||
<span class={`whitespace-nowrap ${textClassName()}`}>
|
{latency()}
|
||||||
{latency()}
|
{t('ms')}
|
||||||
{t('ms')}
|
</span>
|
||||||
</span>
|
</Show>
|
||||||
</Show>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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) => (
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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'
|
||||||
|
@ -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)
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user