Fixes #23665 - Patternfly charts on Host Detail

We are still using deprecated method `flot_chart` to render the Host
detail page charts. It works, but we should migrate to rendering
React components directly.

app/assets/stylesheets/charts.scss

@@ -56,7 +56,7 @@
   min-height: 380px;
 }
 
-#hosts .stats-well {
+#host-show .stats-well {
   min-height: 270px;
 }
 
@@ -117,14 +117,10 @@
   margin: 25px auto;
 }
 
-#host-show {
+#hosts {
   .statistics-chart {
     height: 230px;
   }
-
-  .chart {
-    height: 250px;
-  }
 }
 
 .reset-zoom {

app/helpers/hosts_helper.rb

@@ -199,29 +199,34 @@ def selected?(host)
     session[:selected].include?(host.id.to_s)
   end
 
-  def resources_chart(timerange = 1.day.ago)
-    applied, failed, restarted, failed_restarts, skipped = [], [], [], [], []
+  def resources_chart_data(timerange = 1.day.ago)
+    time = ['time']
+    applied = [_("Applied")]
+    failed = [_("Failed")]
+    restarted = [_("Failed restarts")]
+    failed_restarts = [_("Skipped")]
+    skipped = [_("Restarted")]
     @host.reports.recent(timerange).each do |r|
-      applied         << [r.reported_at.to_i * 1000, r.applied]
-      failed          << [r.reported_at.to_i * 1000, r.failed]
-      restarted       << [r.reported_at.to_i * 1000, r.restarted]
-      failed_restarts << [r.reported_at.to_i * 1000, r.failed_restarts]
-      skipped         << [r.reported_at.to_i * 1000, r.skipped]
+      time            << r.reported_at.to_i * 1000
+      applied         << r.applied
+      failed          << r.failed
+      restarted       << r.restarted
+      failed_restarts << r.failed_restarts
+      skipped         << r.skipped
     end
-    [{:label => _("Applied"), :data => applied, :color => '#89A54E'},
-     {:label => _("Failed"), :data => failed, :color => '#AA4643'},
-     {:label => _("Failed restarts"), :data => failed_restarts, :color => '#EC971F'},
-     {:label => _("Skipped"), :data => skipped, :color => '#80699B'},
-     {:label => _("Restarted"), :data => restarted, :color => '#4572A7'}]
+    [time, applied, failed, failed_restarts, skipped, restarted]
   end
 
-  def runtime_chart(timerange = 1.day.ago)
-    config, runtime = [], []
+  def runtime_chart_data(timerange = 1.day.ago)
+    time = ['time']
+    config = [_("Config Retrieval")]
+    runtime = [_("Runtime")]
     @host.reports.recent(timerange).each do |r|
-      config  << [r.reported_at.to_i * 1000, r.config_retrieval]
-      runtime << [r.reported_at.to_i * 1000, r.runtime]
+      time << r.reported_at.to_i * 1000
+      config  << r.config_retrieval
+      runtime << r.runtime
     end
-    [{:label => _("Config Retrieval"), :data => config, :color => '#AA4643'}, {:label => _("Runtime"), :data => runtime, :color => '#4572A7'}]
+    [time, config, runtime]
   end
 
   def reports_show

app/views/hosts/_resources.html.erb

@@ -1 +1,5 @@
-<%= flot_chart('resource_graph', '', _("Number of Events"), resources_chart(params["range"].to_i.days.ago)) %>
+<%= react_component('AreaChart', id: 'resource_graph',
+                                 xAxisLabel: '',
+                                 yAxisLabel: _('Number of Events'),
+                                 data: resources_chart_data(params["range"].to_i.days.ago),
+                                 size: { height: 250 }) %>

app/views/hosts/_runtime.html.erb

@@ -1 +1,5 @@
-<%= flot_chart('runtime_graph','', _('Time in Seconds'), runtime_chart(params["range"].to_i.days.ago), :class=>"statistics-chart stack") %>
+<%= react_component('AreaChart', id: 'runtime_graph',
+                                 xAxisLabel: '',
+                                 yAxisLabel: _('Time in Seconds'),
+                                 data: runtime_chart_data(params["range"].to_i.days.ago),
+                                 size: { height: 250 } ) %>

app/views/hosts/show.html.erb

@@ -81,14 +81,14 @@
     <div class="stats-well">
       <h4 class="ca"><%= _("Runtime") %></h4>
       <h6 class="ca"><%= n_("last %s day", "last %s days", @range) % @range %></h6>
-      <div class="chart" data-ajax-url='<%= runtime_host_path(@host, :range => @range) %>' data-on-complete='updateChart'>
+      <div class="chart" data-ajax-url='<%= runtime_host_path(@host, :range => @range) %>'>
         <%= spinner(_('Loading runtime information ...')) %>
       </div>
     </div>
     <div class="stats-well">
       <h4 class="ca"><%= _("Resources") %></h4>
       <h6 class="ca"><%= n_("last %s day", "last %s days", @range) % @range %></h6>
-      <div class="chart" data-ajax-url='<%= resources_host_path(@host, :range => @range) %>' data-on-complete='updateChart'>
+      <div class="chart" data-ajax-url='<%= resources_host_path(@host, :range => @range) %>'>
         <%= spinner(_('Loading resources information ...')) %>
       </div>
     </div>

webpack/assets/javascripts/react_app/components/common/charts/AreaChart/index.js

@@ -14,13 +14,15 @@ const AreaChart = ({
   unloadData,
   xAxisDataLabel,
   yAxisLabel,
+  size,
 }) => {
   const chartConfig = getAreaChartConfig({
     data,
     config,
     onclick,
     yAxisLabel,
     xAxisDataLabel,
+    size,
   });
 
   if (chartConfig.data.columns.length) {
@@ -37,6 +39,7 @@ AreaChart.propTypes = {
   unloadData: PropTypes.bool,
   xAxisDataLabel: PropTypes.string,
   yAxisLabel: PropTypes.string,
+  size: PropTypes.object,
 };
 
 AreaChart.defaultProps = {
@@ -47,6 +50,7 @@ AreaChart.defaultProps = {
   unloadData: false,
   xAxisDataLabel: 'time',
   yAxisLabel: '',
+  size: undefined,
 };
 
 export default AreaChart;

webpack/assets/javascripts/services/charts/AreaChartService.js

@@ -9,6 +9,7 @@ export const getAreaChartConfig = ({
   xAxisDataLabel = 'time',
   stacked = true,
   id = uuidV1(),
+  size = undefined,
 }) => {
   const chartConfig = getChartConfig({
     type: 'area',
@@ -31,6 +32,9 @@ export const getAreaChartConfig = ({
     );
     chartConfig.data.colors = {};
     chartConfig.data.columns[0] = [xAxisDataLabel].concat(formatedDates);
+    if (size) {
+      chartConfig.size = size;
+    }
 
     if (stacked) {
       chartConfig.data.groups = [