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/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/ClusterRoleBindingsDatatable.tsx

@@ -0,0 +1,173 @@
+import { Trash2, Link as LinkIcon } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+import { Row } from '@tanstack/react-table';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
+
+import { confirmDelete } from '@@/modals/confirm';
+import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
+import { LoadingButton } from '@@/buttons';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+
+import { ClusterRoleBinding } from './types';
+import { columns } from './columns';
+import { useGetClusterRoleBindingsQuery } from './queries/useGetClusterRoleBindingsQuery';
+import { useDeleteClusterRoleBindingsMutation } from './queries/useDeleteClusterRoleBindingsMutation';
+
+const storageKey = 'clusterRoleBindings';
+const settingsStore = createStore(storageKey);
+
+export function ClusterRoleBindingsDatatable() {
+  const environmentId = useEnvironmentId();
+  const tableState = useTableState(settingsStore, storageKey);
+  const clusterRoleBindingsQuery = useGetClusterRoleBindingsQuery(
+    environmentId,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+
+  const filteredClusterRoleBindings = useMemo(
+    () =>
+      clusterRoleBindingsQuery.data?.filter(
+        (crb) => tableState.showSystemResources || !crb.isSystem
+      ),
+    [clusterRoleBindingsQuery.data, tableState.showSystemResources]
+  );
+
+  const { authorized: isAuthorizedToAddOrEdit } = useAuthorizations([
+    'K8sClusterRoleBindingsW',
+  ]);
+
+  return (
+    <Datatable
+      dataset={filteredClusterRoleBindings || []}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={clusterRoleBindingsQuery.isLoading}
+      emptyContentLabel="No supported cluster role bindings found"
+      title="Cluster Role Bindings"
+      titleIcon={LinkIcon}
+      getRowId={(row) => row.uid}
+      isRowSelectable={(row) => !row.original.isSystem}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings settings={tableState} />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources}
+        />
+      }
+      disableSelect={!isAuthorizedToAddOrEdit}
+      renderRow={renderRow}
+      data-cy="k8s-cluster-role-bindings-datatable"
+    />
+  );
+}
+
+// needed to apply custom styling to the row and not globally required in the AC's for this ticket.
+function renderRow(row: Row<ClusterRoleBinding>, highlightedItemId?: string) {
+  return (
+    <Table.Row<ClusterRoleBinding>
+      cells={row.getVisibleCells()}
+      className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
+        active: highlightedItemId === row.id,
+      })}
+    />
+  );
+}
+
+interface SelectedRole {
+  name: string;
+}
+
+type TableActionsProps = {
+  selectedItems: ClusterRoleBinding[];
+};
+
+function TableActions({ selectedItems }: TableActionsProps) {
+  const environmentId = useEnvironmentId();
+  const deleteClusterRoleBindingsMutation =
+    useDeleteClusterRoleBindingsMutation(environmentId);
+  const router = useRouter();
+
+  async function handleRemoveClick(roles: SelectedRole[]) {
+    const confirmed = await confirmDelete(
+      <>
+        <p>
+          Are you sure you want to delete the selected cluster role binding(s)?
+        </p>
+        <ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
+          {roles.map((s, index) => (
+            <li key={index}>{s.name}</li>
+          ))}
+        </ul>
+      </>
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: string[] = [];
+    roles.forEach((r) => {
+      payload.push(r.name);
+    });
+
+    deleteClusterRoleBindingsMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Roles successfully removed',
+            roles.map((r) => `${r.name}`).join(', ')
+          );
+          router.stateService.reload();
+        },
+        onError: (error) => {
+          notifyError(
+            'Unable to delete cluster role bindings',
+            error as Error,
+            roles.map((r) => `${r.name}`).join(', ')
+          );
+        },
+      }
+    );
+    return roles;
+  }
+
+  return (
+    <Authorized authorizations="K8sClusterRoleBindingsW">
+      <LoadingButton
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={() => handleRemoveClick(selectedItems)}
+        icon={Trash2}
+        isLoading={deleteClusterRoleBindingsMutation.isLoading}
+        loadingText="Removing cluster role bindings..."
+        data-cy="k8s-cluster-role-bindings-remove-button"
+      >
+        Remove
+      </LoadingButton>
+
+      <CreateFromManifestButton
+        params={{ tab: 'clusterRoleBindings' }}
+        data-cy="k8s-cluster-role-bindings-deploy-button"
+      />
+    </Authorized>
+  );
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/created.tsx

