89 lines
3.3 KiB
JavaScript
89 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Typography, Box } from '@mui/material';
|
|
import { secondsToTime } from './common';
|
|
|
|
const NodeList = ({ nodes, selectedNodeId, setSelectedNodeId }) => {
|
|
const handleRowClick = (key) => {
|
|
if (key === selectedNodeId) {
|
|
setSelectedNodeId(null);
|
|
return;
|
|
}
|
|
setSelectedNodeId(Number(key));
|
|
};
|
|
|
|
const getModeColor = (mode) => {
|
|
switch (mode) {
|
|
case 'OPERATIONAL':
|
|
return '';
|
|
case 'INITIALIZATION':
|
|
return 'warning.main';
|
|
case 'MAINTENANCE':
|
|
return 'secondary.main';
|
|
case 'SOFTWARE_UPDATE':
|
|
return 'success.main';
|
|
case 'OFFLINE':
|
|
return 'error.main';
|
|
default:
|
|
return 'error.main';
|
|
}
|
|
};
|
|
|
|
const renderNodeRow = (key) => {
|
|
const node = nodes[key];
|
|
const status = node.status;
|
|
const health = status.getConstant('health');
|
|
const mode = status.getConstant('mode');
|
|
const isSelected = Number(key) === Number(selectedNodeId);
|
|
return (
|
|
<TableRow
|
|
key={key}
|
|
onClick={() => handleRowClick(Number(key))}
|
|
sx={{
|
|
cursor: 'pointer',
|
|
backgroundColor: isSelected ? 'rgba(204, 120, 92, 0.08)' : 'transparent',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(245, 240, 232, 0.9)',
|
|
},
|
|
}}
|
|
>
|
|
<TableCell>{key}</TableCell>
|
|
<TableCell sx={{ width: 150 }}>{node.name}</TableCell>
|
|
<TableCell>{health}</TableCell>
|
|
<TableCell sx={{ bgcolor: getModeColor(mode), color: getModeColor(mode) ? 'common.white' : 'inherit' }}>{mode}</TableCell>
|
|
<TableCell>{secondsToTime(status.uptime_sec)}</TableCell>
|
|
<TableCell>{node.status.vendor_specific_status_code}</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
component={Paper}
|
|
sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, height: '50%', backgroundColor: 'background.paper', border: '1px solid', borderColor: 'divider' }}
|
|
>
|
|
<Box margin={1} sx={{ height: 20 }}>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, letterSpacing: 0.2 }}>Online Nodes</Typography>
|
|
</Box>
|
|
<TableContainer sx={{ overflow: 'auto' }}>
|
|
<Table stickyHeader size="small">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>NID</TableCell>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell>Health</TableCell>
|
|
<TableCell>Mode</TableCell>
|
|
<TableCell>Uptime</TableCell>
|
|
<TableCell>VSSC</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{Object.keys(nodes).map((key) => renderNodeRow(key))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default NodeList;
|