refactor(kube/volumes): migrate storage table to react [EE-4697] (#11030)

app/kubernetes/models/storage-class/StorageClass.ts

@@ -0,0 +1,7 @@
+export class StorageClass {
+  Name: string = '';
+
+  Provisioner: string = '';
+
+  AllowVolumeExpansion: boolean = false;
+}

app/kubernetes/models/storage-class/models.js

@@ -1,3 +1,5 @@
+export { StorageClass as KubernetesStorageClass } from './StorageClass';
+
 /**
  * KubernetesStorageClassAccessPolicies Model
  */
@@ -17,19 +19,3 @@ const _KubernetesStorageClassAccessPolicies = Object.freeze([
 export function KubernetesStorageClassAccessPolicies() {
   return JSON.parse(JSON.stringify(_KubernetesStorageClassAccessPolicies));
 }
-
-/**
- * KubernetesStorageClass Model
- */
-const _KubernetesStorageClass = Object.freeze({
-  Name: '',
-  AccessModes: [],
-  Provisioner: '',
-  AllowVolumeExpansion: false,
-});
-
-export class KubernetesStorageClass {
-  constructor() {
-    Object.assign(this, JSON.parse(JSON.stringify(_KubernetesStorageClass)));
-  }
-}

app/kubernetes/models/volume/PersistentVolumeClaim.ts

@@ -0,0 +1,33 @@
+import uuidv4 from 'uuid/v4';
+
+import { StorageClass } from '../storage-class/StorageClass';
+
+export class PersistentVolumeClaim {
+  Id: string = uuidv4();
+
+  Name: string = '';
+
+  PreviousName: string = '';
+
+  Namespace: string = '';
+
+  Storage: number = 0;
+
+  storageClass?: StorageClass; // KubernetesStorageClass
+
+  CreationDate: string = '';
+
+  ApplicationOwner: string = '';
+
+  AccessModes: Array<unknown> = [];
+
+  ApplicationName: string = '';
+
+  /**
+   * used for Application creation from `ApplicationFormValues`
+   *  not used from API conversion
+   */
+  MountPath: string = '';
+
+  Yaml: string = '';
+}

app/kubernetes/models/volume/Volume.ts

@@ -0,0 +1,14 @@
+import { KubernetesApplication } from '../application/models';
+import { KubernetesResourcePool } from '../resource-pool/models';
+
+import { PersistentVolumeClaim } from './PersistentVolumeClaim';
+
+type VolumeResourcePool = ReturnType<typeof KubernetesResourcePool>;
+
+export class Volume {
+  ResourcePool: VolumeResourcePool = {} as VolumeResourcePool;
+
+  PersistentVolumeClaim: PersistentVolumeClaim = {} as PersistentVolumeClaim;
+
+  Applications: KubernetesApplication[] = [];
+}

app/kubernetes/models/volume/models.js

@@ -1,40 +1,2 @@
-import uuidv4 from 'uuid/v4';
+export { Volume as KubernetesVolume } from './Volume';
-/**
+export { PersistentVolumeClaim as KubernetesPersistentVolumeClaim } from './PersistentVolumeClaim';
- * KubernetesPersistentVolumeClaim Model
- */
-const _KubernetesPersistentVolumeClaim = Object.freeze({
-  Id: '',
-  Name: '',
-  PreviousName: '',
-  Namespace: '',
-  Storage: 0,
-  storageClass: {}, // KubernetesStorageClass
-  CreationDate: '',
-  ApplicationOwner: '',
-  AccessModes: [],
-  ApplicationName: '',
-  MountPath: '', // used for Application creation from ApplicationFormValues | not used from API conversion
-  Yaml: '',
-});
-
-export class KubernetesPersistentVolumeClaim {
-  constructor() {
-    Object.assign(this, JSON.parse(JSON.stringify(_KubernetesPersistentVolumeClaim)));
-    this.Name = uuidv4();
-  }
-}
-
-/**
- * KubernetesVolume Model (Composite)
- */
-const _KubernetesVolume = Object.freeze({
-  ResourcePool: {}, // KubernetesResourcePool
-  PersistentVolumeClaim: {}, // KubernetesPersistentVolumeClaim
-  Applications: [], // KubernetesApplication
-});
-
-export class KubernetesVolume {
-  constructor() {
-    Object.assign(this, JSON.parse(JSON.stringify(_KubernetesVolume)));
-  }
-}

app/kubernetes/react/components/volumes.ts

@@ -1,9 +1,10 @@
 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';
+import { VolumesDatatable } from '@/react/kubernetes/volumes/ListView/VolumesDatatable';
+import { StorageDatatable } from '@/react/kubernetes/volumes/ListView/StorageDatatable';
 
 export const volumesModule = angular
   .module('portainer.kubernetes.react.components.volumes', [])
@@ -14,4 +15,11 @@ export const volumesModule = angular
       'onRemove',
       'onRefresh',
     ])
+  )
+  .component(
+    'kubernetesVolumesStoragesDatatable',
+    r2a(withUIRouter(withCurrentUser(StorageDatatable)), [
+      'dataset',
+      'onRefresh',
+    ])
   ).name;

