AppManager: Recursively monitor dodo resources
Change-Id: I23f3014e416f5b68f8909dbfbcba27db66eaee3f
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index a568bc0..06f3307 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -16,8 +16,9 @@
const hasFatal = messages.some((m) => m.type === "FATAL");
const hasWarning = messages.some((m) => m.type === "WARNING");
const [classes, setClasses] = useState<string[]>([]);
+ const [stateClasses, setStateClasses] = useState<string[]>([]);
useEffect(() => {
- const classes = ["px-4", "py-2", "rounded-md"];
+ const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
if (hasFatal) {
classes.push("border-red-500");
} else if (hasWarning) {
@@ -30,22 +31,27 @@
} else {
classes.push("border");
}
- if (state === "processing") {
- classes.push("animate-pulse");
- } else if (state === "success") {
- classes.push("bg-green-500");
- } else if (state === "failure") {
- classes.push("bg-red-500");
- } else {
- classes.push("bg-white");
- }
setClasses(classes);
- }, [selected, hasFatal, hasWarning, state, setClasses]);
+ let stateClasses: string[] = [];
+ if (state === "processing") {
+ stateClasses.push("bg-yellow-500");
+ stateClasses.push("animate-pulse");
+ } else if (state === "success") {
+ stateClasses.push("bg-green-500");
+ } else if (state === "failure") {
+ stateClasses.push("bg-red-500");
+ } else {
+ stateClasses.push("bg-black");
+ }
+ setStateClasses(stateClasses);
+ }, [selected, hasFatal, hasWarning, state, setClasses, setStateClasses]);
return (
<div className={classes.join(" ")}>
<div style={{ position: "absolute", top: "5px", left: "5px" }}>
{Icon(p.type)}
</div>
+ <div style={{ position: "absolute", top: "5px", right: "5px", borderRadius: "50%", width: "5px", height: "5px" }} className={stateClasses.join(" ")}>
+ </div>
{children}
</div>
)