mirror of
https://github.com/portainer/portainer.git
synced 2025-07-25 08:19:40 +02:00
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>
This commit is contained in:
Steven Kang
GitHub
parent
da010f3d08
commit
ea228c3d6d
276 changed files with 9241 additions and 3361 deletions
|
|
@ -0,0 +1,175 @@
|
|||
import { Trash2, Link as LinkIcon } from 'lucide-react';
|
||||
import { useRouter } from '@uirouter/react';
|
||||
import { Row } from '@tanstack/react-table';
|
||||
import clsx from 'clsx';
|
||||
|
||||
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 { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
|
||||
import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
|
||||
import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
|
||||
|
||||
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 { RoleBinding } from './types';
|
||||
import { columns } from './columns';
|
||||
import { useGetAllRoleBindingsQuery } from './queries/useGetAllRoleBindingsQuery';
|
||||
import { useDeleteRoleBindingsMutation } from './queries/useDeleteRoleBindingsMutation';
|
||||
|
||||
const storageKey = 'roleBindings';
|
||||
const settingsStore = createStore(storageKey);
|
||||
|
||||
export function RoleBindingsDatatable() {
|
||||
const environmentId = useEnvironmentId();
|
||||
const tableState = useTableState(settingsStore, storageKey);
|
||||
const namespacesQuery = useNamespacesQuery(environmentId);
|
||||
const roleBindingsQuery = useGetAllRoleBindingsQuery(environmentId, {
|
||||
autoRefreshRate: tableState.autoRefreshRate * 1000,
|
||||
enabled: namespacesQuery.isSuccess,
|
||||
});
|
||||
|
||||
const filteredRoleBindings = tableState.showSystemResources
|
||||
? roleBindingsQuery.data
|
||||
: roleBindingsQuery.data?.filter(
|
||||
(rb) => !isSystemNamespace(rb.namespace, namespacesQuery.data)
|
||||
);
|
||||
|
||||
const { authorized: isAuthorisedToAddEdit } = useAuthorizations([
|
||||
'K8sRoleBindingsW',
|
||||
]);
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
dataset={filteredRoleBindings || []}
|
||||
columns={columns}
|
||||
settingsManager={tableState}
|
||||
isLoading={roleBindingsQuery.isLoading}
|
||||
emptyContentLabel="No role bindings found"
|
||||
title="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={!isAuthorisedToAddEdit}
|
||||
renderRow={renderRow}
|
||||
data-cy="k8s-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<RoleBinding>, highlightedItemId?: string) {
|
||||
return (
|
||||
<Table.Row<RoleBinding>
|
||||
cells={row.getVisibleCells()}
|
||||
className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
|
||||
active: highlightedItemId === row.id,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface SelectedRole {
|
||||
namespace: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
type TableActionsProps = {
|
||||
selectedItems: RoleBinding[];
|
||||
};
|
||||
|
||||
function TableActions({ selectedItems }: TableActionsProps) {
|
||||
const environmentId = useEnvironmentId();
|
||||
const deleteRoleBindingsMutation =
|
||||
useDeleteRoleBindingsMutation(environmentId);
|
||||
const router = useRouter();
|
||||
|
||||
async function handleRemoveClick(roles: SelectedRole[]) {
|
||||
const confirmed = await confirmDelete(
|
||||
<>
|
||||
<p>Are you sure you want to delete the selected role binding(s)?</p>
|
||||
<ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
|
||||
{roles.map((r, index) => (
|
||||
<li key={index}>
|
||||
{r.namespace}/{r.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);
|
||||
});
|
||||
|
||||
deleteRoleBindingsMutation.mutate(
|
||||
{ environmentId, data: payload },
|
||||
{
|
||||
onSuccess: () => {
|
||||
notifySuccess(
|
||||
'Role binding(s) successfully removed',
|
||||
roles.map((r) => `${r.namespace}/${r.name}`).join(', ')
|
||||
);
|
||||
router.stateService.reload();
|
||||
},
|
||||
onError: (error) => {
|
||||
notifyError(
|
||||
'Unable to delete role bindings(s)',
|
||||
error as Error,
|
||||
roles.map((r) => `${r.namespace}/${r.name}`).join(', ')
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
return roles;
|
||||
}
|
||||
|
||||
return (
|
||||
<Authorized authorizations="K8sRoleBindingsW">
|
||||
<LoadingButton
|
||||
className="btn-wrapper"
|
||||
color="dangerlight"
|
||||
disabled={selectedItems.length === 0}
|
||||
onClick={() => handleRemoveClick(selectedItems)}
|
||||
icon={Trash2}
|
||||
isLoading={deleteRoleBindingsMutation.isLoading}
|
||||
loadingText="Removing role bindings..."
|
||||
data-cy="k8s-role-bindings-remove-button"
|
||||
>
|
||||
Remove
|
||||
</LoadingButton>
|
||||
|
||||
<CreateFromManifestButton
|
||||
params={{
|
||||
tab: 'roleBindings',
|
||||
}}
|
||||
data-cy="k8s-role-bindings-deploy-button"
|
||||
/>
|
||||
</Authorized>
|
||||
);
|
||||
}
|
||||
|
|
@ -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(),
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createColumnHelper } from '@tanstack/react-table';
|
||||
|
||||
import { RoleBinding } from '../types';
|
||||
|
||||
export const columnHelper = createColumnHelper<RoleBinding>();
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { name } from './name';
|
||||
import { roleKind } from './roleKind';
|
||||
import { roleName } from './roleName';
|
||||
import { subjectKind } from './subjectKind';
|
||||
import { subjectName } from './subjectName';
|
||||
import { subjectNamespace } from './subjectNamespace';
|
||||
import { created } from './created';
|
||||
|
||||
export const columns = [
|
||||
name,
|
||||
roleKind,
|
||||
roleName,
|
||||
subjectKind,
|
||||
subjectName,
|
||||
subjectNamespace,
|
||||
created,
|
||||
];
|
||||
|
|
@ -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>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { columnHelper } from './helper';
|
||||
|
||||
export const roleKind = columnHelper.accessor('roleRef.kind', {
|
||||
header: 'Role Kind',
|
||||
id: 'roleKind',
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { columnHelper } from './helper';
|
||||
|
||||
export const roleName = columnHelper.accessor('roleRef.name', {
|
||||
header: 'Role Name',
|
||||
id: 'roleName',
|
||||
});
|
||||
|
|
@ -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>
|
||||
)) || '-',
|
||||
}
|
||||
);
|
||||
|
|
@ -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>
|
||||
)) || '-',
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { Link } from '@@/Link';
|
||||
import { filterHOC } from '@@/datatables/Filter';
|
||||
|
||||
import {
|
||||
filterFn,
|
||||
filterNamespaceOptionsTransformer,
|
||||
} from '../../../ClusterRolesView/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,
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { RoleBindingsDatatable } from './RoleBindingsDatatable';
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
export const queryKeys = {
|
||||
list: (environmentId: EnvironmentId) =>
|
||||
['environments', environmentId, 'kubernetes', 'role_bindings'] as const,
|
||||
};
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
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 useDeleteRoleBindingsMutation(environmentId: EnvironmentId) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation(deleteRoleBindings, {
|
||||
...withInvalidate(queryClient, [queryKeys.list(environmentId)]),
|
||||
...withGlobalError('Unable to delete role bindings'),
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteRoleBindings({
|
||||
environmentId,
|
||||
data,
|
||||
}: {
|
||||
environmentId: EnvironmentId;
|
||||
data: Record<string, string[]>;
|
||||
}) {
|
||||
try {
|
||||
return await axios.post(
|
||||
`kubernetes/${environmentId}/role_bindings/delete`,
|
||||
data
|
||||
);
|
||||
} catch (e) {
|
||||
throw parseAxiosError(e, `Unable to delete role bindings`);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
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 { RoleBinding } from '../types';
|
||||
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useGetAllRoleBindingsQuery(
|
||||
environmentId: EnvironmentId,
|
||||
options?: { autoRefreshRate?: number; enabled?: boolean }
|
||||
) {
|
||||
return useQuery(
|
||||
queryKeys.list(environmentId),
|
||||
async () => getAllRoleBindings(environmentId),
|
||||
{
|
||||
...withGlobalError('Unable to get role bindings'),
|
||||
refetchInterval() {
|
||||
return options?.autoRefreshRate ?? false;
|
||||
},
|
||||
enabled: options?.enabled,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function getAllRoleBindings(environmentId: EnvironmentId) {
|
||||
try {
|
||||
const { data: roleBinding } = await axios.get<RoleBinding[]>(
|
||||
`kubernetes/${environmentId}/role_bindings`
|
||||
);
|
||||
|
||||
return roleBinding;
|
||||
} catch (e) {
|
||||
throw parseAxiosError(e, 'Unable to get role bindings');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
export type RoleRef = {
|
||||
name: string;
|
||||
kind: string;
|
||||
apiGroup?: string;
|
||||
};
|
||||
|
||||
export type RoleSubject = {
|
||||
name: string;
|
||||
kind: string;
|
||||
apiGroup?: string;
|
||||
namespace?: string;
|
||||
};
|
||||
|
||||
export type RoleBinding = {
|
||||
name: string;
|
||||
uid: string;
|
||||
namespace: string;
|
||||
resourceVersion: string;
|
||||
creationDate: string;
|
||||
annotations: Record<string, string> | null;
|
||||
|
||||
roleRef: RoleRef;
|
||||
subjects: RoleSubject[] | null;
|
||||
|
||||
isSystem: boolean;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue