Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-25 08:19:40 +02:00
Code Issues Releases Activity

refactor(docker/swarm): migrate nodes table to react [EE-4672] (#10184)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-09-13 10:51:33 +01:00 • committed by GitHub
parent fbdbd277f7
commit bf85a8861d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 210 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx
View file

@ -9,7 +9,7 @@ import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
import { withMeta } from '@@/datatables/extend-options/withMeta';
import { withControlledSelected } from '@@/datatables/extend-options/withControlledSelected';
import { useColumns } from './columns';
import { useColumns } from './useColumns';
const tableKey = 'macvlan-nodes-selector';
const store = createPersistedStore(tableKey);
@ -41,7 +41,7 @@ export function MacvlanNodesSelector({
settingsManager={tableState}
extendTableOptions={mergeOptions(
withMeta({
table: 'macvlan-nodes',
table: 'nodes',
haveAccessToNode,
}),
withControlledSelected(

5
app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/column-helper.ts
View file

@ -1,5 +0,0 @@
import { createColumnHelper } from '@tanstack/react-table';
import { NodeViewModel } from '@/docker/models/node';
export const columnHelper = createColumnHelper<NodeViewModel>();

20
app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/index.ts
View file

@ -1,20 +0,0 @@
import _ from 'lodash';
import { columnHelper } from './column-helper';
import { name } from './name';
import { status } from './status';
export function useColumns(isIpColumnVisible: boolean) {
return _.compact([
name,
columnHelper.accessor('Role', {}),
columnHelper.accessor('EngineVersion', {
header: 'Engine',
}),
isIpColumnVisible &&
columnHelper.accessor('Addr', {
header: 'IP Address',
}),
status,
]);
}

38
app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/name.tsx
View file

@ -1,38 +0,0 @@
import { CellContext } from '@tanstack/react-table';
import { NodeViewModel } from '@/docker/models/node';
import { Link } from '@@/Link';
import { isTableMeta } from '../types';
import { columnHelper } from './column-helper';
export const name = columnHelper.accessor('Hostname', {
header: 'Name',
cell: Cell,
});
function Cell({
getValue,
row: { original: item },
table: {
options: { meta },
},
}: CellContext<NodeViewModel, NodeViewModel['Hostname']>) {
if (!isTableMeta(meta)) {
throw new Error('Invalid table meta');
}
const value = getValue();
if (!meta.haveAccessToNode) {
return <>{value}</>;
}
return (
<Link to="docker.nodes.node" params={{ id: item.Id }}>
{value}
</Link>
);
}

16
app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/status.tsx
View file

@ -1,16 +0,0 @@
import clsx from 'clsx';
import { nodeStatusBadge } from '@/docker/filters/utils';
import { columnHelper } from './column-helper';
export const status = columnHelper.accessor('Status', {
cell: ({ getValue }) => {
const value = getValue();
return (
<span className={clsx('label', `label-${nodeStatusBadge(value)}`)}>
{value}
</span>
);
},
});

14
app/react/docker/networks/CreateView/MacvlanNodesSelector/types.ts
View file

@ -1,14 +0,0 @@
import { TableMeta as BaseTableMeta } from '@tanstack/react-table';
import { NodeViewModel } from '@/docker/models/node';
export type TableMeta = BaseTableMeta<NodeViewModel> & {
table: 'macvlan-nodes';
haveAccessToNode: boolean;
};
export function isTableMeta(
meta?: BaseTableMeta<NodeViewModel>
): meta is TableMeta {
return !!meta && meta.table === 'macvlan-nodes';
}

17
app/react/docker/networks/CreateView/MacvlanNodesSelector/useColumns.ts Normal file
View file

@ -0,0 +1,17 @@
import { useMemo } from 'react';
import _ from 'lodash';
import {
engine,
ip,
role,
name,
status,
} from '@/react/docker/swarm/SwarmView/NodesDatatable/columns';
export function useColumns(isIpColumnVisible: boolean) {
return useMemo(
() => _.compact([name, role, engine, isIpColumnVisible && ip, status]),
[isIpColumnVisible]
);
}