Merge branch '29302-improve-the-prometheus-queries-for-multiple-container-environments' into 'master'

Resolve "Fix the Prometheus queries for multiple container environments"

Closes #29302

See merge request !9949

4 files changed, 17 insertions, 13 deletions

diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index fcffc11a2df..844a0785bc9 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/app/assets/javascripts/monitoring/prometheus_graph.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-new */
+/* eslint-disable no-new*/
 /* global Flash */
 
 import d3 from 'd3';
@@ -180,7 +180,7 @@ class PrometheusGraph {
     // Metric Usage
     axisLabelContainer.append('rect')
           .attr('x', this.originalWidth - 170)
-          .attr('y', (this.originalHeight / 2) - 80)
+          .attr('y', (this.originalHeight / 2) - 60)
           .style('fill', graphSpecifics.area_fill_color)
           .attr('width', 20)
           .attr('height', 35);
@@ -188,13 +188,13 @@ class PrometheusGraph {
     axisLabelContainer.append('text')
           .attr('class', 'label-axis-text')
           .attr('x', this.originalWidth - 140)
-          .attr('y', (this.originalHeight / 2) - 65)
-          .text(graphSpecifics.graph_legend_title);
+          .attr('y', (this.originalHeight / 2) - 50)
+          .text('Average');
 
     axisLabelContainer.append('text')
             .attr('class', 'text-metric-usage')
             .attr('x', this.originalWidth - 140)
-            .attr('y', (this.originalHeight / 2) - 50);
+            .attr('y', (this.originalHeight / 2) - 25);
   }
 
   handleMouseOverGraph(x, y, valuesToPlot, chart, prometheusGraphContainer, key) {
@@ -263,12 +263,12 @@ class PrometheusGraph {
       cpu_values: {
         area_fill_color: '#edf3fc',
         line_color: '#5b99f7',
-        graph_legend_title: 'CPU Usage (Cores)',
+        graph_legend_title: 'CPU utilization (%)',
       },
       memory_values: {
         area_fill_color: '#fca326',
         line_color: '#fc6d26',
-        graph_legend_title: 'Memory Usage (MB)',
+        graph_legend_title: 'Memory usage (MB)',
       },
     };
 
diff --git a/app/models/project_services/prometheus_service.rb b/app/models/project_services/prometheus_service.rb
index 4d7c81a721f..5cff9a42484 100644
--- a/app/models/project_services/prometheus_service.rb
+++ b/app/models/project_services/prometheus_service.rb
@@ -74,16 +74,16 @@ class PrometheusService < MonitoringService
   def calculate_reactive_cache(environment_slug)
     return unless active? && project && !project.pending_delete?
 
-    memory_query = %{sum(container_memory_usage_bytes{container_name="app",environment="#{environment_slug}"})/1024/1024}
-    cpu_query = %{sum(rate(container_cpu_usage_seconds_total{container_name="app",environment="#{environment_slug}"}[2m]))}
+    memory_query = %{(sum(container_memory_usage_bytes{container_name="app",environment="#{environment_slug}"}) / count(container_memory_usage_bytes{container_name="app",environment="#{environment_slug}"})) /1024/1024}
+    cpu_query = %{sum(rate(container_cpu_usage_seconds_total{container_name="app",environment="#{environment_slug}"}[2m])) / count(container_cpu_usage_seconds_total{container_name="app",environment="#{environment_slug}"}) * 100}
 
     {
       success: true,
       metrics: {
-        # Memory used in MB
+        # Average Memory used in MB
         memory_values: client.query_range(memory_query, start: 8.hours.ago),
         memory_current: client.query(memory_query),
-        # CPU Usage rate in cores.
+        # Average CPU Utilization
         cpu_values: client.query_range(cpu_query, start: 8.hours.ago),
         cpu_current: client.query(cpu_query)
       },
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index b8c1782f050..3b45162df52 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -18,7 +18,11 @@
           = render 'projects/deployments/actions', deployment: @environment.last_deployment
   .row
     .col-sm-12
+      %h4
+        CPU utilization
       %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
   .row
     .col-sm-12
+      %h4
+        Memory usage
       %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
diff --git a/spec/support/prometheus_helpers.rb b/spec/support/prometheus_helpers.rb
index a52d8f37d14..4afdbd68304 100644
--- a/spec/support/prometheus_helpers.rb
+++ b/spec/support/prometheus_helpers.rb
@@ -1,10 +1,10 @@
 module PrometheusHelpers
   def prometheus_memory_query(environment_slug)
-    %{sum(container_memory_usage_bytes{container_name="app",environment="#{environment_slug}"})/1024/1024}
+    %{(sum(container_memory_usage_bytes{container_name="app",environment="#{environment_slug}"}) / count(container_memory_usage_bytes{container_name="app",environment="#{environment_slug}"})) /1024/1024}
   end
 
   def prometheus_cpu_query(environment_slug)
-    %{sum(rate(container_cpu_usage_seconds_total{container_name="app",environment="#{environment_slug}"}[2m]))}
+    %{sum(rate(container_cpu_usage_seconds_total{container_name="app",environment="#{environment_slug}"}[2m])) / count(container_cpu_usage_seconds_total{container_name="app",environment="#{environment_slug}"}) * 100}
   end
 
   def prometheus_query_url(prometheus_query)