refactor(docker/services): convert services table to react [EE-4675] (#10289)

app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx

@@ -0,0 +1,123 @@
+import { Shuffle } from 'lucide-react';
+import { Row } from '@tanstack/react-table';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { useApiVersion } from '@/react/docker/proxy/queries/useVersion';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { IconProps } from '@@/Icon';
+import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
+import {
+  createPersistedStore,
+  refreshableSettings,
+  hiddenColumnsSettings,
+} from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { defaultGlobalFilterFn } from '@@/datatables/Datatable';
+import { getColumnVisibilityState } from '@@/datatables/ColumnVisibilityMenu';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withGlobalFilter } from '@@/datatables/extend-options/withGlobalFilter';
+
+import { useColumns } from './columns';
+import { TasksDatatable } from './TasksDatatable';
+import { TableActions } from './TableActions';
+import { type TableSettings as TableSettingsType } from './types';
+import { TableSettings } from './TableSettings';
+
+const tableKey = 'services';
+
+const store = createPersistedStore<TableSettingsType>(
+  tableKey,
+  'name',
+  (set) => ({
+    ...refreshableSettings(set),
+    ...hiddenColumnsSettings(set),
+    expanded: {},
+    setExpanded(value) {
+      set({ expanded: value });
+    },
+  })
+);
+
+export function ServicesDatatable({
+  titleIcon = Shuffle,
+  dataset,
+  isAddActionVisible,
+  isStackColumnVisible,
+  onRefresh,
+}: {
+  dataset: Array<ServiceViewModel> | undefined;
+  titleIcon?: IconProps['icon'];
+  isAddActionVisible?: boolean;
+  isStackColumnVisible?: boolean;
+  onRefresh?(): void;
+}) {
+  const environmentId = useEnvironmentId();
+  const apiVersion = useApiVersion(environmentId);
+  const tableState = useTableState(store, tableKey);
+  const columns = useColumns(isStackColumnVisible);
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  return (
+    <ExpandableDatatable
+      title="Services"
+      titleIcon={titleIcon}
+      dataset={dataset || []}
+      isLoading={!dataset}
+      settingsManager={tableState}
+      columns={columns}
+      getRowCanExpand={({ original: item }) => item.Tasks.length > 0}
+      renderSubRow={({ original: item }) => (
+        <tr>
+          <td />
+          <td colSpan={Number.MAX_SAFE_INTEGER}>
+            <TasksDatatable dataset={item.Tasks} search={tableState.search} />
+          </td>
+        </tr>
+      )}
+      initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
+      renderTableActions={(selectedRows) => (
+        <TableActions
+          selectedItems={selectedRows}
+          isAddActionVisible={isAddActionVisible}
+          isUpdateActionVisible={apiVersion >= 1.25}
+        />
+      )}
+      renderTableSettings={(table) => (
+        <TableSettings settings={tableState} table={table} />
+      )}
+      extendTableOptions={mergeOptions(
+        (options) => ({
+          ...options,
+          onExpandedChange: (updater) => {
+            const value =
+              typeof updater === 'function'
+                ? updater(tableState.expanded)
+                : updater;
+            tableState.setExpanded(value);
+          },
+          state: {
+            expanded: tableState.expanded,
+          },
+        }),
+        withGlobalFilter(filter)
+      )}
+    />
+  );
+}
+
+function filter(
+  row: Row<ServiceViewModel>,
+  columnId: string,
+  filterValue: null | { search: string }
+) {
+  return (
+    defaultGlobalFilterFn(row, columnId, filterValue) ||
+    row.original.Tasks.some((task) =>
+      Object.values(task).some(
+        (value) => value && value.toString().includes(filterValue?.search || '')
+      )
+    )
+  );
+}

app/react/docker/services/ListView/ServicesDatatable/TableActions.tsx

