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,183 +1,213 @@
-scalar Date
-scalar Object
 
-type Portal {
-  username: String!
-  datacenter: Datacenter! # we can infer dockerhost from this
-  deploymentGroups: [DeploymentGroup]!
-}
+  scalar Date
+  scalar Object
 
-type DeploymentGroup {
-  uuid: ID!
-  name: String!
-  slug:  String!
-  services(slug: String): [Service]!
-  version: Version!
-  history: [Version]!
-}
+  type Portal {
+    user: User!
+    datacenter: Datacenter!
+    deploymentGroups: [DeploymentGroup]!
+  }
 
-type ServiceScale {
-  uuid: ID!
-  serviceName: String!
-  replicas: Int!
-}
+  type User {
+    uuid: ID!
+    firstName: String!
+    lastName: String!
+    email: String!
+    login: String!
+  }
 
-enum ConvergenceActionType {
-  NOOP
-  CREATE
-  RECREATE
-  START
-}
+  type DeploymentGroup {
+    uuid: ID!
+    name: String!
+    slug:  String!
+    services(slug: String): [Service]!
+    version: Version!
+    history: [Version]!
+  }
 
-type ConvergenceAction {
-  uuid: ID!
-  type: ConvergenceActionType!
-  service: String! # service name
-  machines: [String]! # instance machine ids
-}
+  type ServiceScale {
+    uuid: ID!
+    serviceName: String!
+    replicas: Int!
+  }
 
-type StateConvergencePlan {
-  uuid: ID!
-  running: Boolean!
-  actions: [ConvergenceAction]!
-}
+  enum ConvergenceActionType {
+     NOOP
+     CREATE
+     RECREATE
+     START
+   }
 
-type Version {
-  uuid: ID!
-  created: Date! # Either Int or define scalar
-  manifest: Manifest!
-  scale: [ServiceScale]!
-  plan: StateConvergencePlan
-}
+  type ConvergenceAction {
+    uuid: String!
+    type: ConvergenceActionType!
+    service: String! # service name
+    machines: [String]! # instance machine ids
+  }
 
-enum ManifestType {
-  COMPOSE
-  MARIPOSA
-}
+  type StateConvergencePlan {
+    uuid: String!
+    running: Boolean!
+    actions: [ConvergenceAction]!
+  }
 
-enum ManifestFormat {
-  JSON
-  YAML
-}
+  type Version {
+    created: Date! # Either Int or define scalar
+    manifest: Manifest!
+    scale: [ServiceScale]!
+    plan: StateConvergencePlan
+  }
 
-type Manifest {
-  uuid: ID!
-  created: Date!
-  type: ManifestType!
-  format: ManifestFormat!
-  raw: String!
-  obj: Object!
-}
+  enum ManifestType {
+    COMPOSE
+    MARIPOSA
+  }
 
-# immutable
-type Service {
-  uuid: ID! # unique id for db row
-  hash: String! # unique id for version of service
-  name: String! # human readable name
-  slug:  String!
-  instances: [Instance]!
-  # metrics: [MetricType]!
-  currentMetrics: [CurrentMetric]!
-  connections: [String!] # list of serviceUuids
-  parent: ID # parent service uuid
-  package: Package! # we don't have this in current mock data
-}
+  enum ManifestFormat {
+    JSON
+    YAML
+  }
 
-# for metrics max / min (I guess)
-type Package {
-  uuid: ID!
-  name: String!
-  type: String!
-  memory: Float!
-  disk: Float!
-  swap: Float!
-  lwps: Int!
-  vcpus: Int!
-  version: String!
-  group: String!
-}
+  type Manifest {
+    uuid: String!
+    created: Date!
+    type: ManifestType!
+    format: ManifestFormat!
+    raw: String!
+    obj: Object!
+  }
 
-enum InstanceStatus {
-  CREATED
-  RESTARTING
-  RUNNING
-  PAUSED
-  EXITED
-  DELETED
-}
+  # 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!
+    instances: [Instance]!
+    # metrics: [MetricType]!
+    currentMetrics: [CurrentMetric]!
+    connections: [String!] # list of serviceUuids
+    parent: ID # parent service uuid
+    package: Package! # we don't have this in current mock data
+  }
 
