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

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

@@ -0,0 +1,196 @@
+import { useMemo } from 'react';
+import { FileCode, Plus, Trash2 } from 'lucide-react';
+import { ConfigMap } 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 {
+  useConfigMapsForCluster,
+  useMutationDeleteConfigMaps,
+} from '../../configmap.service';
+import { IndexOptional } from '../../types';
+
+import { getIsConfigMapInUse } from './utils';
+import { ConfigMapRowData } from './types';
+import { columns } from './columns';
+
+const storageKey = 'k8sConfigMapsDatatable';
+const settingsStore = createStore(storageKey);
+
+export function ConfigMapsDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
+  const readOnly = !useAuthorizations(['K8sConfigMapsW']);
+  const { isAdmin } = useCurrentUser();
+
+  const environmentId = useEnvironmentId();
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(
+    environmentId,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const namespaceNames = Object.keys(namespaces || {});
+  const { data: configMaps, ...configMapsQuery } = useConfigMapsForCluster(
+    environmentId,
+    namespaceNames,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const { data: applications, ...applicationsQuery } =
+    useApplicationsForCluster(environmentId, namespaceNames);
+
+  const filteredConfigMaps = useMemo(
+    () =>
+      configMaps?.filter(
+        (configMap) =>
+          (isAdmin && tableState.showSystemResources) ||
+          !isSystemNamespace(configMap.metadata?.namespace ?? '')
+      ) || [],
+    [configMaps, tableState, isAdmin]
+  );
+  const configMapRowData = useConfigMapRowData(
+    filteredConfigMaps,
+    applications ?? [],
+    applicationsQuery.isLoading
+  );
+
+  return (
+    <Datatable<IndexOptional<ConfigMapRowData>>
+      dataset={configMapRowData}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={configMapsQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No ConfigMaps found"
+      title="ConfigMaps"
+      titleIcon={FileCode}
+      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}
+        />
+      }
+    />
+  );
+}
+
+// useConfigMapRowData appends the `inUse` property to the ConfigMap data (for the unused badge in the name column)
+// and wraps with useMemo to prevent unnecessary calculations
+function useConfigMapRowData(
+  configMaps: ConfigMap[],
+  applications: Application[],
+  applicationsLoading: boolean
+): ConfigMapRowData[] {
+  return useMemo(
+    () =>
+      configMaps.map((configMap) => ({
+        ...configMap,
+        inUse:
+          // if the apps are loading, set inUse to true to hide the 'unused' badge
+          applicationsLoading || getIsConfigMapInUse(configMap, applications),
+      })),
+    [configMaps, applicationsLoading, applications]
+  );
+}
+
+function TableActions({
+  selectedItems,
+}: {
+  selectedItems: ConfigMapRowData[];
+}) {
+  const environmentId = useEnvironmentId();
+  const deleteConfigMapMutation = useMutationDeleteConfigMaps(environmentId);
+
+  async function handleRemoveClick(configMaps: ConfigMap[]) {
+    const confirmed = await confirmDelete(
+      `Are you sure you want to remove the selected ${pluralize(
+        configMaps.length,
+        'ConfigMap'
+      )}?`
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    const configMapsToDelete = configMaps.map((configMap) => ({
+      namespace: configMap.metadata?.namespace ?? '',
+      name: configMap.metadata?.name ?? '',
+    }));
+
+    await deleteConfigMapMutation.mutateAsync(configMapsToDelete);
+  }
+
+  return (
+    <Authorized authorizations="K8sConfigMapsW">
+      <Button
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={async () => {
+          handleRemoveClick(selectedItems);
+        }}
+        icon={Trash2}
+        data-cy="k8sConfig-removeConfigButton"
+      >
+        Remove
+      </Button>
+      <Link to="kubernetes.configmaps.new" className="ml-1">
+        <Button
+          className="btn-wrapper"
+          color="secondary"
+          icon={Plus}
+          data-cy="k8sConfig-addConfigWithFormButton"
+        >
+          Add with form
+        </Button>
+      </Link>
+      <Link
+        to="kubernetes.deploy"
+        params={{
+          referrer: 'kubernetes.configurations',
+          tab: 'configmaps',
+        }}
+        className="ml-1"
+        data-cy="k8sConfig-deployFromManifestButton"
+      >
+        <Button className="btn-wrapper" color="primary" icon={Plus}>
+          Create from manifest
+        </Button>
+      </Link>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { ConfigMapRowData } 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: ConfigMapRowData) {
+  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/ConfigMapsDatatable/columns/helper.ts

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

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/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/ConfigMapsDatatable/columns/name.tsx

@@ -0,0 +1,80 @@
+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 { ConfigMapRowData } 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 isSystemConfigMap = isSystemToken || isInSystemNamespace;
+
+    const hasConfigurationOwner =
+      !!row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+    return `${name} ${isSystemConfigMap ? 'system' : ''} ${
+      !isSystemToken && !hasConfigurationOwner ? 'external' : ''
+    } ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
+  },
+  {
+    header: 'Name',
+    cell: Cell,
+    id: 'name',
+  }
+);
+
+function Cell({ row }: CellContext<ConfigMapRowData, 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 isSystemConfigMap = isSystemToken || isInSystemNamespace;
+
+  const hasConfigurationOwner =
+    !!row.original.metadata?.labels?.[
+      'io.portainer.kubernetes.configuration.owner'
+    ];
+
+  return (
+    <Authorized authorizations="K8sConfigMapsR" childrenUnauthorized={name}>
+      <div className="flex">
+        <Link
+          to="kubernetes.configmaps.configmap"
+          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>
+        {isSystemConfigMap && (
+          <Badge type="success" className="ml-2">
+            system
+          </Badge>
+        )}
+        {!isSystemToken && !hasConfigurationOwner && (
+          <Badge className="ml-2">external</Badge>
+        )}
+        {!row.original.inUse && !isSystemConfigMap && (
+          <Badge type="warn" className="ml-2">
+            unused
+          </Badge>
+        )}
+      </div>
+    </Authorized>
+  );
+}

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/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 { ConfigMapRowData } 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<ConfigMapRowData>,
+      _columnId: string,
+      filterValue: string[]
+    ) =>
+      filterValue.length === 0 ||
+      filterValue.includes(row.original.metadata?.namespace ?? ''),
+  }
+);

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { ConfigMap, Pod } from 'kubernetes-types/core/v1';
+
+import { Application } from '@/react/kubernetes/applications/types';
+import { applicationIsKind } from '@/react/kubernetes/applications/utils';
+
+// getIsConfigMapInUse returns true if the configmap is referenced by any
+// application in the cluster
+export function getIsConfigMapInUse(
+  configMap: ConfigMap,
+  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?.configMapKeyRef?.name === configMap.metadata?.name
+      )
+    );
+    const hasVolumeReference = appSpec?.volumes?.some(
+      (volume) => volume.configMap?.name === configMap.metadata?.name
+    );
+
+    return hasEnvVarReference || hasVolumeReference;
+  });
+}