Skip to content

Pull Request: Fixes for NodeCard and ObjectDetail #67

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

Merged
cgalibern merged 7 commits into from
Jun 2, 2026
Merged

Pull Request: Fixes for NodeCard and ObjectDetail #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2c5ae72
fix(NodeCard): show "Not Provisioned" icon only for explicit false va…
PaulJouvanceau Jun 1, 2026
5559a1f
fix(ObjectDetail, NodeCard): improve data reactivity and action menus
PaulJouvanceau Jun 1, 2026
7adfb0b
fix(NodeCard): show "Not Provisioned" icon only for explicit false va…
PaulJouvanceau Jun 1, 2026
1eadb2f
fix(ObjectDetail, NodeCard): improve data reactivity and action menus
PaulJouvanceau Jun 1, 2026
77eb9cc
fix(eventSource): replace replay parameter with cache for better stat…
PaulJouvanceau Jun 1, 2026
244fe49
Merge remote-tracking branch 'origin/dev' into dev
PaulJouvanceau Jun 2, 2026
92d57b0
Rename NodeCard into InstanceCard
PaulJouvanceau Jun 2, 2026
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
74 changes: 20 additions & 54 deletions src/components/NodeCard.jsx → src/components/InstanceCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {forwardRef, useState} from "react";
import React, {useState} from "react";
import {
Box,
Typography,
Expand All @@ -14,28 +14,16 @@ import ArticleIcon from "@mui/icons-material/Article";
import {grey, blue, red} from "@mui/material/colors";
import logger from '../utils/logger.js';

const BoxWithRef = forwardRef((props, ref) => (
<Box ref={ref} {...props} />
));
BoxWithRef.displayName = 'BoxWithRef';

const IconButtonWithRef = forwardRef((props, ref) => (
<IconButton ref={ref} {...props} />
));
IconButtonWithRef.displayName = 'IconButtonWithRef';

const NodeCard = ({
const InstanceCard = ({
node,
nodeData = {},
selectedNodes = [],
toggleNode = () => logger.warn("toggleNode not provided"),
actionInProgress = false,
setIndividualNodeMenuAnchor = () => logger.warn("setIndividualNodeMenuAnchor not provided"),
setCurrentNode = () => logger.warn("setCurrentNode not provided"),
individualNodeMenuAnchorRef = null,
getColor = () => grey[500],
getNodeState = () => ({avail: "unknown", frozen: "unfrozen", state: null}),
parseProvisionedState = (state) => !!state,
instanceName,
onOpenLogs = () => logger.warn("onOpenLogs not provided"),
onViewInstance,
Expand All @@ -49,7 +37,7 @@ const NodeCard = ({
}

const {avail, frozen, state} = getNodeState(node);
const isInstanceNotProvisioned = nodeData?.provisioned !== undefined ? !parseProvisionedState(nodeData.provisioned) : false;
const isInstanceNotProvisioned = nodeData?.provisioned === false || nodeData?.provisioned === "false";

const handleCardClick = (e) => {
if (e.target.closest('button') || e.target.closest('input') || e.target.closest('.no-click')) {
Expand All @@ -60,8 +48,14 @@ const NodeCard = ({
}
};

const handleMenuOpen = (e) => {
e.stopPropagation();
setCurrentNode(node);
setIndividualNodeMenuAnchor(e.currentTarget);
};

return (
<BoxWithRef
<Box
sx={{
mb: 2,
display: "flex",
Expand All @@ -83,7 +77,6 @@ const NodeCard = ({
onClick={handleCardClick}
>
<Box sx={{display: "flex", alignItems: "center"}}>
{/* Bloc gauche : checkbox + nom */}
<Box sx={{display: "flex", alignItems: "center", gap: 1, flexWrap: 'wrap'}}>
<Box onClick={(e) => e.stopPropagation()} className="no-click">
<Checkbox
Expand All @@ -100,28 +93,15 @@ const NodeCard = ({
<Typography
variant="body2"
color="primary"
sx={{
fontStyle: 'italic',
ml: 1,
opacity: 0.8
}}
sx={{fontStyle: 'italic', ml: 1, opacity: 0.8}}
>
(view resources)
</Typography>
)}
</Box>
</Box>

{/* Bloc central : freeze / not provisioned / state, juste avant logs+status */}
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
ml: "auto", // pousse ce bloc + celui de droite à droite
}}
className="no-click"
>
<Box sx={{display: "flex", alignItems: "center", gap: 1, ml: "auto"}} className="no-click">
{frozen === "frozen" && (
<Tooltip title="frozen">
<AcUnitIcon sx={{fontSize: "medium", color: blue[300]}}/>
Expand All @@ -138,17 +118,9 @@ const NodeCard = ({
{state && <Typography variant="caption">{state}</Typography>}
</Box>

{/* Bloc droite : logs + rond de status + bouton d’actions, fixes */}
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 2,
}}
className="no-click"
>
<Box sx={{display: "flex", alignItems: "center", gap: 2}} className="no-click">
<Tooltip title="View instance logs">
<IconButtonWithRef
<IconButton
onClick={(e) => {
e.stopPropagation();
onOpenLogs(node, resolvedInstanceName);
Expand All @@ -157,7 +129,7 @@ const NodeCard = ({
aria-label={`View logs for instance ${resolvedInstanceName || node}`}
>
<ArticleIcon/>
</IconButtonWithRef>
</IconButton>
</Tooltip>

<Tooltip title={avail || "unknown"}>
Expand All @@ -169,25 +141,19 @@ const NodeCard = ({
/>
</Tooltip>

<IconButtonWithRef
onClick={(e) => {
e.stopPropagation();
e.persist();
setCurrentNode(node);
setIndividualNodeMenuAnchor(e.currentTarget);
}}
<IconButton
onClick={handleMenuOpen}
disabled={actionInProgress}
aria-label={`Node ${node} actions`}
ref={individualNodeMenuAnchorRef}
>
<Tooltip title="Actions">
<MoreVertIcon/>
</Tooltip>
</IconButtonWithRef>
</IconButton>
</Box>
</Box>
</BoxWithRef>
</Box>
);
};

export default NodeCard;
export default InstanceCard;
Loading
Loading