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

2023-10-22 11:32:05 +02:00 · 2023-10-22 11:32:05 +02:00 · 0dc1805881
parent 6b5c24faff
commit 0dc1805881
46 changed files with 969 additions and 850 deletions
--- a/api/http/handler/endpoints/endpoint_force_update_service.go
+++ b/api/http/handler/endpoints/endpoint_force_update_service.go
@ -0,0 +1,108 @@
+package endpoints
+
+import (
+	"context"
+	"net/http"
+	"strings"
+
+	portaineree "github.com/portainer/portainer/api"
+	"github.com/portainer/portainer/api/docker/consts"
+	"github.com/portainer/portainer/api/docker/images"
+	httperror "github.com/portainer/portainer/pkg/libhttp/error"
+	"github.com/portainer/portainer/pkg/libhttp/request"
+	"github.com/portainer/portainer/pkg/libhttp/response"
+
+	"github.com/docker/docker/api/types"
+	dockertypes "github.com/docker/docker/api/types"
+	"github.com/docker/docker/api/types/filters"
+)
+
+type forceUpdateServicePayload struct {
+	// ServiceId to update
+	ServiceID string
+	// PullImage if true will pull the image
+	PullImage bool
+}
+
+func (payload *forceUpdateServicePayload) Validate(r *http.Request) error {
+	return nil
+}
+
+// @id endpointForceUpdateService
+// @summary force update a docker service
+// @description force update a docker service
+// @description **Access policy**: authenticated
+// @tags endpoints
+// @security ApiKeyAuth
+// @security jwt
+// @accept json
+// @produce json
+// @param id path int true "endpoint identifier"
+// @param body body forceUpdateServicePayload true "details"
+// @success 200 {object} dockertypes.ServiceUpdateResponse "Success"
+// @failure 400 "Invalid request"
+// @failure 403 "Permission denied"
+// @failure 404 "endpoint not found"
+// @failure 500 "Server error"
+// @router /endpoints/{id}/forceupdateservice [put]
+func (handler *Handler) endpointForceUpdateService(w http.ResponseWriter, r *http.Request) *httperror.HandlerError {
+	endpointID, err := request.RetrieveNumericRouteVariableValue(r, "id")
+	if err != nil {
+		return httperror.BadRequest("Invalid environment identifier route variable", err)
+	}
+
+	var payload forceUpdateServicePayload
+	err = request.DecodeAndValidateJSONPayload(r, &payload)
+	if err != nil {
+		return httperror.BadRequest("Invalid request payload", err)
+	}
+
+	endpoint, err := handler.DataStore.Endpoint().Endpoint(portaineree.EndpointID(endpointID))
+	if handler.DataStore.IsErrObjectNotFound(err) {
+		return httperror.NotFound("Unable to find an environment with the specified identifier inside the database", err)
+	} else if err != nil {
+		return httperror.InternalServerError("Unable to find an environment with the specified identifier inside the database", err)
+	}
+
+	err = handler.requestBouncer.AuthorizedEndpointOperation(r, endpoint)
+	if err != nil {
+		return httperror.Forbidden("Permission denied to force update service", err)
+	}
+
+	dockerClient, err := handler.DockerClientFactory.CreateClient(endpoint, "", nil)
+	if err != nil {
+		return httperror.InternalServerError("Error creating docker client", err)
+	}
+	defer dockerClient.Close()
+
+	service, _, err := dockerClient.ServiceInspectWithRaw(context.Background(), payload.ServiceID, dockertypes.ServiceInspectOptions{InsertDefaults: true})
+	if err != nil {
+		return httperror.InternalServerError("Error looking up service", err)
+	}
+
+	service.Spec.TaskTemplate.ForceUpdate++
+
+	if payload.PullImage {
+		service.Spec.TaskTemplate.ContainerSpec.Image = strings.Split(service.Spec.TaskTemplate.ContainerSpec.Image, "@sha")[0]
+	}
+
+	newService, err := dockerClient.ServiceUpdate(context.Background(), payload.ServiceID, service.Version, service.Spec, dockertypes.ServiceUpdateOptions{QueryRegistry: true})
+	if err != nil {
+		return httperror.InternalServerError("Error force update service", err)
+	}
+
+	go func() {
+		images.EvictImageStatus(payload.ServiceID)
+		images.EvictImageStatus(service.Spec.Labels[consts.SwarmStackNameLabel])
+		containers, _ := dockerClient.ContainerList(context.TODO(), types.ContainerListOptions{
+			All:     true,
+			Filters: filters.NewArgs(filters.Arg("label", consts.SwarmServiceIdLabel+"="+payload.ServiceID)),
+		})
+
+		for _, container := range containers {
+			images.EvictImageStatus(container.ID)
+		}
+	}()
+
+	return response.JSON(w, newService)
+}
--- a/api/http/handler/endpoints/handler.go
+++ b/api/http/handler/endpoints/handler.go
@ -6,6 +6,7 @@ import (
 	portainer "github.com/portainer/portainer/api"
 	"github.com/portainer/portainer/api/dataservices"
 	"github.com/portainer/portainer/api/demo"
+	dockerclient "github.com/portainer/portainer/api/docker/client"
 	"github.com/portainer/portainer/api/http/proxy"
 	"github.com/portainer/portainer/api/http/security"
 	"github.com/portainer/portainer/api/internal/authorization"
@ -36,6 +37,7 @@ type Handler struct {
 	K8sClientFactory      *cli.ClientFactory
 	ComposeStackManager   portainer.ComposeStackManager
 	AuthorizationService  *authorization.Service
+	DockerClientFactory   *dockerclient.ClientFactory
 	BindAddress           string
 	BindAddressHTTPS      string
 	PendingActionsService *pendingactions.PendingActionsService
@ -79,6 +81,8 @@ func NewHandler(bouncer security.BouncerService, demoService *demo.Service) *Han
 		bouncer.AuthenticatedAccess(httperror.LoggerHandler(h.endpointRegistryAccess))).Methods(http.MethodPut)

 	h.Handle("/endpoints/global-key", bouncer.PublicAccess(httperror.LoggerHandler(h.endpointCreateGlobalKey))).Methods(http.MethodPost)
+	h.Handle("/endpoints/{id}/forceupdateservice",
+		bouncer.AuthenticatedAccess(httperror.LoggerHandler(h.endpointForceUpdateService))).Methods(http.MethodPut)

 	// DEPRECATED
 	h.Handle("/endpoints/{id}/status", bouncer.PublicAccess(httperror.LoggerHandler(h.endpointStatusInspect))).Methods(http.MethodGet)
--- a/api/http/server.go
+++ b/api/http/server.go
@ -175,6 +175,7 @@ func (server *Server) Start() error {
 	endpointHandler.ProxyManager = server.ProxyManager
 	endpointHandler.SnapshotService = server.SnapshotService
 	endpointHandler.K8sClientFactory = server.KubernetesClientFactory
+	endpointHandler.DockerClientFactory = server.DockerClientFactory
 	endpointHandler.ReverseTunnelService = server.ReverseTunnelService
 	endpointHandler.ComposeStackManager = server.ComposeStackManager
 	endpointHandler.AuthorizationService = server.AuthorizationService
--- a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
+++ b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
@ -1,29 +0,0 @@
-<div class="actionBar !gap-3" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
-  <div class="btn-group" role="group" aria-label="...">
-    <button
-      ng-if="$ctrl.showUpdateAction"
-      type="button"
-      class="btn btn-sm btn-light h-fit"
-      authorization="DockerServiceUpdate"
-      ng-disabled="$ctrl.selectedItemCount === 0"
-      ng-click="$ctrl.updateAction($ctrl.selectedItems)"
-      data-cy="service-updateServiceButton"
-    >
-      <pr-icon icon="'refresh-cw'"></pr-icon>Update
-    </button>
-    <button
-      type="button"
-      class="btn btn-sm btn-dangerlight h-fit"
-      authorization="DockerServiceDelete"
-      ng-disabled="$ctrl.selectedItemCount === 0"
-      ng-click="$ctrl.removeAction($ctrl.selectedItems)"
-      data-cy="service-removeServiceButton"
-    >
-      <pr-icon icon="'trash-2'"></pr-icon>Remove
-    </button>
-  </div>
-  <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.services.new" ng-if="$ctrl.showAddAction" authorization="DockerServiceCreate">
-    <pr-icon icon="'plus'" class-name="'mr-1'"></pr-icon>
-    Add service
-  </button>
-</div>
--- a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.js
+++ b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.js
@ -1,11 +0,0 @@
-angular.module('portainer.docker').component('servicesDatatableActions', {
-  templateUrl: './servicesDatatableActions.html',
-  controller: 'ServicesDatatableActionsController',
-  bindings: {
-    selectedItems: '=',
-    selectedItemCount: '=',
-    showUpdateAction: '<',
-    showAddAction: '<',
-    endpointId: '<',
-  },
-});
--- a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActionsController.js
+++ b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActionsController.js
@ -1,88 +0,0 @@
-import { confirmDelete } from '@@/modals/confirm';
-import { confirmServiceForceUpdate } from '@/react/docker/services/common/update-service-modal';
-import { convertServiceToConfig } from '@/react/docker/services/common/convertServiceToConfig';
-
-angular.module('portainer.docker').controller('ServicesDatatableActionsController', [
-  '$q',
-  '$state',
-  'ServiceService',
-  'Notifications',
-  'ImageHelper',
-  'WebhookService',
-  function ($q, $state, ServiceService, Notifications, ImageHelper, WebhookService) {
-    const ctrl = this;
-
-    this.removeAction = function (selectedItems) {
-      confirmDelete('Do you want to remove the selected service(s)? All the containers associated to the selected service(s) will be removed too.').then((confirmed) => {
-        if (!confirmed) {
-          return;
-        }
-        removeServices(selectedItems);
-      });
-    };
-
-    this.updateAction = function (selectedItems) {
-      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.').then(
-        (result) => {
-          if (!result) {
-            return;
-          }
-
-          forceUpdateServices(selectedItems, result.pullLatest);
-        }
-      );
-    };
-
-    function forceUpdateServices(services, pullImage) {
-      var actionCount = services.length;
-      angular.forEach(services, function (service) {
-        var config = convertServiceToConfig(service.Model);
-        if (pullImage) {
-          config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
-        }
-
-        // As explained in https://github.com/docker/swarmkit/issues/2364 ForceUpdate can accept a random
-        // value or an increment of the counter value to force an update.
-        config.TaskTemplate.ForceUpdate++;
-        ServiceService.update(service, config)
-          .then(function success() {
-            Notifications.success('Service successfully updated', service.Name);
-          })
-          .catch(function error(err) {
-            Notifications.error('Failure', err, 'Unable to force update service' + service.Name);
-          })
-          .finally(function final() {
-            --actionCount;
-            if (actionCount === 0) {
-              $state.reload();
-            }
-          });
-      });
-    }
-
-    function removeServices(services) {
-      var actionCount = services.length;
-      angular.forEach(services, function (service) {
-        ServiceService.remove(service)
-          .then(function success() {
-            return WebhookService.webhooks(service.Id, ctrl.endpointId);
-          })
-          .then(function success(data) {
-            return $q.when(data.length !== 0 && WebhookService.deleteWebhook(data[0].Id));
-          })
-          .then(function success() {
-            Notifications.success('Service successfully removed', service.Name);
-          })
-          .catch(function error(err) {
-            Notifications.error('Failure', err, 'Unable to remove service');
-          })
-          .finally(function final() {
-            --actionCount;
-            if (actionCount === 0) {
-              $state.reload();
-            }
-          });
-      });
-    }
-  },
-]);
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@ -1,245 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-          {{ $ctrl.titleText }}
-        </div>
-        <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
-          <input
-            ng-if="!$ctrl.notAutoFocus"
-            auto-focus
-            type="text"
-            class="searchInput"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search for a service..."
-            ng-model-options="{ debounce: 300 }"
-            data-cy="service-searchInput"
-          />
-          <input
-            ng-if="$ctrl.notAutoFocus"
-            type="text"
-            class="searchInput"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search for a service..."
-            ng-model-options="{ debounce: 300 }"
-            data-cy="service-searchInput"
-          />
-        </div>
-        <services-datatable-actions
-          selected-items="$ctrl.state.selectedItems"
-          selected-item-count="$ctrl.state.selectedItemCount"
-          show-add-action="$ctrl.showAddAction"
-          show-update-action="$ctrl.showUpdateAction"
-          endpoint-id="$ctrl.endpointId"
-        ></services-datatable-actions>
-        <div class="settings">
-          <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle aria-label="Settings">
-              <pr-icon icon="'more-vertical'"></pr-icon>
-            </span>
-            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader"> Table settings </div>
-                <div class="menuContent">
-                  <div>
-                    <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
-                      <label for="setting_auto_refresh">Auto refresh</label>
-                    </div>
-                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
-                      <label for="settings_refresh_rate"> Refresh rate </label>
-                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
-                        <option value="10">10s</option>
-                        <option value="30">30s</option>
-                        <option value="60">1min</option>
-                        <option value="120">2min</option>
-                        <option value="300">5min</option>
-                      </select>
-                      <span>
-                        <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
-                </div>
-              </div>
-            </div>
-          </span>
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th style="width: 55px">
-                <span class="md-checkbox" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.expandAll()">
-                  <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'"></pr-icon>
-                  <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'"></pr-icon>
-                </a>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                ></table-column-header>
-              </th>
-              <th ng-if="$ctrl.showStackColumn">
-                <table-column-header
-                  col-title="'Stack'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'StackName'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('StackName')"
-                ></table-column-header>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.image.display">
-                <table-column-header
-                  col-title="'Image'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Image'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Image')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Scheduling Mode'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Mode'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Mode')"
-                ></table-column-header>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.ports.display">
-                <table-column-header
-                  col-title="'Published Ports'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Ports'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Ports')"
-                ></table-column-header>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.updated.display">
-                <table-column-header
-                  col-title="'Last Update'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'UpdatedAt'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('UpdatedAt')"
-                ></table-column-header>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.ownership.display">
-                <table-column-header
-                  col-title="'Ownership'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
-                ></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              ng-click="$ctrl.expandItem(item, !item.Expanded)"
-              dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{ active: item.Checked }"
-              class="interactive"
-            >
-              <td>
-                <span class="md-checkbox" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()" />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                <pr-icon ng-if="item.Expanded" icon="'chevron-down'" class-name="'mr-1'"></pr-icon>
-                <pr-icon ng-if="!item.Expanded" icon="'chevron-right'" class-name="'mr-1'"></pr-icon>
-              </td>
-              <td>
-                <button type="button" class="btn btn-link !ml-0 p-0 hover:no-underline" ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{
-                  item.Name
-                }}</button>
-              </td>
-              <td ng-if="$ctrl.showStackColumn">{{ item.StackName ? item.StackName : '-' }}</td>
-              <td ng-show="$ctrl.columnVisibility.columns.image.display">{{ item.Image | hideshasum }}</td>
-              <td>
-                {{ item.Mode }}
-                <code>{{ item.Tasks | runningtaskscount }}</code> / <code>{{ item.Mode === 'replicated' ? item.Replicas : ($ctrl.nodes | availablenodecount: item) }}</code>
-                <span ng-if="item.Mode === 'replicated'">
-                  <docker-services-datatable-scale-service-button service="item"></docker-services-datatable-scale-service-button>
-                </span>
-              </td>
-              <td ng-show="$ctrl.columnVisibility.columns.ports.display">
-                <a
-                  ng-if="item.Ports && item.Ports.length > 0 && p.PublishedPort"
-                  ng-repeat="p in item.Ports"
-                  class="image-tag vertical-center"
-                  ng-href="http://{{ $ctrl.endpointPublicUrl }}:{{ p.PublishedPort }}"
-                  target="_blank"
-                  ng-click="$event.stopPropagation();"
-                >
-                  <pr-icon icon="'external-link'"></pr-icon>
-                  {{ p.PublishedPort }}:{{ p.TargetPort }}
-                </a>
-                <span ng-if="!item.Ports || item.Ports.length === 0">-</span>
-              </td>
-              <td ng-show="$ctrl.columnVisibility.columns.updated.display">{{ item.UpdatedAt | getisodate }}</td>
-              <td ng-show="$ctrl.columnVisibility.columns.ownership.display">
-                <span>
-                  <i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
-                  {{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = $ctrl.RCO.ADMINISTRATORS }}
-                </span>
-              </td>
-            </tr>
-            <tr dir-paginate-end ng-show="item.Expanded">
-              <td></td>
-              <td colspan="8">
-                <docker-service-tasks-datatable dataset="item.Tasks" search="$ctrl.state.textFilter"></docker-service-tasks-datatable>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="8" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="8" class="text-muted text-center">No service available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline vertical-center">
-            <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.js
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.js
@ -1,22 +0,0 @@
-angular.module('portainer.docker').component('servicesDatatable', {
-  templateUrl: './servicesDatatable.html',
-  controller: 'ServicesDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    nodes: '<',
-    agentProxy: '<',
-    showUpdateAction: '<',
-    showAddAction: '<',
-    showStackColumn: '<',
-    showTaskLogsButton: '<',
-    refreshCallback: '<',
-    notAutoFocus: '<',
-    endpointPublicUrl: '<',
-    endpointId: '<',
-  },
-});
--- a/app/docker/components/datatables/services-datatable/servicesDatatableController.js
+++ b/app/docker/components/datatables/services-datatable/servicesDatatableController.js
@ -1,143 +0,0 @@
-import _ from 'lodash-es';
-
-angular.module('portainer.docker').controller('ServicesDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    var ctrl = this;
-
-    this.state = Object.assign(this.state, {
-      expandAll: false,
-      expandedItems: [],
-    });
-
-    this.columnVisibility = {
-      columns: {
-        image: {
-          label: 'Image',
-          display: true,
-        },
-        ownership: {
-          label: 'OwnerShip',
-          display: true,
-        },
-        ports: {
-          label: 'Published Ports',
-          display: true,
-        },
-        updated: {
-          label: 'Last Update',
-          display: true,
-        },
-      },
-    };
-
-    this.onColumnVisibilityChange = onColumnVisibilityChange.bind(this);
-    function onColumnVisibilityChange(columns) {
-      this.columnVisibility.columns = columns;
-      DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
-    }
-
-    this.expandAll = function () {
-      this.state.expandAll = !this.state.expandAll;
-      for (var i = 0; i < this.state.filteredDataSet.length; i++) {
-        var item = this.state.filteredDataSet[i];
-        this.expandItem(item, this.state.expandAll);
-      }
-    };
-
-    this.expandItem = function (item, expanded) {
-      item.Expanded = expanded;
-      if (item.Expanded) {
-        if (this.state.expandedItems.indexOf(item.Id) === -1) {
-          this.state.expandedItems.push(item.Id);
-        }
-      } else {
-        var index = this.state.expandedItems.indexOf(item.Id);
-        if (index > -1) {
-          this.state.expandedItems.splice(index, 1);
-        }
-      }
-      DatatableService.setDataTableExpandedItems(this.tableKey, this.state.expandedItems);
-    };
-
-    function expandPreviouslyExpandedItem(item, storedExpandedItems) {
-      var expandedItem = _.find(storedExpandedItems, function (storedId) {
-        return item.Id === storedId;
-      });
-
-      if (expandedItem) {
-        ctrl.expandItem(item, true);
-      }
-    }
-
-    this.expandItems = function (storedExpandedItems) {
-      var expandedItemCount = 0;
-      this.state.expandedItems = storedExpandedItems;
-
-      for (var i = 0; i < this.dataset.length; i++) {
-        var item = this.dataset[i];
-        expandPreviouslyExpandedItem(item, storedExpandedItems);
-        if (item.Expanded) {
-          ++expandedItemCount;
-        }
-      }
-
-      if (expandedItemCount === this.dataset.length) {
-        this.state.expandAll = true;
-      }
-    };
-
-    this.onDataRefresh = function () {
-      var storedExpandedItems = DatatableService.getDataTableExpandedItems(this.tableKey);
-      if (storedExpandedItems !== null) {
-        this.expandItems(storedExpandedItems);
-      }
-    };
-
-    this.$onInit = function () {
-      this.setDefaults();
-      this.prepareTableFromDataset();
-
-      this.state.orderBy = this.orderBy;
-      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-      if (storedOrder !== null) {
-        this.state.reverseOrder = storedOrder.reverse;
-        this.state.orderBy = storedOrder.orderBy;
-      }
-
-      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      if (textFilter !== null) {
-        this.state.textFilter = textFilter;
-        this.onTextFilterChange();
-      }
-
-      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-      if (storedFilters !== null) {
-        this.filters = storedFilters;
-      }
-      if (this.filters && this.filters.state) {
-        this.filters.state.open = false;
-      }
-
-      var storedExpandedItems = DatatableService.getDataTableExpandedItems(this.tableKey);
-      if (storedExpandedItems !== null) {
-        this.expandItems(storedExpandedItems);
-      }
-
-      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-      if (storedSettings !== null) {
-        this.settings = storedSettings;
-        this.settings.open = false;
-      }
-      this.onSettingsRepeaterChange();
-      var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
-      if (storedColumnVisibility !== null) {
-        this.columnVisibility = storedColumnVisibility;
-      }
-    };
-  },
-]);
--- a/app/docker/filters/filters.js
+++ b/app/docker/filters/filters.js
@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import { joinCommand, taskStatusBadge, nodeStatusBadge, trimSHA, dockerNodeAvailabilityBadge } from './utils';
+import { hideShaSum, joinCommand, nodeStatusBadge, taskStatusBadge, trimSHA } from './utils';

 function includeString(text, values) {
  return values.some(function (val) {
@ -76,7 +76,6 @@ angular
    };
  })
  .filter('nodestatusbadge', () => nodeStatusBadge)
