Fixes #24011 - Add Patternfly bar chart support #5718

lizagilman · 2018-06-20T08:03:50Z

To do:

edit:

updated screenshot -

theforeman-bot · 2018-06-20T08:03:55Z

Issues: #24011

lizagilman · 2018-06-20T08:04:55Z

@ripcurld @amirfefer

amirfefer

Thanks @lizagilman -
I left some inline comments.

What do you think about adding the bar chart functionality to the ChartBox component? then we could use the chartbox component in the metrics page, and by that we keep the consistency from the Statistics page.

amirfefer · 2018-06-20T08:48:34Z

webpack/assets/javascripts/services/ChartService.js

+  donutChartConfig,
+  donutLargeChartConfig,
+  barChartConfig,
+} from './ChartService.consts';

 const sizeConfig = {


It's not a size configuration anymore, could you rename?

amirfefer · 2018-06-20T08:49:01Z

webpack/assets/javascripts/services/ChartService.js

@@ -29,6 +34,7 @@ const getChartConfig = ({
  data, config, onclick, id = uuidV1(),
 }) => {
  const chartConfigForType = sizeConfig[config];
+


redundant line

amirfefer · 2018-06-20T12:08:18Z

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, label: "Number of Events"}.to_json) %>


there's another BarChart in the dashboard (run distribution widget)

amirfefer · 2018-06-20T12:10:50Z

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

+
+  data: { ...chartConfig.data, type: 'bar' },
+
+  legend: { show: true },


IMO the legend default should be false
looks odd with only one category

amirfefer · 2018-06-20T12:36:19Z

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

+export const barChartConfig = {
+  ...chartConfig,
+
+  data: { ...chartConfig.data, type: 'bar' },


Do we have to add type: 'bar' prop? patternfly BarChart implementation adds it anyway

amirfefer · 2018-06-20T12:55:03Z

webpack/assets/javascripts/services/ChartService.js

+      },
+    },
+
+    categories,


do we need this here as well?

amirfefer · 2018-06-20T12:56:57Z

webpack/assets/javascripts/services/ChartService.js

+
+  columns.unshift(label);
+
+  chartConfig.data.columns = [columns];


looks like the data structure doesn't support in groups/stacks

Do you referr to grouped bar chart?
Grouped bar chart expects the following structure: [category1, value1, value2, ...], [category2, value3, value4, ...]
Do we have anywhere data that can be used or manipulated to form this structure?
The 'regular' structure ( (DATA, VALUE) ) is good for the single bar (not grouped) chart, which expects only one value [category, value]

I'm not sure.

@ohadlevy - would we like to support grouped chart?

amirfefer · 2018-06-20T13:02:20Z

webpack/assets/javascripts/services/ChartService.js

