feat(openshiftView): issues/185 add cores sockets selector (#205)

* locales, add generic cardHeading string
* graphCard, allow children to populate card actions
* openshiftView, add cores sockets select list for graph filtering
* rhelView, code style consistency against openshiftView

public/locales/en-US.json

@@ -5,6 +5,7 @@
     "authorizedCopy": "You do not have permission to access reporting. Contact your administrator."
   },
   "curiosity-graph": {
+    "cardHeading": "CPU usage",
     "coresHeading": "CPU core usage",
     "socketsHeading": "CPU socket usage",
     "dropdownDaily": "Daily",

src/components/graphCard/graphCard.js

@@ -128,14 +128,15 @@ class GraphCard extends React.Component {
   }
 
   render() {
-    const { cardTitle, error, graphGranularity, selectOptionsType, pending, t } = this.props;
+    const { cardTitle, children, error, graphGranularity, selectOptionsType, pending, t } = this.props;
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
 
     return (
       <Card className="curiosity-usage-graph fadein">
         <CardHead>
           <h2>{cardTitle}</h2>
           <CardActions>
+            {children}
             <Select
               aria-label={t('curiosity-graph.dropdownPlaceholder')}
               onSelect={this.onSelect}
@@ -165,6 +166,7 @@ class GraphCard extends React.Component {
 
 GraphCard.propTypes = {
   cardTitle: PropTypes.string,
+  children: PropTypes.node,
   error: PropTypes.bool,
   filterGraphData: PropTypes.arrayOf(
     PropTypes.shape({
@@ -186,6 +188,7 @@ GraphCard.propTypes = {
 
 GraphCard.defaultProps = {
   cardTitle: null,
+  children: null,
   error: false,
   filterGraphData: [],
   getGraphReportsCapacity: helpers.noop,

src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap

@@ -14,8 +14,9 @@ exports[`I18n Component should generate a predictable pot output snapshot: pot o
 msgstr \\"\\"
 \\"Content-Type: text/plain; charset=UTF-8\\\\n\\"
 
-#: src/components/openshiftView/openshiftView.js:32
-msgid \\"curiosity-graph.coresHeading\\"
+#: src/components/openshiftView/openshiftView.js:61
+#: src/components/rhelView/rhelView.js:31
+msgid \\"curiosity-graph.cardHeading\\"
 msgstr \\"\\"
 
 #: src/components/graphCard/graphCardHelpers.js:73
@@ -30,8 +31,8 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownMonthly\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCard.js:140
-#: src/components/graphCard/graphCard.js:144
+#: src/components/graphCard/graphCard.js:141
+#: src/components/graphCard/graphCard.js:145
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"
 
@@ -47,10 +48,6 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
-#: src/components/rhelView/rhelView.js:35
-msgid \\"curiosity-graph.socketsHeading\\"
-msgstr \\"\\"
-
 #: src/components/graphCard/graphCard.js:112
 #: src/components/graphCard/graphCardHelpers.js:81
 msgid \\"curiosity-graph.thresholdLabel\\"

src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap

@@ -7,7 +7,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageSection>
     <Connect(GraphCard)
-      cardTitle="t(curiosity-graph.coresHeading)"
+      cardTitle="t(curiosity-graph.cardHeading)"
       filterGraphData={
         Array [
           Object {
@@ -24,7 +24,31 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
       productId="lorem ipsum"
       productShortLabel="OpenShift"
       viewId="test_id"
-    />
+    >
+      <Select
+        ariaLabel="Select option"
+        className=""
+        id="generatedid-"
+        isDisabled={false}
+        name={null}
+        onSelect={[Function]}
+        options={
+          Array [
+            Object {
+              "title": "Cores",
+              "value": "cores",
+            },
+            Object {
+              "title": "Sockets",
+              "value": "sockets",
+            },
+          ]
+        }
+        placeholder="Select option"
+        selectedOptions="cores"
+        variant="single"
+      />
+    </Connect(GraphCard)>
   </PageSection>
 </PageLayout>
 `;
@@ -36,7 +60,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
   </PageHeader>
   <PageSection>
     <Connect(GraphCard)
-      cardTitle="t(curiosity-graph.coresHeading)"
+      cardTitle="t(curiosity-graph.cardHeading)"
       filterGraphData={
         Array [
           Object {
@@ -53,7 +77,31 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
       productId="lorem ipsum"
       productShortLabel="OpenShift"
       viewId="test_id"
-    />
+    >
+      <Select
+        ariaLabel="Select option"
+        className=""
+        id="generatedid-"
+        isDisabled={false}
+        name={null}
+        onSelect={[Function]}
+        options={
+          Array [
+            Object {
+              "title": "Cores",
+              "value": "cores",
+            },
+            Object {
+              "title": "Sockets",
+              "value": "sockets",
+            },
+          ]
+        }
+        placeholder="Select option"
+        selectedOptions="cores"
+        variant="single"
+      />
+    </Connect(GraphCard)>
   </PageSection>
 </PageLayout>
 `;

src/components/openshiftView/openshiftView.js

@@ -7,12 +7,44 @@ import {
 } from '@patternfly/react-tokens';
 import { PageLayout, PageHeader, PageSection } from '../pageLayout/pageLayout';
 import GraphCard from '../graphCard/graphCard';
+import { Select } from '../select/select';
 import { helpers } from '../../common';
 
 class OpenshiftView extends React.Component {
-  componentDidMount() {}
+  state = {
+    option: null,
+    filters: []
+  };
+
+  componentDidMount() {
+    const { initialOption } = this.props;
+    this.onSelect({ value: initialOption });
+  }
+
+  onSelect = (event = {}) => {
+    const { option } = this.state;
+    const { initialFilters } = this.props;
+    const { value } = event;
+
+    if (value !== option) {
+      const filters = initialFilters.filter(val => new RegExp(value, 'i').test(val.id));
+      this.setState({
+        option,
+        filters
+      });
+    }
+  };
+
+  renderSelect() {
+    const { option } = this.state;
+    const { initialOption } = this.props;
+    const options = [{ title: 'Cores', value: 'cores' }, { title: 'Sockets', value: 'sockets' }];
+
+    return <Select onSelect={this.onSelect} options={options} selectedOptions={option || initialOption} />;
+  }
 
   render() {
+    const { filters } = this.state;
     const { routeDetail, t } = this.props;
 
     return (
@@ -23,22 +55,23 @@ class OpenshiftView extends React.Component {
         <PageSection>
           <GraphCard
             key={routeDetail.pathParameter}
-            filterGraphData={[
-              { id: 'cores', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
-              { id: 'thresholdCores' }
-            ]}
+            filterGraphData={filters}
             productId={routeDetail.pathParameter}
             viewId={routeDetail.pathId}
-            cardTitle={t('curiosity-graph.coresHeading')}
+            cardTitle={t('curiosity-graph.cardHeading')}
             productShortLabel="OpenShift"
-          />
+          >
+            {this.renderSelect()}
+          </GraphCard>
         </PageSection>
       </PageLayout>
     );
   }
 }
 
 OpenshiftView.propTypes = {
+  initialOption: PropTypes.oneOf(['cores', 'sockets']),
+  initialFilters: PropTypes.array,
   routeDetail: PropTypes.shape({
     pathParameter: PropTypes.string.isRequired,
     pathId: PropTypes.string.isRequired,
@@ -50,6 +83,13 @@ OpenshiftView.propTypes = {
 };
 
 OpenshiftView.defaultProps = {
+  initialOption: 'cores',
+  initialFilters: [
+    { id: 'cores', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
+    { id: 'sockets', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
+    { id: 'thresholdSockets' },
+    { id: 'thresholdCores' }
+  ],
   t: helpers.noopTranslate
 };
 

src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap

@@ -7,7 +7,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageSection>
     <Connect(GraphCard)
-      cardTitle="t(curiosity-graph.socketsHeading)"
+      cardTitle="t(curiosity-graph.cardHeading)"
       filterGraphData={
         Array [
           Object {
@@ -41,7 +41,7 @@ exports[`RhelView Component should render a non-connected component: non-connect
   </PageHeader>
   <PageSection>
     <Connect(GraphCard)
-      cardTitle="t(curiosity-graph.socketsHeading)"
+      cardTitle="t(curiosity-graph.cardHeading)"
       filterGraphData={
         Array [
           Object {

src/components/rhelView/rhelView.js

@@ -15,7 +15,7 @@ class RhelView extends React.Component {
   componentDidMount() {}
 
   render() {
-    const { routeDetail, t } = this.props;
+    const { initialFilters, routeDetail, t } = this.props;
 
     return (
       <PageLayout>
@@ -25,14 +25,10 @@ class RhelView extends React.Component {
         <PageSection>
           <GraphCard
             key={routeDetail.pathParameter}
-            filterGraphData={[
-              { id: 'physicalSockets', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
-              { id: 'hypervisorSockets', fill: chartColorCyanLight.value, stroke: chartColorCyanDark.value },
-              { id: 'thresholdSockets' }
-            ]}
+            filterGraphData={initialFilters}
             productId={routeDetail.pathParameter}
             viewId={routeDetail.pathId}
-            cardTitle={t('curiosity-graph.socketsHeading')}
+            cardTitle={t('curiosity-graph.cardHeading')}
             productShortLabel="RHEL"
           />
         </PageSection>
@@ -42,6 +38,7 @@ class RhelView extends React.Component {
 }
 
 RhelView.propTypes = {
+  initialFilters: PropTypes.array,
   routeDetail: PropTypes.shape({
     pathParameter: PropTypes.string.isRequired,
     pathId: PropTypes.string.isRequired,
@@ -53,6 +50,11 @@ RhelView.propTypes = {
 };
 
 RhelView.defaultProps = {
+  initialFilters: [
+    { id: 'physicalSockets', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
+    { id: 'hypervisorSockets', fill: chartColorCyanLight.value, stroke: chartColorCyanDark.value },
+    { id: 'thresholdSockets' }
+  ],
   t: helpers.noopTranslate
 };