feat(app): limit the docker API version supported by the frontend (#12295)

app/react/docker/containers/CreateView/BaseForm/toViewModel.ts

@@ -3,13 +3,13 @@ import { ResourceControlOwnership } from '@/react/portainer/access-control/types
 import { UserId } from '@/portainer/users/types';
 import { getDefaultImageConfig } from '@/react/portainer/registries/utils/getImageConfig';
 
-import { ContainerResponse } from '../../queries/container';
+import { ContainerDetailsResponse } from '../../queries/useContainer';
 
 import { toViewModel as toPortsMappingViewModel } from './PortsMappingField.viewModel';
 import { Values } from './BaseForm';
 
 export function toViewModel(
-  config: ContainerResponse,
+  config: ContainerDetailsResponse,
   isPureAdmin: boolean,
   currentUserId: UserId,
   nodeName: string,

app/react/docker/containers/CreateView/CapabilitiesTab/toViewModel.ts

@@ -1,9 +1,9 @@
-import { ContainerJSON } from '@/react/docker/containers/queries/container';
+import { ContainerDetailsJSON } from '@/react/docker/containers/queries/useContainer';
 
 import { capabilities } from './types';
 import { Values } from './CapabilitiesTab';
 
-export function toViewModel(config: ContainerJSON): Values {
+export function toViewModel(config: ContainerDetailsJSON): Values {
   const { CapAdd, CapDrop } = getDefaults(config);
 
   const missingCaps = capabilities
@@ -15,7 +15,7 @@ export function toViewModel(config: ContainerJSON): Values {
 
   return [...CapAdd, ...missingCaps];
 
-  function getDefaults(config: ContainerJSON) {
+  function getDefaults(config: ContainerDetailsJSON) {
     return {
       CapAdd: config.HostConfig?.CapAdd || [],
       CapDrop: config.HostConfig?.CapDrop || [],

app/react/docker/containers/CreateView/CommandsTab/toViewModel.tsx

@@ -2,7 +2,7 @@ import { HostConfig } from 'docker-types/generated/1.41';
 
 import { commandArrayToString } from '@/docker/helpers/containers';
 
-import { ContainerJSON } from '../../queries/container';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
 
 import { ConsoleConfig, ConsoleSetting } from './ConsoleSettings';
 import { LogConfig } from './LoggerConfig';
@@ -19,7 +19,7 @@ export function getDefaultViewModel(): Values {
   };
 }
 
-export function toViewModel(config: ContainerJSON): Values {
+export function toViewModel(config: ContainerDetailsJSON): Values {
   if (!config.Config) {
     return getDefaultViewModel();
   }

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

@@ -19,7 +19,7 @@ import { InformationPanel } from '@@/InformationPanel';
 import { TextTip } from '@@/Tip/TextTip';
 import { HelpLink } from '@@/HelpLink';
 
-import { useContainers } from '../queries/containers';
+import { useContainers } from '../queries/useContainers';
 import { useSystemLimits, useIsWindows } from '../../proxy/queries/useInfo';
 
 import { useCreateOrReplaceMutation } from './useCreateMutation';
@@ -149,7 +149,21 @@ function CreateForm() {
     const config = toRequest(values, registry, hideCapabilities);
 
     return mutation.mutate(
-      { config, environment, values, registry, oldContainer, extraNetworks },
+      {
+        config,
+        environment,
+        values: {
+          accessControl: values.accessControl,
+          imageName: values.image.image,
+          name: values.name,
+          alwaysPull: values.alwaysPull,
+          enableWebhook: values.enableWebhook,
+          nodeName: values.nodeName,
+        },
+        registry,
+        oldContainer,
+        extraNetworks,
+      },
       {
         onSuccess() {
           sendAnalytics(values, registry);

app/react/docker/containers/CreateView/EnvVarsTab/toViewModel.ts

@@ -1,11 +1,11 @@
 import { parseArrayOfStrings } from '@@/form-components/EnvironmentVariablesFieldset/utils';
 
-import { ContainerJSON } from '../../queries/container';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
 
 export function getDefaultViewModel() {
   return [];
 }
 
-export function toViewModel(container: ContainerJSON) {
+export function toViewModel(container: ContainerDetailsJSON) {
   return parseArrayOfStrings(container.Config?.Env);
 }

app/react/docker/containers/CreateView/LabelsTab/toViewModel.ts

@@ -1,8 +1,8 @@
-import { ContainerJSON } from '../../queries/container';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
 
 import { Values } from './types';
 
-export function toViewModel(config: ContainerJSON): Values {
+export function toViewModel(config: ContainerDetailsJSON): Values {
   if (!config || !config.Config || !config.Config.Labels) {
     return [];
   }

app/react/docker/containers/CreateView/NetworkTab/ContainerSelector.tsx

@@ -2,7 +2,7 @@ import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
 
-import { useContainers } from '../../queries/containers';
+import { useContainers } from '../../queries/useContainers';
 import { ContainerStatus } from '../../types';
 
 export function ContainerSelector({

app/react/docker/containers/CreateView/NetworkTab/toViewModel.ts

@@ -1,7 +1,7 @@
 import { DockerNetwork } from '@/react/docker/networks/types';
 
-import { ContainerJSON } from '../../queries/container';
-import { DockerContainer } from '../../types';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
+import { ContainerListViewModel } from '../../types';
 
 import { CONTAINER_MODE, Values } from './types';
 
@@ -22,9 +22,9 @@ export function getDefaultViewModel(isWindows: boolean) {
 }
 
 export function toViewModel(
-  config: ContainerJSON,
+  config: ContainerDetailsJSON,
   networks: Array<DockerNetwork>,
-  runningContainers: Array<DockerContainer> = []
+  runningContainers: Array<ContainerListViewModel> = []
 ): Values {
   const dns = config.HostConfig?.Dns;
   const [primaryDns = '', secondaryDns = ''] = dns || [];
@@ -62,9 +62,9 @@ export function toViewModel(
 }
 
 function getNetworkMode(
-  config: ContainerJSON,
+  config: ContainerDetailsJSON,
   networks: Array<DockerNetwork>,
-  runningContainers: Array<DockerContainer> = []
+  runningContainers: Array<ContainerListViewModel> = []
 ) {
   let networkMode = config.HostConfig?.NetworkMode || '';
   if (!networkMode) {

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

@@ -4,7 +4,7 @@ import { useCurrentStateAndParams } from '@uirouter/react';
 import { useState } from 'react';
 import { FormikHelpers } from 'formik/dist/types';
 
-import { invalidateContainer } from '@/react/docker/containers/queries/container';
+import { invalidateContainer } from '@/react/docker/containers/queries/useContainer';
 import { notifySuccess } from '@/portainer/services/notifications';
 import { mutationOptions, withError } from '@/react-tools/react-query';
 import { useSystemLimits } from '@/react/docker/proxy/queries/useInfo';

app/react/docker/containers/CreateView/ResourcesTab/toViewModel.ts

@@ -1,11 +1,11 @@
-import { ContainerJSON } from '../../queries/container';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
 
 import { toDevicesViewModel } from './DevicesField';
 import { gpuFieldsetUtils } from './GpuFieldset';
 import { toViewModelCpu, toViewModelMemory } from './memory-utils';
 import { Values } from './ResourcesTab';
 
-export function toViewModel(config: ContainerJSON): Values {
+export function toViewModel(config: ContainerDetailsJSON): Values {
   return {
     runtime: {
       privileged: config.HostConfig?.Privileged || false,

app/react/docker/containers/CreateView/RestartPolicyTab/toViewModel.ts

@@ -1,8 +1,8 @@
-import { ContainerJSON } from '../../queries/container';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
 
 import { RestartPolicy } from './types';
 
-export function toViewModel(config: ContainerJSON): RestartPolicy {
+export function toViewModel(config: ContainerDetailsJSON): RestartPolicy {
   switch (config.HostConfig?.RestartPolicy?.Name) {
     case 'always':
       return RestartPolicy.Always;

app/react/docker/containers/CreateView/VolumesTab/toViewModel.ts

@@ -1,8 +1,8 @@
-import { ContainerJSON } from '../../queries/container';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
 
 import { VolumeType, Values } from './types';
 
-export function toViewModel(config: ContainerJSON): Values {
+export function toViewModel(config: ContainerDetailsJSON): Values {
   return Object.values(config.Mounts || {}).map((mount) => ({
     type: (mount.Type || 'volume') as VolumeType,
     name: mount.Name || mount.Source || '',

app/react/docker/containers/CreateView/useCreateMutation.tsx

@@ -1,5 +1,4 @@
 import { useMutation, useQueryClient } from 'react-query';
-import { RawAxiosRequestHeaders } from 'axios';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import {
@@ -32,12 +31,13 @@ import {
   renameContainer,
   startContainer,
   stopContainer,
-  urlBuilder,
 } from '../containers.service';
 import { PortainerResponse } from '../../types';
-import { connectContainer } from '../../networks/queries/useConnectContainer';
-import { DockerContainer } from '../types';
+import { connectContainer } from '../../networks/queries/useConnectContainerMutation';
+import { ContainerListViewModel } from '../types';
 import { queryKeys } from '../queries/query-keys';
+import { withAgentTargetHeader } from '../../proxy/queries/utils';
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
 
 import { CreateContainerRequest } from './types';
 import { Values } from './useInitialValues';
@@ -62,13 +62,20 @@ export function useCreateOrReplaceMutation() {
 
 interface CreateOptions {
   config: CreateContainerRequest;
-  values: Values;
+  values: {
+    name: Values['name'];
+    imageName: string;
+    accessControl: Values['accessControl'];
+    nodeName?: Values['nodeName'];
+    alwaysPull?: Values['alwaysPull'];
+    enableWebhook?: Values['enableWebhook'];
+  };
   registry?: Registry;
   environment: Environment;
 }
 
 interface ReplaceOptions extends CreateOptions {
-  oldContainer: DockerContainer;
+  oldContainer: ContainerListViewModel;
   extraNetworks: Array<ExtraNetwork>;
 }
 
@@ -90,14 +97,14 @@ async function create({
 }: CreateOptions) {
   await pullImageIfNeeded(
     environment.Id,
+    values.alwaysPull || false,
+    values.imageName,
     values.nodeName,
-    values.alwaysPull,
-    values.image.image,
     registry
   );
 
   const containerResponse = await createAndStart(
-    environment,
+    environment.Id,
     config,
     values.name,
     values.nodeName
@@ -106,8 +113,8 @@ async function create({
   await applyContainerSettings(
     containerResponse.Id,
     environment,
-    values.enableWebhook,
     values.accessControl,
+    values.enableWebhook,
     containerResponse.Portainer?.ResourceControl,
     registry
   );
@@ -123,37 +130,38 @@ async function replace({
 }: ReplaceOptions) {
   await pullImageIfNeeded(
     environment.Id,
+    values.alwaysPull || false,
+    values.imageName,
     values.nodeName,
-    values.alwaysPull,
-    values.image.image,
     registry
   );
 
   const containerResponse = await renameAndCreate(
-    environment,
-    values,
+    environment.Id,
+    values.name,
     oldContainer,
-    config
+    config,
+    values.nodeName
   );
 
   await applyContainerSettings(
     containerResponse.Id,
     environment,
-    values.enableWebhook,
     values.accessControl,
+    values.enableWebhook,
     containerResponse.Portainer?.ResourceControl,
     registry
   );
 
   await connectToExtraNetworks(
     environment.Id,
-    values.nodeName,
     containerResponse.Id,
-    extraNetworks
+    extraNetworks,
+    values.nodeName
   );
 
   await removeContainer(environment.Id, oldContainer.Id, {
-    nodeName: values.nodeName,
+    nodeName: oldContainer.NodeName,
   });
 }
 
@@ -162,33 +170,33 @@ async function replace({
  * on any failure, it will rename the old container to its original name
  */
 async function renameAndCreate(
-  environment: Environment,
-  values: Values,
-  oldContainer: DockerContainer,
-  config: CreateContainerRequest
+  environmentId: EnvironmentId,
+  name: string,
+  oldContainer: ContainerListViewModel,
+  config: CreateContainerRequest,
+  nodeName?: string
 ) {
   let renamed = false;
   try {
-    await stopContainerIfNeeded(environment.Id, values.nodeName, oldContainer);
+    await stopContainerIfNeeded(
+      environmentId,
+      oldContainer,
+      oldContainer.NodeName
+    );
 
     await renameContainer(
-      environment.Id,
+      environmentId,
       oldContainer.Id,
       `${oldContainer.Names[0]}-old`,
-      { nodeName: values.nodeName }
+      { nodeName: oldContainer.NodeName }
     );
     renamed = true;
 
-    return await createAndStart(
-      environment,
-      config,
-      values.name,
-      values.nodeName
-    );
+    return await createAndStart(environmentId, config, name, nodeName);
   } catch (e) {
     if (renamed) {
-      await renameContainer(environment.Id, oldContainer.Id, values.name, {
-        nodeName: values.nodeName,
+      await renameContainer(environmentId, oldContainer.Id, name, {
+        nodeName: oldContainer.NodeName,
       });
     }
     throw e;
@@ -201,8 +209,8 @@ async function renameAndCreate(
 async function applyContainerSettings(
   containerId: string,
   environment: Environment,
-  enableWebhook: boolean,
   accessControl: AccessControlFormData,
+  enableWebhook?: boolean,
   resourceControl?: ResourceControlResponse,
   registry?: Registry
 ) {
@@ -224,15 +232,15 @@ async function applyContainerSettings(
  * on failure, it will remove the new container
  */
 async function createAndStart(
-  environment: Environment,
+  environmentId: EnvironmentId,
   config: CreateContainerRequest,
-  name: string,
-  nodeName: string
+  name?: string,
+  nodeName?: string
 ) {
   let containerId = '';
   try {
     const containerResponse = await createContainer(
-      environment.Id,
+      environmentId,
       config,
       name,
       {
@@ -242,11 +250,11 @@ async function createAndStart(
 
     containerId = containerResponse.Id;
 
-    await startContainer(environment.Id, containerResponse.Id, { nodeName });
+    await startContainer(environmentId, containerResponse.Id, { nodeName });
     return containerResponse;
   } catch (e) {
     if (containerId) {
-      await removeContainer(environment.Id, containerId, {
+      await removeContainer(environmentId, containerId, {
         nodeName,
       });
     }
@@ -257,9 +265,9 @@ async function createAndStart(
 
 async function pullImageIfNeeded(
   environmentId: EnvironmentId,
-  nodeName: string,
   pull: boolean,
   image: string,
+  nodeName?: string,
   registry?: Registry
 ) {
   if (!pull) {
@@ -282,16 +290,10 @@ async function createContainer(
   { nodeName }: { nodeName?: string } = {}
 ) {
   try {
-    const headers: RawAxiosRequestHeaders = {};
-
-    if (nodeName) {
-      headers['X-PortainerAgent-Target'] = nodeName;
-    }
-
     const { data } = await axios.post<
       PortainerResponse<{ Id: string; Warnings: Array<string> }>
-    >(urlBuilder(environmentId, undefined, 'create'), config, {
-      headers,
+    >(buildDockerProxyUrl(environmentId, 'containers', 'create'), config, {
+      headers: { ...withAgentTargetHeader(nodeName) },
       params: { name },
     });
 
@@ -322,9 +324,9 @@ async function createContainerWebhook(
 
 function connectToExtraNetworks(
   environmentId: EnvironmentId,
-  nodeName: string,
   containerId: string,
-  extraNetworks: Array<ExtraNetwork>
+  extraNetworks: Array<ExtraNetwork>,
+  nodeName?: string
 ) {
   if (!extraNetworks) {
     return null;
@@ -345,8 +347,8 @@ function connectToExtraNetworks(
 
 function stopContainerIfNeeded(
   environmentId: EnvironmentId,
-  nodeName: string,
-  container: DockerContainer
+  container: ContainerListViewModel,
+  nodeName?: string
 ) {
   if (container.State !== 'running' || !container.Id) {
     return null;

app/react/docker/containers/CreateView/useInitialValues.ts

@@ -43,8 +43,8 @@ import { useEnvironmentRegistries } from '@/react/portainer/environments/queries
 import { EnvVarValues } from '@@/form-components/EnvironmentVariablesFieldset';
 
 import { useNetworksForSelector } from '../components/NetworkSelector';
-import { useContainers } from '../queries/containers';
-import { useContainer } from '../queries/container';
+import { useContainers } from '../queries/useContainers';
+import { useContainer } from '../queries/useContainer';
 
 export interface Values extends BaseFormValues {
   commands: CommandsTabValues;

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx

@@ -3,7 +3,7 @@ import { SchemaOf, object, string } from 'yup';
 import { useRouter } from '@uirouter/react';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
-import { useConnectContainerMutation } from '@/react/docker/networks/queries/useConnectContainer';
+import { useConnectContainerMutation } from '@/react/docker/networks/queries/useConnectContainerMutation';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { FormControl } from '@@/form-components/FormControl';

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx

@@ -7,7 +7,7 @@ import { useTableState } from '@@/datatables/useTableState';
 import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
 
-import { DockerContainer } from '../../types';
+import { ContainerListViewModel } from '../../types';
 
 import { TableNetwork } from './types';
 import { buildColumns } from './columns';
@@ -22,7 +22,7 @@ export function ContainerNetworksDatatable({
   nodeName,
 }: {
   dataset: NetworkSettings['Networks'];
-  container: DockerContainer;
+  container: ContainerListViewModel;
   nodeName?: string;
 }) {
   const tableState = useTableState(store, storageKey);

app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx

@@ -2,8 +2,9 @@ import { CellContext } from '@tanstack/react-table';
 import { useRouter } from '@uirouter/react';
 
 import { Authorized } from '@/react/hooks/useUser';
-import { useDisconnectContainer } from '@/react/docker/networks/queries';
+import { useDisconnectContainer } from '@/react/docker/networks/queries/useDisconnectContainerMutation';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { notifySuccess } from '@/portainer/services/notifications';
 
 import { LoadingButton } from '@@/buttons';
 
@@ -17,19 +18,25 @@ export function buildActions({ nodeName }: { nodeName?: string } = {}) {
   });
 
   function Cell({
-    row,
+    row: {
+      original: { id: networkId },
+    },
     table: {
       options: { meta },
     },
   }: CellContext<TableNetwork, unknown>) {
     const router = useRouter();
     const environmentId = useEnvironmentId();
-    const disconnectMutation = useDisconnectContainer();
+    const disconnectMutation = useDisconnectContainer({
+      environmentId,
+      networkId,
+    });
 
     return (
       <Authorized authorizations="DockerNetworkDisconnect">
         <LoadingButton
           color="dangerlight"
+          data-cy="disconnect-network-button"
           isLoading={disconnectMutation.isLoading}
           loadingText="Leaving network..."
           type="button"
@@ -47,13 +54,12 @@ export function buildActions({ nodeName }: { nodeName?: string } = {}) {
 
       disconnectMutation.mutate(
         {
-          environmentId,
-          networkId: row.original.id,
           containerId: meta.containerId,
           nodeName,
         },
         {
           onSuccess() {
+            notifySuccess('Container successfully disconnected', networkId);
             router.stateService.reload();
           },
         }

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx

@@ -1,7 +1,7 @@
 import { Box } from 'lucide-react';
 
+import { ContainerListViewModel } from '@/react/docker/containers/types';
 import { Environment } from '@/react/portainer/environments/types';
-import type { DockerContainer } from '@/react/docker/containers/types';
 import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
 import { Table, Datatable } from '@@/datatables';
@@ -16,7 +16,7 @@ import {
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 import { useTableState } from '@@/datatables/useTableState';
 
-import { useContainers } from '../../queries/containers';
+import { useContainers } from '../../queries/useContainers';
 
 import { createStore } from './datatable-store';
 import { ContainersDatatableSettings } from './ContainersDatatableSettings';
@@ -72,7 +72,7 @@ export function ContainersDatatable({
           initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
           renderTableSettings={(tableInstance) => (
             <>
-              <ColumnVisibilityMenu<DockerContainer>
+              <ColumnVisibilityMenu<ContainerListViewModel>
                 table={tableInstance}
                 onChange={(hiddenColumns) => {
                   tableState.setHiddenColumns(hiddenColumns);

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx

@@ -16,7 +16,7 @@ import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request
 import {
   ContainerId,
   ContainerStatus,
-  DockerContainer,
+  ContainerListViewModel,
 } from '@/react/docker/containers/types';
 import {
   killContainer,
@@ -38,7 +38,7 @@ type ContainerServiceAction = (
 ) => Promise<void>;
 
 interface Props {
-  selectedItems: DockerContainer[];
+  selectedItems: ContainerListViewModel[];
   isAddActionVisible: boolean;
   endpointId: EnvironmentId;
 }
@@ -175,7 +175,7 @@ export function ContainersDatatableActions({
     </div>
   );
 
-  function onStartClick(selectedItems: DockerContainer[]) {
+  function onStartClick(selectedItems: ContainerListViewModel[]) {
     const successMessage = 'Container successfully started';
     const errorMessage = 'Unable to start container';
     executeActionOnContainerList(
@@ -186,7 +186,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  function onStopClick(selectedItems: DockerContainer[]) {
+  function onStopClick(selectedItems: ContainerListViewModel[]) {
     const successMessage = 'Container successfully stopped';
     const errorMessage = 'Unable to stop container';
     executeActionOnContainerList(
@@ -197,7 +197,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  function onRestartClick(selectedItems: DockerContainer[]) {
+  function onRestartClick(selectedItems: ContainerListViewModel[]) {
     const successMessage = 'Container successfully restarted';
     const errorMessage = 'Unable to restart container';
     executeActionOnContainerList(
@@ -208,7 +208,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  function onKillClick(selectedItems: DockerContainer[]) {
+  function onKillClick(selectedItems: ContainerListViewModel[]) {
     const successMessage = 'Container successfully killed';
     const errorMessage = 'Unable to kill container';
     executeActionOnContainerList(
@@ -219,7 +219,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  function onPauseClick(selectedItems: DockerContainer[]) {
+  function onPauseClick(selectedItems: ContainerListViewModel[]) {
     const successMessage = 'Container successfully paused';
     const errorMessage = 'Unable to pause container';
     executeActionOnContainerList(
@@ -230,7 +230,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  function onResumeClick(selectedItems: DockerContainer[]) {
+  function onResumeClick(selectedItems: ContainerListViewModel[]) {
     const successMessage = 'Container successfully resumed';
     const errorMessage = 'Unable to resume container';
     executeActionOnContainerList(
@@ -241,7 +241,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  async function onRemoveClick(selectedItems: DockerContainer[]) {
+  async function onRemoveClick(selectedItems: ContainerListViewModel[]) {
     const isOneContainerRunning = selectedItems.some(
       (container) => container.State === 'running'
     );
@@ -259,7 +259,7 @@ export function ContainersDatatableActions({
   }
 
   async function executeActionOnContainerList(
-    containers: DockerContainer[],
+    containers: ContainerListViewModel[],
     action: ContainerServiceAction,
     successMessage: string,
     errorMessage: string
@@ -283,7 +283,7 @@ export function ContainersDatatableActions({
   }
 
   async function removeSelectedContainers(
-    containers: DockerContainer[],
+    containers: ContainerListViewModel[],
     removeVolumes: boolean
   ) {
     for (let i = 0; i < containers.length; i += 1) {

app/react/docker/containers/ListView/ContainersDatatable/columns/gpus.tsx

@@ -1,6 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
+import type { ContainerListViewModel } from '@/react/docker/containers/types';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useContainerGpus } from '@/react/docker/containers/queries/gpus';
 
@@ -14,7 +14,7 @@ export const gpus = columnHelper.display({
 
 function GpusCell({
   row: { original: container },
-}: CellContext<DockerContainer, unknown>) {
+}: CellContext<ContainerListViewModel, unknown>) {
   const containerId = container.Id;
   const environmentId = useEnvironmentId();
   const gpusQuery = useContainerGpus(environmentId, containerId);

app/react/docker/containers/ListView/ContainersDatatable/columns/helper.ts

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { DockerContainer } from '../../../types';
+import { ContainerListViewModel } from '../../../types';
 
-export const columnHelper = createColumnHelper<DockerContainer>();
+export const columnHelper = createColumnHelper<ContainerListViewModel>();

app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx

@@ -1,7 +1,7 @@
 import { CellContext } from '@tanstack/react-table';
 import { useSref } from '@uirouter/react';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
+import type { ContainerListViewModel } from '@/react/docker/containers/types';
 
 import { columnHelper } from './helper';
 
@@ -11,7 +11,7 @@ export const image = columnHelper.accessor('Image', {
   cell: ImageCell,
 });
 
-function ImageCell({ getValue }: CellContext<DockerContainer, string>) {
+function ImageCell({ getValue }: CellContext<ContainerListViewModel, string>) {
   const imageName = getValue();
   const linkProps = useSref('docker.images.image', { id: imageName });
   const shortImageName = trimSHASum(imageName);

app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import { useMemo } from 'react';
 
-import { createOwnershipColumn } from '@/react/docker/components/datatable/createOwnershipColumn';
-import { DockerContainer } from '@/react/docker/containers/types';
+import { createOwnershipColumn } from '@/react/docker/components/datatables/createOwnershipColumn';
+import { ContainerListViewModel } from '@/react/docker/containers/types';
 
 import { created } from './created';
 import { host } from './host';
@@ -32,7 +32,7 @@ export function useColumns(
         isHostColumnVisible && host,
         isGPUsColumnVisible && gpus,
         ports,
-        createOwnershipColumn<DockerContainer>(),
+        createOwnershipColumn<ContainerListViewModel>(),
       ]),
     [isHostColumnVisible, isGPUsColumnVisible]
   );

app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx

@@ -2,7 +2,7 @@ import { CellContext } from '@tanstack/react-table';
 import _ from 'lodash';
 import { useSref } from '@uirouter/react';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
+import type { ContainerListViewModel } from '@/react/docker/containers/types';
 
 import { useTableSettings } from '@@/datatables/useTableSettings';
 
@@ -19,7 +19,7 @@ export const name = columnHelper.accessor((row) => row.Names[0], {
 export function NameCell({
   getValue,
   row: { original: container },
-}: CellContext<DockerContainer, string>) {
+}: CellContext<ContainerListViewModel, string>) {
   const name = getValue();
 
   const linkProps = useSref('.container', {

app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import { CellContext } from '@tanstack/react-table';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
 import { PublishedPortLink } from '@/react/docker/components/ImageStatus/PublishedPortLink';
+import type { ContainerListViewModel } from '@/react/docker/containers/types';
 
 import { useRowContext } from '../RowContext';
 
@@ -20,7 +20,7 @@ export const ports = columnHelper.accessor(
   }
 );
 
-function Cell({ row }: CellContext<DockerContainer, string>) {
+function Cell({ row }: CellContext<ContainerListViewModel, string>) {
   const ports = row.original.Ports;
 
   const { environment } = useRowContext();

app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx

@@ -2,7 +2,7 @@ import { CellContext } from '@tanstack/react-table';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
 import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
-import { DockerContainer } from '@/react/docker/containers/types';
+import { ContainerListViewModel } from '@/react/docker/containers/types';
 
 import { useTableSettings } from '@@/datatables/useTableSettings';
 
@@ -18,7 +18,7 @@ export const quickActions = columnHelper.display({
 
 function QuickActionsCell({
   row: { original: container },
-}: CellContext<DockerContainer, unknown>) {
+}: CellContext<ContainerListViewModel, unknown>) {
   const settings = useTableSettings<TableSettings>();
 
   const { hiddenQuickActions = [] } = settings;

app/react/docker/containers/ListView/ContainersDatatable/columns/state.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { CellContext } from '@tanstack/react-table';
 
 import {
-  type DockerContainer,
+  type ContainerListViewModel,
   ContainerStatus,
 } from '@/react/docker/containers/types';
 
@@ -25,7 +25,7 @@ export const state = columnHelper.accessor('Status', {
 function StatusCell({
   getValue,
   row: { original: container },
-}: CellContext<DockerContainer, ContainerStatus>) {
+}: CellContext<ContainerListViewModel, ContainerStatus>) {
   const status = getValue();
 
   const hasHealthCheck = [

app/react/docker/containers/LogView/LogView.tsx

@@ -1,6 +1,6 @@
 import { useCurrentStateAndParams } from '@uirouter/react';
 
-import { useContainer } from '@/react/docker/containers/queries/container';
+import { useContainer } from '@/react/docker/containers/queries/useContainer';
 
 import { InformationPanel } from '@@/InformationPanel';
 import { TextTip } from '@@/Tip/TextTip';

app/react/docker/containers/containers.service.ts

@@ -1,28 +1,27 @@
-import { RawAxiosRequestHeaders } from 'axios';
+import _ from 'lodash';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import PortainerError from '@/portainer/error';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
-import { genericHandler } from '@/docker/rest/response/handlers';
 
-import { ContainerId } from './types';
+import { withAgentTargetHeader } from '../proxy/queries/utils';
+import { buildDockerProxyUrl } from '../proxy/queries/buildDockerProxyUrl';
+import { buildDockerUrl } from '../queries/utils/buildDockerUrl';
+
+import { ContainerId, ContainerLogsParams } from './types';
 
 export async function startContainer(
   environmentId: EnvironmentId,
   id: ContainerId,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
-  }
-
   try {
     await axios.post<void>(
-      urlBuilder(environmentId, id, 'start'),
+      buildDockerProxyUrl(environmentId, 'containers', id, 'start'),
       {},
-      { transformResponse: genericHandler, headers }
+      {
+        headers: { ...withAgentTargetHeader(nodeName) },
+      }
     );
   } catch (e) {
     throw parseAxiosError(e, 'Failed starting container');
@@ -34,13 +33,15 @@ export async function stopContainer(
   id: ContainerId,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerProxyUrl(endpointId, 'containers', id, 'stop'),
+      {},
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed stopping container');
   }
-
-  await axios.post<void>(urlBuilder(endpointId, id, 'stop'), {}, { headers });
 }
 
 export async function recreateContainer(
@@ -49,19 +50,17 @@ export async function recreateContainer(
   pullImage: boolean,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerUrl(endpointId, 'containers', id, 'recreate'),
+      {
+        PullImage: pullImage,
+      },
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed recreating container');
   }
-
-  await axios.post<void>(
-    `/docker/${endpointId}/containers/${id}/recreate`,
-    {
-      PullImage: pullImage,
-    },
-    { headers }
-  );
 }
 
 export async function restartContainer(
@@ -69,17 +68,15 @@ export async function restartContainer(
   id: ContainerId,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerProxyUrl(endpointId, 'containers', id, 'restart'),
+      {},
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed restarting container');
   }
-
-  await axios.post<void>(
-    urlBuilder(endpointId, id, 'restart'),
-    {},
-    { headers }
-  );
 }
 
 export async function killContainer(
@@ -87,13 +84,15 @@ export async function killContainer(
   id: ContainerId,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerProxyUrl(endpointId, 'containers', id, 'kill'),
+      {},
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed killing container');
   }
-
-  await axios.post<void>(urlBuilder(endpointId, id, 'kill'), {}, { headers });
 }
 
 export async function pauseContainer(
@@ -101,13 +100,15 @@ export async function pauseContainer(
   id: ContainerId,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerProxyUrl(endpointId, 'containers', id, 'pause'),
+      {},
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed pausing container');
   }
-
-  await axios.post<void>(urlBuilder(endpointId, id, 'pause'), {}, { headers });
 }
 
 export async function resumeContainer(
@@ -115,17 +116,15 @@ export async function resumeContainer(
   id: ContainerId,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerProxyUrl(endpointId, 'containers', id, 'unpause'),
+      {},
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed resuming container');
   }
-
-  await axios.post<void>(
-    urlBuilder(endpointId, id, 'unpause'),
-    {},
-    { headers }
-  );
 }
 
 export async function renameContainer(
@@ -134,17 +133,18 @@ export async function renameContainer(
   name: string,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
+  try {
+    await axios.post<void>(
+      buildDockerProxyUrl(endpointId, 'containers', id, 'rename'),
+      {},
+      {
+        params: { name },
+        headers: { ...withAgentTargetHeader(nodeName) },
+      }
+    );
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed renaming container');
   }
-
-  await axios.post<void>(
-    urlBuilder(endpointId, id, 'rename'),
-    {},
-    { params: { name }, transformResponse: genericHandler, headers }
-  );
 }
 
 export async function removeContainer(
@@ -156,18 +156,11 @@ export async function removeContainer(
   }: { removeVolumes?: boolean; nodeName?: string } = {}
 ) {
   try {
-    const headers: RawAxiosRequestHeaders = {};
-
-    if (nodeName) {
-      headers['X-PortainerAgent-Target'] = nodeName;
-    }
-
     const { data } = await axios.delete<null | { message: string }>(
-      urlBuilder(endpointId, containerId),
+      buildDockerProxyUrl(endpointId, 'containers', containerId),
       {
         params: { v: removeVolumes ? 1 : 0, force: true },
-        transformResponse: genericHandler,
-        headers,
+        headers: { ...withAgentTargetHeader(nodeName) },
       }
     );
 
@@ -175,24 +168,25 @@ export async function removeContainer(
       throw new PortainerError(data.message);
     }
   } catch (e) {
-    throw new PortainerError('Unable to remove container', e as Error);
+    throw parseAxiosError(e, 'Unable to remove container');
   }
 }
 
-export function urlBuilder(
-  endpointId: EnvironmentId,
-  id?: ContainerId,
-  action?: string
-) {
-  let url = `/endpoints/${endpointId}/docker/containers`;
+export async function getContainerLogs(
+  environmentId: EnvironmentId,
+  containerId: ContainerId,
+  params?: ContainerLogsParams
+): Promise<string> {
+  try {
+    const { data } = await axios.get<string>(
+      buildDockerProxyUrl(environmentId, 'containers', containerId, 'logs'),
+      {
+        params: _.pickBy(params),
+      }
+    );
 
-  if (id) {
-    url += `/${id}`;
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get container logs');
   }
-
-  if (action) {
-    url += `/${action}`;
-  }
-
-  return url;
 }

app/react/docker/containers/queries/useContainer.ts

@@ -7,7 +7,6 @@ import {
   MountPoint,
   NetworkSettings,
 } from 'docker-types/generated/1.41';
-import { RawAxiosRequestHeaders } from 'axios';
 
 import { PortainerResponse } from '@/react/docker/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
@@ -15,11 +14,15 @@ import { ContainerId } from '@/react/docker/containers/types';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { queryClient } from '@/react-tools/react-query';
 
-import { urlBuilder } from '../containers.service';
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+import { withAgentTargetHeader } from '../../proxy/queries/utils';
 
 import { queryKeys } from './query-keys';
 
-export interface ContainerJSON {
+/**
+ * Raw Docker Container Details response
+ */
+export interface ContainerDetailsJSON {
   /**
    * The ID of the container
    */
@@ -83,7 +86,7 @@ export function useContainer(
     containerId ? queryKeys.container(environmentId, containerId) : [],
     () =>
       containerId
-        ? getContainer(environmentId, containerId, nodeName)
+        ? getContainer(environmentId, containerId, { nodeName })
         : undefined,
     {
       meta: {
@@ -104,23 +107,28 @@ export function invalidateContainer(
   );
 }
 
-export type ContainerResponse = PortainerResponse<ContainerJSON>;
+export type ContainerDetailsResponse = PortainerResponse<ContainerDetailsJSON>;
 
-async function getContainer(
+/**
+ * Raw docker API proxy
+ * @param environmentId
+ * @param id
+ * @param param2
+ * @returns
+ */
+export async function getContainer(
   environmentId: EnvironmentId,
-  containerId: ContainerId,
-  nodeName?: string
+  id: ContainerId,
+  { nodeName }: { nodeName?: string } = {}
 ) {
   try {
-    const headers: RawAxiosRequestHeaders = {};
-
-    if (nodeName) {
-      headers['X-PortainerAgent-Target'] = nodeName;
-    }
-
-    const { data } = await axios.get<ContainerResponse>(
-      urlBuilder(environmentId, containerId, 'json'),
-      { headers }
+    const { data } = await axios.get<ContainerDetailsResponse>(
+      buildDockerProxyUrl(environmentId, 'containers', id, 'json'),
+      {
+        headers: {
+          ...withAgentTargetHeader(nodeName),
+        },
+      }
     );
     return data;
   } catch (error) {

app/react/docker/containers/queries/useContainerInspect.ts

@@ -0,0 +1,38 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { ContainerId } from '../types';
+import { withAgentTargetHeader } from '../../proxy/queries/utils';
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+
+import { queryKeys } from './query-keys';
+import { ContainerDetailsJSON } from './useContainer';
+
+export function useContainerInspect(
+  environmentId: EnvironmentId,
+  id: ContainerId,
+  params: { nodeName?: string } = {}
+) {
+  return useQuery({
+    queryKey: [...queryKeys.container(environmentId, id), params] as const,
+    queryFn: () => inspectContainer(environmentId, id, params),
+  });
+}
+
+export async function inspectContainer(
+  environmentId: EnvironmentId,
+  id: ContainerId,
+  { nodeName }: { nodeName?: string } = {}
+) {
+  try {
+    const { data } = await axios.get<ContainerDetailsJSON>(
+      buildDockerProxyUrl(environmentId, 'containers', id, 'json'),
+      { headers: { ...withAgentTargetHeader(nodeName) } }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Failed inspecting container');
+  }
+}

app/react/docker/containers/queries/useContainerResizeTTYMutation.ts

@@ -0,0 +1,27 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+
+/**
+ * Raw docker API proxy
+ * @param environmentId
+ * @param id exec instance id
+ */
+export async function resizeTTY(
+  environmentId: EnvironmentId,
+  id: string,
+  { width, height }: { width: number; height: number }
+) {
+  try {
+    await axios.post(
+      buildDockerProxyUrl(environmentId, 'containers', id, 'resize'),
+      {},
+      {
+        params: { h: height, w: width },
+      }
+    );
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to resize tty of container');
+  }
+}

app/react/docker/containers/queries/useContainerStats.ts

@@ -0,0 +1,136 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+import { ContainerId } from '../types';
+
+/**
+ * This type is arbitrary and only defined based on what we use / observed from the API responses.
+ */
+export type ContainerStats = {
+  name?: string;
+  id?: string;
+  read?: string;
+  preread?: string;
+  pids_stats?: {
+    current?: number;
+    limit?: number;
+  };
+  memory_stats?: MemoryStats;
+  num_procs?: number;
+  precpu_stats?: CpuStats;
+  cpu_stats?: CpuStats;
+  networks?: Record<string, NetworkStats>;
+  blkio_stats?: BlkioStats;
+  storage_stats?: unknown;
+};
+
+/**
+ * Raw docker API proxy
+ * @param environmentId
+ * @param id
+ * @returns
+ */
+export async function containerStats(
+  environmentId: EnvironmentId,
+  id: ContainerId
+) {
+  try {
+    const { data } = await axios.get(
+      buildDockerProxyUrl(environmentId, 'containers', id, 'stats'),
+      { params: { stream: false } }
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to retrieve container stats');
+  }
+}
+
+type BlkioStats = {
+  io_service_bytes_recursive?: {
+    major: number;
+    minor: number;
+    op: string;
+    value: number;
+  }[];
+  io_serviced_recursive?: null;
+  io_queue_recursive?: null;
+  io_service_time_recursive?: null;
+  io_wait_time_recursive?: null;
+  io_merged_recursive?: null;
+  io_time_recursive?: null;
+  sectors_recursive?: null;
+};
+
+type NetworkStats = {
+  rx_bytes?: number;
+  rx_packets?: number;
+  rx_errors?: number;
+  rx_dropped?: number;
+  tx_bytes?: number;
+  tx_packets?: number;
+  tx_errors?: number;
+  tx_dropped?: number;
+};
+
+type MemoryStats = {
+  privateworkingset?: number;
+  usage?: number;
+  stats?: MemoryStatsStats;
+  limit?: number;
+};
+
+type MemoryStatsStats = {
+  active_anon?: number;
+  active_file?: number;
+  anon?: number;
+  anon_thp?: number;
+  cache?: number;
+  file?: number;
+  file_dirty?: number;
+  file_mapped?: number;
+  file_writeback?: number;
+  inactive_anon?: number;
+  inactive_file?: number;
+  kernel_stack?: number;
+  pgactivate?: number;
+  pgdeactivate?: number;
+  pgfault?: number;
+  pglazyfree?: number;
+  pglazyfreed?: number;
+  pgmajfault?: number;
+  pgrefill?: number;
+  pgscan?: number;
+  pgsteal?: number;
+  shmem?: number;
+  slab?: number;
+  slab_reclaimable?: number;
+  slab_unreclaimable?: number;
+  sock?: number;
+  thp_collapse_alloc?: number;
+  thp_fault_alloc?: number;
+  unevictable?: number;
+  workingset_activate?: number;
+  workingset_nodereclaim?: number;
+  workingset_refault?: number;
+};
+
+type CpuUsage = {
+  total_usage?: number;
+  usage_in_kernelmode?: number;
+  usage_in_usermode?: number;
+  percpu_usage?: number[];
+};
+
+type ThrottlingData = {
+  periods?: number;
+  throttled_periods?: number;
+  throttled_time?: number;
+};
+
+type CpuStats = {
+  cpu_usage?: CpuUsage;
+  system_cpu_usage?: number;
+  online_cpus?: number;
+  throttling_data?: ThrottlingData;
+};

app/react/docker/containers/queries/useContainerTop.ts

@@ -0,0 +1,25 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { ContainerId } from '../types';
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+
+/**
+ * Raw docker API proxy
+ * @param environmentId
+ * @param id
+ * @returns
+ */
+export async function containerTop(
+  environmentId: EnvironmentId,
+  id: ContainerId
+) {
+  try {
+    const { data } = await axios.get(
+      buildDockerProxyUrl(environmentId, 'containers', id, 'top')
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to retrieve container top');
+  }
+}

app/react/docker/containers/queries/useContainers.ts

@@ -1,16 +1,17 @@
 import { useQuery } from 'react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
-import axios, {
-  agentTargetHeader,
-  parseAxiosError,
-} from '@/portainer/services/axios';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withGlobalError } from '@/react-tools/react-query';
 
-import { urlBuilder } from '../containers.service';
 import { DockerContainerResponse } from '../types/response';
 import { toListViewModel } from '../utils';
-import { DockerContainer } from '../types';
+import { ContainerListViewModel } from '../types';
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+import {
+  withFiltersQueryParam,
+  withAgentTargetHeader,
+} from '../../proxy/queries/utils';
 
 import { Filters } from './types';
 import { queryKeys } from './query-keys';
@@ -21,7 +22,7 @@ interface UseContainers {
   nodeName?: string;
 }
 
-export function useContainers<T = DockerContainer[]>(
+export function useContainers<T = ContainerListViewModel[]>(
   environmentId: EnvironmentId,
   {
     autoRefreshRate,
@@ -30,7 +31,7 @@ export function useContainers<T = DockerContainer[]>(
     ...params
   }: UseContainers & {
     autoRefreshRate?: number;
-    select?: (data: DockerContainer[]) => T;
+    select?: (data: ContainerListViewModel[]) => T;
     enabled?: boolean;
   } = {}
 ) {
@@ -39,29 +40,29 @@ export function useContainers<T = DockerContainer[]>(
     () => getContainers(environmentId, params),
     {
       ...withGlobalError('Unable to retrieve containers'),
-      refetchInterval() {
-        return autoRefreshRate ?? false;
-      },
+      refetchInterval: autoRefreshRate ?? false,
       select,
       enabled,
     }
   );
 }
 
+/**
+ * Fetch containers and transform to ContainerListViewModel
+ * @param environmentId
+ * @param param1
+ * @returns ContainerListViewModel[]
+ */
 export async function getContainers(
   environmentId: EnvironmentId,
   { all = true, filters, nodeName }: UseContainers = {}
 ) {
   try {
     const { data } = await axios.get<DockerContainerResponse[]>(
-      urlBuilder(environmentId, undefined, 'json'),
+      buildDockerProxyUrl(environmentId, 'containers', 'json'),
       {
-        params: { all, filters: filters && JSON.stringify(filters) },
-        headers: nodeName
-          ? {
-              [agentTargetHeader]: nodeName,
-            }
-          : undefined,
+        params: { all, ...withFiltersQueryParam(filters) },
+        headers: { ...withAgentTargetHeader(nodeName) },
       }
     );
     return data.map((c) => toListViewModel(c));

app/react/docker/containers/queries/useCreateExecMutation.ts

@@ -0,0 +1,33 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
+import { ContainerId } from '../types';
+
+type ExecConfig = {
+  AttachStdin: boolean; // Attach to stdin of the exec command.
+  AttachStdout: boolean; // Attach to stdout of the exec command.
+  AttachStderr: boolean; // Attach to stderr of the exec command.
+  DetachKeys: string; // Override the key sequence for detaching a container. Format is a single character [a-Z] or ctrl-<value> where <value> is one of: a-z, @, ^, [, , or _.
+  Tty: boolean; // Allocate a pseudo-TTY.
+  Env: string[]; // A list of environment variables in the form ["VAR=value", ...].
+  Cmd: string[]; // Command to run, as a string or array of strings.
+  Privileged: boolean; // Default: false - Runs the exec process with extended privileges.
+  User: string; // The user, and optionally, group to run the exec process inside the container. Format is one of: user, user:group, uid, or uid:gid.
+  WorkingDir: string; // The working directory for the exec process inside the container.
+};
+export async function createExec(
+  environmentId: EnvironmentId,
+  id: ContainerId,
+  config: ExecConfig
+) {
+  try {
+    const { data } = await axios.post<{ Id: string }>(
+      buildDockerProxyUrl(environmentId, 'containers', id, 'exec'),
+      config
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to create exec');
+  }
+}

app/react/docker/containers/queries/useUpdateContainer.ts

@@ -1,10 +1,10 @@
 import { Resources, RestartPolicy } from 'docker-types/generated/1.41';
-import { RawAxiosRequestHeaders } from 'axios';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 
-import { urlBuilder } from '../containers.service';
+import { withAgentTargetHeader } from '../../proxy/queries/utils';
+import { buildDockerProxyUrl } from '../../proxy/queries/buildDockerProxyUrl';
 
 /**
  * UpdateConfig holds the mutable attributes of a Container.
@@ -12,27 +12,23 @@ import { urlBuilder } from '../containers.service';
  */
 interface UpdateConfig extends Resources {
   // Contains container's resources (cgroups, ulimits)
-
   RestartPolicy?: RestartPolicy;
 }
 
+/**
+ * Raw docker API proxy
+ */
 export async function updateContainer(
   environmentId: EnvironmentId,
   containerId: string,
   config: UpdateConfig,
   { nodeName }: { nodeName?: string } = {}
 ) {
-  const headers: RawAxiosRequestHeaders = {};
-
-  if (nodeName) {
-    headers['X-PortainerAgent-Target'] = nodeName;
-  }
-
   try {
     await axios.post<{ Warnings: string[] }>(
-      urlBuilder(environmentId, containerId, 'update'),
+      buildDockerProxyUrl(environmentId, 'containers', containerId, 'update'),
       config,
-      { headers }
+      { headers: { ...withAgentTargetHeader(nodeName) } }
     );
   } catch (err) {
     throw parseAxiosError(err, 'failed updating container');

app/react/docker/containers/types.ts

@@ -24,6 +24,9 @@ export interface Port {
 
 export type ContainerId = string;
 
+/**
+ * Computed fields from Container List Raw data
+ */
 type DecoratedDockerContainer = {
   NodeName: string;
   ResourceControl?: ResourceControlViewModel;
@@ -32,9 +35,23 @@ type DecoratedDockerContainer = {
   Status: ContainerStatus;
   Ports: Port[];
   StatusText: string;
-  Image: string;
   Gpus: string;
 };
 
-export type DockerContainer = DecoratedDockerContainer &
+/**
+ * Docker Container list ViewModel
+ *
+ * Alias AngularJS ContainerViewModel
+ *
+ * Raw details is ContainerDetailsJSON
+ */
+export type ContainerListViewModel = DecoratedDockerContainer &
   Omit<DockerContainerResponse, keyof DecoratedDockerContainer>;
+
+export type ContainerLogsParams = {
+  stdout?: boolean;
+  stderr?: boolean;
+  timestamps?: boolean;
+  since?: number;
+  tail?: number;
+};

app/react/docker/containers/types/response.ts

@@ -1,14 +1,11 @@
-import {
-  EndpointSettings,
-  MountPoint,
-  Port,
-} from 'docker-types/generated/1.41';
+import { ContainerSummary } from 'docker-types/generated/1.41';
 
-import { PortainerMetadata } from '@/react/docker/types';
+import { PortainerResponse } from '@/react/docker/types';
+import { WithRequiredProperties } from '@/types';
 
-export interface SummaryNetworkSettings {
-  Networks: { [key: string]: EndpointSettings | undefined };
-}
+export type SummaryNetworkSettings = NonNullable<
+  ContainerSummary['NetworkSettings']
+>;
 
 export interface Health {
   Status: 'healthy' | 'unhealthy' | 'starting';
@@ -16,24 +13,23 @@ export interface Health {
   Log: Array<{ Output: string }>;
 }
 
-export interface DockerContainerResponse {
-  Id: string;
-  Names: string[];
-  Image: string;
-  ImageID: string;
-  Command: string;
-  Created: number;
-  Ports: Port[];
-  SizeRw?: number;
-  SizeRootFs?: number;
-  Labels: { [key: string]: string };
-  State: string;
-  Status: string;
-  HostConfig: {
-    NetworkMode?: string;
-  };
-  NetworkSettings?: SummaryNetworkSettings;
-  Mounts: MountPoint[];
-  Portainer: PortainerMetadata;
-  IsPortainer: boolean;
-}
+/**
+ * Raw container list response item
+ */
+export type DockerContainerResponse = PortainerResponse<
+  WithRequiredProperties<
+    ContainerSummary,
+    | 'Id'
+    | 'Names'
+    | 'Image'
+    | 'ImageID'
+    | 'Command'
+    | 'Created'
+    | 'Ports'
+    | 'Labels'
+    | 'State'
+    | 'Status'
+    | 'HostConfig'
+    | 'Mounts'
+  >
+>;

app/react/docker/containers/utils.ts

@@ -5,12 +5,17 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 import { useInfo } from '@/react/docker/proxy/queries/useInfo';
 import { useEnvironment } from '@/react/portainer/environments/queries';
 
-import { DockerContainer, ContainerStatus } from './types';
+import { ContainerListViewModel, ContainerStatus } from './types';
 import { DockerContainerResponse } from './types/response';
 
+/**
+ * Transform an item of the raw docker container list reponse to a container list view model
+ * @param response Raw docker container list reponse item
+ * @returns ContainerListViewModel
+ */
 export function toListViewModel(
   response: DockerContainerResponse
-): DockerContainer {
+): ContainerListViewModel {
   const resourceControl =
     response.Portainer?.ResourceControl &&
     new ResourceControlViewModel(response?.Portainer?.ResourceControl);