Canvas: Use node full labels when monitoring
Change-Id: I7b3bce3519c2a7b7780f43cf1c092fcca9e6ecd9
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 7cc3520..a0a1842 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -1,4 +1,4 @@
-import { NodeType, useNodeMessages } from "@/lib/state";
+import { NodeType, useMode, useNodeMessages } from "@/lib/state";
import { Icon } from "./icon";
import { useEffect, useState } from "react";
@@ -12,11 +12,12 @@
export function NodeRect(p: Props) {
const { id, selected, children, state } = p;
+ const mode = useMode();
const messages = useNodeMessages(id);
const hasFatal = messages.some((m) => m.type === "FATAL");
const hasWarning = messages.some((m) => m.type === "WARNING");
const [classes, setClasses] = useState<string[]>([]);
- const [_, setStateClasses] = useState<string[]>([]);
+ const [stateClasses, setStateClasses] = useState<string[]>([]);
useEffect(() => {
const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
classes.push("border");
@@ -49,18 +50,19 @@
<div style={{ position: "absolute", top: "5px", left: "5px" }}>
<Icon type={p.type} />
</div>
- {/* TODO(gio): add state badge */}
- {/* <div
- style={{
- position: "absolute",
- top: "5px",
- right: "5px",
- borderRadius: "50%",
- width: "5px",
- height: "5px",
- }}
- className={stateClasses.join(" ")}
- ></div> */}
+ {mode === "deploy" && (
+ <div
+ style={{
+ position: "absolute",
+ top: "5px",
+ right: "5px",
+ borderRadius: "50%",
+ width: "5px",
+ height: "5px",
+ }}
+ className={stateClasses.join(" ")}
+ ></div>
+ )}
{children}
</div>
);