rails_performance 1.4.0 → 1.4.1.alpha1

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

@@ -1,349 +1,125 @@
-Highcharts.setOptions({
-  time: {
-    timezone: window.APP_TIME_ZONE
-  }
-});
-
-function showTIRChart(div, data, addon, name) {
-  Highcharts.chart(div, {
+function showChart(element_id, type, title, options) {
+  const chart = new ApexCharts(
+    document.getElementById(element_id),
+    {
+      ...options,
       chart: {
-          type: 'area',
-          zoomType: 'x',
+        type: type,
+        height: 300,
+        zoom: {
+          type: 'x',
+        },
       },
-      title: {
-          text: ''
+      colors: ['#ff5b5b'],
+      stroke: {
+        width: 1,
       },
-      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 + addon;
-          }
-      },
-      xAxis: {
-          crosshair: true,
-          type: 'datetime',
-          labels: {
-            style: {
-              color: "#a6b0cf"
-            }
-          }
-      },
-      yAxis: {
-          min: 0,
-          title: {
-              text: 'RPM',
-              style: {
-                color: "#f6f6f6"
-              }
-          },
-          labels: {
-            style: {
-              color: "#a6b0cf"
-            }
-          }
+      dataLabels: {
+        enabled: false
       },
       legend: {
-          enabled: false
-      },
-      exporting: {
-        buttons: {
-          contextButton: {
-            theme: {
-              fill: "#eee"
-            }
+        show: false
+      },
+      xaxis: {
+        crosshairs: {
+          show: true
+        },
+        type: 'datetime',
+        labels: {
+          datetimeUTC: false,
+          style: {
+            colors: ["#a6b0cf"]
           }
         }
       },
-      plotOptions: {
-          area: {
-            color: '#ff5b5b',
-          }
-      },
-      series: [{
-          type: 'area',
-          name: name,
-          data: data,
-          fillOpacity: 0.3,
-          lineWidth: 1,
-          states: {
-            hover: {
-              lineWidth: 1
-            }
-          }
-      }]
-  });
-};
-
-function showRTChart(div, data) {
-  Highcharts.chart(div, {
-      chart: {
-          type: 'area',
-          zoomType: 'x',
-      },
-      title: {
-          text: ''
-      },
-
-      tooltip: {
-          borderWidth: 0,
-          backgroundColor: 'yellow',
-          pointFormat: '{point.y}',
-          //headerFormat: '',
-          shadow: false,
+      yaxis: {
+        min: 0,
+        title: {
+          text: title,
           style: {
-              fontSize: '16px',
-              color: '#000',
-          },
-          formatter: function() {
-              if (this.y == 0) {
-                return false;
-              }
-              return this.y + ' ms';
+            color: "#f6f6f6"
           }
-      },
-      xAxis: {
-          crosshair: false,
-          type: 'datetime',
-          labels: {
-            style: {
-              color: "#a6b0cf"
-            }
-          }
-      },
-      yAxis: {
-          min: 0,
-          title: {
-              text: 'Time',
-              style: {
-                color: "#f6f6f6"
-              }
-          },
-          labels: {
-            style: {
-              color: "#a6b0cf"
-            }
-          }
-      },
-      legend: {
-          enabled: false
-      },
-      exporting: {
-        buttons: {
-          contextButton: {
-            theme: {
-              fill: "#eee"
-            }
+        },
+        labels: {
+          style: {
+            colors: ["#a6b0cf"]
           }
         }
-      },
-      plotOptions: {
-          area: {
-            color: '#ff5b5b',
-          }
-      },
-      series: [{
-          type: 'area',
-          name: 'Response Time',
-          data: data,
-          fillOpacity: 0.3,
-          lineWidth: 1,
-          states: {
-            hover: {
-              lineWidth: 1
-            }
-          }
-      }]
-  });
-};
+      }
+    }
+  );
+  chart.render();
+}
 
-function showPercentageChart(div, data, addon, name) {
-  Highcharts.chart(div, {
-      chart: {
-          type: 'line',
-          zoomType: 'x',
-      },
+function tooltipOptions(formatter) {
+  return {
+    style: {
+      fontSize: '16px'
+    },
+    marker: {
+      show: false,
+    },
+    x: {
+      show: false,
+      format: 'dd/MM/yy HH:mm'
+    },
+    y: {
+      formatter: formatter,
       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
-            }
-          }
-      }]
+        formatter: () => '',
+      }
+    }
+  };
+}
+
+function showTIRChart(element_id, data, addon, name) {
+  console.dir(data);
+  showChart(element_id, 'area', 'RPM', {
+    tooltip: tooltipOptions(value => (value ? value + addon : undefined)),
+    series: [{
+      name: name,
+      data: data
+    }]
   });
-};
+}
 
+function showRTChart(element_id, data) {
+  showChart(element_id, 'area', 'Time', {
+    tooltip: tooltipOptions(value => (value ? value + ' ms' : undefined)),
+    series: [{
+      name: 'Response Time',
+      data: data,
+    }],
+  });
+}
 
-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 showPercentageChart(element_id, data, name) {
+  showChart(element_id, 'line', '%', {
+    tooltip: tooltipOptions(value => (value ? value + ' %' : undefined)),
+    series: [{
+      name: name,
+      data: data,
+    }]
   });
-};
+}
+
+function showUsageChart(element_id, data, name, pow) {
+  const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'][pow];
+  const bytes = Math.pow(1024, pow);
 
-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;
+  showChart(element_id, 'line', name, {
+    tooltip: tooltipOptions(value => (value ? `${value} ${units}` : undefined)),
+    series: [{
+      name: name,
+      data: data.map(([timestamp, value]) => [timestamp, typeof value === 'number' ? (value / bytes).toFixed(2) : null]),
+    }]
+  });
 }
 
