feat(cp-frontend): Move portal query to header, display result, return user from mock server

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;

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;

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;

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';

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 { Link } from 'react-router-dom';
-import PortalQuery from '@graphql/Portal.gql';
 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;

packages/cp-frontend/src/containers/services/topology.js

@@ -1,8 +1,7 @@
 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';
 
@@ -10,10 +9,10 @@ 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 { Topology } from 'joyent-ui-toolkit';
-/*import ServicesTooltip from '@components/services/tooltip';
+/* Import ServicesTooltip from '@components/services/tooltip';
 
 import { toggleTooltip } from '@state/actions'; */
 
@@ -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)(
+const ServicesTopologyWithData = compose(ServicesGql)(ServicesTopology);
-  ServicesTopology
-);
 
 export default ServicesTopologyWithData;

packages/cp-frontend/src/graphql/Portal.gql

@@ -1,6 +1,8 @@
 query Portal {
   portal {
-    username
+    user {
+      firstName
+    }
     datacenter {
       uuid
       region

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 { Header, Breadcrumb, Menu } from '@containers/navigation';
-
-import { Breadcrumb, Menu } from '@containers/navigation';
 
 import { DeploymentGroupList } from '@containers/deployment-groups';
 import {

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": [
     {

packages/cp-gql-schema/schema.gql

@@ -1,12 +1,21 @@
+
   scalar Date
   scalar Object
 
   type Portal {
-  username: String!
+    user: User!
-  datacenter: Datacenter! # we can infer dockerhost from this
+    datacenter: Datacenter!
     deploymentGroups: [DeploymentGroup]!
   }
 
+  type User {
+    uuid: ID!
+    firstName: String!
+    lastName: String!
+    email: String!
+    login: String!
+  }
+
   type DeploymentGroup {
     uuid: ID!
     name: String!
@@ -30,20 +39,19 @@ enum ConvergenceActionType {
    }
 
   type ConvergenceAction {
-  uuid: ID!
+    uuid: String!
     type: ConvergenceActionType!
     service: String! # service name
     machines: [String]! # instance machine ids
   }
 
   type StateConvergencePlan {
-  uuid: ID!
+    uuid: String!
     running: Boolean!
     actions: [ConvergenceAction]!
   }
 
   type Version {
-  uuid: ID!
     created: Date! # Either Int or define scalar
     manifest: Manifest!
     scale: [ServiceScale]!
@@ -61,7 +69,7 @@ enum ManifestFormat {
   }
 
   type Manifest {
-  uuid: ID!
+    uuid: String!
     created: Date!
     type: ManifestType!
     format: ManifestFormat!
@@ -71,7 +79,7 @@ type Manifest {
 
   # immutable
   type Service {
-  uuid: ID! # unique id for db row
+    uuid: String! # unique id for db row
     hash: String! # unique id for version of service
     name: String! # human readable name
     slug:  String!
@@ -107,8 +115,7 @@ enum InstanceStatus {
   }
 
   type Instance {
-  uuid: ID!
+    uuid: String!
-  slug: String!
     name: String!
     machineId: String!
     status: InstanceStatus!
@@ -133,7 +140,7 @@ type CurrentMetric {
   }
 
   type MetricType {
-  uuid: ID!
+    uuid: String!
     name: String!
     id: String!
   }
@@ -143,10 +150,28 @@ type MetricData {
     value: Float!
   }
 
+  # Need to review queries
+  type Query {
+    portal: Portal
+    deploymentGroups: [DeploymentGroup]
+    deploymentGroup(uuid: String, slug: String): DeploymentGroup
+    services(deploymentGroupUuid: String, deploymentGroupSlug: String): [Service]
+    service(uuid: String, slug: String): Service
+    instances(serviceUuid: String, serviceSlug: String): [Instance]
+    instance(uuid: String, machineId: String): Instance
+    metricTypes: [MetricType]
+    metricData(instanceUuid: String!, metricType: String!, from: Date!, to: Date!): [InstanceMetric]!
+    package: Package
+    datacenters: [Datacenter]
+    # tmp test
+    instanceMetric: InstanceMetric!
+  }
+
   # we probably wont use some of these queries or arguments
   # but this way we expose the entire db through gql
   type Query {
     portal: Portal
+    user: User
     deploymentGroups(name: String, slug: String): [DeploymentGroup]
     deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup
     serviceScales(serviceName: String, versionUuid: ID): [ServiceScale]
@@ -171,13 +196,18 @@ type Query {
   type Mutation {
     createDeploymentGroup(name: String!) : DeploymentGroup
     updateDeploymentGroup(uuid: ID!, name: String!) : DeploymentGroup
+
     provisionManifest(deploymentGroupUuid: ID!, type: ManifestType!, format: ManifestFormat!, raw: String!) : Version
     scale(service: ID!, replicas: Int!) : Version
+
     stopServices(uuids: [ID]!) : [Service]
     startServices(uuids: [ID]!) : [Service]
     restartServices(uuids: [ID]!) : [Service]
     deleteServices(uuids: [ID]!) : [Service]
+
     stopInstances(uuids: [ID]!) : [Instance]
     startInstances(uuids: [ID]!) : [Instance]
     restartInstances(uuids: [ID]!) : [Instance]
+
+    # reprovision() ???
   }