feat(nodes): add loading state, no-nodes guidance, and fix search functionality of logs

Author: x0sina

dashboard/public/statics/locales/en.json

@@ -57,6 +57,9 @@
     "certificateDownloaded": "Certificate downloaded successfully",
     "certificateDescription": "To set up the node, you need to configure this certificate to establish a secure connection between the main server and the node",
     "selectNode": "Select a node",
+    "noNodes": "No nodes configured",
+    "noNodesDescription": "Master Panel doesn't have any cores configured. You need to add and configure a node from",
+    "noNodesDescription2": "and connect it to the panel.",
     "logs": {
       "title": "Logs",
       "description": "View and monitor node logs",
@@ -516,8 +519,8 @@
   "admin.disable": "Disabled Admin",
   "admin.enable": "Enabled Admin",
   "deleteAdmin.prompt": "Are you sure you want to remove the <b>{{name}}</b> admin?",
-  "activeUsers.prompt": "Do you want to activate all users under this {{name}}?",
-  "disableUsers.prompt": "Do you want to disable all users under this {{name}}?",
+  "activeUsers.prompt": "Do you want to activate all users under {{name}}?",
+  "disableUsers.prompt": "Do you want to disable all users under {{name}}?",
   "manageAccounts": "Control, Update, and Arrange User Accounts",
   "manageGroups": "Control, Update, and Arrange User Groups",
   "manageNodes": "Monitor, control, create, modify, remove nodes",

dashboard/public/statics/locales/fa.json

@@ -1091,6 +1091,9 @@
     "certificateDownloaded": "گواهینامه با موفقیت دانلود شد",
     "certificateDescription": "برای تنظیم گره، باید این گواهینامه را برای برقراری ارتباط امن بین سرور اصلی و گره پیکربندی کنید",
     "selectNode": "یک گره انتخاب کنید",
+    "noNodes": "هیچ گره ای پیکربندی نشده",
+    "noNodesDescription": "پنل اصلی هیچ هسته‌ای ندارد. شما باید یک گره از",
+    "noNodesDescription2": "اضافه و پیکربندی کنید و آن را به پنل متصل کنید.",
     "logs": {
       "title": "لاگ‌ها",
       "description": "مشاهده و نظارت بر لاگ‌های گره‌ها",

dashboard/public/statics/locales/ru.json

@@ -70,6 +70,9 @@
     "certificateDownloaded": "Сертификат успешно загружен",
     "certificateDescription": "Для настройки узла необходимо настроить этот сертификат для установки безопасного соединения между основным сервером и узлом",
     "selectNode": "Выберите узел",
+    "noNodes": "Узлы не настроены",
+    "noNodesDescription": "Главная панель не имеет настроенных ядер. Вам нужно добавить и настроить узел из",
+    "noNodesDescription2": "и подключить его к панели.",
     "logs": {
       "title": "Журналы",
       "description": "Просмотр и мониторинг журналов узла",

dashboard/public/statics/locales/zh.json

@@ -52,6 +52,9 @@
     "certificate": "证书",
     "createdAt": "创建时间",
     "selectNode": "选择节点",
+    "noNodes": "未配置节点",
+    "noNodesDescription": "主面板没有配置任何核心。您需要从",
+    "noNodesDescription2": "添加和配置节点，并将其连接到面板。",
     "logs": {
       "title": "日志",
       "description": "查看和监控节点日志",

dashboard/src/components/nodes/Nodes.tsx

@@ -8,6 +8,8 @@ import NodeModal from '@/components/dialogs/NodeModal'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { nodeFormSchema, NodeFormValues } from '@/components/dialogs/NodeModal'
+import { Card, CardContent } from '@/components/ui/card'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
 
 const initialDefaultValues: Partial<NodeFormValues> = {
   name: '',
@@ -26,7 +28,7 @@ export default function Nodes() {
   const [editingNode, setEditingNode] = useState<NodeResponse | null>(null)
   const modifyNodeMutation = useModifyNode()
 
-  const { data: nodesData } = useGetNodes(undefined, {
+  const { data: nodesData, isLoading } = useGetNodes(undefined, {
     query: {
       refetchInterval: 5000,
       refetchIntervalInBackground: true,
@@ -101,6 +103,10 @@ export default function Nodes() {
     }
   }
 
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
   return (
     <div className="flex flex-col gap-2 w-full items-start">
       <div className="flex-1 space-y-4 pt-6 w-full">
@@ -111,6 +117,28 @@ export default function Nodes() {
           {nodesData?.map(node => <Node key={node.id} node={node} onEdit={handleEdit} onToggleStatus={handleToggleStatus} />)}
         </div>
 
+        {(!nodesData || nodesData.length === 0) && (
+          <Card className="mb-12">
+            <CardContent className="p-8 text-center">
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">{t('nodes.noNodes')}</h3>
+                <p className="text-muted-foreground max-w-2xl mx-auto">
+                  {t('nodes.noNodesDescription')}{' '}
+                  <a
+                    href="https://github.com/PasarGuard/node"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary underline-offset-4 hover:underline font-medium"
+                  >
+                    PasarGuard/node
+                  </a>{' '}
+                  {t('nodes.noNodesDescription2', { defaultValue: 'and connect it to the panel.' })}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
         <NodeModal
           isDialogOpen={isDialogOpen}
           onOpenChange={open => {

dashboard/src/pages/_dashboard.nodes.logs.tsx

@@ -219,11 +219,17 @@ export default function NodeLogs() {
 		return logs.filter((log) => {
 			const logType = getLogType(log.message).type;
 
-			if (typeFilter.length === 0) {
-				return true;
+			// Filter by type
+			if (typeFilter.length > 0 && !typeFilter.includes(logType)) {
+				return false;
 			}
 
-			return typeFilter.includes(logType);
+			// Filter by search term
+			if (search && !log.message.toLowerCase().includes(search.toLowerCase())) {
+				return false;
+			}
+
+			return true;
 		});
 	};