-type Instance {
-  uuid: ID!
-  slug: String!
-  name: String!
-  machineId: String!
-  status: InstanceStatus!
-  # metrics: [InstanceMetric]!
-}
+  # for metrics max / min (I guess)
+  type Package {
+    uuid: ID!
+    name: String!
+    type: String!
+    memory: Float!
+    disk: Float!
+    swap: Float!
+    lwps: Int!
+    vcpus: Int!
+    version: String!
+    group: String!
+  }
 
-type Datacenter {
-  uuid: String!
-  # name: String! # Do we have 'official' human readable names?
-  region: String!
-}
+  enum InstanceStatus {
+    CREATED
+    RESTARTING
+    RUNNING
+    PAUSED
+    EXITED
+    DELETED
+  }
 
-type InstanceMetric {
-  type: MetricType!
-  data: [MetricData]!
-}
+  type Instance {
+    uuid: String!
+    name: String!
+    machineId: String!
+    status: InstanceStatus!
+    # metrics: [InstanceMetric]!
+  }
 
-type CurrentMetric {
-  name: String!
-  value: Float!
-  measurement: String!
-}
+  type Datacenter {
+    uuid: String!
+    # name: String! # Do we have 'official' human readable names?
+    region: String!
+  }
 
-type MetricType {
-  uuid: ID!
-  name: String!
-  id: String!
-}
+  type InstanceMetric {
+    type: MetricType!
+    data: [MetricData]!
+  }
 
-type MetricData {
-  timestamp: Int!
-  value: Float!
-}
+  type CurrentMetric {
+    name: String!
+    value: Float!
+    measurement: String!
+  }
 
-# we probably wont use some of these queries or arguments
-# but this way we expose the entire db through gql
-type Query {
-  portal: Portal
-  deploymentGroups(name: String, slug: String): [DeploymentGroup]
-  deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup
-  serviceScales(serviceName: String, versionUuid: ID): [ServiceScale]
-  serviceScale(uuid: ID!): ServiceScale
-  convergenceActions(type: ConvergenceActionType, service: String, versionUuid: ID): [ConvergenceAction]
-  convergenceAction(uuid: ID!): ConvergenceAction
-  stateConvergencePlans(running: Boolean, versionUuid: ID): [StateConvergencePlan]
-  stateConvergencePlan(uuid: ID!): StateConvergencePlan
-  versions(manifestUuid: ID, deploymentGroupUuid: ID): [Version]
-  version(uuid: ID, manifestUuid: ID): Version
-  manifests(type: String, deploymentGroupUuid: ID): [Manifest]
-  manifest(uuid: ID!): Manifest
-  services(name: String, slug: String, parentUuid: ID, deploymentGroupUuid: ID, deploymentGroupSlug: String): [Service]
-  service(uuid: ID, hash: ID): Service
-  packages(name: String, type: String, memory: Int, disk: Int, swap: Int, lwps: Int, vcpus: Int, version: String, group: String): [Package]
-  package(uuid: ID!): Package
-  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 MetricType {
+    uuid: String!
+    name: String!
+    id: String!
+  }
 
-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]
-}
+  type MetricData {
+    timestamp: Int!
+    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]
+    serviceScale(uuid: ID!): ServiceScale
+    convergenceActions(type: ConvergenceActionType, service: String, versionUuid: ID): [ConvergenceAction]
+    convergenceAction(uuid: ID!): ConvergenceAction
+    stateConvergencePlans(running: Boolean, versionUuid: ID): [StateConvergencePlan]
+    stateConvergencePlan(uuid: ID!): StateConvergencePlan
+    versions(manifestUuid: ID, deploymentGroupUuid: ID): [Version]
+    version(uuid: ID, manifestUuid: ID): Version
+    manifests(type: String, deploymentGroupUuid: ID): [Manifest]
+    manifest(uuid: ID!): Manifest
+    services(name: String, slug: String, parentUuid: ID, deploymentGroupUuid: ID, deploymentGroupSlug: String): [Service]
+    service(uuid: ID, hash: ID): Service
+    packages(name: String, type: String, memory: Int, disk: Int, swap: Int, lwps: Int, vcpus: Int, version: String, group: String): [Package]
+    package(uuid: ID!): Package
+    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 {
+    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() ???
+  }