@@ -0,0 +1,118 @@
+import { Trash2, Plus, RefreshCw } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { Authorized } from '@/react/hooks/useUser';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { Link } from '@@/Link';
+import { Button, ButtonGroup } from '@@/buttons';
+import { confirmDelete } from '@@/modals/confirm';
+
+import { confirmServiceForceUpdate } from '../../common/update-service-modal';
+
+import { useRemoveServicesMutation } from './useRemoveServicesMutation';
+import { useForceUpdateServicesMutation } from './useForceUpdateServicesMutation';
+
+export function TableActions({
+  selectedItems,
+  isAddActionVisible,
+  isUpdateActionVisible,
+}: {
+  selectedItems: Array<ServiceViewModel>;
+  isAddActionVisible?: boolean;
+  isUpdateActionVisible?: boolean;
+}) {
+  const environmentId = useEnvironmentId();
+  const removeMutation = useRemoveServicesMutation(environmentId);
+  const updateMutation = useForceUpdateServicesMutation(environmentId);
+  const router = useRouter();
+
+  return (
+    <div className="flex items-center gap-2">
+      <ButtonGroup>
+        {isUpdateActionVisible && (
+          <Authorized authorizations="DockerServiceUpdate">
+            <Button
+              color="light"
+              disabled={selectedItems.length === 0}
+              onClick={() => handleUpdate(selectedItems)}
+              icon={RefreshCw}
+              data-cy="service-updateServiceButton"
+            >
+              Update
+            </Button>
+          </Authorized>
+        )}
+        <Authorized authorizations="DockerServiceDelete">
+          <Button
+            color="dangerlight"
+            disabled={selectedItems.length === 0}
+            onClick={() => handleRemove(selectedItems)}
+            icon={Trash2}
+            data-cy="service-removeServiceButton"
+          >
+            Remove
+          </Button>
+        </Authorized>
+      </ButtonGroup>
+
+      {isAddActionVisible && (
+        <Authorized authorizations="DockerServiceCreate">
+          <Button
+            as={Link}
+            props={{ to: '.new' }}
+            icon={Plus}
+            className="!ml-0"
+          >
+            Add service
+          </Button>
+        </Authorized>
+      )}
+    </div>
+  );
+
+  async function handleUpdate(selectedItems: Array<ServiceViewModel>) {
+    const confirmed = await confirmServiceForceUpdate(
+      'Do you want to force an update of the selected service(s)? All the tasks associated to the selected service(s) will be recreated.'
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    updateMutation.mutate(
+      {
+        ids: selectedItems.map((service) => service.Id),
+        pullImage: confirmed.pullLatest,
+      },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Service(s) successfully updated');
+          router.stateService.reload();
+        },
+      }
+    );
+  }
+
+  async function handleRemove(selectedItems: Array<ServiceViewModel>) {
+    const confirmed = await confirmDelete(
+      'Do you want to remove the selected service(s)? All the containers associated to the selected service(s) will be removed too.'
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    removeMutation.mutate(
+      selectedItems.map((service) => service.Id),
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Service(s) successfully removed');
+          router.stateService.reload();
+        },
+      }
+    );
+  }
+}

app/react/docker/services/ListView/ServicesDatatable/TableSettings.tsx

@@ -0,0 +1,35 @@
+import { Table } from '@tanstack/react-table';
+
+import { ServiceViewModel } from '@/docker/models/service';
+
+import { TableSettingsMenu } from '@@/datatables';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
+
+import { type TableSettings as TableSettingsType } from './types';
+
+export function TableSettings({
+  settings,
+  table,
+}: {
+  settings: TableSettingsType;
+  table: Table<ServiceViewModel>;
+}) {
+  return (
+    <>
+      <ColumnVisibilityMenu<ServiceViewModel>
+        table={table}
+        onChange={(hiddenColumns) => {
+          settings.setHiddenColumns(hiddenColumns);
+        }}
+        value={settings.hiddenColumns}
+      />
+      <TableSettingsMenu>
+        <TableSettingsMenuAutoRefresh
+          value={settings.autoRefreshRate}
+          onChange={(value) => settings.setAutoRefreshRate(value)}
+        />
+      </TableSettingsMenu>
+    </>
+  );
+}

app/react/docker/services/ListView/ServicesDatatable/columns/helper.ts

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

app/react/docker/services/ListView/ServicesDatatable/columns/image.tsx

