While setting up a platform for one of our customers, our team noticed that it would be beneficial if we could update the banner background color and the banner text color for ArgoCD. ArgoCD is a tool that enables a Kubernetes cluster to pull changes directly from a Git repository using Helm, also known as Gitops. In addition, we discovered that you could only position the banner at either the top or the bottom, not both. Initially, the configuration map provided four values that allowed basic customization of the banner. To accommodate our needs, we added two new values. We also added the support for specifying “both” for the banner position, as seen below.
---
apiVersion: v1
kind: ConfigMap
metadata:
...
name: argocd-cm
data:
ui.bannercontent: "Banner message linked to a URL"
ui.bannerurl: "www.bannerlink.com"
ui.bannerpermanent: "true"
ui.bannerposition: "both"
ui.bannerbackgroundcolor: "#FF0000" # new
ui.bannertextcolor: "#00FFFF" # newThe following steps were taken to set up the dev environment:
1. Clone repository
git clone https://github.com/argoproj/argo-cd
2. Create a Kubernetes cluster. This can be done using a tool called kind.
brew install kind && kind create cluster
3. Apply argo-cd Kubernetes resources
kubectl apply -n default -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml
4. Install front-end dependencies
cd ui && yarn install && cd ..
5. Install Goreman
go install github.com/mattn/goreman@latest
6. Make sure go binaries are in PATH
export PATH=$HOME/go/bin:$PATH
7. Launch development environment
goreman start api-server ui
The front end will be accessible at http://localhost:4000. With the development environment up and running, you can now begin updating the UI code to incorporate the changes you desire. Any modifications made to the code will be instantly reflected in the environment, allowing you to preview your enhancements efficiently.
The Pull Request that was submitted with these changes can be found here:
