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/RolesView/RolesDatatable/RolesDatatable.tsx

@@ -0,0 +1,157 @@
+import { Trash2, UserCheck } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { 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 { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
+import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+
+import { confirmDelete } from '@@/modals/confirm';
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { LoadingButton } from '@@/buttons';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+
+import { columns } from './columns';
+import { Role } from './types';
+import { useGetAllRolesQuery } from './queries/useGetAllRolesQuery';
+import { useDeleteRolesMutation } from './queries/useDeleteRolesMutation';
+
+const storageKey = 'roles';
+const settingsStore = createStore(storageKey);
+
+export function RolesDatatable() {
+  const environmentId = useEnvironmentId();
+  const tableState = useTableState(settingsStore, storageKey);
+  const namespacesQuery = useNamespacesQuery(environmentId);
+  const rolesQuery = useGetAllRolesQuery(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+    enabled: namespacesQuery.isSuccess,
+  });
+  useUnauthorizedRedirect(
+    { authorizations: ['K8sRolesW'] },
+    { to: 'kubernetes.dashboard' }
+  );
+
+  const filteredRoles = tableState.showSystemResources
+    ? rolesQuery.data
+    : rolesQuery.data?.filter(
+        (role) => !isSystemNamespace(role.namespace, namespacesQuery.data)
+      );
+
+  return (
+    <Datatable
+      dataset={filteredRoles || []}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={rolesQuery.isLoading}
+      emptyContentLabel="No roles found"
+      title="Roles"
+      titleIcon={UserCheck}
+      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}
+        />
+      }
+      data-cy="k8s-roles-datatable"
+    />
+  );
+}
+
+interface SelectedRole {
+  namespace: string;
+  name: string;
+}
+
+type TableActionsProps = {
+  selectedItems: Role[];
+};
+
+function TableActions({ selectedItems }: TableActionsProps) {
+  const environmentId = useEnvironmentId();
+  const deleteRolesMutation = useDeleteRolesMutation(environmentId);
+  const router = useRouter();
+
+  return (
+    <Authorized authorizations="K8sRolesW">
+      <LoadingButton
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={() => handleRemoveClick(selectedItems)}
+        icon={Trash2}
+        isLoading={deleteRolesMutation.isLoading}
+        loadingText="Removing roles..."
+        data-cy="k8s-roles-removeRoleButton"
+      >
+        Remove
+      </LoadingButton>
+
+      <CreateFromManifestButton
+        params={{ tab: 'roles' }}
+        data-cy="k8s-roles-deploy-button"
+      />
+    </Authorized>
+  );
+
+  async function handleRemoveClick(roles: SelectedRole[]) {
+    const confirmed = await confirmDelete(
+      <>
+        <p>Are you sure you want to delete the selected role(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.namespace}/{s.name}
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: Record<string, string[]> = {};
+    roles.forEach((r) => {
+      payload[r.namespace] = payload[r.namespace] || [];
+      payload[r.namespace].push(r.name);
+    });
+
+    deleteRolesMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Roles successfully removed',
+            roles.map((r) => `${r.namespace}/${r.name}`).join(', ')
+          );
+          router.stateService.reload();
+        },
+        onError: (error) => {
+          notifyError(
+            'Unable to delete roles',
+            error as Error,
+            roles.map((r) => `${r.namespace}/${r.name}`).join(', ')
+          );
+        },
+      }
+    );
+    return roles;
+  }
+}

app/react/kubernetes/more-resources/RolesView/RolesDatatable/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/RolesView/RolesDatatable/columns/helper.ts

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

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/index.tsx

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

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx

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

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/namespace.tsx

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

app/react/kubernetes/more-resources/RolesView/RolesDatatable/index.tsx

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

app/react/kubernetes/more-resources/RolesView/RolesDatatable/queries/query-keys.ts

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

app/react/kubernetes/more-resources/RolesView/RolesDatatable/queries/useDeleteRolesMutation.ts

@@ -0,0 +1,29 @@
+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 useDeleteRolesMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+  return useMutation(deleteRole, {
+    ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),
+    ...withGlobalError('Unable to delete roles'),
+  });
+}
+
+export async function deleteRole({
+  environmentId,
+  data,
+}: {
+  environmentId: EnvironmentId;
+  data: Record<string, string[]>;
+}) {
+  try {
+    return await axios.post(`kubernetes/${environmentId}/roles/delete`, data);
+  } catch (e) {
+    throw parseAxiosError(e, `Unable to delete roles`);
+  }
+}

app/react/kubernetes/more-resources/RolesView/RolesDatatable/queries/useGetAllRolesQuery.ts

@@ -0,0 +1,41 @@
+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 { Role } from '../types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'kubernetes', 'roles'] as const,
+};
+
+export function useGetAllRolesQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number; enabled?: boolean }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getAllRoles(environmentId),
+    {
+      ...withGlobalError('Unable to get roles'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+      enabled: options?.enabled,
+    }
+  );
+}
+
+async function getAllRoles(environmentId: EnvironmentId) {
+  try {
+    const { data: roles } = await axios.get<Role[]>(
+      `kubernetes/${environmentId}/roles`
+    );
+
+    return roles;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get roles');
+  }
+}

app/react/kubernetes/more-resources/RolesView/RolesDatatable/types.ts

@@ -0,0 +1,19 @@
+export type Rule = {
+  verbs: string[];
+  apiGroups: string[];
+  resources: string[];
+};
+
+export type Role = {
+  name: string;
+  uid: string;
+  namespace: string;
+  resourceVersion: string;
+  creationDate: string;
+  annotations?: Record<string, string>;
+
+  rules: Rule[];
+
+  isSystem: boolean;
+  isUnused: boolean;
+};