plexsystems / rabbit-viz Goto Github PK
View Code? Open in Web Editor NEWRabbitMQ broker definition visualizer
Home Page: https://plexsystems.github.io/rabbit-viz/
License: MIT License
RabbitMQ broker definition visualizer
Home Page: https://plexsystems.github.io/rabbit-viz/
License: MIT License
It would be awesome if you could save or output the visualization both in a machine format and/or a JPG/PNG/etc.
I'm thinking in terms of like how Terraform allows you to perform a 'graph' output into a DOT format to build a visualization with Graphviz.
https://www.terraform.io/docs/commands/graph.html
https://www.graphviz.org/
When exporting definitions from the RabbitMQ UI, you have the ability to select a single VHOST. When you do that, the resulting definition JSON does not include the vhost
key anywhere. It looks like the parsing expects the top level vhost
object to be there.
Example definition when exporting the 'contoso' vhost in another example:
{
"queues": [{
"name": "MyQueue",
"durable": true,
"auto_delete": false,
"arguments": {}
}],
"exchanges": [{
"name": "MyExchange",
"type": "headers",
"durable": true,
"auto_delete": false,
"internal": false,
"arguments": {}
}],
"bindings": [{
"source": "MyExchange",
"destination": "MyQueue",
"destination_type": "queue",
"routing_key": "",
"arguments": {
"operation": "EVENTA"
}
}]
}
When visualizing a topic exchange and showing the routing keys, the resulting display is not great.
Example definition:
{
"vhosts": [{
"name": "contoso"
}],
"queues": [{
"name": "Contoso.SystemA",
"vhost": "contoso",
"durable": true,
"auto_delete": false,
"arguments": {}
}, {
"name": "Contoso.SystemB",
"vhost": "contoso",
"durable": true,
"auto_delete": false,
"arguments": {}
}],
"exchanges": [{
"name": "MyExchange",
"vhost": "contoso",
"type": "topic",
"durable": true,
"auto_delete": false,
"internal": false,
"arguments": {}
}],
"bindings": [{
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemA",
"destination_type": "queue",
"routing_key": "Contoso.EventA",
"arguments": {}
}, {
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemA",
"destination_type": "queue",
"routing_key": "Contoso.EventB",
"arguments": {}
}, {
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemA",
"destination_type": "queue",
"routing_key": "Contoso.EventC",
"arguments": {}
}, {
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemA",
"destination_type": "queue",
"routing_key": "Contoso.EventD",
"arguments": {}
}, {
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemA",
"destination_type": "queue",
"routing_key": "Contoso.EventE",
"arguments": {}
}, {
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemB",
"destination_type": "queue",
"routing_key": "Contoso.EventA",
"arguments": {}
}, {
"source": "MyExchange",
"vhost": "contoso",
"destination": "Contoso.SystemB",
"destination_type": "queue",
"routing_key": "Contoso.EventB",
"arguments": {}
}]
}
As evidenced in #20, the README could use a bit more depth in getting started with this project. This comment went into more detail for those unfamiliar with nodejs/npm and would be a good basis for updating instructions.
Alternate exchange between exchanges is a key component in routing.
It would be nice if it would appear as an edge in the graph (with alternate-exchange routing key if exists...)
It would be great if I could just drop the URL of the management UI into the app and have it pull back the definition directly from the node/cluster.
Add some sample configuration so that new users can understand better the value of this tool.
I opened the page and could not find a sample configuration or a screenshot.
It would be great if the application could simulate message traversal across the topology once displayed.
Here's a project that does just that, but does not support headers exchange. I'd find more value in being able to import the definition and then show just that.
http://tryrabbitmq.com
https://github.com/RabbitMQSimulator/RabbitMQSimulator
As mentioned in #7 we should focus on using npm as the sole package manager.
Remove yarn references and update the README to only refer to npm.
Hello, i am trying to install and use this package. I am not familiar with npm.
Can you provide step by step instruction how use it on linux pc without node.js and npm.
I am run "npm install plexsystems/rabbit-viz" and script collect over 250mb other modules
npm run start do nothing
cd node_modules/rabbit-viz/
npm run start throw errors
[email protected] start /home/noone/waiter2call/node_modules/rabbit-viz
react-scripts start
It looks like you're trying to use TypeScript but do not have typescript installed.
Please install typescript by running npm install typescript.
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
npm ERR! Linux 4.15.0-46-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "start"
npm ERR! node v8.10.0
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rabbit-viz package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs rabbit-viz
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls rabbit-viz
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/noone/waiter2call/node_modules/rabbit-viz/npm-debug.log
noone@harorah:~/waiter2call/node_modules/rabbit-viz$
can you help me how to use it?
It would be nice if you could choose different color or shape for different exchange types...
Add a method (such as on hover, or right click) to see the properties of an exchange or queue.
Also, for bindings, it is critical, since header exchange rely on arguments for routing, and not routing key...
This project currently uses react-scripts-ts, which has been deprecated. Create react app now natively supports typescript and should be used from here on out.
Here is a helpful guide for migrating from react-scripts-ts to react-scripts: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.