plexsystems / rabbit-viz Goto Github PK

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

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/

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.

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": {}
  }]
}

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 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/

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.

One of our systems heavily utilize headers-type exchanges which has hundreds of bindings on just a few exchanges which determine which queues messages get routed to. When visualizing that definition as-is it displays pretty flat, this is the result:

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"
    }
  }]
}

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 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 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...

It would be nice if you could choose different color or shape for different exchange types...

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.