refactor(containers): migrate resources tab to react [EE-5214] (#10355)

app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx

@@ -0,0 +1,123 @@
+import { Formik } from 'formik';
+import { useMutation } from 'react-query';
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+import { mutationOptions, withError } from '@/react-tools/react-query';
+import { useSystemLimits } from '@/react/docker/proxy/queries/useInfo';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { LoadingButton } from '@@/buttons';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { updateContainer } from '../../queries/useUpdateContainer';
+
+import {
+  ResourceFieldset,
+  resourcesValidation,
+  Values,
+} from './ResourcesFieldset';
+import { toConfigCpu, toConfigMemory } from './memory-utils';
+
+export function EditResourcesForm({
+  redeploy,
+  initialValues,
+  isImageInvalid,
+}: {
+  initialValues: Values;
+  redeploy: (values: Values) => Promise<void>;
+  isImageInvalid: boolean;
+}) {
+  const {
+    params: { from: containerId },
+  } = useCurrentStateAndParams();
+  if (!containerId || typeof containerId !== 'string') {
+    throw new Error('missing parameter "from"');
+  }
+
+  const updateMutation = useMutation(
+    updateLimitsOrCreate,
+    mutationOptions(withError('Failed to update limits'))
+  );
+
+  const environmentId = useEnvironmentId();
+  const systemLimits = useSystemLimits(environmentId);
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={() => resourcesValidation(systemLimits)}
+    >
+      {({ values, errors, setValues, dirty, submitForm }) => (
+        <div className="edit-resources p-5">
+          <ResourceFieldset
+            values={values}
+            onChange={setValues}
+            errors={errors}
+          />
+
+          <div className="form-group">
+            <div className="col-sm-12 flex items-center gap-4">
+              <LoadingButton
+                isLoading={updateMutation.isLoading}
+                disabled={isImageInvalid || !dirty}
+                loadingText="Update in progress..."
+                type="button"
+                onClick={submitForm}
+              >
+                Update Limits
+              </LoadingButton>
+              {settingUnlimitedResources(values) && (
+                <TextTip>
+                  Updating any resource value to &apos;unlimited&apos; will
+                  redeploy this container.
+                </TextTip>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </Formik>
+  );
+
+  function handleSubmit(values: Values) {
+    updateMutation.mutate(values, {
+      onSuccess: () => {
+        notifySuccess('Success', 'Limits updated');
+      },
+    });
+  }
+
+  function settingUnlimitedResources(values: Values) {
+    return (
+      (initialValues.limit > 0 && values.limit === 0) ||
+      (initialValues.reservation > 0 && values.reservation === 0) ||
+      (initialValues.cpu > 0 && values.cpu === 0)
+    );
+  }
+
+  async function updateLimitsOrCreate(values: Values) {
+    if (settingUnlimitedResources(values)) {
+      return redeploy(values);
+    }
+
+    return updateLimits(environmentId, containerId, values);
+  }
+}
+
+async function updateLimits(
+  environmentId: EnvironmentId,
+  containerId: string,
+  values: Values
+) {
+  return updateContainer(environmentId, containerId, {
+    // MemorySwap: must be set
+    // -1: non limits, 0: treated as unset(cause update error).
+    MemorySwap: -1,
+    MemoryReservation: toConfigMemory(values.reservation),
+    Memory: toConfigMemory(values.limit),
+    NanoCpus: toConfigCpu(values.cpu),
+  });
+}