fix(build, rhelServices, auth): issues/9 build, rhsm api updates

* build, dotenv api paths breakout, restructure * build, spandx config, staging, app, and api paths * build, dist test double check for localhost refs * build, npm script proxy run, remove mock server * rhelApiTypes, rhelGraphReducer, rhelActions, rhsm updates * rhelServices, remove cloud meter refs, update rhsm mock and func * authentication, fix for insights global and remove listeners * helpers, display name
RedHatInsights · Jul 17, 2019 · 66f34ef · 66f34ef
1 parent 5e85eb3
commit 66f34ef
Show file tree

Hide file tree

Showing 23 changed files with 354 additions and 226 deletions.
diff --git a/.env b/.env
@@ -1,6 +1,7 @@
-REACT_APP_NAME=subscription-reporting
-REACT_APP_DISPLAY_NAME=Subscription Reporting
-PUBLIC_URL=${PUBLIC_URL_PREFIX}/apps/subscriptions/
+REACT_APP_UI_VERSION=$npm_package_version
+REACT_APP_UI_NAME=subscription-reporting
+REACT_APP_UI_DISPLAY_NAME=Subscription Reporting
+PUBLIC_URL=${PUBLIC_URL_PREFIX}/apps/subscription-reporting/
 
 REACT_APP_AJAX_TIMEOUT=60000
 
@@ -10,5 +11,4 @@ REACT_APP_CONFIG_SERVICE_LOCALES=./locales/locales.json
 REACT_APP_CONFIG_SERVICE_LOCALES_PATH=./locales/{{lng}}.json
 REACT_APP_CONFIG_SERVICE_LOCALES_EXPIRE=604800000
 
-REACT_APP_SERVICES_CLOUDMETER_REPORT_RHEL=/api/cloudigrade/v2/concurrent/
-REACT_APP_SERVICES_RHSM_REPORT_RHEL=/api/rhsm-subscriptions/v1/tally/accounts/{0}/products/RHEL
+REACT_APP_SERVICES_RHSM_REPORT_RHEL=/api/rhsm-subscriptions/v1/tally/products/RHEL
diff --git a/.env.development b/.env.development
@@ -1,9 +1,6 @@
 REACT_APP_ENV=development
-REACT_APP_UI_VERSION=$npm_package_version
-PUBLIC_URL=/
 
 REACT_APP_INCLUDE_CONTENT_HEADER=<!-- esi:include placeholder -->
 REACT_APP_INCLUDE_CONTENT_BODY=<div id="root"></div>
 
-REACT_APP_SERVICES_CLOUDMETER_REPORT_RHEL=http://localhost:5000/api/cloudigrade/v2/concurrent/
-REACT_APP_SERVICES_RHSM_REPORT_RHEL=http://localhost:5000/api/rhsm-subscriptions/v1/tally/accounts/{0}/products/RHEL
+REACT_APP_SERVICES_RHSM_REPORT_RHEL=http://localhost:5000/api/rhsm-subscriptions/v1/tally/products/RHEL
diff --git a/.env.proxy b/.env.proxy
@@ -2,9 +2,8 @@ BROWSER=none
 PORT=5001
 
 REACT_APP_ENV=review
-REACT_APP_UI_VERSION=${UI_VERSION}
 
 REACT_APP_INCLUDE_CONTENT_HEADER='<esi:include src="/apps/chrome/snippets/head.html" />'
 REACT_APP_INCLUDE_CONTENT_BODY='<esi:include src="/apps/chrome/snippets/body.html" />'
 
-REACT_APP_SERVICES_CLOUDMETER_REPORT=http://localhost:5000/api/cloudigrade/v2/concurrent/
+REACT_APP_SERVICES_RHSM_REPORT_RHEL=/api/rhsm-subscriptions/v1/tally/products/RHEL
diff --git a/config/spandx.config.js b/config/spandx.config.js
@@ -4,6 +4,15 @@ module.exports = {
   routes: {
     '/': {
       host: `http://${localhost}:5001`
+    },
+    '/apps/subscription-reporting': {
+      host: `http://${localhost}:5001`
+    },
+    '/staging/subscription-reporting': {
+      host: `http://${localhost}:5001`
+    },
+    '/api': {
+      host: 'https://ci.cloud.paas.psi.redhat.com'
     }
   }
 };
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "release": "standard-version",
     "start": "sh ./scripts/dev.chrome.sh; run-p -l api:dev start:js",
     "start:js": "react-scripts start",
