refactor(kube/volumes): migrate to react [EE-4695] (#10987)

app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.html

@@ -1,228 +0,0 @@
-<div class="datatable">
-  <!-- toolbar header actions and settings -->
-  <div class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
-      <div class="toolBarTitle vertical-center">
-        <div class="widget-icon space-right">
-          <pr-icon icon="'database'"></pr-icon>
-        </div>
-        Volumes
-      </div>
-      <div class="searchBar vertical-center">
-        <pr-icon icon="'search'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput !mr-0"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search for a volume..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="actionBar !mr-0 !gap-3">
-        <button
-          type="button"
-          class="btn btn-sm btn-dangerlight vertical-center !ml-0"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-        >
-          <pr-icon icon="'trash-2'"></pr-icon>
-          Remove
-        </button>
-        <button
-          type="button"
-          class="btn btn-sm btn-primary vertical-center !ml-0"
-          ui-sref="kubernetes.deploy({ referrer: 'kubernetes.volumes' })"
-          data-cy="k8sVolume-deployFromManifestButton"
-        >
-          <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>
-          Create from manifest
-        </button>
-      </div>
-      <div class="settings">
-        <span
-          class="setting"
-          ng-class="{ 'setting-active': $ctrl.settings.open }"
-          uib-dropdown
-          dropdown-append-to-body
-          auto-close="disabled"
-          is-open="$ctrl.settings.open"
-          data-cy="k8s-vol-table-settings"
-        >
-          <span uib-dropdown-toggle aria-label="Settings">
-            <pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></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" ng-if="$ctrl.isAdmin">
-                    <input id="setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
-                    <label for="setting_show_system">Show system resources</label>
-                  </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;" data-cy="k8s-vol-table-settings-close">Close</a>
-              </div>
-            </div>
-          </div>
-        </span>
-      </div>
-    </div>
-    <div class="flex w-full flex-row" ng-if="!ctrl.isAdmin && !$ctrl.settings.showSystem">
-      <span class="small text-muted vertical-center mt-1">
-        <pr-icon icon="'info'" mode="'primary'"></pr-icon>
-        <span> System resources are hidden, this can be changed in the table settings. </span>
-      </span>
-    </div>
-  </div>
-  <div class="table-responsive">
-    <table class="table-hover nowrap-cells table">
-      <thead>
-        <tr>
-          <th>
-            <div class="flex-no-wrap flex items-center">
-              <span class="md-checkbox vertical-center">
-                <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                <label for="select_all"></label>
-              </span>
-              <table-column-header
-                col-title="'Name'"
-                can-sort="true"
-                is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.Name'"
-                is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.Name' && $ctrl.state.reverseOrder"
-                ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Name')"
-              ></table-column-header>
-            </div>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Namespace'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'ResourcePool.Namespace.Name'"
-              is-sorted-desc="$ctrl.state.orderBy === 'ResourcePool.Namespace.Name' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('ResourcePool.Namespace.Name')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Used by'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.Applications[0].Name'"
-              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.Applications[0].Name' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Applications[0].Name')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Storage'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.storageClass.Name'"
-              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.storageClass.Name' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.storageClass.Name')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Size'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.Storage'"
-              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.Storage' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.Storage')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Created'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'PersistentVolumeClaim.CreationDate'"
-              is-sorted-desc="$ctrl.state.orderBy === 'PersistentVolumeClaim.CreationDate' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('PersistentVolumeClaim.CreationDate')"
-            ></table-column-header>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter:$ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-          ng-class="{ active: item.Checked }"
-        >
-          <td>
-            <span class="md-checkbox">
-              <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="$ctrl.disableRemove(item)" />
-              <label for="select_{{ $index }}"></label>
-            </span>
-            <a ui-sref="kubernetes.volumes.volume({ namespace: item.ResourcePool.Namespace.Name, name: item.PersistentVolumeClaim.Name })">{{ item.PersistentVolumeClaim.Name }}</a>
-            <span class="label label-info image-tag label-margins" ng-if="$ctrl.isSystemNamespace(item)">system</span>
-            <span class="label label-primary image-tag label-margins" ng-if="!$ctrl.isSystemNamespace(item) && $ctrl.isExternalVolume(item)">external</span>
-            <span class="label label-warning image-tag label-margins" ng-if="!$ctrl.isSystemNamespace(item) && !$ctrl.isUsed(item)">unused</span>
-          </td>
-          <td>
-            <a ui-sref="kubernetes.resourcePools.resourcePool({ id: item.ResourcePool.Namespace.Name })">{{ item.ResourcePool.Namespace.Name }}</a>
-          </td>
-          <td>
-            <a ng-if="item.Applications.length" ui-sref="kubernetes.applications.application({ name: item.Applications[0].Name, namespace: item.ResourcePool.Namespace.Name })">{{
-              item.Applications[0].Name
-            }}</a>
-            <span ng-if="item.Applications.length > 1"> + {{ item.Applications.length - 1 }}</span>
-            <span ng-if="!item.Applications.length">-</span>
-          </td>
-          <td>
-            {{ item.PersistentVolumeClaim.storageClass.Name }}
-          </td>
-          <td>
-            {{ item.PersistentVolumeClaim.Storage }}
-          </td>
-          <td>
-            {{ item.PersistentVolumeClaim.CreationDate | getisodate }}
-            {{ item.PersistentVolumeClaim.ApplicationOwner ? 'by ' + item.PersistentVolumeClaim.ApplicationOwner : '' }}
-          </td>
-        </tr>
-        <tr ng-if="!$ctrl.dataset">
-          <td colspan="6" class="text-muted text-center">Loading...</td>
-        </tr>
-        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="6" class="text-muted text-center">No volume available.</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="footer pl-5" ng-if="$ctrl.dataset">
-    <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-    <div class="paginationControls">
-      <form class="form-inline">
-        <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>
-</div>

