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"
+              <kubernetes-volumes-datatable dataset="ctrl.volumes" on-remove="(ctrl.removeAction)" on-refresh="(ctrl.getVolumes)"> </kubernetes-volumes-datatable>
-                table-key="kubernetes.volumes"
-                order-by="PersistentVolumeClaim.Name"
-                remove-action="ctrl.removeAction"
-                refresh-callback="ctrl.getVolumes"
-                data-cy="k8s-volumes-datatable"
-              >
-              </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) {
+  async removeAction(selectedItems) {
-    let actionCount = selectedItems.length;
+    return this.$async(async () => {
-    for (const volume of selectedItems) {
+      let actionCount = selectedItems.length;
-      try {
+      for (const volume of selectedItems) {
-        await this.KubernetesVolumeService.delete(volume);
+        try {
-        this.Notifications.success('Volume successfully removed', volume.PersistentVolumeClaim.Name);
+          await this.KubernetesVolumeService.delete(volume);
-        const index = this.volumes.indexOf(volume);
+          this.Notifications.success('Volume successfully removed', volume.PersistentVolumeClaim.Name);
-        this.volumes.splice(index, 1);
+          const index = this.volumes.indexOf(volume);
-      } catch (err) {
+          this.volumes.splice(index, 1);
-        this.Notifications.error('Failure', err, 'Unable to remove volume');
+        } catch (err) {
-      } finally {
+          this.Notifications.error('Failure', err, 'Unable to remove volume');
-        --actionCount;
+        } finally {
-        if (actionCount === 0) {
+          --actionCount;
-          this.$state.reload(this.$state.current);
+          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);
-      }
     });
   }
 

app/react/components/Badge/Badge.stories.tsx

@@ -9,7 +9,16 @@ export default {
     type: {
       control: {
         type: 'select',
-        options: ['success', 'danger', 'warn', 'info'],
+        options: [
+          'success',
+          'danger',
+          'warn',
+          'info',
+          'successSecondary',
+          'dangerSecondary',
+          'warnSecondary',
+          'infoSecondary',
+        ],
       },
     },
   },

app/react/components/Badge/Badge.tsx

@@ -14,45 +14,45 @@ export type BadgeType =
 // the classes are typed in full because tailwind doesn't render the interpolated classes
 const typeClasses: Record<BadgeType, string> = {
   success: clsx(
-    `text-success-9 bg-success-2`,
+    'text-success-9 bg-success-2',
-    `th-dark:text-success-3 th-dark:bg-success-10`,
+    'th-dark:text-success-3 th-dark:bg-success-10',
-    `th-highcontrast:text-success-3 th-highcontrast:bg-success-10`
+    'th-highcontrast:text-success-3 th-highcontrast:bg-success-10'
   ),
   warn: clsx(
-    `text-warning-9 bg-warning-2`,
+    'text-warning-9 bg-warning-2',
-    `th-dark:text-warning-3 th-dark:bg-warning-10`,
+    'th-dark:text-warning-3 th-dark:bg-warning-10',
-    `th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10`
+    'th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10'
   ),
   danger: clsx(
-    `text-error-9 bg-error-2`,
+    'text-error-9 bg-error-2',
-    `th-dark:text-error-3 th-dark:bg-error-10`,
+    'th-dark:text-error-3 th-dark:bg-error-10',
-    `th-highcontrast:text-error-3 th-highcontrast:bg-error-10`
+    'th-highcontrast:text-error-3 th-highcontrast:bg-error-10'
   ),
   info: clsx(
-    `text-blue-9 bg-blue-2`,
+    'text-blue-9 bg-blue-2',
-    `th-dark:text-blue-3 th-dark:bg-blue-10`,
+    'th-dark:text-blue-3 th-dark:bg-blue-10',
-    `th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10`
+    'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10'
   ),
   // the secondary classes are a bit darker in light mode and a bit lighter in dark mode
   successSecondary: clsx(
-    `text-success-9 bg-success-3`,
+    'text-success-9 bg-success-3',
-    `th-dark:text-success-3 th-dark:bg-success-9`,
+    'th-dark:text-success-3 th-dark:bg-success-9',
-    `th-highcontrast:text-success-3 th-highcontrast:bg-success-9`
+    'th-highcontrast:text-success-3 th-highcontrast:bg-success-9'
   ),
   warnSecondary: clsx(
-    `text-warning-9 bg-warning-3`,
+    'text-warning-9 bg-warning-3',
-    `th-dark:text-warning-3 th-dark:bg-warning-9`,
+    'th-dark:text-warning-3 th-dark:bg-warning-9',
-    `th-highcontrast:text-warning-3 th-highcontrast:bg-warning-9`
+    'th-highcontrast:text-warning-3 th-highcontrast:bg-warning-9'
   ),
   dangerSecondary: clsx(
-    `text-error-9 bg-error-3`,
+    'text-error-9 bg-error-3',
-    `th-dark:text-error-3 th-dark:bg-error-9`,
+    'th-dark:text-error-3 th-dark:bg-error-9',
-    `th-highcontrast:text-error-3 th-highcontrast:bg-error-9`
+    'th-highcontrast:text-error-3 th-highcontrast:bg-error-9'
   ),
   infoSecondary: clsx(
-    `text-blue-9 bg-blue-3`,
+    'text-blue-9 bg-blue-3',
-    `th-dark:text-blue-3 th-dark:bg-blue-9`,
+    'th-dark:text-blue-3 th-dark:bg-blue-9',
-    `th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9`
+    'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9'
   ),
 };
 

app/react/components/Badge/ExternalBadge.tsx

@@ -0,0 +1,5 @@
+import { Badge } from '@@/Badge';
+
+export function ExternalBadge() {
+  return <Badge type="info">external</Badge>;
+}

app/react/components/Badge/SystemBadge.tsx

@@ -0,0 +1,5 @@
+import { Badge } from '@@/Badge';
+
+export function SystemBadge() {
+  return <Badge type="success">system</Badge>;
+}

app/react/components/Badge/UnusedBadge.tsx

@@ -0,0 +1,5 @@
+import { Badge } from '@@/Badge';
+
+export function UnusedBadge() {
+  return <Badge type="warn">unused</Badge>;
+}

app/react/components/PaginationControls/ItemsPerPageSelector.tsx

@@ -1,3 +1,6 @@
+import _ from 'lodash';
+import { useState } from 'react';
+
 interface Props {
   value: number;
   onChange(value: number): void;
@@ -5,10 +8,17 @@ interface Props {
 }
 
 export function ItemsPerPageSelector({ value, onChange, showAll }: Props) {
+  const [id] = useState(() => `${_.uniqueId()}-items-per-page`);
   return (
     <span className="limitSelector">
-      <span className="space-right">Items per page</span>
+      <label
+        className="space-right text-xs text-[--text-main-color] font-normal"
+        htmlFor={id}
+      >
+        Items per page
+      </label>
       <select
+        id={id}
         className="form-control"
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}

app/react/components/datatables/TableActions.tsx

@@ -13,5 +13,7 @@ export function TableActions({
     return null;
   }
 
-  return <div className={clsx('actionBar', className)}>{children}</div>;
+  return (
+    <div className={clsx('flex gap-2 items-center', className)}>{children}</div>
+  );
 }

app/react/components/datatables/TableSettingsMenu.tsx

@@ -19,13 +19,14 @@ export function TableSettingsMenu({
             className={clsx('table-setting-menu-btn', {
               'setting-active': isExpanded,
             })}
+            aria-label="Settings"
+            title="Settings"
           >
             <MoreVertical
               size="13"
               className="space-right"
               strokeWidth="3px"
               aria-hidden="true"
-              aria-label="Settings"
             />
           </MenuButton>
           <MenuList>

app/react/components/datatables/expand-column.tsx

@@ -18,6 +18,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
             color="none"
             icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
             title="Expand all"
+            aria-label="Expand all rows"
           />
         )
       );
@@ -34,12 +35,13 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
           color="none"
           icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
           title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
+          aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
+          aria-expanded={row.getIsExpanded()}
         />
       ),
     enableColumnFilter: false,
     enableGlobalFilter: false,
     enableHiding: false,
-
     meta: {
       width: 40,
     },

app/react/components/datatables/select-column.tsx

@@ -17,6 +17,8 @@ export function createSelectColumn<T>(): ColumnDef<T> {
         onClick={(e) => {
           e.stopPropagation();
         }}
+        aria-label="Select all rows"
+        title="Select all rows"
       />
     ),
     cell: ({ row, table }) => (
@@ -38,6 +40,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
 
           lastSelectedId = row.id;
         }}
+        aria-label="Select row"
       />
     ),
     enableHiding: false,

app/react/components/datatables/useTableState.ts

@@ -25,8 +25,8 @@ export function useTableState<
   );
 }
 
-export function useTableStateWithStorage(
+export function useTableStateWithStorage<T extends BasicTableSettings>(
-  ...args: Parameters<typeof createPersistedStore>
+  ...args: Parameters<typeof createPersistedStore<T>>
 ) {
   const [store] = useState(() => createPersistedStore(...args));
   return useTableState(store, args[0]);

app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx

@@ -0,0 +1,94 @@
+import { Database } from 'lucide-react';
+
+import { useAuthorizations } from '@/react/hooks/useUser';
+import KubernetesVolumeHelper from '@/kubernetes/helpers/volumeHelper';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { refreshableSettings } from '@@/datatables/types';
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
+import { useRepeater } from '@@/datatables/useRepeater';
+
+import { systemResourcesSettings } from '../../datatables/SystemResourcesSettings';
+import { CreateFromManifestButton } from '../../components/CreateFromManifestButton';
+import {
+  DefaultDatatableSettings,
+  TableSettings,
+} from '../../datatables/DefaultDatatableSettings';
+import { SystemResourceDescription } from '../../datatables/SystemResourceDescription';
+import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
+
+import { VolumeViewModel } from './types';
+import { columns } from './columns';
+
+export function VolumesDatatable({
+  dataset,
+  onRemove,
+  onRefresh,
+}: {
+  dataset: Array<VolumeViewModel>;
+  onRemove(items: Array<VolumeViewModel>): void;
+  onRefresh(): void;
+}) {
+  const tableState = useTableStateWithStorage<TableSettings>(
+    'kube-volumes',
+    'Name',
+    (set) => ({
+      ...systemResourcesSettings(set),
+      ...refreshableSettings(set),
+    })
+  );
+
+  const hasWriteAuth = useAuthorizations('K8sVolumesW', undefined, true);
+
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  const envId = useEnvironmentId();
+  const namespaceListQuery = useNamespacesQuery(envId);
+
+  const filteredDataset = tableState.showSystemResources
+    ? dataset
+    : dataset.filter((item) => !isSystem(item));
+
+  return (
+    <Datatable
+      noWidget
+      data-cy="k8s-volumes-datatable"
+      dataset={filteredDataset}
+      columns={columns}
+      settingsManager={tableState}
+      title="Volumes"
+      titleIcon={Database}
+      isRowSelectable={({ original: item }) =>
+        hasWriteAuth &&
+        !(isSystem(item) && !KubernetesVolumeHelper.isUsed(item))
+      }
+      renderTableActions={(selectedItems) => (
+        <>
+          <DeleteButton
+            confirmMessage="Do you want to remove the selected volume(s)?"
+            onConfirmed={() => onRemove(selectedItems)}
+            disabled={selectedItems.length === 0}
+          />
+          <CreateFromManifestButton />
+        </>
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings settings={tableState} />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources}
+        />
+      }
+    />
+  );
+
+  function isSystem(item: VolumeViewModel) {
+    return !!namespaceListQuery.data?.[item.ResourcePool.Namespace.Name]
+      .IsSystem;
+  }
+}

app/react/kubernetes/volumes/ListView/columns.helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { VolumeViewModel } from './types';
+
+export const helper = createColumnHelper<VolumeViewModel>();

app/react/kubernetes/volumes/ListView/columns.name.tsx

@@ -0,0 +1,49 @@
+import { CellContext } from '@tanstack/react-table';
+
+import KubernetesVolumeHelper from '@/kubernetes/helpers/volumeHelper';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { Link } from '@@/Link';
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
+
+import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
+
+import { VolumeViewModel } from './types';
+import { helper } from './columns.helper';
+
+export const name = helper.accessor('PersistentVolumeClaim.Name', {
+  header: 'Name',
+  cell: NameCell,
+});
+
+export function NameCell({
+  row: { original: item },
+}: CellContext<VolumeViewModel, string>) {
+  const envId = useEnvironmentId();
+  const namespaceListQuery = useNamespacesQuery(envId);
+  const isSystem =
+    namespaceListQuery.data?.[item.ResourcePool.Namespace.Name].IsSystem;
+  return (
+    <>
+      <Link
+        to="kubernetes.volumes.volume"
+        params={{
+          namespace: item.ResourcePool.Namespace.Name,
+          name: item.PersistentVolumeClaim.Name,
+        }}
+      >
+        {item.PersistentVolumeClaim.Name}
+      </Link>
+      {isSystem ? (
+        <SystemBadge />
+      ) : (
+        <>
+          {KubernetesVolumeHelper.isExternalVolume(item) && <ExternalBadge />}
+          {!KubernetesVolumeHelper.isUsed(item) && <UnusedBadge />}
+        </>
+      )}
+    </>
+  );
+}

app/react/kubernetes/volumes/ListView/columns.tsx

@@ -0,0 +1,67 @@
+import { isoDate } from '@/portainer/filters/filters';
+
+import { Link } from '@@/Link';
+
+import { name } from './columns.name';
+import { helper } from './columns.helper';
+
+export const columns = [
+  name,
+  helper.accessor('ResourcePool.Namespace.Name', {
+    header: 'Namespace',
+    cell: ({ getValue }) => {
+      const namespace = getValue();
+
+      return (
+        <Link
+          to="kubernetes.resourcePools.resourcePool"
+          params={{ id: namespace }}
+        >
+          {namespace}
+        </Link>
+      );
+    },
+  }),
+  helper.accessor((item) => item.Applications[0]?.Name, {
+    header: 'Used by',
+    cell: ({ row: { original: item } }) => {
+      if (!item.Applications.length) {
+        return '-';
+      }
+
+      return (
+        <>
+          <Link
+            to="kubernetes.applications.application"
+            params={{
+              name: item.Applications[0].Name,
+              namespace: item.ResourcePool.Namespace.Name,
+            }}
+          >
+            {item.Applications[0].Name}
+          </Link>
+          {item.Applications.length > 1 && (
+            <> + {item.Applications.length - 1}</>
+          )}
+        </>
+      );
+    },
+  }),
+  helper.accessor('PersistentVolumeClaim.storageClass.Name', {
+    header: 'Storage',
+  }),
+  helper.accessor('PersistentVolumeClaim.Storage', {
+    header: 'Size',
+  }),
+  helper.accessor('PersistentVolumeClaim.CreationDate', {
+    header: 'Created',
+    cell: ({ row: { original: item } }) => (
+      <>
+        {isoDate(item.PersistentVolumeClaim.CreationDate)}
+        {item.PersistentVolumeClaim.ApplicationOwner
+          ? ` by ${item.PersistentVolumeClaim.ApplicationOwner}`
+          : ''}
+      </>
+    ),
+  }),
+];

app/react/kubernetes/volumes/ListView/types.ts

@@ -0,0 +1,19 @@
+export interface VolumeViewModel {
+  Applications: Array<{
+    Name: string;
+  }>;
+  PersistentVolumeClaim: {
+    Name: string;
+    storageClass: {
+      Name: string;
+    };
+    Storage?: unknown;
+    CreationDate: number;
+    ApplicationOwner?: string;
+  };
+  ResourcePool: {
+    Namespace: {
+      Name: string;
+    };
+  };
+}