Merge latest from master into 693

quipucords · Feb 20, 2018 · f55b561 · f55b561
2 parents 28c23bf + e8a320b
commit f55b561
Show file tree

Hide file tree

Showing 43 changed files with 797 additions and 674 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,10 @@ wheels/
 *.egg-info/
 .installed.cfg
 *.egg
+quipucords/client/assets
+quipucords/client/static
+quipucords/client/*.json
+quipucords/client/*.js
 
 # PyInstaller
 #  Usually these files are written by a python script from a template

diff --git a/Jenkinsfile b/Jenkinsfile
@@ -1,6 +1,6 @@
 node('f25-os') {
     stage('Install') {
-        sh "sudo dnf -y install origin-clients"
+        sh "sudo dnf -y install origin-clients nodejs"
         sh "which oc"
         sh "oc login --insecure-skip-tls-verify --token $OPENSHIFT_TOKEN $OPHENSHIFT_LOGIN_URL"
         sh "oc project quipucords"
@@ -18,6 +18,19 @@ node('f25-os') {
         sh "sudo docker -v"
         sh "sudo setenforce 0"
     }
+    stage('Build Client') {
+        dir('client') {
+          sh "node -v"
+          sh "npm -v"
+          sh "sudo npm install -g n"
+          sh "sudo n lts"
+          sh "node -v"
+          sh "npm -v"
+          sh "npm install"
+          sh "npm rebuild node-sass --force"
+          sh "npm run build"
+        }
+    }
     stage('Build Docker Image') {
         sh "ls -lta"
         sh "cat Dockerfile"

diff --git a/client/.env.development b/client/.env.development
@@ -1,4 +1,5 @@
 REACT_APP_ENV=development
+
 REACT_APP_CREDENTIALS_SERVICE=http://localhost:4000/api/v1/credentials/
 REACT_APP_FACTS_SERVICE=http://localhost:4000/api/v1/facts/
 REACT_APP_REPORTS_SERVICE=http://localhost:4000/api/v1/reports/
@@ -11,5 +12,9 @@ REACT_APP_SCANS_SERVICE_RESULTS=http://localhost:4000/api/v1/scans/{0}/results/
 
 REACT_APP_SOURCES_SERVICE=http://localhost:4000/api/v1/sources/
 
+REACT_APP_USER_SERVICE=http://localhost:4000/api/v1/users/
+REACT_APP_USER_SERVICE_CURRENT=http://localhost:4000/api/v1/users/current/
+REACT_APP_USER_SERVICE_LOGOUT=http://localhost:4000/api/v1/users/logout/
+
 REACT_APP_AUTH_TOKEN=csrfspoof
 REACT_APP_AUTH_HEADER=X-CSRFToken
diff --git a/client/.env.production b/client/.env.production
@@ -1,4 +1,5 @@
 REACT_APP_ENV=production
+
 REACT_APP_CREDENTIALS_SERVICE=/api/v1/credentials/
 REACT_APP_FACTS_SERVICE=/api/v1/facts/
 REACT_APP_REPORTS_SERVICE=/api/v1/reports/
@@ -11,5 +12,9 @@ REACT_APP_SCANS_SERVICE_RESULTS=/api/v1/scans/{0}/results/
 
 REACT_APP_SOURCES_SERVICE=/api/v1/sources/
 
+REACT_APP_USER_SERVICE=/api/v1/users/
+REACT_APP_USER_SERVICE_CURRENT=/api/v1/users/current/
+REACT_APP_USER_SERVICE_LOGOUT=/api/v1/users/logout/
+
 REACT_APP_AUTH_TOKEN=csrftoken
 REACT_APP_AUTH_HEADER=X-CSRFToken
diff --git a/client/.env.staging b/client/.env.staging
@@ -1,4 +1,5 @@
 REACT_APP_ENV=staging
+
 REACT_APP_CREDENTIALS_SERVICE=/api/v1/credentials/
 REACT_APP_FACTS_SERVICE=/api/v1/facts/
 REACT_APP_REPORTS_SERVICE=/api/v1/reports/
@@ -11,5 +12,9 @@ REACT_APP_SCANS_SERVICE_RESULTS=/api/v1/scans/{0}/results/
 
 REACT_APP_SOURCES_SERVICE=/api/v1/sources/
 
+REACT_APP_USER_SERVICE=/api/v1/users/
+REACT_APP_USER_SERVICE_CURRENT=/api/v1/users/current/
+REACT_APP_USER_SERVICE_LOGOUT=/api/v1/users/logout/
+
 REACT_APP_AUTH_TOKEN=csrftoken
 REACT_APP_AUTH_HEADER=X-CSRFToken
diff --git a/client/package.json b/client/package.json
@@ -28,6 +28,7 @@
     "build:ui": "run-s build:css build:js",
     "build:asset-deps": "mkdir -p public/assets/rcue && cp -R node_modules/rcue/dist/* public/assets/rcue",
     "build:asset-images": "mkdir -p public/assets/images && cp -R src/styles/images/* public/assets/images",
+    "build:asset-css": "npm run build:css && mkdir -p public/assets/css && cp -R src/styles/css/* public/assets/css",
     "build:assets": "run-s build:asset-*",
     "build:finish": "mkdir -p ../quipucords/client && cp -R ./build/* ../quipucords/client",
     "build": "run-s -l build:clean build:assets build:ui build:finish",
@@ -46,6 +47,7 @@
     "axios": "^0.17.1",
     "bootstrap": "^3.3.7",
     "js-cookie": "^2.2.0",
+    "moment": "^2.20.1",
     "patternfly": "^3.37.8",
     "patternfly-react": "^1.8.1",
     "rcue": "^3.38.0",

diff --git a/client/src/components/about/about.js b/client/src/components/about/about.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { AboutModal } from 'patternfly-react';
+
+import Store from '../../redux/store';
+
+import { aboutTypes } from '../../redux/constants';
+import logo from '../../styles/images/Red_Hat_logo.svg';
+import productTitle from '../../styles/images/title.svg';
+
+class About extends React.Component {
+
+  closeAbout() {
+    Store.dispatch({ type: aboutTypes.ABOUT_DIALOG_CLOSE });
+  }
+
+  render() {
+    const { showAbout } = this.props;
+
+    return (
+      <AboutModal
+        key="aboutModal"
+        show={showAbout}
+        onHide={this.closeAbout}
+        productTitle={
+          <img src={productTitle} alt="Red Hat Entitlements Reporting"/>
+        }
+        logo={logo}
+        altLogo="RH ER"
+        trademarkText="Copyright (c) 2018 Red Hat Inc."
+      >
+        <AboutModal.Versions>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+          <AboutModal.VersionItem label="Label" versionText="Version"/>
+        </AboutModal.Versions>
+      </AboutModal>
+    );
+  }
+}
+
+About.propTypes = {
+  showAbout: PropTypes.bool
+}
+
+function mapStateToProps(state, ownProps) {
+  return {
+    showAbout: state.about.show
+  };
+};
+
+export default connect(mapStateToProps)(About);
diff --git a/client/src/components/app.js b/client/src/components/app.js
@@ -1,29 +1,26 @@
+import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 
 import {
-  AboutModal,
   Alert,
   EmptyState,
   Modal,
   VerticalNav
 } from 'patternfly-react';
 
 import { routes } from '../routes';
-import Store from '../redux/store';
 
+import About from './about/about';
 import Content from './content/content';
 import ToastNotificationsList from './toastNotificationList/toastNotificatinsList';
 import ConfirmationModal from './confirmationModal/confirmationModal';
 import MastheadOptions from './mastheadOptions/mastheadOptions';
 
-import logo from '../styles/images/Red_Hat_logo.svg';
 import productTitle from '../styles/images/title.svg';
-import _ from 'lodash';
-import { aboutTypes } from '../redux/constants';
 import { authorizeUser } from '../redux/actions/userActions';
 
 class App extends React.Component {
@@ -61,60 +58,45 @@ class App extends React.Component {
     });
   }
 
-  showAboutModal() {
-    Store.dispatch({ type: aboutTypes.ABOUT_DIALOG_OPEN });
-  }
-
-  render() {
-    const { showAbout, session } = this.props;
-
-    let closeAbout = () =>
-      Store.dispatch({ type: aboutTypes.ABOUT_DIALOG_CLOSE });
+  renderContent() {
+    const { session } = this.props;
 
     if (session.error) {
       return (
-        <EmptyState>
+        <EmptyState className="full-page-blank-slate">
           <Alert type="error">
             <span>Login error: {session.errorMessage}</span>
           </Alert>
         </EmptyState>
       );
     }
 
-    if (session.pending || !session.fulfilled) {
+    if (session.pending || !session.fulfilled || (!session.loggedIn && !session.wasLoggedIn)) {
       return (
         <Modal bsSize="lg" backdrop={false} show animation={false}>
           <Modal.Body>
-            <div className="spinner spinner-xl" />
+            <div className="spinner spinner-xl"/>
             <div className="text-center">Logging in...</div>
           </Modal.Body>
         </Modal>
       );
     }
 
-    if (!session.loggedIn) {
-      setTimeout(() => {
-        window.location = '/login';
-      }, 5000);
+    return (
+      <React.Fragment>
+        <Content />
+        <ToastNotificationsList key="toastList" />
+        <ConfirmationModal key="confirmationModal" />
+        <About />
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    const { session } = this.props;
 
-      return (
-        <div className="layout-pf layout-pf-fixed hidden-nav-menu">
-          <VerticalNav persistentSecondary={false}>
-            <VerticalNav.Masthead>
-              <VerticalNav.Brand titleImg={productTitle} />
-            </VerticalNav.Masthead>
-          </VerticalNav>
-          <div className="container-pf-nav-pf-vertical">
-            <EmptyState className="full-page-blank-slate">
-              <Alert type="error">
-                <span>
-                  You have been logged out: redirecting to the login page.
-                </span>
-              </Alert>
-            </EmptyState>
-          </div>
-        </div>
-      );
+    if (!session.loggedIn && session.wasLoggedIn) {
+      window.location = '/logout';
     }
 
     return (
@@ -127,31 +109,8 @@ class App extends React.Component {
           {this.renderMenuItems()}
         </VerticalNav>
         <div className="container-pf-nav-pf-vertical">
-          <Content />
+          {this.renderContent()}
         </div>
-        <AboutModal
-          key="aboutModal"
-          show={showAbout}
-          onHide={closeAbout}
-          productTitle={
-            <img src={productTitle} alt="Red Hat Entitlements Reporting" />
-          }
-          logo={logo}
-          altLogo="RH ER"
-          trademarkText="Copyright (c) 2018 Red Hat Inc."
-        >
-          <AboutModal.Versions>
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-            <AboutModal.VersionItem label="Label" versionText="Version" />
-          </AboutModal.Versions>
-        </AboutModal>
-        <ToastNotificationsList key="toastList" />
-        <ConfirmationModal key="confirmationModal" />
       </div>
     );
   }
@@ -160,7 +119,6 @@ class App extends React.Component {
 App.propTypes = {
   authorizeUser: PropTypes.func,
   session: PropTypes.object,
-  showAbout: PropTypes.bool,
   location: PropTypes.object,
   history: PropTypes.shape({
     push: PropTypes.func.isRequired
@@ -173,8 +131,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
 
 function mapStateToProps(state, ownProps) {
   return {
-    session: state.user.session,
-    showAbout: state.about.show
+    session: state.user.session
   };
 }
 

diff --git a/client/src/components/mastheadOptions/mastheadOptions.js b/client/src/components/mastheadOptions/mastheadOptions.js
@@ -30,6 +30,7 @@ class MastheadOptions extends React.Component {
 
   render() {
     const { user } = this.props;
+
     return (
       <nav className="collapse navbar-collapse">
         <ul className="navbar-iconic nav navbar-nav navbar-right">
@@ -45,7 +46,7 @@ class MastheadOptions extends React.Component {
           <Dropdown componentClass="li" id="user">
             <Dropdown.Toggle useAnchor className="nav-item-iconic">
               <Icon type="pf" name="user" />{' '}
-              {user.currentUser && user.currentUser.userName}
+              {user.currentUser && user.currentUser.username}
             </Dropdown.Toggle>
             <Dropdown.Menu>
               <MenuItem onClick={this.logout}>Logout</MenuItem>

diff --git a/client/src/redux/actions/userActions.js b/client/src/redux/actions/userActions.js
@@ -11,7 +11,7 @@ const getUser = () => dispatch => {
 const authorizeUser = () => dispatch => {
   return dispatch({
     type: userTypes.USER_AUTH,
-    payload: userService.authorizeUser()
+    payload: userService.whoami()
   });
 };
 

diff --git a/client/src/redux/reducers/userReducer.js b/client/src/redux/reducers/userReducer.js
@@ -58,7 +58,7 @@ export default function userReducer(state = initialState, action) {
       return helpers.setStateProp(
         'user',
         {
-          currentUser: action.payload,
+          currentUser: action.payload.data,
           fulfilled: true
         },
         {
@@ -105,6 +105,7 @@ export default function userReducer(state = initialState, action) {
         {
           loggedIn: true,
           fulfilled: true,
+          wasLoggedIn: true,
           authToken: action.payload.authToken
         },
         {