-  .filter('dockerNodeAvailabilityBadge', () => dockerNodeAvailabilityBadge)
  .filter('trimcontainername', function () {
    'use strict';
    return function (name) {
@ -159,44 +158,7 @@ angular
  .filter('command', function () {
    return joinCommand;
  })
-  .filter('hideshasum', function () {
-    'use strict';
-    return function (imageName) {
-      if (imageName) {
-        return imageName.split('@sha')[0];
-      }
-      return '';
-    };
-  })
-  .filter('availablenodecount', [
-    'ConstraintsHelper',
-    function (ConstraintsHelper) {
-      'use strict';
-      return function (nodes, service) {
-        var availableNodes = 0;
-        for (var i = 0; i < nodes.length; i++) {
-          var node = nodes[i];
-          if (node.Availability === 'active' && node.Status === 'ready' && ConstraintsHelper.matchesServiceConstraints(service, node)) {
-            availableNodes++;
-          }
-        }
-        return availableNodes;
-      };
-    },
-  ])
-  .filter('runningtaskscount', function () {
-    'use strict';
-    return function (tasks) {
-      var runningTasks = 0;
-      for (var i = 0; i < tasks.length; i++) {
-        var task = tasks[i];
-        if (task.Status.State === 'running' && task.DesiredState === 'running') {
-          runningTasks++;
-        }
-      }
-      return runningTasks;
-    };
-  })
+  .filter('hideshasum', () => hideShaSum)
  .filter('tasknodename', function () {
    'use strict';
    return function (nodeId, nodes) {
--- a/app/docker/filters/utils.ts
+++ b/app/docker/filters/utils.ts
@ -1,4 +1,4 @@
-import { NodeStatus, TaskState, NodeSpec } from 'docker-types/generated/1.41';
+import { NodeStatus, TaskState } from 'docker-types/generated/1.41';
 import _ from 'lodash';

 export function trimSHA(imageName: string) {
@ -62,14 +62,6 @@ export function nodeStatusBadge(text: NodeStatus['State']) {
  return 'success';
 }

-export function dockerNodeAvailabilityBadge(text: NodeSpec['Availability']) {
-  if (text === 'pause') {
-    return 'warning';
-  }
-
-  if (text === 'drain') {
-    return 'danger';
-  }
-
-  return 'success';
+export function hideShaSum(imageName = '') {
+  return imageName.split('@sha')[0];
 }
--- a/app/docker/helpers/constraintsHelper.js
+++ b/app/docker/helpers/constraintsHelper.js
@ -1,108 +0,0 @@
-import _ from 'lodash-es';
-
-function ConstraintModel(op, key, value) {
-  this.op = op;
-  this.value = value;
-  this.key = key;
-}
-
-var patterns = {
-  id: {
-    nodeId: 'node.id',
-    nodeHostname: 'node.hostname',
-    nodeRole: 'node.role',
-    nodeLabels: 'node.labels.',
-    engineLabels: 'engine.labels.',
-  },
-  op: {
-    eq: '==',
-    neq: '!=',
-  },
-};
-
-function matchesConstraint(value, constraint) {
-  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, constraint) {
-  if (!constraint) {
-    return true;
-  }
-  var found = _.find(labels, function (label) {
-    return label.key === constraint.key && label.value === constraint.value;
-  });
-  return found !== undefined;
-}
-
-function extractValue(constraint, op) {
-  return constraint.split(op).pop().trim();
-}
-
-function extractCustomLabelKey(constraint, op, baseLabelKey) {
-  return constraint.split(op).shift().trim().replace(baseLabelKey, '');
-}
-
-angular.module('portainer.docker').factory('ConstraintsHelper', [
-  function ConstraintsHelperFactory() {
-    'use strict';
-    return {
-      transformConstraints: function (constraints) {
-        var transform = {};
-        for (var i = 0; i < constraints.length; i++) {
-          var constraint = constraints[i];
-
-          var op;
-          if (constraint.includes(patterns.op.eq)) {
-            op = patterns.op.eq;
-          } else if (constraint.includes(patterns.op.neq)) {
-            op = patterns.op.neq;
-          }
-
-          var value = extractValue(constraint, op);
-          var 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;
-      },
-      matchesServiceConstraints: function (service, node) {
-        if (service.Constraints === undefined || service.Constraints.length === 0) {
-          return true;
-        }
-        var constraints = this.transformConstraints(angular.copy(service.Constraints));
-        if (
-          matchesConstraint(node.Id, constraints.nodeId) &&
-          matchesConstraint(node.Hostname, constraints.nodeHostname) &&
-          matchesConstraint(node.Role, constraints.nodeRole) &&
-          matchesLabel(node.Labels, constraints.nodeLabels) &&
-          matchesLabel(node.EngineLabels, constraints.engineLabels)
-        ) {
-          return true;
-        }
-        return false;
-      },
-    };
-  },
-]);
--- a/app/docker/react/components/index.ts
+++ b/app/docker/react/components/index.ts
@ -20,7 +20,6 @@ import { ConfigsDatatable } from '@/react/docker/configs/ListView/ConfigsDatatab
 import { AgentHostBrowser } from '@/react/docker/host/BrowseView/AgentHostBrowser';
 import { AgentVolumeBrowser } from '@/react/docker/volumes/BrowseView/AgentVolumeBrowser';
 import { ProcessesDatatable } from '@/react/docker/containers/StatsView/ProcessesDatatable';
-import { ScaleServiceButton } from '@/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton';
 import { SecretsDatatable } from '@/react/docker/secrets/ListView/SecretsDatatable';
 import { StacksDatatable } from '@/react/docker/stacks/ListView/StacksDatatable';

@ -124,10 +123,6 @@ const ngModule = angular
    'dockerContainerProcessesDatatable',
    r2a(ProcessesDatatable, ['dataset', 'headers'])
  )
-  .component(
-    'dockerServicesDatatableScaleServiceButton',
-    r2a(withUIRouter(withCurrentUser(ScaleServiceButton)), ['service'])
-  )
  .component('dockerEventsDatatable', r2a(EventsDatatable, ['dataset']))
  .component(
    'dockerSecretsDatatable',
--- a/app/docker/react/components/services.ts
+++ b/app/docker/react/components/services.ts
@ -5,6 +5,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
 import { TasksDatatable } from '@/react/docker/services/ListView/ServicesDatatable/TasksDatatable';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { TaskTableQuickActions } from '@/react/docker/services/common/TaskTableQuickActions';
+import { ServicesDatatable } from '@/react/docker/services/ListView/ServicesDatatable';

 export const servicesModule = angular
  .module('portainer.docker.react.components.services', [])
@ -18,4 +19,14 @@ export const servicesModule = angular
      'state',
      'taskId',
    ])
+  )
+  .component(
+    'dockerServicesDatatable',
+    r2a(withUIRouter(withCurrentUser(ServicesDatatable)), [
+      'dataset',
+      'isAddActionVisible',
+      'isStackColumnVisible',
+      'onRefresh',
+      'titleIcon',
+    ])
  ).name;
--- a/app/docker/views/services/services.html
+++ b/app/docker/views/services/services.html
@ -1,22 +1,9 @@
 <page-header title="'Service list'" breadcrumbs="['Services']" reload="true"> </page-header>

-<div class="row" ng-if="services">
-  <div class="col-sm-12">
-    <services-datatable
-      title-text="Services"
-      title-icon="shuffle"
+<docker-services-datatable
  dataset="services"
-      table-key="services"
-      order-by="Name"
-      nodes="nodes"
-      agent-proxy="applicationState.endpoint.mode.agentProxy"
-      show-update-action="applicationState.endpoint.apiVersion >= 1.25"
-      show-task-logs-button="applicationState.endpoint.apiVersion >= 1.30"
-      show-add-action="true"
-      show-stack-column="true"
-      refresh-callback="getServices"
-      endpoint-public-url="endpoint.PublicURL"
-      endpoint-id="endpoint.Id"
-    ></services-datatable>
-  </div>
-</div>
+  title-icon="shuffle"
+  on-refresh="(getServices)"
+  is-add-action-visible="true"
+  is-stack-column-visible="true"
+></docker-services-datatable>
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@ -239,27 +239,7 @@
  environment="endpoint"
 ></stack-containers-datatable>

-<div class="row" ng-if="services && (!orphaned || orphanedRunning)">
-  <div class="col-sm-12">
-    <services-datatable
-      title-text="Services"
-      title-icon="list"
-      dataset="services"
-      table-key="stack-services"
-      order-by="Name"
-      nodes="nodes"
-      agent-proxy="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
-      show-ownership-column="false"
-      show-update-action="applicationState.endpoint.apiVersion >= 1.25"
-      show-task-logs-button="applicationState.endpoint.apiVersion >= 1.30"
-      show-add-action="false"
-      show-stack-column="false"
-      not-auto-focus="true"
-      endpoint-public-url="endpoint.PublicURL"
-      endpoint-id="endpoint.Id"
-    ></services-datatable>
-  </div>
-</div>
+<docker-services-datatable ng-if="services && (!orphaned || orphanedRunning)" dataset="services" title-icon="list" on-refresh="(getServices)"></docker-services-datatable>

 <!-- access-control-panel -->
 <access-control-panel
--- a/app/react/common/stacks/ItemView/StackContainersDatatable.tsx
+++ b/app/react/common/stacks/ItemView/StackContainersDatatable.tsx
@ -13,7 +13,10 @@ import {
  buildAction,
  QuickActionsSettings,
 } from '@@/datatables/QuickActionsSettings';
-import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
+import {
+  ColumnVisibilityMenu,
+  getColumnVisibilityState,
+} from '@@/datatables/ColumnVisibilityMenu';
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 import { useTableState } from '@@/datatables/useTableState';

@ -64,27 +67,13 @@ export function StackContainersDatatable({ environment, stackName }: Props) {
              endpointId={environment.Id}
            />
          )}
-          initialTableState={{
-            columnVisibility: Object.fromEntries(
-              tableState.hiddenColumns.map((col) => [col, false])
-            ),
-          }}
-          renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance
-              .getAllColumns()
-              .filter((col) => col.getCanHide());
-
-            return (
+          initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
+          renderTableSettings={(tableInstance) => (
            <>
              <ColumnVisibilityMenu<DockerContainer>
-                  columns={columnsToHide}
+                table={tableInstance}
                onChange={(hiddenColumns) => {
                  tableState.setHiddenColumns(hiddenColumns);
-                    tableInstance.setColumnVisibility(
-                      Object.fromEntries(
-                        hiddenColumns.map((col) => [col, false])
-                      )
-                    );
                }}
                value={tableState.hiddenColumns}
              />
@ -94,8 +83,7 @@ export function StackContainersDatatable({ environment, stackName }: Props) {
                <ContainersDatatableSettings settings={tableState} />
              </Table.SettingsMenu>
            </>
-            );
-          }}
+          )}
          dataset={containersQuery.data || []}
          isLoading={containersQuery.isLoading}
          emptyContentLabel="No containers found"
--- a/app/react/components/buttons/ButtonGroup.tsx
+++ b/app/react/components/buttons/ButtonGroup.tsx
@ -9,7 +9,7 @@ export interface Props {
 }

 export function ButtonGroup({
-  size = 'small',
+  size,
  children,
  className,
  'aria-label': ariaLabel,
--- a/app/react/components/datatables/ColumnVisibilityMenu.tsx
+++ b/app/react/components/datatables/ColumnVisibilityMenu.tsx
@ -2,21 +2,26 @@ import _ from 'lodash';
 import clsx from 'clsx';
 import { Menu, MenuButton, MenuList } from '@reach/menu-button';
 import { Columns } from 'lucide-react';
-import { Column } from '@tanstack/react-table';
+import { Table } from '@tanstack/react-table';

 import { Checkbox } from '@@/form-components/Checkbox';

 interface Props<D extends object> {
-  columns: Column<D>[];
  onChange: (value: string[]) => void;
  value: string[];
+  table: Table<D>;
 }

 export function ColumnVisibilityMenu<D extends object>({
-  columns,
  onChange,
  value,
+  table,
 }: Props<D>) {
+  const columnsToHide = table.getAllColumns().filter((col) => col.getCanHide());
+  if (!columnsToHide.length) {
+    return null;
+  }
+
  return (
    <Menu className="setting">
      {({ isExpanded }) => (
@ -38,7 +43,7 @@ export function ColumnVisibilityMenu<D extends object>({
            <div className="tableMenu">
              <div className="menuHeader">Show / Hide Columns</div>
              <div className="menuContent">
-                {columns.map((column) => (
+                {columnsToHide.map((column) => (
                  <div key={column.id}>
                    <Checkbox
                      checked={column.getIsVisible()}
@ -66,11 +71,21 @@ export function ColumnVisibilityMenu<D extends object>({
  );

  function handleChangeColumnVisibility(colId: string, visible: boolean) {
-    if (visible) {
-      onChange(value.filter((id) => id !== colId));
-      return;
+    const newValue = visible
+      ? value.filter((id) => id !== colId)
+      : [...value, colId];
+
+    table.setColumnVisibility(
+      Object.fromEntries(newValue.map((col) => [col, false]))
+    );
+    onChange(newValue);
+  }
 }

-    onChange([...value, colId]);
-  }
+export function getColumnVisibilityState(hiddenColumns: string[]) {
+  return {
+    columnVisibility: Object.fromEntries(
+      hiddenColumns.map((col) => [col, false])
+    ),
+  };
 }
--- a/app/react/components/datatables/ExpandableDatatableRow.tsx
+++ b/app/react/components/datatables/ExpandableDatatableRow.tsx
@ -23,7 +23,7 @@ export function ExpandableDatatableTableRow<D extends DefaultType>({
        cells={cells}
        onClick={expandOnClick ? () => row.toggleExpanded() : undefined}
      />
-      {row.getIsExpanded() && renderSubRow(row)}
+      {row.getIsExpanded() && row.getCanExpand() && renderSubRow(row)}
    </>
  );
 }
--- a/app/react/docker/components/ImageStatus/ImageStatus.tsx
+++ b/app/react/docker/components/ImageStatus/ImageStatus.tsx
@ -3,6 +3,7 @@ import { Loader } from 'lucide-react';
 import { useEnvironment } from '@/react/portainer/environments/queries';
 import { statusIcon } from '@/react/docker/components/ImageStatus/helpers';
 import { EnvironmentId } from '@/react/portainer/environments/types';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';

 import { Icon } from '@@/Icon';

@ -39,6 +40,10 @@ export function ImageStatus({
    return null;
  }

+  if (!isBE) {
+    return null;
+  }
+
  if (isLoading || !data) {
    return (
      <Icon
--- a/app/react/docker/components/datatable/TableColumnHeaderImageUpToDate.tsx
+++ b/app/react/docker/components/datatable/TableColumnHeaderImageUpToDate.tsx
@ -3,6 +3,7 @@ import UpToDate from '@/assets/ico/icon_up-to-date.svg?c';
 import UpdatesUnknown from '@/assets/ico/icon_updates-unknown.svg?c';
 import { useEnvironment } from '@/react/portainer/environments/queries';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';

 import { Icon } from '@@/Icon';
 import { Tooltip } from '@@/Tip/Tooltip';
@ -41,6 +42,10 @@ export function ImageUpToDateTooltip() {
    return null;
  }

+  if (!isBE) {
+    return null;
+  }
+
  return (
    <Tooltip
      position="top"
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
@ -9,7 +9,10 @@ import {
  buildAction,
  QuickActionsSettings,
 } from '@@/datatables/QuickActionsSettings';
-import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
+import {
+  ColumnVisibilityMenu,
+  getColumnVisibilityState,
+} from '@@/datatables/ColumnVisibilityMenu';
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 import { useTableState } from '@@/datatables/useTableState';

@ -66,27 +69,13 @@ export function ContainersDatatable({
          )}
          isLoading={containersQuery.isLoading}
          isRowSelectable={(row) => !row.original.IsPortainer}
-          initialTableState={{
-            columnVisibility: Object.fromEntries(
-              tableState.hiddenColumns.map((col) => [col, false])
-            ),
-          }}
-          renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance
-              .getAllColumns()
-              .filter((col) => col.getCanHide());
-
-            return (
+          initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
+          renderTableSettings={(tableInstance) => (
            <>
              <ColumnVisibilityMenu<DockerContainer>
-                  columns={columnsToHide}
+                table={tableInstance}
                onChange={(hiddenColumns) => {
                  tableState.setHiddenColumns(hiddenColumns);
-                    tableInstance.setColumnVisibility(
-                      Object.fromEntries(
-                        hiddenColumns.map((col) => [col, false])
-                      )
-                    );
                }}
                value={tableState.hiddenColumns}
              />
@ -99,8 +88,7 @@ export function ContainersDatatable({
                />
              </Table.SettingsMenu>
            </>
-            );
-          }}
+          )}
          dataset={containersQuery.data || []}
          emptyContentLabel="No containers found"
        />
--- a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
+++ b/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 || '')
+      )
+    )
+  );
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/TableActions.tsx
+++ b/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();
+        },
+      }
+    );
+  }
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/TableSettings.tsx
+++ b/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>
+    </>
+  );
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/helper.ts
+++ b/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>();
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/image.tsx
+++ b/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}
+    </>
+  );
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/index.ts
+++ b/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]
+  );
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx
+++ b/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>
+    ));
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/constraint-helper.ts
+++ b/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)
+  );
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/index.ts
+++ b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/index.ts
@ -0,0 +1 @@
+export { schedulingMode } from './schedulingMode';
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/schedulingMode.tsx
+++ b/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;
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/index.ts
+++ b/app/react/docker/services/ListView/ServicesDatatable/index.ts
@ -0,0 +1 @@
+export { ServicesDatatable } from './ServicesDatatable';
--- a/app/react/docker/services/ListView/ServicesDatatable/types.ts
+++ b/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;
--- a/app/react/docker/services/ListView/ServicesDatatable/useForceUpdateServicesMutation.ts
+++ b/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')
+  );
+}
--- a/app/react/docker/services/ListView/ServicesDatatable/useRemoveServicesMutation.ts
+++ b/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);
+  }
+}
--- a/app/react/docker/services/axios/urlBuilder.ts
+++ b/app/react/docker/services/axios/urlBuilder.ts
@ -1,10 +1,8 @@
-import { Service } from 'docker-types/generated/1.41';
-
 import { EnvironmentId } from '@/react/portainer/environments/types';

 export function urlBuilder(
  endpointId: EnvironmentId,
-  id?: Service['ID'],
+  id?: string,
  action?: string
 ) {
  let url = `/endpoints/${endpointId}/docker/services`;
--- a/app/react/docker/services/webhooks/build-url.ts
+++ b/app/react/docker/services/webhooks/build-url.ts
@ -0,0 +1,4 @@
+export function buildUrl(webhookId?: string) {
+  const baseUrl = '/webhooks';
+  return webhookId ? `${baseUrl}/${webhookId}` : baseUrl;
+}
--- a/app/react/docker/services/webhooks/getWebhooks.ts
+++ b/app/react/docker/services/webhooks/getWebhooks.ts
@ -0,0 +1,19 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from './build-url';
+import { Webhook } from './types';
+
+export async function getWebhooks(
+  environmentId: EnvironmentId,
+  serviceId: string
+) {
+  try {
+    const { data } = await axios.get<Array<Webhook>>(buildUrl(), {
+      params: { filters: { EndpointID: environmentId, ResourceID: serviceId } },
+    });
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}
--- a/app/react/docker/services/webhooks/removeWebhook.ts
+++ b/app/react/docker/services/webhooks/removeWebhook.ts
@ -0,0 +1,25 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+
+import { getWebhooks } from './getWebhooks';
+import { Webhook } from './types';
+import { buildUrl } from './build-url';
+
+export async function removeWebhooksForService(
+  environmentId: EnvironmentId,
+  serviceId: string
+) {
+  const webhooks = await getWebhooks(environmentId, serviceId);
+  return promiseSequence(
+    webhooks.map((webhook) => () => removeWebhook(webhook.Id))
+  );
+}
+
+export async function removeWebhook(webhookId: Webhook['Id']) {
+  try {
+    await axios.delete(buildUrl(webhookId));
+  } catch (err) {
+    throw parseAxiosError(err);
+  }
+}
--- a/app/react/docker/services/webhooks/types.ts
+++ b/app/react/docker/services/webhooks/types.ts
@ -0,0 +1,16 @@
+import { Environment } from '@/react/portainer/environments/types';
+import { Registry } from '@/react/portainer/registries/types';
+
+enum WebhookType {
+  Service = 1,
+  Container = 2,
+}
+
+export interface Webhook {
+  Id: string;
+  Token: string;
+  ResourceId: string;
+  EndpointId: Environment['Id'];
+  RegistryId: Registry['Id'];
+  Type: WebhookType;
+}
--- a/app/react/docker/stacks/ListView/StacksDatatable/TableSettingsMenus.tsx
+++ b/app/react/docker/stacks/ListView/StacksDatatable/TableSettingsMenus.tsx
@ -17,19 +17,12 @@ export function TableSettingsMenus({
  tableInstance: Table<DecoratedStack>;
  tableState: TableSettings;
 }) {
-  const columnsToHide = tableInstance
-    .getAllColumns()
-    .filter((col) => col.getCanHide());
-
  return (
    <>
      <ColumnVisibilityMenu<DecoratedStack>
-        columns={columnsToHide}
+        table={tableInstance}
        onChange={(hiddenColumns) => {
          tableState.setHiddenColumns(hiddenColumns);
-          tableInstance.setColumnVisibility(
-            Object.fromEntries(hiddenColumns.map((col) => [col, false]))
-          );
        }}
        value={tableState.hiddenColumns}
      />
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx
+++ b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx
@ -2,6 +2,7 @@ import { Layers } from 'lucide-react';

 import { Datatable } from '@@/datatables';
 import { useTableState } from '@@/datatables/useTableState';
+import { getColumnVisibilityState } from '@@/datatables/ColumnVisibilityMenu';

 import { useEdgeStacks } from '../../queries/useEdgeStacks';
 import { EdgeStack, StatusType } from '../../types';
@ -33,6 +34,7 @@ export function EdgeStacksDatatable() {
      titleIcon={Layers}
      columns={columns}
      dataset={edgeStacksQuery.data || []}
+      initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
      settingsManager={tableState}
      emptyContentLabel="No stack available."
      isLoading={edgeStacksQuery.isLoading}
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableSettingsMenus.tsx
+++ b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableSettingsMenus.tsx
@ -14,24 +14,17 @@ export function TableSettingsMenus({
  tableInstance: Table<DecoratedEdgeStack>;
  tableState: TableSettings;
 }) {
-  const columnsToHide = tableInstance
-    .getAllColumns()
-    .filter((col) => col.getCanHide());
-
  return (
    <>
-      {columnsToHide && columnsToHide.length > 0 && (
+      (
      <ColumnVisibilityMenu<DecoratedEdgeStack>
-          columns={columnsToHide}
+        table={tableInstance}
        onChange={(hiddenColumns) => {
          tableState.setHiddenColumns(hiddenColumns);
-            tableInstance.setColumnVisibility(
-              Object.fromEntries(hiddenColumns.map((col) => [col, false]))
-            );
        }}
        value={tableState.hiddenColumns}
      />
-      )}
+      )
      <TableSettingsMenu>
        <TableSettingsMenuAutoRefresh
          value={tableState.autoRefreshRate}
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx
@ -40,7 +40,7 @@ export function JobsDatatable({
      emptyContentLabel="No jobs found"
      renderSubRow={(row) => (
        <tr>
-          <td colSpan={6}>
+          <td colSpan={Number.MAX_SAFE_INTEGER}>
            <TasksDatatable data={row.original.Tasks} />
          </td>
        </tr>
				`@ -0,0 +1 @@`
				`export { schedulingMode } from './schedulingMode';`
				`@ -0,0 +1 @@`
				`export { ServicesDatatable } from './ServicesDatatable';`