-    "start:proxy": "sh -ac '. ./.env.proxy; open https://ci.foo.redhat.com:1337/; run-s api:proxy-hosts; run-p -l start:js api:proxy api:dev'",
+    "start:proxy": "sh -ac '. ./.env.proxy; open https://ci.foo.redhat.com:1337/; run-s api:proxy-hosts; run-p -l start:js api:proxy'",
     "start:standalone": "rm ./.env.development.local; run-p -l api:dev start:js",
     "test": "run-s test:lint test:ci",
     "test:ci": "export CI=true; react-scripts test --env=jsdom --roots=./src --coverage",

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>%REACT_APP_DISPLAY_NAME%</title>
+    <title>%REACT_APP_UI_DISPLAY_NAME%</title>
     %REACT_APP_INCLUDE_CONTENT_HEADER%
   </head>
   <body>

diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -4,9 +4,11 @@ exports[`Helpers should have specific functions: helpers 1`] = `
 Object {
   "DEV_MODE": false,
   "PROD_MODE": false,
-  "PUBLIC_URL": "/apps/subscriptions/",
   "REVIEW_MODE": false,
   "TEST_MODE": true,
+  "UI_DISPLAY_NAME": "Subscription Reporting",
+  "UI_NAME": "subscription-reporting",
+  "UI_PATH": "/apps/subscription-reporting/",
   "UI_VERSION": "0.0.0.0000000",
   "breakpoints": Object {
     "lg": 992,

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -7,6 +7,15 @@ import {
   global_breakpoint_2xl as globalBreakpoint2xl
 } from '@patternfly/react-tokens';
 
+const breakpoints = {
+  xs: parseInt(globalBreakpointXs.value, 10),
+  sm: parseInt(globalBreakpointSm.value, 10),
+  md: parseInt(globalBreakpointMd.value, 10),
+  lg: parseInt(globalBreakpointLg.value, 10),
+  xl: parseInt(globalBreakpointXl.value, 10),
+  xl2: parseInt(globalBreakpoint2xl.value, 10)
+};
+
 const generateId = prefix =>
   `${prefix || 'generatedid'}-${(process.env.REACT_APP_ENV !== 'test' && Math.ceil(1e5 * Math.random())) || ''}`;
 
@@ -24,20 +33,16 @@ const REVIEW_MODE = process.env.REACT_APP_ENV === 'review';
 
 const TEST_MODE = process.env.REACT_APP_ENV === 'test';
 
-const PUBLIC_URL = process.env.PUBLIC_URL || '/';
+const UI_NAME = process.env.REACT_APP_UI_NAME;
 
-const UI_VERSION = process.env.REACT_APP_UI_VERSION;
+const UI_DISPLAY_NAME = process.env.REACT_APP_UI_DISPLAY_NAME;
 
-const breakpoints = {
-  xs: parseInt(globalBreakpointXs.value, 10),
-  sm: parseInt(globalBreakpointSm.value, 10),
-  md: parseInt(globalBreakpointMd.value, 10),
-  lg: parseInt(globalBreakpointLg.value, 10),
-  xl: parseInt(globalBreakpointXl.value, 10),
-  xl2: parseInt(globalBreakpoint2xl.value, 10)
-};
+const UI_PATH = process.env.PUBLIC_URL || '/';
+
+const UI_VERSION = process.env.REACT_APP_UI_VERSION;
 
 const helpers = {
+  breakpoints,
   generateId,
   noop,
   noopPromise,
@@ -46,9 +51,10 @@ const helpers = {
   PROD_MODE,
   REVIEW_MODE,
   TEST_MODE,
-  PUBLIC_URL,
-  UI_VERSION,
-  breakpoints
+  UI_NAME,
+  UI_DISPLAY_NAME,
+  UI_PATH,
+  UI_VERSION
 };
 
 export { helpers as default, helpers };
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -16,7 +16,17 @@ exports[`Authorization Component should render a non-connected component authori
       "push": [Function],
     }
   }
