Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-22 23:09:41 +02:00
Code Issues Releases Activity

refactor(namespace): migrate namespace edit to react [r8s-125] (#38)

Browse source
This commit is contained in:
Ali 2024-12-11 10:15:46 +13:00 • committed by GitHub
parent 40c7742e46
commit ce7e0d8d60
108 changed files with 3183 additions and 2194 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/react/kubernetes/namespaces/CreateView/CreateNamespaceForm.tsx
View file

@ -10,18 +10,17 @@ import { useCurrentUser } from '@/react/hooks/useUser';
import { Widget, WidgetBody } from '@@/Widget';
import { useIngressControllerClassMapQuery } from '../../cluster/ingressClass/useIngressControllerClassMap';
import { NamespaceInnerForm } from '../components/NamespaceInnerForm';
import { NamespaceInnerForm } from '../components/NamespaceForm/NamespaceInnerForm';
import { useNamespacesQuery } from '../queries/useNamespacesQuery';
import { useClusterResourceLimitsQuery } from '../queries/useResourceLimitsQuery';
import { useCreateNamespaceMutation } from '../queries/useCreateNamespaceMutation';
import { getNamespaceValidationSchema } from '../components/NamespaceForm/NamespaceForm.validation';
import { transformFormValuesToNamespacePayload } from '../components/NamespaceForm/utils';
import {
CreateNamespaceFormValues,
CreateNamespacePayload,
NamespaceFormValues,
NamespacePayload,
UpdateRegistryPayload,
} from './types';
import { useClusterResourceLimitsQuery } from './queries/useResourceLimitsQuery';
import { getNamespaceValidationSchema } from './CreateNamespaceForm.validation';
import { transformFormValuesToNamespacePayload } from './utils';
import { useCreateNamespaceMutation } from './queries/useCreateNamespaceMutation';
} from '../types';
export function CreateNamespaceForm() {
const router = useRouter();
@ -49,8 +48,8 @@ export function CreateNamespaceForm() {
}
const memoryLimit = resourceLimitsQuery.data?.Memory ?? 0;
const initialValues: CreateNamespaceFormValues = {
const cpuLimit = resourceLimitsQuery.data?.CPU ?? 0;
const initialValues: NamespaceFormValues = {
name: '',
ingressClasses: ingressClasses ?? [],
resourceQuota: {
@ -71,6 +70,7 @@ export function CreateNamespaceForm() {
validateOnMount
validationSchema={getNamespaceValidationSchema(
memoryLimit,
cpuLimit,
namespaceNames
)}
>
@ -80,8 +80,8 @@ export function CreateNamespaceForm() {
</Widget>
);
function handleSubmit(values: CreateNamespaceFormValues, userName: string) {
const createNamespacePayload: CreateNamespacePayload =
function handleSubmit(values: NamespaceFormValues, userName: string) {
const createNamespacePayload: NamespacePayload =
transformFormValuesToNamespacePayload(values, userName);
const updateRegistriesPayload: UpdateRegistryPayload[] =
values.registries.flatMap((registryFormValues) => {
@ -93,7 +93,7 @@ export function CreateNamespaceForm() {
return [];
}
const envNamespacesWithAccess =
selectedRegistry.RegistryAccesses[`${environmentId}`]?.Namespaces ||
selectedRegistry.RegistryAccesses?.[`${environmentId}`]?.Namespaces ||
[];
return {
Id: selectedRegistry.Id,

27
app/react/kubernetes/namespaces/CreateView/CreateNamespaceForm.validation.tsx
View file

@ -1,27 +0,0 @@
import { string, object, array, SchemaOf } from 'yup';
import { registriesValidationSchema } from '../components/RegistriesFormSection/registriesValidationSchema';
import { getResourceQuotaValidationSchema } from '../components/ResourceQuotaFormSection/getResourceQuotaValidationSchema';
import { CreateNamespaceFormValues } from './types';
export function getNamespaceValidationSchema(
memoryLimit: number,
namespaceNames: string[]
): SchemaOf<CreateNamespaceFormValues> {
return object({
name: string()
.matches(
/^[a-z0-9](?:[-a-z0-9]{0,251}[a-z0-9])?$/,
"This field must consist of lower case alphanumeric characters or '-', and contain at most 63 characters, and must start and end with an alphanumeric character."
)
.max(63, 'Name must be at most 63 characters.')
// must not have the same name as an existing namespace
.notOneOf(namespaceNames, 'Name must be unique.')
.required('Name is required.'),
resourceQuota: getResourceQuotaValidationSchema(memoryLimit),
// ingress classes table is constrained already, and doesn't need validation
ingressClasses: array(),
registries: registriesValidationSchema,
});
}

83
app/react/kubernetes/namespaces/CreateView/queries/useCreateNamespaceMutation.ts
View file

@ -1,83 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { withError } from '@/react-tools/react-query';
import { updateEnvironmentRegistryAccess } from '@/react/portainer/environments/environment.service/registries';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { IngressControllerClassMap } from '../../../cluster/ingressClass/types';
import { updateIngressControllerClassMap } from '../../../cluster/ingressClass/useIngressControllerClassMap';
import { Namespaces } from '../../types';
import { CreateNamespacePayload, UpdateRegistryPayload } from '../types';
export function useCreateNamespaceMutation(environmentId: EnvironmentId) {
return useMutation(
async ({
createNamespacePayload,
updateRegistriesPayload,
namespaceIngressControllerPayload,
}: {
createNamespacePayload: CreateNamespacePayload;
updateRegistriesPayload: UpdateRegistryPayload[];
namespaceIngressControllerPayload: IngressControllerClassMap[];
}) => {
try {
// create the namespace first, so that it exists before referencing it in the registry access request
await createNamespace(environmentId, createNamespacePayload);
} catch (e) {
throw new Error(e as string);
}
// collect promises
const updateRegistriesPromises = updateRegistriesPayload.map(
({ Id, Namespaces }) =>
updateEnvironmentRegistryAccess(environmentId, Id, {
Namespaces,
})
);
const updateIngressControllerPromise =
namespaceIngressControllerPayload.length > 0
? updateIngressControllerClassMap(
environmentId,
namespaceIngressControllerPayload,
createNamespacePayload.Name
)
: Promise.resolve();
// return combined promises
return Promise.allSettled([
updateIngressControllerPromise,
...updateRegistriesPromises,
]);
},
{
...withError('Unable to create namespace'),
}
);
}
// createNamespace is used to create a namespace using the Portainer backend
async function createNamespace(
environmentId: EnvironmentId,
payload: CreateNamespacePayload
) {
try {
const { data: ns } = await axios.post<Namespaces>(
buildUrl(environmentId),
payload
);
return ns;
} catch (e) {
throw parseAxiosError(e as Error, 'Unable to create namespace');
}
}
function buildUrl(environmentId: EnvironmentId, namespace?: string) {
let url = `kubernetes/${environmentId}/namespaces`;
if (namespace) {
url += `/${namespace}`;
}
return url;
}

37
app/react/kubernetes/namespaces/CreateView/queries/useResourceLimitsQuery.ts
View file

@ -1,37 +0,0 @@
import { useQuery } from '@tanstack/react-query';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { notifyError } from '@/portainer/services/notifications';
import axios, { parseAxiosError } from '@/portainer/services/axios';
type K8sNodeLimits = {
CPU: number;
Memory: number;
};
/**
* useClusterResourceLimitsQuery is used to retrieve the total resource limits for a cluster, minus the allocated resources taken by existing namespaces
* @returns the available resource limits for the cluster
* */
export function useClusterResourceLimitsQuery(environmentId: EnvironmentId) {
return useQuery(
['environments', environmentId, 'kubernetes', 'max_resource_limits'],
() => getResourceLimits(environmentId),
{
onError: (err) => {
notifyError('Failure', err as Error, 'Unable to get resource limits');
},
}
);
}
async function getResourceLimits(environmentId: EnvironmentId) {
try {
const { data: limits } = await axios.get<K8sNodeLimits>(
`/kubernetes/${environmentId}/max_resource_limits`
);
return limits;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve resource limits');
}
}

2
app/react/kubernetes/namespaces/CreateView/types.ts
View file

@ -4,7 +4,7 @@ import { IngressControllerClassMap } from '../../cluster/ingressClass/types';
import {
ResourceQuotaFormValues,
ResourceQuotaPayload,
} from '../components/ResourceQuotaFormSection/types';
} from '../components/NamespaceForm/ResourceQuotaFormSection/types';
export type CreateNamespaceFormValues = {
name: string;

18
app/react/kubernetes/namespaces/CreateView/utils.ts
View file

@ -1,18 +0,0 @@
import { CreateNamespaceFormValues, CreateNamespacePayload } from './types';
export function transformFormValuesToNamespacePayload(
createNamespaceFormValues: CreateNamespaceFormValues,
owner: string
): CreateNamespacePayload {
const memoryInBytes =
Number(createNamespaceFormValues.resourceQuota.memory) * 10 ** 6;
return {
Name: createNamespaceFormValues.name,
Owner: owner,
ResourceQuota: {
enabled: createNamespaceFormValues.resourceQuota.enabled,
cpu: createNamespaceFormValues.resourceQuota.cpu,
memory: `${memoryInBytes}`,
},
};
}