projekte/edgeguard-native
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): generischer DataTable-Wrapper + Version 1.0.0

Browse Source 
DataTable (components/DataTable.tsx) gibt jeder CRUD-Tabelle drei
Baseline-Features auf einmal:
* Search-Input (Volltext über alle string-Felder, case-insensitive)
* Pagination 25/Seite mit showSizeChanger
* Auto-sorter pro Spalte mit dataIndex (string→localeCompare,
  number→subtract, boolean→bool→Number) — Spalten mit eigenem
  sorter behalten den.

Sweep aller 13 CRUD-Pages auf <DataTable>: Domains, Backends,
Routing-Rules, Networks, IP-Addresses, SSL, Cluster, sechs Firewall-
Tabs. Kleine Sub-Tabellen (System-Discovered IP-Card) bleiben
auf <Table> — read-only ohne CRUD braucht keine Pagination.

i18n: common.search, common.totalRows.

Version-Bump auf 1.0.0 (User-Direktive: ohne -dev): VERSION-Datei,
Go-Literale in cmd/edgeguard-{api,ctl,scheduler}/main.go,
package.json, Sidebar-Konstante. Live deployed auf 89.163.205.6 als
edgeguard 1.0.0 (api + ui + meta).

Memory: project_versioning.md hält die Patch-Bump-Konvention fest
(Gitea Package Registry 409't bei Doppel-Upload — bei jedem Release
zuerst die VERSION inkrementieren).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
2026-05-10 13:48:27 +02:00
parent 1b2c0d7411
commit 0de0a1580a
22 changed files with 177 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
management-ui/src/pages/Backends/index.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Typography, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Typography, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -118,7 +119,7 @@ export default function BackendsPage() {
}}>
{t('backends.addBackend')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} />
<Modal
title={editing ? t('backends.editBackend') : t('backends.addBackend')}
open={editing !== null || creating}

7
management-ui/src/pages/Cluster/index.tsx
View File

@@ -1,7 +1,8 @@
import { Card, Spin, Table, Tag, Typography } from 'antd'
import { Card, Spin, Tag, Typography } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -62,11 +63,11 @@ export default function ClusterPage() {
{t('cluster.intro', { count: data?.nodes.length ?? 0 })}
</Typography.Paragraph>
<Card>
<Table
<DataTable
rowKey="id"
columns={columns}
dataSource={data?.nodes ?? []}
pagination={false}
/>
</Card>
</div>

7
management-ui/src/pages/Domains/index.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Table, Typography, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Typography, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -124,12 +125,12 @@ export default function DomainsPage() {
}}>
{t('domains.addDomain')}
</Button>
<Table
<DataTable
rowKey="id"
loading={isLoading}
dataSource={data ?? []}
columns={columns}
pagination={false}
/>
<Modal
title={editing ? t('domains.editDomain') : t('domains.addDomain')}

5
management-ui/src/pages/Firewall/AddressGroups.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
import type { AddressGroup, AddressObject } from './types'
@@ -91,7 +92,7 @@ export default function AddressGroupsTab() {
}}>
{t('fw.ag.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} />
<Modal
title={editing ? t('fw.ag.edit') : t('fw.ag.add')}
open={editing !== null || creating}

5
management-ui/src/pages/Firewall/AddressObjects.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
import type { AddressObject } from './types'
@@ -84,7 +85,7 @@ export default function AddressObjectsTab() {
}}>
{t('fw.ao.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} />
<Modal
title={editing ? t('fw.ao.edit') : t('fw.ao.add')}
open={editing !== null || creating}

5
management-ui/src/pages/Firewall/NATRules.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
import type { NATRule } from './types'
@@ -128,7 +129,7 @@ export default function NATRulesTab() {
}}>
{t('fw.nat.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} />
<Modal
title={editing ? t('fw.nat.edit') : t('fw.nat.add')}
open={editing !== null || creating}

5
management-ui/src/pages/Firewall/Rules.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
import type { AddressGroup, AddressObject, FwRule, FwService, ServiceGroup, Zone } from './types'
@@ -195,7 +196,7 @@ export default function RulesTab() {
}}>
{t('fw.rule.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} />
<Modal
title={editing ? t('fw.rule.edit') : t('fw.rule.add')}
open={editing !== null || creating}

5
management-ui/src/pages/Firewall/ServiceGroups.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
import type { FwService, ServiceGroup } from './types'
@@ -91,7 +92,7 @@ export default function ServiceGroupsTab() {
}}>
{t('fw.sg.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} />
<Modal
title={editing ? t('fw.sg.edit') : t('fw.sg.add')}
open={editing !== null || creating}

5
management-ui/src/pages/Firewall/Services.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Tooltip, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
import type { FwService } from './types'
@@ -95,7 +96,7 @@ export default function ServicesTab() {
}}>
{t('fw.svc.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} />
<Modal
title={editing ? t('fw.svc.edit') : t('fw.svc.add')}
open={editing !== null || creating}

7
management-ui/src/pages/IPAddresses/index.tsx
View File

@@ -3,6 +3,7 @@ import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Spac
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -167,11 +168,11 @@ export default function IPAddressesPage() {
{(sysAddrs ?? []).length === 0
? <Typography.Text type="secondary">—</Typography.Text>
: (
<Table
<DataTable
size="small"
rowKey={(r) => `${r.ifname}-${r.address}`}
dataSource={sysAddrs ?? []}
pagination={false}
columns={[
{ title: t('ips.interface'), dataIndex: 'ifname', key: 'ifname', render: (s: string) => <code>{s}</code> },
{ title: t('ips.address'), key: 'addr', render: (_, row: SystemAddress) => <code>{row.address}/{row.prefix}</code> },
@@ -189,7 +190,7 @@ export default function IPAddressesPage() {
}}>
{t('ips.addAddress')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={ips ?? []} columns={columns} pagination={false} />
<Table rowKey="id" loading={isLoading} dataSource={ips ?? []} columns={columns} />
<Modal
title={editing ? t('ips.editAddress') : t('ips.addAddress')}
open={editing !== null || creating}

5
management-ui/src/pages/Networks/index.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Tooltip, Typography, message } from 'antd'
import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, Tooltip, Typography, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -151,7 +152,7 @@ export default function NetworksPage() {
{t('networks.addInterface')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={ifs ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={ifs ?? []} columns={columns} />
<Modal
title={editing ? t('networks.editInterface') : t('networks.addInterface')}

5
management-ui/src/pages/RoutingRules/index.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Typography, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Typography, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -128,7 +129,7 @@ export default function RoutingRulesPage() {
}}>
{t('routing.addRule')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} />
<Modal
title={editing ? t('routing.editRule') : t('routing.addRule')}
open={editing !== null || creating}

5
management-ui/src/pages/SSL/index.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from 'react'
import { Alert, Button, Card, Form, Input, Popconfirm, Select, Space, Table, Tabs, Tag, Typography, message } from 'antd'
import { Alert, Button, Card, Form, Input, Popconfirm, Select, Space, Tabs, Tag, Typography, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import apiClient, { isEnvelope } from '../../api/client'
@@ -192,7 +193,7 @@ export default function SSLPage() {
<Tabs items={tabs} defaultActiveKey="letsencrypt" />
<Typography.Title level={5} style={{ marginTop: 24 }}>{t('ssl.installedTitle')}</Typography.Title>
<Table rowKey="id" loading={isLoading} dataSource={certs ?? []} columns={columns} pagination={false} />
<DataTable rowKey="id" loading={isLoading} dataSource={certs ?? []} columns={columns} />
</div>
)
}