Fixes #24011 - Add Patternfly bar chart support

.gitignore

@@ -48,3 +48,4 @@ public/webpack
 package-lock.json
 npm-debug.log
 .vscode
+yarn.lock

app/assets/stylesheets/charts.scss

@@ -149,6 +149,12 @@
   padding-bottom: 40px;
 }
 
+.host_configuration_chart {
+  width: 240px;
+  margin: 25px auto 12px;
+  padding-bottom: 40px;
+}
+
 #host-show {
   .statistics-chart {
     height: 230px;

app/helpers/dashboard_helper.rb

@@ -65,9 +65,13 @@ def get_overview_json(report, options = {})
     ].to_json
   end
 
-  def render_run_distribution(hosts, options = {})
-    data = count_reports(hosts, options)
-    flot_bar_chart("run_distribution", _("Minutes Ago"), _("Number Of Clients"), data, options)
+  # def render_run_distribution(hosts, options = {})
+  #   data = count_reports(hosts, options)
+  #   flot_bar_chart("run_distribution", _("Minutes Ago"), _("Number Of Clients"), data, options)
+  # end
+
+  def get_run_distribution_data(hosts, options = {})
+    count_reports(hosts, options).to_a
   end
 
   def searchable_links(name, search, counter)

app/views/config_reports/_metrics.html.erb

@@ -11,7 +11,8 @@
   <div class="col-md-4">
     <div class="stats-well">
       <h4 class="ca" ><%= _('Report Status') %></h4>
-      <%= flot_bar_chart("status" ,"", _("Number of Events"), status, :class => "statistics-bar")%>
+      <div id="status_chart" class='metrics-chart'></div>
+      <%= mount_react_component('BarChart', '#status_chart', {barChartData: status.to_a, xAxisLabel: _("Number of Events")}.to_json) %>
     </div>
   </div>
   <div class="col-md-4">

app/views/dashboard/_distribution_widget.html.erb

@@ -6,4 +6,5 @@
     <%= N_('Run Distribution Chart') %>
   <% end %>
 </h4>
-<%= render_run_distribution(@data.hosts, :class => 'statistics-bar', :origin => origin) %>
+<div id="run_distribution" class=''></div>
+<%= mount_react_component('BarChart', '#run_distribution', {barChartData: get_run_distribution_data(@data.hosts, :origin => origin), xAxisLabel: _("Minutes Ago"), yAxisLabel: _("Number Of Clients")}.to_json) %>

app/views/dashboard/_status_chart_widget.html.erb

@@ -10,7 +10,7 @@
     <%= title = _('Host Configuration Chart') %>
   <% end %>
 </h4>
-<div id="<%= widget_chart_id %>">
+<div id="<%= widget_chart_id %>" class="host_configuration_chart">
 </div>
 <%= mount_react_component('DonutChart', "##{widget_chart_id}", get_overview_json(@data.report))%>
 <ul class="ui-helper-hidden">

webpack/assets/javascripts/react_app/components/common/charts/BarChart/BarChart.fixtures.js

@@ -0,0 +1,56 @@
+export const multiBars = {
+  barChartData: [
+    ['Fedora 21', 3],
+    ['Ubuntu 14.04', 4],
+    ['Centos 7', 2],
+    ['Debian 8', 1],
+  ],
+  label: 'OS',
+};
+
+export const singleBar = {
+  barChartData: [
+    ['Fedora 21', 3],
+    ['Ubuntu 14.04', 0],
+    ['Centos 7', 0],
+    ['Debian 8', 0],
+  ],
+  label: 'OS',
+};
+
+export const barChartConfig = {
+  data: {
+    columns: [['Number of Events', 3, 4, 2, 1]],
+    type: 'bar',
+  },
+  color: {
+    pattern: ['#0088ce', '#ec7a08', '#3f9c35', '#005c66', 'f9d67a', '#703fec'],
+  },
+  tooltip: {
+    format: {},
+  },
+  legend: {
+    show: true,
+  },
+  padding: null,
+  size: {
+    width: 240,
+    height: 240,
+  },
+  id: 'operatingsystem',
+  axis: {
+    x: {
+      categories: ['Fedora 21', 'Ubuntu 14.04', 'Centos 7', 'Debian 8'],
+      type: 'category',
+    },
+  },
+  categories: ['Fedora 21', 'Ubuntu 14.04', 'Centos 7', 'Debian 8'],
+};
+
+export const emptyData = {
+  data: {
+    columns: [],
+    type: 'bar',
+  },
+  noDataMsg: 'No data available',
+};

webpack/assets/javascripts/react_app/components/common/charts/BarChart/BarChart.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import BarChart from './';
+import { multiBars, singleBar } from './BarChart.fixtures';
+
+storiesOf('Charts', module)
+  .add('Bar Chart - multiple bars', () => <BarChart data={multiBars} />)
+  .add('Bar Chart - single bar', () => <BarChart data={singleBar} />);

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

