feat(cp-frontend): Move portal query to header, display result, retur…

…n user from mock server
yldio · May 25, 2017 · 5ffa07a · 5ffa07a
1 parent d2ac10a
commit 5ffa07a
Show file tree

Hide file tree

Showing 10 changed files with 292 additions and 213 deletions.
diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Img } from 'normalized-styled-components';
@@ -7,6 +8,7 @@ import unitcalc from 'unitcalc';
 
 import Logo from '@assets/triton_logo.png';
 import { Col, Row } from 'react-styled-flexboxgrid';
+import { P } from 'joyent-ui-toolkit';
 
 const StyledHeader = styled.div`
   background-color: ${props => props.theme.primaryDarkBrand};
@@ -18,14 +20,33 @@ const StyledLogo = styled(Img)`
   height: ${remcalc(25)};
 `;
 
-export default () => (
+const StyledP = styled(P)`
+  color: ${props => props.theme.white};
+  font-weight: 600;
+  margin: ${unitcalc(0.5)} 0 0 0;
+`;
+
+const Header = ({ datacenter, username }) => (
   <StyledHeader>
     <Row>
-      <Col lg={12} xs={12}>
+      <Col xs={6} sm={8} md={10}>
         <Link to="/">
           <StyledLogo src={Logo} />
         </Link>
       </Col>
+      <Col xs={3} sm={2} md={1}>
+        <StyledP>{datacenter}</StyledP>
+      </Col>
+      <Col xs={3} sm={2} md={1}>
+        <StyledP>{username}</StyledP>
+      </Col>
     </Row>
   </StyledHeader>
 );
+
+Header.propTypes = {
+  datacenter: PropTypes.string,
+  username: PropTypes.string
+};
+
+export default Header;
diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
+// Import PropTypes from 'prop-types';
 import { compose, graphql } from 'react-apollo';
-import PortalQuery from '@graphql/Portal.gql';
 import InstancesQuery from '@graphql/Instances.gql';
 
 import { LayoutContainer } from '@components/layout';
@@ -49,8 +48,6 @@ class InstanceList extends Component {
   }
 }
 
-const PortalGql = graphql(PortalQuery, {});
-
 const InstanceListGql = graphql(InstancesQuery, {
   options(props) {
     const params = props.match.params;
@@ -75,6 +72,6 @@ const InstanceListGql = graphql(InstancesQuery, {
   })
 });
 
-const InstanceListWithData = compose(PortalGql, InstanceListGql)(InstanceList);
+const InstanceListWithData = compose(InstanceListGql)(InstanceList);
 
 export default InstanceListWithData;
diff --git a/packages/cp-frontend/src/containers/navigation/header.js b/packages/cp-frontend/src/containers/navigation/header.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { graphql } from 'react-apollo';
+import PortalQuery from '@graphql/Portal.gql';
+import { Header as HeaderComponent } from '@components/navigation';
+
+const Header = ({
+  portal = {
+    datacenter: {
+      region: ''
+    },
+    user: {
+      firstName: ''
+    }
+  },
+  loading,
+  error
+}) => (
+  <HeaderComponent
+    datacenter={portal.datacenter.region}
+    username={portal.user.firstName}
+  />
+);
+
+const HeaderWithData = graphql(PortalQuery, {
+  props: ({ data: { portal, loading, error } }) => ({
+    portal,
+    loading,
+    error
+  })
+})(Header);
+
+export default HeaderWithData;
diff --git a/packages/cp-frontend/src/containers/navigation/index.js b/packages/cp-frontend/src/containers/navigation/index.js
@@ -1,2 +1,3 @@
+export { default as Header } from './header';
 export { default as Breadcrumb } from './breadcrumb';
 export { default as Menu } from './menu';
diff --git a/packages/cp-frontend/src/containers/services/list.js b/packages/cp-frontend/src/containers/services/list.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import { compose, graphql } from 'react-apollo';
-// import { connect } from 'react-redux';
+// Import { connect } from 'react-redux';
 import styled from 'styled-components';
-// import { Link } from 'react-router-dom';
-import PortalQuery from '@graphql/Portal.gql';
+// Import { Link } from 'react-router-dom';
 import ServicesQuery from '@graphql/Services.gql';
 
 import { processServices } from '@root/state/selectors';
@@ -58,8 +57,6 @@ class ServiceList extends Component {
   }
 }
 
-const PortalGql = graphql(PortalQuery, {});
-
 const ServicesGql = graphql(ServicesQuery, {
   options(props) {
     return {
@@ -78,6 +75,6 @@ const ServicesGql = graphql(ServicesQuery, {
   })
 });
 
-const ServiceListWithData = compose(PortalGql, ServicesGql)(ServiceList);
+const ServiceListWithData = compose(ServicesGql)(ServiceList);
 
 export default ServiceListWithData;
diff --git a/packages/cp-frontend/src/containers/services/topology.js b/packages/cp-frontend/src/containers/services/topology.js
@@ -1,21 +1,20 @@
 import React from 'react';
 import { compose, graphql } from 'react-apollo';
-// import { connect } from 'react-redux';
+// Import { connect } from 'react-redux';
 import styled from 'styled-components';
-import PortalQuery from '@graphql/Portal.gql';
 import ServicesQuery from '@graphql/ServicesTopology.gql';
 import unitcalc from 'unitcalc';
 
 import { processServices } from '@root/state/selectors';
 
 import { LayoutContainer } from '@components/layout';
 import { Loader, ErrorMessage } from '@components/messaging';
-// import { ServicesTooltip } from '@components/services';
+// Import { ServicesTooltip } from '@components/services';
 
-/* import { Topology } from 'joyent-ui-toolkit'; */
-/*import ServicesTooltip from '@components/services/tooltip';
+import { Topology } from 'joyent-ui-toolkit';
+/* Import ServicesTooltip from '@components/services/tooltip';
 
-import { toggleTooltip } from '@state/actions';*/
+import { toggleTooltip } from '@state/actions'; */
 
 const StyledBackground = styled.div`
   background-color: ${props => props.theme.whiteActive};