-const recent = document.getElementById("recent")
-const autoupdate = document.getElementById("autoupdate")
+const recent = document.getElementById("recent");
+const autoupdate = document.getElementById("autoupdate");
 
-if(autoupdate) {
+if (autoupdate) {
   // set autoupdate checked from localStorage is missing
   if (localStorage.getItem("autoupdate") === null) {
     localStorage.setItem("autoupdate", "true");
@@ -354,12 +130,12 @@ if(autoupdate) {
   });
 }
 
-if(recent) {
-  const tbody = recent.querySelector("tbody")
+if (recent) {
+  const tbody = recent.querySelector("tbody");
 
   setInterval(() => {
-    tr = tbody.children[0];
-    from_timei = tr.getAttribute("from_timei") || ''
+    const tr = tbody.children[0];
+    const from_timei = tr.getAttribute("from_timei") || '';
 
     if (!autoupdate.checked) {
       return;
@@ -373,6 +149,6 @@ if(recent) {
       .then(res => res.text())
       .then(html => {
         tbody.innerHTML = html + tbody.innerHTML;
-    })
+      });
   }, 3000);
 }

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

@@ -6,9 +6,6 @@
     <title>Rails Performance</title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag if ::Rails::VERSION::STRING.to_f >= 5.2 %>
-    <script>
-      window.APP_TIME_ZONE = '<%= Rails.application.config.time_zone.presence || 'UTC' %>';
-    </script>
     <%= render '/rails_performance/stylesheets/stylesheets' %>
     <link rel="shortcut icon" href="/favicon.ico">
   </head>

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

@@ -38,13 +38,13 @@
   <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, ' %', '%');
+      showPercentageChart('cpu_report_<%= server_key.parameterize %>', data1, 'CPU');
 
       var data2 = <%= raw @resources_report.memory[server_key].to_json %>;
-      showUsageChart('memory_report_<%= server_key.parameterize %>', data2, ' Mb', 'Mb');
+      showUsageChart('memory_report_<%= server_key.parameterize %>', data2, 'Usage', 2);
 
       var data3 = <%= raw @resources_report.disk[server_key].to_json %>;
-      showUsageChart('disk_report_<%= server_key.parameterize %>', data3, ' Gb', 'Gb');
+      showUsageChart('disk_report_<%= server_key.parameterize %>', data3, 'Available', 3);
     <% end %>
   </script>
 <% end %>

data/app/views/rails_performance/stylesheets/style.css

@@ -140,3 +140,7 @@ body.has-sticky-footer {
   background-color: #f5f5f5;
   padding: 1rem 0;
 }
+
+.apexcharts-tooltip {
+  background: yellow !important;
+}

data/lib/rails_performance/data_source.rb

@@ -69,7 +69,7 @@ module RailsPerformance
       when :custom
         "custom|*#{compile_custom_query}*|END|#{RailsPerformance::SCHEMA}"
       else
-        raise "wrong type for datasource query builder"
+        raise "wrong type: \"#{type}\" for datasource query builder"
       end
     end
 

data/lib/rails_performance/gems/rake_ext.rb

@@ -3,6 +3,8 @@ module RailsPerformance
     class RakeExt
       def self.init
         ::Rake::Task.class_eval do
+          next if method_defined?(:invoke_with_rails_performance)
+
           def invoke_with_rails_performance(*args)
             now = RailsPerformance::Utils.time
             status = "success"

data/lib/rails_performance/version.rb

@@ -1,4 +1,4 @@
 module RailsPerformance
-  VERSION = "1.4.0"
+  VERSION = "1.4.1.alpha1"
   SCHEMA = "1.0.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_performance
 version: !ruby/object:Gem::Version
-  version: 1.4.0
+  version: 1.4.1.alpha1
 platform: ruby
 authors:
 - Igor Kasyanchuk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-23 00:00:00.000000000 Z
+date: 2024-11-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -320,6 +320,7 @@ files:
 - app/helpers/rails_performance/rails_performance_helper.rb
 - app/views/rails_performance/_panel.html.erb
 - app/views/rails_performance/javascripts/_javascripts.html.erb
+- app/views/rails_performance/javascripts/apexcharts.min.js
 - app/views/rails_performance/javascripts/app.js
 - app/views/rails_performance/javascripts/jquery-3.4.1.min.js
 - app/views/rails_performance/javascripts/navbar.js