Category: react

3D Docker Swarm visualizer with ThreeJS

Few days before I wrote about creating a Docker Swarm Visualizer here. I have enjoyed very much writing that peice of software. However, I wanted to have a more funny way to look at the cluster. Therefore, last weekend I thought of creating a 3D viewer of the cluster that might run on a large screen, realtime showing up the machines and their workloads.

After hacking a little bit, I ended up creating a 3D perspective of the Docker swarm cluster, that shows the nodes (workers in green, managers in blue and drained nodes in red colors and micro service containers in blue small cubes, all in real-time and by leveraging the ThreeJS library. It was just an added funny view to the existing visualizer. Hope you will like it!

You need to rebuild the docker image from the docker file in order to have the 3d view enabled. I didn’t want to include this into the moimhossain/viswarm image.

Docker Swarm visualizer

VISWARM

A visual representation facilitates understanding any complex system design. Running micro-services on a cluster is no exception. Since I am involved in running and operating containers in Docker swarm cluster, I often wonder how better I could be on top of the container tasks distribution is taking place at any given moment, their health, the health of the machine underneath etc. I have found the docker-swarm-visualizer in GitHub – which does a nice job in visualizing the nodes and tasks graphically. But I was thriving to associate a little more information (i.e. image, ports, node’s IP address etc.) to the visualization. Which could help me take the follow up actions as needed. Which led me writing a swarm visualizer that does fulfil my wishes.

Here’s video glimpse for inspirations.

Well, that’s one little excuse of mine. Of course writing a visualizer is always a fun activity for me. The objective of the visualizer was following:

  • Run the visualizer as a container into the swarm
  • Real time updates when nodes added, removed, drained, failed etc.
  • Real time updates when services created, updated, replications changed.
  • Real time updates when task added, removed etc.
  • Display task images, tags to track versions (when rolling updates take place)
  • Display IP address and ports for nodes – (helps troubleshooting)

How to run

To get the visualizer up and running in your cluster

> docker run -p 9009:9009 -v /var/run/docker.sock:/var/run/docker.sock moimhossain/viswarm

How to develop

This is what you need to do in order to start hacking the codebase

> npm install

It might be the case that you have installed webpack locally and received a webpack command not recognized error. In such scenarios, you can either install webpack globally or run it from local installation by using the following command:

node_modules\.bin\webpack

Start the development server (changes will now update live in browser)

> npm run dev

To view your project, go to: http://localhost:9009/

Some of the wishes I am working on:

  • Stop tasks from the user interface
  • Update service definitions from user interface
  • Leave, drain a node from the user interface
  • Alert on crucial events like node drain, service down etc.

The application written with Express 4 on Node JS. React-Redux for user interface. Docker Remote API’s are sitting behind proxy with a Node API on top, which better prevents exposing Docker API – when IPv6 used.

If you are playing with Docker swarm clusters and reading this, I insist, give it a go, you might like it as well. And of course, it’s in GitHub, waiting for helping hands to take to the next level.