feat(openShiftView,rhelView): issues/157 openshift routing

* routerTypes, apply openshift view, update route detail filter * router, expand passed values to getRouteDetail * rhelView, apply translation for titles * openshiftView, translation, mirror rhelView, filter core values * graphCard, prop for cardTitle * i18n, locale, heading, title strings
RedHatInsights · Dec 16, 2019 · e70ca1b · e70ca1b
1 parent 3de9b32
commit e70ca1b
Show file tree

Hide file tree

Showing 13 changed files with 172 additions and 38 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -1,6 +1,7 @@
 {
   "curiosity-graph": {
-    "heading": "CPU socket usage",
+    "coresHeading": "CPU core usage",
+    "socketsHeading": "CPU socket usage",
     "dropdownDaily": "Daily",
     "dropdownWeekly": "Weekly",
     "dropdownMonthly": "Monthly",

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -21,29 +21,40 @@ exports[`Authorization Component should render a non-connected component authori
       Object {
         "default": true,
         "id": "all",
+        "path": "/rhel-sw/all",
         "pathParameter": "RHEL",
         "title": "Red Hat Enterprise Linux",
       },
       Object {
         "id": "arm",
+        "path": "/rhel-sw/arm",
         "pathParameter": "RHEL for ARM",
         "title": "ARM",
       },
       Object {
         "id": "ibmpower",
+        "path": "/rhel-sw/ibmpower",
         "pathParameter": "RHEL for IBM Power",
         "title": "IBM Power",
       },
       Object {
         "id": "ibmz",
+        "path": "/rhel-sw/ibmz",
         "pathParameter": "RHEL for IBM z",
         "title": "IBM Z systems",
       },
       Object {
         "id": "x86",
+        "path": "/rhel-sw/x86",
         "pathParameter": "RHEL for x86",
         "title": "x86",
       },
+      Object {
+        "id": "openshift-sw",
+        "path": "/openshift-sw",
+        "pathParameter": "OpenShift Container Platform",
+        "title": "Openshift",
+      },
     ]
   }
   session={
@@ -78,29 +89,40 @@ exports[`Authorization Component should render a non-connected component error:
       Object {
         "default": true,
         "id": "all",
+        "path": "/rhel-sw/all",
         "pathParameter": "RHEL",
         "title": "Red Hat Enterprise Linux",
       },
       Object {
         "id": "arm",
+        "path": "/rhel-sw/arm",
         "pathParameter": "RHEL for ARM",
         "title": "ARM",
       },
       Object {
         "id": "ibmpower",
+        "path": "/rhel-sw/ibmpower",
         "pathParameter": "RHEL for IBM Power",
         "title": "IBM Power",
       },
       Object {
         "id": "ibmz",
+        "path": "/rhel-sw/ibmz",
         "pathParameter": "RHEL for IBM z",
         "title": "IBM Z systems",
       },
       Object {
         "id": "x86",
+        "path": "/rhel-sw/x86",
         "pathParameter": "RHEL for x86",
         "title": "x86",
       },
+      Object {
+        "id": "openshift-sw",
+        "path": "/openshift-sw",
+        "pathParameter": "OpenShift Container Platform",
+        "title": "Openshift",
+      },
     ]
   }
   session={

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -5,9 +5,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
   className="curiosity-usage-graph fadein"
 >
   <CardHead>
-    <h2>
-      t(curiosity-graph.heading)
-    </h2>
+    <h2 />
     <CardActions>
       <Select
         aria-label="t(curiosity-graph.dropdownPlaceholder)"
@@ -124,9 +122,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
   className="curiosity-usage-graph fadein"
 >
   <CardHead>
-    <h2>
-      t(curiosity-graph.heading)
-    </h2>
+    <h2 />
     <CardActions>
       <Select
         aria-label="t(curiosity-graph.dropdownPlaceholder)"
@@ -227,9 +223,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
   className="curiosity-usage-graph fadein"
 >
   <CardHead>
-    <h2>
-      t(curiosity-graph.heading)
-    </h2>
+    <h2 />
     <CardActions>
       <Select
         aria-label="t(curiosity-graph.dropdownPlaceholder)"

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -114,7 +114,7 @@ class GraphCard extends React.Component {
 
   // ToDo: combine "curiosity-skeleton-container" into a single class w/ --loading and BEM style
   render() {
-    const { error, errorRoute, errorStatus, graphGranularity, selectOptionsType, pending, t } = this.props;
+    const { cardTitle, error, errorRoute, errorStatus, graphGranularity, selectOptionsType, pending, t } = this.props;
     const getGranularityOptions = graphCardTypes.getGranularityOptions(selectOptionsType);
 
     if (error && (errorStatus === 403 || errorStatus >= 500)) {
@@ -124,7 +124,7 @@ class GraphCard extends React.Component {
     return (
       <Card className="curiosity-usage-graph fadein">
         <CardHead>
-          <h2>{t('curiosity-graph.heading')}</h2>
+          <h2>{cardTitle}</h2>
           <CardActions>
             <Select
               aria-label={t('curiosity-graph.dropdownPlaceholder')}
@@ -154,6 +154,7 @@ class GraphCard extends React.Component {
 }
 
 GraphCard.propTypes = {
+  cardTitle: PropTypes.string,
   error: PropTypes.bool,
   errorRoute: PropTypes.shape({
     to: PropTypes.string
@@ -185,6 +186,7 @@ GraphCard.propTypes = {
 };
 
 GraphCard.defaultProps = {
+  cardTitle: null,
   error: false,
   errorRoute: {},
   errorStatus: null,

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -14,6 +14,10 @@ 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:34
+msgid \\"curiosity-graph.coresHeading\\"
+msgstr \\"\\"
+
 #: src/components/graphCard/graphCardHelpers.js:73
 msgid \\"curiosity-graph.dateLabel\\"
 msgstr \\"\\"
@@ -39,14 +43,14 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownWeekly\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCard.js:127
-msgid \\"curiosity-graph.heading\\"
-msgstr \\"\\"
-
 #: src/components/graphCard/graphCardHelpers.js:90
 msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
+#: src/components/rhelView/rhelView.js:37
+msgid \\"curiosity-graph.socketsHeading\\"
+msgstr \\"\\"
+
 #: src/components/tourView/tourView.js:53
 msgid \\"curiosity-tour.emptyStateButton\\"
 msgstr \\"\\"

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import {
+  chart_color_blue_100 as chartColorBlueLight,
+  chart_color_blue_300 as chartColorBlueDark
+} from '@patternfly/react-tokens';
+import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
+import { PageSection } from '@patternfly/react-core';
+import GraphCard from '../graphCard/graphCard';
+import { helpers } from '../../common';
+
+class OpenshiftView extends React.Component {
+  componentDidMount() {}
+
+  render() {
+    const { routeDetail, t } = this.props;
+
+    return (
+      <React.Fragment>
+        <PageHeader>
+          <PageHeaderTitle
+            title={(routeDetail.routeItem && routeDetail.routeItem.title) || helpers.UI_DISPLAY_CONFIG_NAME}
+          />
+        </PageHeader>
+        <PageSection>
+          <GraphCard
+            key={routeDetail.pathParameter}
+            filterGraphData={[
+              { id: 'cores', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
+              { id: 'threshold' }
+            ]}
+            productId={routeDetail.pathParameter}
+            cardTitle={t('curiosity-graph.coresHeading')}
+            errorRoute={routeDetail.errorRoute}
+          />
+        </PageSection>
+      </React.Fragment>
+    );
+  }
+}
+
+OpenshiftView.propTypes = {
+  routeDetail: PropTypes.shape({
+    pathParameter: PropTypes.string.isRequired,
+    routeItem: PropTypes.shape({
+      title: PropTypes.string
+    }),
+    errorRoute: PropTypes.shape({
+      to: PropTypes.string
+    })
+  }),
+  t: PropTypes.func
+};
+
+OpenshiftView.defaultProps = {
+  routeDetail: {},
+  t: helpers.noopTranslate
+};
+
+const TranslatedOpenshiftView = withTranslation()(OpenshiftView);
+
+export { TranslatedOpenshiftView as default, TranslatedOpenshiftView, OpenshiftView };
diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -9,6 +9,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageSection>
     <Connect(GraphCard)
+      cardTitle="t(curiosity-graph.socketsHeading)"
       filterGraphData={
         Array [
           Object {
@@ -42,6 +43,7 @@ exports[`RhelView Component should render a non-connected component: non-connect
   </PageHeader>
   <PageSection>
     <Connect(GraphCard)
+      cardTitle="t(curiosity-graph.socketsHeading)"
       filterGraphData={
         Array [
           Object {

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 import {
   chart_color_blue_100 as chartColorBlueLight,
   chart_color_blue_300 as chartColorBlueDark,
@@ -15,7 +16,7 @@ class RhelView extends React.Component {
   componentDidMount() {}
 
   render() {
-    const { routeDetail } = this.props;
+    const { routeDetail, t } = this.props;
 
     return (
       <React.Fragment>
@@ -33,6 +34,7 @@ class RhelView extends React.Component {
               { id: 'threshold' }
             ]}
             productId={routeDetail.pathParameter}
+            cardTitle={t('curiosity-graph.socketsHeading')}
             errorRoute={routeDetail.errorRoute}
           />
         </PageSection>
@@ -50,11 +52,15 @@ RhelView.propTypes = {
     errorRoute: PropTypes.shape({
       to: PropTypes.string
     })
-  })
+  }),
+  t: PropTypes.func
 };
 
 RhelView.defaultProps = {
-  routeDetail: {}
+  routeDetail: {},
+  t: helpers.noopTranslate
 };
 
-export { RhelView as default, RhelView };
+const TranslatedRhelView = withTranslation()(RhelView);
+
+export { TranslatedRhelView as default, TranslatedRhelView, RhelView };
diff --git a/src/components/router/__tests__/__snapshots__/router.test.js.snap b/src/components/router/__tests__/__snapshots__/router.test.js.snap
@@ -38,6 +38,12 @@ exports[`Router Component should render a basic component: basic 1`] = `
       path="/rhel-sw/:variant"
       render={[Function]}
     />
+    <Route
+      exact={true}
+      key="/openshift-sw"
+      path="/openshift-sw"
+      render={[Function]}
+    />
     <Route
       exact={true}
       key="/soon"