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

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

@@ -1,6 +1,6 @@
 import { Box } from 'lucide-react';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
+import { ContainerListViewModel } from '@/react/docker/containers/types';
 import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 import { Environment } from '@/react/portainer/environments/types';
 
@@ -18,7 +18,7 @@ import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilter
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 import { useTableState } from '@@/datatables/useTableState';
 
-import { useContainers } from '../../queries/containers';
+import { useContainers } from '../../queries/useContainers';
 
 import { ContainersDatatableActions } from './ContainersDatatableActions';
 import { ContainersDatatableSettings } from './ContainersDatatableSettings';
@@ -75,7 +75,7 @@ export function ContainersDatatable({
           data-cy="docker-containers-datatable"
           renderTableSettings={(tableInstance) => (
             <>
-              <ColumnVisibilityMenu<DockerContainer>
+              <ColumnVisibilityMenu<ContainerListViewModel>
                 table={tableInstance}
                 onChange={(hiddenColumns) => {
                   tableState.setHiddenColumns(hiddenColumns);

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

@@ -8,7 +8,7 @@ import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request
 import {
   ContainerId,
   ContainerStatus,
-  DockerContainer,
+  ContainerListViewModel,
 } from '@/react/docker/containers/types';
 import {
   killContainer,
@@ -29,7 +29,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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { useMemo } from 'react';
 
 import { createOwnershipColumn } from '@/react/docker/components/datatable/createOwnershipColumn';
-import { DockerContainer } from '@/react/docker/containers/types';
+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 = [