From 2c5b1113d655d964ac9fdb8092a5da20162ad740 Mon Sep 17 00:00:00 2001
From: LogolicusZ <adjordbra@gmail.com>
Date: Tue, 7 May 2024 10:08:43 +0200
Subject: [PATCH] [c] change: updated Docker compose with Prometheus and
 Grafana

---
 docker-compose.yml              | 30 ++++++++++++++++++++++++------
 prometheus/prometheus.yaml      | 27 +++++++++++++++++++++++++++
 src/routes/gallery/+page.svelte | 22 +++++++++++-----------
 3 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 prometheus/prometheus.yaml

diff --git a/docker-compose.yml b/docker-compose.yml
index 23f9fa0..c345ca6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,3 +1,4 @@
+
 services:
  image-web:
     container_name: image-web
@@ -18,16 +19,33 @@ services:
     networks:
       - internal-bridge
 
- Monitor:
-    image: gitpot.org/logolicusz/explorecraft_logolcicusz_knockoff:latest
-    container_name: Monitor
+
+ grafana:
+    image: docker.io/grafana/grafana-oss:10.4.2
+    container_name: grafana
     ports:
-       - "3080:80"
-    networks:
-      - internal-bridge
+      - "3010:3000"
+    volumes:
+      - grafana-data:/var/lib/grafana
+    restart: unless-stopped
+
+ prometheus:
+    image: docker.io/prom/prometheus:v2.51.2
+    container_name: prometheus
+    ports:
+      - 9090:9090
+    command: "--config.file=/prometheus/prometheus.yaml"
+    volumes:
+      - ./config/prometheus.yaml:/prometheus/prometheus.yaml:ro
+      - prometheus-data:/prometheus
+    restart: unless-stopped
 
 volumes:
   caddy-data:
+  grafana-data:
+    driver: local
+  prometheus-data:
+    driver: local
 
 networks:
  internal-bridge:
diff --git a/prometheus/prometheus.yaml b/prometheus/prometheus.yaml
new file mode 100644
index 0000000..8f41942
--- /dev/null
+++ b/prometheus/prometheus.yaml
@@ -0,0 +1,27 @@
+global:
+  scrape_interval:     15s # By default, scrape targets every 15 seconds.
+
+  # Attach these labels to any time series or alerts when communicating with
+  # external systems (federation, remote storage, Alertmanager).
+  # external_labels:
+  #  monitor: 'codelab-monitor'
+
+# A scrape configuration containing exactly one endpoint to scrape:
+# Here it's Prometheus itself.
+scrape_configs:
+  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
+  - job_name: 'prometheus'
+    # Override the global default and scrape targets from this job every 5 seconds.
+    scrape_interval: 5s
+    static_configs:
+      - targets: ['localhost:9090']
+
+  # Example job for node_exporter
+  # - job_name: 'node_exporter'
+  #   static_configs:
+  #     - targets: ['node_exporter:9100']
+
+  # Example job for cadvisor
+  # - job_name: 'cadvisor'
+  #   static_configs:
+  #     - targets: ['cadvisor:8080']
diff --git a/src/routes/gallery/+page.svelte b/src/routes/gallery/+page.svelte
index df776c2..acb1b2f 100644
--- a/src/routes/gallery/+page.svelte
+++ b/src/routes/gallery/+page.svelte
@@ -9,21 +9,21 @@
 </div>
 
 <div class="grid">
-	<div><img class="gallery-image" src="http://image-web:80/pic1.png" alt="pic1"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic2.png" alt="pic2"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic3.png" alt="pic3"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic1.png" alt="pic1"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic2.png" alt="pic2"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic3.png" alt="pic3"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="http://image-web:80/pic4.png" alt="pic6"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic5.png" alt="pic7"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic6.png" alt="pic3"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic7.png" alt="pic5"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic4.png" alt="pic6"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic5.png" alt="pic7"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic6.png" alt="pic3"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic7.png" alt="pic5"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="http://image-web:80/pic8.png" alt="pic8"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic9.png" alt="pic9"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic10.png" alt="pic10"></div>
-	<div><img class="gallery-image" src="http://image-web:80/pic1.png" alt="pic4"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic8.png" alt="pic8"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic9.png" alt="pic9"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic10.png" alt="pic10"></div>
+	<div><img class="gallery-image" src="http://localhost:3001/pic1.png" alt="pic4"></div>
 </div>
 
 <style>