rabbitmq-message-manager-ui

A React component library for managing RabbitMQ messages, queues, and exchanges.
Plug it into any React application that talks to a RabbitMQ Message Handler backend.

Features

• Queue Browser — search, sort and inspect queues across virtual hosts
• Message Viewer — peek at message payload and metadata
• Message Mover — move messages between queues with optional key-value filters (no JSON knowledge needed)
• Themeable — CSS variables let you match your own design system
• TypeScript — full type declarations included
• Dual build — ships both CJS and ESM so it works with webpack, Vite, Next.js, etc.

Requirements

| Peer dependency | Version | |---|---| | react | ^18.0.0 | | react-dom | ^18.0.0 | | primereact | ^10.0.0 | | primeicons | ^6.0.0 \|\| ^7.0.0 | | axios | ^1.0.0 |

Installation

npm install rabbitmq-message-manager-ui
# peer deps (skip any you already have)
npm install react react-dom primereact primeicons axios

Quick start

// 1. Import the PrimeReact theme and styles once, at the top of your app
import 'primereact/resources/themes/lara-light-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

// 2. Use the component
import { RabbitMQManager } from 'rabbitmq-message-manager-ui';

export default function App() {
  return (
    <RabbitMQManager
      apiBaseUrl="http://localhost:5000"
      defaultVHost="/"
      onError={(err) => console.error(err)}
      onSuccess={(msg) => console.log(msg)}
    />
  );
}

That's it. The component renders a tabbed UI with Queue Browser, Message Viewer, and Message Mover.

Props

<RabbitMQManager>

| Prop | Type | Required | Default | Description | |---|---|---|---|---| | apiBaseUrl | string | ✅ | — | Base URL of the RabbitMQ Message Handler API | | defaultVHost | string | | — | Pre-select a virtual host on mount | | theme | RabbitMQTheme | | — | Override CSS variables (see below) | | onError | (error: Error) => void | | — | Called on any API error | | onSuccess | (message: string) => void | | — | Called after a successful operation | | className | string | | '' | Extra CSS class on the root element | | style | CSSProperties | | — | Inline styles on the root element |

RabbitMQTheme

interface RabbitMQTheme {
  primaryColor?: string;   // default: '#007bff'
  secondaryColor?: string; // default: '#6c757d'
  borderRadius?: string;   // default: '4px'
  fontSize?: string;       // default: '14px'
  fontFamily?: string;     // default: 'inherit'
}

<QueueBrowser>

| Prop | Type | Description | |---|---|---| | vhost | string | Pre-select a virtual host | | onQueueSelect | (queue, vhost, switchTab?) => void | Fired when the user clicks a queue | | columns | string | Comma-separated list of columns to fetch (default: name,vhost,messages,consumers,state) | | className | string | Extra CSS class |

<MessageMover>

| Prop | Type | Description | |---|---|---| | sourceVhost | string | Pre-fill source virtual host | | sourceQueue | string | Pre-fill source queue | | onComplete | () => void | Fired after messages are moved | | onCancel | () => void | Fired when the user clicks Cancel | | className | string | Extra CSS class |

<MessageViewer>

| Prop | Type | Description | |---|---|---| | vhost | string | Virtual host — required | | queue | string | Queue name — required | | onClose | () => void | Fired when the user closes the viewer | | className | string | Extra CSS class |

Advanced usage

Using individual components

If you want to build your own layout instead of the all-in-one <RabbitMQManager>, initialise the API client once and then render whichever components you need:

import {
  initializeApiClient,
  QueueBrowser,
  MessageViewer,
  MessageMover,
} from 'rabbitmq-message-manager-ui';

// Call this once before rendering any component
initializeApiClient({ baseURL: 'http://localhost:5000' });

export default function MyCustomUI() {
  const [selected, setSelected] = useState<{ queue: string; vhost: string } | null>(null);

  return (
    <div>
      <QueueBrowser
        vhost="/"
        onQueueSelect={(queue, vhost) => setSelected({ queue, vhost })}
      />

      {selected && (
        <MessageViewer vhost={selected.vhost} queue={selected.queue} />
      )}

      <MessageMover sourceVhost="/" sourceQueue="dead-letter" />
    </div>
  );
}

Using the hooks directly

import { useVHosts, useQueues, useMessages } from 'rabbitmq-message-manager-ui';

function QueueList() {
  const { vhosts } = useVHosts();
  const { queues, loading, refetch } = useQueues({ vhost: '/', pageSize: 200 });

  if (loading) return <p>Loading…</p>;

  return (
    <ul>
      {queues.map((q) => (
        <li key={q.name}>{q.name} — {q.messages} messages</li>
      ))}
    </ul>
  );
}

Backend API

The library expects a REST backend that exposes the following endpoints under a configurable base URL:

| Method | Path | Description | |---|---|---| | GET | /RabbitMQMessageHandling/info/vhosts | List virtual hosts | | GET | /RabbitMQMessageHandling/Queues/GetQueues | List queues | | POST | /RabbitMQMessageHandling/Messages/get | Peek messages | | POST | /RabbitMQMessageHandling/Messages/move | Move messages | | POST | /RabbitMQMessageHandling/Messages/move-filtered | Start filtered move (returns session) | | POST | /RabbitMQMessageHandling/Messages/move-filtered/confirm | Confirm filtered move | | POST | /RabbitMQMessageHandling/Messages/move-filtered/cancel | Cancel filtered move |

Browser support

Chrome, Firefox, Safari, Edge — latest two versions.

License

MIT