From 2720f47fdb8edbc669048f509e31e936a8d8b0e7 Mon Sep 17 00:00:00 2001
From: Luis-Hebendanz <luis.nixos@gmail.com>
Date: Sat, 12 Aug 2023 00:15:06 +0200
Subject: [PATCH] UI: Fixed missing key tag in Grid

---
 pkgs/ui/src/app/nodes/NodeList.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/pkgs/ui/src/app/nodes/NodeList.tsx b/pkgs/ui/src/app/nodes/NodeList.tsx
index 1aa64fbd..cd82dced 100644
--- a/pkgs/ui/src/app/nodes/NodeList.tsx
+++ b/pkgs/ui/src/app/nodes/NodeList.tsx
@@ -200,10 +200,13 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
   }, [tableData]);
 
   const cardData = React.useMemo(() => {
-    let copy = pieData.filter((pieItem) => pieItem.value > 0);
-    const elem = { name: 'Total', value: copy.reduce((a, b) => a + b.value, 0), color: '#000000' };
-    copy.push(elem);
-    return copy;
+    return pieData.filter((pieItem) => pieItem.value > 0).concat(
+      {
+        name: 'Total',
+        value: pieData.reduce((a, b) => a + b.value, 0),
+        color: '#000000'
+      }
+    );
   }, [pieData]);
 
   const cardStack = (
@@ -279,7 +282,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
 
   return (
     <Grid2 container spacing={1} sx={debugSx}>
-      <Grid2 xs={6}>
+      <Grid2 key="Header" xs={6}>
         <Typography
           sx={{ marginLeft: 3, marginTop: 1 }}
           variant="h6"
@@ -290,26 +293,26 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
         </Typography>
       </Grid2>
       {/* Debug Controls */}
-      <Grid2 xs={6} justifyContent="right" display="flex">
+      <Grid2 key="Debug-Controls" xs={6} justifyContent="right" display="flex">
         <FormGroup>
           <FormControlLabel control={<Switch onChange={() => { setDebug(!debug) }} checked={debug} />} label="Debug" />
         </FormGroup>
       </Grid2>
 
       {/* Pie Chart Grid */}
-      <Grid2 lg={6} sm={12} display="flex" justifyContent="center" alignItems="center">
+      <Grid2 key="PieChart" lg={6} sm={12} display="flex" justifyContent="center" alignItems="center">
         <Box height={350} width={400}>
           <NodePieChart data={pieData} showLabels={matches} />
         </Box>
       </Grid2>
 
       {/* Card Stack Grid */}
-      <Grid2 lg={6} display="flex" sx={{ display: { lg: 'flex', sm: 'none' } }} >
+      <Grid2 key="CardStack" lg={6} display="flex" sx={{ display: { lg: 'flex', sm: 'none' } }} >
         {cardStack}
       </Grid2>
 
       {/*Toolbar Grid */}
-      <Grid2 xs={12}>
+      <Grid2 key="Toolbar" xs={12}>
         {isSelected ? selectedToolbar : unselectedToolbar}
       </Grid2>
 
@@ -377,7 +380,7 @@ export interface NodeTableProps {
 }
 
 export default function NodeTable(props: NodeTableProps) {
-  let {tableData} = props;
+  let { tableData } = props;
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof TableData>('status');
   const [selected, setSelected] = React.useState<string | undefined>(undefined);