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/configs/ListView/SecretsDatatable/SecretsDatatable.tsx

@@ -1,118 +1,81 @@
 import { useMemo } from 'react';
 import { Lock } from 'lucide-react';
-import { Pod, Secret } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
-import {
-  DefaultDatatableSettings,
-  TableSettings as KubeTableSettings,
-} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
-import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { useIsDeploymentOptionHidden } from '@/react/hooks/useIsDeploymentOptionHidden';
 import { pluralize } from '@/portainer/helpers/strings';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
-import { Namespaces } from '@/react/kubernetes/namespaces/types';
+import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { usePods } from '@/react/kubernetes/applications/usePods';
-import { useJobs } from '@/react/kubernetes/applications/useJobs';
-import { useCronJobs } from '@/react/kubernetes/applications/useCronJobs';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { AddButton } from '@@/buttons';
+import { useTableState } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
-import {
-  type FilteredColumnsTableSettings,
-  filteredColumnsSettings,
-} from '@@/datatables/types';
-import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
-import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
-import {
-  useSecretsForCluster,
-  useMutationDeleteSecrets,
-} from '../../secret.service';
-import { IndexOptional } from '../../types';
+import { useSecretsForCluster } from '../../queries/useSecretsForCluster';
+import { useDeleteSecrets } from '../../queries/useDeleteSecrets';
+import { IndexOptional, Configuration } from '../../types';
 
-import { getIsSecretInUse } from './utils';
 import { SecretRowData } from './types';
 import { columns } from './columns';
 
 const storageKey = 'k8sSecretsDatatable';
