From 8f1523abcf0509978aa2b6177db72f10bbb3f763 Mon Sep 17 00:00:00 2001 From: host Date: Sun, 3 May 2026 19:13:16 +0300 Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?= =?UTF-8?q?dashboard=20=C2=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dashboard /infra-dashboard.jsx | 416 +++++++++++++++++++++++++++++++++ 1 file changed, 416 insertions(+) create mode 100644 dashboard /infra-dashboard.jsx diff --git a/dashboard /infra-dashboard.jsx b/dashboard /infra-dashboard.jsx new file mode 100644 index 0000000..d659529 --- /dev/null +++ b/dashboard /infra-dashboard.jsx @@ -0,0 +1,416 @@ +import { useState } from "react"; + +const data = { + truenas: { + apps: [ + { name: "SearXNG", image: "searxng/searxng", version: "2026.4.29", ports: ["30053"], status: "up", uptime: "3 мин", icon: "🔍", category: "Утилиты" }, + { name: "Beszel Hub", image: "henrygd/beszel", version: "0.18.7", ports: ["30333"], status: "up", uptime: "5 мин", icon: "📊", category: "Мониторинг" }, + { name: "TeamSpeak", image: "teamspeak", version: "3.13.7", ports: ["10011","10022","9987/udp","30033"], status: "up", uptime: "5 мин", icon: "🎙️", category: "Коммуникации" }, + { name: "MariaDB", image: "mariadb", version: "11.8.6", ports: ["3306 (.31.100)"], status: "up", uptime: "5 мин", icon: "🗄️", category: "БД" }, + { name: "qBittorrent", image: "home-oper./qbittorrent", version: "5.1.4", ports: ["30024","51413/tcp+udp"], status: "up", uptime: "5 мин", icon: "🌊", category: "Медиа" }, + { name: "Ollama", image: "ollama/ollama", version: "0.22.0", ports: ["11434"], status: "up", uptime: "5 мин", icon: "🤖", category: "AI" }, + { name: "Open WebUI", image: "open-webui", version: "v0.9.2-ollama", ports: ["3000"], status: "up", uptime: "5 ч", icon: "💬", category: "AI" }, + { name: "Nextcloud", image: "ix-nextcloud", version: "33.0.2", ports: ["30027"], status: "up", uptime: "20 ч", icon: "☁️", category: "Хранилище" }, + { name: "Immich", image: "immich-server", version: "v2.7.5", ports: ["30041"], status: "up", uptime: "20 ч", icon: "📷", category: "Медиа" }, + { name: "WG-Easy", image: "wg-easy", version: "15.2.2", ports: ["30058"], status: "up", uptime: "20 ч", icon: "🔒", category: "Сеть" }, + { name: "Vaultwarden", image: "vaultwarden/server", version: "1.35.8", ports: ["30032"], status: "up", uptime: "20 ч", icon: "🔑", category: "Безопасность" }, + { name: "Jellyfin", image: "jellyfin/jellyfin", version: "10.11.8", ports: ["8096"], status: "up", uptime: "20 ч", icon: "🎬", category: "Медиа" }, + { name: "Heimdall", image: "linuxserver/heimdall", version: "2.7.6", ports: ["30119","30120"], status: "up", uptime: "20 ч", icon: "🏠", category: "Утилиты" }, + { name: "Gitea", image: "gitea/gitea", version: "1.26.1-rootless", ports: ["30008","30009"], status: "up", uptime: "20 ч", icon: "🐱", category: "Dev" }, + { name: "Frigate", image: "frigate", version: "0.17.1", ports: ["30193","30194"], status: "up", uptime: "20 ч", icon: "📹", category: "Медиа" }, + { name: "Dockge", image: "louislam/dockge", version: "1.5.0", ports: ["31014"], status: "up", uptime: "20 ч", icon: "🐳", category: "Dev" }, + { name: "Termix", image: "lukegus/termix", version: "release-2.1.0", ports: ["30351"], status: "up", uptime: "20 ч", icon: "💻", category: "Dev" }, + { name: "OnlyOffice", image: "onlyoffice/documentserver", version: "9.3.1", ports: ["30134"], status: "up", uptime: "20 ч", icon: "📝", category: "Утилиты" }, + { name: "Mail Archiver", image: "s1t5/mailarchiver", version: "2604.2", ports: ["30315"], status: "up", uptime: "20 ч", icon: "📧", category: "Утилиты" }, + ], + dockge: [ + { name: "Beszel Agent", image: "henrygd/beszel-agent", version: "latest", ports: ["—"], status: "up", uptime: "4 мин", icon: "📡", category: "Мониторинг" }, + { name: "Dockmon", image: "darthnorse/dockmon", version: "latest", ports: ["8001"], status: "up", uptime: "20 ч", icon: "👁️", category: "Мониторинг" }, + { name: "TorrServer", image: "yourok/torrserver", version: "latest", ports: ["8090"], status: "up", uptime: "20 ч", icon: "🌊", category: "Медиа" }, + { name: "Prunemate", image: "anoniemerd/prunemate", version: "latest", ports: ["7676"], status: "up", uptime: "20 ч", icon: "✂️", category: "Утилиты" }, + { name: "OmniRoute", image: "diegosouzapw/omniroute", version: "latest", ports: ["—"], status: "exited", uptime: "11 дн назад", icon: "🔀", category: "Сеть" }, + { name: "Code-Server", image: "linuxserver/code-server", version: "latest", ports: ["—"], status: "exited", uptime: "11 дн назад", icon: "🖊️", category: "Dev" }, + ], + }, + proxmox1: [ + { name: "Home Assistant", type: "VM", ip: "192.168.31.10", icon: "🏡", status: "up", note: "БД → MariaDB LXC" }, + { name: "AdGuard Home", type: "LXC", ip: "192.168.31.3", icon: "🛡️", status: "up", note: "DNS → Keenetic Ultra" }, + { name: "MariaDB", type: "LXC", ip: "192.168.31.21", icon: "🗄️", status: "up", note: "БД для Home Assistant" }, + ], + servers: [ + { name: "TrueNAS", model: "WTR PRO", cpu: "Ryzen 7 5825U (16T)", ram: "64 GiB", disk: "~7.5 TiB полезных", ip: "192.168.31.100", os: "TrueNAS CE 25.10.3", status: "up", icon: "🔷" }, + { name: "Mini PC #1", model: "Celeron", cpu: "Celeron J4125 (4C)", ram: "15.46 GiB", disk: "38.64 GiB", ip: "192.168.31.2", os: "Proxmox VE 9.1.9", status: "up", icon: "🔶" }, + { name: "Mini PC #2", model: "Ryzen", cpu: "Ryzen 7 5825U (16T)", ram: "28.29 GiB", disk: "93.93 GiB (59%⚠️)", ip: "192.168.1.10", os: "Proxmox VE 9.1.9", status: "up", icon: "🔴" }, + ], +}; + +const categories = ["Все", "AI", "БД", "Безопасность", "Dev", "Коммуникации", "Медиа", "Мониторинг", "Сеть", "Утилиты", "Хранилище"]; + +const categoryColors = { + AI: "#a78bfa", БД: "#f59e0b", Безопасность: "#ef4444", Dev: "#3b82f6", + Коммуникации: "#06b6d4", Медиа: "#ec4899", Мониторинг: "#10b981", + Сеть: "#8b5cf6", Утилиты: "#6b7280", Хранилище: "#f97316", +}; + +function StatusBadge({ status }) { + const isUp = status === "up"; + return ( + + + {isUp ? "UP" : "EXIT"} + + ); +} + +function CatBadge({ cat }) { + const color = categoryColors[cat] || "#6b7280"; + return ( + {cat} + ); +} + +function PortBadge({ port }) { + return ( + {port} + ); +} + +export default function App() { + const [tab, setTab] = useState("apps"); + const [cat, setCat] = useState("Все"); + const [search, setSearch] = useState(""); + + const allApps = [...data.truenas.apps, ...data.truenas.dockge]; + + const filtered = allApps.filter(a => { + const matchCat = cat === "Все" || a.category === cat; + const q = search.toLowerCase(); + const matchSearch = !q || a.name.toLowerCase().includes(q) || a.image.toLowerCase().includes(q) || a.category.toLowerCase().includes(q); + return matchCat && matchSearch; + }); + + const tabs = [ + { id: "apps", label: "🐳 Контейнеры" }, + { id: "proxmox", label: "🔶 Proxmox #1" }, + { id: "servers", label: "🖥️ Серверы" }, + ]; + + return ( +
+ + + {/* Header */} +
+
+
+
+ WTR HOMELAB · 192.168.31.0/24 ↔ 192.168.1.0/24 +
+

+ Infrastructure Dashboard +

+
+
+ {data.servers.map(s => ( +
+ ●{" "} + {s.name}{" "} + {s.ip} +
+ ))} +
+
+
+ + {/* Tabs */} +
+ {tabs.map(t => ( + + ))} +
+ + {/* CONTAINERS TAB */} + {tab === "apps" && ( +
+ {/* Filters */} +
+ setSearch(e.target.value)} + placeholder="🔍 поиск по сервису или образу..." + style={{ + background: "#0d1117", border: "1px solid #21262d", borderRadius: 6, + color: "#c9d1d9", padding: "7px 12px", fontSize: 12, fontFamily: "inherit", + width: 260, outline: "none", + }} + /> +
+ {categories.map(c => ( + + ))} +
+ + {filtered.length} / {allApps.length} сервисов + +
+ + {/* Section: ix-apps */} + {(() => { + const ixFiltered = filtered.filter(a => data.truenas.apps.includes(a)); + const dockgeFiltered = filtered.filter(a => data.truenas.dockge.includes(a)); + return ( + <> + {ixFiltered.length > 0 && ( + + )} + {dockgeFiltered.length > 0 && ( + + )} + + ); + })()} +
+ )} + + {/* PROXMOX TAB */} + {tab === "proxmox" && ( +
+
+ 🔶 Mini PC #1 · Celeron J4125 · 15.46 GiB RAM · 38.64 GiB Disk ·{" "} + 192.168.31.2 · Proxmox VE 9.1.9 +
+ + + + {["Сервис", "Тип", "IP-адрес", "Статус", "Примечание"].map(h => ( + + ))} + + + + {data.proxmox1.map((s, i) => ( + + + + + + + + ))} + +
{h}
+ {s.icon} + {s.name} + + {s.type} + + {s.ip} + + + + {s.note} +
+
+ )} + + {/* SERVERS TAB */} + {tab === "servers" && ( +
+
+ {data.servers.map((s, i) => ( +
+
+
+ {s.icon} +
+
{s.name}
+
{s.os}
+
+
+
+ {[ + ["IP", s.ip], ["CPU", s.cpu], ["RAM", s.ram], ["Диск", s.disk], + ].map(([k, v]) => ( +
+ {k} + {v} +
+ ))} +
+ ))} +
+ + {/* Network */} +
+
🌐 СЕТЕВАЯ ТОПОЛОГИЯ
+
+
+
Keenetic Ultra
+
NC-1812 · WG Client
+
192.168.31.1
+
DNS → 192.168.31.3
+
+
⟷
+
+ WireGuard VPN +
+
⟷
+
+
Keenetic Giga
+
KN-1011 · WG Server
+
192.168.1.1
+
+
+
+
+ )} +
+ ); +} + +function SectionTable({ title, items }) { + return ( +
+
+ {title} ({items.length}) +
+
+ + + + {["Сервис", "Образ", "Версия", "Порты", "Категория", "Статус", "Uptime"].map(h => ( + + ))} + + + + {items.map((a, i) => ( + + + + + + + + + + ))} + +
{h}
+ {a.icon} + {a.name} + + {a.image} + + {a.version} + + {a.ports.map((p, pi) => )} + + + + + + {a.uptime} +
+
+
+ ); +}