eumel8 · eumel8 · Jan 10, 2025 · Jan 10, 2025 · Jan 10, 2025 · Jan 10, 2025
diff --git a/.github/workflows/helm.yaml b/.github/workflows/helm.yaml
@@ -0,0 +1,21 @@
+name: Helm
+
+on:
+  push:
+#    tags:
+#    - "*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+      - name: Helm lint & package & push
+        run: |
+          curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash
+          helm version
+          helm registry login ghcr.io -u ${{ github.actor }} -p ${{ secrets.GITHUB_TOKEN }}
+          helm lint chart
+          helm package chart
+          helm push $(ls *.tgz| head -1) oci://ghcr.io/${{ github.actor }}/charts
diff --git a/Dockerfile b/Dockerfile
@@ -3,11 +3,14 @@ FROM golang:1.23 AS build-env
 RUN mkdir -p /go/src/github.com/eumel8/prometheus-dashboard
 WORKDIR /go/src/github.com/eumel8/prometheus-dashboard
 COPY  . .
-RUN useradd -u 10001 appuser
 RUN CGO_ENABLED=0 GOOS=linux go build -a -ldflags '-extldflags "-static"' -o prometheus-dashboard
-
+# release stage
 FROM alpine:latest
+RUN adduser -u 10001 -h appuser -D appuser
+WORKDIR /appuser
 COPY --from=build-env /go/src/github.com/eumel8/prometheus-dashboard .
 COPY --from=build-env /etc/passwd /etc/passwd
 USER appuser
