Skip to content

Commit 06fcef6

Browse files
jsajaljsajal
committed
maintain state of graph run logs for each tab separately
1 parent ff539eb commit 06fcef6

5 files changed

Lines changed: 57 additions & 53 deletions

File tree

‎src/components/molecules/flow/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,16 @@ const selector = (state) => ({
7878
onConnect: state.onConnect,
7979
setNodes: state.setNodes,
8080
setEdges: state.setEdges,
81-
setLogs: state.setLogs,
8281
viewport: state.viewport,
8382
setViewport: state.setViewport,
8483
});
8584

8685
const Flow = ({ tab, collectionId }) => {
87-
const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges, setLogs, viewport, setViewport } =
86+
const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges, viewport, setViewport } =
8887
useCanvasStore(selector);
8988

89+
const setLogs = useTabStore((state) => state.updateFlowTestLogs);
90+
9091
const [reactFlowInstance, setReactFlowInstance] = useState(null);
9192

9293
const nodeTypes = useMemo(
@@ -193,7 +194,7 @@ const Flow = ({ tab, collectionId }) => {
193194
};
194195

195196
const onGraphComplete = (status, logs) => {
196-
setLogs(logs);
197+
setLogs(tab.id, logs);
197198
if (status == 'Success') {
198199
toast.success(`FlowTest Run Success! \n View Logs`);
199200
} else if (status == 'Failed') {

‎src/components/molecules/headers/TabPanelHeader.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const TabPanelHeader = () => {
2222
const tabs = useTabStore((state) => state.tabs);
2323
const focusTab = tabs.find((t) => t.id === focusTabId);
2424

25-
const graphRunLogs = useCanvasStore((state) => state.logs);
2625
const setTimeout = useCanvasStore((state) => state.setTimeout);
2726

2827
const [slidingPaneState, setSlidingPaneState] = useState({
@@ -119,7 +118,7 @@ const TabPanelHeader = () => {
119118
<div className='flex items-center justify-between px-4 py-3'>
120119
<div className='py-3 text-base tracking-[0.15em]'>{focusTab.name}</div>
121120

122-
<div className='flex items-center justify-between gap-4 pl-4 border-l border-gray-300'>
121+
<div className='flex items-center justify-between gap-4 border-l border-gray-300 pl-4'>
123122
{focusTab.type === OBJ_TYPES.flowtest && (
124123
// ToDo: Check this
125124
<div className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded border border-cyan-900 bg-background-light px-4 py-2.5 text-cyan-900 transition hover:bg-background'>
@@ -132,10 +131,10 @@ const TabPanelHeader = () => {
132131
</div>
133132
)}
134133

135-
<div className='flex items-center justify-center h-12'>
134+
<div className='flex h-12 items-center justify-center'>
136135
<SaveFlowModal tab={focusTab} />
137136
</div>
138-
{focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (
137+
{focusTab.type === OBJ_TYPES.flowtest && focusTab.logs && focusTab.logs.length != 0 ? (
139138
<div>
140139
<Button
141140
id='graph-logs-side-sheet'
@@ -153,7 +152,7 @@ const TabPanelHeader = () => {
153152
>
154153
<Tippy content='Logs' placement='top'>
155154
<label htmlFor='graph-logs-side-sheet'>
156-
<DocumentTextIcon className='w-5 h-5' />
155+
<DocumentTextIcon className='h-5 w-5' />
157156
</label>
158157
</Tippy>
159158
</Button>
@@ -178,8 +177,8 @@ const TabPanelHeader = () => {
178177
aria-label='close sidebar'
179178
className='drawer-overlay'
180179
></label>
181-
<ul className='min-h-full p-4 menu bg-base-200 text-base-content'>
182-
{graphRunLogs.map((item, index) => (
180+
<ul className='menu min-h-full bg-base-200 p-4 text-base-content'>
181+
{focusTab.logs.map((item, index) => (
183182
<li key={index}>{renderLog(item)}</li>
184183
))}
185184
</ul>
@@ -197,7 +196,7 @@ const TabPanelHeader = () => {
197196
fullWidth={true}
198197
className='flex items-center justify-between gap-x-4'
199198
>
200-
<SparklesIcon className='w-5 h-5' />
199+
<SparklesIcon className='h-5 w-5' />
201200
Generate
202201
</Button>
203202
<GenerateFlowTestModal

‎src/components/molecules/workspace/WorkspaceContent.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import EmptyWorkSpaceContent from './EmptyWorkSpaceContent';
1010

1111
const WorkspaceContent = () => {
1212
const setIntialState = useCanvasStore((state) => state.setIntialState);
13-
const setLogs = useCanvasStore((state) => state.setLogs);
1413
const setCollectionId = useCanvasStore((state) => state.setCollectionId);
1514

1615
const setVariables = useEnvStore((state) => state.setVariables);
@@ -26,7 +25,6 @@ const WorkspaceContent = () => {
2625
if (focusTab.type === OBJ_TYPES.flowtest) {
2726
const result = init(focusTab.flowDataDraft ? focusTab.flowDataDraft : focusTab.flowData);
2827
setIntialState(result);
29-
setLogs(focusTab.logs);
3028
setCollectionId(focusTab.collectionId);
3129
} else if (focusTab.type === OBJ_TYPES.environment) {
3230
setVariables(focusTab.variablesDraft ? focusTab.variablesDraft : focusTab.variables);

‎src/stores/CanvasStore.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { getDefaultValue } from 'utils/common';
77
const useCanvasStore = create((set, get) => ({
88
nodes: [],
99
edges: [],
10-
logs: [],
1110
collectionId: '',
1211
timeout: '60000',
1312
viewport: { x: 0, y: 0, zoom: 1 },
@@ -44,10 +43,6 @@ const useCanvasStore = create((set, get) => ({
4443
set({ edges });
4544
useTabStore.getState().updateFlowTestEdges(get().edges);
4645
},
47-
setLogs: (logs) => {
48-
set({ logs });
49-
useTabStore.getState().updateFlowTestLogs(get().logs);
50-
},
5146
setCollectionId: (collectionId) => {
5247
set({ collectionId });
5348
},

‎src/stores/TabStore.js‎

Lines changed: 46 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { OBJ_TYPES } from 'constants/Common';
22
import { cloneDeep } from 'lodash';
33
import { create } from 'zustand';
4+
import { produce } from 'immer';
45

56
export const useTabStore = create((set, get) => ({
67
tabs: [],
@@ -34,51 +35,61 @@ export const useTabStore = create((set, get) => ({
3435
},
3536
// these state changes are meant to be triggered by canvas in focus
3637
updateFlowTestNodes: (nodes) => {
37-
if (get().focusTabId) {
38-
const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
39-
if (existingTab) {
40-
if (!existingTab.flowDataDraft) {
41-
existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
38+
set(
39+
produce((state) => {
40+
if (state.focusTabId) {
41+
const existingTab = state.tabs.find((t) => t.id === state.focusTabId);
42+
if (existingTab) {
43+
if (!existingTab.flowDataDraft) {
44+
existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
45+
}
46+
existingTab.flowDataDraft.nodes = nodes;
47+
}
4248
}
43-
existingTab.flowDataDraft.nodes = nodes;
44-
}
45-
console.log(existingTab);
46-
}
49+
}),
50+
);
4751
},
4852
// these state changes are meant to be triggered by canvas in focus
4953
updateFlowTestEdges: (edges) => {
50-
if (get().focusTabId) {
51-
const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
52-
if (existingTab) {
53-
if (!existingTab.flowDataDraft) {
54-
existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
54+
set(
55+
produce((state) => {
56+
if (state.focusTabId) {
57+
const existingTab = state.tabs.find((t) => t.id === state.focusTabId);
58+
if (existingTab) {
59+
if (!existingTab.flowDataDraft) {
60+
existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
61+
}
62+
existingTab.flowDataDraft.edges = edges;
63+
}
5564
}
56-
existingTab.flowDataDraft.edges = edges;
57-
}
58-
console.log(existingTab);
59-
}
65+
}),
66+
);
6067
},
6168
// these state changes are meant to be triggered by canvas in focus
6269
updateFlowTestViewport: (viewport) => {
63-
if (get().focusTabId) {
64-
const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
65-
if (existingTab) {
66-
if (!existingTab.flowDataDraft) {
67-
existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
70+
set(
71+
produce((state) => {
72+
if (state.focusTabId) {
73+
const existingTab = state.tabs.find((t) => t.id === state.focusTabId);
74+
if (existingTab) {
75+
if (!existingTab.flowDataDraft) {
76+
existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
77+
}
78+
existingTab.flowDataDraft.viewport = viewport;
79+
}
6880
}
69-
existingTab.flowDataDraft.viewport = viewport;
70-
}
71-
console.log(existingTab);
72-
}
81+
}),
82+
);
7383
},
74-
updateFlowTestLogs: (logs) => {
75-
if (get().focusTabId) {
76-
const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
77-
if (existingTab) {
78-
existingTab.logs = logs;
79-
}
80-
console.log(existingTab);
81-
}
84+
updateFlowTestLogs: (tabId, logs) => {
85+
set(
86+
produce((state) => {
87+
const existingTab = state.tabs.find((t) => t.id === tabId);
88+
if (existingTab) {
89+
existingTab.logs = logs;
90+
}
91+
}),
92+
);
8293
},
8394
addEnvTab: (env, collectionId) => {
8495
const existingTab = get().tabs.find(

0 commit comments

Comments
 (0)