refactor(docker/services): migrate scale form to react [EE-6057] (#10208)

app/react/docker/containers/StatsView/ProcessesDatatable.tsx

@@ -35,9 +35,9 @@ export function ProcessesDatatable({
       headers
         ? headers.map(
             (header) =>
-              ({ header, accessorKey: header } satisfies ColumnDef<{
+              ({ header, accessorKey: header }) satisfies ColumnDef<{
                 [k: string]: string;
-              }>)
+              }>
           )
         : [],
     [headers]

app/react/docker/proxy/queries/query-keys.ts

@@ -0,0 +1,6 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export const queryKeys = {
+  base: (environmentId: EnvironmentId) =>
+    [environmentId, 'docker', 'proxy'] as const,
+};

app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx

@@ -0,0 +1,91 @@
+import { Formik, Form } from 'formik';
+import { X, CheckSquare } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { useUpdateServiceMutation } from '@/react/docker/services/queries/useUpdateServiceMutation';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { convertServiceToConfig } from '@/react/docker/services/common/convertServiceToConfig';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { Button, LoadingButton } from '@@/buttons';
+
+export function ScaleForm({
+  onClose,
+  service,
+}: {
+  onClose: () => void;
+  service: ServiceViewModel;
+}) {
+  const environmentId = useEnvironmentId();
+  const mutation = useUpdateServiceMutation();
+  const router = useRouter();
+  return (
+    <Formik
+      initialValues={{ replicas: service.Replicas || 0 }}
+      onSubmit={handleSubmit}
+    >
+      {({ values, setFieldValue }) => (
+        <Form>
+          <input
+            className="input-sm w-20"
+            type="number"
+            min={0}
+            step={1}
+            value={values.replicas}
+            onKeyUp={(event) => {
+              if (event.key === 'Escape') {
+                onClose();
+              }
+            }}
+            onChange={(event) => {
+              setFieldValue('replicas', event.target.valueAsNumber);
+            }}
+            // disabled because it makes sense to auto focus once the form is mounted
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+          />
+          <Button color="none" icon={X} onClick={() => onClose()} />
+          <LoadingButton
+            isLoading={mutation.isLoading}
+            loadingText="Scaling..."
+            color="none"
+            icon={CheckSquare}
+            type="submit"
+          />
+        </Form>
+      )}
+    </Formik>
+  );
+
+  function handleSubmit({ replicas }: { replicas: number }) {
+    const config = convertServiceToConfig(service.Model);
+    mutation.mutate(
+      {
+        serviceId: service.Id,
+        config: {
+          ...config,
+          Mode: {
+            ...config.Mode,
+            Replicated: {
+              ...config.Mode?.Replicated,
+              Replicas: replicas,
+            },
+          },
+        },
+        environmentId,
+        version: service.Version || 0,
+      },
+      {
+        onSuccess() {
+          onClose();
+          notifySuccess(
+            'Service successfully scaled',
+            `New replica count: ${replicas}`
+          );
+          router.stateService.reload();
+        },
+      }
+    );
+  }
+}

app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton.tsx

@@ -0,0 +1,25 @@
+import { Minimize2 } from 'lucide-react';
+import { useState } from 'react';
+
+import { ServiceViewModel } from '@/docker/models/service';
+import { Authorized } from '@/react/hooks/useUser';
+
+import { Button } from '@@/buttons';
+
+import { ScaleForm } from './ScaleForm';
+
+export function ScaleServiceButton({ service }: { service: ServiceViewModel }) {
+  const [isEdit, setIsEdit] = useState(false);
+
+  if (!isEdit) {
+    return (
+      <Authorized authorizations="DockerServiceUpdate">
+        <Button color="none" icon={Minimize2} onClick={() => setIsEdit(true)}>
+          Scale
+        </Button>
+      </Authorized>
+    );
+  }
+
+  return <ScaleForm onClose={() => setIsEdit(false)} service={service} />;
+}

app/react/docker/services/axios/urlBuilder.ts

@@ -0,0 +1,21 @@
+import { Service } from 'docker-types/generated/1.41';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export function urlBuilder(
+  endpointId: EnvironmentId,
+  id?: Service['ID'],
+  action?: string
+) {
+  let url = `/endpoints/${endpointId}/docker/services`;
+
+  if (id) {
+    url += `/${id}`;
+  }
+
+  if (action) {
+    url += `/${action}`;
+  }
+
+  return url;
+}

app/react/docker/services/common/convertServiceToConfig.ts

@@ -0,0 +1,15 @@
+import { Service } from 'docker-types/generated/1.41';
+
+import { ServiceUpdateConfig } from '../queries/useUpdateServiceMutation';
+
+export function convertServiceToConfig(service: Service): ServiceUpdateConfig {
+  return {
+    Name: service.Spec?.Name || '',
+    Labels: service.Spec?.Labels || {},
+    TaskTemplate: service.Spec?.TaskTemplate || {},
+    Mode: service.Spec?.Mode || {},
+    UpdateConfig: service.Spec?.UpdateConfig || {},
+    Networks: service.Spec?.Networks || [],
+    EndpointSpec: service.Spec?.EndpointSpec || {},
+  };
+}

app/react/docker/services/queries/query-keys.ts

@@ -0,0 +1,11 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys as dockerQueryKeys } from '../../queries/utils';
+
+export const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    [...dockerQueryKeys.root(environmentId), 'services'] as const,
+
+  service: (environmentId: EnvironmentId, id: string) =>
+    [...queryKeys.list(environmentId), id] as const,
+};

app/react/docker/services/queries/useUpdateServiceMutation.ts

@@ -0,0 +1,80 @@
+import {
+  TaskSpec,
+  ServiceSpec,
+  ServiceUpdateResponse,
+} from 'docker-types/generated/1.41';
+import { useMutation, useQueryClient } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { mutationOptions, withError } from '@/react-tools/react-query';
+
+import { encodeRegistryCredentials } from '../../images/queries/encodeRegistryCredentials';
+import { urlBuilder } from '../axios/urlBuilder';
+
+import { queryKeys } from './query-keys';
+
+export function useUpdateServiceMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    updateService,
+    mutationOptions(
+      {
+        onSuccess(data, { environmentId }) {
+          return queryClient.invalidateQueries(queryKeys.list(environmentId));
+        },
+      },
+      withError('Unable to update service')
+    )
+  );
+}
+
+async function updateService({
+  environmentId,
+  serviceId,
+  config,
+  rollback,
+  version,
+  registryId,
+}: {
+  environmentId: EnvironmentId;
+  serviceId: string;
+  config: ServiceUpdateConfig;
+  rollback?: 'previous';
+  version: number;
+  registryId?: number;
+}) {
+  try {
+    const { data } = await axios.post<ServiceUpdateResponse>(
+      urlBuilder(environmentId, serviceId, 'update'),
+      config,
+      {
+        params: {
+          rollback,
+          version,
+        },
+        ...(registryId
+          ? {
+              headers: {
+                'X-Registry-Id': encodeRegistryCredentials(registryId),
+              },
+            }
+          : {}),
+      }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to update service');
+  }
+}
+
+export interface ServiceUpdateConfig {
+  Name: string;
+  Labels: Record<string, string>;
+  TaskTemplate: TaskSpec;
+  Mode: ServiceSpec['Mode'];
+  UpdateConfig: ServiceSpec['UpdateConfig'];
+  Networks: ServiceSpec['Networks'];
+  EndpointSpec: ServiceSpec['EndpointSpec'];
+}