[Dashboard] Fix a number of console warnings caused by incorrect usage of react keys (#10749)

* Fix a number of console warnings caused by incorrect usage of react keys

* lint

* lint

Co-authored-by: Max Fitton <max@semprehealth.com>

python/ray/dashboard/client/src/pages/dashboard/logical-view/Actor.tsx

@@ -219,7 +219,7 @@ const Actor: React.FC<ActorProps> = ({ actor }) => {
           <React.Fragment>
             Actor {actor.actorId} (Profile for
             {[10, 30, 60].map((duration) => (
-              <React.Fragment>
+              <React.Fragment key={duration}>
                 {" "}
                 <span
                   className={classes.action}
@@ -238,7 +238,7 @@ const Actor: React.FC<ActorProps> = ({ actor }) => {
             {Object.entries(profiling).map(
               ([profilingId, { startTime, latestResponse }]) =>
                 latestResponse !== null && (
-                  <React.Fragment>
+                  <React.Fragment key={profilingId}>
                     (
                     {latestResponse.status === "pending" ? (
                       `Profiling for ${Math.round(

python/ray/dashboard/client/src/pages/dashboard/logical-view/ActorClassGroup.tsx

@@ -48,8 +48,12 @@ const ActorClassGroup: React.FC<ActorClassGroupProps> = ({
   const [expanded, setExpanded] = useState(false);
   const toggleExpanded = () => setExpanded(!expanded);
   const entries = actorGroup.entries.map((actor, i) => (
-    <Box component="div" className={classes.actorEntry}>
-      <Actor actor={actor} key={actor.actorId ?? i} />
+    <Box
+      component="div"
+      className={classes.actorEntry}
+      key={actor.actorId ?? i}
+    >
+      <Actor actor={actor} />
     </Box>
   ));
   const { Alive, PendingResources, Infeasible } = ActorState;

python/ray/dashboard/client/src/pages/dashboard/logical-view/ActorDetailsPane.tsx

@@ -48,7 +48,12 @@ const ActorDetailsPane: React.FC<ActorDetailsPaneProps> = ({
           ({ label, value, tooltip }) =>
             value &&
             value.length > 0 && (
-              <LabeledDatum label={label} datum={value} tooltip={tooltip} />
+              <LabeledDatum
+                key={label}
+                label={label}
+                datum={value}
+                tooltip={tooltip}
+              />
             ),
         )}
       </Grid>

python/ray/dashboard/client/src/pages/dashboard/memory/Memory.tsx

@@ -44,6 +44,7 @@ const PyStackTrace: React.FC<{ stackTrace: string }> = ({ stackTrace }) => {
     <Typography
       variant={i === 0 ? "h6" : "subtitle2"}
       style={{ marginLeft: `${i}em` }}
+      key={i}
     >
       {i !== 0 && <SubdirectoryArrowRightIcon />}
       {frame}

python/ray/dashboard/client/src/pages/dashboard/memory/MemoryTableRow.tsx

@@ -6,11 +6,10 @@ import { StyledTableCell } from "../../../common/TableCell";
 
 type Props = {
   memoryTableEntry: MemoryTableEntry;
-  key: string;
 };
 
 export const MemoryTableRow = (props: Props) => {
-  const { memoryTableEntry, key } = props;
+  const { memoryTableEntry } = props;
   const object_size =
     memoryTableEntry.object_size === -1
       ? "?"
@@ -25,9 +24,9 @@ export const MemoryTableRow = (props: Props) => {
     memoryTableEntry.call_site,
   ];
   return (
-    <TableRow hover key={key}>
+    <TableRow hover>
       {memoryTableEntryValues.map((value, index) => (
-        <StyledTableCell key={`${key}-${index}`}>{value}</StyledTableCell>
+        <StyledTableCell key={`${index}`}>{value}</StyledTableCell>
       ))}
     </TableRow>
   );

python/ray/dashboard/client/src/pages/dashboard/node-info/NodeWorkerRow.tsx

@@ -4,7 +4,6 @@ import { StyledTableCell } from "../../../common/TableCell";
 import { WorkerFeatureData, WorkerFeatureRenderFn } from "./features/types";
 
 type NodeWorkerRowProps = {
-  key: string | number;
   features: WorkerFeatureRenderFn[];
   data: WorkerFeatureData;
 };
@@ -12,11 +11,10 @@ type NodeWorkerRowProps = {
 export const NodeWorkerRow: React.FC<NodeWorkerRowProps> = ({
   features,
   data,
-  key,
 }) => {
   const { node, worker, rayletWorker } = data;
   return (
-    <TableRow hover key={key}>
+    <TableRow hover>
       <StyledTableCell />
       {features.map((WorkerFeature, index) => (
         <StyledTableCell key={index}>

python/ray/dashboard/client/src/pages/dashboard/node-info/TotalRow.tsx

@@ -55,7 +55,7 @@ const TotalRow: React.FC<TotalRowProps> = ({
             <ClusterFeature nodes={nodes} plasmaStats={plasmaStats} />
           </TableCell>
         ) : (
-          <StyledTableCell />
+          <StyledTableCell key={index} />
         ),
       )}
     </TableRow>

python/ray/dashboard/tests/test_node_stats.py

@@ -42,6 +42,7 @@ def test_basic(ray_start_with_dashboard):
 
     assert len(client_stats) == 1
     client = client_stats[0]
+    print(client)
     assert len(client["workers"]) == 1