Proposed changes related to #36: Accordion style layout of composite …

…resources (#67) * Accordion style presentation of composite resources. * Resolve linter issue: call useState hook conditionally
komodorio · Aug 26, 2024 · 2b804b3 · 2b804b3
1 parent e04d6ec
commit 2b804b3
Showing 1 changed file with 80 additions and 6 deletions.
diff --git 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";
@@ -44,6 +45,7 @@ export default function CompositeResourcesList({items}: ItemListProps) {
     const [isDrawerOpen, setDrawerOpen] = useState<boolean>(focusedName != undefined);
     const nullFocused = {metadata: {name: ""}, kind: "", apiVersion: ""};
     const [focused, setFocused] = useState<K8sResource>(nullFocused);
+    const [expandedItems, setExpandedItems] = useState<{[itemIndex: string]: boolean}>({});
     const navigate = useNavigate();
 
     const onClose = () => {
@@ -98,13 +100,85 @@ 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 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>