@@ -0,0 +1,12 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor(
+  (row) => formatDate(row.creationDate),
+  {
+    header: 'Created',
+    id: 'created',
+    cell: ({ getValue }) => getValue(),
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/helper.ts

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

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/index.tsx

@@ -0,0 +1,17 @@
+import { name } from './name';
+import { roleName } from './roleName';
+import { kind } from './kind';
+import { created } from './created';
+import { subjectKind } from './subjectKind';
+import { subjectName } from './subjectName';
+import { subjectNamespace } from './subjectNamespace';
+
+export const columns = [
+  name,
+  roleName,
+  kind,
+  subjectKind,
+  subjectName,
+  subjectNamespace,
+  created,
+];

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/kind.tsx

@@ -0,0 +1,6 @@
+import { columnHelper } from './helper';
+
+export const kind = columnHelper.accessor('roleRef.kind', {
+  header: 'Role Kind',
+  id: 'roleKind',
+});

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/name.tsx

@@ -0,0 +1,22 @@
+import { SystemBadge } from '@@/Badge/SystemBadge';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    if (row.isSystem) {
+      return `${row.name} system`;
+    }
+    return row.name;
+  },
+  {
+    header: 'Name',
+    id: 'name',
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        {row.original.name}
+        {row.original.isSystem && <SystemBadge />}
+      </div>
+    ),
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/roleName.tsx

@@ -0,0 +1,6 @@
+import { columnHelper } from './helper';
+
+export const roleName = columnHelper.accessor('roleRef.name', {
+  header: 'Role Name',
+  id: 'roleName',
+});

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/subjectKind.tsx

@@ -0,0 +1,13 @@
+import { columnHelper } from './helper';
+
+export const subjectKind = columnHelper.accessor(
+  (row) => row.subjects?.map((sub) => sub.kind).join(', '),
+  {
+    header: 'Subject Kind',
+    id: 'subjectKind',
+    cell: ({ row }) =>
+      row.original.subjects?.map((sub, index) => (
+        <div key={index}>{sub.kind}</div>
+      )) || '-',
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/subjectName.tsx

@@ -0,0 +1,13 @@
+import { columnHelper } from './helper';
+
+export const subjectName = columnHelper.accessor(
+  (row) => row.subjects?.map((sub) => sub.name).join(' '),
+  {
+    header: 'Subject Name',
+    id: 'subjectName',
+    cell: ({ row }) =>
+      row.original.subjects?.map((sub, index) => (
+        <div key={index}>{sub.name}</div>
+      )) || '-',
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/subjectNamespace.tsx

@@ -0,0 +1,42 @@
+import { Link } from '@@/Link';
+import { filterHOC } from '@@/datatables/Filter';
+
+import { filterFn, filterNamespaceOptionsTransformer } from '../../utils';
+
+import { columnHelper } from './helper';
+
+export const subjectNamespace = columnHelper.accessor(
+  (row) => row.subjects?.flatMap((sub) => sub.namespace || '-') || [],
+  {
+    header: 'Subject Namespace',
+    id: 'subjectNamespace',
+    cell: ({ row }) =>
+      row.original.subjects?.map((sub, index) => (
+        <div key={index}>
+          {sub.namespace ? (
+            <Link
+              to="kubernetes.resourcePools.resourcePool"
+              params={{
+                id: sub.namespace,
+              }}
+              title={sub.namespace}
+              data-cy={`subject-namespace-link-${row.original.name}_${index}`}
+            >
+              {sub.namespace}
+            </Link>
+          ) : (
+            '-'
+          )}
+        </div>
+      )) || '-',
+    enableColumnFilter: true,
+    // use a custom filter, to remove empty namespace values
+    meta: {
+      filter: filterHOC(
+        'Filter by subject namespace',
+        filterNamespaceOptionsTransformer
+      ),
+    },
+    filterFn,
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/query-keys.ts

@@ -0,0 +1,11 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'cluster_role_bindings',
+    ] as const,
+};

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/useDeleteClusterRoleBindingsMutation.ts

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { withGlobalError, withInvalidate } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from './query-keys';
+
+export function useDeleteClusterRoleBindingsMutation(
+  environmentId: EnvironmentId
+) {
+  const queryClient = useQueryClient();
+  return useMutation(deleteClusterRoleBindings, {
+    ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),
+    ...withGlobalError('Unable to delete cluster role bindings'),
+  });
+}
+
+export async function deleteClusterRoleBindings({
+  environmentId,
+  data,
+}: {
+  environmentId: EnvironmentId;
+  data: string[];
+}) {
+  try {
+    return await axios.post(
+      `kubernetes/${environmentId}/cluster_role_bindings/delete`,
+      data
+    );
+  } catch (e) {
+    throw parseAxiosError(e, `Unable to delete cluster role bindings`);
+  }
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/useGetClusterRoleBindingsQuery.ts

@@ -0,0 +1,41 @@
+import { compact } from 'lodash';
+import { useQuery } from '@tanstack/react-query';
+
+import { withGlobalError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { ClusterRoleBinding } from '../types';
+
+import { queryKeys } from './query-keys';
+
+export function useGetClusterRoleBindingsQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => {
+      const cluerRoleBindings = await getClusterRoleBindings(environmentId);
+      return compact(cluerRoleBindings);
+    },
+    {
+      ...withGlobalError('Unable to get cluster role bindings'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getClusterRoleBindings(environmentId: EnvironmentId) {
+  try {
+    const { data: roles } = await axios.get<ClusterRoleBinding[]>(
+      `kubernetes/${environmentId}/cluster_role_bindings`
+    );
+
+    return roles;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get cluster role bindings');
+  }
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/types.ts

@@ -0,0 +1,26 @@
+export type ClusterRoleRef = {
+  name: string;
+  kind: string;
+  apiGroup?: string;
+};
+
+export type ClusterRoleSubject = {
+  name: string;
+  kind: string;
+  apiGroup?: string;
+  namespace?: string;
+};
+
+export type ClusterRoleBinding = {
+  name: string;
+  uid: string;
+  namespace: string;
+  resourceVersion: string;
+  creationDate: string;
+  annotations: Record<string, string> | null;
+
+  roleRef: ClusterRoleRef;
+  subjects: ClusterRoleSubject[] | null;
+
+  isSystem: boolean;
+};