feat(namespace): migrate create ns to react [EE-2226] (#10377)

app/react/kubernetes/namespaces/CreateView/CreateNamespaceForm.tsx

@@ -0,0 +1,119 @@
+import { Formik } from 'formik';
+import { useRouter } from '@uirouter/react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { notifySuccess } from '@/portainer/services/notifications';
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { useEnvironmentRegistries } from '@/react/portainer/environments/queries/useEnvironmentRegistries';
+
+import { Widget, WidgetBody } from '@@/Widget';
+
+import { useIngressControllerClassMapQuery } from '../../cluster/ingressClass/useIngressControllerClassMap';
+import { NamespaceInnerForm } from '../components/NamespaceInnerForm';
+import { useNamespacesQuery } from '../queries/useNamespacesQuery';
+
+import {
+  CreateNamespaceFormValues,
+  CreateNamespacePayload,
+  UpdateRegistryPayload,
+} from './types';
+import { useClusterResourceLimitsQuery } from './queries/useResourceLimitsQuery';
+import { getNamespaceValidationSchema } from './CreateNamespaceForm.validation';
+import { transformFormValuesToNamespacePayload } from './utils';
+import { useCreateNamespaceMutation } from './queries/useCreateNamespaceMutation';
+
+export function CreateNamespaceForm() {
+  const router = useRouter();
+  const environmentId = useEnvironmentId();
+  const { data: environment, ...environmentQuery } = useCurrentEnvironment();
+  const resourceLimitsQuery = useClusterResourceLimitsQuery(environmentId);
+  const { data: registries } = useEnvironmentRegistries(environmentId, {
+    hideDefault: true,
+  });
+  // for namespace create, show ingress classes that are allowed in the current environment.
+  // the ingressClasses show the none option, so we don't need to add it here.
+  const { data: ingressClasses } = useIngressControllerClassMapQuery({
+    environmentId,
+    allowedOnly: true,
+  });
+
+  const { data: namespaces } = useNamespacesQuery(environmentId);
+  const namespaceNames = Object.keys(namespaces || {});
+
+  const createNamespaceMutation = useCreateNamespaceMutation(environmentId);
+
+  if (resourceLimitsQuery.isLoading || environmentQuery.isLoading) {
+    return null;
+  }
+
+  const memoryLimit = resourceLimitsQuery.data?.Memory ?? 0;
+
+  const initialValues: CreateNamespaceFormValues = {
+    name: '',
+    ingressClasses: ingressClasses ?? [],
+    resourceQuota: {
+      enabled: false,
+      memory: '0',
+      cpu: '0',
+    },
+    registries: [],
+  };
+
+  return (
+    <Widget>
+      <WidgetBody>
+        <Formik
+          enableReinitialize
+          initialValues={initialValues}
+          onSubmit={handleSubmit}
+          validateOnMount
+          validationSchema={getNamespaceValidationSchema(
+            memoryLimit,
+            namespaceNames
+          )}
+        >
+          {NamespaceInnerForm}
+        </Formik>
+      </WidgetBody>
+    </Widget>
+  );
+
+  function handleSubmit(values: CreateNamespaceFormValues) {
+    const createNamespacePayload: CreateNamespacePayload =
+      transformFormValuesToNamespacePayload(values);
+    const updateRegistriesPayload: UpdateRegistryPayload[] =
+      values.registries.flatMap((registryFormValues) => {
+        // find the matching registry from the cluster registries
+        const selectedRegistry = registries?.find(
+          (registry) => registryFormValues.Id === registry.Id
+        );
+        if (!selectedRegistry) {
+          return [];
+        }
+        const envNamespacesWithAccess =
+          selectedRegistry.RegistryAccesses[`${environmentId}`]?.Namespaces ||
+          [];
+        return {
+          Id: selectedRegistry.Id,
+          Namespaces: [...envNamespacesWithAccess, values.name],
+        };
+      });
+
+    createNamespaceMutation.mutate(
+      {
+        createNamespacePayload,
+        updateRegistriesPayload,
+        namespaceIngressControllerPayload: values.ingressClasses,
+      },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Success',
+            `Namespace '${values.name}' created successfully`
+          );
+          router.stateService.go('kubernetes.resourcePools');
+        },
+      }
+    );
+  }
+}

app/react/kubernetes/namespaces/CreateView/CreateNamespaceForm.validation.tsx

@@ -0,0 +1,27 @@
+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,
+  });
+}

app/react/kubernetes/namespaces/CreateView/CreateNamespaceRegistriesSelector.tsx

@@ -1,32 +0,0 @@
-import { Registry } from '@/react/portainer/registries/types';
-
-import { Select } from '@@/form-components/ReactSelect';
-
-interface Props {
-  value: Registry[];
-  onChange(value: readonly Registry[]): void;
-  options: Registry[];
-  inputId?: string;
-}
-
-export function CreateNamespaceRegistriesSelector({
-  value,
-  onChange,
-  options,
-  inputId,
-}: Props) {
-  return (
-    <Select
-      isMulti
-      getOptionLabel={(option) => option.Name}
-      getOptionValue={(option) => String(option.Id)}
-      options={options}
-      value={value}
-      closeMenuOnSelect={false}
-      onChange={onChange}
-      inputId={inputId}
-      data-cy="namespaceCreate-registrySelect"
-      placeholder="Select one or more registry"
-    />
-  );
-}

app/react/kubernetes/namespaces/CreateView/CreateNamespaceView.tsx

@@ -0,0 +1,41 @@
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
+
+import { PageHeader } from '@@/PageHeader';
+
+import { CreateNamespaceForm } from './CreateNamespaceForm';
+
+export function CreateNamespaceView() {
+  const environmentId = useEnvironmentId();
+
+  useUnauthorizedRedirect(
+    {
+      authorizations: 'K8sResourcePoolsW',
+      forceEnvironmentId: environmentId,
+      adminOnlyCE: !isBE,
+    },
+    {
+      to: 'kubernetes.resourcePools',
+      params: {
+        id: environmentId,
+      },
+    }
+  );
+
+  return (
+    <div className="form-horizontal">
+      <PageHeader
+        title="Create a namespace"
+        breadcrumbs="Create a namespace"
+        reload
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <CreateNamespaceForm />
+        </div>
+      </div>
+    </div>
+  );
+}

app/react/kubernetes/namespaces/CreateView/index.tsx

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

app/react/kubernetes/namespaces/CreateView/queries/useCreateNamespaceMutation.ts

@@ -0,0 +1,83 @@
+import { useMutation } from '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;
+}

app/react/kubernetes/namespaces/CreateView/queries/useResourceLimitsQuery.ts

@@ -0,0 +1,37 @@
+import { useQuery } from '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');
+  }
+}

app/react/kubernetes/namespaces/CreateView/types.ts

@@ -0,0 +1,24 @@
+import { Registry } from '@/react/portainer/registries/types';
+
+import { IngressControllerClassMap } from '../../cluster/ingressClass/types';
+import {
+  ResourceQuotaFormValues,
+  ResourceQuotaPayload,
+} from '../components/ResourceQuotaFormSection/types';
+
+export type CreateNamespaceFormValues = {
+  name: string;
+  resourceQuota: ResourceQuotaFormValues;
+  ingressClasses: IngressControllerClassMap[];
+  registries: Registry[];
+};
+
+export type CreateNamespacePayload = {
+  Name: string;
+  ResourceQuota: ResourceQuotaPayload;
+};
+
+export type UpdateRegistryPayload = {
+  Id: number;
+  Namespaces: string[];
+};

app/react/kubernetes/namespaces/CreateView/utils.ts

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