app/kubernetes/views/volumes/components/volumes-storages-datatable/controller.js

@@ -1,79 +0,0 @@
-import _ from 'lodash-es';
-
-angular.module('portainer.kubernetes').controller('KubernetesVolumesStoragesDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-    this.state = Object.assign(this.state, {
-      expandedItems: [],
-      expandAll: false,
-    });
-
-    this.onSettingsRepeaterChange = function () {
-      DatatableService.setDataTableSettings(this.tableKey, this.settings);
-    };
-
-    this.expandItem = function (item, expanded) {
-      if (!this.itemCanExpand(item)) {
-        return;
-      }
-
-      item.Expanded = expanded;
-      if (!expanded) {
-        item.Highlighted = false;
-      }
-    };
-
-    this.itemCanExpand = function (item) {
-      return item.Volumes.length > 0;
-    };
-
-    this.hasExpandableItems = function () {
-      return _.filter(this.state.filteredDataSet, (item) => this.itemCanExpand(item)).length;
-    };
-
-    this.expandAll = function () {
-      this.state.expandAll = !this.state.expandAll;
-      _.forEach(this.state.filteredDataSet, (item) => {
-        if (this.itemCanExpand(item)) {
-          this.expandItem(item, this.state.expandAll);
-        }
-      });
-    };
-
-    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/kubernetes/views/volumes/components/volumes-storages-datatable/index.js

@@ -1,13 +0,0 @@
-angular.module('portainer.kubernetes').component('kubernetesVolumesStoragesDatatable', {
-  templateUrl: './template.html',
-  controller: 'KubernetesVolumesStoragesDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    refreshCallback: '<',
-  },
-});

app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html

@@ -1,150 +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="'hard-drive'"></pr-icon>
-        </div>
-        Storage
-      </div>
-      <div class="searchBar vertical-center !mr-0">
-        <pr-icon icon="'search'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search for storage..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="settings">
-        <div 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'" 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">
-                    <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>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="table-responsive">
-    <table class="table-hover nowrap-cells table">
-      <thead>
-        <tr>
-          <th class="datatable-wide dropdown" ng-if="$ctrl.hasExpandableItems()">
-            <div class="vertical-center cursor-pointer" 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>
-            </div>
-          </th>
-          <th style="width: 60%">
-            <table-column-header
-              col-title="'Storage'"
-              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 style="width: 38%">
-            <table-column-header
-              col-title="'Usage'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'size'"
-              is-sorted-desc="$ctrl.state.orderBy === 'size' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('size')"
-            ></table-column-header>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          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: $ctrl.tableKey))"
-          ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }"
-          ng-click="$ctrl.expandItem(item, !item.Expanded)"
-          pagination-id="$ctrl.tableKey"
-        >
-          <td ng-if="$ctrl.hasExpandableItems()">
-            <div ng-if="$ctrl.itemCanExpand(item)" class="vertical-center">
-              <pr-icon ng-if="item.Expanded" icon="'chevron-down'"></pr-icon>
-              <pr-icon ng-if="!item.Expanded" icon="'chevron-right'"></pr-icon>
-            </div>
-          </td>
-          <td>{{ item.Name }}</td>
-          <td>{{ item.size }}</td>
-        </tr>
-        <tr
-          dir-paginate-end
-          ng-show="item.Expanded"
-          ng-repeat="vol in item.Volumes"
-          ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
-        >
-          <td></td>
-          <td>
-            <a ui-sref="kubernetes.volumes.volume({ name: vol.PersistentVolumeClaim.Name, namespace: vol.PersistentVolumeClaim.Namespace })">
-              {{ vol.PersistentVolumeClaim.Name }}
-            </a>
-          </td>
-          <td>
-            {{ vol.PersistentVolumeClaim.Storage }}
-          </td>
-        </tr>
-        <tr ng-if="!$ctrl.dataset">
-          <td colspan="5" class="text-muted text-center">Loading...</td>
-        </tr>
-        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="5" class="text-muted text-center">No storage 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" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
-      </form>
-    </div>
-  </div>
-</div>

