refactor(docker/services): convert service tasks table to react [EE-4674] (#10188)

app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html

@@ -1,109 +0,0 @@
-<div class="inner-datatable">
-  <table class="table-condensed table-hover nowrap-cells table">
-    <thead>
-      <tr>
-        <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" class="w-[10%]">
-          <div class="flex">
-            <table-column-header
-              col-title="'Status'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'Status.State'"
-              is-sorted-desc="$ctrl.state.orderBy === 'Status.State' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('Status.State')"
-            ></table-column-header>
-            <span class="space-left">
-              <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled"
-                >Filter
-                <pr-icon icon="'filter'"></pr-icon>
-              </span>
-              <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled"
-                >Filter
-                <pr-icon icon="'check'"></pr-icon>
-              </span>
-            </span>
-            <div class="dropdown-menu" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader"> Filter by state </div>
-                <div class="menuContent">
-                  <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                    <input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
-                    <label for="filter_state_{{ $ctrl.serviceId }}_{{ $index }}">{{ filter.label }}</label>
-                  </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </th>
-        <th style="width: 22%">Task</th>
-        <th>Actions</th>
-        <th>
-          <table-column-header
-            col-title="'Slot'"
-            can-sort="true"
-            is-sorted="$ctrl.state.orderBy === 'Slot'"
-            is-sorted-desc="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"
-            ng-click="$ctrl.changeOrderBy('Slot')"
-          ></table-column-header>
-        </th>
-        <th>
-          <table-column-header
-            col-title="'Node'"
-            can-sort="true"
-            is-sorted="$ctrl.state.orderBy === 'NodeId'"
-            is-sorted-desc="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"
-            ng-click="$ctrl.changeOrderBy('NodeId')"
-          ></table-column-header>
-        </th>
-        <th>
-          <table-column-header
-            col-title="'Last Update'"
-            can-sort="true"
-            is-sorted="$ctrl.state.orderBy === 'Updated'"
-            is-sorted-desc="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"
-            ng-click="$ctrl.changeOrderBy('Updated')"
-          ></table-column-header>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))"
-      >
-        <td class="text-center">
-          <span class="label label-{{ item.Status.State | taskstatusbadge }} space-right">{{ item.Status.State }}</span>
-        </td>
-        <td>
-          <a ng-if="!$ctrl.agentProxy || !item.Container" ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a>
-          <a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{
-            item.Id
-          }}</a>
-        </td>
-        <td>
-          <container-quick-actions
-            ng-if="!$ctrl.agentProxy || !item.Container"
-            container-id="item.ContainerId"
-            task-id="item.Id"
-            status="item.Status.State"
-            state="$ctrl.state"
-          ></container-quick-actions>
-          <container-quick-actions
-            ng-if="$ctrl.agentProxy && item.Container"
-            container-id="item.Container.Id"
-            node-name="item.Container.NodeName"
-            status="item.Status.State"
-            state="$ctrl.state"
-          ></container-quick-actions>
-        </td>
-        <td>{{ item.Slot ? item.Slot : '-' }}</td>
-        <td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>
-        <td>{{ item.Updated | getisodate }}</td>
-      </tr>
-      <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-        <td colspan="5" class="text-muted text-center">No task matching filter.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>

app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.js

@@ -1,15 +0,0 @@
-angular.module('portainer.docker').component('serviceTasksDatatable', {
-  templateUrl: './serviceTasksDatatable.html',
-  controller: 'ServiceTasksDatatableController',
-  bindings: {
-    dataset: '<',
-    serviceId: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    nodes: '<',
-    agentProxy: '<',
-    textFilter: '=',
-    showTaskLogsButton: '<',
-  },
-});

app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatableController.js

