feat(gpu): rework docker GPU for UI performance [EE-4918] (#8518)

app/portainer/react/components/envronments.ts

@@ -4,7 +4,7 @@ import { r2a } from '@/react-tools/react2angular';
 import { withControlledInput } from '@/react-tools/withControlledInput';
 import { EdgeKeyDisplay } from '@/react/portainer/environments/ItemView/EdgeKeyDisplay';
 import { KVMControl } from '@/react/portainer/environments/KvmView/KVMControl';
-import { GpusList } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
+import { GpusList } from '@/react/docker/host/SetupView/GpusList';
 
 export const environmentsModule = angular
   .module('portainer.app.react.components.environments', [])

app/portainer/react/components/index.ts

@@ -25,6 +25,7 @@ import { Slider } from '@@/form-components/Slider';
 import { TagButton } from '@@/TagButton';
 import { BETeaserButton } from '@@/BETeaserButton';
 import { CodeEditor } from '@@/CodeEditor';
+import { InsightsBox } from '@@/InsightsBox';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -32,6 +33,7 @@ import { customTemplatesModule } from './custom-templates';
 import { gitFormModule } from './git-form';
 import { settingsModule } from './settings';
 import { accessControlModule } from './access-control';
+import { environmentsModule } from './envronments';
 import { envListModule } from './enviroments-list-view-components';
 
 export const componentsModule = angular
@@ -40,6 +42,7 @@ export const componentsModule = angular
     gitFormModule,
     settingsModule,
     accessControlModule,
+    environmentsModule,
     envListModule,
   ])
   .component(
@@ -74,6 +77,10 @@ export const componentsModule = angular
   .component('badge', r2a(Badge, ['type', 'className']))
   .component('fileUploadField', fileUploadField)
   .component('porSwitchField', switchField)
+  .component(
+    'insightsBox',
+    r2a(InsightsBox, ['header', 'content', 'setHtmlContent', 'insightCloseId'])
+  )
   .component(
     'passwordCheckHint',
     r2a(withReactQuery(PasswordCheckHint), [

app/portainer/services/authentication.js

@@ -36,7 +36,6 @@ angular.module('portainer.app').factory('Authentication', [
         await setUser(jwt);
         return true;
       } catch (error) {
-        console.log('Unable to initialize authentication service', error);
         return tryAutoLoginExtension();
       }
     }

app/portainer/views/endpoints/edit/endpoint.html

@@ -210,14 +210,30 @@
           </div>
           <!-- !open-amt info -->
           <!-- gpus info -->
-          <div class="col-sm-12 form-section-title">Hardware acceleration</div>
-          <gpus-list ng-if="endpoint && endpoint.Gpus" value="endpoint.Gpus" on-change="(onGpusChange)"></gpus-list>
+          <div class="mb-4">
+            <insights-box
+              ng-if="isDockerStandaloneEnv"
+              header="'GPU settings update'"
+              set-html-content="true"
+              insight-close-id="'gpu-settings-update-closed'"
+              content="'
+                  <p>
+                    From 2.18 on, the set-up of available GPUs for a Docker Standalone environment has been shifted from Add environment and Environment details to Host -> Setup, so as to align with other settings.
+                  </p>
+                  <p>
+                    A toggle has been introduced for enabling/disabling management of GPU settings in the Portainer UI - to alleviate the performance impact of showing those settings.
+                  </p>
+                  <p>
+                    The UI has been updated to clarify that GPU settings support is only for Docker Standalone (and not Docker Swarm, which was never supported in the UI).
+                  </p>'"
+            ></insights-box>
+          </div>
           <!-- gpus info -->
           <div class="form-group">
             <div class="col-sm-12">
               <button
                 type="button"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || (endpoint.TLS && ((endpoint.TLSVerify && !formValues.TLSCACert) || (endpoint.TLSClientCert && (!formValues.TLSCert || !formValues.TLSKey))))"
                 ng-click="updateEndpoint()"
                 button-spinner="state.actionInProgress"

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

@@ -9,11 +9,10 @@ import { confirmDestructive } from '@@/modals/confirm';
 import { isEdgeEnvironment } from '@/react/portainer/environments/utils';
 
 import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
-import { GpusListAngular } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
 import { confirmDisassociate } from '@/react/portainer/environments/ItemView/ConfirmDisassociateModel';
 import { buildConfirmButton } from '@@/modals/utils';
 
-angular.module('portainer.app').component('gpusList', GpusListAngular).controller('EndpointController', EndpointController);
+angular.module('portainer.app').controller('EndpointController', EndpointController);
 
 /* @ngInject */
 function EndpointController(
@@ -25,6 +24,7 @@ function EndpointController(
   clipboard,
   EndpointService,
   GroupService,
+  StateManager,
 
   Notifications,
   Authentication,
@@ -143,8 +143,6 @@ function EndpointController(
     });
   }
 
-  $scope.onGpusChange = onGpusChange;
-
   Array.prototype.indexOf = function (val) {
     for (var i = 0; i < this.length; i++) {
       if (this[i] == val) return i;
@@ -158,21 +156,6 @@ function EndpointController(
     }
   };
 
-  function onGpusChange(value) {
-    return $async(async () => {
-      $scope.endpoint.Gpus = value;
-    });
-  }
-
-  function verifyGpus() {
-    var i = ($scope.endpoint.Gpus || []).length;
-    while (i--) {
-      if ($scope.endpoint.Gpus[i].name === '' || $scope.endpoint.Gpus[i].name === null) {
-        $scope.endpoint.Gpus.splice(i, 1);
-      }
-    }
-  }
-
   $scope.updateEndpoint = async function () {
     var endpoint = $scope.endpoint;
     var securityData = $scope.formValues.SecurityFormData;
@@ -193,7 +176,6 @@ function EndpointController(
       }
     }
 
-    verifyGpus();
     var payload = {
       Name: endpoint.Name,
       PublicURL: endpoint.PublicURL,
@@ -290,6 +272,9 @@ function EndpointController(
       try {
         const [endpoint, groups, settings] = await Promise.all([EndpointService.endpoint($transition$.params().id), GroupService.groups(), SettingsService.settings()]);
 
+        const applicationState = StateManager.getState();
+        $scope.isDockerStandaloneEnv = applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE';
+
         if (endpoint.URL.indexOf('unix://') === 0 || endpoint.URL.indexOf('npipe://') === 0) {
           $scope.endpointType = 'local';
         } else {