app/kubernetes/views/volumes/volumes.html

@@ -21,8 +21,8 @@
                 <pr-icon icon="'hard-drive'"></pr-icon>
                 Storage
               </uib-tab-heading>
-              <kubernetes-volumes-storages-datatable dataset="ctrl.storages" table-key="kubernetes.volumes.storages" order-by="Name" refresh-callback="ctrl.getVolumes">
+
-              </kubernetes-volumes-storages-datatable>
+              <kubernetes-volumes-storages-datatable dataset="ctrl.storages" on-refresh="(ctrl.getVolumes)"> </kubernetes-volumes-storages-datatable>
             </uib-tab>
           </uib-tabset>
         </rd-widget-body>

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

@@ -0,0 +1,95 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { HardDrive } from 'lucide-react';
+
+import { TableSettingsMenu } from '@@/datatables';
+import {
+  BasicTableSettings,
+  RefreshableTableSettings,
+  refreshableSettings,
+} from '@@/datatables/types';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
+import { buildExpandColumn } from '@@/datatables/expand-column';
+import { Link } from '@@/Link';
+
+import { StorageClassViewModel } from './types';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+const helper = createColumnHelper<StorageClassViewModel>();
+
+const columns = [
+  buildExpandColumn<StorageClassViewModel>(),
+  helper.accessor('Name', {
+    header: 'Storage',
+  }),
+  helper.accessor('size', {
+    header: 'Usage',
+  }),
+];
+
+export function StorageDatatable({
+  dataset,
+  onRefresh,
+}: {
+  dataset: Array<StorageClassViewModel>;
+  onRefresh: () => void;
+}) {
+  const tableState = useTableStateWithStorage<TableSettings>(
+    'kubernetes.volumes.storages',
+    'Name',
+    (set) => ({
+      ...refreshableSettings(set),
+    })
+  );
+
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  return (
+    <ExpandableDatatable
+      noWidget
+      disableSelect
+      dataset={dataset}
+      columns={columns}
+      title="Storage"
+      titleIcon={HardDrive}
+      settingsManager={tableState}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={(value) => tableState.setAutoRefreshRate(value)}
+          />
+        </TableSettingsMenu>
+      )}
+      getRowCanExpand={(row) => row.original.Volumes.length > 0}
+      renderSubRow={(row) => <SubRow item={row.original} />}
+    />
+  );
+}
+
+function SubRow({ item }: { item: StorageClassViewModel }) {
+  return (
+    <>
+      {item.Volumes.map((vol) => (
+        <tr key={vol.PersistentVolumeClaim.Id}>
+          <td />
+          <td>
+            <Link
+              to="kubernetes.volumes.volume"
+              params={{
+                name: vol.PersistentVolumeClaim.Name,
+                namespace: vol.PersistentVolumeClaim.Namespace,
+              }}
+            >
+              {vol.PersistentVolumeClaim.Name}
+            </Link>
+          </td>
+          <td>{vol.PersistentVolumeClaim.Storage}</td>
+        </tr>
+      ))}
+    </>
+  );
+}

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

@@ -1,3 +1,6 @@
+import { StorageClass } from '@/kubernetes/models/storage-class/StorageClass';
+import { Volume } from '@/kubernetes/models/volume/Volume';
+
 export interface VolumeViewModel {
   Applications: Array<{
     Name: string;
@@ -17,3 +20,8 @@ export interface VolumeViewModel {
     };
   };
 }
+
+export type StorageClassViewModel = StorageClass & {
+  size: 0;
+  Volumes: Array<Volume>;
+};