add status on building components

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -406,13 +406,27 @@ export default function ParameterComponent({
                 data-testid={"textarea-" + data.node.template[name].name}
               />
             ) : (
-              <InputComponent
-                id={"input-" + index}
-                disabled={disabled}
-                password={data.node?.template[name].password ?? false}
-                value={data.node?.template[name].value ?? ""}
-                onChange={handleOnNewValue}
-              />
+              <div className="mt-2 flex w-full items-center">
+                <div className="w-5/6 flex-grow">
+                  <InputComponent
+                    id={"input-" + index}
+                    disabled={disabled}
+                    password={data.node?.template[name].password ?? false}
+                    value={data.node?.template[name].value ?? ""}
+                    onChange={handleOnNewValue}
+                  />
+                </div>
+                {data.node?.template[name].refresh && (
+                  <button
+                    className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
+                    onClick={() => {
+                      handleUpdateValues(name, data);
+                    }}
+                  >
+                    <IconComponent name="RefreshCcw" />
+                  </button>
+                )}
+              </div>
             )}
           </div>
         ) : left === true && type === "bool" ? (

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -86,6 +86,18 @@ export default function GenericNode({
   // State for outline color
   const isBuilding = useFlowStore((state) => state.isBuilding);
 
+  // should be empty string if no duration
+  // else should be `Duration: ${duration}`
+  const getDurationString = (duration: number | null): string => {
+    if (duration === null) {
+      return "";
+    } else {
+      return `Duration: ${duration}`;
+    }
+  };
+
+  const durationString = getDurationString(validationStatus?.data.duration);
+
   useEffect(() => {
     setNodeDescription(data.node!.description);
   }, [data.node!.description]);
@@ -400,19 +412,19 @@ export default function GenericNode({
                           Build{" "}
                           <IconComponent
                             name="Play"
-                            className=" h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                            className=" h-5 stroke-build-trigger stroke-2"
                           />{" "}
                           flow to validate status.
                         </span>
                       ) : (
                         <div className="max-h-96 overflow-auto">
                           {typeof validationStatus.params === "string"
-                            ? `Duration: ${validationStatus.data.duration}\n${validationStatus.params}`
+                            ? `${durationString}\n${validationStatus.params}`
                                 .split("\n")
                                 .map((line, index) => (
                                   <div key={index}>{line}</div>
                                 ))
-                            : ""}
+                            : durationString}
                         </div>
                       )
                     }

src/frontend/src/controllers/API/index.ts

@@ -855,9 +855,16 @@ export async function requestLogout() {
 }
 
 export async function getVerticesOrder(
-  flowId: string
+  flowId: string,
+  nodeId?: string | null
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
-  return await api.get(`${BASE_URL_API}build/${flowId}/vertices`);
+  // nodeId is optional and is a query parameter
+  // if nodeId is not provided, the API will return all vertices
+  const config = {};
+  if (nodeId) {
+    config["params"] = { component_id: nodeId };
+  }
+  return await api.get(`${BASE_URL_API}build/${flowId}/vertices`, config);
 }
 
 export async function postBuildVertex(

src/frontend/src/stores/flowStore.ts

@@ -378,6 +378,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     const currentFlow = useFlowsManagerStore.getState().currentFlow;
     const setSuccessData = useAlertStore.getState().setSuccessData;
     const setErrorData = useAlertStore.getState().setErrorData;
+    const setNoticeData = useAlertStore.getState().setNoticeData;
     function handleBuildUpdate(data: any) {
       get().addDataToFlowPool(data.data[data.id], data.id);
       useFlowStore.getState().updateBuildStatus([data.id], BuildStatus.BUILDED);
@@ -392,6 +393,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       name: currentFlow!.name,
       description: currentFlow!.description,
     });
+    setNoticeData({ title: "Running components" });
     return buildVertices({
       flowId: currentFlow!.id,
       nodeId,

src/frontend/src/style/applies.css

@@ -293,13 +293,13 @@
     @apply opacity-100 animate-wiggle;
   }
   .green-status {
-    @apply generic-node-status text-status-green fill-status-green;
+    @apply generic-node-status text-status-green;
   }
   .red-status {
-    @apply generic-node-status text-status-red fill-status-red;
+    @apply generic-node-status text-status-red;
   }
   .yellow-status {
-    @apply generic-node-status text-status-yellow fill-status-yellow;
+    @apply generic-node-status text-status-yellow;
   }
   .status-build-animation {
     @apply opacity-0;

src/frontend/src/utils/buildUtils.ts

@@ -23,7 +23,7 @@ export async function buildVertices({
   onBuildError,
   onBuildStart,
 }: BuildVerticesParams) {
-  let orderResponse = await getVerticesOrder(flowId);
+  let orderResponse = await getVerticesOrder(flowId, nodeId);
   let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
   let vertices: Array<Array<string>> = [];
 

src/frontend/src/utils/styleUtils.ts

@@ -110,6 +110,8 @@ import {
   X,
   XCircle,
   Zap,
+  FlaskConical,
+  AlertCircle,
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -400,4 +402,6 @@ export const nodeIconsLucide: iconsType = {
   io: Cable,
   ScreenShare,
   Code,
+  FlaskConical,
+  AlertCircle,
 };