uVPN/frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 6 Activity

update NodesStatus.vue

Browse Source
This commit is contained in:
austnv
2026-06-21 21:38:23 +03:00
parent 4b7b2bc5c6
commit b69cc4bc4b
1 changed files with 85 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NodesStatus.vue
+84 -33
View File
@@ -4,17 +4,28 @@
Статус серверов
</h2>
<div v-if="loading" class="flex justify-center py-12">
<div class="flex justify-end mb-4">
<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"
>
<RefreshCw :size="16" :class="{ 'animate-spin': loading }" />
{{ loading ? 'Обновление...' : 'Обновить все' }}
</button>
</div>
<div v-if="loading && !hosts.length" class="flex justify-center py-12">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
</div>
<p v-else-if="error" class="text-center text-red-500 py-12">{{ error }}</p>
<div v-else class="space-y-3 max-w-3xl mx-auto">
<div v-else class="space-y-2 max-w-3xl mx-auto">
<div
v-for="host in hosts"
v-for="host in sortedHosts"
:key="host.address"
class="flex items-center justify-between bg-white dark:bg-gray-900 rounded-xl px-4 py-3 border transition hover:shadow-md"
class="flex items-center justify-between bg-white dark:bg-gray-900 rounded-xl px-4 py-2.5 border transition hover:shadow-md"
:class="host.isOnline ? 'border-green-500/30' : 'border-red-500/30 opacity-60'"
>
<div class="flex items-center gap-3">
@@ -23,7 +34,7 @@
:src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${host.countryCode}.svg`"
class="h-5 w-auto rounded-sm"
/>
<span class="font-semibold text-gray-800 dark:text-white">{{ host.cleanName }}</span>
<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'"
@@ -32,21 +43,35 @@
</span>
</div>
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-4">
<!-- Пинг -->
<span
v-if="host.ping !== undefined && host.ping !== null"
class="font-mono font-semibold flex items-center gap-1"
class="font-mono font-semibold flex items-center gap-1 min-w-[60px] justify-end"
:class="{
'text-green-600': host.ping < 50,
'text-yellow-600': host.ping >= 50 && host.ping < 150,
'text-orange-600': host.ping >= 150 && host.ping < 300,
'text-red-600': host.ping >= 300,
'text-green-600': host.ping < 200,
'text-yellow-600': host.ping >= 200 && host.ping < 500,
'text-red-600': host.ping >= 500,
}"
>
<Wifi :size="14" />
{{ host.ping }}ms
</span>
<span v-else class="text-gray-300">—</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>
</div>
</div>
</div>
@@ -54,8 +79,8 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Wifi } from '@lucide/vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Wifi, RefreshCw } from '@lucide/vue'
import { getAllCountries } from '@tw-labs/countries'
const hosts = ref([])
@@ -65,7 +90,6 @@ let interval = null
const countriesList = getAllCountries()
// Поиск страны по названию (из IpSecurity.vue)
const findCountryByName = (countryName) => {
if (!countryName) return null
const found = countriesList.find(c => c.label.toLowerCase() === countryName.toLowerCase())
@@ -77,18 +101,29 @@ const findCountryByName = (countryName) => {
return partial || null
}
// Очистка имени от эмодзи и лишних символов
const cleanName = (name) => {
return name.replace(/^[🇷🇺🇫🇮🇸🇪🇺🇸🇵🇱🇱🇻🇳🇱🇩🇪]\s*/, '').replace(/[🚀⭐🔥]/g, '').trim()
// Сортировка по пингу (меньше -> выше)
const sortedHosts = computed(() => {
return [...hosts.value].sort((a, b) => {
// Если пинг null -> в конец
if (a.ping === null && b.ping === null) return 0
if (a.ping === null) return 1
if (b.ping === null) return -1
return a.ping - b.ping
})
})
// Пинг одного хоста
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
}
// Извлечение названия страны из name (удаляем эмодзи)
const extractCountryName = (name) => {
const cleaned = cleanName(name)
return cleaned.replace(/\s*\d+$/, '').trim() // убираем цифры в конце (например "Finland 2" -> "Finland")
}
// Пинг через fetch (работает даже с невалидным сертификатом)
// Пинг через fetch
const pingHost = async (host) => {
const url = `https://${host.address}:${host.port}`
const start = performance.now()
@@ -106,6 +141,19 @@ 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')
@@ -113,20 +161,17 @@ const fetchHosts = async () => {
const data = await res.json()
hosts.value = data.map((h) => {
const countryName = extractCountryName(h.name)
const country = findCountryByName(countryName)
const country = findCountryByName(h.name)
return {
...h,
cleanName: cleanName(h.name),
countryCode: country?.code?.toLowerCase() || null,
isOnline: true,
ping: null,
pinging: false,
}
})
const pings = await Promise.all(hosts.value.map((h) => pingHost(h)))
hosts.value.forEach((h, i) => (h.ping = pings[i]))
await pingAllHosts()
} catch {
error.value = 'Ошибка загрузки'
} finally {
@@ -134,9 +179,15 @@ const fetchHosts = async () => {
}
}
const refreshData = async () => {
loading.value = true
await fetchHosts()
loading.value = false
}
onMounted(() => {
fetchHosts()
interval = setInterval(fetchHosts, 30000)
interval = setInterval(refreshData, 30000)
})
onUnmounted(() => clearInterval(interval))
</script>
</script>s