-  routes={Array []}
+  routes={
+    Array [
+      Object {
+        "component": [Function],
+        "id": "rhel",
+        "redirect": true,
+        "title": "Red Hat Enterprise Linux",
+        "to": "/redhatenterpriselinux",
+      },
+    ]
+  }
   session={
     Object {
       "authorized": true,
@@ -44,7 +54,17 @@ exports[`Authorization Component should render a non-connected component error:
       "push": [Function],
     }
   }
-  routes={Array []}
+  routes={
+    Array [
+      Object {
+        "component": [Function],
+        "id": "rhel",
+        "redirect": true,
+        "title": "Red Hat Enterprise Linux",
+        "to": "/redhatenterpriselinux",
+      },
+    ]
+  }
   session={
     Object {
       "authorized": false,

diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -5,18 +5,30 @@ import { EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant } from '@
 import { BanIcon, BinocularsIcon } from '@patternfly/react-icons';
 import { connectRouter, reduxActions } from '../../redux';
 import { helpers } from '../../common/helpers';
+import { routes as appRoutes } from '../router/router';
 import PageLayout from '../pageLayout/pageLayout';
 
 class Authentication extends Component {
+  appNav = helpers.noop;
+
+  buildNav = helpers.noop;
+
   componentDidMount() {
-    const { appName, authorizeUser, insights, routes, session } = this.props;
+    const { appName, authorizeUser, history, insights, routes, session } = this.props;
 
     try {
       insights.chrome.init();
 
+      /**
+       * ToDo: add condition check for proxy with "helpers.REVIEW_MODE" once navigation is integrated with chrome
+       * i.e. "if (helpers.PROD_MODE || helpers.REVIEW_MODE)"
+       */
       if (helpers.PROD_MODE) {
         insights.chrome.identifyApp(appName);
         insights.chrome.navigation(routes);
+
+        this.appNav = insights.chrome.on('APP_NAVIGATION', event => history.push(`/${event.navId}`));
+        this.buildNav = history.listen(() => insights.chrome.navigation(this.buildNavigation()));
       }
 
       if (!session.authorized) {
@@ -34,24 +46,15 @@ class Authentication extends Component {
     this.buildNav();
   }
 
-  appNav() {
-    const { history, insights } = this.props;
-
-    if (history && insights.chrome) {
-      insights.chrome.on('APP_NAVIGATION', event => {
-        console.log('test HISTORY', event);
-        return history.push(`/${event.navId}`);
-      });
-    }
-  }
-
-  buildNav() {
-    const { history, insights, routes } = this.props;
+  buildNavigation = () => {
+    const { routes } = this.props;
+    const currentPath = window.location.pathname.split('/').slice(-1)[0];
 
-    if (history && insights.chrome) {
-      history.listen(() => insights.chrome.navigation(routes));
-    }
-  }
+    return routes.map(item => ({
+      ...item,
+      active: item.id === currentPath
+    }));
+  };
 
   render() {
     const { children, session } = this.props;
@@ -104,7 +107,11 @@ Authentication.propTypes = {
       on: PropTypes.func
     })
   }),
-  routes: PropTypes.array,
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string
+    })
+  ),
   session: PropTypes.shape({
     authorized: PropTypes.bool,
     error: PropTypes.bool,
@@ -114,10 +121,10 @@ Authentication.propTypes = {
 };
 
 Authentication.defaultProps = {
-  appName: process.env.REACT_APP_NAME,
+  appName: helpers.UI_NAME,
   authorizeUser: helpers.noop,
   insights: window.insights,
-  routes: [],
+  routes: appRoutes,
   session: {
     authorized: false,
     error: false,

diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js
@@ -14,14 +14,19 @@ import { Chart, ChartBar, ChartBaseTheme, ChartLabel, ChartStack, ChartTooltip }
 import { connectTranslate, reduxActions } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { graphHelpers } from '../../common/graphHelpers';
+import { rhelApiTypes } from '../../types/rhelApiTypes';
 
 class RhelGraphCard extends React.Component {
   state = { isOpen: false };
 
   componentDidMount() {
     const { getGraphReports } = this.props;
 
-    getGraphReports();
+    getGraphReports({
+      [rhelApiTypes.RHSM_API_QUERY_GRANULARITY]: 'daily',
+      [rhelApiTypes.RHSM_API_QUERY_START_DATE]: '2019-01-01T00:00:00Z',
+      [rhelApiTypes.RHSM_API_QUERY_END_DATE]: '2019-01-31T00:00:00Z'
+    });
   }
 
   onToggle = isOpen => {
@@ -155,7 +160,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  getGraphReports: () => dispatch(reduxActions.rhel.getGraphReports())
+  getGraphReports: query => dispatch(reduxActions.rhel.getGraphReports(query))
 });
 
 const ConnectedRhelGraphCard = connectTranslate(mapStateToProps, mapDispatchToProps)(withBreakpoints(RhelGraphCard));

diff --git a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RouterTypes should return specific properties: baseName 1`] = `"/apps/subscriptions/"`;
+exports[`RouterTypes should return specific properties: baseName 1`] = `"/apps/subscription-reporting/"`;
 
 exports[`RouterTypes should return specific properties: routes 1`] = `
 Array [

diff --git a/src/components/router/routerTypes.js b/src/components/router/routerTypes.js
@@ -5,7 +5,7 @@ import RhelView from '../rhelView/rhelView';
  * Return the application base directory.
  * @type {string}
  */
-const baseName = helpers.PUBLIC_URL;
+const baseName = helpers.UI_PATH;
 
 /**
  * Return array of objects that describe navigation

diff --git a/src/redux/actions/__tests__/rhelActions.test.js b/src/redux/actions/__tests__/rhelActions.test.js
@@ -25,7 +25,7 @@ describe('RhelActions', () => {
         status: 200,
         response: {
           test: 'success',
-          [rhelApiTypes.RHSM_API_RESPONSE_ACCOUNTS_PRODUCTS_DATA]: ['success']
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA]: ['success']
         }
       });
     });

diff --git a/src/redux/actions/rhelActions.js b/src/redux/actions/rhelActions.js
@@ -1,10 +1,10 @@
 import { rhelTypes } from '../types';
 import rhelServices from '../../services/rhelServices';
 
-const getGraphReports = () => dispatch =>
+const getGraphReports = (query = {}) => dispatch =>
   dispatch({
     type: rhelTypes.GET_GRAPH_REPORT,
-    payload: rhelServices.getGraphReportsRhsm()
+    payload: rhelServices.getGraphReportsRhsm(query)
   });
 
 export { getGraphReports as default, getGraphReports };
diff --git a/src/redux/reducers/rhelGraphReducer.js b/src/redux/reducers/rhelGraphReducer.js
@@ -46,7 +46,7 @@ const rhelGraphReducer = (state = initialState, action) => {
         null,
         {
           graphData: {
-            usage: action.payload.data[rhelApiTypes.RHSM_API_RESPONSE_ACCOUNTS_PRODUCTS_DATA] || []
+            usage: action.payload.data[rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA] || []
           },
           fulfilled: true
         },

diff --git a/src/services/__tests__/rhelServices.test.js b/src/services/__tests__/rhelServices.test.js
@@ -17,11 +17,10 @@ describe('RhelServices', () => {
   });
 
   it('should export a specific number of methods and classes', () => {
-    expect(Object.keys(rhelServices)).toHaveLength(2);
+    expect(Object.keys(rhelServices)).toHaveLength(1);
   });
 
   it('should have specific methods', () => {
-    expect(rhelServices.getGraphReportsCm).toBeDefined();
     expect(rhelServices.getGraphReportsRhsm).toBeDefined();
   });