-
-interface TableSettings
-  extends KubeTableSettings,
-    FilteredColumnsTableSettings {}
+const settingsStore = createStore(storageKey);
 
 export function SecretsDatatable() {
-  const tableState = useKubeStore<TableSettings>(
-    storageKey,
-    undefined,
-    (set) => ({
-      ...filteredColumnsSettings(set),
-    })
-  );
-  const environmentId = useEnvironmentId();
+  const tableState = useTableState(settingsStore, storageKey);
   const { authorized: canWrite } = useAuthorizations(['K8sSecretsW']);
   const readOnly = !canWrite;
   const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
+  const isAddSecretHidden = useIsDeploymentOptionHidden('form');
 
-  const { data: namespaces, ...namespacesQuery } = useNamespacesQuery(
-    environmentId,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
-  const namespaceNames = Object.keys(namespaces || {});
-  const { data: secrets, ...secretsQuery } = useSecretsForCluster(
-    environmentId,
-    namespaceNames,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
-  const podsQuery = usePods(environmentId, namespaceNames);
-  const jobsQuery = useJobs(environmentId, namespaceNames);
-  const cronJobsQuery = useCronJobs(environmentId, namespaceNames);
-  const isInUseLoading =
-    podsQuery.isLoading || jobsQuery.isLoading || cronJobsQuery.isLoading;
-
-  const filteredSecrets = useMemo(
-    () =>
-      secrets?.filter(
+  const environmentId = useEnvironmentId();
+  const namespacesQuery = useNamespacesQuery(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const secretsQuery = useSecretsForCluster(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+    select: (secrets) =>
+      secrets.filter(
         (secret) =>
           (canAccessSystemResources && tableState.showSystemResources) ||
-          !namespaces?.[secret.metadata?.namespace ?? '']?.IsSystem
-      ) || [],
-    [secrets, tableState, canAccessSystemResources, namespaces]
-  );
+          !isSystemNamespace(secret.Namespace, namespacesQuery.data)
+      ),
+    isUsed: true,
+  });
+
   const secretRowData = useSecretRowData(
-    filteredSecrets,
-    podsQuery.data ?? [],
-    jobsQuery.data ?? [],
-    cronJobsQuery.data ?? [],
-    isInUseLoading,
-    namespaces
+    secretsQuery.data ?? [],
+    namespacesQuery.data
   );
 
   return (
     <Datatable<IndexOptional<SecretRowData>>
-      dataset={secretRowData}
+      dataset={secretRowData || []}
       columns={columns}
       settingsManager={tableState}
       isLoading={secretsQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No secrets found"
       title="Secrets"
       titleIcon={Lock}
-      getRowId={(row) => row.metadata?.uid ?? ''}
-      isRowSelectable={(row) =>
-        !namespaces?.[row.original.metadata?.namespace ?? '']?.IsSystem
+      getRowId={(row) => row.UID ?? ''}
+      isRowSelectable={({ original: secret }) =>
+        !isSystemNamespace(secret.Namespace, namespacesQuery.data)
       }
       disableSelect={readOnly}
       renderTableActions={(selectedRows) => (
-        <TableActions selectedItems={selectedRows} />
+        <TableActions
+          selectedItems={selectedRows}
+          isAddSecretHidden={isAddSecretHidden}
+        />
       )}
       renderTableSettings={() => (
         <TableSettingsMenu>
@@ -125,9 +88,6 @@ export function SecretsDatatable() {
         />
       }
       data-cy="k8s-secrets-datatable"
-      extendTableOptions={mergeOptions(
-        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
-      )}
     />
   );
 }
@@ -135,36 +95,41 @@ export function SecretsDatatable() {
 // useSecretRowData appends the `inUse` property to the secret data (for the unused badge in the name column)
 // and wraps with useMemo to prevent unnecessary calculations
 function useSecretRowData(
-  secrets: Secret[],
-  pods: Pod[],
-  jobs: Job[],
-  cronJobs: CronJob[],
-  isInUseLoading: boolean,
-  namespaces?: Namespaces
+  secrets: Configuration[],
+  namespaces?: PortainerNamespace[]
 ): SecretRowData[] {
   return useMemo(
     () =>
-      secrets.map((secret) => ({
-        ...secret,
-        inUse:
-          // if the apps are loading, set inUse to true to hide the 'unused' badge
-          isInUseLoading || getIsSecretInUse(secret, pods, jobs, cronJobs),
-        isSystem: namespaces
-          ? namespaces?.[secret.metadata?.namespace ?? '']?.IsSystem
-          : false,
-      })),
-    [secrets, isInUseLoading, pods, jobs, cronJobs, namespaces]
+      secrets?.map(
+        (secret) =>
+          ({
+            ...secret,
+            inUse: secret.IsUsed,
+            isSystem: namespaces
+              ? namespaces.find(
+                  (namespace) => namespace.Name === secret.Namespace
+                )?.IsSystem ?? false
+              : false,
+          }) ?? []
+      ),
+    [secrets, namespaces]
   );
 }
 
-function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
+function TableActions({
+  selectedItems,
+  isAddSecretHidden,
+}: {
+  selectedItems: SecretRowData[];
+  isAddSecretHidden: boolean;
+}) {
   const environmentId = useEnvironmentId();
-  const deleteSecretMutation = useMutationDeleteSecrets(environmentId);
+  const deleteSecretMutation = useDeleteSecrets(environmentId);
 
   async function handleRemoveClick(secrets: SecretRowData[]) {
     const secretsToDelete = secrets.map((secret) => ({
-      namespace: secret.metadata?.namespace ?? '',
-      name: secret.metadata?.name ?? '',
+      namespace: secret.Namespace ?? '',
+      name: secret.Name ?? '',
     }));
 
     await deleteSecretMutation.mutateAsync(secretsToDelete);
@@ -181,13 +146,17 @@ function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
           'secret'
         )}?`}
       />
-      <AddButton
-        to="kubernetes.secrets.new"
-        data-cy="k8sSecret-addSecretWithFormButton"
-        color="secondary"
-      >
-        Add with form
-      </AddButton>
+
+      {!isAddSecretHidden && (
+        <AddButton
+          to="kubernetes.secrets.new"
+          data-cy="k8sSecret-addSecretWithFormButton"
+          color="secondary"
+        >
+          Add with form
+        </AddButton>
+      )}
+
       <CreateFromManifestButton
         params={{
           tab: 'secrets',

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/created.tsx

@@ -1,8 +1,6 @@
 import { formatDate } from '@/portainer/filters/filters';
-import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
 import { SecretRowData } from '../types';
-import { configurationOwnerUsernameLabel } from '../../../constants';
 
 import { columnHelper } from './helper';
 
@@ -13,9 +11,7 @@ export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
 });
 
 function getCreatedAtText(row: SecretRowData) {
-  const owner =
-    row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-    row.metadata?.labels?.[appOwnerLabel];
-  const date = formatDate(row.metadata?.creationTimestamp);
+  const owner = row.ConfigurationOwner || row.ConfigurationOwnerId;
+  const date = formatDate(row.CreationDate);
   return owner ? `${date} by ${owner}` : date;
 }

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx

@@ -1,7 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
-import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
 import { SystemBadge } from '@@/Badge/SystemBadge';
 import { ExternalBadge } from '@@/Badge/ExternalBadge';
@@ -9,26 +8,21 @@ import { UnusedBadge } from '@@/Badge/UnusedBadge';
 import { Link } from '@@/Link';
 
 import { SecretRowData } from '../types';
-import { configurationOwnerUsernameLabel } from '../../../constants';
 
 import { columnHelper } from './helper';
 
 export const name = columnHelper.accessor(
   (row) => {
-    const name = row.metadata?.name;
+    const name = row.Name;
+
     const isSystemToken = name?.includes('default-token-');
-
-    const isRegistrySecret =
-      row.metadata?.annotations?.['portainer.io/registry.id'];
-    const isSystemSecret = isSystemToken || row.isSystem || isRegistrySecret;
-
+    const isSystemConfigMap = isSystemToken || row.isSystem;
     const hasConfigurationOwner = !!(
-      row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-      row.metadata?.labels?.[appOwnerLabel]
+      row.ConfigurationOwner || row.ConfigurationOwnerId
     );
-    return `${name} ${isSystemSecret ? 'system' : ''} ${
+    return `${name} ${isSystemConfigMap ? 'system' : ''} ${
       !isSystemToken && !hasConfigurationOwner ? 'external' : ''
-    } ${!row.inUse && !isSystemSecret ? 'unused' : ''}`;
+    } ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
   },
   {
     header: 'Name',
@@ -38,23 +32,22 @@ export const name = columnHelper.accessor(
 );
 
 function Cell({ row }: CellContext<SecretRowData, string>) {
-  const name = row.original.metadata?.name;
+  const name = row.original.Name;
 
   const isSystemToken = name?.includes('default-token-');
   const isSystemSecret = isSystemToken || row.original.isSystem;
 
   const hasConfigurationOwner = !!(
-    row.original.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-    row.original.metadata?.labels?.[appOwnerLabel]
+    row.original.ConfigurationOwner || row.original.ConfigurationOwnerId
   );
 
   return (
     <Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
-      <div className="flex w-fit">
+      <div className="flex w-fit gap-x-2">
         <Link
           to="kubernetes.secrets.secret"
           params={{
-            namespace: row.original.metadata?.namespace,
+            namespace: row.original.Namespace,
             name,
           }}
           title={name}
@@ -63,7 +56,6 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
         >
           {name}
         </Link>
-
         {isSystemSecret && <SystemBadge />}
         {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
         {!row.original.inUse && !isSystemSecret && <UnusedBadge />}

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx

@@ -8,37 +8,34 @@ import { SecretRowData } from '../types';
 
 import { columnHelper } from './helper';
 
-export const namespace = columnHelper.accessor(
-  (row) => row.metadata?.namespace,
-  {
-    header: 'Namespace',
-    id: 'namespace',
-    cell: ({ getValue }) => {
-      const namespace = getValue();
+export const namespace = columnHelper.accessor((row) => row.Namespace, {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: ({ getValue }) => {
+    const namespace = getValue();
 
-      return (
-        <Link
-          to="kubernetes.resourcePools.resourcePool"
-          params={{
-            id: namespace,
-          }}
-          title={namespace}
-          data-cy={`secret-namespace-link-${namespace}`}
-        >
-          {namespace}
-        </Link>
-      );
-    },
-    meta: {
-      filter: filterHOC('Filter by namespace'),
-    },
-    enableColumnFilter: true,
-    filterFn: (
-      row: Row<SecretRowData>,
-      _columnId: string,
-      filterValue: string[]
-    ) =>
-      filterValue.length === 0 ||
-      filterValue.includes(row.original.metadata?.namespace ?? ''),
-  }
-);
+    return (
+      <Link
+        to="kubernetes.resourcePools.resourcePool"
+        params={{
+          id: namespace,
+        }}
+        title={namespace}
+        data-cy={`secret-namespace-link-${namespace}`}
+      >
+        {namespace}
+      </Link>
+    );
+  },
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (
+    row: Row<SecretRowData>,
+    _columnId: string,
+    filterValue: string[]
+  ) =>
+    filterValue.length === 0 ||
+    filterValue.includes(row.original.Namespace ?? ''),
+});

app/react/kubernetes/configs/ListView/SecretsDatatable/types.ts

@@ -1,6 +1,6 @@
-import { Secret } from 'kubernetes-types/core/v1';
+import { Configuration } from '../../types';
 
-export interface SecretRowData extends Secret {
+export interface SecretRowData extends Configuration {
   inUse: boolean;
   isSystem: boolean;
 }

app/react/kubernetes/configs/ListView/SecretsDatatable/utils.test.ts

@@ -1,14 +1,21 @@
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
-import { Secret, Pod } from 'kubernetes-types/core/v1';
+import { CronJob, Job, K8sPod } from '../../../applications/types';
+import { Configuration } from '../../types';
 
 import { getIsSecretInUse } from './utils';
 
 describe('getIsSecretInUse', () => {
   it('should return false when no resources reference the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [];
     const cronJobs: CronJob[] = [];
 
@@ -16,20 +23,26 @@ describe('getIsSecretInUse', () => {
   });
 
   it('should return true when a pod references the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [
+    const pods: K8sPod[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          containers: [
-            {
-              name: 'container1',
-              envFrom: [{ secretRef: { name: 'my-secret' } }],
-            },
-          ],
-        },
+        namespace: 'default',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ secretRef: { name: 'my-secret' } }],
+          },
+        ],
+        ownerReferences: [],
       },
     ];
     const jobs: Job[] = [];
@@ -39,25 +52,26 @@ describe('getIsSecretInUse', () => {
   });
 
   it('should return true when a job references the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          template: {
-            spec: {
-              containers: [
-                {
-                  name: 'container1',
-                  envFrom: [{ secretRef: { name: 'my-secret' } }],
-                },
-              ],
-            },
+        namespace: 'default',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ secretRef: { name: 'my-secret' } }],
           },
-        },
+        ],
       },
     ];
     const cronJobs: CronJob[] = [];
@@ -66,31 +80,28 @@ describe('getIsSecretInUse', () => {
   });
 
   it('should return true when a cronJob references the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [];
     const cronJobs: CronJob[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          schedule: '0 0 * * *',
-          jobTemplate: {
-            spec: {
-              template: {
-                spec: {
-                  containers: [
-                    {
-                      name: 'container1',
-                      envFrom: [{ secretRef: { name: 'my-secret' } }],
-                    },
-                  ],
-                },
-              },
-            },
+        namespace: 'default',
+        schedule: '0 0 * * *',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ secretRef: { name: 'my-secret' } }],
           },
-        },
+        ],
       },
     ];
 

