Fixes #23665 - Use Patternfly charts in Runtime

app/controllers/hosts_controller.rb

@@ -309,15 +309,11 @@ def vm
   end
 
   def runtime
-    render :partial => 'runtime'
-  rescue ActionView::Template::Error => exception
-    process_ajax_error exception, 'fetch runtime chart information'
+    render :json => helpers.runtime_chart(params[:range].empty? ? 7.days.ago : params[:range].to_i.days.ago)
   end
 
   def resources
-    render :partial => 'resources'
-  rescue ActionView::Template::Error => exception
-    process_ajax_error exception, 'fetch resources chart information'
+    render :json => helpers.resources_chart(params[:range].empty? ? 7.days.ago : params[:range].to_i.days.ago)
   end
 
   def templates

app/helpers/hosts_helper.rb

@@ -216,11 +216,13 @@ def resources_chart(timerange = 1.day.ago)
       failed_restarts << [r.reported_at.to_i * 1000, r.failed_restarts ]
       skipped         << [r.reported_at.to_i * 1000, 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'}]
+    {:results => [
+      {: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'}
+    ]}
   end
 
   def runtime_chart(timerange = 1.day.ago)
@@ -229,7 +231,10 @@ def runtime_chart(timerange = 1.day.ago)
       config  << [r.reported_at.to_i * 1000, r.config_retrieval]
       runtime << [r.reported_at.to_i * 1000, r.runtime]
     end
-    [{:label => _("Config Retrieval"), :data => config, :color => '#AA4643'}, {:label => _("Runtime"), :data => runtime, :color => '#4572A7'}]
+    {:results => [
+      {:label => _("Config Retrieval"), :data => config, :color => '#AA4643'},
+      {:label => _("Runtime"), :data => runtime, :color => '#4572A7'}
+    ]}
   end
 
   def reports_show

app/views/hosts/show.html.erb

@@ -75,16 +75,22 @@
     <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'>
-        <%= spinner(_('Loading runtime information ...')) %>
-      </div>
+      <div id="host_runtime"></div>
+      <%= mount_react_component('HostChart', '#host_runtime', {
+        :url => runtime_host_path(@host, :range => @range),
+        :name => 'runtime',
+        :type => 'area'
+      }.to_json) %>
     </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'>
-        <%= spinner(_('Loading resources information ...')) %>
-      </div>
+      <div id="host_resources"></div>
+      <%= mount_react_component('HostChart', '#host_resources', {
+        :url => resources_host_path(@host, :range => @range),
+        :name => 'resource',
+        :type => 'area'
+      }.to_json) %>
     </div>
   </div>
 </div>

webpack/assets/javascripts/react_app/components/common/charts/DonutChart/DonutChart.test.js

@@ -1,22 +1,16 @@
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import React from 'react';
 import { mockStoryData, emptyData } from './DonutChart.fixtures';
 import DonutChart from './';
-import * as chartService from '../../../../../services/ChartService';
+import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
 
 jest.unmock('./');
-describe('renders DonutChart', () => {
-  it('render donut chart', () => {
-    chartService.getDonutChartConfig = jest.fn(() => mockStoryData);
-    const wrapper = shallow(<DonutChart data={mockStoryData} />);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
-  });
-  it('render empty state', () => {
-    chartService.getDonutChartConfig = jest.fn(() => emptyData);
-    const wrapper = shallow(<DonutChart data={emptyData} />);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
-  });
-});
+const fixtures = {
+  'render donut chart': {
+    data: null,
+    getConfig: () => mockStoryData,
+  },
+  'render empty donut chart': {
+    data: null,
+    getConfig: () => emptyData,
+  },
+};
+testComponentSnapshotsWithFixtures(DonutChart, fixtures);

webpack/assets/javascripts/react_app/components/common/charts/DonutChart/__snapshots__/DonutChart.test.js.snap

@@ -1,16 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders DonutChart render donut chart 1`] = `
-<DonutChart
-  className="donut-chart-pf"
-  color={
-    Object {
-      "pattern": Array [
-        "#0088ce",
-        "#d1d1d1",
-      ],
-    }
-  }
+exports[`render donut chart 1`] = `
+<Component
   data={
     Object {
       "columns": Array [
@@ -65,11 +56,6 @@ exports[`renders DonutChart render donut chart 1`] = `
     }
   }
   search="/hosts?search=os_title=~VAL~"
