rails_performance 1.3.3 → 1.4.0.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a55d30b55b9b21648f47e913b5fc80277338d64265c4b652dd7c3b66080f7a2
-  data.tar.gz: d402afddcd43f8328dcb12b4749657d4ed2e60159722a73524cf81aa3b91dff3
+  metadata.gz: 524031a11cbbe218cd746b2469a34b05e0867fa33f2f87dc06377a9a6ee983da
+  data.tar.gz: 69ea547a8574ed29550d28057d6d7369f8598509104fdcad002408be71533af6
 SHA512:
-  metadata.gz: 7497bf5420d086bb8ea1f18cee0ff029f50d5df03065f3866456560912f4cb07207c1abeb94a1c3df0f117df083e24cc118938012241f911631e5bfff0868751
-  data.tar.gz: 895b554629a924b4afcfb7c3e1b18126ec7e56bad780f1a95d8ab3a80bd2e8dcb17ee5782b6566d930e0937770e00d8624d5a04960de65e5021841455f9085c2
+  metadata.gz: '0122738b6f1fde35c2bca00783e26e1c0f65b84896b4e22130e79dfffd2e59d211d7aec34f9b9b7718c239a713993e8d05656bc87294e253d7695462b9f477ea'
+  data.tar.gz: 5170e8f7e24ce9a9904bf7d9163dbf34eca2063da745fb9824f808793a12e9940b618b5b64ebe8f2fe39e6e12bebcc98f560c9fdd3fd51fb6fc973f880417a8e

data/README.md

@@ -10,9 +10,19 @@ This is a **simple and free alternative** to the New Relic APM, Datadog or other
 
 ![Demo](docs/rails_performance.gif)
 
+A new version with P50, P90, P99, throughput, and more is available.
+
+![Home](docs/rails_performance_updated_home.png)
+
+Detailed p50, p90, p99 response time information.
+
+![Home](docs/rails_performance_recent_requests.png)
+
 It allows you to track:
 
 - real-time monitoring on the Recent tab
+- see your p50, p90, p99 response time
+- monitor system resources (CPU, memory, disk)
 - monitor slow requests
 - throughput report (see amount of RPM (requests per minute))
 - an average response time
@@ -165,6 +175,16 @@ You need to configure `config.custom_data_proc`. And you can capture current_use
 ![Custom Data](docs/custom_data.png)
 
 
