Skip to content

Commit 01ec5ef

Browse files
mahendraintelopsmahendraintelops
committed
enhancement: after deleting edge, rest and grpc clients in dest node are now updated.
1 parent b14b266 commit 01ec5ef

File tree

7 files changed

+97
-19
lines changed

7 files changed

+97
-19
lines changed

‎ui/src/components/diagram-maker/custom/context-edge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Divider from "@mui/material/Divider";
33
import {getParsedModifiedState} from "../helper/helper";
44
import {
5-
CompageEdge,
5+
CompageEdge, CompageJson,
66
CompageNode,
77
getEmptyGrpcConfig,
88
getEmptyRestConfig,
@@ -18,7 +18,7 @@ interface ContextEdgeProps {
1818
}
1919

2020
export const ContextEdge = (props: ContextEdgeProps) => {
21-
const parsedModifiedState = getParsedModifiedState();
21+
const parsedModifiedState : CompageJson = getParsedModifiedState();
2222
const parsedCurrentConfig = JSON.parse(getCurrentConfig());
2323
const modifiedEdgeState: CompageEdge = parsedModifiedState.edges[props.id];
2424
const edgeConfig: CompageEdge = parsedCurrentConfig.edges[props.id];

‎ui/src/components/diagram-maker/custom/context-node.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import {getParsedModifiedState} from "../helper/helper";
33
import Divider from "@mui/material/Divider";
4-
import {CompageNode, getEmptyGrpcConfig, getEmptyRestConfig, getEmptyWsConfig} from "../models";
4+
import {CompageJson, CompageNode, getEmptyGrpcConfig, getEmptyRestConfig, getEmptyWsConfig} from "../models";
55

66
interface ContextNodeProps {
77
id: string | undefined;
88
}
99

1010
export const ContextNode = (props: ContextNodeProps) => {
11-
const parsedModifiedState = getParsedModifiedState();
11+
const parsedModifiedState: CompageJson = getParsedModifiedState();
1212
const currentNode: CompageNode = parsedModifiedState.nodes[props.id];
1313
const [payload] = React.useState({
1414
name: currentNode?.consumerData.name !== undefined ? currentNode.consumerData.name : "",

‎ui/src/components/diagram-maker/diagram-maker-container.tsx‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import {
4343
getCurrentState,
4444
setCurrentConfig,
4545
setCurrentState,
46+
setModifiedState,
4647
setReset,
4748
shouldReset
4849
} from "../../utils/localstorage-client";
@@ -63,13 +64,14 @@ import {ButtonsPanel} from "./buttons-panel";
6364
import {UpdateProjectRequest} from "../../features/projects-operations/model";
6465
import {updateProjectAsync} from "../../features/projects-operations/async-apis/updateProject";
6566
import {useAppDispatch, useAppSelector} from "../../redux/hooks";
66-
import {selectGetProjectData, selectUpdateProjectStatus} from "../../features/projects-operations/slice";
67-
import {cleanse, removeUnwantedKeys} from "./helper/helper";
67+
import {selectUpdateProjectStatus} from "../../features/projects-operations/slice";
68+
import {cleanse, getParsedCurrentConfig, getParsedModifiedState, removeUnwantedKeys} from "./helper/helper";
6869
import * as _ from "lodash";
6970
import Box from "@mui/material/Box";
7071
import Typography from "@mui/material/Typography";
7172
import {getCurrentUserName} from "../../utils/sessionstorage-client";
7273
import {useNavigate} from "react-router-dom";
74+
import {CompageEdge, CompageJson, CompageJsonConfig, CompageNode} from "./models";
7375

7476
interface ArgTypes {
7577
initialData?: DiagramMakerData<{}, {}>;
@@ -97,9 +99,7 @@ export const DiagramMakerContainer = ({
9799
const containerRef = useRef() as any;
98100
const diagramMakerRef = useRef() as any;
99101
const dispatch = useAppDispatch();
100-
const getProjectData = useAppSelector(selectGetProjectData);
101102
const updateProjectStatus = useAppSelector(selectUpdateProjectStatus);
102-
103103
const navigate = useNavigate();
104104

105105
// handle ctrl+s in window
@@ -301,6 +301,25 @@ export const DiagramMakerContainer = ({
301301
} as ContextMenuRenderCallbacks,
302302
},
303303
actionInterceptor: (action: Action, next: Dispatch<Action>, getState: () => DiagramMakerData<{}, {}>) => {
304+
const removeGrpcClient = (srcNode: CompageNode, destNode: CompageNode) => {
305+
if (destNode.consumerData.grpcConfig && destNode.consumerData.grpcConfig.clients) {
306+
for (let i = 0; i < destNode.consumerData.grpcConfig.clients.length; i++) {
307+
if (destNode.consumerData.grpcConfig.clients[i].sourceNodeId === srcNode.id) {
308+
destNode.consumerData.grpcConfig.clients.splice(i--, 1);
309+
}
310+
}
311+
}
312+
};
313+
const removeRestClient = (srcNode: CompageNode, destNode: CompageNode) => {
314+
if (destNode.consumerData.restConfig && destNode.consumerData.restConfig.clients) {
315+
for (let i = 0; i < destNode.consumerData.restConfig.clients.length; i++) {
316+
if (destNode.consumerData.restConfig.clients[i].sourceNodeId === srcNode.id) {
317+
destNode.consumerData.restConfig.clients.splice(i--, 1);
318+
}
319+
}
320+
}
321+
};
322+
304323
// onAction(action);
305324
if (actionInterceptor) {
306325
const diagramMakerAction = action as DiagramMakerAction<{ odd: boolean }, {}>;
@@ -330,7 +349,25 @@ export const DiagramMakerContainer = ({
330349
result = "Deleting edge(s) : [" + diagramMakerAction.payload.edgeIds + "]";
331350
}
332351
if (diagramMakerAction.payload.nodeIds.length > 0 || diagramMakerAction.payload.edgeIds.length > 0) {
333-
if (!window.confirm(message)) {
352+
if (window.confirm(message)) {
353+
// delete the sourceNodes info from destination nodes for the edges getting deleted.
354+
const parsedCurrentConfig: CompageJsonConfig = getParsedCurrentConfig();
355+
const parsedModifiedState: CompageJson = getParsedModifiedState();
356+
for (const item of diagramMakerAction.payload.edgeIds) {
357+
// iterate over edges and extract nodes and modify the clients
358+
const selectedEdge: CompageEdge = parsedCurrentConfig.edges[item];
359+
if (selectedEdge) {
360+
console.log(selectedEdge.dest);
361+
const srcNodeConfig: CompageNode = parsedCurrentConfig.nodes[selectedEdge.src];
362+
const destNodeState: CompageNode = parsedModifiedState.nodes[selectedEdge.dest];
363+
if (destNodeState) {
364+
removeGrpcClient(srcNodeConfig, destNodeState);
365+
removeRestClient(srcNodeConfig, destNodeState);
366+
}
367+
}
368+
}
369+
setModifiedState(JSON.stringify(parsedModifiedState));
370+
} else {
334371
return;
335372
}
336373
}

‎ui/src/components/diagram-maker/edge-properties/new-edge-properties.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Divider from "@mui/material/Divider";
1212
import {Checkbox, FormControlLabel, Stack} from "@mui/material";
1313
import {
1414
CompageEdge,
15+
CompageJson,
1516
CompageNode,
1617
getEmptyGrpcConfig,
1718
getEmptyRestConfig,
@@ -86,11 +87,11 @@ const getClientTypesConfig = (srcNodeConfig: CompageNode, srcNodeState: CompageN
8687

8788
export const NewEdgeProperties = (props: NewEdgePropertiesProps) => {
8889
const parsedCurrentConfig = JSON.parse(getCurrentConfig());
89-
const parsedModifiedState = getParsedModifiedState();
90+
const parsedModifiedState: CompageJson = getParsedModifiedState();
9091
// TODO sometimes the parsedModifiedState is empty so, recreate it. this breaks, recreates the modifiedState, need to check.
9192
// if (Object.keys(parsedModifiedState.edges).length < 1 || !parsedModifiedState.edges[props.edgeId]) {
9293
// updateModifiedState(parsedCurrentConfig);
93-
// parsedModifiedState = getParsedModifiedState();
94+
// parsedModifiedState : CompageJson = getParsedModifiedState();
9495
// }
9596
const currentEdgeState: CompageEdge = parsedModifiedState.edges[props.edgeId];
9697
// read node's clients array and get these values
@@ -498,6 +499,7 @@ export const NewEdgeProperties = (props: NewEdgePropertiesProps) => {
498499
});
499500
};
500501

502+
// eslint-disable-next-line
501503
const getWsServerCheck = () => {
502504
return <React.Fragment>
503505
<FormControlLabel
@@ -511,6 +513,7 @@ export const NewEdgeProperties = (props: NewEdgePropertiesProps) => {
511513
</React.Fragment>;
512514
};
513515

516+
// eslint-disable-next-line
514517
const getWsServerPort = () => {
515518
if (payload.isWsServer) {
516519
// retrieve port from src node.

‎ui/src/components/diagram-maker/helper/helper.ts‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {getModifiedState, setModifiedState} from "../../../utils/localstorage-client";
1+
import {getCurrentConfig, getModifiedState, setModifiedState} from "../../../utils/localstorage-client";
2+
import {CompageEdge, CompageJson, CompageJsonConfig, CompageNode} from "../models";
23

34
export const cleanse = (state: string) => {
45
if (state === undefined || state === null || (!state || state === "{}")) {
@@ -80,7 +81,7 @@ export const removeUnwantedKeys = (state: string) => {
8081
return stateJson;
8182
};
8283

83-
export const getParsedModifiedState = () => {
84+
export const getParsedModifiedState = (): CompageJson => {
8485
// retrieve current modifiedState
8586
// logic is to store the dialog-state in localstorage and then refer it in updating state.
8687
const modifiedState = getModifiedState();
@@ -89,8 +90,29 @@ export const getParsedModifiedState = () => {
8990
return JSON.parse(modifiedState);
9091
} else {
9192
return {
92-
nodes: {},
93-
edges: {}
93+
nodes: new Map<string, CompageNode>(),
94+
edges: new Map<string, CompageEdge>()
95+
};
96+
}
97+
};
98+
99+
100+
export const getParsedCurrentConfig = (): CompageJsonConfig => {
101+
const currentConfig = getCurrentConfig();
102+
103+
if (currentConfig && currentConfig !== "{}") {
104+
return JSON.parse(currentConfig);
105+
} else {
106+
return {
107+
nodes: new Map<string, CompageNode>(),
108+
edges: new Map<string, CompageEdge>(),
109+
editor: {},
110+
panels: {},
111+
potentialEdge: {},
112+
undoHistory: {},
113+
plugins: {},
114+
potentialNode: {},
115+
workspace: {}
94116
};
95117
}
96118
};

‎ui/src/components/diagram-maker/models.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,20 @@ export interface CompageEdge {
9090
export interface CompageJson {
9191
edges: Map<string, CompageEdge>;
9292
nodes: Map<string, CompageNode>;
93-
version: string;
93+
version?: string;
94+
}
95+
96+
export interface CompageJsonConfig {
97+
edges: Map<string, CompageEdge>;
98+
nodes: Map<string, CompageNode>;
99+
version?: string;
100+
workspace: any;
101+
undoHistory: any;
102+
potentialNode: any;
103+
potentialEdge: any;
104+
plugins: any;
105+
panels: any;
106+
editor: any;
94107
}
95108

96109
// empty interfaces

‎ui/src/components/diagram-maker/node-properties/new-node-properties.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
TableRow
2323
} from "@mui/material";
2424
import {
25+
CompageJson,
2526
CompageNode,
2627
EmptyCurrentGrpcResource,
2728
EmptyCurrentRestResource,
@@ -101,7 +102,7 @@ const getNodeTypesConfig = (currentNodeState: CompageNode): NodeTypesConfig => {
101102
}
102103
}
103104
if (grpcConfig && Object.keys(grpcConfig).length > 0) {
104-
if (grpcConfig.server && Object.keys(grpcConfig?.server).length > 0 && grpcConfig?.server?.port) {
105+
if (grpcConfig.server && Object.keys(grpcConfig?.server).length > 0 && grpcConfig?.server?.port) {
105106
nodeTypesConfig.isGrpcServer = true;
106107
nodeTypesConfig.grpcConfig = {
107108
server: grpcConfig.server
@@ -121,7 +122,7 @@ const getNodeTypesConfig = (currentNodeState: CompageNode): NodeTypesConfig => {
121122
}
122123
if (wsConfig && Object.keys(wsConfig).length > 0) {
123124
nodeTypesConfig.wsConfig = {template: wsConfig.template || getEmptyWsConfig().template};
124-
if (wsConfig.server && Object.keys(wsConfig?.server).length > 0 && wsConfig?.server?.port) {
125+
if (wsConfig.server && Object.keys(wsConfig?.server).length > 0 && wsConfig?.server?.port) {
125126
nodeTypesConfig.isWsServer = true;
126127
nodeTypesConfig.wsConfig = {
127128
server: wsConfig.server
@@ -145,7 +146,7 @@ const getNodeTypesConfig = (currentNodeState: CompageNode): NodeTypesConfig => {
145146
export const NewNodeProperties = (props: NewNodePropertiesProps) => {
146147
const uploadYamlStatus = useAppSelector(selectUploadYamlStatus);
147148
const uploadYamlData = useAppSelector(selectUploadYamlData);
148-
let parsedModifiedState = getParsedModifiedState();
149+
let parsedModifiedState: CompageJson = getParsedModifiedState();
149150
// sometimes the parsedModifiedState is empty so, recreate it.
150151
if (Object.keys(parsedModifiedState.nodes).length < 1) {
151152
updateModifiedState(JSON.parse(getCurrentConfig()));
@@ -1130,6 +1131,7 @@ export const NewNodeProperties = (props: NewNodePropertiesProps) => {
11301131
});
11311132
};
11321133

1134+
// eslint-disable-next-line
11331135
const getWsServerConfig = () => {
11341136
if (payload.isWsServer) {
11351137
return <React.Fragment>
@@ -1149,6 +1151,7 @@ export const NewNodeProperties = (props: NewNodePropertiesProps) => {
11491151
return '';
11501152
};
11511153

1154+
// eslint-disable-next-line
11521155
const getWsServerCheck = () => {
11531156
return <React.Fragment>
11541157
<FormControlLabel

0 commit comments

Comments
 (0)