DEV Community: Bruno Bonnin

pulsar-express, a web interface for Apache Pulsar

Bruno Bonnin — Fri, 17 Jan 2020 10:27:40 +0000

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

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

and set the env variable PE_CONFIG_FILE

export PE_CONFIG_FILE=/path/to/my/config.json

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>

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 !

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)

Overview

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

Clusters

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

Tenants

Informations about the tenants.

In this page, you can also create a tenant.

Namespaces

Informations about the namespaces:

In this page, you can also create a namespace.

Topics

Informations about the topics:

In this page, you can also create a topic.

Details about a topic:

Functions

Informations about the functions:

Details about a 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

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

Building a simple app with Nuxt and Morris for displaying charts

Bruno Bonnin — Fri, 06 Sep 2019 14:44:55 +0000

This post was originally posted on Medium.

The article aims to describe (very shortly) how to create an application that will display a chart for data coming from an API.

First step, create the app with Nuxt

Nuxt is one of my favourite framework at the moment: if you are familiar with Vue.js, building an application with Nuxt is the next step to a simpler and more beautiful world 😀
So, let’s start by creating the application with the command npx create-nuxt-app

$ npx create-nuxt-app
npx : 379 installé(s) en 16.616s

> Generating Nuxt.js project in /Dev/world-bank-data
? Project name: world-bank-data
? Project description: A wonderful app with Nuxt and Morris
? Use a custom server framework: none
? Choose features to install: Axios
? Use a custom UI framework: none
? Use a custom test framework: none
? Choose rendering mode: Single Page App
? Author name: Bruno
? Choose a package manager: npm


  To get started:

        npm run dev

  To build & start for production:

        npm run build
        npm start

Important: select axios as a feature to install and choose Single Page App for the rendering mode.

Now, you can start your application with npm run dev and open http://localhost:3000. You should get something like that:

Next step, add dependencies, plugins, etc

We need two other dependencies for our application:

vue-lodash : a library that provides utility functions (will be used to parse the result of the API
vue-morris : a wrapper of Morris.js for Vue.js (it is a little bit old, but very efficient)

Let’s add these required dependencies :

npm i vue-lodash vue-morris --save

For a simpler use of certain dependencies, Nuxt can be enriched with plugins. Let’s do it with vue-lodash and vue-morris.

Create two files: plugins/vue-lodash.js and plugins/vue-morris.js and update nuxt.config.js to declare these plugins.

nuxt.config.js

export default {

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/vue-lodash',
    '~/plugins/vue-morris'
  ],
}

vue-lodash.js

import Vue from 'vue'
import VueLodash from 'vue-lodash'

// To be able to use this._ or Vue._ in the components without including lodash
Vue.use(VueLodash)

vue-morris.js

import Raphael from 'raphael/raphael'
import jQuery from 'jquery'

// This is needed by Morris
global.Raphael = Raphael
global.jQuery = jQuery

Final step, add a new page with the chart

Now, we are going to create a page to display the 10 most populous countries in a bar chart.

The service used for this example is the API of the World Bank. They provide a lot of data, very interesting ! For more information about the API, check this page.

In our example, we use this URL: http://api.worldbank.org/v2/country/all/indicator/SP.POP.TOTL?date=2018&format=json&per_page=300&mrv=1

Parameters:

SP.POP.TOTL: name of the indicator (in our case, the population)
date: range of date (I just set the last year, I don’t want historical data)
format: format of the result (it can be XML, JSON, …)
per_page: number of result for each query (I set it to 300 to get all the results in a single query, no paging)
mrv: fetches most recent values based on the number specified (I set it to 1, to get only the last recent value)

To query this API and get the most populous countries, the code will look like (in this method, we filter the values, sort according to the value field and keep only 10 values):

this.$axios.$get('http://api.worldbank.org/v2/country/all/indicator/SP.POP.TOTL?date=2018&format=json&per_page=300&mrv=1')
      .then(data => {
        this.countries = this._.chain(data[1])
          .filter(d => d.value && d.countryiso3code)
          .sortBy('value')
          .value()
          .slice(-10)
          .reverse()
      })

Let’s add a new file: pages/population.vue

The <script> part: we import BarChart from vue-morris and add a mounted function that invoke the API (see above)
The <template> part: we use the bar-chart tag for displaying the result of the call to the API.

<template>
  <section class="container">
    <h1 class="title">The 10 most populous countries</h1>
    <bar-chart id="bar" 
      :data="countries" 
      xkey="countryiso3code" 
      ykeys='["value"]' 
      labels='["Pop."]'
      resize="true" 
      bar-colors='[ "#36A2EB" ]'
      grid="true" 
      grid-text-weight="bold">
    </bar-chart>
  </section>
</template>

<script>
import { BarChart } from 'vue-morris'
export default {
  components: {
    BarChart
  },
  data() {
    return {
      countries: []
    }
  },
  mounted() {
    this.$axios.$get('http://api.worldbank.org/v2/country/all/indicator/SP.POP.TOTL?date=2018&format=json&per_page=300&mrv=1')
      .then(data => {
        this.countries = this._.chain(data[1])
          .filter(d => d.value && d.countryiso3code)
          .sortBy('value')
          .value()
          .slice(-10)
          .reverse()
      })
  }
}
</script>

Now, if you open the URL http://localhost:3000/population, you should see something like that:

Finally, we are going to create a link to navigate from the home page to the population page: update the file pages/index.vue, replace the two buttons by a <nuxt-link> (you can also remove the logo).

<template>
  ...
  <nuxt-link to="/population" class="button--grey">World population</nuxt-link>
  ...
</template>

Conclusion

As you can see, it’s very easy to create an application with Nuxt and add a simple chart framework to get rich and interactive pages.
The source code is available on github: https://github.com/bbonnin/medium-nuxt-morris. Enjoy !

Cover image by William Iven