feat(config): separate configmaps and secrets [EE-5078] (#9029)

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

@@ -0,0 +1,192 @@
+import { useMemo } from 'react';
+import { Lock, Plus, Trash2 } from 'lucide-react';
+import { Secret } from 'kubernetes-types/core/v1';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import {
+  Authorized,
+  useAuthorizations,
+  useCurrentUser,
+} from '@/react/hooks/useUser';
+import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { useApplicationsForCluster } from '@/react/kubernetes/applications/application.queries';
+import { Application } from '@/react/kubernetes/applications/types';
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { confirmDelete } from '@@/modals/confirm';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { useTableState } from '@@/datatables/useTableState';
+
+import {
+  useSecretsForCluster,
+  useMutationDeleteSecrets,
+} from '../../secret.service';
+import { IndexOptional } from '../../types';
+
+import { getIsSecretInUse } from './utils';
+import { SecretRowData } from './types';
+import { columns } from './columns';
+
+const storageKey = 'k8sSecretsDatatable';
+const settingsStore = createStore(storageKey);
+
+export function SecretsDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
+  const readOnly = !useAuthorizations(['K8sSecretsW']);
+  const { isAdmin } = useCurrentUser();
+
+  const environmentId = useEnvironmentId();
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(
+    environmentId,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const namespaceNames = Object.keys(namespaces || {});
+  const { data: secrets, ...secretsQuery } = useSecretsForCluster(
+    environmentId,
+    namespaceNames,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const { data: applications, ...applicationsQuery } =
+    useApplicationsForCluster(environmentId, namespaceNames);
+
+  const filteredSecrets = useMemo(
+    () =>
+      secrets?.filter(
+        (secret) =>
+          (isAdmin && tableState.showSystemResources) ||
+          !isSystemNamespace(secret.metadata?.namespace ?? '')
+      ) || [],
+    [secrets, tableState, isAdmin]
+  );
+  const secretRowData = useSecretRowData(
+    filteredSecrets,
+    applications ?? [],
+    applicationsQuery.isLoading
+  );
+
+  return (
+    <Datatable<IndexOptional<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) =>
+        !isSystemNamespace(row.original.metadata?.namespace ?? '')
+      }
+      disableSelect={readOnly}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings
+            settings={tableState}
+            hideShowSystemResources={!isAdmin}
+          />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources || !isAdmin}
+        />
+      }
+    />
+  );
+}
+
+// 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[],
+  applications: Application[],
+  applicationsLoading: boolean
+): SecretRowData[] {
+  return useMemo(
+    () =>
+      secrets.map((secret) => ({
+        ...secret,
+        inUse:
+          // if the apps are loading, set inUse to true to hide the 'unused' badge
+          applicationsLoading || getIsSecretInUse(secret, applications),
+      })),
+    [secrets, applicationsLoading, applications]
+  );
+}
+
+function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
+  const environmentId = useEnvironmentId();
+  const deleteSecretMutation = useMutationDeleteSecrets(environmentId);
+
+  async function handleRemoveClick(secrets: SecretRowData[]) {
+    const confirmed = await confirmDelete(
+      `Are you sure you want to remove the selected ${pluralize(
+        secrets.length,
+        'secret'
+      )}?`
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    const secretsToDelete = secrets.map((secret) => ({
+      namespace: secret.metadata?.namespace ?? '',
+      name: secret.metadata?.name ?? '',
+    }));
+
+    await deleteSecretMutation.mutateAsync(secretsToDelete);
+  }
+
+  return (
+    <Authorized authorizations="K8sSecretsW">
+      <Button
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={async () => {
+          handleRemoveClick(selectedItems);
+        }}
+        icon={Trash2}
+        data-cy="k8sSecret-removeSecretButton"
+      >
+        Remove
+      </Button>
+      <Link to="kubernetes.secrets.new" className="ml-1">
+        <Button
+          className="btn-wrapper"
+          color="secondary"
+          icon={Plus}
+          data-cy="k8sSecret-addSecretWithFormButton"
+        >
+          Add with form
+        </Button>
+      </Link>
+      <Link
+        to="kubernetes.deploy"
+        params={{
+          referrer: 'kubernetes.configurations',
+          tab: 'secrets',
+        }}
+        className="ml-1"
+        data-cy="k8sSecret-deployFromManifestButton"
+      >
+        <Button className="btn-wrapper" color="primary" icon={Plus}>
+          Create from manifest
+        </Button>
+      </Link>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { SecretRowData } from '../types';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
+  header: 'Created',
+  id: 'created',
+  cell: ({ row }) => getCreatedAtText(row.original),
+});
+
+function getCreatedAtText(row: SecretRowData) {
+  const owner =
+    row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+  const date = formatDate(row.metadata?.creationTimestamp);
+  return owner ? `${date} by ${owner}` : date;
+}

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/helper.ts

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

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/index.ts