@@ -1,94 +0,0 @@
-import _ from 'lodash-es';
-
-angular.module('portainer.docker').controller('ServiceTasksDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    var ctrl = this;
-
-    this.state = Object.assign(this.state, {
-      showQuickActionStats: true,
-      showQuickActionLogs: true,
-      showQuickActionConsole: true,
-      showQuickActionInspect: true,
-      showQuickActionExec: true,
-      showQuickActionAttach: false,
-    });
-
-    this.filters = {
-      state: {
-        open: false,
-        enabled: false,
-        values: [],
-      },
-    };
-
-    this.applyFilters = function (item) {
-      var filters = ctrl.filters;
-      for (var i = 0; i < filters.state.values.length; i++) {
-        var filter = filters.state.values[i];
-        if (item.Status.State === filter.label && filter.display) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    this.onStateFilterChange = function () {
-      var filters = this.filters.state.values;
-      var filtered = false;
-      for (var i = 0; i < filters.length; i++) {
-        var filter = filters[i];
-        if (!filter.display) {
-          filtered = true;
-        }
-      }
-      this.filters.state.enabled = filtered;
-    };
-
-    this.prepareTableFromDataset = function () {
-      var availableStateFilters = [];
-      for (var i = 0; i < this.dataset.length; i++) {
-        var item = this.dataset[i];
-        availableStateFilters.push({ label: item.Status.State, display: true });
-      }
-      this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
-    };
-
-    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 storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-      if (storedSettings !== null) {
-        this.settings = storedSettings;
-        this.settings.open = false;
-      }
-      this.onSettingsRepeaterChange();
-    };
-  },
-]);

app/docker/components/datatables/services-datatable/servicesDatatable.html

@@ -210,16 +210,7 @@
             <tr dir-paginate-end ng-show="item.Expanded">
               <td></td>
               <td colspan="8">
-                <service-tasks-datatable
-                  dataset="item.Tasks"
-                  service-id="item.Id"
-                  table-key="service-tasks"
-                  order-by="Status.State"
-                  nodes="$ctrl.nodes"
-                  agent-proxy="$ctrl.agentProxy"
-                  show-task-logs-button="$ctrl.showTaskLogsButton"
-                  text-filter="$ctrl.state.textFilter"
-                ></service-tasks-datatable>
+                <docker-service-tasks-datatable dataset="item.Tasks" search="$ctrl.state.textFilter"></docker-service-tasks-datatable>
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">

app/docker/components/datatables/tasks-datatable/tasksDatatable.html

@@ -89,13 +89,7 @@
                 >
               </td>
               <td>
-                <container-quick-actions
-                  ng-if="!$ctrl.agentProxy || !item.Container"
-                  container-id="item.ContainerId"
-                  task-id="item.Id"
-                  status="item.Status.State"
-                  state="$ctrl.state"
-                ></container-quick-actions>
+                <task-table-quick-actions ng-if="!$ctrl.agentProxy || !item.Container" task-id="item.Id" state="$ctrl.state"></task-table-quick-actions>
                 <container-quick-actions
                   ng-if="$ctrl.agentProxy && item.Container"
                   container-id="item.Container.Id"

app/docker/filters/filters.js

