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

app/react/kubernetes/namespaces/components/ResourceQuotaFormSection/ResourceQuotaFormSection.tsx

@@ -0,0 +1,121 @@
+import { FormikErrors } from 'formik';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { FormError } from '@@/form-components/FormError';
+import { FormSection } from '@@/form-components/FormSection';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
+import { Slider } from '@@/form-components/Slider';
+import { SwitchField } from '@@/form-components/SwitchField';
+import { TextTip } from '@@/Tip/TextTip';
+import { SliderWithInput } from '@@/form-components/Slider/SliderWithInput';
+
+import { useClusterResourceLimitsQuery } from '../../CreateView/queries/useResourceLimitsQuery';
+
+import { ResourceQuotaFormValues } from './types';
+
+interface Props {
+  values: ResourceQuotaFormValues;
+  onChange: (value: ResourceQuotaFormValues) => void;
+  enableResourceOverCommit?: boolean;
+  errors?: FormikErrors<ResourceQuotaFormValues>;
+}
+
+export function ResourceQuotaFormSection({
+  values,
+  onChange,
+  errors,
+  enableResourceOverCommit,
+}: Props) {
+  const environmentId = useEnvironmentId();
+  const resourceLimitsQuery = useClusterResourceLimitsQuery(environmentId);
+  const cpuLimit = resourceLimitsQuery.data?.CPU ?? 0;
+  const memoryLimit = resourceLimitsQuery.data?.Memory ?? 0;
+
+  return (
+    <FormSection title="Resource Quota">
+      {values.enabled ? (
+        <TextTip color="blue">
+          A namespace is a logical abstraction of a Kubernetes cluster, to
+          provide for more flexible management of resources. Best practice is to
+          set a quota assignment as this ensures greatest security/stability;
+          alternatively, you can disable assigning a quota for unrestricted
+          access (not recommended).
+        </TextTip>
+      ) : (
+        <TextTip color="blue">
+          A namespace is a logical abstraction of a Kubernetes cluster, to
+          provide for more flexible management of resources. Resource
+          over-commit is disabled, please assign a capped limit of resources to
+          this namespace.
+        </TextTip>
+      )}
+
+      <SwitchField
+        data-cy="k8sNamespaceCreate-resourceAssignmentToggle"
+        disabled={enableResourceOverCommit}
+        label="Resource assignment"
+        labelClass="col-sm-3 col-lg-2"
+        fieldClass="pt-2"
+        checked={values.enabled || !!enableResourceOverCommit}
+        onChange={(enabled) => onChange({ ...values, enabled })}
+      />
+
+      {(values.enabled || !!enableResourceOverCommit) && (
+        <div className="pt-5">
+          <div className="flex flex-row">
+            <FormSectionTitle>Resource Limits</FormSectionTitle>
+          </div>
+          {/* keep the FormError component present, but invisible to avoid layout shift */}
+          <FormError
+            className={typeof errors === 'string' ? 'visible' : 'invisible'}
+          >
+            {/* 'error' keeps the formerror the exact same height while hidden so there is no layout shift */}
+            {errors || 'error'}
+          </FormError>
+          <FormControl
+            className="flex flex-row"
+            label="Memory limit (MB)"
+            inputId="memory-limit"
+          >
+            <div className="col-xs-8">
+              <SliderWithInput
+                value={Number(values.memory) ?? 0}
+                onChange={(value) =>
+                  onChange({ ...values, memory: `${value}` })
+                }
+                max={memoryLimit}
+                step={128}
+                dataCy="k8sNamespaceCreate-memoryLimit"
+                visibleTooltip
+              />
+              {errors?.memory && (
+                <FormError className="pt-1">{errors.memory}</FormError>
+              )}
+            </div>
+          </FormControl>
+
+          <FormControl className="flex flex-row" label="CPU limit">
+            <div className="col-xs-8">
+              <Slider
+                min={0}
+                max={cpuLimit / 1000}
+                step={0.1}
+                value={Number(values.cpu) ?? 0}
+                onChange={(cpu) => {
+                  if (Array.isArray(cpu)) {
+                    return;
+                  }
+                  onChange({ ...values, cpu: cpu.toString() });
+                }}
+                dataCy="k8sNamespaceCreate-cpuLimitSlider"
+                visibleTooltip
+              />
+            </div>
+          </FormControl>
+        </div>
+      )}
+    </FormSection>
+  );
+}

app/react/kubernetes/namespaces/components/ResourceQuotaFormSection/getResourceQuotaValidationSchema.ts

@@ -0,0 +1,45 @@
+import { boolean, string, object, SchemaOf, TestContext } from 'yup';
+
+import { ResourceQuotaFormValues } from './types';
+
+export function getResourceQuotaValidationSchema(
+  memoryLimit: number
+): SchemaOf<ResourceQuotaFormValues> {
+  return object({
+    enabled: boolean().required('Resource quota enabled status is required.'),
+    memory: string().test(
+      'memory-validation',
+      `Value must be between 0 and ${memoryLimit}.`,
+      memoryValidation
+    ),
+    cpu: string().test(
+      'cpu-validation',
+      'CPU limit value is required.',
+      cpuValidation
+    ),
+  }).test(
+    'resource-quota-validation',
+    'At least a single limit must be set.',
+    oneLimitSet
+  );
+
+  function oneLimitSet({
+    enabled,
+    memory,
+    cpu,
+  }: Partial<ResourceQuotaFormValues>) {
+    return !enabled || (Number(memory) ?? 0) > 0 || (Number(cpu) ?? 0) > 0;
+  }
+
+  function memoryValidation(this: TestContext, memoryValue?: string) {
+    const memory = Number(memoryValue) ?? 0;
+    const { enabled } = this.parent;
+    return !enabled || (memory >= 0 && memory <= memoryLimit);
+  }
+
+  function cpuValidation(this: TestContext, cpuValue?: string) {
+    const cpu = Number(cpuValue) ?? 0;
+    const { enabled } = this.parent;
+    return !enabled || cpu >= 0;
+  }
+}

app/react/kubernetes/namespaces/components/ResourceQuotaFormSection/index.ts

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

app/react/kubernetes/namespaces/components/ResourceQuotaFormSection/types.ts

@@ -0,0 +1,18 @@
+/**
+ * @property enabled - Whether resource quota is enabled
+ * @property memory - Memory limit in bytes
+ * @property cpu - CPU limit in cores
+ * @property loadBalancer - Load balancer limit in number of load balancers
+ */
+export type ResourceQuotaFormValues = {
+  enabled: boolean;
+  memory?: string;
+  cpu?: string;
+};
+
+export type ResourceQuotaPayload = {
+  enabled: boolean;
+  memory?: string;
+  cpu?: string;
+  loadBalancerLimit?: string;
+};