xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-08-25 12:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nodes): bulk panel self-update with live online indicator

Browse Source 
Adds the ability to update node panels to the latest release from the Nodes
page: select online, enabled nodes (checkboxes) and trigger their official
self-updater, or use the per-row Update action. A node whose reported panel
version trails the latest GitHub release is flagged with an 'update available'
tag (compared via lib/panel-version, mirroring the Go isNewerVersion).

Backend: Remote.UpdatePanel calls the node's existing
POST /panel/api/server/updatePanel; NodeService.UpdatePanels fans out over the
selected ids, skipping disabled/offline nodes with a per-node reason; exposed
as POST /panel/api/nodes/updatePanel (documented in endpoints.ts + openapi.json).

The bulk request sends a JSON body, so it sets Content-Type: application/json
explicitly — axios defaults POST to form-urlencoded, which made ShouldBindJSON
fail with 'invalid character i'.

Also reuses the clients-page online cue on the Nodes page: a pulsing green dot
plus green label for an online node. The .online-dot style moved to the shared
styles/utils.css so both pages load it.

Translations for all new node keys added across every language file.
This commit is contained in:
MHSanaei
2026-06-01 07:03:06 +02:00
parent c8df1b19ff
commit 971843f669
25 changed files with 511 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/nodes/NodeList.tsx
+73 -8
View File
@@ -16,6 +16,7 @@ import type { BadgeProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
ClusterOutlined,
CloudDownloadOutlined,
DeleteOutlined,
EditOutlined,
ExclamationCircleOutlined,
@@ -30,17 +31,27 @@ import {
import NodeHistoryPanel from './NodeHistoryPanel';
import type { NodeRecord } from '@/api/queries/useNodesQuery';
import { isPanelUpdateAvailable } from '@/lib/panel-version';
import './NodeList.css';
interface NodeListProps {
nodes: NodeRecord[];
loading?: boolean;
isMobile?: boolean;
latestVersion?: string;
selectedIds: number[];
onSelectionChange: (ids: number[]) => void;
onAdd: () => void;
onEdit: (node: NodeRecord) => void;
onDelete: (node: NodeRecord) => void;
onProbe: (node: NodeRecord) => void;
onToggleEnable: (node: NodeRecord, next: boolean) => void;
onUpdateNode: (node: NodeRecord) => void;
onUpdateSelected: () => void;
}
function isUpdateEligible(n: NodeRecord): boolean {
return !!n.enable && n.status === 'online';
}
interface NodeRow extends NodeRecord {
@@ -56,6 +67,20 @@ function badgeStatus(status?: string): BadgeProps['status'] {
}
}
function StatusDot({ status }: { status?: string }) {
if (status === 'online') return <span className="online-dot" />;
return <Badge status={badgeStatus(status)} />;
}
function StatusLabel({ status }: { status?: string }) {
const { t } = useTranslation();
return (
<span style={status === 'online' ? { color: 'var(--ant-color-success)' } : undefined}>
{t(`pages.nodes.statusValues.${status || 'unknown'}`)}
</span>
);
}
function formatPct(p?: number): string {
if (typeof p !== 'number' || Number.isNaN(p)) return '-';
return `${p.toFixed(1)}%`;
@@ -88,11 +113,16 @@ export default function NodeList({
nodes,
loading = false,
isMobile = false,
latestVersion = '',
selectedIds,
onSelectionChange,
onAdd,
onEdit,
onDelete,
onProbe,
onToggleEnable,
onUpdateNode,
onUpdateSelected,
}: NodeListProps) {
const { t } = useTranslation();
const relativeTime = useRelativeTime();
@@ -122,12 +152,17 @@ export default function NodeList({
{
title: t('pages.nodes.actions'),
align: 'center',
width: 160,
width: 190,
render: (_value, record) => (
<Space>
<Tooltip title={t('pages.nodes.probe')}>
<Button type="text" size="small" icon={<ThunderboltOutlined />} onClick={() => onProbe(record)} />
</Tooltip>
{isUpdateEligible(record) && (
<Tooltip title={t('pages.nodes.updatePanel')}>
<Button type="text" size="small" icon={<CloudDownloadOutlined />} onClick={() => onUpdateNode(record)} />
</Tooltip>
)}
<Tooltip title={t('edit')}>
<Button type="text" size="small" icon={<EditOutlined />} onClick={() => onEdit(record)} />
</Tooltip>
@@ -193,8 +228,8 @@ export default function NodeList({
align: 'center',
render: (_value, record) => (
<Space size={4}>
<Badge status={badgeStatus(record.status)} />
<span>{t(`pages.nodes.statusValues.${record.status || 'unknown'}`)}</span>
<StatusDot status={record.status} />
<StatusLabel status={record.status} />
{record.lastError && (
<Tooltip title={record.lastError}>
<ExclamationCircleOutlined style={{ color: 'var(--ant-color-warning)' }} />
@@ -227,7 +262,22 @@ export default function NodeList({
title: t('pages.nodes.panelVersion') || 'Panel version',
dataIndex: 'panelVersion',
align: 'center',
render: (_value, record) => record.panelVersion || '-',
render: (_value, record) => {
const canUpdate = isUpdateEligible(record)
&& isPanelUpdateAvailable(latestVersion, record.panelVersion || '');
return (
<Space size={4}>
<span>{record.panelVersion || '-'}</span>
{canUpdate && (
<Tooltip title={`${t('pages.nodes.updateAvailable')}: ${latestVersion}`}>
<Tag color="orange" style={{ margin: 0, cursor: 'pointer' }} onClick={() => onUpdateNode(record)}>
{t('pages.nodes.updateAvailable')}
</Tag>
</Tooltip>
)}
</Space>
);
},
},
{
title: t('pages.nodes.uptime'),
@@ -266,7 +316,7 @@ export default function NodeList({
width: 120,
render: (_value, record) => relativeTime(record.lastHeartbeat),
},
], [t, showAddress, relativeTime, onToggleEnable, onProbe, onEdit, onDelete]);
], [t, showAddress, relativeTime, latestVersion, onToggleEnable, onProbe, onEdit, onDelete, onUpdateNode]);
return (
<Card size="small" hoverable>
@@ -274,6 +324,11 @@ export default function NodeList({
<Button type="primary" icon={<PlusOutlined />} onClick={onAdd}>
{t('pages.nodes.addNode')}
</Button>
{selectedIds.length > 0 && (
<Button icon={<CloudDownloadOutlined />} onClick={onUpdateSelected}>
{t('pages.nodes.updateSelected', { count: selectedIds.length })}
</Button>
)}
</div>
{isMobile ? (
@@ -289,7 +344,7 @@ export default function NodeList({
<div key={record.id} className="node-card">
<div className="card-head" onClick={() => toggleExpanded(record.id)}>
<RightOutlined className={`card-expand${expandedIds.has(record.id) ? ' is-expanded' : ''}`} />
<Badge status={badgeStatus(record.status)} />
<StatusDot status={record.status} />
<span className="node-name">{record.name}</span>
<div className="card-actions" onClick={(e) => e.stopPropagation()}>
<Tooltip title={t('info')}>
@@ -313,6 +368,11 @@ export default function NodeList({
label: <><ThunderboltOutlined /> {t('pages.nodes.probe')}</>,
onClick: () => onProbe(record),
},
...(isUpdateEligible(record) ? [{
key: 'update',
label: <><CloudDownloadOutlined /> {t('pages.nodes.updatePanel')}</>,
onClick: () => onUpdateNode(record),
}] : []),
{
key: 'edit',
label: <><EditOutlined /> {t('edit')}</>,
@@ -378,8 +438,8 @@ export default function NodeList({
</div>
<div className="stat-row">
<span className="stat-label">{t('pages.nodes.status')}</span>
<Badge status={badgeStatus(statsNode.status)} />
<span>{t(`pages.nodes.statusValues.${statsNode.status || 'unknown'}`)}</span>
<StatusDot status={statsNode.status} />
<StatusLabel status={statsNode.status} />
{statsNode.lastError && (
<Tooltip title={statsNode.lastError}>
<ExclamationCircleOutlined style={{ color: 'var(--ant-color-warning)' }} />
@@ -439,6 +499,11 @@ export default function NodeList({
scroll={{ x: 'max-content' }}
size="middle"
rowKey="id"
rowSelection={{
selectedRowKeys: selectedIds,
onChange: (keys) => onSelectionChange(keys as number[]),
getCheckboxProps: (record) => ({ disabled: !isUpdateEligible(record) }),
}}
locale={{
emptyText: (
<div className="card-empty">
frontend/src/pages/nodes/NodesPage.tsx
+65 -1
View File
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { Card, Col, ConfigProvider, Layout, Modal, Row, Spin, Statistic, message } from 'antd';
import {
CheckCircleOutlined,
@@ -17,6 +18,8 @@ import AppSidebar from '@/layouts/AppSidebar';
import NodeList from './NodeList';
import NodeFormModal from './NodeFormModal';
import { setMessageInstance } from '@/utils/messageBus';
import { HttpUtil } from '@/utils';
import type { PanelUpdateInfo } from '../index/PanelUpdateModal';
export default function NodesPage() {
const { t } = useTranslation();
@@ -27,11 +30,21 @@ export default function NodesPage() {
useEffect(() => { setMessageInstance(messageApi); }, [messageApi]);
const { nodes, loading, fetched, totals } = useNodesQuery();
const { create, update, remove, setEnable, testConnection, probe } = useNodeMutations();
const { create, update, remove, setEnable, testConnection, probe, updatePanels } = useNodeMutations();
const { data: latestVersion = '' } = useQuery({
queryKey: ['server', 'panelUpdateInfo'],
queryFn: async () => {
const msg = await HttpUtil.get<PanelUpdateInfo>('/panel/api/server/getPanelUpdateInfo');
return msg?.obj?.latestVersion || '';
},
staleTime: 5 * 60 * 1000,
});
const [formOpen, setFormOpen] = useState(false);
const [formMode, setFormMode] = useState<'add' | 'edit'>('add');
const [formNode, setFormNode] = useState<NodeRecord | null>(null);
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const onAdd = useCallback(() => {
setFormMode('add');
@@ -81,6 +94,52 @@ export default function NodesPage() {
await setEnable(node.id, next);
}, [setEnable]);
const runUpdate = useCallback(async (ids: number[]) => {
const msg = await updatePanels(ids);
if (!msg?.success) {
messageApi.error(msg?.msg || t('somethingWentWrong'));
return;
}
const results = msg.obj ?? [];
const ok = results.filter((r) => r.ok).length;
const failed = results.length - ok;
if (failed === 0) {
messageApi.success(t('pages.nodes.toasts.updateStarted'));
} else {
const firstError = results.find((r) => !r.ok)?.error ?? '';
const base = t('pages.nodes.toasts.updateResult', { ok, failed });
messageApi.warning(firstError ? `${base} — ${firstError}` : base);
}
setSelectedIds([]);
}, [updatePanels, messageApi, t]);
const onUpdateNode = useCallback((node: NodeRecord) => {
modal.confirm({
title: t('pages.nodes.updateConfirmTitle', { count: 1 }),
content: t('pages.nodes.updateConfirmContent'),
okText: t('update'),
cancelText: t('cancel'),
onOk: () => runUpdate([node.id]),
});
}, [modal, t, runUpdate]);
const onUpdateSelected = useCallback(() => {
const eligible = nodes
.filter((n) => selectedIds.includes(n.id) && n.enable && n.status === 'online')
.map((n) => n.id);
if (eligible.length === 0) {
messageApi.warning(t('pages.nodes.toasts.updateNoneEligible'));
return;
}
modal.confirm({
title: t('pages.nodes.updateConfirmTitle', { count: eligible.length }),
content: t('pages.nodes.updateConfirmContent'),
okText: t('update'),
cancelText: t('cancel'),
onOk: () => runUpdate(eligible),
});
}, [modal, t, nodes, selectedIds, runUpdate, messageApi]);
const pageClass = useMemo(() => {
const classes = ['nodes-page'];
if (isDark) classes.push('is-dark');
@@ -142,11 +201,16 @@ export default function NodesPage() {
nodes={nodes}
loading={loading}
isMobile={isMobile}
latestVersion={latestVersion}
selectedIds={selectedIds}
onSelectionChange={setSelectedIds}
onAdd={onAdd}
onEdit={onEdit}
onDelete={onDelete}
onProbe={onProbe}
onToggleEnable={onToggleEnable}
onUpdateNode={onUpdateNode}
onUpdateSelected={onUpdateSelected}
/>
</Col>
</Row>