added changes log in pipelinecanvas onbaording flow

Eyepatch5263 · Eyepatch5263 · commit 95cbb3be167b · 2025-04-09T23:49:53.000+05:30
diff --git a/frontend/src/components/CanvasForPipelines/PipelineCanvas.tsx b/frontend/src/components/CanvasForPipelines/PipelineCanvas.tsx
@@ -9,6 +9,7 @@ import ReactFlow, {
   Connection,
   ReactFlowInstance,
 } from 'reactflow';
+
 import 'reactflow/dist/style.css';
 import { SourceNode } from './SourceNode';
 import { ProcessorNode } from './ProcessorNode';
@@ -32,7 +33,7 @@ const PipelineBuilder = () => {
 
   const validatedNodeValue = nodeValue.map((node, index) => ({
     ...node,
-    position: node.position || { x: 100, y: 100 + index * 100 }, // Fallback position
+    position: node.position || { x: 100, y: 100 + index * 100 },
   }));
 
   const [edges, setEdges, onEdgesChange] = useEdgesState(JSON.parse(localStorage.getItem("PipelineEdges") || "[]"));
diff --git a/frontend/src/components/CanvasForPipelines/SourceNode.tsx b/frontend/src/components/CanvasForPipelines/SourceNode.tsx
@@ -31,20 +31,18 @@ const renderers = [
   ...materialRenderers,
 ];
 export const SourceNode = ({ data: Data }: any) => {
-  console.log(Data)
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const { setNodeValue } = useNodeValue()
-  const { setChangesLog } = usePipelineChangesLog()
+  const {changesLog, setChangesLog } = usePipelineChangesLog()
   const [form, setForm] = useState<object>({})
   const SourceLabel = Data.supported_signals || ""
 
   const handleDeleteNode = () => {
     setNodeValue(prev => prev.filter(node => node.id !== Data.id.toString()));
-    setChangesLog(prev => [...prev, { type: 'source', name: Data.label, status: "deleted" }]);
+    setChangesLog(prev => [...prev, { type: 'source', name: Data.name, status: "deleted" }]);
     const nodes = JSON.parse(localStorage.getItem("Nodes") || "[]");
     const updatedNodes = nodes.filter((node: any) => node.component_name !== Data.component_name);
     localStorage.setItem("Nodes", JSON.stringify(updatedNodes));
-
     setIsSidebarOpen(false);
   }
 
@@ -63,10 +61,14 @@ export const SourceNode = ({ data: Data }: any) => {
   }, [])
 
   const handleSubmit = () => {
-    setChangesLog(prev => [
+    setChangesLog(prev => {
+      const updatedLog = [
       ...prev,
       { type: 'source', name: Data.name, status: "added" },
-    ]);
+      ];
+      localStorage.setItem("changesLog", JSON.stringify(updatedLog));
+      return updatedLog;
+    });
 
     const nodes = JSON.parse(localStorage.getItem("Nodes") || "[]");
     const updatedNodes = nodes.map((node: any) =>
diff --git a/frontend/src/components/Pipelines/AddNewPipelineComponent/AddAgent.tsx b/frontend/src/components/Pipelines/AddNewPipelineComponent/AddAgent.tsx
@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card'
 import { usePipelineStatus } from '@/context/usePipelineStatus';
 import { useEffect, useState } from 'react';
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Code2, Edit, Loader2 } from 'lucide-react';
+import { ChevronUp, Code2, Edit, Loader2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -34,6 +34,7 @@ import { AgentValuesTable } from '@/types/agentValues.type';
 import { usePipelineTab } from '@/context/useAddNewPipelineActiveTab';
 import CreateNewAgent from '@/components/Agents/CreateNewAgent';
 import pipelineServices from '@/services/pipelineServices';
+import usePipelineChangesLog from '@/context/usePipelineChangesLog';
 
 
 interface changes {
@@ -49,7 +50,7 @@ const AddAgent = () => {
   const [sortDirection, setSortDirection] = useState('asc');
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [selectedAgents, setSelectedAgents] = useState<AgentValuesTable[]>([]);
-  const [pipelineChangesLog, setPipelineChangesLog] = useState<changes[]>([])
+  const { changesLog } = usePipelineChangesLog()
   const [rollOut, setRollOut] = useState(false)
   const { toast } = useToast()
   const { agentValues } = useAgentValues()
@@ -114,6 +115,9 @@ const AddAgent = () => {
   const handleSort = () => {
     setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
   };
+  useEffect(() => {
+    console.log("changes log", changesLog)
+  }, [changesLog])
 
   const handleApply = () => {
     const selectedAgentsData = agentValues.filter(agent => selectedRows.includes(agent.id));
@@ -141,14 +145,12 @@ const AddAgent = () => {
   }
 
   const handleGetAgent = async () => {
-    setFilteredAgents(agentValues); 
+    setFilteredAgents(agentValues);
   };
 
   useEffect(() => {
     if (localStorage.getItem('authToken'))
       handleGetAgent();
-    const changesLog: changes[] = JSON.parse(localStorage.getItem("Nodes") || "[]");
-    setPipelineChangesLog(changesLog);
   }, []);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -159,10 +161,9 @@ const AddAgent = () => {
         agent.status.toLowerCase().includes(searchValue) ||
         agent.version.toLowerCase().includes(searchValue)
     );
-    setFilteredAgents(filtered); // Update filteredAgents with the search results
+    setFilteredAgents(filtered);
   };
 
-
   const handleDeployChanges = () => {
     addPipeline()
     localStorage.removeItem('Sources');
@@ -171,6 +172,7 @@ const AddAgent = () => {
     localStorage.removeItem("selectedAgentIds")
     localStorage.removeItem("PipelineEdges")
     localStorage.removeItem("Nodes")
+    localStorage.removeItem("changesLog")
     setTimeout(() => {
       toast({
         title: "Success",
@@ -347,7 +349,7 @@ const AddAgent = () => {
                               <SheetDescription>
                                 <div className="flex flex-col gap-6 mt-4 overflow-auto h-[40rem]">
                                   {
-                                    pipelineChangesLog.map((change: changes, index: number) => (
+                                    changesLog.map((change, index) => (
                                       <div key={index} className="flex justify-between items-center">
                                         <div className="flex flex-col">
                                           <p className="text-lg capitalize">{change.component_role}</p>
@@ -364,12 +366,10 @@ const AddAgent = () => {
                               </SheetDescription>
                               <SheetClose className="flex justify-end mt-4 w-full">
                                 <div>
-                                  <Button onClick={handleDeployChanges} className="bg-blue-500">Deploy Changes</Button>
+                                  <Button onClick={handleDeployChanges} className="bg-blue-500">Deploy Changes1</Button>
                                 </div>
                               </SheetClose>
-
                             </SheetContent>
-
                           </Sheet>
                           <div className="mx-4 flex items-center space-x-2">
                             <Switch id="edit-mode" checked={check} onCheckedChange={setCheck} />
diff --git a/frontend/src/components/Pipelines/AddNewPipelineComponent/destination/DestinationDetails.tsx b/frontend/src/components/Pipelines/AddNewPipelineComponent/destination/DestinationDetails.tsx
@@ -105,6 +105,9 @@ const DestinationDetail = () => {
     }
 
     const handleSubmit = () => {
+        const log={ type: 'destination', name: selectedSource?.display_name, status: "added" }
+        const existingLog = JSON.parse(localStorage.getItem("changesLog") || "[]");
+        const updatedLog = [...existingLog, log];
         const updatedSources = [
             ...existingSources,
             {
@@ -132,6 +135,10 @@ const DestinationDetail = () => {
         localStorage.setItem(`Destination`, JSON.stringify(updatedSources));
         const newNodes = [...existingNodes.filter(node => !updatedNodes.some(updatedNode => updatedNode.component_id === node.component_id)), ...updatedNodes];
         localStorage.setItem(`Nodes`, JSON.stringify(newNodes));
+        localStorage.setItem("changesLog", JSON.stringify(updatedLog));
+
+        
+
     };
 
     const handleEdit = () => {
diff --git a/frontend/src/components/Pipelines/AddNewPipelineComponent/source/SourcesDetails.tsx b/frontend/src/components/Pipelines/AddNewPipelineComponent/source/SourcesDetails.tsx
@@ -104,6 +104,8 @@ const SourceDetails = () => {
     }
 
     const handleSubmit = () => {
+        const log=[{ type: 'source', name: selectedSource?.display_name, status: "added" }]
+    
         const updatedSources = [
             ...existingSources,
             {
@@ -128,6 +130,8 @@ const SourceDetails = () => {
         setExistingSources(updatedSources);
         localStorage.setItem(`Sources`, JSON.stringify(updatedSources));
         localStorage.setItem(`Nodes`, JSON.stringify(updatedNodes));
+        localStorage.setItem("changesLog", JSON.stringify(log));
+
     };
 
     const handleEdit = () => {
diff --git a/frontend/src/components/Pipelines/DropdownOptions/DestinationDropdownOptions.tsx b/frontend/src/components/Pipelines/DropdownOptions/DestinationDropdownOptions.tsx
@@ -35,7 +35,7 @@ const DestinationDropdownOptions = () => {
     const [isSheetOpen, setIsSheetOpen] = useState(false)
     const [destinationOptionValue, setDestinationOptionValue] = useState('')
     const { setNodeValue } = useNodeValue()
-    const { setChangesLog } = usePipelineChangesLog()
+    const { addChange } = usePipelineChangesLog()
     const [destinations, setDestinations] = useState<destination[]>([])
     const [data, setData] = useState<object>();
     const [form, setForm] = useState<object>({})
@@ -80,13 +80,15 @@ const DestinationDropdownOptions = () => {
             component_name: pluginName,
             supported_signals: supported_signals,
         };
-
-        setNodeValue(prev => [...prev, newNode]);
+        
+        const log={ type: 'destination', name: destinationOptionValue, status: "added" }
+        const existingLog = JSON.parse(localStorage.getItem("changesLog") || "[]");
+        addChange(log)
+        const updatedLog = [...existingLog, log];
+        localStorage.setItem("changesLog", JSON.stringify(updatedLog));
 
         localStorage.setItem("Nodes", JSON.stringify([...existingNodes, nodeToBeAdded]));
-
-        setChangesLog(prev => [...prev, { type: 'destination', name: destinationOptionValue, status: "added" }]);
-
+        setNodeValue(prev => [...prev, newNode]);
         setIsSheetOpen(false);
     };
 
diff --git a/frontend/src/components/Pipelines/DropdownOptions/ProcessorDropdownOptions.tsx b/frontend/src/components/Pipelines/DropdownOptions/ProcessorDropdownOptions.tsx
@@ -33,7 +33,7 @@ const ProcessorDropdownOptions = () => {
     const [isSheetOpen, setIsSheetOpen] = useState(false)
     const [processorOptionValue, setProcessorOptionValue] = useState('')
     const { setNodeValue } = useNodeValue()
-    const { setChangesLog } = usePipelineChangesLog()
+    const { addChange } = usePipelineChangesLog()
     const [form, setForm] = useState<object>({})
     const [data, setData] = useState<object>();
     const [pluginName, setPluginName] = useState()
@@ -50,7 +50,6 @@ const ProcessorDropdownOptions = () => {
     const handleSubmit = () => {
         const supported_signals = processors.find(s => s.name == pluginName)?.supported_signals;
 
-        // Define the new node structure for React Flow
         const newNode = {
             id: (existingNodes.length + 1).toString(),
             type: "processor",
@@ -79,12 +78,15 @@ const ProcessorDropdownOptions = () => {
             supported_signals: supported_signals,
         };
 
-        setNodeValue(prev => [...prev, newNode]);
-
-        localStorage.setItem("Nodes", JSON.stringify([...existingNodes, nodeToBeAdded]));
 
-        setChangesLog(prev => [...prev, { type: 'processor', name: processorOptionValue, status: "added" }]);
+        const log = { type: 'processor', name: processorOptionValue, status: "added" }
+        const existingLog = JSON.parse(localStorage.getItem("changesLog") || "[]");
+        addChange(log)
+        const updatedLog = [...existingLog, log];
+        localStorage.setItem("changesLog", JSON.stringify(updatedLog));
 
+        localStorage.setItem("Nodes", JSON.stringify([...existingNodes, nodeToBeAdded]));
+        setNodeValue(prev => [...prev, newNode]);
         setIsSheetOpen(false);
     };
 
diff --git a/frontend/src/components/Pipelines/DropdownOptions/SourceDropdownOptions.tsx b/frontend/src/components/Pipelines/DropdownOptions/SourceDropdownOptions.tsx
@@ -34,7 +34,7 @@ const SourceDropdownOptions = () => {
     const [isSheetOpen, setIsSheetOpen] = useState(false)
     const [sourceOptionValue, setSourceOptionValue] = useState('')
     const { setNodeValue } = useNodeValue()
-    const { setChangesLog } = usePipelineChangesLog()
+    const { addChange } = usePipelineChangesLog()
     const [form, setForm] = useState<object>({})
     const [sources, setSources] = useState<sources[]>([])
     const [data, setData] = useState<object>();
@@ -50,7 +50,6 @@ const SourceDropdownOptions = () => {
 
     const handleSubmit = () => {
         const supported_signals = sources.find(s => s.name == pluginName)?.supported_signals;
-
         const newNode = {
             id: (existingNodes.length + 1).toString(),
             type: "source",
@@ -79,14 +78,16 @@ const SourceDropdownOptions = () => {
             supported_signals: supported_signals,
         };
 
+        const log={ type: 'source', name: sourceOptionValue, status: "added" }
+        const existingLog = JSON.parse(localStorage.getItem("changesLog") || "[]");
+        addChange(log)
+        const updatedLog = [...existingLog, log];
+        localStorage.setItem("changesLog", JSON.stringify(updatedLog));
+
 
         localStorage.setItem("Nodes", JSON.stringify([...existingNodes, nodeToBeAdded]));
         setNodeValue(prev => [...prev, newNode]);
 
-
-        setChangesLog(prev => [...prev, { type: 'source', name: sourceOptionValue, status: "added" }]);
-
-        // Close the sheet
         setIsSheetOpen(false);
     };
 
diff --git a/frontend/src/components/Pipelines/LandingView.tsx b/frontend/src/components/Pipelines/LandingView.tsx
@@ -41,6 +41,7 @@ const LandingView = () => {
         localStorage.removeItem("selectedAgentIds");
         localStorage.removeItem("PipelineEdges");
         localStorage.removeItem("Nodes");
+        localStorage.removeItem("changesLog")
 
         setCurrentStep(0);
         setIsDialogOpen(false);
diff --git a/frontend/src/components/Pipelines/PipelineDetails.tsx b/frontend/src/components/Pipelines/PipelineDetails.tsx
@@ -61,10 +61,9 @@ const PipelineDetails = ({ pipelineId }: { pipelineId: string }) => {
     const { changesLog } = usePipelineChangesLog()
     const [pipelineOverview, setPipelineOverview] = useState<Pipeline>()
     const [isOpen, setIsOpen] = useState(false)
-    // const [graph, setGraph] = useState<Node[]>([])
-    const [nodes, setNodes] = useState<Node[]>([])
     const { toast } = useToast()
 
+
     const nodeTypes = useMemo(() => ({
         source: SourceNode,
         processor: ProcessorNode,
@@ -177,7 +176,6 @@ const PipelineDetails = ({ pipelineId }: { pipelineId: string }) => {
         window.location.reload();
     }
 
-
     return (
         <div className="py-4 flex flex-col">
             <div className="flex mb-5 gap-2 items-center">
diff --git a/frontend/src/context/useNodeContext.tsx b/frontend/src/context/useNodeContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, Dispatch, SetStateAction, useContext, useEffect } from "react";
+import React, { createContext, Dispatch, SetStateAction, useContext } from "react";
 import { Node, NodeChange, useNodesState } from "reactflow";
 
 interface NodeValueContextType {
@@ -47,8 +47,7 @@ const NodeValueContext = createContext<NodeValueContextType | undefined>(undefin
 
 export const NodeValueProvider = ({ children }: { children: React.ReactNode }) => {
   const [nodeValue, setNodeValue, onNodesChange] = useNodesState(initialNodes);
-
-
+  
   return (
     <NodeValueContext.Provider value={{ nodeValue, setNodeValue, onNodesChange }}>
       {children}
diff --git a/frontend/src/context/usePipelineChangesLog.tsx b/frontend/src/context/usePipelineChangesLog.tsx
@@ -1,28 +1,47 @@
-import { Changes, PipelineChangesLog } from "@/constants/PipelineChangesLog";
-import React, { createContext, Dispatch, SetStateAction, useContext, useState } from "react";
+import { Changes } from "@/constants/PipelineChangesLog";
+import React, { createContext, useContext, useRef, useState } from "react";
 
 interface PipelineChangesLogProps {
-    changesLog: Changes[],
-    setChangesLog: Dispatch<SetStateAction<Changes[]>>
+    changesLog: Changes[];
+    addChange: (change: Changes) => void;
 }
 
+const pipelineLogs = localStorage.getItem("changesLog");
+
 const PipelineChangesLogContext = createContext<PipelineChangesLogProps | undefined>(undefined);
 
 export const PipelineChangesLogProvider = ({ children }: { children: React.ReactNode }) => {
-    const [changesLog, setChangesLog] = useState<Changes[]>(PipelineChangesLog);
+    // Use useRef to store the changesLog for immediate updates
+    const changesLogRef = useRef<Changes[]>(pipelineLogs ? JSON.parse(pipelineLogs) : []);
+
+    // Use useState to trigger re-renders when changesLog is updated
+    const [changesLog, setChangesLog] = useState<Changes[]>(changesLogRef.current);
+
+    // Function to add a change to the log
+    const addChange = (change: Changes) => {
+        // Update the ref value
+        changesLogRef.current.push(change);
+
+        // Update the state to trigger a re-render
+        setChangesLog([...changesLogRef.current]);
+
+        // Persist the updated log to localStorage
+        localStorage.setItem("changesLog", JSON.stringify(changesLogRef.current));
+    };
 
     return (
-        <PipelineChangesLogContext.Provider value={{ changesLog, setChangesLog }}>
+        <PipelineChangesLogContext.Provider value={{ changesLog, addChange }}>
             {children}
         </PipelineChangesLogContext.Provider>
     );
-}
+};
+
 const usePipelineChangesLog = () => {
     const context = useContext(PipelineChangesLogContext);
     if (!context) {
         throw new Error("usePipelineChangesLog must be used within a PipelineChangesLogProvider");
     }
     return context;
-}
+};
 
-export default usePipelineChangesLog
+export default usePipelineChangesLog;
diff --git a/frontend/src/index.css b/frontend/src/index.css
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
