Canvas: Monitor deployment
Change-Id: If5895724025e8e4082a372563c159cbf2216b97f
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 5164a13..ad0bee7 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -1,34 +1,43 @@
import { NodeType, useNodeMessages } from "@/lib/state";
import { Icon } from "./icon";
+import { useEffect, useState } from "react";
export type Props = {
id: string;
selected?: boolean;
children: any;
type: NodeType;
+ state: string | null;
};
export function NodeRect(p: Props) {
- const { id, selected, children } = p;
+ const { id, selected, children, state } = p;
const messages = useNodeMessages(id);
const hasFatal = messages.some((m) => m.type === "FATAL");
const hasWarning = messages.some((m) => m.type === "WARNING");
- const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
- if (hasFatal) {
- classes.push("border-red-500");
- } else if (hasWarning) {
- classes.push("border-yellow-500");
- } else {
- classes.push("border-black");
- }
- if (selected) {
- classes.push("border-2");
- } else {
- classes.push("border");
- }
+ const [classes, setClasses] = useState<string[]>([]);
+ useEffect(() => {
+ const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
+ if (hasFatal) {
+ classes.push("border-red-500");
+ } else if (hasWarning) {
+ classes.push("border-yellow-500");
+ } else {
+ classes.push("border-black");
+ }
+ if (selected) {
+ classes.push("border-2");
+ } else {
+ classes.push("border");
+ }
+ if (state === "running") {
+ classes.push("animate-pulse");
+ }
+ setClasses(classes);
+ }, [selected, hasFatal, hasWarning, state, setClasses]);
return (
<div className={classes.join(" ")}>
- <div style={{ position: "absolute", top: "5px", left: "5px"}}>
+ <div style={{ position: "absolute", top: "5px", left: "5px" }}>
{Icon(p.type)}
</div>
{children}