From 93a34c4b8fa1cc4a9d9ba9c814056df126af787f Mon Sep 17 00:00:00 2001
From: Ehsan <eh.etesami@gmail.com>
Date: Fri, 23 Aug 2024 18:45:29 +0000
Subject: [PATCH] Accordion style presentation of composite resources.

---
 .../src/components/CompositeResourcesList.tsx | 86 +++++++++++++++++--
 1 file changed, 80 insertions(+), 6 deletions(-)

diff --git a/pkg/frontend/src/components/CompositeResourcesList.tsx b/pkg/frontend/src/components/CompositeResourcesList.tsx
index 92f0cc9..aba70f3 100644
--- a/pkg/frontend/src/components/CompositeResourcesList.tsx
+++ b/pkg/frontend/src/components/CompositeResourcesList.tsx
@@ -1,4 +1,5 @@
-import {Card, CardContent, Grid} from '@mui/material';
+import {Box, Alert, Stack, List, Card, CardContent, Grid, Accordion, AccordionSummary, AccordionDetails} from '@mui/material';
+import {ExpandMore as ExpandMoreIcon} from '@mui/icons-material';
 import {CompositeResource, CompositeResourceExtended, ItemList, K8sReference, K8sResource} from "../types.ts";
 import Typography from "@mui/material/Typography";
 import ReadySynced from "./ReadySynced.tsx";
@@ -98,13 +99,86 @@ export default function CompositeResourcesList({items}: ItemListProps) {
         )
     }
 
+    // Define Grouped Items
+    const groupedItems: { [itemIndex: string]: CompositeResource[] } = {};
+    items.items.forEach((item) => {
+        const itemIndex = item.kind
+        if (!groupedItems[itemIndex]) {
+            groupedItems[itemIndex] = [];
+        }
+        groupedItems[itemIndex].push(item);
+    });
+
+    // Accordion State
+    const [expandedItems, setExpandedItems] = useState<{[itemIndex: string]: boolean}>({});
+    const handleAccordionChange = (itemIndex: string) => {
+        setExpandedItems((prevState) => ({
+            ...prevState,
+            [itemIndex]: !prevState[itemIndex],
+        }));
+    };
+
     return (
         <>
-            <Grid container spacing={2}>
-                {items?.items?.map((item: CompositeResource) => (
-                    <ListItem item={item} key={item.metadata.name} onItemClick={onItemClick}/>
-                ))}
-            </Grid>
+            {Object.entries(groupedItems).map(([itemIndex, items]) => (    
+                <Stack key={itemIndex} className="m-1">
+                    <Accordion key={itemIndex} expanded={expandedItems[itemIndex] || false} 
+                        onChange={() => handleAccordionChange(itemIndex)}>
+                    <AccordionSummary expandIcon={<ExpandMoreIcon/>}>
+                        <Stack sx={{mt: 0.5}} direction="row" spacing={1}>
+                            <Typography variant="h6">{itemIndex}</Typography>
+                                <Box sx={{mx: 0.5}}>
+                                    <Alert sx={{py: 0, 
+                                            '& > *': {
+                                                py: '4px !important',
+                                            },}} 
+                                        severity="success">
+                                        Ready: {items.filter((item) => item.status?.conditions?.find((condition) => 
+                                            condition.status === "True" && condition.type === "Ready")).length}
+                                    </Alert>
+                                </Box>
+                                {
+                                items.filter((item) => !item.status?.conditions?.find((condition) =>
+                                    condition.status === "True" && condition.type === "Ready")).length > 0 ? (
+                                    <Box sx={{mx: 0.5}}>
+                                        <Alert sx={{py: 0, 
+                                                '& > *': {
+                                                    py: '4px !important', 
+                                                },}} 
+                                            severity="error" color="warning">
+                                            Not Ready: {items.filter((item) => !item.status?.conditions?.find((condition) =>
+                                                condition.status === "True" && condition.type === "Ready")).length}
+                                        </Alert>
+                                    </Box>
+                                    ) : null
+                                }
+                                {
+                                items.filter((item) => !item.status?.conditions?.find((condition) =>
+                                    condition.status === "True" && condition.type === "Synced")).length > 0 ? (
+                                    <Box sx={{mx: 0.5}}>
+                                        <Alert sx={{py: 0, 
+                                                '& > *': {
+                                                    py: '4px !important', 
+                                                },}} 
+                                            severity="info" color="info">
+                                            Not Synced: {items.filter((item) => !item.status?.conditions?.find((condition) =>
+                                                condition.status === "True" && condition.type === "Sync")).length}
+                                        </Alert>
+                                    </Box>
+                                    ) : null
+                                }
+                        </Stack>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <List>
+                            {items.map((item: CompositeResource) => (
+                                <ListItem item={item} key={item.metadata.name} onItemClick={onItemClick}/>
+                            ))}
+                        </List>
+                    </AccordionDetails>
+                    </Accordion>
+                </Stack>
+            ))}
             <InfoDrawer key={focused.metadata.name}
                         isOpen={isDrawerOpen} onClose={onClose} type="Composite Resource" title={title}>
                 <InfoTabs bridge={bridge} initial="relations"></InfoTabs>