refactor(edge/stacks): migrate list view to react [EE-2237] (#9186)

app/edge/views/edge-stacks/edgeStacksView/edgeStacksView.html

@@ -1,15 +0,0 @@
-<page-header title="'Edge Stacks list'" breadcrumbs="['Edge Stacks']" reload="true"> </page-header>
-
-<div class="row">
-  <div class="col-sm-12">
-    <edge-stacks-datatable
-      title-text="Edge Stacks"
-      title-icon="layers"
-      dataset="$ctrl.stacks"
-      table-key="edgeStacks"
-      order-by="Name"
-      remove-action="$ctrl.removeAction"
-      refresh-callback="$ctrl.getStacks"
-    ></edge-stacks-datatable>
-  </div>
-</div>

app/edge/views/edge-stacks/edgeStacksView/edgeStacksViewController.js

@@ -1,77 +0,0 @@
-import _ from 'lodash-es';
-import { confirmDestructive } from '@@/modals/confirm';
-import { buildConfirmButton } from '@@/modals/utils';
-
-export class EdgeStacksViewController {
-  /* @ngInject */
-  constructor($state, Notifications, EdgeStackService, $scope, $async) {
-    this.$state = $state;
-    this.Notifications = Notifications;
-    this.EdgeStackService = EdgeStackService;
-    this.$scope = $scope;
-    this.$async = $async;
-
-    this.stacks = undefined;
-
-    this.getStacks = this.getStacks.bind(this);
-    this.removeAction = this.removeAction.bind(this);
-    this.removeActionAsync = this.removeActionAsync.bind(this);
-  }
-
-  $onInit() {
-    this.getStacks();
-  }
-
-  removeAction(stacks) {
-    return this.$async(this.removeActionAsync, stacks);
-  }
-
-  async removeActionAsync(stacks) {
-    const confirmed = await confirmDestructive({
-      title: 'Are you sure?',
-      message: 'Are you sure you want to remove the selected Edge stack(s)?',
-      confirmButton: buildConfirmButton('Remove', 'danger'),
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    for (let stack of stacks) {
-      try {
-        await this.EdgeStackService.remove(stack.Id);
-        this.Notifications.success('Stack successfully removed', stack.Name);
-        _.remove(this.stacks, stack);
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to remove stack ' + stack.Name);
-      }
-    }
-
-    this.$state.reload();
-  }
-
-  aggregateStatus() {
-    if (this.stacks) {
-      this.stacks.forEach((stack) => {
-        const aggregateStatus = { ok: 0, error: 0, acknowledged: 0 };
-        for (let endpointId in stack.Status) {
-          const { Details } = stack.Status[endpointId];
-          aggregateStatus.ok += Number(Details.Ok);
-          aggregateStatus.error += Number(Details.Error);
-          aggregateStatus.acknowledged += Number(Details.Acknowledged);
-        }
-        stack.aggregateStatus = aggregateStatus;
-      });
-    }
-  }
-
-  async getStacks() {
-    try {
-      this.stacks = await this.EdgeStackService.stacks();
-      this.aggregateStatus();
-    } catch (err) {
-      this.stacks = [];
-      this.Notifications.error('Failure', err, 'Unable to retrieve stacks');
-    }
-  }
-}

app/edge/views/edge-stacks/edgeStacksView/index.js

@@ -1,8 +0,0 @@
-import angular from 'angular';
-
-import { EdgeStacksViewController } from './edgeStacksViewController';
-
-angular.module('portainer.edge').component('edgeStacksView', {
-  templateUrl: './edgeStacksView.html',
-  controller: EdgeStacksViewController,
-});