[Dashboard] Make GPU name tooltip appear when hovering over entire GP…

…U entry (#42283) * Make tooltip appear over entire GPU entry instead of just the slot number (e.g. [0]) Signed-off-by: Archit Kulkarni <[email protected]> * Lint Signed-off-by: Archit Kulkarni <[email protected]> --------- Signed-off-by: Archit Kulkarni <[email protected]>
ray-project · Jan 11, 2024 · b20a517 · b20a517
1 parent 52e71fb
commit b20a517
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/dashboard/client/src/pages/node/GPUColumn.tsx b/dashboard/client/src/pages/node/GPUColumn.tsx
@@ -23,21 +23,21 @@ export type NodeGPUEntryProps = {
 export const NodeGPUEntry: React.FC<NodeGPUEntryProps> = ({ gpu, slot }) => {
  const classes = useStyles();
  return (
- <Box className={classes.box}>
- <Tooltip title={gpu.name}>
+ <Tooltip title={gpu.name}>
+ <Box className={classes.box}>
  <RightPaddedTypography variant="body1">[{slot}]:</RightPaddedTypography>
- </Tooltip>
- {gpu.utilizationGpu !== undefined ? (
- <UsageBar
- percent={gpu.utilizationGpu}
- text={`${gpu.utilizationGpu.toFixed(1)}%`}
- />
- ) : (
- <Typography color="textSecondary" component="span" variant="inherit">
- N/A
- </Typography>
- )}
- </Box>
+  {gpu.utilizationGpu !== undefined ? (
+  <UsageBar
+  percent={gpu.utilizationGpu}
+  text={`${gpu.utilizationGpu.toFixed(1)}%`}
+ />
+ ) : (
+  <Typography color="textSecondary" component="span" variant="inherit">
+  N/A
+ </Typography>
+ )}
+ </Box>
+ </Tooltip>
  );
 };