Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 04:15:28 +02:00
Code Issues Releases Activity

refactor(docker/services): migrate service tasks to react [EE-4676] (#10328)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-10-23 13:52:49 +03:00 • committed by GitHub
parent 70455320be
commit 1fa63f6ab7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 175 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
View file

@ -19,6 +19,8 @@ import { getColumnVisibilityState } from '@@/datatables/ColumnVisibilityMenu';
import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
import { withGlobalFilter } from '@@/datatables/extend-options/withGlobalFilter';
import { DecoratedTask } from '../../ItemView/TasksDatatable/types';
import { useColumns } from './columns';
import { TasksDatatable } from './TasksDatatable';
import { TableActions } from './TableActions';
@ -72,7 +74,10 @@ export function ServicesDatatable({
<tr>
<td />
<td colSpan={Number.MAX_SAFE_INTEGER}>
<TasksDatatable dataset={item.Tasks} search={tableState.search} />
<TasksDatatable
dataset={item.Tasks as Array<DecoratedTask>}
search={tableState.search}
/>
</td>
</tr>
)}

12
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
View file

@ -1,7 +1,15 @@
import { DecoratedTask } from '@/react/docker/services/ItemView/TasksDatatable/types';
import { status } from '@/react/docker/services/ItemView/TasksDatatable/columns/status';
import { actions } from '@/react/docker/services/ItemView/TasksDatatable/columns/actions';
import { slot } from '@/react/docker/services/ItemView/TasksDatatable/columns/slot';
import { node } from '@/react/docker/services/ItemView/TasksDatatable/columns/node';
import { updated } from '@/react/docker/services/ItemView/TasksDatatable/columns/updated';
import { NestedDatatable } from '@@/datatables/NestedDatatable';
import { columns } from './columns';
import { DecoratedTask } from './types';
import { task } from './task-column';
const columns = [status, task, actions, slot, node, updated];
export function TasksDatatable({
dataset,

45
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/actions.tsx
View file

@ -1,45 +0,0 @@
import { CellContext } from '@tanstack/react-table';
import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
import { isAgentEnvironment } from '@/react/portainer/environments/utils';
import { QuickActionsState } from '@/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions';
import { TaskTableQuickActions } from '@/react/docker/services/common/TaskTableQuickActions';
import { DecoratedTask } from '../types';
import { columnHelper } from './helper';
export const actions = columnHelper.display({
header: 'Actions',
cell: Cell,
});
function Cell({
row: { original: item },
}: CellContext<DecoratedTask, unknown>) {
const environmentQuery = useCurrentEnvironment();
if (!environmentQuery.data) {
return null;
}
const state: QuickActionsState = {
showQuickActionAttach: true,
showQuickActionExec: true,
showQuickActionInspect: true,
showQuickActionLogs: true,
showQuickActionStats: true,
};
const isAgent = isAgentEnvironment(environmentQuery.data.Type);
return isAgent && item.Container ? (
<ContainerQuickActions
containerId={item.Container.Id}
nodeName={item.Container.NodeName}
status={item.Container.Status}
state={state}
/>
) : (
<TaskTableQuickActions taskId={item.Id} />
);
}

5
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/helper.ts
View file

@ -1,5 +0,0 @@
import { createColumnHelper } from '@tanstack/react-table';
import { DecoratedTask } from '../types';
export const columnHelper = createColumnHelper<DecoratedTask>();

19
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/index.ts
View file

@ -1,19 +0,0 @@
import { isoDate } from '@/portainer/filters/filters';
import { actions } from './actions';
import { columnHelper } from './helper';
import { node } from './node';
import { status } from './status';
import { task } from './task';
export const columns = [
status,
task,
actions,
columnHelper.accessor((item) => item.Slot || '-', { header: 'Slot' }),
node,
columnHelper.accessor('Updated', {
header: 'Last Update',
cell: ({ getValue }) => isoDate(getValue()),
}),
];

32
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/node.tsx
View file

@ -1,32 +0,0 @@
import { Node } from 'docker-types/generated/1.41';
import { CellContext } from '@tanstack/react-table';
import { useNodes } from '@/react/docker/proxy/queries/nodes/useNodes';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { DecoratedTask } from '../types';
import { columnHelper } from './helper';
export const node = columnHelper.accessor('NodeId', {
header: 'Node',
cell: Cell,
});
function Cell({ getValue }: CellContext<DecoratedTask, string>) {
const environmentId = useEnvironmentId();
const nodesQuery = useNodes(environmentId);
const nodes = nodesQuery.data || [];
return getNodeName(getValue(), nodes);
}
function getNodeName(nodeId: string, nodes: Array<Node>) {
const node = nodes.find((node) => node.ID === nodeId);
if (node?.Description?.Hostname) {
return node.Description.Hostname;
}
return '';
}

27
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/status.tsx
View file

@ -1,27 +0,0 @@
import clsx from 'clsx';
import { taskStatusBadge } from '@/docker/filters/utils';
import { multiple } from '@@/datatables/filter-types';
import { filterHOC } from '@@/datatables/Filter';
import { columnHelper } from './helper';
export const status = columnHelper.accessor((item) => item.Status?.State, {
header: 'Status',
enableColumnFilter: true,
filterFn: multiple,
meta: {
filter: filterHOC('Filter by state'),
width: 100,
},
cell({ getValue }) {
const value = getValue();
return (
<span className={clsx('label', `label-${taskStatusBadge(value)}`)}>
{value}
</span>
);
},
});

6
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/task.tsx → app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/task-column.tsx
View file

@ -2,13 +2,11 @@ import { CellContext } from '@tanstack/react-table';
import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
import { isAgentEnvironment } from '@/react/portainer/environments/utils';
import { DecoratedTask } from '@/react/docker/services/ItemView/TasksDatatable/types';
import { columnHelper } from '@/react/docker/services/ItemView/TasksDatatable/columns/helper';
import { Link } from '@@/Link';
import { DecoratedTask } from '../types';
import { columnHelper } from './helper';
export const task = columnHelper.accessor('Id', {
header: 'Task',
cell: Cell,

6
app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/types.ts
View file

@ -1,6 +0,0 @@
import { TaskViewModel } from '@/docker/models/task';
import { DockerContainer } from '@/react/docker/containers/types';
export type DecoratedTask = TaskViewModel & {
Container?: DockerContainer;
};