fix(ui): update node role labels and location display in nodes page
quality / commitlint (push) Skipped
CD / update-wiki (push) Successful in 5s
quality / changes (push) Successful in 5s
quality / api (push) Skipped
quality / docker-check (push) Skipped
quality / web (push) Successful in 45s
CD / quality (push) Successful in 53s
CD / publish (push) Successful in 1m27s
quality / commitlint (push) Skipped
CD / update-wiki (push) Successful in 5s
quality / changes (push) Successful in 5s
quality / api (push) Skipped
quality / docker-check (push) Skipped
quality / web (push) Successful in 45s
CD / quality (push) Successful in 53s
CD / publish (push) Successful in 1m27s
- Changed role labels to be more user-friendly (e.g., 'hub' to 'Hub'). - Enhanced location display to show city names and country flags instead of location codes. - Removed unused MapPinIcon from the UI for cleaner presentation.
This commit is contained in:
@@ -8,7 +8,6 @@ import type { ColumnDef } from '@tanstack/react-table'
|
||||
import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
|
||||
import {
|
||||
CloudIcon,
|
||||
MapPinIcon,
|
||||
PlusIcon,
|
||||
RefreshCwIcon,
|
||||
ServerIcon,
|
||||
@@ -75,12 +74,16 @@ const formSchema = z.object({
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
const ROLES: { value: NodeRole; label: string }[] = [
|
||||
{ value: 'hub', label: 'hub' },
|
||||
{ value: 'gw', label: 'gw' },
|
||||
{ value: 'edge', label: 'edge' },
|
||||
{ value: 'ix', label: 'ix' },
|
||||
{ value: 'hub', label: 'Hub' },
|
||||
{ value: 'gw', label: 'Gateway' },
|
||||
{ value: 'edge', label: 'Edge' },
|
||||
{ value: 'ix', label: 'IX' },
|
||||
]
|
||||
|
||||
const ROLE_LABEL: Record<NodeRole, string> = Object.fromEntries(
|
||||
ROLES.map((r) => [r.value, r.label]),
|
||||
) as Record<NodeRole, string>
|
||||
|
||||
function NodesPage() {
|
||||
const qc = useQueryClient()
|
||||
const { data: nodes = [], isLoading, isError, error, refetch } = useQuery(
|
||||
@@ -302,7 +305,10 @@ function NodesPage() {
|
||||
key: 'locationCode',
|
||||
label: 'Локация',
|
||||
type: 'select',
|
||||
options: locations.map((l) => ({ value: l.code, label: l.code })),
|
||||
options: locations.map((l) => ({
|
||||
value: l.code,
|
||||
label: l.name,
|
||||
})),
|
||||
},
|
||||
{
|
||||
key: 'role',
|
||||
@@ -340,16 +346,35 @@ function NodesPage() {
|
||||
{
|
||||
accessorKey: 'locationCode',
|
||||
header: 'Локация',
|
||||
cell: ({ row }) => (
|
||||
<span className="flex items-center gap-1.5 text-sm">
|
||||
<MapPinIcon className="size-3.5" />
|
||||
{row.original.locationCode ?? '—'}
|
||||
</span>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const n = row.original
|
||||
const loc = locations.find((l) => l.id === n.locationId)
|
||||
const city = n.locationName ?? loc?.name ?? n.locationCode ?? '—'
|
||||
const countryCode = loc?.country ?? undefined
|
||||
return (
|
||||
<span className="flex items-center gap-2 text-sm">
|
||||
<CountryFlag code={countryCode ?? undefined} country={countryNameFromCode(countryCode)} />
|
||||
<span className="font-medium">{city}</span>
|
||||
{n.locationCode ? (
|
||||
<span className="text-muted-foreground font-mono text-xs">
|
||||
{n.locationCode}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'role',
|
||||
header: 'Роль',
|
||||
cell: ({ row }) => {
|
||||
const role = row.original.role as NodeRole
|
||||
return (
|
||||
<span className="text-sm">
|
||||
{ROLE_LABEL[role] ?? row.original.role}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'ip',
|
||||
|
||||
Reference in New Issue
Block a user