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

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,12 +9,12 @@ 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;

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 { Breadcrumb, Menu } from '@containers/navigation';
+import { Header, 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,77 +1,85 @@
-scalar Date
-scalar Object
 
-type Portal {
-  username: String!
-  datacenter: Datacenter! # we can infer dockerhost from this
+  scalar Date
+  scalar Object
+
+  type Portal {
+    user: User!
+    datacenter: Datacenter!
     deploymentGroups: [DeploymentGroup]!
-}
+  }
 
-type DeploymentGroup {
+  type User {
+    uuid: ID!
+    firstName: String!
+    lastName: String!
+    email: String!
+    login: String!
+  }
+
+  type DeploymentGroup {
     uuid: ID!
     name: String!
     slug:  String!
     services(slug: String): [Service]!
     version: Version!
     history: [Version]!
-}
+  }
 
-type ServiceScale {
+  type ServiceScale {
     uuid: ID!
     serviceName: String!
     replicas: Int!
-}
+  }
 
-enum ConvergenceActionType {
+  enum ConvergenceActionType {
      NOOP
      CREATE
      RECREATE
      START
-}
+   }
 
-type ConvergenceAction {
-  uuid: ID!
+  type ConvergenceAction {
+    uuid: String!
     type: ConvergenceActionType!
     service: String! # service name
     machines: [String]! # instance machine ids
-}
+  }
 
-type StateConvergencePlan {
-  uuid: ID!
+  type StateConvergencePlan {
+    uuid: String!
     running: Boolean!
     actions: [ConvergenceAction]!
-}
+  }
 
-type Version {
-  uuid: ID!
+  type Version {
     created: Date! # Either Int or define scalar
     manifest: Manifest!
     scale: [ServiceScale]!
     plan: StateConvergencePlan
-}
+  }
 
-enum ManifestType {
+  enum ManifestType {
     COMPOSE
     MARIPOSA
-}
+  }
 
-enum ManifestFormat {
+  enum ManifestFormat {
     JSON
     YAML
-}
+  }
 
-type Manifest {
-  uuid: ID!
+  type Manifest {
+    uuid: String!
     created: Date!
     type: ManifestType!
     format: ManifestFormat!
     raw: String!
     obj: Object!
-}
+  }
 
-# immutable
-type Service {
-  uuid: ID! # unique id for db row
+  # immutable
+  type Service {
+    uuid: String! # unique id for db row
     hash: String! # unique id for version of service
     name: String! # human readable name
     slug:  String!
@@ -81,10 +89,10 @@ type Service {
     connections: [String!] # list of serviceUuids
     parent: ID # parent service uuid
     package: Package! # we don't have this in current mock data
-}
+  }
 
-# for metrics max / min (I guess)
-type Package {
+  # for metrics max / min (I guess)
+  type Package {
     uuid: ID!
     name: String!
     type: String!
@@ -95,58 +103,75 @@ type Package {
     vcpus: Int!
     version: String!
     group: String!
-}
+  }
 
-enum InstanceStatus {
+  enum InstanceStatus {
     CREATED
     RESTARTING
     RUNNING
     PAUSED
     EXITED
     DELETED
-}
+  }
 
-type Instance {
-  uuid: ID!
-  slug: String!
+  type Instance {
+    uuid: String!
     name: String!
     machineId: String!
     status: InstanceStatus!
     # metrics: [InstanceMetric]!
-}
+  }
 
-type Datacenter {
+  type Datacenter {
     uuid: String!
     # name: String! # Do we have 'official' human readable names?
     region: String!
-}
+  }
 
-type InstanceMetric {
+  type InstanceMetric {
     type: MetricType!
     data: [MetricData]!
-}
+  }
 
-type CurrentMetric {
+  type CurrentMetric {
     name: String!
     value: Float!
     measurement: String!
-}
+  }
 
-type MetricType {
-  uuid: ID!
+  type MetricType {
+    uuid: String!
     name: String!
     id: String!
-}
+  }
 
-type MetricData {
+  type MetricData {
     timestamp: Int!
     value: Float!
-}
+  }
 
-# we probably wont use some of these queries or arguments
-# but this way we expose the entire db through gql
-type Query {
+  # 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]
@@ -166,18 +191,23 @@ type Query {
     instances(name: String!, machineId: ID, status: InstanceStatus, serviceUuid: ID, serviceSlug: String, deploymentGroupUuid: ID, deploymentGroupSlug: String): [Instance]
     instance(uuid: ID!): Instance
     datacenter(uuid: ID, region: String): Datacenter
-}
+  }
 
-type Mutation {
+  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() ???
+  }