@@ -0,0 +1,23 @@
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import BarChart from './';
+import * as chartService from '../../../../../services/ChartService';
+import { barChartConfig, emptyData } from './BarChart.fixtures';
+
+jest.unmock('./');
+describe('renders BarChart', () => {
+  it('render bar chart chart', () => {
+    chartService.getBarChartConfig = jest.fn(() => barChartConfig);
+    const wrapper = shallow(<BarChart data={barChartConfig} />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('render empty state', () => {
+    chartService.getBarChartConfig = jest.fn(() => emptyData);
+    const wrapper = shallow(<BarChart data={emptyData} />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders BarChart render bar chart chart 1`] = `
+<BarChart
+  axis={
+    Object {
+      "x": Object {
+        "categories": Array [
+          "Fedora 21",
+          "Ubuntu 14.04",
+          "Centos 7",
+          "Debian 8",
+        ],
+        "type": "category",
+      },
+    }
+  }
+  categories={
+    Array [
+      "Fedora 21",
+      "Ubuntu 14.04",
+      "Centos 7",
+      "Debian 8",
+    ]
+  }
+  className="bar-chart-pf"
+  color={
+    Object {
+      "pattern": Array [
+        "#0088ce",
+        "#ec7a08",
+        "#3f9c35",
+        "#005c66",
+        "f9d67a",
+        "#703fec",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": Array [
+        Array [
+          "Number of Events",
+          3,
+          4,
+          2,
+          1,
+        ],
+      ],
+      "type": "bar",
+    }
+  }
+  grid={
+    Object {
+      "y": Object {
+        "show": true,
+      },
+    }
+  }
+  id="operatingsystem"
+  legend={
+    Object {
+      "show": true,
+    }
+  }
+  padding={null}
+  size={
+    Object {
+      "height": 240,
+      "width": 240,
+    }
+  }
+  title={
+    Object {
+      "type": "percent",
+    }
+  }
+  tooltip={
+    Object {
+      "format": Object {},
+    }
+  }
+  type="bar"
+  unloadBeforeLoad={false}
+/>
+`;
+
+exports[`renders BarChart render empty state 1`] = `
+<MessageBox
+  icontype="info"
+  msg="No data available"
+/>
+`;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BarChart as PfBarChart } from 'patternfly-react';
+import { getBarChartConfig } from '../../../../../services/ChartService';
+import MessageBox from '../../MessageBox';
+
+const BarChart = ({
+  data,
+  onclick,
+  noDataMsg = __('No data available'),
+  config,
+  title,
+  unloadData,
+}) => {
+  const { barChartData, xAxisLabel, yAxisLabel } = data;
+
+  const chartConfig = getBarChartConfig({
+    data: barChartData,
+    config,
+    onclick,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
+  if (chartConfig.data.columns.length > 0) {
+    return (
+      <PfBarChart
+        {...chartConfig}
+        title={title}
+        unloadBeforeLoad={unloadData}
+      />
+    );
+  }
+  return <MessageBox msg={noDataMsg} icontype="info" />;
+};
+
+BarChart.defaultProps = {
+  config: 'regular',
+  title: { type: 'percent' },
+  unloadData: false,
+};
+
+BarChart.propTypes = {
+  config: PropTypes.string,
+  noDataMsg: PropTypes.string,
+  title: PropTypes.shape({
+    type: PropTypes.string,
+  }),
+  unloadData: PropTypes.bool,
+};
+
+export default BarChart;

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

@@ -10,7 +10,6 @@ const DonutChart = ({
   noDataMsg = __('No data available'),
   title = { type: 'percent' },
   unloadData = false,
-
 }) => {
   const chartConfig = getDonutChartConfig({ data, config, onclick });
 

webpack/assets/javascripts/react_app/components/componentRegistry.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import DonutChart from './common/charts/DonutChart';
+import BarChart from './common/charts/BarChart';
 import StatisticsChartsList from './statistics/StatisticsChartsList';
 import PowerStatus from './hosts/powerStatus/';
 import NotificationContainer from './notifications/';
@@ -68,6 +69,7 @@ const coreComponets = [
   { name: 'PasswordStrength', type: PasswordStrength },
   { name: 'BreadcrumbBar', type: BreadcrumbBar },
   { name: 'FactChart', type: FactChart },
+  { name: 'BarChart', type: BarChart },
 ];
 
 componentRegistry.registerMultiple(coreComponets);

webpack/assets/javascripts/react_app/components/statistics/ChartBox.js

@@ -88,7 +88,7 @@ class ChartBox extends React.Component {
                 <Modal.Title>{this.props.title}</Modal.Title>
               </Modal.Header>
               <Modal.Body>
-                <Chart {...chartProps} config="large" />;
+                <Chart {...chartProps} config={this.props.config} />
               </Modal.Body>
             </Modal>
           )}
@@ -98,9 +98,13 @@ class ChartBox extends React.Component {
   }
 }
 
+ChartBox.defaultProps = {
+  config: 'regular',
+};
+
 ChartBox.propTypes = {
   status: PropTypes.string.isRequired,
-  config: PropTypes.object,
+  config: PropTypes.string,
   id: PropTypes.string.isRequired,
   noDataMsg: PropTypes.string,
   errorText: PropTypes.string,

webpack/assets/javascripts/services/ChartService.consts.js

@@ -9,11 +9,15 @@ const enums = {
   },
 };
 
-export const donutChartConfig = {
-  donut: {
-    width: enums.WIDTH.SMALL,
-    label: { show: false },
+const barChartEnums = {
+  SIZE: {
+    LARGE: { height: 500 },
+    REGULAR: { width: 240, height: 240 },
   },
+  WIDTH: { ...enums.width },
+};
+
+export const chartConfig = {
   data: {
     columns: [],
   },
@@ -33,6 +37,14 @@ export const donutChartConfig = {
   size: enums.SIZE.REGULAR,
 };
 
+export const donutChartConfig = {
+  ...chartConfig,
+  donut: {
+    width: enums.WIDTH.SMALL,
+    label: { show: false },
+  },
+};
+
 export const donutLargeChartConfig = {
   ...donutChartConfig,
   size: enums.SIZE.LARGE,
@@ -42,3 +54,9 @@ export const donutLargeChartConfig = {
     width: enums.WIDTH.LARGE,
   },
 };
+
+export const barChartConfig = {
+  ...chartConfig,
+  size: barChartEnums.SIZE.REGULAR,
+  padding: null,
+};