install instructions

.gitignore

@@ -1,3 +1,3 @@
 .idea/
 vendor/
-dist/
+/dist/

Makefile

@@ -56,5 +56,5 @@ lint: $(GOPATH)/bin/golangci-lint
 	golangci-lint run --fix --verbose --concurrency 4 --timeout 5m
 
 image: build
-	DOCKER_BUILDKIT=1 docker build  -t $(IMAGE_NAMESPACE)/$(BINARY_NAME):$(VERSION)  -f $(DOCKERFILE) .
+	DOCKER_BUILDKIT=1 docker build --load -t $(IMAGE_NAMESPACE)/$(BINARY_NAME):$(VERSION)  -f $(DOCKERFILE) .
 	@if [ "$(DOCKER_PUSH)" = "true" ]; then docker push $(IMAGE_NAMESPACE)/$(BINARY_NAME):$(VERSION); fi

README.md

@@ -1,25 +1,70 @@
-# ArgoCD Extension Metrics
-The project introduces the ArgoCD extension to enable Metrics on Resource tab.
-![](./docs/images/screenshot.png)
-# Quick Start
+# Argo CD Extension Metrics
+
+The project introduces the Argo CD extension to enable Metrics on Resource tab.
+
+![Argo CD resource tab showing metrics for the selected Pod.](./docs/images/screenshot.png)
+
+## Quick Start
+
+### Prerequisites
+
+* Install `yq`
+* Build the extension image: `make image`
+
+### Setup
+
+Set up a local cluster. These instructions were tested with kind v0.17.0 on OSX.
+
+```shell
+kind create cluster
+```
+
+If using `kind`, load the metrics service image.
+
+```shell
+kind load docker-image docker.io/argoproj/argocd-metrics-server:latest
+```
+
+Then install the quick-start manifests. This includes:
+* Argo CD
+* Argo CD Extensions controller
+* This UI extension
+* kube-prometheus-stack
 
-- Install Argo CD and Argo CD Extensions Controller: https://github.com/argoproj-labs/argocd-extensions
-- Create `argocd-metrics-server` deployment in `argocd` namespace
 ```sh
-kubectl apply -n argocd \
-    -f https://raw.githubusercontent.com/argoproj-labs/argocd-extension-metrics/main/manifests/install.yaml
+# Create namespaces for dependencies.
+kubectl create ns argocd
+kubectl create ns monitoring
+
+# Install CRDs first.
+kustomize build manifests/quick-start/ --enable-helm | yq 'select(.kind == "CustomResourceDefinition")' | kubectl apply --server-side -f -
 
+# Install everything else.
+kustomize build manifests/quick-start/ --enable-helm | yq 'select(.kind != "CustomResourceDefinition")' | kubectl apply --server-side -f -
 ```
-- Create `argocd-extension-metrics` extension in `argocd` namespace
+
+In two different terminals:
+
+```shell
+kubectl port-forward svc/argocd-server -n argocd 8080:443
 ```
-kubectl apply -n argocd \
-    -f https://raw.githubusercontent.com/argoproj-labs/argocd-extension-metrics/main/manifests/extension.yaml
+
+```shell
+kubectl port-forward svc/argocd-metrics-server -n argocd 8081:9003
 ```
 
