feat(docker): label gpu as nvidia only [EE-6999] (#11729)

app/docker/views/docker-features-configuration/docker-features-configuration.html

@@ -154,9 +154,12 @@
           <!-- other -->
           <div class="col-sm-12 form-section-title"> Other </div>
           <div class="form-group">
-            <div class="col-sm-12">
+            <div class="col-sm-12" ng-if="!$ctrl.isDockerStandaloneEnv">
-              <gpus-insights></gpus-insights>
+              <text-tip children="'Showing GPU in the UI is currently only available with Docker Standalone and is limited to NVIDIA graphics cards.'" color="'blue'" />
             </div>
+          </div>
+
+          <div class="form-group">
             <div class="col-sm-12">
               <por-switch-field
                 label="'Show GPU in the UI'"
@@ -168,11 +171,20 @@
                 disabled="!$ctrl.isDockerStandaloneEnv"
               ></por-switch-field>
             </div>
-            <div class="col-sm-12">
+
-              <div class="pl-4">
+            <div ng-if="$ctrl.state.enableGPUManagement">
-                <gpus-list ng-if="$ctrl.state.enableGPUManagement && $ctrl.endpoint" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
+              <div class="col-sm-12">
+                <text-tip children="'GPU support is currently limited to NVIDIA graphics cards only.'" color="'blue'" />
+              </div>
+              <div class="col-sm-12">
+                <div class="pl-4">
+                  <gpus-list ng-if="$ctrl.state.enableGPUManagement" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
+                </div>
               </div>
             </div>
+          </div>
+
+          <div class="form-group">
             <div class="col-sm-12">
               <por-switch-field
                 label="'Show image up to date indicators for Stacks, Services and Containers'"

app/portainer/react/components/index.ts

@@ -37,6 +37,7 @@ import { TagButton } from '@@/TagButton';
 import { BETeaserButton } from '@@/BETeaserButton';
 import { CodeEditor } from '@@/CodeEditor';
 import { HelpLink } from '@@/HelpLink';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -234,6 +235,17 @@ export const ngModule = angular
       'onVersionChange',
     ])
   )
+  .component(
+    'textTip',
+    r2a(TextTip, [
+      'className',
+      'color',
+      'icon',
+      'inline',
+      'children',
+      'childrenWrapperClassName',
+    ])
+  )
   .component(
     'groupAssociationTable',
     r2a(withReactQuery(GroupAssociationTable), [

app/react/components/Tip/TextTip/TextTip.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { AlertCircle } from 'lucide-react';
 import clsx from 'clsx';
 
@@ -12,6 +12,7 @@ export interface Props {
   className?: string;
   childrenWrapperClassName?: string;
   inline?: boolean;
+  children: ReactNode;
 }
 
 export function TextTip({
@@ -20,8 +21,8 @@ export function TextTip({
   inline = true,
   className,
   children,
-  childrenWrapperClassName = 'text-muted',
+  childrenWrapperClassName,
-}: PropsWithChildren<Props>) {
+}: Props) {
   return (
     <div
       className={clsx(
@@ -32,7 +33,6 @@ export function TextTip({
       role="status"
     >
       <Icon icon={icon} mode={getMode(color)} className="!mt-0.5 flex-none" />
-
       <span className={childrenWrapperClassName}>{children}</span>
     </div>
   );