@@ -0,0 +1,43 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { ImageStatus } from '@/react/docker/components/ImageStatus';
+import { hideShaSum } from '@/docker/filters/utils';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { ResourceType } from '@/react/docker/components/ImageStatus/types';
+import { ImageUpToDateTooltip } from '@/react/docker/components/datatable/TableColumnHeaderImageUpToDate';
+
+import { columnHelper } from './helper';
+
+export const image = columnHelper.accessor((item) => item.Image, {
+  id: 'image',
+  header: Header,
+  cell: Cell,
+});
+
+function Header() {
+  return (
+    <>
+      Image
+      <ImageUpToDateTooltip />
+    </>
+  );
+}
+
+function Cell({
+  getValue,
+  row: { original: item },
+}: CellContext<ServiceViewModel, string>) {
+  const value = hideShaSum(getValue());
+  const environmentId = useEnvironmentId();
+  return (
+    <>
+      <ImageStatus
+        resourceId={item.Id || ''}
+        resourceType={ResourceType.SERVICE}
+        environmentId={environmentId}
+      />
+      {value}
+    </>
+  );
+}

app/react/docker/services/ListView/ServicesDatatable/columns/index.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import _ from 'lodash';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { isoDate } from '@/portainer/filters/filters';
+import { createOwnershipColumn } from '@/react/docker/components/datatable/createOwnershipColumn';
+
+import { buildNameColumn } from '@@/datatables/buildNameColumn';
+import { buildExpandColumn } from '@@/datatables/expand-column';
+
+import { image } from './image';
+import { columnHelper } from './helper';
+import { schedulingMode } from './schedulingMode';
+import { ports } from './ports';
+
+export function useColumns(isStackColumnVisible?: boolean) {
+  return useMemo(
+    () =>
+      _.compact([
+        buildExpandColumn<ServiceViewModel>(),
+        buildNameColumn<ServiceViewModel>('Name', 'docker.services.service'),
+        isStackColumnVisible &&
+          columnHelper.accessor((item) => item.StackName || '-', {
+            header: 'Stack',
+            enableHiding: false,
+          }),
+        image,
+        schedulingMode,
+        ports,
+        columnHelper.accessor('UpdatedAt', {
+          header: 'Last Update',
+          cell: ({ getValue }) => isoDate(getValue()),
+        }),
+        createOwnershipColumn<ServiceViewModel>(),
+      ]),
+    [isStackColumnVisible]
+  );
+}

app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx

