github.com/jont828/cluster-api-visualizer

Cluster API Visualizer (CAPI V8r)

Cluster API developers and operators often need to quickly get insight multicluster configuration. This app provides that insight by making Cluster API significantly more accessible and easier to understand for both new and experienced users. It gives a bird’s eye view of a multicluster architecture, visualizes all the Cluster API custom resources for each cluster, and provides quick access to the specs and status of any resource.

https://github.com/user-attachments/assets/f1d5c036-eaac-4dc4-a4c5-8de9b64ac3cd

Quick start

1. Prerequisites

Install and set up kind, Docker, kubectl, and helm. In addition, install any additional prerequisites needed for Cluster API.

2. Create a Cluster API management cluster

Create a local management cluster with kind and a workload cluster by following the Cluster API quick start guide.

3. Deploy with Helm

Then, run the following command to start the app:

./hack/deploy-repo-to-kind.sh

This will run the app as a deployment on management clusters built with kind.

Contributing:

All contributions are welcome. If you'd like to help out, feel free fork the repo and submit a pull request.

Acknowledgements:

• Thanks to @fabriziopandini for helping guide the backend development.
• The cluster trees are drawn in D3 using a modified version of ssthouse/vue-tree-chart
• The tree is generated using the clusterctl client from Cluster API
• The Go server was developed from Trevor Taubitz's tutorial on embedding VueJS in Go and tutorial on serving single page apps from Go
• Thanks to Vuetify for providing a great UI component toolkit