@@ -52,6 +58,7 @@ const getChartConfig = ({
    ...chartConfigForType,
    id,
    data: {
+      ...chartConfigForType.data,


I think if we'll remove {type: bar} from the config object, then we can remove this line.

amirfefer · 2018-06-20T13:06:09Z

webpack/assets/javascripts/services/ChartService.js

+
+  columns.unshift(label);
+
+  chartConfig.data.columns = [columns];


I have mixed feeling about this. looks like we modify columns property in two different places, if the data is calculated differently from donut chart, maybe it would be better to separate the logic between the two.

I agree, isn't this separation (between the two functions) enough?

amirfefer · 2018-06-21T15:34:17Z

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

+  data,
+  onclick,
+  config = 'regularBar',
+  noDataMsg = __('No data available'),


Better to use defaultProps and Proptypes

amirfefer

thanks @lizagilman
please add yarn.lock to gitignore

amirfefer · 2018-07-09T18:21:59Z

app/helpers/dashboard_helper.rb

@@ -67,6 +67,11 @@ def get_overview_json(report, options = {})

  def render_run_distribution(hosts, options = {})
    data = count_reports(hosts, options)
+    puts '*********************************************'


forgot to delete this

amirfefer · 2018-07-09T18:22:27Z

package.json

@@ -96,7 +96,7 @@
    "uuid": "^3.0.1"
  },
  "scripts": {
-    "lint": "./node_modules/.bin/eslint -c .eslintrc webpack/ script/ || exit 0",
+    "lint": "./node_modules/.bin/eslint -c .eslintrc webpack/ script/",


amirfefer · 2018-07-09T18:23:39Z

webpack/assets/javascripts/compute_resource/ovirt.js

@@ -29,7 +29,7 @@ export function templateSelected(item) {
        $('#storage_volumes .children_fields >.fields').remove();
        $.each(result.volumes, function () {
          // Change variable name because 'interface' is a reserved keyword.
-          this.disk_interface = this['interface'];
+          this.disk_interface = this.interface;


well I do find this better syntax, but how does it related?

amirfefer · 2018-07-09T18:26:45Z

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

+const BarChart = ({
+  data,
+  onclick,
+  noDataMsg = __('No data available'),


could it be defined in the defaultProps?

I think it could be done when your jed pr (5342) is merged

amirfefer · 2018-07-09T18:27:51Z

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

+BarChart.propTypes = {
+  config: PropTypes.string,
+  noDataMsg: PropTypes.string,
+  title: PropTypes.object,


please use shape instead of just .object

amirfefer · 2018-07-09T18:38:42Z

webpack/assets/javascripts/services/ChartService.js

+
+  const categories = data.map(dataItem => dataItem[0]);
+
+  const columns = data.map(x => x[1]);


@sharvit This ChartSevice becomes more and more complex, each render this will invoked, even if nothing changed.
what do you think about moving this logic to a selector (memorized if needed) by connect this component to the store, or its parent.

Can we actually move it into selectors? I think most of the data coming from the data prop and not from the state.
Does it actually lead to performance issue that we must solve in this particular PR?

amirfefer · 2018-07-09T18:42:34Z

webpack/assets/javascripts/services/ChartService.js

+
+  columns.unshift(label);
+
+  chartConfig.data.columns = [columns];


I'm not sure.

@ohadlevy - would we like to support grouped chart?

boaz0 · 2018-07-10T06:58:19Z

webpack/assets/javascripts/services/ChartService.js

+const configForType = {
+  regularDonut: donutChartConfig,
+  largeDonut: donutLargeChartConfig,
+  regularBar: barChartConfig,


IMHO, since there is only one size (regular) to BarChart, it is not a good idea to add it to the configForType (previously sizeConfig) object.

If we insist on doing that, maybe keep the name sizeConfig and nested it:

const sizeConfig = { donut: { regular: ... large: ... }, bar: { ... } } const getChartConfig = ({ ... type, config }) = { chartConfigForType = sizeConfig[type][config] ... }

boaz0 · 2018-07-10T06:59:28Z

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

+  ...chartConfig,
+  size: barChartEnums.SIZE.REGULAR,
+
+  // data: { ...chartConfig.data, },


did you forget to uncomment this? 😃

coveralls · 2018-07-10T15:11:24Z

Coverage increased (+0.2%) to 75.891% when pulling 5b7dc0f on lizagilman:bar-chart into 882d451 on theforeman:develop.

houndci-bot · 2018-07-12T12:52:36Z

app/helpers/dashboard_helper.rb

-  def render_run_distribution(hosts, options = {})
-    data = count_reports(hosts, options)
-    flot_bar_chart("run_distribution", _("Minutes Ago"), _("Number Of Clients"), data, options)
+


Layout/TrailingWhitespace: Trailing whitespace detected.

lizagilman · 2018-07-15T15:13:56Z

@amirfefer @ripcurld
pushed some updates
still need to work on the look of the charts

amirfefer

Thanks @lizagilman, looks great
Could you use ChartBox in the metrics page?

amirfefer · 2018-07-22T12:15:27Z

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

+
+const BarChart = ({
+  data,
+  onclick,


some props missing in the proptype

amirfefer · 2018-07-22T12:22:32Z

.gitignore

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


are you using yarn?

lizagilman · 2018-10-25T19:24:41Z

@amirfefer thanks addressed all your comments

lizagilman · 2018-10-26T05:42:33Z

[test foreman]

lizagilman · 2018-10-28T08:41:27Z

@sharvit @amirfefer any other comments here?

amirfefer

Thanks @lizagilman ! 👍
almost there, few minor issues :)

amirfefer · 2018-10-28T12:28:50Z

webpack/assets/javascripts/react_app/components/ConfigReports/index.js

+    metricsData: { tableData, tableClasses, total },
+  } = props.data;
+
+  const createRow = (metric, i) => (


nitpick: please use array destructing here:

const createRow = ([name, value], i) => ( <tr key={i}> <td className="break-me">{name}</td> <td>{value}</td> </tr> );

amirfefer · 2018-10-28T12:36:54Z

webpack/assets/javascripts/react_app/components/ConfigReports/index.js

+          type="donut"
+          chart={{ data: metricsChartData, id: 'report-metrics' }}
+          title="Report Metrics"
+          id="report-metrics"


I didn't find any use of id prop in Chartbox

amirfefer · 2018-10-28T12:41:20Z

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

@@ -79,7 +94,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} />


nitpick:
could you extract the props ?

const { config, title, className, status } = this.props

amirfefer · 2018-10-28T12:52:12Z

webpack/assets/javascripts/react_app/components/ComponentWrapper/index.js

+import PropTypes from 'prop-types';
+import componentRegistry from '../componentRegistry';
+
+const ComponentWrapper = (props) => {


index.js meant for redux containers (connected components), I prefer to use componentWrapper.js as a name
Plus, shouldn't it be under common directory?

amirfefer · 2018-10-28T12:52:42Z

webpack/assets/javascripts/react_app/components/ComponentWrapper/index.js

+  const { component, componentProps } = props.data;
+
+  if (component === 'ComponentWrapper') {
+    throw new Error('Cannot wrap componenet wrapper');


could you add a test for this

amirfefer · 2018-10-28T12:55:38Z

webpack/assets/javascripts/react_app/components/ConfigReports/index.js

+  }),
+};
+
+export default ConfigReports;


same here (use ConfigReport.js instead of index.js)

amirfefer · 2018-10-28T12:56:56Z

webpack/assets/javascripts/react_app/components/ConfigReports/index.js

+import { translate as __ } from '../../common/I18n';
+import { STATUS } from '../../constants';
+
+const ConfigReports = (props) => {


could you add a snapshot test for this component ?

lizagilman · 2018-10-28T13:54:25Z

@amirfefer
updated, thanks!

lizagilman · 2018-10-28T15:30:20Z

[test katello]

amirfefer

@lizagilman Works and looks great !
thanks 👍

lizagilman · 2018-11-01T12:35:52Z

@tstrachota can we merge?

tstrachota

I found one issue in code. Otherwise it looks good. I still need to test it live though.

tstrachota · 2018-11-02T12:13:49Z

app/helpers/reports_helper.rb

@@ -22,6 +22,13 @@ def metric(m)
    m.round(4) rescue _("N/A")
  end

+  def metrics_table_data(metrics)
+    metrics.map do |title, value|


Result of this method is thrown away.

lizagilman · 2018-11-05T08:59:33Z

thanks @tstrachota , updated

tstrachota

I tested this and it works well.

tstrachota · 2018-11-05T13:01:25Z

Test failures are unrelated, merging. Thanks @lizagilman !

Ron-Lavi · 2018-11-05T16:04:25Z

Hey guys, the component wrapper looks really awesome !

though it seem not to work while the component uses Redux
when props that was received from the server
are named the same as props received from the store.
those props are received to the component as undefined.

my guess is that the mapStateToProps runs after the component wrapper call,
and it fetch data which wasn't initiated yet from the store.

I saw that on regular components it works.. so it seems that something happens when involving Redux mapStateToProps.

any tips how to solve this?
thanks

amirfefer · 2018-11-05T16:17:48Z

@LaViro
have you used the wrapper on the unconnected component? I don't think we should wrap a connected component with this wrapper. @lizagilman any thoughts?

Ron-Lavi · 2018-11-05T16:30:29Z

Tried to pass the unconnected component through componentRegistry and it worked great !
but than the component is not connected to Redux unfortunately..
If it is not the use case of this helper component then sorry for ruining the party 💃

theforeman-bot added Needs testing Not yet reviewed labels Jun 20, 2018

lizagilman force-pushed the bar-chart branch 2 times, most recently from 2d1f6be to 3a5215a Compare June 20, 2018 11:43

amirfefer suggested changes Jun 20, 2018

View reviewed changes

theforeman-bot added Waiting on contributor and removed Not yet reviewed labels Jun 20, 2018

amirfefer reviewed Jun 21, 2018

View reviewed changes

lizagilman force-pushed the bar-chart branch from 3a5215a to db7145f Compare July 9, 2018 13:58

theforeman-bot added Needs re-review Needs testing and removed Waiting on contributor labels Jul 9, 2018

amirfefer reviewed Jul 9, 2018

View reviewed changes

boaz0 reviewed Jul 10, 2018

View reviewed changes

lizagilman force-pushed the bar-chart branch 5 times, most recently from cb15536 to 2add6cd Compare July 10, 2018 15:10

lizagilman force-pushed the bar-chart branch 2 times, most recently from 277152f to d5d16b7 Compare July 12, 2018 12:52

houndci-bot reviewed Jul 12, 2018

View reviewed changes

lizagilman force-pushed the bar-chart branch from d5d16b7 to 1a3b4a2 Compare July 12, 2018 12:53

tbrisker added the WIP label Jul 15, 2018

amirfefer suggested changes Jul 22, 2018

View reviewed changes

amirfefer suggested changes Oct 28, 2018

View reviewed changes

theforeman-bot added Waiting on contributor and removed Needs re-review labels Oct 28, 2018

lizagilman force-pushed the bar-chart branch from 8eacd55 to 9551207 Compare October 28, 2018 13:52

theforeman-bot added Needs re-review and removed Waiting on contributor labels Oct 28, 2018

amirfefer previously approved these changes Oct 29, 2018

View reviewed changes

theforeman-bot removed the Needs re-review label Oct 29, 2018

tstrachota removed the WIP label Oct 31, 2018

tstrachota suggested changes Nov 2, 2018

View reviewed changes

theforeman-bot added the Waiting on contributor label Nov 2, 2018

Fixes #24011 - Add Patternfly bar chart support

13a2311

lizagilman dismissed amirfefer’s stale review via 13a2311 November 4, 2018 16:23

lizagilman force-pushed the bar-chart branch from 9551207 to 13a2311 Compare November 4, 2018 16:23

theforeman-bot added Needs re-review and removed Waiting on contributor labels Nov 4, 2018

tstrachota approved these changes Nov 5, 2018

View reviewed changes

theforeman-bot removed the Needs re-review label Nov 5, 2018

tstrachota merged commit 711cbdb into theforeman:develop Nov 5, 2018


		data: { ...chartConfig.data, type: 'bar' },

		legend: { show: true },


		columns.unshift(label);

		chartConfig.data.columns = [columns];


		const categories = data.map(dataItem => dataItem[0]);

		const columns = data.map(x => x[1]);

Fixes #24011 - Add Patternfly bar chart support #5718

Fixes #24011 - Add Patternfly bar chart support #5718

Conversation

lizagilman commented Jun 20, 2018 • edited Loading

theforeman-bot commented Jun 20, 2018

lizagilman commented Jun 20, 2018

amirfefer left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizagilman Jul 9, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amirfefer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Jul 10, 2018 • edited Loading

Choose a reason for hiding this comment

lizagilman commented Jul 15, 2018 • edited Loading

amirfefer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizagilman commented Oct 25, 2018 • edited Loading

lizagilman commented Oct 26, 2018

lizagilman commented Oct 28, 2018

amirfefer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizagilman commented Oct 28, 2018

lizagilman commented Oct 28, 2018

amirfefer left a comment

Choose a reason for hiding this comment

lizagilman commented Nov 1, 2018

tstrachota left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizagilman commented Nov 5, 2018

tstrachota left a comment

Choose a reason for hiding this comment

tstrachota commented Nov 5, 2018

Ron-Lavi commented Nov 5, 2018

amirfefer commented Nov 5, 2018

Ron-Lavi commented Nov 5, 2018

lizagilman commented Jun 20, 2018 •

edited

Loading

amirfefer left a comment •

edited

Loading

lizagilman Jul 9, 2018 •

edited

Loading

coveralls commented Jul 10, 2018 •

edited

Loading

lizagilman commented Jul 15, 2018 •

edited

Loading

lizagilman commented Oct 25, 2018 •

edited

Loading