DEV Community

loading...
Cover image for pulsar-express, a web interface for Apache Pulsar

pulsar-express, a web interface for Apache Pulsar

Bruno Bonnin
Software Engineer, ZX Spectrum fan
・3 min read

In this article, I am going to present you one of my side project: pulsar-express.

Pulsar-express aims to be a simple web application that allow the users to see informations about their Apache Pulsar clusters.

My initial goal was to provide something very simple (too much, maybe), easy to install, configure and run, and this article will show you these steps.

Install and run it

There are several ways to use pulsar-express:

  • By cloning the projet and running it locally (see Development section)
  • By running a docker image: docker run -it -p 3000:3000 bbonnin/pulsar-express
    • You can set a connection url in the command: docker run -it -p 3000:3000 -e PE_CONNECTION_URL=http://host.docker.internal:8080 bbonnin/pulsar-express
    • Important: the calls to the Pulsar API are done on server side (i.e. from the container), so your Pulsar must be reachable from the container (do not use localhost :)). A solution: you can add --network=host to the command line (but, it's only working on Linux...)
  • By installing it using npm
# Install it globally
$ npm install pulsar-express -g

# Start it
$ pulsar-express

        ╭────────────────╮
        │ PULSAR EXPRESS │
        ╰────────────────╯

        => Open http://localhost:3000


# Start it on a specific port
$ PORT=8000 pulsar-express

        ╭────────────────╮
        │ PULSAR EXPRESS │
        ╰────────────────╯

        => Open http://localhost:8000

Enter fullscreen mode Exit fullscreen mode

If you want to configure connections (to be available to all users), you can:

  • Create a json file with the connections:
[
  { "name": "test cluster", 
     "url": "http://test-cluster-host:8080" },

  { "name": "integration cluster", 
     "url": "http://int-cluster-host:8080", 
     "token": "<YOUR_TOKEN>" },

  { "name": "prod cluster", 
     "url": "http://prod-cluster-host:8080", 
     "fctWorkerUrl": "http://prod-fct-worker-cluster-host:6750",
     "token": "<YOUR_TOKEN>" },
]
Enter fullscreen mode Exit fullscreen mode
  • and set the env variable PE_CONFIG_FILE
export PE_CONFIG_FILE=/path/to/my/config.json
Enter fullscreen mode Exit fullscreen mode
  • Or you can also set a connection URL
export PE_CONNECTION_URL=http://pulsar-host:8080

# Without a name, the url will be used (hostname:port),
# Or you can set a name:
export PE_CONNECTION_NAME=my-pulsar

# A token if needed:
export PE_CONNECTION_TOKEN=<YOUR_TOKEN>
Enter fullscreen mode Exit fullscreen mode

For a detailed explication about the security configuration, checkout the README of the project.

From there, you can connect with your browser to the url above !

Pulsar express home

Quick start

If you haven't defined a connection at startup, the first step is to go the Connections page and add a new connection. These connections are stored on client side (localstorage of your browser)

Pulsar express connections

Overview

In this page, you can see some basic informations about your clusters.

Pulsar express overview

Clusters

Informations about the clusters (URL, ...). You can update some informations.

Pulsar express clusters

Tenants

Informations about the tenants.

Pulsar express tenants

In this page, you can also create a tenant.

Namespaces

Informations about the namespaces:

Pulsar express namespaces

In this page, you can also create a namespace.

Topics

Informations about the topics:
Pulsar express topics

In this page, you can also create a topic.

Details about a topic:

Pulsar express topics

Functions

Informations about the functions:

Pulsar express functions

Details about a function:

Pulsar express function

Development

The repository of the app is: https://github.com/bbonnin/pulsar-express.

This app has been developed with Nuxt.js.

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start
Enter fullscreen mode Exit fullscreen mode

For detailed explanation on how things work, checkout Nuxt.js docs.

For Docker:

  • Build: npm run docker-build
  • Test locally: npm run docker-run
  • Tag: docker tag pulsar-express USER/pulsar-express:VERSION
  • Publish: docker push USER/pulsar-express:VERSION

Conclusion

There is still a lot to be done to get a fully functional application.
If you are interested in the project, feel free to participate in the development of the application.

Cover photo by Lerone Pieters on Unsplash

Discussion (0)