@@ -0,0 +1,5 @@
+import { name } from './name';
+import { namespace } from './namespace';
+import { created } from './created';
+
+export const columns = [name, namespace, created];

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

@@ -0,0 +1,83 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { Authorized } from '@/react/hooks/useUser';
+
+import { Link } from '@@/Link';
+import { Badge } from '@@/Badge';
+
+import { SecretRowData } from '../types';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    const name = row.metadata?.name;
+    const namespace = row.metadata?.namespace;
+
+    const isSystemToken = name?.includes('default-token-');
+    const isInSystemNamespace = namespace
+      ? isSystemNamespace(namespace)
+      : false;
+    const isRegistrySecret =
+      row.metadata?.annotations?.['portainer.io/registry.id'];
+    const isSystemSecret =
+      isSystemToken || isInSystemNamespace || isRegistrySecret;
+
+    const hasConfigurationOwner =
+      !!row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+    return `${name} ${isSystemSecret ? 'system' : ''} ${
+      !isSystemToken && !hasConfigurationOwner ? 'external' : ''
+    } ${!row.inUse && !isSystemSecret ? 'unused' : ''}`;
+  },
+  {
+    header: 'Name',
+    cell: Cell,
+    id: 'name',
+  }
+);
+
+function Cell({ row }: CellContext<SecretRowData, string>) {
+  const name = row.original.metadata?.name;
+  const namespace = row.original.metadata?.namespace;
+
+  const isSystemToken = name?.includes('default-token-');
+  const isInSystemNamespace = namespace ? isSystemNamespace(namespace) : false;
+  const isSystemSecret = isSystemToken || isInSystemNamespace;
+
+  const hasConfigurationOwner =
+    !!row.original.metadata?.labels?.[
+      'io.portainer.kubernetes.configuration.owner'
+    ];
+
+  return (
+    <Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
+      <div className="flex w-fit">
+        <Link
+          to="kubernetes.secrets.secret"
+          params={{
+            namespace: row.original.metadata?.namespace,
+            name,
+          }}
+          title={name}
+          className="w-fit max-w-xs truncate xl:max-w-sm 2xl:max-w-md"
+        >
+          {name}
+        </Link>
+        {isSystemSecret && (
+          <Badge type="success" className="ml-2">
+            system
+          </Badge>
+        )}
+        {!isSystemToken && !hasConfigurationOwner && (
+          <Badge className="ml-2">external</Badge>
+        )}
+        {!row.original.inUse && !isSystemSecret && (
+          <Badge type="warn" className="ml-2">
+            unused
+          </Badge>
+        )}
+      </div>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@/react/components/datatables/Filter';
+
+import { Link } from '@@/Link';
+
+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();
+
+      return (
+        <Link
+          to="kubernetes.resourcePools.resourcePool"
+          params={{
+            id: namespace,
+          }}
+          title={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 ?? ''),
+  }
+);

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

@@ -0,0 +1 @@
+export { SecretsDatatable } from './SecretsDatatable';

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

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

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

@@ -0,0 +1,26 @@
+import { Secret, Pod } from 'kubernetes-types/core/v1';
+
+import { Application } from '@/react/kubernetes/applications/types';
+import { applicationIsKind } from '@/react/kubernetes/applications/utils';
+
+// getIsSecretInUse returns true if the secret is referenced by any
+// application in the cluster
+export function getIsSecretInUse(secret: Secret, applications: Application[]) {
+  return applications.some((app) => {
+    const appSpec = applicationIsKind<Pod>('Pod', app)
+      ? app?.spec
+      : app?.spec?.template?.spec;
+
+    const hasEnvVarReference = appSpec?.containers.some((container) =>
+      container.env?.some(
+        (envVar) =>
+          envVar.valueFrom?.secretKeyRef?.name === secret.metadata?.name
+      )
+    );
+    const hasVolumeReference = appSpec?.volumes?.some(
+      (volume) => volume.secret?.secretName === secret.metadata?.name
+    );
+
+    return hasEnvVarReference || hasVolumeReference;
+  });
+}