app/kubernetes/components/datatables/volumes-datatable/volumesDatatable.js

@@ -1,14 +0,0 @@
-angular.module('portainer.kubernetes').component('kubernetesVolumesDatatable', {
-  templateUrl: './volumesDatatable.html',
-  controller: 'KubernetesVolumesDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    removeAction: '<',
-    refreshCallback: '<',
-  },
-});

app/kubernetes/components/datatables/volumes-datatable/volumesDatatableController.js

@@ -1,90 +0,0 @@
-import angular from 'angular';
-import KubernetesVolumeHelper from 'Kubernetes/helpers/volumeHelper';
-import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
-
-// TODO: review - refactor to use `extends GenericDatatableController`
-class KubernetesVolumesDatatableController {
-  /* @ngInject */
-  constructor($async, $controller, Authentication, DatatableService) {
-    this.$async = $async;
-    this.$controller = $controller;
-    this.Authentication = Authentication;
-    this.DatatableService = DatatableService;
-
-    this.onInit = this.onInit.bind(this);
-    this.allowSelection = this.allowSelection.bind(this);
-    this.isDisplayed = this.isDisplayed.bind(this);
-  }
-
-  onSettingsShowSystemChange() {
-    this.DatatableService.setDataTableSettings(this.tableKey, this.settings);
-  }
-
-  disableRemove(item) {
-    return this.isSystemNamespace(item) || this.isUsed(item);
-  }
-
-  isUsed(item) {
-    return KubernetesVolumeHelper.isUsed(item);
-  }
-
-  isSystemNamespace(item) {
-    return KubernetesNamespaceHelper.isSystemNamespace(item.ResourcePool.Namespace.Name);
-  }
-
-  isDisplayed(item) {
-    return !this.isSystemNamespace(item) || this.settings.showSystem;
-  }
-
-  isExternalVolume(item) {
-    return KubernetesVolumeHelper.isExternalVolume(item);
-  }
-
-  allowSelection(item) {
-    return !this.disableRemove(item);
-  }
-
-  async onInit() {
-    this.setDefaults();
-    this.prepareTableFromDataset();
-    this.isAdmin = this.Authentication.isAdmin();
-    this.settings.showSystem = false;
-
-    this.state.orderBy = this.orderBy;
-    var storedOrder = this.DatatableService.getDataTableOrder(this.tableKey);
-    if (storedOrder !== null) {
-      this.state.reverseOrder = storedOrder.reverse;
-      this.state.orderBy = storedOrder.orderBy;
-    }
-
-    var textFilter = this.DatatableService.getDataTableTextFilters(this.tableKey);
-    if (textFilter !== null) {
-      this.state.textFilter = textFilter;
-      this.onTextFilterChange();
-    }
-
-    var storedFilters = this.DatatableService.getDataTableFilters(this.tableKey);
-    if (storedFilters !== null) {
-      this.filters = storedFilters;
-    }
-    if (this.filters && this.filters.state) {
-      this.filters.state.open = false;
-    }
-
-    var storedSettings = this.DatatableService.getDataTableSettings(this.tableKey);
-    if (storedSettings !== null) {
-      this.settings = storedSettings;
-      this.settings.open = false;
-    }
-    this.onSettingsRepeaterChange();
-  }
-
-  $onInit() {
-    const ctrl = angular.extend({}, this.$controller('GenericDatatableController'), this);
-    angular.extend(this, ctrl);
-    return this.$async(this.onInit);
-  }
-}
-
-export default KubernetesVolumesDatatableController;
-angular.module('portainer.kubernetes').controller('KubernetesVolumesDatatableController', KubernetesVolumesDatatableController);