@@ -0,0 +1,55 @@
+import { ExternalLink } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+
+import { Icon } from '@@/Icon';
+
+import { columnHelper } from './helper';
+
+export const ports = columnHelper.accessor(
+  (row) =>
+    (row.Ports || [])
+      .filter((port) => port.PublishedPort)
+      .map((port) => `${port.PublishedPort}:${port.TargetPort}`)
+      .join(','),
+  {
+    header: 'Published Ports',
+    id: 'ports',
+    cell: Cell,
+  }
+);
+
+function Cell({
+  row: { original: item },
+}: CellContext<ServiceViewModel, string>) {
+  const environmentQuery = useCurrentEnvironment();
+
+  if (!environmentQuery.data) {
+    return null;
+  }
+
+  const ports = item.Ports || [];
+
+  if (ports.length === 0) {
+    return '-';
+  }
+
+  const { PublicURL: publicUrl } = environmentQuery.data;
+
+  return ports
+    .filter((port) => port.PublishedPort)
+    .map((port) => (
+      <a
+        key={`${publicUrl}:${port.PublishedPort}`}
+        className="image-tag vertical-center"
+        href={`http://${publicUrl}:${port.PublishedPort}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Icon icon={ExternalLink} />
+        {port.PublishedPort}:{port.TargetPort}
+      </a>
+    ));
+}

app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/constraint-helper.ts

@@ -0,0 +1,133 @@
+import { Node } from 'docker-types/generated/1.41';
+
+import { ServiceViewModel } from '@/docker/models/service';
+
+class ConstraintModel {
+  op: string;
+
+  value: string;
+
+  key: string;
+
+  constructor(op: string, key: string, value: string) {
+    this.op = op;
+    this.value = value;
+    this.key = key;
+  }
+}
+
+const patterns = {
+  id: {
+    nodeId: 'node.id',
+    nodeHostname: 'node.hostname',
+    nodeRole: 'node.role',
+    nodeLabels: 'node.labels.',
+    engineLabels: 'engine.labels.',
+  },
+  op: {
+    eq: '==',
+    neq: '!=',
+  },
+} as const;
+
+function matchesConstraint(
+  value: string | undefined,
+  constraint?: ConstraintModel
+) {
+  if (
+    !constraint ||
+    (constraint.op === patterns.op.eq && value === constraint.value) ||
+    (constraint.op === patterns.op.neq && value !== constraint.value)
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function matchesLabel(
+  labels: Record<string, string> | undefined,
+  constraint?: ConstraintModel
+) {
+  if (!constraint) {
+    return true;
+  }
+  return Object.entries(labels || {}).some(
+    ([key, value]) => key === constraint.key && value === constraint.value
+  );
+}
+
+function extractValue(constraint: string, op: string) {
+  return constraint.split(op).pop()?.trim() || '';
+}
+
+function extractCustomLabelKey(
+  constraint: string,
+  op: string,
+  baseLabelKey: string
+) {
+  return constraint.split(op).shift()?.trim().replace(baseLabelKey, '') || '';
+}
+
+interface Constraint {
+  nodeId?: ConstraintModel;
+  nodeHostname?: ConstraintModel;
+  nodeRole?: ConstraintModel;
+  nodeLabels?: ConstraintModel;
+  engineLabels?: ConstraintModel;
+}
+
+function transformConstraints(constraints: Array<string>) {
+  const transform: Constraint = {};
+  for (let i = 0; i < constraints.length; i++) {
+    const constraint = constraints[i];
+
+    let op = '';
+    if (constraint.includes(patterns.op.eq)) {
+      op = patterns.op.eq;
+    } else if (constraint.includes(patterns.op.neq)) {
+      op = patterns.op.neq;
+    }
+
+    const value = extractValue(constraint, op);
+    let key = '';
+    switch (true) {
+      case constraint.includes(patterns.id.nodeId):
+        transform.nodeId = new ConstraintModel(op, key, value);
+        break;
+      case constraint.includes(patterns.id.nodeHostname):
+        transform.nodeHostname = new ConstraintModel(op, key, value);
+        break;
+      case constraint.includes(patterns.id.nodeRole):
+        transform.nodeRole = new ConstraintModel(op, key, value);
+        break;
+      case constraint.includes(patterns.id.nodeLabels):
+        key = extractCustomLabelKey(constraint, op, patterns.id.nodeLabels);
+        transform.nodeLabels = new ConstraintModel(op, key, value);
+        break;
+      case constraint.includes(patterns.id.engineLabels):
+        key = extractCustomLabelKey(constraint, op, patterns.id.engineLabels);
+        transform.engineLabels = new ConstraintModel(op, key, value);
+        break;
+      default:
+        break;
+    }
+  }
+  return transform;
+}
+
+export function matchesServiceConstraints(
+  service: ServiceViewModel,
+  node: Node
+) {
+  if (service.Constraints === undefined || service.Constraints.length === 0) {
+    return true;
+  }
+  const constraints = transformConstraints([...service.Constraints]);
+  return (
+    matchesConstraint(node.ID, constraints.nodeId) &&
+    matchesConstraint(node.Description?.Hostname, constraints.nodeHostname) &&
+    matchesConstraint(node.Spec?.Role, constraints.nodeRole) &&
+    matchesLabel(node.Spec?.Labels, constraints.nodeLabels) &&
+    matchesLabel(node.Description?.Engine?.Labels, constraints.engineLabels)
+  );
+}

app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/index.ts

@@ -0,0 +1 @@
+export { schedulingMode } from './schedulingMode';

app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/schedulingMode.tsx

@@ -0,0 +1,66 @@
+import { CellContext } from '@tanstack/react-table';
+import { Node } from 'docker-types/generated/1.41';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { useNodes } from '@/react/docker/proxy/queries/nodes/useNodes';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { TaskViewModel } from '@/docker/models/task';
+
+import { columnHelper } from '../helper';
+
+import { matchesServiceConstraints } from './constraint-helper';
+import { ScaleServiceButton } from './ScaleServiceButton';
+
+export const schedulingMode = columnHelper.accessor('Mode', {
+  header: 'Scheduling Mode',
+  cell: Cell,
+  enableHiding: false,
+});
+
+function Cell({
+  getValue,
+  row: { original: item },
+}: CellContext<ServiceViewModel, string>) {
+  const environmentId = useEnvironmentId();
+  const nodesQuery = useNodes(environmentId);
+
+  if (!nodesQuery.data) {
+    return null;
+  }
+
+  const mode = getValue();
+  return (
+    <div className="flex items-center gap-3">
+      {mode}
+      <code>{totalRunningTasks(item.Tasks)}</code> /{' '}
+      <code>
+        {mode === 'replicated'
+          ? item.Replicas
+          : availableNodeCount(nodesQuery.data, item)}
+      </code>
+      {mode === 'replicated' && <ScaleServiceButton service={item} />}
+    </div>
+  );
+}
+
+function totalRunningTasks(tasks: Array<TaskViewModel>) {
+  return tasks.filter(
+    (task) =>
+      task.Status?.State === 'running' && task.DesiredState === 'running'
+  ).length;
+}
+
+function availableNodeCount(nodes: Array<Node>, service: ServiceViewModel) {
+  let availableNodes = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (
+      node.Spec?.Availability === 'active' &&
+      node.Status?.State === 'ready' &&
+      matchesServiceConstraints(service, node)
+    ) {
+      availableNodes++;
+    }
+  }
+  return availableNodes;
+}

app/react/docker/services/ListView/ServicesDatatable/index.ts

@@ -0,0 +1 @@
+export { ServicesDatatable } from './ServicesDatatable';

app/react/docker/services/ListView/ServicesDatatable/types.ts

@@ -0,0 +1,13 @@
+import {
+  BasicTableSettings,
+  RefreshableTableSettings,
+  SettableColumnsTableSettings,
+} from '@@/datatables/types';
+
+export type TableSettings = {
+  /** expanded is true (all expanded) or a record where each key value pair sets the state of the mentioned row */
+  expanded: true | Record<string, boolean>;
+  setExpanded(value: true | Record<string, boolean>): void;
+} & SettableColumnsTableSettings &
+  RefreshableTableSettings &
+  BasicTableSettings;

app/react/docker/services/ListView/ServicesDatatable/useForceUpdateServicesMutation.ts

@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import { withError } from '@/react-tools/react-query';
+import { forceUpdateService } from '@/react/portainer/environments/environment.service';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export function useForceUpdateServicesMutation(environmentId: EnvironmentId) {
+  return useMutation(
+    ({ ids, pullImage }: { ids: Array<string>; pullImage: boolean }) =>
+      promiseSequence(
+        ids.map((id) => () => forceUpdateService(environmentId, id, pullImage))
+      ),
+    withError('Failed to remove services')
+  );
+}

app/react/docker/services/ListView/ServicesDatatable/useRemoveServicesMutation.ts

@@ -0,0 +1,27 @@
+import { useMutation } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import { withError } from '@/react-tools/react-query';
+
+import { urlBuilder } from '../../axios/urlBuilder';
+import { removeWebhooksForService } from '../../webhooks/removeWebhook';
+
+export function useRemoveServicesMutation(environmentId: EnvironmentId) {
+  return useMutation(
+    (ids: Array<string>) =>
+      promiseSequence(ids.map((id) => () => removeService(environmentId, id))),
+    withError('Unable to remove services')
+  );
+}
+
+async function removeService(environmentId: EnvironmentId, serviceId: string) {
+  try {
+    await axios.delete(urlBuilder(environmentId, serviceId));
+
+    await removeWebhooksForService(environmentId, serviceId);
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}