-ENTRYPOINT ["/prometheus-dashboard"]
+ENV PROMETHEUS_URL=http://127.0.0.1:9090/
+ENV ALERTMANAGER_URL=http://127.0.0.1:9093/
+ENTRYPOINT ["/appuser/prometheus-dashboard"]
diff --git a/chart/Chart.yaml b/chart/Chart.yaml
@@ -0,0 +1,10 @@
+apiVersion: v2
+name: prometheus-dashboard
+description: A Helm chart for tiny Prometheus Dashboard Service
+type: application
+version: 1.0.2
+appVersion: "1.0.2"
+maintainers:
+  - name: eumel8
+    email: f.kloeker@telekom.de
+    url: https://www.telekom.com
diff --git a/chart/templates/_helpers.tpl b/chart/templates/_helpers.tpl
@@ -0,0 +1,62 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "prometheus-dashboard.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "prometheus-dashboard.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "prometheus-dashboard.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "prometheus-dashboard.labels" -}}
+helm.sh/chart: {{ include "prometheus-dashboard.chart" . }}
+{{ include "prometheus-dashboard.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "prometheus-dashboard.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "prometheus-dashboard.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "prometheus-dashboard.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "prometheus-dashboard.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
diff --git a/chart/templates/configmap.yaml b/chart/templates/configmap.yaml
@@ -0,0 +1,201 @@
+apiVersion: v1
+data:
+  index.html: |
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Prometheus Dashboard</title>
+        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+
+        <style>
+            :root {
+                --bg-color: #ffffff;
+                --text-color: #000000;
+                --card-bg-color: #f8f9fa;
+                --card-header-bg: #007bff;
+                --card-header-text: #ffffff;
+                --table-bg-color: #ffffff;
+                --table-border-color: #dee2e6;
+                --list-bg-color: #ffffff;
+                --list-text-color: #000000;
+            }
+
+            [data-theme="dark"] {
+                --bg-color: #121212;
+                --text-color: #e0e0e0;
+                --card-bg-color: #1e1e1e;
+                --card-header-bg: #444444;
+                --card-header-text: #ffcc00;
+                --table-bg-color: #1e1e1e;
+                --table-border-color: #444444;
+                --list-bg-color: #1e1e1e;
+                --list-text-color: #e0e0e0;
+            }
+
+            body {
+                background-color: var(--bg-color);
+                color: var(--text-color);
+            }
+
+            .card {
+                background-color: var(--card-bg-color);
+            }
+
+            .card-header {
+                background-color: var(--card-header-bg);
+                color: var(--card-header-text);
+            }
+
+            table {
+                background-color: var(--table-bg-color) !important;
+                border-color: var(--table-border-color) !important;
+                color: var(--text-color) !important;
+            }
+
+            th,
+            td {
+                border-color: var(--table-border-color) !important;
+            }
+
+            thead {
+                background-color: var(--card-header-bg) !important;
+                color: var(--card-header-text) !important;
+            }
+
+            .list-group {
+                background-color: var(--list-bg-color) !important;
+                color: var(--list-text-color) !important;
+            }
+
+            .list-group-item {
+                background-color: var(--list-bg-color) !important;
+                color: var(--list-text-color) !important;
+                border-color: var(--table-border-color) !important;
+            }
+        </style>
+
+        <script>
+            // Function to toggle dark mode
+            function toggleDarkMode() {
+                const currentTheme = document.documentElement.getAttribute("data-theme");
+                const newTheme = currentTheme === "dark" ? "light" : "dark";
+                document.documentElement.setAttribute("data-theme", newTheme);
+                localStorage.setItem("theme", newTheme); // Save theme preference
+            }
+
+            // Auto-refresh every 60 seconds
+            setInterval(() => {
+                location.reload();
+            }, 60000);
+
+            // Load theme preference on page load
+            window.onload = function () {
+                const savedTheme = localStorage.getItem("theme") || "light";
+                document.documentElement.setAttribute("data-theme", savedTheme);
+                displayMetrics();
+            };
+        </script>
+    </head>
+    <body>
+        <div class="container mt-4">
+            <div class="d-flex justify-content-between align-items-center">
+                <h1>Prometheus Metrics Dashboard</h1>
+                <button class="btn btn-secondary" onclick="toggleDarkMode()">Toggle Dark Mode</button>
+            </div>
+            <div id="metrics"></div>
+            <div id="alerts"></div>
+        </div>
+
+        <script>
+            const backendApiUrl = "/api/query";
+            const alertsApiUrl = "/api/alerts";
+
+            async function fetchMetric(query) {
+                try {
+                    const response = await fetch(backendApiUrl + "?query=" + encodeURIComponent(query));
+                    const data = await response.json();
+                    return data.data.result;
+                } catch (error) {
+                    console.error("Error fetching metric:", error);
+                }
+            }
+
+            async function fetchAlerts() {
+                try {
+                    const response = await fetch(alertsApiUrl);
+                    const data = await response.json();
+                    return data;
+                } catch (error) {
+                    console.error("Error fetching alerts:", error);
+                }
+            }
+
+            async function displayMetrics() {
+                const metricsDiv = document.getElementById("metrics");
+                const alertsDiv = document.getElementById("alerts");
+
+                // const queries = ["count(probe_http_status_code)", "count(probe_dns_query_succeeded)", "count(up)"];
+                const queries = [ "up","probe_http_status_code", "probe_dns_query_succeeded"];
+                const metricPromises = queries.map(query => fetchMetric(query));
+                const metricsData = await Promise.all(metricPromises);
+
+                let metricsContent = '';
+                queries.forEach((query, idx) => {
+                    const metrics = metricsData[idx];
+                    const metricValues = metrics?.map(m => ({
+                        instance: m.metric.instance,
+                        job: m.metric.job,
+                        value: m.value[1]
+                    })) || [];
+
+                    metricsContent += `
+                        <div class="card mb-4">
+                            <div class="card-header">
+                                <h3>Metric: ${query}</h3>
+                            </div>
+                            <div class="card-body">
+                                <ul class="list-group">
+                                    ${metricValues.length > 0
+                                        ? metricValues.map(v => `<li class="list-group-item">instance: ${v.instance} &nbsp; job: ${v.job} &nbsp; status: ${v.value}</li>`).join("")
+                                        : "<li class='list-group-item'>No data available</li>"
+                                    }
+                                </ul>
+                            </div>
+                        </div>
+                    `;
+                });
+
+                metricsDiv.innerHTML = metricsContent;
+
+                const alertData = await fetchAlerts();
+                let alertsContent = `
+                    <div class="card mb-4">
+                        <div class="card-header">
+                            <h3>Alerts by Severity</h3>
+                        </div>
+                        <div class="card-body">
+                            <ul class="list-group">
+                                ${Object.entries(alertData).map(([severity, count]) => `
+                                    <li class="list-group-item">${severity}: ${count} alerts</li>
+                                `).join("")}
+                            </ul>
+                        </div>
+                    </div>
+                `;
+
+                alertsDiv.innerHTML = alertsContent;
+            }
+        </script>
+
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+    </body>
+    </html>
+kind: ConfigMap
+metadata:
+  name: {{ include "prometheus-dashboard.fullname" . }}
+  labels:
+    {{- include "prometheus-dashboard.labels" . | nindent 4 }}
diff --git a/chart/templates/deployment.yaml b/chart/templates/deployment.yaml
@@ -0,0 +1,62 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "prometheus-dashboard.fullname" . }}
+  labels:
+    {{- include "prometheus-dashboard.labels" . | nindent 4 }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      {{- include "prometheus-dashboard.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "prometheus-dashboard.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      containers:
+        - name: {{ .Chart.Name }}
+          env:
+          - name: PROMETHEUS_URL
+            value: "{{ .Values.prometheusURL }}"
+          - name: ALERTMANAGER_URL
+            value: "{{ .Values.alertmanagerURL }}"
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.service.targetPort }}
+              protocol: TCP
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          volumeMounts:
+            - name: index
+              mountPath: /appuser/index.html
+              subPath: index.html
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      volumes:
+        - name: index
+          configMap:
+            name: {{ include "prometheus-dashboard.fullname" . }}
diff --git a/chart/templates/service.yaml b/chart/templates/service.yaml
@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "prometheus-dashboard.fullname" . }}
+  labels:
+    {{- include "prometheus-dashboard.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - name: http
+      port: {{ .Values.service.monitorPort }}
+      targetPort: {{ .Values.service.targetPort }}
+  selector:
+    {{- include "prometheus-dashboard.selectorLabels" . | nindent 4 }}