[Plugin] Toolbox Plugin (Tools Catalog)

[gabriel-dantas98]

Summary

A page that lists the tools used in engineering so that all engineers can access them.

Project website (if applicable)

We developed this plugin in QuintoAndar and received a lot of feedback that would be useful for other companies.

Context

Basically, it's a frontend plugin that reads a data structure with tool links separated by environment and subject.

categories:
  - name: monitoring
    tools:
      - name: grafana
        description: >-
          Grafana is the open source analytics & monitoring solution for every
          database.
        environments:
          - name: development
            url: 'https://grafana.development.company.com.br'
          - name: production
            url: 'https://grafana.company.com.br'

      - name: prometheus
        description: 'Prometheus is a free software application used for event monitoring and alerting. It records real-time metrics in a time series database (allowing for high dimensionality) built using a HTTP pull model, with flexible queries and real-time alerting.'
        environments:
          - name: development
            url: 'https://prometheus.development.company.com.br'
          - name: production
            url: 'https://prometheus.company.com.br'

      - name: kibana
        description: >-
          Kibana is an free and open frontend application that sits on top of
          the Elastic Stack, providing search and data visualization
          capabilities for data indexed in Elasticsearch.
        environments:
          - name: development
            url: 'https://kibana.development.company.com.br'
          - name: production
            url: 'https://kibana.company.com.br'

  - name: CI/CD
    tools:
      - name: drone-ci
        description: >-
          Drone is a Continuous Delivery system built on container technology.
          Drone uses a simple YAML configuration file, a superset of
          docker-compose, to define and execute Pipelines inside Docker
          containers.
        environments:
          - name: production
            url: 'https://drone.company.com.br'

      - name: argo-CD
        description: >-
          Argo CD is a declarative, GitOps continuous delivery tool for
          Kubernetes.
        environments:
          - name: development
            url: 'https://argocd.development.company.com.br'
          - name: staging
            url: 'https://argocd.development.company.com.br'
          - name: production
            url: 'https://argocd.production.company.com.br'

      - name: argo-rollouts
        description: >-
          Argo Rollouts is a Kubernetes controller and set of CRDs which 
          provide advanced deployment capabilities such as blue-green, canary, 
          canary analysis, experimentation, and progressive delivery features 
          to Kubernetes.
        environments:
          - name: development
            url: 'https://rollouts.development.company.com.br'

  - name: data
    tools:
      - name: airflow
        description: >-
          Airflow is a platform created by the community to 
          programmatically author, schedule and monitor workflows.
        environments:
          - name: production
            url: 'https://airflow.company.com.br/'
          - name: development
            url: 'https://airflow.development.company.com.br/'

[gabriel-dantas98]

I would also like to know what would be the best way to bring this to the backstage repository.

[kuangp]

This seems similar to the tools tab of the Explore plugin and somewhat related to the homepage toolkit card

[gabriel-dantas98]

Does it make sense, is there any relationship between the two plugins? Or are they independent?

Maybe they could be different views of the same plugin?

Does our plugin have a classification for each tool, and can each of them have more than one environment link?

[awanlin]

I agree with @kuangp, this seems like what's already in the Explore plugin's Tool tab: https://demo.backstage.io/explore/tools

But it would be pretty awesome if you added the additional features of your plugin to it!!! What do you think @gabriel-dantas98?

[gioufop]

I found very interesting! Simple and practical. :)

[bendu89]

Hey - I know that @iammnils has built something similar for one of our clients. He ist currently on vacation, but back next week. I will slack him that he should add some when he is back!

[gabriel-dantas98]

I agree with @kuangp, this seems like what's already in the Explore plugin's Tool tab: https://demo.backstage.io/explore/tools

But it would be pretty awesome if you added the additional features of your plugin to it!!! What do you think @gabriel-dantas98?

Seems like the best approach, I'll explore the plugin better and propose improvements! :D

I also believe that we can create documentation on how to configure and implement this use case from built-in tools

[akibabu]

We have also built this internally, environments and the external yaml is the key points that was not available in any of the existing plugins. To have the UI be instant we poll the yaml from github using a scheduler from @backstage/backend-tasks

For this plugin I think both a full explore type page (with expanded descriptions) and a more compact home screen widget is useful.

[iammnils]

Really like the issue and your Toolbox. Enhancing the existing explore plugin would be awesome.

As @bendu89 mentioned: In our case, we wanted to enable users to contribute to the explore/tools. Thus, we have introduced a new type: tool for the kind: Component along with new specs including an image and a url. An additional imageDataPlaceholderProcessor resolves and validates the image.

This is an example yaml.

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: sda-documentation
  title: SDA Documentation
  description: |
        Description here.
  tags:
    - documentation
spec:
  type: tool
  owner: sda-backstage
  lifecycle: production
  toolUrl: https://url-here.com
  images:
    - title: SDA Documentation
      fit: contain
      url:
        $imageData: ./sda.jpg 

[aladjadj]

Hi, This proposition is very usefull and we would like to implement something like to improve the current explore pluging. Do you already working to this ? Or any chance to share a draft code to help on contribute. Thx

[andrewthauer]

The explore plugin can mostly handle this already with some tweaks. I have PR backstage/backstage#14389 which adds a explore-backend with a search collator. I have ideas to also enhance the frontend with more capabilities as well. I feel the only thing currently missing to replicate this proposal is multiple links to support different environments. At least on the ExploreTool type.

[gabriel-dantas98]

Sorry for the delay 😅

Our team is working on some improvements in the internal plugin and possibly we will make it open source. In parallel I will use the suggestions to contribute to explore I should open a pull request soon.

[felipefreitasffs]

Hi @gabriel-dantas98, I would love to have this plugin, is it already open source?

[andrewthauer]

Some background work as done on the existing explore plugin to add a backend + search and filtering. However, the frontend could still use some updates like filtering and grouping perhaps like show here. I don't believe there is a need for a new plugin, just expanding on the existing explore plugin.