@@ -44,14 +43,12 @@ const ServicesTopology = ({ push, services, datacenter, loading, error }) => {
   return (
     <StyledBackground>
       <StyledContainer>
-        {/* <Topology services={services} /> */}
+        <Topology services={services} />
       </StyledContainer>
     </StyledBackground>
   );
 };
 
-const PortalGql = graphql(PortalQuery, {});
-
 const ServicesGql = graphql(ServicesQuery, {
   options(props) {
     return {
@@ -69,8 +66,6 @@ const ServicesGql = graphql(ServicesQuery, {
   })
 });
 
-const ServicesTopologyWithData = compose(PortalGql, ServicesGql)(
-  ServicesTopology
-);
+const ServicesTopologyWithData = compose(ServicesGql)(ServicesTopology);
 
 export default ServicesTopologyWithData;
diff --git a/packages/cp-frontend/src/graphql/Portal.gql b/packages/cp-frontend/src/graphql/Portal.gql
@@ -1,6 +1,8 @@
 query Portal {
   portal {
-    username
+    user {
+      firstName
+    }
     datacenter {
       uuid
       region

diff --git a/packages/cp-frontend/src/router.js b/packages/cp-frontend/src/router.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 
-import { Header } from '@components/navigation';
-
-import { Breadcrumb, Menu } from '@containers/navigation';
+import { Header, Breadcrumb, Menu } from '@containers/navigation';
 
 import { DeploymentGroupList } from '@containers/deployment-groups';
 import {

diff --git a/packages/cp-gql-mock-server/src/data.json b/packages/cp-gql-mock-server/src/data.json
@@ -4,7 +4,13 @@
     "region": "us-east-1"
   },
   "portal": {
-    "username": "juditgreskovits"
+    "user": {
+      "uuid": "uuid",
+      "login": "juditgreskovits",
+      "firstName": "Judit",
+      "lastName": "Greskovits",
+      "email": "name@email.com"
+    }
   },
   "deploymentGroups": [
     {