diff --git a/management-ui/src/pages/IPAddresses/index.tsx b/management-ui/src/pages/IPAddresses/index.tsx index 0cf9afb..bfd81bd 100644 --- a/management-ui/src/pages/IPAddresses/index.tsx +++ b/management-ui/src/pages/IPAddresses/index.tsx @@ -4,7 +4,6 @@ import { NodeIndexOutlined, PlusOutlined } from '@ant-design/icons' import PageHeader from '../../components/PageHeader' import ActionButtons from '../../components/ActionButtons' import EmptyState from '../../components/EmptyState' -import StatusDot from '../../components/StatusDot' import type { ColumnsType } from 'antd/es/table' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' import { useTranslation } from 'react-i18next' @@ -120,6 +119,14 @@ export default function IPAddressesPage() { void qc.invalidateQueries({ queryKey: ['ip-addresses'] }) }, }) + const quickToggle = useMutation({ + mutationFn: async ({ id, row, checked }: { id: number; row: IPAddress; checked: boolean }) => { + const { id: _id, created_at: _ca, updated_at: _ua, ...body } = row + await apiClient.put(`/ip-addresses/${id}`, { ...body, active: checked }) + }, + onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ip-addresses'] }) }, + onError: (e: Error) => message.error(e.message), + }) const del = useMutation({ mutationFn: async (id: number) => { await apiClient.delete(`/ip-addresses/${id}`) }, onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ip-addresses'] }) }, @@ -137,7 +144,17 @@ export default function IPAddressesPage() { ? VIP{row.vip_priority != null ? ` ยท prio ${row.vip_priority}` : ''} : 'โ€”', }, - { title: t('ips.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => }, + { + title: t('ips.active'), dataIndex: 'active', key: 'active', width: 80, + render: (v: boolean, row: IPAddress) => ( + quickToggle.mutate({ id: row.id, row, checked })} + /> + ), + }, { title: t('ips.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? 'โ€”' }, { title: t('common.actions'), key: 'actions', diff --git a/management-ui/src/pages/Networks/Interfaces.tsx b/management-ui/src/pages/Networks/Interfaces.tsx index 33a90d8..265386a 100644 --- a/management-ui/src/pages/Networks/Interfaces.tsx +++ b/management-ui/src/pages/Networks/Interfaces.tsx @@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next' import DataTable from '../../components/DataTable' import EmptyState from '../../components/EmptyState' import ActionButtons from '../../components/ActionButtons' -import StatusDot from '../../components/StatusDot' import apiClient, { isEnvelope } from '../../api/client' @@ -107,6 +106,14 @@ export default function InterfacesTab() { mutationFn: async (id: number) => { await apiClient.delete(`/network-interfaces/${id}`) }, onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) }, }) + const quickToggle = useMutation({ + mutationFn: async ({ id, row, checked }: { id: number; row: NetworkInterface; checked: boolean }) => { + const { id: _id, created_at: _ca, updated_at: _ua, ...body } = row + await apiClient.put(`/network-interfaces/${id}`, { ...body, active: checked }) + }, + onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) }, + onError: (e: Error) => message.error(e.message), + }) // Stable colour palette for role tags. Builtin zones get a fixed // colour; custom zones cycle through the palette by name hash so @@ -138,7 +145,17 @@ export default function InterfacesTab() { render: (r: string) => {r.toUpperCase()}, }, { title: t('networks.mtu'), dataIndex: 'mtu', key: 'mtu', render: (v?: number) => v ?? 'โ€”' }, - { title: t('networks.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => }, + { + title: t('networks.active'), dataIndex: 'active', key: 'active', width: 80, + render: (v: boolean, row: NetworkInterface) => ( + quickToggle.mutate({ id: row.id, row, checked })} + /> + ), + }, { title: t('common.actions'), key: 'actions', render: (_, row) => (