app/kubernetes/react/components/index.ts

@@ -62,9 +62,13 @@ import { kubeEnvVarValidationSchema } from '@/react/kubernetes/applications/comp
 import { HelmInsightsBox } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/HelmInsightsBox';
 
 import { applicationsModule } from './applications';
+import { volumesModule } from './volumes';
 
 export const ngModule = angular
-  .module('portainer.kubernetes.react.components', [applicationsModule])
+  .module('portainer.kubernetes.react.components', [
+    applicationsModule,
+    volumesModule,
+  ])
   .component(
     'ingressClassDatatable',
     r2a(IngressClassDatatableAngular, [

app/kubernetes/react/components/volumes.ts

@@ -0,0 +1,17 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { VolumesDatatable } from '@/react/kubernetes/volumes/ListView/VolumesDatatable';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+
+export const volumesModule = angular
+  .module('portainer.kubernetes.react.components.volumes', [])
+  .component(
+    'kubernetesVolumesDatatable',
+    r2a(withUIRouter(withCurrentUser(VolumesDatatable)), [
+      'dataset',
+      'onRemove',
+      'onRefresh',
+    ])
+  ).name;

app/kubernetes/views/volumes/volumes.html

@@ -13,15 +13,8 @@
                 <pr-icon icon="'database'"></pr-icon>
                 Volumes
               </uib-tab-heading>
-              <kubernetes-volumes-datatable
-                dataset="ctrl.volumes"
-                table-key="kubernetes.volumes"
-                order-by="PersistentVolumeClaim.Name"
-                remove-action="ctrl.removeAction"
-                refresh-callback="ctrl.getVolumes"
-                data-cy="k8s-volumes-datatable"
-              >
-              </kubernetes-volumes-datatable>
+
+              <kubernetes-volumes-datatable dataset="ctrl.volumes" on-remove="(ctrl.removeAction)" on-refresh="(ctrl.getVolumes)"> </kubernetes-volumes-datatable>
             </uib-tab>
             <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
               <uib-tab-heading class="vertical-center">

app/kubernetes/views/volumes/volumesController.js

@@ -3,7 +3,6 @@ import filesizeParser from 'filesize-parser';
 import angular from 'angular';
 import KubernetesVolumeHelper from 'Kubernetes/helpers/volumeHelper';
 import KubernetesResourceQuotaHelper from 'Kubernetes/helpers/resourceQuotaHelper';
-import { confirmDelete } from '@@/modals/confirm';
 
 function buildStorages(storages, volumes) {
   _.forEach(storages, (s) => {
@@ -36,37 +35,30 @@ class KubernetesVolumesController {
     this.getVolumes = this.getVolumes.bind(this);
     this.getVolumesAsync = this.getVolumesAsync.bind(this);
     this.removeAction = this.removeAction.bind(this);
-    this.removeActionAsync = this.removeActionAsync.bind(this);
   }
 
   selectTab(index) {
     this.LocalStorage.storeActiveTab('volumes', index);
   }
 
-  async removeActionAsync(selectedItems) {
-    let actionCount = selectedItems.length;
-    for (const volume of selectedItems) {
-      try {
-        await this.KubernetesVolumeService.delete(volume);
-        this.Notifications.success('Volume successfully removed', volume.PersistentVolumeClaim.Name);
-        const index = this.volumes.indexOf(volume);
-        this.volumes.splice(index, 1);
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to remove volume');
-      } finally {
-        --actionCount;
-        if (actionCount === 0) {
-          this.$state.reload(this.$state.current);
+  async removeAction(selectedItems) {
+    return this.$async(async () => {
+      let actionCount = selectedItems.length;
+      for (const volume of selectedItems) {
+        try {
+          await this.KubernetesVolumeService.delete(volume);
+          this.Notifications.success('Volume successfully removed', volume.PersistentVolumeClaim.Name);
+          const index = this.volumes.indexOf(volume);
+          this.volumes.splice(index, 1);
+        } catch (err) {
+          this.Notifications.error('Failure', err, 'Unable to remove volume');
+        } finally {
+          --actionCount;
+          if (actionCount === 0) {
+            this.$state.reload(this.$state.current);
+          }
         }
       }
-    }
-  }
-
-  removeAction(selectedItems) {
-    confirmDelete('Do you want to remove the selected volume(s)?').then((confirmed) => {
-      if (confirmed) {
-        return this.$async(this.removeActionAsync, selectedItems);
-      }
     });
   }