+### System Monitoring
+
+You can monitor system resources (CPU, memory, disk) by adding a gem to your Gemfile:
+
+```ruby
+gem "sys-filesystem"
+gem "sys-cpu"
+gem "get_process_mem"
+```
+
 ### Custom events
 
 ```ruby
@@ -175,6 +195,8 @@ end
 
 ## Using with Rails Namespace
 
+If you want to use Redis namespace (for example when you have multiple apps running on the same server), you can configure it like this:
+
 ```ruby
   config.redis = Redis::Namespace.new("#{Rails.env}-rails-performance", redis: Redis.new(url: ENV["REDIS_URL"].presence || "redis://127.0.0.1:6379/0"))
 ```

data/app/controllers/rails_performance/rails_performance_controller.rb

@@ -14,6 +14,13 @@ module RailsPerformance
         @percentile_report_data = RailsPerformance::Reports::PercentileReport.new(db).data
       end
 
+      def resources
+        @datasource = RailsPerformance::DataSource.new(**prepare_query(params), type: :resources)
+        db = @datasource.db
+
+        @resources_report = RailsPerformance::Reports::ResourcesReport.new(db)
+      end
+
       def summary
         @datasource = RailsPerformance::DataSource.new(**prepare_query(params), type: :requests)
         db = @datasource.db
@@ -151,7 +158,7 @@ module RailsPerformance
 
       private
 
-      def prepare_query(query)
+      def prepare_query(query = {})
         RailsPerformance::Rails::QueryBuilder.compose_from(query)
       end
     end

data/app/helpers/rails_performance/rails_performance_helper.rb

@@ -132,6 +132,8 @@ module RailsPerformance
         "is-active" if controller_name == "rails_performance" && action_name == "crashes"
       when :requests
         "is-active" if controller_name == "rails_performance" && action_name == "requests"
+      when :resources
+        "is-active" if controller_name == "rails_performance" && action_name == "resources"
       when :recent
         "is-active" if controller_name == "rails_performance" && action_name == "recent"
       when :slow

data/app/views/rails_performance/javascripts/app.js

@@ -1,8 +1,5 @@
 function showTIRChart(div, data, addon, name) {
   Highcharts.chart(div, {
-      // time: {
-      //   timezone: 'Europe/Kiev'
-      // },
       chart: {
           type: 'area',
           zoomType: 'x',
@@ -22,7 +19,7 @@ function showTIRChart(div, data, addon, name) {
           },
           formatter: function() {
               if (this.y == 0) {
-                return false; 
+                return false;
               }
             return this.y + addon;
           }
@@ -84,9 +81,6 @@ function showTIRChart(div, data, addon, name) {
 
 function showRTChart(div, data) {
   Highcharts.chart(div, {
-      // time: {
-      //   timezone: 'Europe/Kiev'
-      // },
       chart: {
           type: 'area',
           zoomType: 'x',
@@ -167,6 +161,179 @@ function showRTChart(div, data) {
   });
 };
 
+function showPercentageChart(div, data, addon, name) {
+  Highcharts.chart(div, {
+      chart: {
+          type: 'line',
+          zoomType: 'x',
+      },
+      title: {
+          text: ''
+      },
+      tooltip: {
+          borderWidth: 0,
+          backgroundColor: 'yellow',
+          pointFormat: '{point.y}',
+          //headerFormat: '',
+          shadow: false,
+          style: {
+              fontSize: '16px',
+              color: '#000',
+          },
+          formatter: function() {
+            if (this.y == 0) {
+              return false;
+            }
+            return this.y + ' %';
+        }
+      },
+      xAxis: {
+          crosshair: true,
+          type: 'datetime',
+          labels: {
+            style: {
+              color: "#a6b0cf"
+            }
+          }
+      },
+      yAxis: {
+          min: 0,
+          title: {
+              text: '%',
+              style: {
+                color: "#f6f6f6"
+              }
+          },
+          labels: {
+            style: {
+              color: "#a6b0cf"
+            }
+          }
+      },
+      legend: {
+          enabled: false
+      },
+      exporting: {
+        buttons: {
+          contextButton: {
+            theme: {
+              fill: "#eee"
+            }
+          }
+        }
+      },
+      plotOptions: {
+          area: {
+            color: '#ff5b5b',
+          }
+      },
+      series: [{
+          type: 'line',
+          name: name,
+          data: data,
+          fillOpacity: 0.3,
+          lineWidth: 1,
+          states: {
+            hover: {
+              lineWidth: 2
+            }
+          }
+      }]
+  });
+};
+
+
+function showUsageChart(div, data, addon, name) {
+  Highcharts.chart(div, {
+      chart: {
+          type: 'line',
+          zoomType: 'x',
+      },
+      title: {
+          text: ''
+      },
+      tooltip: {
+          borderWidth: 0,
+          backgroundColor: 'yellow',
+          pointFormat: '{point.y}',
+          //headerFormat: '',
+          shadow: false,
+          style: {
+              fontSize: '16px',
+              color: '#000',
+          },
+          formatter: function() {
+              if (this.y == 0) {
+                return false;
+              }
+            return bytes(this.y, true);
+          }
+      },
+      xAxis: {
+          crosshair: true,
+          type: 'datetime',
+          labels: {
+            style: {
+              color: "#a6b0cf"
+            }
+          }
+      },
+      yAxis: {
+          min: 0,
+          title: {
+              text: '',
+              style: {
+                color: "#f6f6f6"
+              }
+          },
+          labels: {
+            style: {
+              color: "#a6b0cf"
+            }
+          }
+      },
+      legend: {
+          enabled: false
+      },
+      exporting: {
+        buttons: {
+          contextButton: {
+            theme: {
+              fill: "#eee"
+            }
+          }
+        }
+      },
+      plotOptions: {
+          area: {
+            color: '#ff5b5b',
+          }
+      },
+      series: [{
+          type: 'line',
+          name: name,
+          data: data,
+          fillOpacity: 0.3,
+          lineWidth: 1,
+          states: {
+            hover: {
+              lineWidth: 2
+            }
+          }
+      }]
+  });
+};
+
+function bytes(bytes, label) {
+  if (bytes == 0) return '';
+  var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  var e = Math.floor(Math.log(bytes)/Math.log(1024));
+  var value = ((bytes/Math.pow(1024, Math.floor(e))).toFixed(2));
+  e = (e<0) ? (-e) : e;
+  if (label) value += ' ' + s[e];
+  return value;
+}
+
 const recent = document.getElementById("recent")
 const autoupdate = document.getElementById("autoupdate")
 

data/app/views/rails_performance/layouts/rails_performance.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme-light">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

data/app/views/rails_performance/rails_performance/resources.html.erb

@@ -0,0 +1,50 @@
+<title>System Resources</title>
+
+<% @resources_report.data.keys.each do |server_key| %>
+  <h1 class="title mt-8 pt-8"><%= server_key.split("///"). join(", ") %></h1>
+
+  <div class="card">
+    <div class="card-content">
+      <h2 class="subtitle">CPU</h2>
+      <div id="cpu_report_<%= server_key.parameterize %>" class="chart"></div>
+      <p class="content is-small">CPU usage %, average per 1 minute</p>
+    </div>
+  </div>
+
+  <br/>
+
+  <div class="card">
+    <div class="card-content">
+      <h2 class="subtitle">Memory</h2>
+      <div id="memory_report_<%= server_key.parameterize %>" class="chart"></div>
+      <p class="content is-small">App memory usage</p>
+    </div>
+  </div>
+
+  <br/>
+
+  <div class="card">
+    <div class="card-content">
+      <h2 class="subtitle">Disk</h2>
+      <div id="disk_report_<%= server_key.parameterize %>" class="chart"></div>
+      <p class="content is-small">Available disk size</p>
+    </div>
+  </div>
+
+  <br>
+<% end %>
+
+<% content_for :on_load do %>
+  <script>
+    <% @resources_report.data.keys.each do |server_key| %>
+      var data1 = <%= raw @resources_report.cpu[server_key].to_json %>;
+      showPercentageChart('cpu_report_<%= server_key.parameterize %>', data1, ' %', '%');
+
+      var data2 = <%= raw @resources_report.memory[server_key].to_json %>;
+      showUsageChart('memory_report_<%= server_key.parameterize %>', data2, ' Mb', 'Mb');
+
+      var data3 = <%= raw @resources_report.disk[server_key].to_json %>;
+      showUsageChart('disk_report_<%= server_key.parameterize %>', data3, ' Gb', 'Gb');
+    <% end %>
+  </script>
+<% end %>

data/app/views/rails_performance/shared/_header.html.erb

@@ -17,6 +17,9 @@
       <%= link_to 'Dashboard', rails_performance.rails_performance_url, class: "navbar-item #{active?(:dashboard)}" %>
       <%= link_to 'Requests Analysis', rails_performance.rails_performance_requests_url, class: "navbar-item #{active?(:requests)}" %>
       <%= link_to 'Recent Requests', rails_performance.rails_performance_recent_url, class: "navbar-item #{active?(:recent)}" %>
+      <% if RailsPerformance._resource_monitor_enabled %>
+        <%= link_to 'System', rails_performance.rails_performance_resources_url, class: "navbar-item #{active?(:resources)}" %>
+      <% end %>
       <%= link_to 'Slow Requests', rails_performance.rails_performance_slow_url, class: "navbar-item #{active?(:slow)}" %>
       <%= link_to '500 Errors', rails_performance.rails_performance_crashes_url, class: "navbar-item #{active?(:crashes)}" %>
       <% if defined?(Sidekiq) %>