From 9797201c2af2026727d74ec5066e1a35277a4ac3 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:38:27 -0600
Subject: [PATCH] feat(docker): label gpu as nvidia only [EE-6999] (#11729)

---
 .../docker-features-configuration.html        | 22 ++++++++++++++-----
 app/portainer/react/components/index.ts       | 12 ++++++++++
 app/react/components/Tip/TextTip/TextTip.tsx  |  8 +++----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html
index 9e3bf854f..dab4efa2d 100644
--- a/app/docker/views/docker-features-configuration/docker-features-configuration.html
+++ b/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">
-              <gpus-insights></gpus-insights>
+            <div class="col-sm-12" ng-if="!$ctrl.isDockerStandaloneEnv">
+              <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">
-                <gpus-list ng-if="$ctrl.state.enableGPUManagement && $ctrl.endpoint" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
+
+            <div ng-if="$ctrl.state.enableGPUManagement">
+              <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'"
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index 705962997..81bfc5850 100644
--- a/app/portainer/react/components/index.ts
+++ b/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), [
diff --git a/app/react/components/Tip/TextTip/TextTip.tsx b/app/react/components/Tip/TextTip/TextTip.tsx
index 24618f594..afcace5e6 100644
--- a/app/react/components/Tip/TextTip/TextTip.tsx
+++ b/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',
-}: PropsWithChildren<Props>) {
+  childrenWrapperClassName,
+}: 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>
   );