A simple dashboard used to show the status of various connected pieces of software.

The video below showcases a single docker socket connection (But it does much more than docker!)

To display a simple status and list of all of my docker containers. I've been toying with making myself a proper home dashboard and I think think this is a good start.

I also wanted to play with GraphQL subscriptions and observables

And this has since grown into something that can give an up to date status on various different connectors.

• Links for every item on the dashboard!
• Websocket connections for speedy updates
• Any icon supported in react-icons see icons
• Show children items on your dashboard- Will also show the status of children containers
  • Got a docker container that relies on a website being available? Why not show both!?
  • see children
• Docker
  • List all the containers with the given label
  • Display the status of the containers
• Websites
  • Show the status and connectivity of a given website along with a link
  • Variable update interval
• Raw
  • Have some links that don't have any status attached?
  • Use the included file configuration and show any ol' link that you'd like.
• Agent Mode (New in V3): Use multiple plugsy containers to gather local states and push to a different instance to aggregate the statuses
  • Particularly useful if you have docker instances hosted on different machines or behind firewalls etc
  • See Agent Mode

docker-compose.yml:

version: "2.1"
services:

  plugsy:
    image: plugsy/core
    container_name: plugsy
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      - 3000:3000
    restart: unless-stopped


  vikunjadb:
    image: mariadb:10
    labels:
      dockerDash.name: 'DB'
      dockerDash.parents: 'Todo'
      dockerDash.icon: 'fi/FiDatabase'
    container_name: vikunjadb
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    restart: unless-stopped

  vikunjaapi:
    container_name: vikunjaapi
    image: vikunja/api
    restart: unless-stopped
    labels:
      dockerDash.name: 'API'
      dockerDash.parents: 'Todo'
      dockerDash.icon: 'fi/FiServer'

  vikunjafrontend:
    image: vikunja/frontend
    container_name: vikunjafrontend
    restart: unless-stopped
    labels:
      dockerDash.name: 'Todo'
      dockerDash.category: 'Home'
      dockerDash.icon: 'fi/FiPenTool'
      dockerDash.link: https://my.vikunja.com

There is now a configuration file that can be optionally added in order to include various connectors (Such as website connections or other arbitrary links). See connectors

This file should be mounted at /config.json in the container.

Note: Including the $schema field in the JSON file will help with auto complete in your preferred IDE.

config.json

{
  "$schema": "https://github.com/plugsy/core/releases/download/v3.0.0/config-schema.json",
  "connectors": [
    {
      "type": "DOCKER",
      "config": {}
    },
    {
      "type": "RAW",
      "config": {
        "id": "file",
        "items": [
          {
            "category": "Other",
            "name": "Beer Tab",
            "state": "GREEN",
            "icon": "fi/FiBeer"
          },
          {
            "name": "Beer Tab Dependency",
            "state": "GREEN",
            "icon": "fi/FiBeer",
            "parents": ["Beer Tab"]
          },
        ]
      }
    }
  ]
}

docker-compose.yml:

version: "2.1"
services:

  plugsy:
    image: plugsy/core
    container_name: plugsy
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./config.json:/config.json
    ports:
      - 3000:3000
    restart: unless-stopped

You can use any icons available in react-icons I recommend keeping the amount of icon packs used to a minimum to ensure a speedy delivery of your dashboard

Example: dockerDash.icon: 'fi/FiPenTool' is to load the FiPenTool icon in the feather pack dockerDash.icon: 'md/MdAlarm' is to load the MdAlarm icon in the Material Design pack

You can get the name of the pack looking at the url for the individual pack. https://react-icons.github.io/react-icons/icons?name=fi

In order to show dependent containers, you need only ensure that the item you wish to show has a parents label pointing at the same name as another item.

Example using the raw connector:

{
  "$schema": "https://github.com/plugsy/core/releases/download/v3.0.0/config-schema.json",
  "connectors": [
    {
      "type": "DOCKER",
      "config": {}
    },
    {
      "type": "RAW",
      "config": {
        "id": "file",
        "items": [
          {
            "category": "Other",
            "name": "Beer Tab",
            "state": "GREEN",
            "icon": "fi/FiBeer"
          },
          {
            "name": "Beer Tab Dependency",
            "state": "GREEN",
            "icon": "fi/FiBeer",
            "parents": ["Beer Tab"]
          },
        ]
      }
    }
  ]
}

An example of the same logic being applied using the docker connector docker-compose.yml can be shown below:

  vikunjaapi:
    container_name: vikunjaapi
    image: vikunja/api
    restart: unless-stopped
    labels:
      dockerDash.name: 'API'
      dockerDash.parents: 'Todo'
      dockerDash.icon: 'fi/FiServer'

  vikunjafrontend:
    image: vikunja/frontend
    container_name: vikunjafrontend
    restart: unless-stopped
    labels:
      dockerDash.name: 'Todo'
      dockerDash.category: 'Home'
      dockerDash.icon: 'fi/FiPenTool'
      dockerDash.link: https://my.vikunja.com

Simple enough:

docker-compose up --build

• The development build will not include all of the icons, and will instead generate a static icon instead.
  • This is to reduce the build time. Webpack loading 18,000 dynamic icons is looooooong, any feedback on how to speed that up is appreciated!
• Uses a custom Next.js server built with Parcel
  • This is in order for us to support websockets as Next.js doesn't by default.

Based off of AsyncAPIs blog

Ensure that a both a category and a name are defined, if you're using the default docker configuration and labels, that will require both the dockerDash.category and dockerDash.name labels on your container.

Category is required, you can only omit category when you want the container to appear as a child of another item on the dashboard.