@@ -1,17 +1,16 @@
< template >
< section class = "px-6 py-20 md:px-12 max-w-7xl mx-auto" >
< h2 class = "text-3xl md:text-4xl font-bold text-center mb-1 4" >
Статус серверов
< / h2 >
< div class = "flex justify-end mb-4" >
< div class = "flex items-center justify-between mb-10 flex-wrap gap- 4" >
< h2 class = "text-3xl md:text-4xl font-bold" >
Статус серверов
< / h2 >
< button
@click ="refreshData"
:disabled = "loading"
class = "px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
class = "px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-x l text-sm font-medium transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
>
< RefreshCw :size = "16" : class = "{ 'animate-spin': loading }" / >
{ { loading ? 'Обновление...' : 'Обновить все ' } }
{ { loading ? 'Обновление...' : 'Обновить пинг ' } }
< / button >
< / div >
@@ -35,18 +34,24 @@
class = "h-5 w-auto rounded-sm"
/ >
< span class = "font-semibold text-gray-800 dark:text-white" > { { host . name } } < / span >
< span
class = "text-[10px] px-2 py-0.5 rounded-full font-medium"
: class = "host.isOnline ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
>
{ { host . isOnline ? 'online' : 'offline' } }
<!-- Индикатор состояния ( вместо online / offline ) -- >
< span class = "relative flex h-3 w-3" >
< span
class = "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
: class = "host.isOnline ? 'bg-green-500' : 'bg-red-500'"
> < / span >
< span
class = "relative inline-flex rounded-full h-3 w-3"
: class = "host.isOnline ? 'bg-green-600' : 'bg-red-600'"
> < / span >
< / span >
< / div >
< div class = "flex items-center gap-4 " >
< div class = "flex items-center gap-3 " >
< span
v-if = "host.ping !== undefined && host.ping !== null"
class = "font-mono font-semibold flex items-center gap-1 min-w-[60px] justify-end "
class = "font-mono font-semibold flex items-center gap-1.5 "
: class = "{
'text-green-600': host.ping < 200,
'text-yellow-600': host.ping >= 200 && host.ping < 500,
@@ -56,20 +61,7 @@
< Wifi :size = "14" / >
{ { host . ping } } ms
< / span >
< span v-else class = "text-gray-300 min-w-[60px] text-right " > — < / span >
< button
@click ="pingSingleHost(host)"
:disabled = "host.pinging"
class = "text-xs px-3 py-1 rounded-lg transition font-medium"
: class = "[
host.isOnline && !host.pinging
? 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed'
]"
>
{ { host . pinging ? '⏳' : 'Пинг' } }
< / button >
< span v-else class = "text-gray-300 font-mono " > — < / span >
< / div >
< / div >
< / div >
@@ -77,40 +69,60 @@
< / template >
< script setup >
import { ref , computed , onMounted , onUnmounted } from 'vue'
import { ref , computed , onMounted } from 'vue'
import { Wifi , RefreshCw } from '@lucide/vue'
import { getAllCountries } from '@tw-labs/countries'
const hosts = ref ( [ ] )
const loading = ref ( true )
const error = ref ( null )
let interval = null
const countriesList = getAllCountries ( )
// Поиск страны по первому слову в названии
// Ручной маппинг для проблемных стран
const countryOverrides = {
'United States' : 'us' ,
'USA' : 'us' ,
'U.S.A.' : 'us' ,
'America' : 'us' ,
'United Arab Emirates' : 'ae' ,
'UAE' : 'ae' ,
}
const findCountryByFirstWord = ( name ) => {
if ( ! name ) return null
// Берём первое слово из названия
// 1. Проверяем ручные override
const override = countryOverrides [ name ]
if ( override ) {
return { code : override . toUpperCase ( ) }
}
// 2. Ищем по первому слову
const firstWord = name . split ( ' ' ) [ 0 ]
if ( ! firstWord ) return null
// Ищем т очное совпадение
// Т
const exact = countriesList . find ( c =>
c . label . toLowerCase ( ) === firstWord . toLowerCase ( )
)
if ( exact ) return exact
// Ищем ч астичное совпадение
// Ч астичное совпадение
const partial = countriesList . find ( c =>
firstWord . toLowerCase ( ) . includes ( c . label . toLowerCase ( ) ) ||
c . label . toLowerCase ( ) . includes ( firstWord . toLowerCase ( ) )
)
return partial || null
if ( partial ) return partial
// 3. Пробуем найти по полному имени
const fullMatch = countriesList . find ( c =>
name . toLowerCase ( ) . includes ( c . label . toLowerCase ( ) ) ||
c . label . toLowerCase ( ) . includes ( name . toLowerCase ( ) )
)
return fullMatch || null
}
// Сортировка по пингу
const sortedHosts = computed ( ( ) => {
return [ ... hosts . value ] . sort ( ( a , b ) => {
if ( a . ping === null && b . ping === null ) return 0
@@ -120,18 +132,6 @@ const sortedHosts = computed(() => {
} )
} )
// Пинг одного хоста
const pingSingleHost = async ( host ) => {
if ( host . pinging || ! host . isOnline ) return
host . pinging = true
host . ping = null
const result = await pingHost ( host )
host . ping = result
host . pinging = false
}
// Пинг через fetch
const pingHost = async ( host ) => {
const url = ` https:// ${ host . address } : ${ host . port } `
const start = performance . now ( )
@@ -149,19 +149,6 @@ const pingHost = async (host) => {
}
}
// Пинг всех хостов
const pingAllHosts = async ( ) => {
const pings = await Promise . all (
hosts . value . map ( async ( h ) => {
if ( ! h . isOnline ) return null
return await pingHost ( h )
} )
)
hosts . value . forEach ( ( h , i ) => {
if ( h . isOnline ) h . ping = pings [ i ]
} )
}
const fetchHosts = async ( ) => {
try {
const res = await fetch ( '/api/v1/hosts' )
@@ -175,11 +162,8 @@ const fetchHosts = async () => {
countryCode : country ? . code ? . toLowerCase ( ) || null ,
isOnline : true ,
ping : null ,
pinging : false ,
}
} )
await pingAllHosts ( )
} catch {
error . value = 'Ошибка загрузки'
} finally {
@@ -189,13 +173,39 @@ const fetchHosts = async () => {
const refreshData = async ( ) => {
loading . value = true
await fetchHosts ( )
loading . value = false
error . value = null
try {
const res = await fetch ( '/api/v1/hosts' )
if ( ! res . ok ) throw new Error ( )
const data = await res . json ( )
hosts . value = data . map ( ( h ) => {
const country = findCountryByFirstWord ( h . name )
return {
... h ,
countryCode : country ? . code ? . toLowerCase ( ) || null ,
isOnline : true ,
ping : null ,
}
} )
const pings = await Promise . all ( hosts . value . map ( h => pingHost ( h ) ) )
hosts . value . forEach ( ( h , i ) => {
if ( h . isOnline ) h . ping = pings [ i ]
} )
} catch {
error . value = 'Ошибка обновления'
} finally {
loading . value = false
}
}
onMounted ( ( ) => {
fetchHosts ( )
interval = setInterval ( refreshData , 30000 )
// При первом открытии — загружаем и пингуем
onMounted ( async ( ) => {
await fetchHosts ( )
// Автоматический пинг только при первом открытии
await refreshData ( )
} )
onUnmounted ( ( ) => clearInterval ( interval ) )
< / script >
austnv