clan/clan-core
12
4
Fork 18
Code Issues 99 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

Merge pull request 'UI: Fixed missing key tag in Grid' (#135) from Qubasa-Qubasa-main into main
All checks were successful
build / test (push) Successful in 27s
Details

Browse Source
This commit is contained in:
clan-bot 2023-08-11 22:16:07 +00:00
commit a243f97574
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
pkgs/ui/src/app/nodes/NodeList.tsx
View File

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