refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

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

@@ -1,6 +1,9 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { HardDrive } from 'lucide-react';
 
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { humanize } from '@/portainer/filters/filters';
+
 import { TableSettingsMenu } from '@@/datatables';
 import {
   BasicTableSettings,
@@ -9,11 +12,12 @@ import {
 } 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 { useAllStoragesQuery } from '../queries/useVolumesQuery';
+
 import { StorageClassViewModel } from './types';
 
 interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
@@ -27,16 +31,11 @@ const columns = [
   }),
   helper.accessor('size', {
     header: 'Usage',
+    cell: ({ row: { original: item } }) => <>{humanize(item.size)}</>,
   }),
 ];
 
-export function StorageDatatable({
-  dataset,
-  onRefresh,
-}: {
-  dataset: Array<StorageClassViewModel>;
-  onRefresh: () => void;
-}) {
+export function StorageDatatable() {
   const tableState = useTableStateWithStorage<TableSettings>(
     'kubernetes.volumes.storages',
     'Name',
@@ -45,17 +44,21 @@ export function StorageDatatable({
     })
   );
 
-  useRepeater(tableState.autoRefreshRate, onRefresh);
+  const envId = useEnvironmentId();
+  const storagesQuery = useAllStoragesQuery(envId, {
+    refetchInterval: tableState.autoRefreshRate * 1000,
+  });
+  const storages = storagesQuery.data ?? [];
 
   return (
     <ExpandableDatatable
-      noWidget
       disableSelect
-      dataset={dataset}
+      dataset={storages}
       columns={columns}
       title="Storage"
       titleIcon={HardDrive}
       settingsManager={tableState}
+      isLoading={storagesQuery.isLoading}
       renderTableSettings={() => (
         <TableSettingsMenu>
           <TableSettingsMenuAutoRefresh
@@ -89,7 +92,7 @@ function SubRow({ item }: { item: StorageClassViewModel }) {
               {vol.PersistentVolumeClaim.Name}
             </Link>
           </td>
-          <td>{vol.PersistentVolumeClaim.Storage}</td>
+          <td>{humanize(vol.PersistentVolumeClaim.Storage)}</td>
         </tr>
       ))}
     </>

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

@@ -1,6 +1,6 @@
 import { Database } from 'lucide-react';
 
-import { useAuthorizations } from '@/react/hooks/useUser';
+import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
 import KubernetesVolumeHelper from '@/kubernetes/helpers/volumeHelper';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
@@ -8,7 +8,6 @@ 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';
@@ -18,19 +17,13 @@ import {
 } from '../../datatables/DefaultDatatableSettings';
 import { SystemResourceDescription } from '../../datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
+import { useAllVolumesQuery } from '../queries/useVolumesQuery';
+import { isSystemNamespace } from '../../namespaces/queries/useIsSystemNamespace';
+import { useDeleteVolumes } from '../queries/useDeleteVolumes';
 
-import { VolumeViewModel } from './types';
 import { columns } from './columns';
 
-export function VolumesDatatable({
-  dataset,
-  onRemove,
-  onRefresh,
-}: {
-  dataset: Array<VolumeViewModel>;
-  onRemove(items: Array<VolumeViewModel>): void;
-  onRefresh(): void;
-}) {
+export function VolumesDatatable() {
   const tableState = useTableStateWithStorage<TableSettings>(
     'kube-volumes',
     'Name',
@@ -40,40 +33,54 @@ export function VolumesDatatable({
     })
   );
 
-  const hasWriteAuth = useAuthorizations('K8sVolumesW', undefined, true);
-
-  useRepeater(tableState.autoRefreshRate, onRefresh);
+  const { authorized: hasWriteAuth } = useAuthorizations(
+    'K8sVolumesW',
+    undefined,
+    true
+  );
 
   const envId = useEnvironmentId();
+  const deleteVolumesMutation = useDeleteVolumes(envId);
   const namespaceListQuery = useNamespacesQuery(envId);
+  const namespaces = namespaceListQuery.data ?? [];
+  const volumesQuery = useAllVolumesQuery(envId, {
+    refetchInterval: tableState.autoRefreshRate * 1000,
+  });
+  const volumes = volumesQuery.data ?? [];
 
-  const filteredDataset = tableState.showSystemResources
-    ? dataset
-    : dataset.filter((item) => !isSystem(item));
+  const filteredVolumes = tableState.showSystemResources
+    ? volumes
+    : volumes.filter(
+        (volume) =>
+          !isSystemNamespace(volume.ResourcePool.Namespace.Name, namespaces)
+      );
 
   return (
     <Datatable
-      noWidget
       data-cy="k8s-volumes-datatable"
-      dataset={filteredDataset}
+      isLoading={volumesQuery.isLoading || namespaceListQuery.isLoading}
+      dataset={filteredVolumes}
       columns={columns}
       settingsManager={tableState}
       title="Volumes"
       titleIcon={Database}
-      isRowSelectable={({ original: item }) =>
-        hasWriteAuth &&
-        !(isSystem(item) && !KubernetesVolumeHelper.isUsed(item))
+      getRowId={(row) => row.PersistentVolumeClaim.Name}
+      disableSelect={!hasWriteAuth}
+      isRowSelectable={({ original: volume }) =>
+        !isSystemNamespace(volume.ResourcePool.Namespace.Name, namespaces) &&
+        !KubernetesVolumeHelper.isUsed(volume)
       }
       renderTableActions={(selectedItems) => (
-        <>
+        <Authorized authorizations="K8sVolumesW">
           <DeleteButton
             confirmMessage="Do you want to remove the selected volume(s)?"
-            onConfirmed={() => onRemove(selectedItems)}
+            onConfirmed={() => deleteVolumesMutation.mutate(selectedItems)}
             disabled={selectedItems.length === 0}
+            isLoading={deleteVolumesMutation.isLoading}
             data-cy="k8s-volumes-delete-button"
           />
           <CreateFromManifestButton data-cy="k8s-volumes-deploy-button" />
-        </>
+        </Authorized>
       )}
       renderTableSettings={() => (
         <TableSettingsMenu>
@@ -87,9 +94,4 @@ export function VolumesDatatable({
       }
     />
   );
-
-  function isSystem(item: VolumeViewModel) {
-    return !!namespaceListQuery.data?.[item.ResourcePool.Namespace.Name]
-      .IsSystem;
-  }
 }

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

@@ -0,0 +1,40 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { Database, HardDrive } from 'lucide-react';
+
+import { PageHeader } from '@@/PageHeader';
+import { WidgetTabs, Tab, findSelectedTabIndex } from '@@/Widget/WidgetTabs';
+
+import { VolumesDatatable } from './VolumesDatatable';
+import { StorageDatatable } from './StorageDatatable';
+
+export function VolumesView() {
+  const tabs: Tab[] = [
+    {
+      name: 'Volumes',
+      icon: Database,
+      widget: <VolumesDatatable />,
+      selectedTabParam: 'volumes',
+    },
+    {
+      name: 'Storage',
+      icon: HardDrive,
+      widget: <StorageDatatable />,
+      selectedTabParam: 'storage',
+    },
+  ];
+
+  const currentTabIndex = findSelectedTabIndex(
+    useCurrentStateAndParams(),
+    tabs
+  );
+
+  return (
+    <>
+      <PageHeader title="Volume list" breadcrumbs="Volumes" reload />
+      <>
+        <WidgetTabs tabs={tabs} currentTabIndex={currentTabIndex} />
+        <div className="content">{tabs[currentTabIndex].widget}</div>
+      </>
+    </>
+  );
+}

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

@@ -15,6 +15,7 @@ import { helper } from './columns.helper';
 
 export const name = helper.accessor('PersistentVolumeClaim.Name', {
   header: 'Name',
+  id: 'Name',
   cell: NameCell,
 });
 
@@ -23,10 +24,12 @@ export function NameCell({
 }: CellContext<VolumeViewModel, string>) {
   const envId = useEnvironmentId();
   const namespaceListQuery = useNamespacesQuery(envId);
-  const isSystem =
-    namespaceListQuery.data?.[item.ResourcePool.Namespace.Name].IsSystem;
+  const isSystem = namespaceListQuery.data?.some(
+    (namespace) =>
+      namespace.Name === item.ResourcePool.Namespace.Name && namespace.IsSystem
+  );
   return (
-    <>
+    <div className="flex gap-x-1">
       <Link
         to="kubernetes.volumes.volume"
         params={{
@@ -45,6 +48,6 @@ export function NameCell({
           {!KubernetesVolumeHelper.isUsed(item) && <UnusedBadge />}
         </>
       )}
-    </>
+    </div>
   );
 }

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

@@ -1,17 +1,17 @@
 import { StorageClass } from '@/kubernetes/models/storage-class/StorageClass';
 import { Volume } from '@/kubernetes/models/volume/Volume';
 
+import { K8sVolOwningApplication } from '../types';
+
 export interface VolumeViewModel {
-  Applications: Array<{
-    Name: string;
-  }>;
+  Applications: K8sVolOwningApplication[];
   PersistentVolumeClaim: {
     Name: string;
     storageClass: {
       Name: string;
     };
     Storage?: unknown;
-    CreationDate: number;
+    CreationDate?: string;
     ApplicationOwner?: string;
   };
   ResourcePool: {
@@ -22,6 +22,6 @@ export interface VolumeViewModel {
 }
 
 export type StorageClassViewModel = StorageClass & {
-  size: 0;
+  size: number;
   Volumes: Array<Volume>;
 };