fix(container): EE-3995 gpus console error under stack list page (#7530)

api/http/handler/handler.go

@@ -181,6 +181,8 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		http.StripPrefix("/api", h.EndpointGroupHandler).ServeHTTP(w, r)
 	case strings.HasPrefix(r.URL.Path, "/api/kubernetes"):
 		http.StripPrefix("/api", h.KubernetesHandler).ServeHTTP(w, r)
+	case strings.HasPrefix(r.URL.Path, "/api/docker"):
+		http.StripPrefix("/api/docker", h.DockerHandler).ServeHTTP(w, r)
 
 	// Helm subpath under kubernetes -> /api/endpoints/{id}/kubernetes/helm
 	case strings.HasPrefix(r.URL.Path, "/api/endpoints/") && strings.Contains(r.URL.Path, "/kubernetes/helm"):

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

@@ -2,6 +2,7 @@ import _ from 'lodash';
 
 import { Environment } from '@/portainer/environments/types';
 import type { DockerContainer } from '@/react/docker/containers/types';
+import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
 import { TableSettingsMenu, Datatable } from '@@/datatables';
 import {
@@ -39,7 +40,8 @@ export function ContainersDatatable({
   environment,
 }: Props) {
   const settings = useStore();
-  const columns = useColumns(isHostColumnVisible);
+  const isGPUsColumnVisible = useShowGPUsColumn(environment.Id);
+  const columns = useColumns(isHostColumnVisible, isGPUsColumnVisible);
   const hidableColumns = _.compact(
     columns.filter((col) => col.canHide).map((col) => col.id)
   );

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

@@ -13,7 +13,10 @@ import { stack } from './stack';
 import { state } from './state';
 import { gpus } from './gpus';
 
-export function useColumns(isHostColumnVisible: boolean) {
+export function useColumns(
+  isHostColumnVisible: boolean,
+  isGPUsColumnVisible: boolean
+) {
   return useMemo(
     () =>
       _.compact([
@@ -25,10 +28,10 @@ export function useColumns(isHostColumnVisible: boolean) {
         created,
         ip,
         isHostColumnVisible && host,
-        gpus,
+        isGPUsColumnVisible && gpus,
         ports,
         ownership,
       ]),
-    [isHostColumnVisible]
+    [isHostColumnVisible, isGPUsColumnVisible]
   );
 }

app/react/docker/containers/utils.ts

@@ -1,4 +1,6 @@
 import _ from 'lodash';
+import { useInfo } from 'Docker/services/system.service';
+import { EnvironmentId } from 'Portainer/environments/types';
 
 import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
@@ -85,3 +87,12 @@ function createStatus(statusText = ''): ContainerStatus {
 
   return ContainerStatus.Running;
 }
+
+export function useShowGPUsColumn(environmentID: EnvironmentId) {
+  const envInfoQuery = useInfo(
+    environmentID,
+    (info) => !!info.Swarm?.NodeID && !!info.Swarm?.ControlAvailable
+  );
+
+  return envInfoQuery.data !== true && !envInfoQuery.isLoading;
+}

app/react/docker/stacks/ItemView/StackContainersDatatable.tsx

@@ -6,6 +6,7 @@ import { createStore } from '@/react/docker/containers/ListView/ContainersDatata
 import { useColumns } from '@/react/docker/containers/ListView/ContainersDatatable/columns';
 import { ContainersDatatableActions } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions';
 import { ContainersDatatableSettings } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings';
+import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
 import {
@@ -35,7 +36,8 @@ export interface Props {
 
 export function StackContainersDatatable({ environment, stackName }: Props) {
   const settings = useStore();
-  const columns = useColumns(false);
+  const isGPUsColumnVisible = useShowGPUsColumn(environment.Id);
+  const columns = useColumns(false, isGPUsColumnVisible);
   const hidableColumns = _.compact(
     columns.filter((col) => col.canHide).map((col) => col.id)
   );