From 39776a2627d04567efcace2d4d9bae021ea96f8f Mon Sep 17 00:00:00 2001
From: Ben Carver <bcarver2@gmu.edu>
Date: Fri, 1 Mar 2024 14:30:30 -0500
Subject: [PATCH] Added tooltips to buttons.

---
 src/app/Components/KernelList.tsx     | 61 ++++++++++++++++++---------
 src/app/Components/KernelSpecList.tsx |  9 ++--
 src/app/Components/NodeList.tsx       |  9 ++--
 3 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/app/Components/KernelList.tsx b/src/app/Components/KernelList.tsx
index d99bfb7e..e42436ee 100644
--- a/src/app/Components/KernelList.tsx
+++ b/src/app/Components/KernelList.tsx
@@ -35,6 +35,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
   ToolbarToggleGroup,
+  Tooltip,
 } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
@@ -291,15 +292,21 @@ export const KernelList: React.FunctionComponent = () => {
     <React.Fragment>
       <ToolbarGroup variant="icon-button-group">
         <ToolbarItem>
-          <Button id="create-kernel-button" variant="plain" onClick={fetchKernels}>
-            <PlusIcon />
-          </Button>
-          <Button id="delete-kernels-button" variant="plain" onClick={fetchKernels}>
-            <TrashIcon />
-          </Button>
-          <Button id="refresh-kernels-button" variant="plain" onClick={fetchKernels}>
-            <SyncIcon />
-          </Button>
+          <Tooltip exitDelay={75} content={<div>Create a new kernel.</div>}>
+            <Button id="create-kernel-button" variant="plain" onClick={fetchKernels}>
+              <PlusIcon />
+            </Button>
+          </Tooltip>
+          <Tooltip exitDelay={75} content={<div>Delete selected kernels.</div>}>
+            <Button id="delete-kernels-button" variant="plain" onClick={fetchKernels}>
+              <TrashIcon />
+            </Button>
+          </Tooltip>
+          <Tooltip exitDelay={75} content={<div>Refresh kernels.</div>}>
+            <Button id="refresh-kernels-button" variant="plain" onClick={fetchKernels}>
+              <SyncIcon />
+            </Button>
+          </Tooltip>
         </ToolbarItem>
       </ToolbarGroup>
     </React.Fragment>
@@ -323,14 +330,18 @@ export const KernelList: React.FunctionComponent = () => {
             <Td dataLabel="Pod">{replica.podId}</Td>
             <Td dataLabel="Node">{replica.nodeId}</Td>
             <Td>
-              <Button variant={'link'} icon={<CodeIcon />}>
-                Execute
-              </Button>
+              <Tooltip exitDelay={20} entryDelay={175} content={<div>Execute Python code on this replica.</div>}>
+                <Button variant={'link'} icon={<CodeIcon />}>
+                  Execute
+                </Button>
+              </Tooltip>
             </Td>
             <Td>
-              <Button variant={'link'} icon={<MigrationIcon />}>
-                Migrate
-              </Button>
+              <Tooltip exitDelay={20} entryDelay={175} content={<div>Migrate this replica to another node.</div>}>
+                <Button variant={'link'} icon={<MigrationIcon />}>
+                  Migrate
+                </Button>
+              </Tooltip>
             </Td>
           </Tr>
         ))}
@@ -415,14 +426,22 @@ export const KernelList: React.FunctionComponent = () => {
                       >
                         <Stack>
                           <StackItem>
-                            <Button variant={'link'} icon={<CodeIcon />}>
-                              Execute
-                            </Button>
+                            <Tooltip
+                              exitDelay={75}
+                              entryDelay={250}
+                              content={<div>Execute Python code on this kernel.</div>}
+                            >
+                              <Button variant={'link'} icon={<CodeIcon />}>
+                                Execute
+                              </Button>
+                            </Tooltip>
                           </StackItem>
                           <StackItem>
-                            <Button variant={'link'} icon={<TrashIcon />} isDanger>
-                              Terminate
-                            </Button>
+                            <Tooltip exitDelay={75} entryDelay={250} content={<div>Terminate this kernel.</div>}>
+                              <Button variant={'link'} icon={<TrashIcon />} isDanger>
+                                Terminate
+                              </Button>
+                            </Tooltip>
                           </StackItem>
                         </Stack>
                       </DataListAction>,
diff --git a/src/app/Components/KernelSpecList.tsx b/src/app/Components/KernelSpecList.tsx
index 034df304..deeaa240 100644
--- a/src/app/Components/KernelSpecList.tsx
+++ b/src/app/Components/KernelSpecList.tsx
@@ -17,6 +17,7 @@ import {
   Title,
   ToolbarGroup,
   ToolbarItem,
+  Tooltip,
 } from '@patternfly/react-core';
 
 import { SyncIcon } from '@patternfly/react-icons';
@@ -97,9 +98,11 @@ export const KernelSpecList: React.FunctionComponent = () => {
   const cardHeaderActions = (
     <ToolbarGroup variant="icon-button-group">
       <ToolbarItem>
-        <Button variant="plain" onClick={fetchKernelSpecs}>
-          <SyncIcon />
-        </Button>
+        <Tooltip exitDelay={75} content={<div>Refresh kernel specs.</div>}>
+          <Button variant="plain" onClick={fetchKernelSpecs}>
+            <SyncIcon />
+          </Button>
+        </Tooltip>
       </ToolbarItem>
     </ToolbarGroup>
   );
diff --git a/src/app/Components/NodeList.tsx b/src/app/Components/NodeList.tsx
index 2130dbf3..a718baf2 100644
--- a/src/app/Components/NodeList.tsx
+++ b/src/app/Components/NodeList.tsx
@@ -28,6 +28,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
   ToolbarToggleGroup,
+  Tooltip,
 } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import GpuIcon from '@app/Icons/GpuIcon';
@@ -147,9 +148,11 @@ export const KubernetesNodeList: React.FunctionComponent = () => {
       </ToolbarToggleGroup>
       <ToolbarGroup variant="icon-button-group">
         <ToolbarItem>
-          <Button variant="plain" onClick={fetchKubernetesNodes}>
-            <SyncIcon />
-          </Button>
+          <Tooltip exitDelay={75} content={<div>Refresh nodes.</div>}>
+            <Button variant="plain" onClick={fetchKubernetesNodes}>
+              <SyncIcon />
+            </Button>
+          </Tooltip>
         </ToolbarItem>
       </ToolbarGroup>
     </React.Fragment>