Replace plotly line chart with pf-react area chart

[TheRealJon]

Replaces the Line chart component with Area component which uses pf-react ChartArea. Uses composition instead of inheritance to get Prometheus data. Old line chart implementation is still available as Line component.

[kyoto]

Thanks @TheRealJon. This is looking really good.

Since we have now started using React Hooks (#1456), I'm thinking it probably makes sense use them here?

[TheRealJon]

@spadgett I think this is ready for review now

[TheRealJon]

/retest

[TheRealJon]

@spadgett I think this is ready for review. It will probably fail CI because of patternfly/patternfly-react#1898, but once that issue is fixed upstream this should be good to go. I have a PR open to fix the issue, so it shouldn't be long.

[TheRealJon]

Found a bug with the chart titles. I removed the css that center aligned them, but that breaks the Status graph, and maybe some others. I'll make a modifier to left align just the area chart titles.

[spadgett]

Nice work on this 👍

[spadgett]

@TheRealJon is this the patternfly/react-charts problem you mentioned?

ERROR in /go/src/github.com/openshift/console/frontend/node_modules/@patternfly/react-charts/dist/js/components/ChartLegend/ChartLegend.d.ts
(5,25): Type '[]' does not satisfy the constraint 'number | "toString" | "valueOf" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | "substring" | ... 29 more ... | "trimRight"'.
  Type '[]' is not assignable to type '"trimRight"'.

[spadgett]

Looks good, we just need to get the pf charts to compile

[TheRealJon]

@TheRealJon is this the patternfly/react-charts problem you mentioned?

ERROR in /go/src/github.com/openshift/console/frontend/node_modules/@patternfly/react-charts/dist/js/components/ChartLegend/ChartLegend.d.ts
(5,25): Type '[]' does not satisfy the constraint 'number | "toString" | "valueOf" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | "substring" | ... 29 more ... | "trimRight"'.
  Type '[]' is not assignable to type '"trimRight"'.

Sorry, missed this comment, but yes, this was the typescript error we were seeing from pf react-charts

[spadgett]

/lgtm

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: spadgett, TheRealJon

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [spadgett]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment