mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: speed test dot for proxy
This commit is contained in:
parent
5250cccf1d
commit
e9c6666606
@ -1,5 +1,6 @@
|
|||||||
import { JSX, ParentComponent } from 'solid-js'
|
import { JSX, ParentComponent } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
// import { Ch} from '@tabler/icons-solidjs'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title: JSX.Element
|
title: JSX.Element
|
||||||
@ -31,7 +32,7 @@ const Collapse: ParentComponent<Props> = (props) => {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="collapse-title text-xl font-medium"
|
class="collapse-title pr-1 text-xl font-medium after:!top-8"
|
||||||
onClick={() => onCollapse(!props.isOpen)}
|
onClick={() => onCollapse(!props.isOpen)}
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { createMemo } from 'solid-js'
|
import { createMemo } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { useProxies } from '~/signals/proxies'
|
import { useProxies } from '~/signals/proxies'
|
||||||
|
import { getClassNameByDelay } from '~/utils/proxies'
|
||||||
|
|
||||||
export default (props: {
|
export default (props: {
|
||||||
proxyName: string
|
proxyName: string
|
||||||
@ -16,13 +17,8 @@ export default (props: {
|
|||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
|
||||||
let textClassName = 'text-green-500'
|
const color = getClassNameByDelay(delay)
|
||||||
|
const textClassName = `text-${color}`
|
||||||
if (delay > 500) {
|
|
||||||
textClassName = 'text-red-500'
|
|
||||||
} else if (delay > 200) {
|
|
||||||
textClassName = 'text-yellow-500'
|
|
||||||
}
|
|
||||||
|
|
||||||
return <span class={textClassName}>{delay}ms</span>
|
return <span class={textClassName}>{delay}ms</span>
|
||||||
}
|
}
|
||||||
|
33
src/components/ProxyNodeDots.tsx
Normal file
33
src/components/ProxyNodeDots.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { For } from 'solid-js'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { useProxies } from '~/signals/proxies'
|
||||||
|
import { getClassNameByDelay } from '~/utils/proxies'
|
||||||
|
|
||||||
|
const Delay = (p: { delay: number | undefined; selected: boolean }) => {
|
||||||
|
const color = getClassNameByDelay(p.delay)
|
||||||
|
const bgClassName = `bg-${color}`
|
||||||
|
const isSelected = p.selected && `border-2 border-primary`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={twMerge('m-1 h-4 w-4 rounded-full', bgClassName, isSelected)}
|
||||||
|
></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (props: { proxyNameList: string[]; now?: string }) => {
|
||||||
|
const { proxyNodeMap } = useProxies()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex w-full flex-wrap">
|
||||||
|
<For each={props.proxyNameList.map((name) => proxyNodeMap()[name]!)}>
|
||||||
|
{(proxy) => {
|
||||||
|
const delay = proxy?.delay
|
||||||
|
const isSelected = props.now === proxy.name
|
||||||
|
|
||||||
|
return <Delay delay={delay} selected={isSelected} />
|
||||||
|
}}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -2,10 +2,11 @@ import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
|
|||||||
import { For, Show, createSignal, onMount } from 'solid-js'
|
import { For, Show, createSignal, onMount } from 'solid-js'
|
||||||
import Collapse from '~/components/Collpase'
|
import Collapse from '~/components/Collpase'
|
||||||
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
||||||
|
import ProxyNodeDots from '~/components/ProxyNodeDots'
|
||||||
import SubscriptionInfo from '~/components/SubscriptionInfo'
|
import SubscriptionInfo from '~/components/SubscriptionInfo'
|
||||||
import { useProxies } from '~/signals/proxies'
|
import { useProxies } from '~/signals/proxies'
|
||||||
import type { Proxy } from '~/types'
|
import type { Proxy } from '~/types'
|
||||||
import { formatTimeFromNow } from '~/utils/date'
|
import { formatTimeFromNow } from '~/utils/proxies'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const {
|
const {
|
||||||
@ -66,22 +67,26 @@ export default () => {
|
|||||||
<For each={proxies()}>
|
<For each={proxies()}>
|
||||||
{(proxy) => {
|
{(proxy) => {
|
||||||
const title = (
|
const title = (
|
||||||
<div class="flex items-center justify-between">
|
<>
|
||||||
<div class="flex flex-col">
|
<div class="mr-10 flex items-center justify-between">
|
||||||
<span>{proxy.name}</span>
|
<span>{proxy.name}</span>
|
||||||
|
<button
|
||||||
<div class="text-sm text-slate-500">
|
class="btn btn-circle btn-sm"
|
||||||
{proxy.type} :: {proxy.now}
|
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||||
</div>
|
>
|
||||||
|
<IconBrandSpeedtest />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text-sm text-slate-500">
|
||||||
<button
|
{proxy.type} :: {proxy.now}
|
||||||
class="btn btn-circle btn-sm"
|
</div>
|
||||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
|
||||||
>
|
<ProxyNodeDots
|
||||||
<IconBrandSpeedtest />
|
proxyNameList={proxy.all ?? []}
|
||||||
</button>
|
now={proxy.now}
|
||||||
</div>
|
/>
|
||||||
|
</Show>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
|
|
||||||
const content = (
|
const content = (
|
||||||
@ -123,35 +128,45 @@ export default () => {
|
|||||||
<For each={proxyProviders()}>
|
<For each={proxyProviders()}>
|
||||||
{(proxyProvider) => {
|
{(proxyProvider) => {
|
||||||
const title = (
|
const title = (
|
||||||
<div class="flex items-center justify-between">
|
<>
|
||||||
<div class="flex flex-col gap-1">
|
<div class="mr-10 flex items-center justify-between">
|
||||||
<span>{proxyProvider.name}</span>
|
<span>{proxyProvider.name}</span>
|
||||||
<SubscriptionInfo
|
<div>
|
||||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
<button
|
||||||
/>
|
class="btn btn-circle btn-sm mr-2"
|
||||||
<div class="text-sm text-slate-500">
|
onClick={(e) =>
|
||||||
{proxyProvider.vehicleType} :: Updated{' '}
|
onUpdateProviderClick(e, proxyProvider.name)
|
||||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
}
|
||||||
|
>
|
||||||
|
<IconReload />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-circle btn-sm"
|
||||||
|
onClick={(e) =>
|
||||||
|
onHealthCheckClick(e, proxyProvider.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconBrandSpeedtest />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<SubscriptionInfo
|
||||||
<div class="flex flex-nowrap">
|
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||||
<button
|
/>
|
||||||
class="btn btn-circle btn-sm mr-2"
|
<div class="text-sm text-slate-500">
|
||||||
onClick={(e) =>
|
{proxyProvider.vehicleType} :: Updated{' '}
|
||||||
onUpdateProviderClick(e, proxyProvider.name)
|
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||||
}
|
|
||||||
>
|
|
||||||
<IconReload />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-circle btn-sm"
|
|
||||||
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
|
|
||||||
>
|
|
||||||
<IconBrandSpeedtest />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Show
|
||||||
|
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||||
|
>
|
||||||
|
<ProxyNodeDots
|
||||||
|
proxyNameList={
|
||||||
|
proxyProvider.proxies.map((i) => i.name) ?? []
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Show>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
const content = (
|
const content = (
|
||||||
<For each={proxyProvider.proxies}>
|
<For each={proxyProvider.proxies}>
|
||||||
|
@ -1,8 +0,0 @@
|
|||||||
import dayjs from 'dayjs'
|
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
||||||
|
|
||||||
dayjs.extend(relativeTime)
|
|
||||||
|
|
||||||
export function formatTimeFromNow(time: number | string) {
|
|
||||||
return dayjs(time).fromNow()
|
|
||||||
}
|
|
22
src/utils/proxies.ts
Normal file
22
src/utils/proxies.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import dayjs from 'dayjs'
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
|
|
||||||
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
export function formatTimeFromNow(time: number | string) {
|
||||||
|
return dayjs(time).fromNow()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getClassNameByDelay(delay: number | undefined) {
|
||||||
|
let name = 'green-500'
|
||||||
|
|
||||||
|
if (typeof delay !== 'number' || delay === 0) {
|
||||||
|
name = 'base-100'
|
||||||
|
} else if (delay > 500) {
|
||||||
|
name = 'red-500'
|
||||||
|
} else if (delay > 200) {
|
||||||
|
name = 'yellow-500'
|
||||||
|
}
|
||||||
|
|
||||||
|
return name
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user