-  size={
-    Object {
-      "height": 171,
-    }
-  }
   status="RESOLVED"
   tip="Expand the chart"
   title={
@@ -82,14 +68,25 @@ exports[`renders DonutChart render donut chart 1`] = `
       "show": true,
     }
   }
-  type="donut"
   unloadBeforeLoad={false}
 />
 `;
 
-exports[`renders DonutChart render empty state 1`] = `
-<MessageBox
-  icontype="info"
-  msg="No data available"
+exports[`render empty donut chart 1`] = `
+<Component
+  data={
+    Object {
+      "columns": Array [],
+      "names": Object {},
+      "type": "donut",
+    }
+  }
+  noDataMsg="No data available"
+  title={
+    Object {
+      "type": "percent",
+    }
+  }
+  unloadBeforeLoad={false}
 />
 `;

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

@@ -1,29 +1,21 @@
 import React from 'react';
 import { DonutChart as PfDonutChart } from 'patternfly-react';
 import { getDonutChartConfig } from '../../../../../services/ChartService';
-import MessageBox from '../../MessageBox';
+import { chartWithNoDataMessage } from '../common/chartWithNoDataMessage';
+
+const DonutChartWithNoDataMsgBox = chartWithNoDataMessage(PfDonutChart);
 
 const DonutChart = ({
   data,
   onclick,
   config = 'regular',
-  noDataMsg = __('No data available'),
   title = { type: 'percent' },
   unloadData = false,
-
-}) => {
-  const chartConfig = getDonutChartConfig({ data, config, onclick });
-
-  if (chartConfig.data.columns.length > 0) {
-    return (
-      <PfDonutChart
-       {...chartConfig}
-       title={title}
-       unloadBeforeLoad = {unloadData}
-      />
-    );
-  }
-  return <MessageBox msg={noDataMsg} icontype="info" />;
-};
+  getConfig = getDonutChartConfig,
+}) => <DonutChartWithNoDataMsgBox
+          {...getConfig({ data, config, onclick })}
+          title={title}
+          unloadBeforeLoad = {unloadData}
+         />;
 
 export default DonutChart;

webpack/assets/javascripts/react_app/components/common/charts/TimeseriesChart/TimeseriesChart.test.js

@@ -0,0 +1,22 @@
+import TimeseriesChart from './';
+import { timeseriesChartConfig } from '../../../../../services/ChartService.consts';
+import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+
+jest.unmock('./');
+const fixtures = {
+  'render timeseries chart': {
+    data: null,
+    getConfig: () => Object.assign({}, {
+      ...timeseriesChartConfig,
+      data: {
+        x: 'time',
+        columns: [['time', 15029999123], ['Runtime', 8], ['Config Retrieval', 35]],
+      },
+    }),
+  },
+  'render empty timeseries chart': {
+    data: null,
+    getConfig: () => timeseriesChartConfig,
+  },
+};
+testComponentSnapshotsWithFixtures(TimeseriesChart, fixtures);

webpack/assets/javascripts/react_app/components/common/charts/TimeseriesChart/__snapshots__/TimeseriesChart.test.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render empty timeseries chart 1`] = `
+<Component
+  axis={
+    Object {
+      "x": Object {
+        "tick": Object {
+          "fit": false,
+        },
+        "type": "timeseries",
+      },
+    }
+  }
+  data={
+    Object {
+      "columns": Array [],
+      "x": "time",
+    }
+  }
+  subchart={
+    Object {
+      "show": true,
+    }
+  }
+  tooltip={
+    Object {
+      "format": Object {
+        "title": [Function],
+      },
+      "grouped": false,
+    }
+  }
+  unloadBeforeLoad={false}
+  zoom={
+    Object {
+      "enabled": true,
+    }
+  }
+/>
+`;
+
+exports[`render timeseries chart 1`] = `
+<Component
+  axis={
+    Object {
+      "x": Object {
+        "tick": Object {
+          "fit": false,
+        },
+        "type": "timeseries",
+      },
+    }
+  }
+  data={
+    Object {
+      "columns": Array [
+        Array [
+          "time",
+          15029999123,
+        ],
+        Array [
+          "Runtime",
+          8,
+        ],
+        Array [
+          "Config Retrieval",
+          35,
+        ],
+      ],
+      "x": "time",
+    }
+  }
+  subchart={
+    Object {
+      "show": true,
+    }
+  }
+  tooltip={
+    Object {
+      "format": Object {
+        "title": [Function],
+      },
+      "grouped": false,
+    }
+  }
+  unloadBeforeLoad={false}
+  zoom={
+    Object {
+      "enabled": true,
+    }
+  }
+/>
+`;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LineChart as PfLineChart } from 'patternfly-react';
+import { chartWithNoDataMessage } from '../common/chartWithNoDataMessage';
+import { getTimeseriesChartConfig } from '../../../../../services/ChartService';
+
+const TimeseriesChartWithNoDataMsgBox = chartWithNoDataMessage(PfLineChart);
+
+const TimeseriesChart = ({
+  data,
+  type = 'line',
+  unloadData = false,
+  getConfig = getTimeseriesChartConfig,
+}) => <TimeseriesChartWithNoDataMsgBox
+       {...getConfig({ data, type })}
+       unloadBeforeLoad = {unloadData}
+      />;
+
+export default TimeseriesChart;