app/react/kubernetes/configs/ListView/SecretsDatatable/utils.ts

@@ -1,27 +1,27 @@
-import { Secret, Pod, PodSpec } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
+import { PodSpec } from 'kubernetes-types/core/v1';
+
+import { Configuration } from '../../types';
+import { Job, CronJob, K8sPod } from '../../../applications/types';
 
 /**
  * getIsSecretInUse returns true if the secret is referenced by any pod, job, or cronjob in the same namespace
  */
 export function getIsSecretInUse(
-  secret: Secret,
-  pods: Pod[],
+  secret: Configuration,
+  pods: K8sPod[],
   jobs: Job[],
   cronJobs: CronJob[]
 ) {
   // get all podspecs from pods, jobs and cronjobs that are in the same namespace
-  const podsInNamespace = pods
-    .filter((pod) => pod.metadata?.namespace === secret.metadata?.namespace)
-    .map((pod) => pod.spec);
-  const jobsInNamespace = jobs
-    .filter((job) => job.metadata?.namespace === secret.metadata?.namespace)
-    .map((job) => job.spec?.template.spec);
-  const cronJobsInNamespace = cronJobs
-    .filter(
-      (cronJob) => cronJob.metadata?.namespace === secret.metadata?.namespace
-    )
-    .map((cronJob) => cronJob.spec?.jobTemplate.spec?.template.spec);
+  const podsInNamespace = pods.filter(
+    (pod) => pod.namespace === secret.Namespace
+  );
+  const jobsInNamespace = jobs.filter(
+    (job) => job.namespace === secret.Namespace
+  );
+  const cronJobsInNamespace = cronJobs.filter(
+    (cronJob) => cronJob.namespace === secret.Namespace
+  );
   const allPodSpecs = [
     ...podsInNamespace,
     ...jobsInNamespace,
@@ -30,10 +30,10 @@ export function getIsSecretInUse(
 
   // check if the secret is referenced by any pod, job or cronjob in the namespace
   const isReferenced = allPodSpecs.some((podSpec) => {
-    if (!podSpec || !secret.metadata?.name) {
+    if (!podSpec || !secret.Name) {
       return false;
     }
-    return doesPodSpecReferenceSecret(podSpec, secret.metadata?.name);
+    return doesPodSpecReferenceSecret(podSpec, secret.Name);
   });
 
   return isReferenced;