From 38eed9dcaf3a3540187d6e70edafefb6b88f2e10 Mon Sep 17 00:00:00 2001 From: SumantxD Date: Tue, 19 Dec 2023 21:13:29 +0530 Subject: [PATCH 1/3] fixing subscribe node error when creation of flow from yaml file --- Desktop/src/parser/flowGenerator.ts | 15 +++++++++++- .../renderer/GraphGenerator/ApiVisualizer.tsx | 4 ++-- .../src/renderer/Nodes/ApplicationNode.tsx | 11 ++++++--- Desktop/src/renderer/Nodes/PublishNode.tsx | 17 ++++++++++---- Desktop/src/renderer/Nodes/SubscribeNode.tsx | 20 +++++++++++----- .../src/renderer/containers/TitleBar/menu.tsx | 23 +++++++++++++++++++ 6 files changed, 73 insertions(+), 17 deletions(-) diff --git a/Desktop/src/parser/flowGenerator.ts b/Desktop/src/parser/flowGenerator.ts index e7635f2c..47b47eed 100644 --- a/Desktop/src/parser/flowGenerator.ts +++ b/Desktop/src/parser/flowGenerator.ts @@ -1,5 +1,6 @@ import { AsyncAPIDocument, Channel, Operation, Message } from '@asyncapi/parser'; import { Edge, Node } from 'reactflow'; +import { connect } from 'mqtt'; interface FileredChannel { channel: string; @@ -8,6 +9,16 @@ interface FileredChannel { messagesModel: Message[]; } +function createMqttClient() { + + const client = connect('mqtt://localhost:1883', { + manualConnect: true, + }); + + return client; + +} + //given the operation publish/subscribe we will extract the channels realted to it from the spec function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) { const channels = spec.channels(); @@ -30,6 +41,8 @@ function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) { function buildFlowElementsForOperation({ operation, spec, applicationLinkType, data }: { operation: 'publish' | 'subscribe'; spec: AsyncAPIDocument; applicationLinkType: string, data: any }): Array<{ node: Node, edge: Edge }> { return getChannelsByOperation(operation, spec).reduce((nodes: any, channel) => { const { channelModel, operationModel, messagesModel } = channel; + + const mqttClient = createMqttClient(); const node: Node = { id: `${operation}-${channel.channel}`, @@ -42,7 +55,7 @@ function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) { title: message.uid(), description: message.description(), })), - + autoClient: mqttClient, spec, description: channelModel.description(), operationId: operationModel.id(), diff --git a/Desktop/src/renderer/GraphGenerator/ApiVisualizer.tsx b/Desktop/src/renderer/GraphGenerator/ApiVisualizer.tsx index ea786f59..bd3b335d 100644 --- a/Desktop/src/renderer/GraphGenerator/ApiVisualizer.tsx +++ b/Desktop/src/renderer/GraphGenerator/ApiVisualizer.tsx @@ -202,11 +202,11 @@ export default function ApiVisualizer() { const targetNode = nodes.find((node) => node.id === edge.target); if(sourceNode?.type === 'publishNode' || sourceNode?.type === 'subscribeNode'){ - sourceNode?.data.mqttClient.end(); + sourceNode?.data.mqttClient?.end(); } if(targetNode?.type === 'publishNode' || targetNode?.type === 'subscribeNode'){ - targetNode?.data.mqttClient.end(); + targetNode?.data.mqttClient?.end(); } }); diff --git a/Desktop/src/renderer/Nodes/ApplicationNode.tsx b/Desktop/src/renderer/Nodes/ApplicationNode.tsx index b3c11881..8f87d8e4 100644 --- a/Desktop/src/renderer/Nodes/ApplicationNode.tsx +++ b/Desktop/src/renderer/Nodes/ApplicationNode.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Handle, Position } from 'reactflow'; import { AsyncAPIDocument } from '@asyncapi/parser'; import type { FunctionComponent } from 'react'; @@ -94,7 +94,6 @@ export const ApplicationNode: FunctionComponent = ({ } const handleClick = () => { - console.log('the button was clicked') ipcRenderer.send('start-aedes'); }; @@ -102,10 +101,16 @@ export const ApplicationNode: FunctionComponent = ({ ipcRenderer.send('stop-aedes'); } + useEffect(() => { + return () => { + ipcRenderer.send('stop-aedes'); + } + }, []) + const [isConnected, setIsConnected] = useState(false); return ( -
+
= ({ - data: { message , channel, description, mqttClient }, + data: { message , channel, description, mqttClient, autoClient }, }) => { const [topic, setTopic] = useState(channel || ''); const [payload, setPayload] = useState(message || ''); const [qos, setQos] = useState(0); + const client = mqttClient || autoClient const handleClick = () => { - - const client = mqttClient - if (client) { client.publish(topic, payload, { qos: qos }, function (err) { console.log(topic,payload,"T&Pwhild publishing") @@ -37,6 +36,14 @@ export const PublishNode: React.FunctionComponent = ({ }; + + useEffect(() => { + if(autoClient){ + autoClient.connect() + } + }, []) + + return (
diff --git a/Desktop/src/renderer/Nodes/SubscribeNode.tsx b/Desktop/src/renderer/Nodes/SubscribeNode.tsx index b23df1ee..0e072958 100644 --- a/Desktop/src/renderer/Nodes/SubscribeNode.tsx +++ b/Desktop/src/renderer/Nodes/SubscribeNode.tsx @@ -10,18 +10,19 @@ interface IData { description: string id: string mqttClient?: any; + autoClient?: any; } interface PublishNodeProps { data: IData } -export const SubscribeNode: FunctionComponent = ({ data: { topic, description, messages, mqttClient, id, QOS } }) => { +export const SubscribeNode: FunctionComponent = ({ data: { topic, description, messages, mqttClient, id, QOS, autoClient } }) => { const [subTopic, setSubTopic] = useState(topic || ''); const [qos, setQos] = useState(QOS || 0); - const client = mqttClient + const client = mqttClient || autoClient const handleClick = () => { if (client) { @@ -34,10 +35,17 @@ export const SubscribeNode: FunctionComponent = ({ data: { top }; useEffect(() => { - client.on('message', function (topic, message) { - console.log(message.toString()) - handleAddMessage(message.toString()+ "--/" + topic.toString()) - }) + + if(autoClient){ + autoClient.connect() + } + + if (client) { + client.on('message', function (topic, message) { + console.log(message.toString()) + handleAddMessage(message.toString()+ "--/" + topic.toString()) + }) + } }, []) diff --git a/Desktop/src/renderer/containers/TitleBar/menu.tsx b/Desktop/src/renderer/containers/TitleBar/menu.tsx index 10b0192e..cf355386 100644 --- a/Desktop/src/renderer/containers/TitleBar/menu.tsx +++ b/Desktop/src/renderer/containers/TitleBar/menu.tsx @@ -29,6 +29,10 @@ export const MenuBar: React.FC = ({ menu: propMenu }) => { [clicked] ); + useEffect(() => { + setMenu(propMenu); + }, [propMenu]); + const onButtonClick = useCallback( (i) => { if (lock.current) { @@ -40,6 +44,25 @@ export const MenuBar: React.FC = ({ menu: propMenu }) => { [clicked, focusing] ); + // const onButtonClick = useCallback( + // (i) => { + // if (lock.current) { + // lock.current = false; + // return; + // } + + // // Use the previous state when updating based on the current state + // setClicked((prevClicked) => { + // const newClicked = !(focusing === i && prevClicked); + // if (newClicked) { + // setFocusing(i); + // } + // return newClicked; + // }); + // }, + // [focusing,clicked] + // ); + const onTouchStart = useCallback( (i) => { if (i !== focusing && clicked) { From 145d871fa7281144bc78de0f83536fef226bea84 Mon Sep 17 00:00:00 2001 From: "Sumant.xD" <65810424+SumantxD@users.noreply.github.com> Date: Sun, 17 Dec 2023 22:09:50 +0530 Subject: [PATCH 2/3] Update README.md added the mqtt.yaml file and demo video --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 45ddaa84..9e0bf931 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,11 @@ Usage ``` npm run desktop ``` +[Dowload mqtt.zip](https://github.com/asyncapi/simulator/files/13696873/mqtt.zip) + +https://github.com/SumantxD/simulator/assets/65810424/a8f143b8-1ba5-4b8e-bb2a-5e2f4a91c1e1 + + #### Throught command line: From 28b722effe8a63ddefe816294f06ac85f1b2fd13 Mon Sep 17 00:00:00 2001 From: SumantxD Date: Wed, 27 Dec 2023 13:40:53 +0530 Subject: [PATCH 3/3] updating the readme.md file --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9e0bf931..97069507 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,16 @@ Usage ``` npm run desktop ``` -[Dowload mqtt.zip](https://github.com/asyncapi/simulator/files/13696873/mqtt.zip) +#### Video Demo : https://github.com/SumantxD/simulator/assets/65810424/a8f143b8-1ba5-4b8e-bb2a-5e2f4a91c1e1 +#### Simulation Configuration YAML : + +[Dowload mqtt.zip](https://github.com/asyncapi/simulator/files/13696873/mqtt.zip) + + + #### Throught command line: