feat(docker/container): show allocated gpus at containers list view

app/docker/containers/components/ContainersDatatable/columns/gpus.tsx

@@ -0,0 +1,12 @@
+import { Column } from 'react-table';
+
+import type { DockerContainer } from '@/docker/containers/types';
+
+export const gpus: Column<DockerContainer> = {
+  Header: 'GPUs',
+  accessor: 'Gpus',
+  id: 'gpus',
+  disableFilters: true,
+  canHide: true,
+  Filter: () => null,
+};

app/docker/containers/components/ContainersDatatable/columns/index.tsx

@@ -10,6 +10,7 @@ import { ports } from './ports';
 import { quickActions } from './quick-actions';
 import { stack } from './stack';
 import { state } from './state';
+import { gpus } from './gpus';
 
 export function useColumns() {
   return useMemo(
@@ -22,6 +23,7 @@ export function useColumns() {
       created,
       ip,
       host,
+      gpus,
       ports,
       ownership,
     ],

app/docker/containers/types.ts

@@ -49,4 +49,5 @@ export type DockerContainer = {
   Ports: Port[];
   StackName?: string;
   Image: string;
+  Gpus: string;
 };

app/docker/views/containers/containersController.js

@@ -1,4 +1,5 @@
 angular.module('portainer.docker').controller('ContainersController', ContainersController);
+import _ from 'lodash';
 
 /* @ngInject */
 function ContainersController($scope, ContainerService, Notifications, endpoint) {
@@ -8,9 +9,41 @@ function ContainersController($scope, ContainerService, Notifications, endpoint)
   $scope.getContainers = getContainers;
 
   function getContainers() {
+    $scope.containers = null;
+    $scope.containers_t = null;
     ContainerService.containers(1)
       .then(function success(data) {
-        $scope.containers = data;
+        $scope.containers_t = data;
+        if ($scope.containers_t.length === 0) {
+          $scope.containers = $scope.containers_t;
+          return;
+        }
+        for (let item of $scope.containers_t) {
+          ContainerService.container(item.Id).then(function success(data) {
+            var Id = data.Id;
+            for (var i = 0; i < $scope.containers_t.length; i++) {
+              if (Id == $scope.containers_t[i].Id) {
+                const gpuOptions = _.find(data.HostConfig.DeviceRequests, function (o) { return (o.Driver === 'nvidia' || o.Capabilities[0][0] === 'gpu') });
+                if (!gpuOptions) {
+                  $scope.containers_t[i]['Gpus'] = 'none';
+                }
+                else {
+                  let gpuStr = 'all';
+                  if (gpuOptions.Count !== -1) {
+                    gpuStr = `id:${_.join(gpuOptions.DeviceIDs, ',')}`;
+                  }
+                  $scope.containers_t[i]['Gpus'] = `${gpuStr}`;
+                }
+              }
+            }
+            for (let item of $scope.containers_t) {
+              if (!Object.keys(item).includes('Gpus')) {
+                return;
+              }
+            }
+            $scope.containers = $scope.containers_t;
+          });
+        }
       })
       .catch(function error(err) {
         Notifications.error('Failure', err, 'Unable to retrieve containers');