-# Enable the Argo UI to access the ArgoCD Metrics Server.
+Log in to the [local Argo CD UI](https://localhost:8080/applications/argocd/bootstrap?view=tree&resource=) with username/password `admin`/`password`.
+
+Visit the [port-forwarded metrics service](https://localhost:8081/api/extension/metrics/applications/test/groupkinds/pod/dashboards) and override the certificate warning.
+This will allow the Argo CD UI to load metrics from that endpoint.
+
+Finally, click any Pod in the UI and then click the Metrics tab.
 
-## ArgoCD < v2.5
-ArgoCD version less than v2.5 doesn't support the `Backend Proxy`. You have to configure the Ingress to deviate the API calls between ArgoCD server and ArgoCD metrics Server
+# Enable the Argo UI to access the Argo CD Metrics Server.
+
+## Argo CD < v2.5
+
+Argo CD version less than v2.5 doesn't support the `Backend Proxy`. You have to configure the Ingress to deviate the API calls between Argo CD server and Argo CD metrics Server
 ```yaml
 spec:
   rules:
@@ -39,8 +84,44 @@ spec:
               number: 80
         path: /
         pathType: Prefix
-
 ```
 
-## ArgoCD > v2.6
-ArgoCD Team is working to implemented backend proxy [proposal](https://github.com/argoproj/argo-cd/blob/master/docs/proposals/proxy-extensions.md)
+## Argo CD > v2.6
+
+Argo CD Team is working to implemented backend proxy [proposal](https://github.com/argoproj/argo-cd/blob/master/docs/proposals/proxy-extensions.md)
+
+## Developing the UI extension
+
+1. Follow the [quick start instructions](#quick-start) above to set
+2. Fork this repo and clone it (for examples, we'll assume your user name is `EXAMPLE-USER`)
+3. Create a new branch (for examples, we'll use the name `NEW-FEATURE`)
+4. Edit the [extension install manifest](manifests/extension/extension.yaml) to point to your user and branch:
+
+    ```yaml
+    apiVersion: argoproj.io/v1alpha1
+    kind: ArgoCDExtension
+    spec:
+      sources:
+        - web:
+            url: https://github.com/EXAMPLE-USER/argocd-extension-metrics/raw/NEW-FEATURE/extensions/resource-metrics/resource-metrics-extention/ui/dist/extension.tar
+    ```
+
+5. Make changes to [extension source code](extensions/resource-metrics/resource-metrics-extention/ui)
+6. `cd` to `extensions/resource-metrics/resource-metrics-extention/ui`
+7. Build the modified extension code with `make build`
+8. `git add . && git commit -m "my message" && git push` to push the new build
+9. `kubectl delete argocdextension argocd-metrix-ext -n argocd`
+10. Wait a few seconds for Argo CD to notice the missing resource and re-create it - this will install the new version of
+    the extension in the API server
+11. Refresh the Argo CD UI to load the new extension code
+
+## Developing the metrics service
+
+1. Follow the [quick start instructions](#quick-start) above to set
+2. Make changes to the metrics service code
+3. Run `make image` to build the service
+4. Run `kind load docker-image docker.io/argoproj/argocd-metrics-server:latest` (or the equivalent for your local cluster)
+5. Run `kubectl rollout restart deployment/argocd-metrics-server -n argocd` to restart the metrics server and load the new image
+6. Run `kubectl port-forward svc/argocd-metrics-server -n argocd 8081:9003` to restart the port-forward to the metrics service
+7. Visit the [metrics service](https://localhost:8081/api/extension/metrics/applications/test/groupkinds/pod/dashboards) in your browser and override the cert warning
+8. Refresh the Argo CD UI to start loading data from the new service code

cmd/main.go

@@ -3,6 +3,8 @@ package main
 import (
 	"context"
 	"flag"
+	"os"
+
 	"github.com/argoproj-labs/argocd-metric-ext-server/server"
 	"github.com/argoproj-labs/argocd-metric-ext-server/shared/logging"
 )
@@ -15,6 +17,11 @@ func main() {
 	ctx := context.Background()
 	defer ctx.Done()
 
-	metricsServer := server.NewO11yServer(logger, port)
+	var headers = map[string]string{}
+	if origin := os.Getenv("ACCESS_CONTROL_ALLOW_ORIGIN"); origin != "" {
+		headers["Access-Control-Allow-Origin"] = origin
+	}
+
+	metricsServer := server.NewO11yServer(logger, port, headers)
 	metricsServer.Run(ctx)
 }

extensions/resource-metrics/resource-metrics-extention/manifests/install.yaml

@@ -7,5 +7,4 @@ metadata:
 spec:
   sources:
     - web:
-        url: https://github.com/argoproj-labs/argocd-extension-metrics/raw/main/extensions/resource-metrics/resource-metrics-extention/ui/dist/extension.tar
-
+        url: https://github.com/crenshaw-dev/argocd-extension-metrics/raw/install-instructions/extensions/resource-metrics/resource-metrics-extention/ui/dist/extension.tar

extensions/resource-metrics/resource-metrics-extention/ui/.gitignore

@@ -10,7 +10,7 @@
 
 # production
 /build
-/ui/dist
+/dist/resources
 
 # misc
 .DS_Store

extensions/resource-metrics/resource-metrics-extention/ui/Makefile

@@ -1,4 +1,7 @@
-build:
+install:
+	yarn install
+
+build: install
 	yarn build
 	# dist/extension.tar must be committed into repo for install.yml to reference
 
@@ -10,4 +13,4 @@ apply:
 	kubectl apply -f ../manifests/install.yml -n argocd
 
 delete:
-	kubectl delete -f ../manifests/install.yml -n argocd
+	kubectl delete -f ../manifests/install.yml -n argocd

extensions/resource-metrics/resource-metrics-extention/ui/src/Metrics/Metrics.tsx

@@ -17,7 +17,7 @@ export const Metrics = ({ application, resource, events, duration, setHasMetrics
   const uid = application?.metadata?.uid || ''
 
   useEffect(() => {
-    const url = `/api/extension/metrics/applications/${application_name}/groupkinds/${resource.kind.toLowerCase()}/dashboards`
+    const url = `https://localhost:8081/api/extension/metrics/applications/${application_name}/groupkinds/${resource.kind.toLowerCase()}/dashboards`
     fetch(url)
       .then(response => {
         if (response.status > 399) {
@@ -81,7 +81,7 @@ export const Metrics = ({ application, resource, events, duration, setHasMetrics
             </div>
             <div className='application-metrics__ChartContainerFlex'>
               {row?.graphs?.map((graph: any) => {
-                const url = `/api/extension/metrics/applications/${application_name}/groupkinds/${resource.kind.toLowerCase()}/rows/${row.name}/graphs/${graph.name}?name=${resourceName}.*&namespace=${namespace}&application_name=${application_name}&project=${project}&uid=${uid}&duration=${duration}`
+                const url = `https://localhost:8081/api/extension/metrics/applications/${application_name}/groupkinds/${resource.kind.toLowerCase()}/rows/${row.name}/graphs/${graph.name}?name=${resourceName}.*&namespace=${namespace}&application_name=${application_name}&project=${project}&uid=${uid}&duration=${duration}`
                 return (
                   <ChartWrapper
                     application_name={application_name}

manifests/configmap.yaml → manifests/extension/configmap.yaml

@@ -296,7 +296,7 @@ data:
       {
         "Name": "default",
         "default": true,
-        "address": "http://prometheus-service.monitoring.svc.cluster.local:8080"
+        "address": "http://test-kube-prometheus-stack-prometheus.monitoring.svc.cluster.local:9090"
       }
     }
     }

manifests/extension.yaml → manifests/extension/extension.yaml

@@ -10,4 +10,4 @@ metadata:
 spec:
   sources:
     - web:
-        url: https://github.com/argoproj-labs/argocd-extension-metrics/blob/main/manifests/extension.tar
+        url: https://github.com/crenshaw-dev/argocd-extension-metrics/raw/install-instructions/extensions/resource-metrics/resource-metrics-extention/ui/dist/extension.tar

manifests/install.yaml → manifests/extension/install.yaml

@@ -20,8 +20,10 @@ spec:
               fieldRef:
                 apiVersion: v1
                 fieldPath: metadata.namespace
-          image: sarabala1979/argocd-metrics-server:v1
-          imagePullPolicy: IfNotPresent
+          - name: ACCESS_CONTROL_ALLOW_ORIGIN
+            value: "https://localhost:8080"
+          image: docker.io/argoproj/argocd-metrics-server:latest
+          imagePullPolicy: Never
           name: argocd-metrics-server
           ports:
            - containerPort: 9003

manifests/kustomization.yaml → manifests/extension/kustomization.yaml

@@ -5,4 +5,3 @@ resources:
 - configmap.yaml
 - install.yaml
 - extension.yaml
-

manifests/quick-start/.gitignore

@@ -0,0 +1 @@
+charts

manifests/quick-start/argo-cd/argocd-cm-patch.yaml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: argocd-cm
+data:
+  kustomize.buildOptions: --enable-helm

manifests/quick-start/argo-cd/argocd-secret-patch.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: Secret
+metadata:
+  name: argocd-secret
+  labels:
+    app.kubernetes.io/name: argocd-secret
+    app.kubernetes.io/part-of: argocd
+stringData:
+  # admin.password is "password"
+  admin.password: $2a$10$RncPyHW/B5ll2Z3J8s.IBOnbZ9uoJ4JhHLKzj5lzG/kU1KN1Oj3/K
+  admin.passwordMtime: 2019-03-20T17:54:53Z
+type: Opaque

manifests/quick-start/argo-cd/bootstrap.yaml

@@ -0,0 +1,18 @@
+apiVersion: argoproj.io/v1alpha1
+kind: Application
+metadata:
+  name: bootstrap
+spec:
+  project: default
+  source:
+    repoURL: https://github.com/crenshaw-dev/argocd-extension-metrics
+    targetRevision: install-instructions
+    path: manifests/quick-start
+  destination:
+    server: https://kubernetes.default.svc
+  syncPolicy:
+    automated:
+      selfHeal: true
+      prune: true
+    syncOptions:
+      - ServerSideApply=true

manifests/quick-start/argo-cd/kustomization.yaml

@@ -0,0 +1,16 @@
+namespace: argocd
+
+commonLabels:
+  app.kubernetes.io/instance: bootstrap
+
+resources:
+  - https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml
+  - bootstrap.yaml
+  - ../../extension
+
+patchesStrategicMerge:
+  - argocd-cm-patch.yaml
+  - argocd-secret-patch.yaml
+
+components:
+  - https://github.com/argoproj-labs/argocd-extensions/manifests

manifests/quick-start/kustomization.yaml

@@ -0,0 +1,10 @@
+resources:
+  - argo-cd
+
+helmCharts:
+  - name: kube-prometheus-stack
+    repo: https://prometheus-community.github.io/helm-charts
+    version: 41.7.4
+    namespace: monitoring
+    releaseName: "test"
+    includeCRDs: true

server/config.go

@@ -2,6 +2,7 @@ package server
 
 import (
 	"fmt"
+
 	"github.com/prometheus/common/config"
 )
 

server/prometheus.go

@@ -3,12 +3,13 @@ package server
 import (
 	"bytes"
 	"fmt"
-	"go.uber.org/zap"
 	"html/template"
 	"net/http"
 	"strings"
 	"time"
 
+	"go.uber.org/zap"
+
 	"github.com/gin-gonic/gin"
 	"github.com/prometheus/client_golang/api"
 	v1 "github.com/prometheus/client_golang/api/prometheus/v1"
@@ -24,7 +25,10 @@ func (pp *PrometheusProvider) getType() string {
 	return PROMETHEUS_TYPE
 }
 
-func (pp *PrometheusProvider) getDashboard(ctx *gin.Context) {
+func (pp *PrometheusProvider) getDashboard(ctx *gin.Context, headers map[string]string) {
+	for header, value := range headers {
+		ctx.Header(header, value)
+	}
 	appName := ctx.Param("application")
 	groupKind := ctx.Param("groupkind")
 	app := pp.config.getApp(appName)
@@ -58,7 +62,10 @@ func (pp *PrometheusProvider) init() error {
 	return nil
 }
 
-func (pp *PrometheusProvider) execute(ctx *gin.Context) {
+func (pp *PrometheusProvider) execute(ctx *gin.Context, headers map[string]string) {
+	for header, value := range headers {
+		ctx.Header(header, value)
+	}
 	app := ctx.Param("application")
 	groupKind := ctx.Param("groupkind")
 	rowName := ctx.Param("row")