@@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import { joinCommand, trimSHA } from './utils';
+import { joinCommand, taskStatusBadge, trimSHA } from './utils';
 
 function includeString(text, values) {
   return values.some(function (val) {
@@ -49,22 +49,7 @@ angular
   })
   .filter('taskstatusbadge', function () {
     'use strict';
-    return function (text) {
-      var status = _.toLower(text);
-      var labelStyle = 'default';
-      if (includeString(status, ['new', 'allocated', 'assigned', 'accepted', 'preparing', 'ready', 'starting', 'remove'])) {
-        labelStyle = 'info';
-      } else if (includeString(status, ['pending'])) {
-        labelStyle = 'warning';
-      } else if (includeString(status, ['shutdown', 'failed', 'rejected', 'orphaned'])) {
-        labelStyle = 'danger';
-      } else if (includeString(status, ['complete'])) {
-        labelStyle = 'primary';
-      } else if (includeString(status, ['running'])) {
-        labelStyle = 'success';
-      }
-      return labelStyle;
-    };
+    return taskStatusBadge;
   })
   .filter('taskhaslogs', function () {
     'use strict';

app/docker/filters/utils.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { TaskState } from 'docker-types/generated/1.41';
 
 export function trimSHA(imageName: string) {
   if (!imageName) {
@@ -17,3 +18,38 @@ export function joinCommand(command: null | Array<string> = []) {
 
   return command.join(' ');
 }
+
+export function taskStatusBadge(text?: TaskState) {
+  const status = _.toLower(text);
+  if (
+    [
+      'new',
+      'allocated',
+      'assigned',
+      'accepted',
+      'preparing',
+      'ready',
+      'starting',
+      'remove',
+    ].includes(status)
+  ) {
+    return 'info';
+  }
+
+  if (['pending'].includes(status)) {
+    return 'warning';
+  }
+
+  if (['shutdown', 'failed', 'rejected', 'orphaned'].includes(status)) {
+    return 'danger';
+  }
+
+  if (['complete'].includes(status)) {
+    return 'primary';
+  }
+
+  if (['running'].includes(status)) {
+    return 'success';
+  }
+  return 'default';
+}

app/docker/models/task.js

@@ -1,14 +0,0 @@
-export function TaskViewModel(data) {
-  this.Id = data.ID;
-  this.Created = data.CreatedAt;
-  this.Updated = data.UpdatedAt;
-  this.Slot = data.Slot;
-  this.Spec = data.Spec;
-  this.Status = data.Status;
-  this.DesiredState = data.DesiredState;
-  this.ServiceId = data.ServiceID;
-  this.NodeId = data.NodeID;
-  if (data.Status && data.Status.ContainerStatus && data.Status.ContainerStatus.ContainerID) {
-    this.ContainerId = data.Status.ContainerStatus.ContainerID;
-  }
-}

app/docker/models/task.ts

@@ -0,0 +1,36 @@
+import { Task, TaskSpec, TaskState } from 'docker-types/generated/1.41';
+
+export class TaskViewModel {
+  Id: string;
+
+  Created: string;
+
+  Updated: string;
+
+  Slot: number;
+
+  Spec?: TaskSpec;
+
+  Status: Task['Status'];
+
+  DesiredState: TaskState;
+
+  ServiceId: string;
+
+  NodeId: string;
+
+  ContainerId: string = '';
+
+  constructor(data: Task) {
+    this.Id = data.ID || '';
+    this.Created = data.CreatedAt || '';
+    this.Updated = data.UpdatedAt || '';
+    this.Slot = data.Slot || 0;
+    this.Spec = data.Spec;
+    this.Status = data.Status;
+    this.DesiredState = data.DesiredState || 'pending';
+    this.ServiceId = data.ServiceID || '';
+    this.NodeId = data.NodeID || '';
+    this.ContainerId = data.Status?.ContainerStatus?.ContainerID || '';
+  }
+}

app/docker/react/components/index.ts

@@ -25,9 +25,13 @@ import { ScaleServiceButton } from '@/react/docker/services/ListView/ServicesDat
 import { SecretsDatatable } from '@/react/docker/secrets/ListView/SecretsDatatable';
 
 import { containersModule } from './containers';
+import { servicesModule } from './services';
 
 const ngModule = angular
-  .module('portainer.docker.react.components', [containersModule])
+  .module('portainer.docker.react.components', [
+    containersModule,
+    servicesModule,
+  ])
   .component('dockerfileDetails', r2a(DockerfileDetails, ['image']))
   .component('dockerHealthStatus', r2a(HealthStatus, ['health']))
   .component(
@@ -37,7 +41,6 @@ const ngModule = angular
       'nodeName',
       'state',
       'status',
-      'taskId',
     ])
   )
   .component('templateListDropdown', TemplateListDropdownAngular)

app/docker/react/components/services.ts

@@ -0,0 +1,21 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+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';
+
+export const servicesModule = angular
+  .module('portainer.docker.react.components.services', [])
+  .component(
+    'dockerServiceTasksDatatable',
+    r2a(withUIRouter(withCurrentUser(TasksDatatable)), ['dataset', 'search'])
+  )
+  .component(
+    'dockerTaskTableQuickActions',
+    r2a(withUIRouter(withCurrentUser(TaskTableQuickActions)), [
+      'state',
+      'taskId',
+    ])
+  ).name;