refactor(docker/containers): migrate commands tab to react [EE-5208] (#10085)

app/docker/helpers/containerHelper.js

@@ -1,5 +1,4 @@
 import _ from 'lodash-es';
-import splitargs from 'splitargs/src/splitargs';
 
 const portPattern = /^([1-9]|[1-5]?[0-9]{2,4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/m;
 
@@ -65,18 +64,6 @@ angular.module('portainer.docker').factory('ContainerHelper', [
     'use strict';
     var helper = {};
 
-    helper.commandStringToArray = function (command) {
-      return splitargs(command);
-    };
-
-    helper.commandArrayToString = function (array) {
-      return array
-        .map(function (elem) {
-          return "'" + elem + "'";
-        })
-        .join(' ');
-    };
-
     helper.configFromContainer = function (container) {
       var config = container.Config;
       // HostConfig

app/docker/helpers/containers.ts

@@ -0,0 +1,9 @@
+import { splitargs } from './splitargs';
+
+export function commandStringToArray(command: string) {
+  return splitargs(command);
+}
+
+export function commandArrayToString(array: string[]) {
+  return array.map((elem) => `'${elem}'`).join(' ');
+}

app/docker/helpers/splitargs.test.ts

@@ -0,0 +1,68 @@
+/**
+ * Created by elgs on 7/2/14.
+ */
+
+import { splitargs } from './splitargs';
+
+describe('splitargs Suite', () => {
+  beforeEach(() => {});
+  afterEach(() => {});
+
+  it('should split double quoted string', () => {
+    const i = " I  said 'I am sorry.', and he said \"it doesn't matter.\" ";
+    const o = splitargs(i);
+    expect(7).toBe(o.length);
+    expect(o[0]).toBe('I');
+    expect(o[1]).toBe('said');
+    expect(o[2]).toBe('I am sorry.,');
+    expect(o[3]).toBe('and');
+    expect(o[4]).toBe('he');
+    expect(o[5]).toBe('said');
+    expect(o[6]).toBe("it doesn't matter.");
+  });
+
+  it('should split pure double quoted string', () => {
+    const i = 'I said "I am sorry.", and he said "it doesn\'t matter."';
+    const o = splitargs(i);
+    expect(o).toHaveLength(7);
+    expect(o[0]).toBe('I');
+    expect(o[1]).toBe('said');
+    expect(o[2]).toBe('I am sorry.,');
+    expect(o[3]).toBe('and');
+    expect(o[4]).toBe('he');
+    expect(o[5]).toBe('said');
+    expect(o[6]).toBe("it doesn't matter.");
+  });
+
+  it('should split single quoted string', () => {
+    const i = 'I said "I am sorry.", and he said "it doesn\'t matter."';
+    const o = splitargs(i);
+    expect(o).toHaveLength(7);
+    expect(o[0]).toBe('I');
+    expect(o[1]).toBe('said');
+    expect(o[2]).toBe('I am sorry.,');
+    expect(o[3]).toBe('and');
+    expect(o[4]).toBe('he');
+    expect(o[5]).toBe('said');
+    expect(o[6]).toBe("it doesn't matter.");
+  });
+
+  it('should split pure single quoted string', () => {
+    const i = "I said 'I am sorry.', and he said \"it doesn't matter.\"";
+    const o = splitargs(i);
+    expect(o).toHaveLength(7);
+    expect(o[0]).toBe('I');
+    expect(o[1]).toBe('said');
+    expect(o[2]).toBe('I am sorry.,');
+    expect(o[3]).toBe('and');
+    expect(o[4]).toBe('he');
+    expect(o[5]).toBe('said');
+    expect(o[6]).toBe("it doesn't matter.");
+  });
+
+  it('should split to 4 empty strings', () => {
+    const i = ',,,';
+    const o = splitargs(i, ',', true);
+    expect(o).toHaveLength(4);
+  });
+});

app/docker/helpers/splitargs.ts

@@ -0,0 +1,114 @@
+/**
+
+Splits strings into tokens by given separator except treating quoted part as a single token.
+
+
+#Usage
+```javascript
+var splitargs = require('splitargs');
+
+var i1 = "I said 'I am sorry.', and he said \"it doesn't matter.\"";
+var o1 = splitargs(i1);
+console.log(o1);
+
+[ 'I',
+  'said',
+  'I am sorry.,',
+  'and',
+  'he',
+  'said',
+  'it doesn\'t matter.' ]
+
+
+var i2 = "I said \"I am sorry.\", and he said \"it doesn't matter.\"";
+var o2 = splitargs(i2);
+console.log(o2);
+
+[ 'I',
+  'said',
+  'I am sorry.,',
+  'and',
+  'he',
+  'said',
+  'it doesn\'t matter.' ]
+
+
+var i3 = 'I said "I am sorry.", and he said "it doesn\'t matter."';
+var o3 = splitargs(i3);
+console.log(o3);
+
+[ 'I',
+  'said',
+  'I am sorry.,',
+  'and',
+  'he',
+  'said',
+  'it doesn\'t matter.' ]
+
+
+var i4 = 'I said \'I am sorry.\', and he said "it doesn\'t matter."';
+var o4 = splitargs(i4);
+console.log(o4);
+
+[ 'I',
+  'said',
+  'I am sorry.,',
+  'and',
+  'he',
+  'said',
+  'it doesn\'t matter.' ]
+ ```
+ */
+
+export function splitargs(
+  input: string,
+  sep?: RegExp | string,
+  keepQuotes = false
+) {
+  const separator = sep || /\s/g;
+  let singleQuoteOpen = false;
+  let doubleQuoteOpen = false;
+  let tokenBuffer = [];
+  const ret = [];
+
+  const arr = input.split('');
+  for (let i = 0; i < arr.length; ++i) {
+    const element = arr[i];
+    const matches = element.match(separator);
+    // TODO rewrite without continue
+    /* eslint-disable no-continue */
+    if (element === "'" && !doubleQuoteOpen) {
+      if (keepQuotes) {
+        tokenBuffer.push(element);
+      }
+      singleQuoteOpen = !singleQuoteOpen;
+      continue;
+    } else if (element === '"' && !singleQuoteOpen) {
+      if (keepQuotes) {
+        tokenBuffer.push(element);
+      }
+      doubleQuoteOpen = !doubleQuoteOpen;
+      continue;
+    }
+    /* eslint-enable no-continue */
+
+    if (!singleQuoteOpen && !doubleQuoteOpen && matches) {
+      if (tokenBuffer.length > 0) {
+        ret.push(tokenBuffer.join(''));
+        tokenBuffer = [];
+      } else if (sep) {
+        ret.push(element);
+      }
+    } else {
+      tokenBuffer.push(element);
+    }
+  }
+
+  if (tokenBuffer.length > 0) {
+    ret.push(tokenBuffer.join(''));
+  } else if (sep) {
+    ret.push('');
+  }
+
+  return ret;
+}

app/docker/react/components/containers.ts

@@ -0,0 +1,26 @@
+import angular from 'angular';
+import { ComponentProps } from 'react';
+
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withFormValidation } from '@/react-tools/withFormValidation';
+import {
+  CommandsTab,
+  CommandsTabValues,
+  commandsTabValidation,
+} from '@/react/docker/containers/CreateView/CommandsTab';
+
+const ngModule = angular.module(
+  'portainer.docker.react.components.containers',
+  []
+);
+
+export const containersModule = ngModule.name;
+
+withFormValidation<ComponentProps<typeof CommandsTab>, CommandsTabValues>(
+  ngModule,
+  withUIRouter(withReactQuery(CommandsTab)),
+  'dockerCreateContainerCommandsTab',
+  ['apiVersion'],
+  commandsTabValidation
+);

app/docker/react/components/index.ts

@@ -22,8 +22,10 @@ import { AgentHostBrowser } from '@/react/docker/host/BrowseView/AgentHostBrowse
 import { AgentVolumeBrowser } from '@/react/docker/volumes/BrowseView/AgentVolumeBrowser';
 import { ProcessesDatatable } from '@/react/docker/containers/StatsView/ProcessesDatatable';
 
+import { containersModule } from './containers';
+
 const ngModule = angular
-  .module('portainer.docker.react.components', [])
+  .module('portainer.docker.react.components', [containersModule])
   .component('dockerfileDetails', r2a(DockerfileDetails, ['image']))
   .component('dockerHealthStatus', r2a(HealthStatus, ['health']))
   .component(

app/docker/react/views/containers.ts

@@ -8,7 +8,7 @@ import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const containersModule = angular
-  .module('portainer.docker.containers', [])
+  .module('portainer.docker.react.views.containers', [])
   .component(
     'containersView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), ['endpoint'])

app/docker/services/system.service.ts

@@ -1,76 +0,0 @@
-import { useQuery } from 'react-query';
-
-import { EnvironmentId } from '@/react/portainer/environments/types';
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-
-export interface VersionResponse {
-  ApiVersion: string;
-}
-
-export async function getVersion(environmentId: EnvironmentId) {
-  try {
-    const { data } = await axios.get<VersionResponse>(
-      buildUrl(environmentId, 'version')
-    );
-    return data;
-  } catch (err) {
-    throw parseAxiosError(err as Error, 'Unable to retrieve version');
-  }
-}
-
-export interface InfoResponse {
-  Swarm?: {
-    NodeID: string;
-    ControlAvailable: boolean;
-  };
-}
-
-export async function getInfo(environmentId: EnvironmentId) {
-  try {
-    const { data } = await axios.get<InfoResponse>(
-      buildUrl(environmentId, 'info')
-    );
-    return data;
-  } catch (err) {
-    throw parseAxiosError(err as Error, 'Unable to retrieve version');
-  }
-}
-
-export function useInfo<TSelect = InfoResponse>(
-  environmentId: EnvironmentId,
-  select?: (info: InfoResponse) => TSelect
-) {
-  return useQuery(
-    ['environment', environmentId, 'docker', 'info'],
-    () => getInfo(environmentId),
-    {
-      select,
-    }
-  );
-}
-export function useVersion<TSelect = VersionResponse>(
-  environmentId: EnvironmentId,
-  select?: (info: VersionResponse) => TSelect
-) {
-  return useQuery(
-    ['environment', environmentId, 'docker', 'version'],
-    () => getVersion(environmentId),
-    {
-      select,
-    }
-  );
-}
-
-function buildUrl(
-  environmentId: EnvironmentId,
-  action: string,
-  subAction = ''
-) {
-  let url = `/endpoints/${environmentId}/docker/${action}`;
-
-  if (subAction) {
-    url += `/${subAction}`;
-  }
-
-  return url;
-}

app/docker/views/containers/console/containerConsoleController.js

@@ -1,5 +1,6 @@
 import { Terminal } from 'xterm';
 import { baseHref } from '@/portainer/helpers/pathHelper';
+import { commandStringToArray } from '@/docker/helpers/containers';
 
 angular.module('portainer.docker').controller('ContainerConsoleController', [
   '$scope',
@@ -101,7 +102,7 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
         AttachStderr: true,
         Tty: true,
         User: $scope.formValues.user,
-        Cmd: ContainerHelper.commandStringToArray(command),
+        Cmd: commandStringToArray(command),
       };
 
       ContainerService.createExec(execConfig)

app/docker/views/containers/create/createContainerController.js

@@ -7,9 +7,10 @@ import { confirmDestructive } from '@@/modals/confirm';
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 import { buildConfirmButton } from '@@/modals/utils';
 
-import { ContainerCapabilities, ContainerCapability } from '../../../models/containerCapabilities';
-import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
-import { ContainerDetailsViewModel } from '../../../models/container';
+import { commandsTabUtils } from '@/react/docker/containers/CreateView/CommandsTab';
+import { ContainerCapabilities, ContainerCapability } from '@/docker/models/containerCapabilities';
+import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
+import { ContainerDetailsViewModel } from '@/docker/models/container';
 
 import './createcontainer.css';
 
@@ -20,11 +21,9 @@ angular.module('portainer.docker').controller('CreateContainerController', [
   '$state',
   '$timeout',
   '$transition$',
-  '$filter',
   '$analytics',
   'Container',
   'ContainerHelper',
-  'Image',
   'ImageHelper',
   'Volume',
   'NetworkService',
@@ -37,7 +36,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
   'RegistryService',
   'SystemService',
   'SettingsService',
-  'PluginService',
   'HttpRequestHelper',
   'endpoint',
   function (
@@ -47,11 +45,9 @@ angular.module('portainer.docker').controller('CreateContainerController', [
     $state,
     $timeout,
     $transition$,
-    $filter,
     $analytics,
     Container,
     ContainerHelper,
-    Image,
     ImageHelper,
     Volume,
     NetworkService,
@@ -64,7 +60,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
     RegistryService,
     SystemService,
     SettingsService,
-    PluginService,
     HttpRequestHelper,
     endpoint
   ) {
@@ -80,7 +75,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
         selectedGPUs: ['all'],
         capabilities: ['compute', 'utility'],
       },
-      Console: 'none',
       Volumes: [],
       NetworkContainer: null,
       Labels: [],
@@ -95,15 +89,12 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       MemoryLimit: 0,
       MemoryReservation: 0,
       ShmSize: 64,
-      CmdMode: 'default',
-      EntrypointMode: 'default',
       Env: [],
       NodeName: null,
       capabilities: [],
       Sysctls: [],
-      LogDriverName: '',
-      LogDriverOpts: [],
       RegistryModel: new PorImageRegistryModel(),
+      commands: commandsTabUtils.getDefaultViewModel(),
     };
 
     $scope.extraNetworks = {};
@@ -114,6 +105,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       mode: '',
       pullImageValidity: true,
       settingUnlimitedResources: false,
+      containerIsLoaded: false,
     };
 
     $scope.onAlwaysPullChange = onAlwaysPullChange;
@@ -121,6 +113,13 @@ angular.module('portainer.docker').controller('CreateContainerController', [
     $scope.handleAutoRemoveChange = handleAutoRemoveChange;
     $scope.handlePrivilegedChange = handlePrivilegedChange;
     $scope.handleInitChange = handleInitChange;
+    $scope.handleCommandsChange = handleCommandsChange;
+
+    function handleCommandsChange(commands) {
+      return $scope.$evalAsync(() => {
+        $scope.formValues.commands = commands;
+      });
+    }
 
     function onAlwaysPullChange(checked) {
       return $scope.$evalAsync(() => {
@@ -179,10 +178,12 @@ angular.module('portainer.docker').controller('CreateContainerController', [
     $scope.config = {
       Image: '',
       Env: [],
-      Cmd: '',
+      Cmd: null,
       MacAddress: '',
       ExposedPorts: {},
-      Entrypoint: '',
+      Entrypoint: null,
+      WorkingDir: '',
+      User: '',
       HostConfig: {
         RestartPolicy: {
           Name: 'no',
@@ -201,6 +202,10 @@ angular.module('portainer.docker').controller('CreateContainerController', [
         CapAdd: [],
         CapDrop: [],
         Sysctls: {},
+        LogConfig: {
+          Type: '',
+          Config: {},
+        },
       },
       NetworkingConfig: {
         EndpointsConfig: {},
@@ -262,14 +267,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       $scope.formValues.Sysctls.splice(index, 1);
     };
 
-    $scope.addLogDriverOpt = function () {
-      $scope.formValues.LogDriverOpts.push({ name: '', value: '' });
-    };
-
-    $scope.removeLogDriverOpt = function (index) {
-      $scope.formValues.LogDriverOpts.splice(index, 1);
-    };
-
     $scope.fromContainerMultipleNetworks = false;
 
     function prepareImageConfig(config) {
@@ -284,36 +281,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       config.HostConfig.PortBindings = bindings;
     }
 
-    function prepareConsole(config) {
-      var value = $scope.formValues.Console;
-      var openStdin = true;
-      var tty = true;
-      if (value === 'tty') {
-        openStdin = false;
-      } else if (value === 'interactive') {
-        tty = false;
-      } else if (value === 'none') {
-        openStdin = false;
-        tty = false;
-      }
-      config.OpenStdin = openStdin;
-      config.Tty = tty;
-    }
-
-    function prepareCmd(config) {
-      if (_.isEmpty(config.Cmd) || $scope.formValues.CmdMode == 'default') {
-        delete config.Cmd;
-      } else {
-        config.Cmd = ContainerHelper.commandStringToArray(config.Cmd);
-      }
-    }
-
-    function prepareEntrypoint(config) {
-      if ($scope.formValues.EntrypointMode == 'default' || (_.isEmpty(config.Cmd) && _.isEmpty(config.Entrypoint))) {
-        config.Entrypoint = null;
-      }
-    }
-
     function prepareEnvironmentVariables(config) {
       config.Env = envVarsUtils.convertToArrayOfStrings($scope.formValues.Env);
     }
@@ -447,23 +414,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       }
     }
 
-    function prepareLogDriver(config) {
-      var logOpts = {};
-      if ($scope.formValues.LogDriverName) {
-        config.HostConfig.LogConfig = { Type: $scope.formValues.LogDriverName };
-        if ($scope.formValues.LogDriverName !== 'none') {
-          $scope.formValues.LogDriverOpts.forEach(function (opt) {
-            if (opt.name) {
-              logOpts[opt.name] = opt.value;
-            }
-          });
-          if (Object.keys(logOpts).length !== 0 && logOpts.constructor === Object) {
-            config.HostConfig.LogConfig.Config = logOpts;
-          }
-        }
-      }
-    }
-
     function prepareCapabilities(config) {
       var allowed = $scope.formValues.capabilities.filter(function (item) {
         return item.allowed === true;
@@ -511,40 +461,22 @@ angular.module('portainer.docker').controller('CreateContainerController', [
 
     function prepareConfiguration() {
       var config = angular.copy($scope.config);
-      prepareCmd(config);
-      prepareEntrypoint(config);
+      config = commandsTabUtils.toRequest(config, $scope.formValues.commands);
+
       prepareNetworkConfig(config);
       prepareImageConfig(config);
       preparePortBindings(config);
-      prepareConsole(config);
       prepareEnvironmentVariables(config);
       prepareVolumes(config);
       prepareLabels(config);
       prepareDevices(config);
       prepareResources(config);
-      prepareLogDriver(config);
       prepareCapabilities(config);
       prepareSysctls(config);
       prepareGPUOptions(config);
       return config;
     }
 
-    function loadFromContainerCmd() {
-      if ($scope.config.Cmd) {
-        $scope.config.Cmd = ContainerHelper.commandArrayToString($scope.config.Cmd);
-        $scope.formValues.CmdMode = 'override';
-      }
-    }
-
-    function loadFromContainerEntrypoint() {
-      if (_.has($scope.config, 'Entrypoint')) {
-        if ($scope.config.Entrypoint == null) {
-          $scope.config.Entrypoint = '';
-        }
-        $scope.formValues.EntrypointMode = 'override';
-      }
-    }
-
     function loadFromContainerPortBindings() {
       const bindings = ContainerHelper.sortAndCombinePorts($scope.config.HostConfig.PortBindings);
       $scope.config.HostConfig.PortBindings = bindings;
@@ -641,18 +573,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       }
     }
 
-    function loadFromContainerConsole() {
-      if ($scope.config.OpenStdin && $scope.config.Tty) {
-        $scope.formValues.Console = 'both';
-      } else if (!$scope.config.OpenStdin && $scope.config.Tty) {
-        $scope.formValues.Console = 'tty';
-      } else if ($scope.config.OpenStdin && !$scope.config.Tty) {
-        $scope.formValues.Console = 'interactive';
-      } else if (!$scope.config.OpenStdin && !$scope.config.Tty) {
-        $scope.formValues.Console = 'none';
-      }
-    }
-
     function loadFromContainerDevices() {
       var path = [];
       for (var dev in $scope.config.HostConfig.Devices) {
@@ -765,15 +685,14 @@ angular.module('portainer.docker').controller('CreateContainerController', [
           $scope.fromContainer = fromContainer;
           $scope.state.mode = 'duplicate';
           $scope.config = ContainerHelper.configFromContainer(fromContainer.Model);
-          loadFromContainerCmd(d);
-          loadFromContainerEntrypoint(d);
-          loadFromContainerLogging(d);
+
+          $scope.formValues.commands = commandsTabUtils.toViewModel(d);
+
           loadFromContainerPortBindings(d);
           loadFromContainerVolumes(d);
           loadFromContainerNetworkConfig(d);
           loadFromContainerEnvironmentVariables(d);
           loadFromContainerLabels(d);
-          loadFromContainerConsole(d);
           loadFromContainerDevices(d);
           loadFromContainerDeviceRequests(d);
           loadFromContainerImageConfig(d);
@@ -781,22 +700,14 @@ angular.module('portainer.docker').controller('CreateContainerController', [
           loadFromContainerCapabilities(d);
           loadFromContainerSysctls(d);
         })
+        .then(() => {
+          $scope.state.containerIsLoaded = true;
+        })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve container');
         });
     }
 
-    function loadFromContainerLogging(config) {
-      var logConfig = config.HostConfig.LogConfig;
-      $scope.formValues.LogDriverName = logConfig.Type;
-      $scope.formValues.LogDriverOpts = _.map(logConfig.Config, function (value, name) {
-        return {
-          name: name,
-          value: value,
-        };
-      });
-    }
-
     async function initView() {
       var nodeName = $transition$.params().nodeName;
       $scope.formValues.NodeName = nodeName;
@@ -845,6 +756,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
           if ($transition$.params().from) {
             loadFromContainerSpec();
           } else {
+            $scope.state.containerIsLoaded = true;
             $scope.fromContainer = {};
             $scope.formValues.capabilities = $scope.areContainerCapabilitiesEnabled ? new ContainerCapabilities() : [];
           }
@@ -872,10 +784,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
 
       $scope.allowBindMounts = $scope.isAdminOrEndpointAdmin || endpoint.SecuritySettings.allowBindMountsForRegularUsers;
       $scope.allowPrivilegedMode = endpoint.SecuritySettings.allowPrivilegedModeForRegularUsers;
-
-      PluginService.loggingPlugins(apiVersion < 1.25).then(function success(loggingDrivers) {
-        $scope.availableLoggingDrivers = loggingDrivers;
-      });
     }
 
     function validateForm(accessControlData, isAdmin) {

app/portainer/services/api/templateService.js

@@ -1,3 +1,4 @@
+import { commandStringToArray } from '@/docker/helpers/containers';
 import { DockerHubViewModel } from 'Portainer/models/dockerhub';
 import { TemplateViewModel } from '../../models/template';
 
@@ -60,7 +61,7 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, Cont
     configuration.name = containerName;
     configuration.Hostname = template.Hostname;
     configuration.Env = TemplateHelper.EnvToStringArray(template.Env);
-    configuration.Cmd = ContainerHelper.commandStringToArray(template.Command);
+    configuration.Cmd = commandStringToArray(template.Command);
     var portConfiguration = TemplateHelper.portArrayToPortConfiguration(template.Ports);
     configuration.HostConfig.PortBindings = portConfiguration.bindings;
     configuration.ExposedPorts = portConfiguration.exposedPorts;

app/portainer/services/axios.ts

@@ -65,7 +65,7 @@ export function parseAxiosError(
   let resultMsg = msg;
 
   if (isAxiosError(err)) {
-    const { error, details } = parseError(err as AxiosError);
+    const { error, details } = parseError(err);
     resultErr = error;
     if (msg && details) {
       resultMsg = `${msg}: ${details}`;

app/portainer/views/endpoints/edit/endpointController.js

@@ -10,7 +10,7 @@ import { isEdgeEnvironment, isDockerAPIEnvironment } from '@/react/portainer/env
 import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
 import { confirmDisassociate } from '@/react/portainer/environments/ItemView/ConfirmDisassociateModel';
 import { buildConfirmButton } from '@@/modals/utils';
-import { getInfo } from '@/docker/services/system.service';
+import { getInfo } from '@/react/docker/proxy/queries/useInfo';
 
 angular.module('portainer.app').controller('EndpointController', EndpointController);
 

app/react/components/form-components/FormControl/FormControl.tsx

@@ -66,7 +66,7 @@ function sizeClassLabel(size?: Size) {
     case 'medium':
       return 'col-sm-4 col-lg-3';
     case 'xsmall':
-      return 'col-sm-2';
+      return 'col-sm-1';
     case 'vertical':
       return '';
     default:
@@ -81,7 +81,7 @@ function sizeClassChildren(size?: Size) {
     case 'medium':
       return 'col-sm-8 col-lg-9';
     case 'xsmall':
-      return 'col-sm-10';
+      return 'col-sm-11';
     case 'vertical':
       return '';
     default:

app/react/components/form-components/Input/Input.tsx

@@ -13,7 +13,9 @@ export function Input({
   className,
   mRef: ref,
   ...props
-}: InputHTMLAttributes<HTMLInputElement> & { mRef?: Ref<HTMLInputElement> }) {
+}: InputHTMLAttributes<HTMLInputElement> & {
+  mRef?: Ref<HTMLInputElement>;
+}) {
   return (
     <input
       // eslint-disable-next-line react/jsx-props-no-spreading

app/react/components/form-components/InputGroup/InputGroupButtonWrapper.tsx

@@ -1,23 +1,24 @@
 import { PropsWithChildren } from 'react';
-import clsx from 'clsx';
 
 import { useInputGroupContext } from './InputGroup';
 
+/**
+ * Should wrap all buttons inside a InputGroup
+ *
+ * example:
+ * ```
+ * <InputGroup>
+ *  <InputGroup.ButtonWrapper>
+ *   <Button>...</Button>
+ *   <Button>...</Button>
+ *  </InputGroup.ButtonWrapper>
+ * </InputGroup>
+ * ```
+ */
 export function InputGroupButtonWrapper({
   children,
 }: PropsWithChildren<unknown>) {
   useInputGroupContext();
 
-  return (
-    <span
-      className={clsx(
-        'input-group-btn [&>button]:!ml-0',
-        // the button should be rounded at the end (right) if it's the last child and start (left) if it's the first child
-        // if the button is in the middle of the group, it shouldn't be rounded
-        '[&:first-child>button]:!rounded-l-[5px] [&:last-child>button]:!rounded-r-[5px] [&>button]:!rounded-none'
-      )}
-    >
-      {children}
-    </span>
-  );
+  return <span className="input-group-btn">{children}</span>;
 }

app/react/components/form-components/InputGroup/index.ts

@@ -6,6 +6,19 @@ import { InputGroupButtonWrapper } from './InputGroupButtonWrapper';
 
 interface InputGroupSubComponents {
   Addon: typeof InputGroupAddon;
+  /**
+   * Should wrap all buttons inside a InputGroup
+   *
+   * example:
+   * ```
+   * <InputGroup>
+   *  <InputGroup.ButtonWrapper>
+   *   <Button>...</Button>
+   *   <Button>...</Button>
+   *  </InputGroup.ButtonWrapper>
+   * </InputGroup>
+   * ```
+   */
   ButtonWrapper: typeof InputGroupButtonWrapper;
   Input: typeof Input;
   className: string | undefined;

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

@@ -0,0 +1,105 @@
+import { FormikErrors } from 'formik';
+import { useState } from 'react';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { ConsoleSettings } from './ConsoleSettings';
+import { LoggerConfig } from './LoggerConfig';
+import { OverridableInput } from './OverridableInput';
+import { Values } from './types';
+
+export function CommandsTab({
+  apiVersion,
+  values,
+  onChange,
+  errors,
+}: {
+  apiVersion: number;
+  values: Values;
+  onChange: (values: Values) => void;
+  errors?: FormikErrors<Values>;
+}) {
+  const [controlledValues, setControlledValues] = useState(values);
+
+  return (
+    <div className="mt-3">
+      <FormControl
+        label="Command"
+        inputId="command-input"
+        size="xsmall"
+        errors={errors?.cmd}
+      >
+        <OverridableInput
+          value={controlledValues.cmd}
+          onChange={(cmd) => handleChange({ cmd })}
+          id="command-input"
+          placeholder="e.g. '-logtostderr' '--housekeeping_interval=5s' or /usr/bin/nginx -t -c /mynginx.conf"
+        />
+      </FormControl>
+
+      <FormControl
+        label="Entrypoint"
+        inputId="entrypoint-input"
+        size="xsmall"
+        tooltip="When container entrypoint is entered as part of the Command field, set Entrypoint to Override mode and leave blank, else it will revert to default."
+        errors={errors?.entrypoint}
+      >
+        <OverridableInput
+          value={controlledValues.entrypoint}
+          onChange={(entrypoint) => handleChange({ entrypoint })}
+          id="entrypoint-input"
+          placeholder="e.g. /bin/sh -c"
+        />
+      </FormControl>
+
+      <div className="flex justify-between gap-4">
+        <FormControl
+          label="Working Dir"
+          inputId="working-dir-input"
+          className="w-1/2"
+          errors={errors?.workingDir}
+        >
+          <Input
+            value={controlledValues.workingDir}
+            onChange={(e) => handleChange({ workingDir: e.target.value })}
+            placeholder="e.g. /myapp"
+          />
+        </FormControl>
+        <FormControl
+          label="User"
+          inputId="user-input"
+          className="w-1/2"
+          errors={errors?.user}
+        >
+          <Input
+            value={controlledValues.user}
+            onChange={(e) => handleChange({ user: e.target.value })}
+            placeholder="e.g. nginx"
+          />
+        </FormControl>
+      </div>
+
+      <ConsoleSettings
+        value={controlledValues.console}
+        onChange={(console) => handleChange({ console })}
+      />
+
+      <LoggerConfig
+        apiVersion={apiVersion}
+        value={controlledValues.logConfig}
+        onChange={(logConfig) =>
+          handleChange({
+            logConfig,
+          })
+        }
+        errors={errors?.logConfig}
+      />
+    </div>
+  );
+
+  function handleChange(newValues: Partial<Values>) {
+    onChange({ ...values, ...newValues });
+    setControlledValues((values) => ({ ...values, ...newValues }));
+  }
+}

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

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import { mixed } from 'yup';
+import { ContainerConfig } from 'docker-types/generated/1.41';
+
+import { FormControl } from '@@/form-components/FormControl';
+
+const consoleSettingTypes = ['tty', 'interactive', 'both', 'none'] as const;
+
+export type ConsoleSetting = (typeof consoleSettingTypes)[number];
+
+export type ConsoleConfig = Pick<ContainerConfig, 'OpenStdin' | 'Tty'>;
+
+export function ConsoleSettings({
+  value,
+  onChange,
+}: {
+  value: ConsoleSetting;
+  onChange(value: ConsoleSetting): void;
+}) {
+  return (
+    <FormControl label="Console" size="xsmall">
+      <Item
+        value="both"
+        onChange={handleChange}
+        label={
+          <>
+            Interactive & TTY <span className="small text-muted">(-i -t)</span>
+          </>
+        }
+        selected={value}
+      />
+      <Item
+        value="interactive"
+        onChange={handleChange}
+        label={
+          <>
+            Interactive <span className="small text-muted">(-i)</span>
+          </>
+        }
+        selected={value}
+      />
+      <Item
+        value="tty"
+        onChange={handleChange}
+        label={
+          <>
+            TTY <span className="small text-muted">(-t)</span>
+          </>
+        }
+        selected={value}
+      />
+      <Item
+        value="none"
+        onChange={handleChange}
+        label={<>None</>}
+        selected={value}
+      />
+    </FormControl>
+  );
+
+  function handleChange(value: ConsoleSetting) {
+    onChange(value);
+  }
+}
+
+function Item({
+  value,
+  selected,
+  onChange,
+  label,
+}: {
+  value: ConsoleSetting;
+  selected: ConsoleSetting;
+  onChange(value: ConsoleSetting): void;
+  label: ReactNode;
+}) {
+  return (
+    <label className="radio-inline !m-0 w-1/2">
+      <input
+        type="radio"
+        name="container_console"
+        value={value}
+        checked={value === selected}
+        onChange={() => onChange(value)}
+      />
+      {label}
+    </label>
+  );
+}
+
+export function validation() {
+  return mixed<ConsoleSetting>()
+    .oneOf([...consoleSettingTypes])
+    .default('none');
+}

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

@@ -0,0 +1,138 @@
+import { FormikErrors } from 'formik';
+import { array, object, SchemaOf, string } from 'yup';
+import _ from 'lodash';
+
+import { useLoggingPlugins } from '@/react/docker/proxy/queries/useServicePlugins';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { FormSection } from '@@/form-components/FormSection';
+import { InputGroup } from '@@/form-components/InputGroup';
+import { InputList, ItemProps } from '@@/form-components/InputList';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+import { TextTip } from '@@/Tip/TextTip';
+import { FormError } from '@@/form-components/FormError';
+
+export interface LogConfig {
+  type: string;
+  options: Array<{ option: string; value: string }>;
+}
+
+export function LoggerConfig({
+  value,
+  onChange,
+  apiVersion,
+  errors,
+}: {
+  value: LogConfig;
+  onChange: (value: LogConfig) => void;
+  apiVersion: number;
+  errors?: FormikErrors<LogConfig>;
+}) {
+  const envId = useEnvironmentId();
+
+  const pluginsQuery = useLoggingPlugins(envId, apiVersion < 1.25);
+
+  if (!pluginsQuery.data) {
+    return null;
+  }
+
+  const isDisabled = !value.type || value.type === 'none';
+
+  const pluginOptions = [
+    { label: 'Default logging driver', value: '' },
+    ...pluginsQuery.data.map((p) => ({ label: p, value: p })),
+    { label: 'none', value: 'none' },
+  ];
+
+  return (
+    <FormSection title="Logging">
+      <FormControl label="Driver">
+        <PortainerSelect
+          value={value.type}
+          onChange={(type) => onChange({ ...value, type: type || '' })}
+          options={pluginOptions}
+        />
+      </FormControl>
+
+      <TextTip color="blue">
+        Logging driver that will override the default docker daemon driver.
+        Select Default logging driver if you don&apos;t want to override it.
+        Supported logging drivers can be found
+        <a
+          href="https://docs.docker.com/engine/admin/logging/overview/#supported-logging-drivers"
+          target="_blank"
+          rel="noreferrer"
+        >
+          in the Docker documentation
+        </a>
+        .
+      </TextTip>
+
+      <InputList
+        tooltip={
+          isDisabled
+            ? 'Add button is disabled unless a driver other than none or default is selected. Options are specific to the selected driver, refer to the driver documentation.'
+            : ''
+        }
+        label="Options"
+        onChange={(options) => handleChange({ options })}
+        value={value.options}
+        item={Item}
+        itemBuilder={() => ({ option: '', value: '' })}
+        disabled={isDisabled}
+        errors={errors?.options}
+      />
+    </FormSection>
+  );
+
+  function handleChange(partial: Partial<LogConfig>) {
+    onChange({ ...value, ...partial });
+  }
+}
+
+function Item({
+  item: { option, value },
+  onChange,
+  error,
+}: ItemProps<{ option: string; value: string }>) {
+  return (
+    <div>
+      <div className="flex w-full gap-4">
+        <InputGroup className="w-1/2">
+          <InputGroup.Addon>option</InputGroup.Addon>
+          <InputGroup.Input
+            value={option}
+            onChange={(e) => handleChange({ option: e.target.value })}
+            placeholder="e.g. FOO"
+          />
+        </InputGroup>
+        <InputGroup className="w-1/2">
+          <InputGroup.Addon>value</InputGroup.Addon>
+          <InputGroup.Input
+            value={value}
+            onChange={(e) => handleChange({ value: e.target.value })}
+            placeholder="e.g bar"
+          />
+        </InputGroup>
+      </div>
+      {error && <FormError>{_.first(Object.values(error))}</FormError>}
+    </div>
+  );
+
+  function handleChange(partial: Partial<{ option: string; value: string }>) {
+    onChange({ option, value, ...partial });
+  }
+}
+
+export function validation(): SchemaOf<LogConfig> {
+  return object({
+    options: array().of(
+      object({
+        option: string().required('Option is required'),
+        value: string().required('Value is required'),
+      })
+    ),
+    type: string().default('none'),
+  });
+}

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

@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+
+import { Button } from '@@/buttons';
+import { InputGroup } from '@@/form-components/InputGroup';
+
+export function OverridableInput({
+  value,
+  onChange,
+  id,
+  placeholder,
+}: {
+  value: string | null;
+  onChange: (value: string | null) => void;
+  id: string;
+  placeholder: string;
+}) {
+  const override = value !== null;
+
+  return (
+    <InputGroup>
+      <InputGroup.ButtonWrapper>
+        <Button
+          color="light"
+          size="medium"
+          className={clsx('!ml-0', { active: !override })}
+          onClick={() => onChange(null)}
+        >
+          Default
+        </Button>
+        <Button
+          color="light"
+          size="medium"
+          className={clsx({ active: override })}
+          onClick={() => onChange('')}
+        >
+          Override
+        </Button>
+      </InputGroup.ButtonWrapper>
+      <InputGroup.Input
+        disabled={!override}
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        id={id}
+        placeholder={placeholder}
+      />
+    </InputGroup>
+  );
+}

app/react/docker/containers/CreateView/CommandsTab/index.ts

@@ -0,0 +1,14 @@
+import { validation } from './validation';
+import { toRequest } from './toRequest';
+import { toViewModel, getDefaultViewModel } from './toViewModel';
+
+export { CommandsTab } from './CommandsTab';
+export { validation as commandsTabValidation } from './validation';
+export { type Values as CommandsTabValues } from './types';
+
+export const commandsTabUtils = {
+  toRequest,
+  toViewModel,
+  validation,
+  getDefaultViewModel,
+};

app/react/docker/containers/CreateView/CommandsTab/toRequest.ts

@@ -0,0 +1,60 @@
+import { commandStringToArray } from '@/docker/helpers/containers';
+
+import { CreateContainerRequest } from '../types';
+
+import { Values } from './types';
+import { LogConfig } from './LoggerConfig';
+import { ConsoleConfig, ConsoleSetting } from './ConsoleSettings';
+
+export function toRequest(
+  oldConfig: CreateContainerRequest,
+  values: Values
+): CreateContainerRequest {
+  const config = {
+    ...oldConfig,
+
+    HostConfig: {
+      ...oldConfig.HostConfig,
+      LogConfig: getLogConfig(values.logConfig),
+    },
+    User: values.user,
+    WorkingDir: values.workingDir,
+    ...getConsoleConfig(values.console),
+  };
+
+  if (values.cmd) {
+    config.Cmd = commandStringToArray(values.cmd);
+  }
+
+  if (values.entrypoint) {
+    config.Entrypoint = commandStringToArray(values.entrypoint);
+  }
+
+  return config;
+
+  function getLogConfig(
+    value: LogConfig
+  ): CreateContainerRequest['HostConfig']['LogConfig'] {
+    return {
+      Type: value.type,
+      Config: Object.fromEntries(
+        value.options.map(({ option, value }) => [option, value])
+      ),
+      // docker types - requires union while it should allow also custom string for custom plugins
+    } as CreateContainerRequest['HostConfig']['LogConfig'];
+  }
+
+  function getConsoleConfig(value: ConsoleSetting): ConsoleConfig {
+    switch (value) {
+      case 'both':
+        return { OpenStdin: true, Tty: true };
+      case 'interactive':
+        return { OpenStdin: true, Tty: false };
+      case 'tty':
+        return { OpenStdin: false, Tty: true };
+      case 'none':
+      default:
+        return { OpenStdin: false, Tty: false };
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import { HostConfig } from 'docker-types/generated/1.41';
+
+import { commandArrayToString } from '@/docker/helpers/containers';
+
+import { ContainerJSON } from '../../queries/container';
+
+import { ConsoleConfig, ConsoleSetting } from './ConsoleSettings';
+import { LogConfig } from './LoggerConfig';
+import { Values } from './types';
+
+export function getDefaultViewModel(): Values {
+  return {
+    cmd: null,
+    entrypoint: null,
+    user: '',
+    workingDir: '',
+    console: 'none',
+    logConfig: getLogConfig(),
+  };
+}
+
+export function toViewModel(config: ContainerJSON): Values {
+  if (!config.Config) {
+    return getDefaultViewModel();
+  }
+
+  return {
+    cmd: config.Config.Cmd ? commandArrayToString(config.Config.Cmd) : null,
+    entrypoint: config.Config.Entrypoint
+      ? commandArrayToString(config.Config.Entrypoint)
+      : null,
+    user: config.Config.User || '',
+    workingDir: config.Config.WorkingDir || '',
+    console: config ? getConsoleSetting(config.Config) : 'none',
+    logConfig: getLogConfig(config.HostConfig?.LogConfig),
+  };
+}
+
+function getLogConfig(value?: HostConfig['LogConfig']): LogConfig {
+  if (!value || !value.Type) {
+    return {
+      type: 'none',
+      options: [],
+    };
+  }
+
+  return {
+    type: value.Type,
+    options: Object.entries(value.Config || {}).map(([option, value]) => ({
+      option,
+      value,
+    })),
+  };
+}
+
+function getConsoleSetting(value: ConsoleConfig): ConsoleSetting {
+  if (value.OpenStdin && value.Tty) {
+    return 'both';
+  }
+
+  if (!value.OpenStdin && value.Tty) {
+    return 'tty';
+  }
+
+  if (value.OpenStdin && !value.Tty) {
+    return 'interactive';
+  }
+
+  return 'none';
+}

app/react/docker/containers/CreateView/CommandsTab/types.ts

@@ -0,0 +1,11 @@
+import { ConsoleSetting } from './ConsoleSettings';
+import { LogConfig } from './LoggerConfig';
+
+export interface Values {
+  cmd: string | null;
+  entrypoint: string | null;
+  workingDir: string;
+  user: string;
+  console: ConsoleSetting;
+  logConfig: LogConfig;
+}

app/react/docker/containers/CreateView/CommandsTab/validation.ts

@@ -0,0 +1,16 @@
+import { object, SchemaOf, string } from 'yup';
+
+import { validation as consoleValidation } from './ConsoleSettings';
+import { validation as logConfigValidation } from './LoggerConfig';
+import { Values } from './types';
+
+export function validation(): SchemaOf<Values> {
+  return object({
+    cmd: string().nullable().default(''),
+    entrypoint: string().nullable().default(''),
+    logConfig: logConfigValidation(),
+    console: consoleValidation(),
+    user: string().default(''),
+    workingDir: string().default(''),
+  });
+}

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

@@ -0,0 +1,10 @@
+import {
+  ContainerConfig,
+  HostConfig,
+  NetworkingConfig,
+} from 'docker-types/generated/1.41';
+
+export interface CreateContainerRequest extends ContainerConfig {
+  HostConfig: HostConfig;
+  NetworkingConfig: NetworkingConfig;
+}

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

@@ -1,4 +1,4 @@
-import { useInfo } from '@/docker/services/system.service';
+import { useInfo } from '@/react/docker/proxy/queries/useInfo';
 import { Environment } from '@/react/portainer/environments/types';
 import { isAgentEnvironment } from '@/react/portainer/environments/utils';
 

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

@@ -0,0 +1,116 @@
+import { useQuery } from 'react-query';
+import {
+  ContainerConfig,
+  ContainerState,
+  GraphDriverData,
+  HostConfig,
+  MountPoint,
+  NetworkSettings,
+} from 'docker-types/generated/1.41';
+
+import { PortainerResponse } from '@/react/docker/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { ContainerId } from '@/react/docker/containers/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
+
+import { urlBuilder } from '../containers.service';
+
+import { queryKeys } from './query-keys';
+
+export interface ContainerJSON {
+  /**
+   * The ID of the container
+   */
+  Id?: string;
+  /**
+   * The time the container was created
+   */
+  Created?: string;
+  /**
+   * The path to the command being run
+   */
+  Path?: string;
+  /**
+   * The arguments to the command being run
+   */
+  Args?: Array<string>;
+  State?: ContainerState;
+  /**
+   * The container's image ID
+   */
+  Image?: string;
+  ResolvConfPath?: string;
+  HostnamePath?: string;
+  HostsPath?: string;
+  LogPath?: string;
+  Name?: string;
+  RestartCount?: number;
+  Driver?: string;
+  Platform?: string;
+  MountLabel?: string;
+  ProcessLabel?: string;
+  AppArmorProfile?: string;
+  /**
+   * IDs of exec instances that are running in the container.
+   */
+  ExecIDs?: Array<string> | null;
+  HostConfig?: HostConfig;
+  GraphDriver?: GraphDriverData;
+  /**
+   * The size of files that have been created or changed by this
+   * container.
+   *
+   */
+  SizeRw?: number;
+  /**
+   * The total size of all the files in this container.
+   */
+  SizeRootFs?: number;
+  Mounts?: Array<MountPoint>;
+  Config?: ContainerConfig;
+  NetworkSettings?: NetworkSettings;
+}
+
+export function useContainer(
+  environmentId: EnvironmentId,
+  containerId: ContainerId
+) {
+  return useQuery(
+    queryKeys.container(environmentId, containerId),
+    () => getContainer(environmentId, containerId),
+    {
+      meta: {
+        title: 'Failure',
+        message: 'Unable to retrieve container',
+      },
+    }
+  );
+}
+
+export type ContainerResponse = PortainerResponse<ContainerJSON>;
+
+async function getContainer(
+  environmentId: EnvironmentId,
+  containerId: ContainerId
+) {
+  try {
+    const { data } = await axios.get<ContainerResponse>(
+      urlBuilder(environmentId, containerId, 'json')
+    );
+    return parseViewModel(data);
+  } catch (error) {
+    throw parseAxiosError(error as Error, 'Unable to retrieve container');
+  }
+}
+
+export function parseViewModel(response: ContainerResponse) {
+  const resourceControl =
+    response.Portainer?.ResourceControl &&
+    new ResourceControlViewModel(response?.Portainer?.ResourceControl);
+
+  return {
+    ...response,
+    ResourceControl: resourceControl,
+  };
+}

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

@@ -9,7 +9,7 @@ import { withGlobalError } from '@/react-tools/react-query';
 
 import { urlBuilder } from '../containers.service';
 import { DockerContainerResponse } from '../types/response';
-import { parseViewModel } from '../utils';
+import { parseListViewModel } from '../utils';
 
 import { Filters } from './types';
 import { queryKeys } from './query-keys';
@@ -58,7 +58,7 @@ async function getContainers(
           : undefined,
       }
     );
-    return data.map((c) => parseViewModel(c));
+    return data.map((c) => parseListViewModel(c));
   } catch (error) {
     throw parseAxiosError(error as Error, 'Unable to retrieve containers');
   }

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

@@ -1,75 +1,15 @@
+import {
+  EndpointSettings,
+  MountPoint,
+  Port,
+} from 'docker-types/generated/1.41';
+
 import { PortainerMetadata } from '@/react/docker/types';
 
-interface EndpointIPAMConfig {
-  IPv4Address?: string;
-  IPv6Address?: string;
-  LinkLocalIPs?: string[];
-}
-
-interface EndpointSettings {
-  IPAMConfig?: EndpointIPAMConfig;
-  Links: string[];
-  Aliases: string[];
-  NetworkID: string;
-  EndpointID: string;
-  Gateway: string;
-  IPAddress: string;
-  IPPrefixLen: number;
-  IPv6Gateway: string;
-  GlobalIPv6Address: string;
-  GlobalIPv6PrefixLen: number;
-  MacAddress: string;
-  DriverOpts: { [key: string]: string };
-}
-
 export interface SummaryNetworkSettings {
   Networks: { [key: string]: EndpointSettings | undefined };
 }
 
-interface PortResponse {
-  IP?: string;
-  PrivatePort: number;
-  PublicPort?: number;
-  Type: string;
-}
-
-enum MountPropagation {
-  // PropagationRPrivate RPRIVATE
-  RPrivate = 'rprivate',
-  // PropagationPrivate PRIVATE
-  Private = 'private',
-  // PropagationRShared RSHARED
-  RShared = 'rshared',
-  // PropagationShared SHARED
-  Shared = 'shared',
-  // PropagationRSlave RSLAVE
-  RSlave = 'rslave',
-  // PropagationSlave SLAVE
-  Slave = 'slave',
-}
-
-enum MountType {
-  // TypeBind is the type for mounting host dir
-  Bind = 'bind',
-  // TypeVolume is the type for remote storage volumes
-  Volume = 'volume',
-  // TypeTmpfs is the type for mounting tmpfs
-  Tmpfs = 'tmpfs',
-  // TypeNamedPipe is the type for mounting Windows named pipes
-  NamedPipe = 'npipe',
-}
-
-interface MountPoint {
-  Type?: MountType;
-  Name?: string;
-  Source: string;
-  Destination: string;
-  Driver?: string;
-  Mode: string;
-  RW: boolean;
-  Propagation: MountPropagation;
-}
-
 export interface Health {
   Status: 'healthy' | 'unhealthy' | 'starting';
   FailingStreak: number;
@@ -83,7 +23,7 @@ export interface DockerContainerResponse {
   ImageID: string;
   Command: string;
   Created: number;
-  Ports: PortResponse[];
+  Ports: Port[];
   SizeRw?: number;
   SizeRootFs?: number;
   Labels: { [key: string]: string };

app/react/docker/containers/utils.ts

@@ -2,13 +2,13 @@ import _ from 'lodash';
 
 import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 import { EnvironmentId } from '@/react/portainer/environments/types';
-import { useInfo } from '@/docker/services/system.service';
+import { useInfo } from '@/react/docker/proxy/queries/useInfo';
 import { useEnvironment } from '@/react/portainer/environments/queries';
 
 import { DockerContainer, ContainerStatus } from './types';
 import { DockerContainerResponse } from './types/response';
 
-export function parseViewModel(
+export function parseListViewModel(
   response: DockerContainerResponse
 ): DockerContainer {
   const resourceControl =

app/react/docker/proxy/queries/useInfo.ts

@@ -0,0 +1,43 @@
+import { useQuery } from 'react-query';
+import { SystemInfo } from 'docker-types/generated/1.41';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from './build-url';
+
+export async function getInfo(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<SystemInfo>(
+      buildUrl(environmentId, 'info')
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve version');
+  }
+}
+
+export function useInfo<TSelect = SystemInfo>(
+  environmentId: EnvironmentId,
+  select?: (info: SystemInfo) => TSelect
+) {
+  return useQuery(
+    ['environment', environmentId, 'docker', 'info'],
+    () => getInfo(environmentId),
+    {
+      select,
+    }
+  );
+}
+
+export function useIsStandAlone(environmentId: EnvironmentId) {
+  const query = useInfo(environmentId, (info) => !info.Swarm?.NodeID);
+
+  return !!query.data;
+}
+
+export function useIsSwarm(environmentId: EnvironmentId) {
+  const query = useInfo(environmentId, (info) => !!info.Swarm?.NodeID);
+
+  return !!query.data;
+}

app/react/docker/proxy/queries/useServicePlugins.ts

@@ -0,0 +1,114 @@
+import { useQuery } from 'react-query';
+import {
+  Plugin,
+  PluginInterfaceType,
+  PluginsInfo,
+} from 'docker-types/generated/1.41';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from '../../queries/utils/root';
+
+import { buildUrl } from './build-url';
+import { useInfo } from './useInfo';
+
+export async function getPlugins(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<Array<Plugin>>(
+      buildUrl(environmentId, 'plugins')
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Unable to retrieve plugins');
+  }
+}
+
+function usePlugins(
+  environmentId: EnvironmentId,
+  { enabled }: { enabled?: boolean } = {}
+) {
+  return useQuery(
+    queryKeys.plugins(environmentId),
+    () => getPlugins(environmentId),
+    { enabled }
+  );
+}
+
+export function useServicePlugins(
+  environmentId: EnvironmentId,
+  systemOnly: boolean,
+  pluginType: keyof PluginsInfo,
+  pluginVersion: string
+) {
+  const systemPluginsQuery = useInfo(environmentId, (info) => info.Plugins);
+  const pluginsQuery = usePlugins(environmentId, { enabled: !systemOnly });
+
+  return {
+    data: aggregateData(),
+    isLoading: systemPluginsQuery.isLoading || pluginsQuery.isLoading,
+  };
+
+  function aggregateData() {
+    if (!systemPluginsQuery.data) {
+      return null;
+    }
+
+    const systemPlugins = systemPluginsQuery.data[pluginType] || [];
+
+    if (systemOnly) {
+      return systemPlugins;
+    }
+
+    const plugins =
+      pluginsQuery.data
+        ?.filter(
+          (plugin) =>
+            plugin.Enabled &&
+            // docker has an error in their types, so we need to cast to unknown first
+            // see https://docs.docker.com/engine/api/v1.41/#tag/Plugin/operation/PluginList
+            plugin.Config.Interface.Types.includes(
+              pluginVersion as unknown as PluginInterfaceType
+            )
+        )
+        .map((plugin) => plugin.Name) || [];
+
+    return [...systemPlugins, ...plugins];
+  }
+}
+
+export function useLoggingPlugins(
+  environmentId: EnvironmentId,
+  systemOnly: boolean
+) {
+  return useServicePlugins(
+    environmentId,
+    systemOnly,
+    'Log',
+    'docker.logdriver/1.0'
+  );
+}
+
+export function useVolumePlugins(
+  environmentId: EnvironmentId,
+  systemOnly: boolean
+) {
+  return useServicePlugins(
+    environmentId,
+    systemOnly,
+    'Volume',
+    'docker.volumedriver/1.0'
+  );
+}
+
+export function useNetworkPlugins(
+  environmentId: EnvironmentId,
+  systemOnly: boolean
+) {
+  return useServicePlugins(
+    environmentId,
+    systemOnly,
+    'Network',
+    'docker.networkdriver/1.0'
+  );
+}

app/react/docker/proxy/queries/useVersion.ts

@@ -0,0 +1,34 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { buildUrl } from './build-url';
+
+export interface VersionResponse {
+  ApiVersion: string;
+}
+
+export async function getVersion(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<VersionResponse>(
+      buildUrl(environmentId, 'version')
+    );
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve version');
+  }
+}
+
+export function useVersion<TSelect = VersionResponse>(
+  environmentId: EnvironmentId,
+  select?: (info: VersionResponse) => TSelect
+) {
+  return useQuery(
+    ['environment', environmentId, 'docker', 'version'],
+    () => getVersion(environmentId),
+    {
+      select,
+    }
+  );
+}

app/react/docker/queries/utils/root.ts

@@ -0,0 +1,19 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export const queryKeys = {
+  root: (environmentId: EnvironmentId) => ['docker', environmentId] as const,
+  snapshot: (environmentId: EnvironmentId) =>
+    [...queryKeys.root(environmentId), 'snapshot'] as const,
+  snapshotQuery: (environmentId: EnvironmentId) =>
+    [...queryKeys.snapshot(environmentId)] as const,
+  plugins: (environmentId: EnvironmentId) =>
+    [...queryKeys.root(environmentId), 'plugins'] as const,
+};
+
+export function buildDockerUrl(environmentId: EnvironmentId) {
+  return `/docker/${environmentId}`;
+}
+
+export function buildDockerSnapshotUrl(environmentId: EnvironmentId) {
+  return `${buildDockerUrl(environmentId)}/snapshot`;
+}

app/react/docker/types.ts

@@ -8,3 +8,7 @@ export interface PortainerMetadata {
   ResourceControl?: ResourceControlResponse;
   Agent?: AgentMetadata;
 }
+
+export type PortainerResponse<T> = T & {
+  Portainer?: PortainerMetadata;
+};

app/react/sidebar/DockerSidebar.tsx

@@ -16,7 +16,8 @@ import {
   type EnvironmentId,
 } from '@/react/portainer/environments/types';
 import { Authorized, useUser, isEnvironmentAdmin } from '@/react/hooks/useUser';
-import { useInfo, useVersion } from '@/docker/services/system.service';
+import { useInfo } from '@/react/docker/proxy/queries/useInfo';
+import { useVersion } from '@/react/docker/proxy/queries/useVersion';
 
 import { SidebarItem } from './SidebarItem';
 import { DashboardLink } from './items/DashboardLink';

app/setup-tests/setup-handlers/docker.ts

@@ -1,14 +1,20 @@
 import { DefaultBodyType, PathParams, rest } from 'msw';
+import { SystemInfo } from 'docker-types/generated/1.41';
 
-import {
-  InfoResponse,
-  VersionResponse,
-} from '@/docker/services/system.service';
+import { VersionResponse } from '@/react/docker/proxy/queries/useVersion';
 
 export const dockerHandlers = [
-  rest.get<DefaultBodyType, PathParams, InfoResponse>(
+  rest.get<DefaultBodyType, PathParams, SystemInfo>(
     '/api/endpoints/:endpointId/docker/info',
-    (req, res, ctx) => res(ctx.json({}))
+    (req, res, ctx) =>
+      res(
+        ctx.json({
+          Plugins: { Authorization: [], Log: [], Network: [], Volume: [] },
+          MemTotal: 0,
+          NCPU: 0,
+          Runtimes: { runc: { path: 'runc' } },
+        })
+      )
   ),
   rest.get<DefaultBodyType, PathParams, VersionResponse>(
     '/api/endpoints/:endpointId/docker/version',