Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Aug 26, 2024
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93a34c4
Accordion style presentation of composite resources.
etesami Aug 23, 2024
72b5032
Resolve linter issue: call useState hook conditionally
etesami Aug 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 80 additions & 6 deletions pkg/frontend/src/components/CompositeResourcesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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>
Expand Down
Loading