add tooltip

homedepot · Jul 5, 2023 · 47a063d · 47a063d
1 parent fc4d006
commit 47a063d
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 34 deletions.
diff --git a/spin-observatory-plugin-deck/src/components/actions/PauseResumeButton.tsx b/spin-observatory-plugin-deck/src/components/actions/PauseResumeButton.tsx
@@ -6,26 +6,42 @@ import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
+import Tooltip from '@material-ui/core/Tooltip';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import React, { Fragment, useRef, useState } from 'react';
 import { gate } from '../../services/';
 
 interface IPauseResumeButtonProps {
   executionIds: string[];
   refreshExecutions: () => void;
+  pausable: boolean;
+  resumable: boolean;
 }
 
-const options = [
-  { text: 'Pause', action: gate.pauseExecutions },
-  { text: 'Resume', action: gate.resumeExecutions },
-];
-
-export const PauseResumeButton = ({ executionIds, refreshExecutions }: IPauseResumeButtonProps) => {
+export const PauseResumeButton = ({
+  executionIds,
+  refreshExecutions,
+  pausable,
+  resumable,
+}: IPauseResumeButtonProps) => {
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [hover, setHover] = useState(false);
 
+  const options = [
+    {
+      text: 'Pause',
+      action: gate.pauseExecutions,
+      tooltip: pausable ? 'pause selected executions' : 'no selected executions are running',
+    },
+    {
+      text: 'Resume',
+      action: gate.resumeExecutions,
+      tooltip: resumable ? 'resume selected executions' : 'no selected executions are paused',
+    },
+  ];
+
   const handleButtonClick = () => {
     options[selectedIndex].action(executionIds).then(() => refreshExecutions());
   };
@@ -63,34 +79,36 @@ export const PauseResumeButton = ({ executionIds, refreshExecutions }: IPauseRes
 
   return (
     <Fragment>
-      <ButtonGroup
-        onMouseEnter={handleHover}
-        onMouseLeave={handleHover}
-        variant="contained"
-        ref={anchorRef}
-        disabled={disabled}
-      >
-        <Button
-          style={{
-            color: 'white',
-            backgroundColor: computeBtnColor(),
-          }}
-          size="small"
-          onClick={handleToggle}
-        >
-          <ArrowDropDownIcon />
-        </Button>
-        <Button
-          style={{
-            width: '7rem',
-            color: 'white',
-            backgroundColor: computeBtnColor(),
-          }}
-          onClick={handleButtonClick}
+      <Tooltip title={options[selectedIndex].tooltip}>
+        <ButtonGroup
+          onMouseEnter={handleHover}
+          onMouseLeave={handleHover}
+          variant="contained"
+          ref={anchorRef}
+          disabled={disabled}
         >
-          {options[selectedIndex].text}
-        </Button>
-      </ButtonGroup>
+          <Button
+            style={{
+              color: 'white',
+              backgroundColor: computeBtnColor(),
+            }}
+            size="small"
+            onClick={handleToggle}
+          >
+            <ArrowDropDownIcon />
+          </Button>
+          <Button
+            style={{
+              width: '7rem',
+              color: 'white',
+              backgroundColor: computeBtnColor(),
+            }}
+            onClick={handleButtonClick}
+          >
+            {options[selectedIndex].text}
+          </Button>
+        </ButtonGroup>
+      </Tooltip>
       <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
         {({ TransitionProps }) => (
           <Grow

diff --git a/spin-observatory-plugin-deck/src/components/pipelines/ExecutionsTable.tsx b/spin-observatory-plugin-deck/src/components/pipelines/ExecutionsTable.tsx
@@ -72,6 +72,10 @@ export const ExecutionsTable = ({ executions, parameters, refreshExecutions }: I
 
   const isSelected = (name: string) => selectedExecutionIds.indexOf(name) !== -1;
 
+  const pausable = executions.filter((e) => e.status === 'RUNNING' && selectedExecutionIds.includes(e.id)).length > 0;
+
+  const resumable = executions.filter((e) => e.status === 'PAUSED' && selectedExecutionIds.includes(e.id)).length > 0;
+
   return (
     <TableContainer component={Paper} classes={{ root: styles.tableContainer }}>
       <Table stickyHeader>
@@ -96,7 +100,12 @@ export const ExecutionsTable = ({ executions, parameters, refreshExecutions }: I
           <TableRow>
             <TableCell colSpan={2}>
               <ActionButtonsContainer>
-                <PauseResumeButton executionIds={selectedExecutionIds} refreshExecutions={refreshExecutions} />
+                <PauseResumeButton
+                  executionIds={selectedExecutionIds}
+                  refreshExecutions={refreshExecutions}
+                  pausable={pausable}
+                  resumable={resumable}
+                />
                 <RetriggerButton
                   executions={executions.filter((e) => selectedExecutionIds.includes(e.id))}
                   refreshExecutions={refreshExecutions}