Add ids for uris rename and project to deployment group

spikes/graphql/apollo-redux/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "apollo": "^0.2.2",
+    "immutability-helper": "^2.2.0",
     "react": "^15.5.4",
     "react-apollo": "^1.2.0",
     "react-dom": "^15.5.4",

spikes/graphql/apollo-redux/src/containers/deployment-groups/index.js

@@ -0,0 +1 @@
+export { default as DeploymentGroupList } from './list';

spikes/graphql/apollo-redux/src/containers/deployment-groups/list.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { gql, graphql } from 'react-apollo';
+import { Link } from 'react-router-dom';
+import update from 'immutability-helper';
+
+class DeploymentGroupList extends Component {
+
+  render() {
+
+    const {
+      location,
+      deploymentGroups,
+      loading,
+      error
+    } = this.props;
+
+    const deploymentGroupList =
+      loading ? <p>Loading...</p> :
+      error ? <p>Error!!!</p> :
+      deploymentGroups.map((deploymentGroup, index) => {
+        return (
+          <p key={index}>
+            <Link
+              to={`${location.pathname}/${deploymentGroup.id}/services`}
+            >
+              {deploymentGroup.name}
+            </Link>
+          </p>)});
+
+    return (
+      <div>
+        <div>
+          <h2>Deployment Group List</h2>
+        </div>
+        { deploymentGroupList }
+      </div>
+    );
+  }
+}
+
+const deploymentGroups = gql`
+  query {
+    deploymentGroups {
+      uuid
+      name
+      id
+    }
+  }
+`;
+
+const DeploymentGroupListWithData = graphql(deploymentGroups, {
+  props: ({ data: { deploymentGroups, loading, error }}) => ({
+    deploymentGroups,
+    loading,
+    error
+  })
+})(DeploymentGroupList);
+
+export default DeploymentGroupListWithData;

spikes/graphql/apollo-redux/src/containers/instances/list.js

@@ -5,8 +5,6 @@ class InstanceList extends Component {
 
   render() {
 
-    console.log('this.props = ', this.props);
-
     const {
       instances,
       loading,
@@ -31,8 +29,8 @@ class InstanceList extends Component {
 }
 
 const instances = gql`
-  query Instances($deploymentGroupUuid: String!){
+  query Instances($deploymentGroupId: String!){
-    deploymentGroup(uuid: $deploymentGroupUuid) {
+    deploymentGroup(id: $deploymentGroupId) {
       services {
         instances {
           uuid
@@ -47,7 +45,7 @@ const InstanceListWithData = graphql(instances, {
   options(props) {
     return {
       variables: {
-        deploymentGroupUuid: props.match.params.project
+        deploymentGroupId: props.match.params.deploymentGroup
       }
     };
   },

spikes/graphql/apollo-redux/src/containers/projects/index.js

@@ -1 +0,0 @@
-export { default as ProjectList } from './list';

spikes/graphql/apollo-redux/src/containers/projects/list.js

@@ -1,56 +0,0 @@
-import React, { Component } from 'react';
-import { gql, graphql } from 'react-apollo';
-import { Link } from 'react-router-dom';
-
-class ProjectList extends Component {
-
-  render() {
-
-    const {
-      location,
-      deploymentGroups,
-      loading,
-      error
-    } = this.props;
-
-    const projectList =
-      loading ? <p>Loading...</p> :
-      error ? <p>Error!!!</p> :
-      deploymentGroups.map((deploymentGroup, index) =>
-        <p key={index}>
-          <Link
-            to={`${location.pathname}/${deploymentGroup.uuid}/services`}
-          >
-            {deploymentGroup.name}
-          </Link>
-        </p>);
-
-    return (
-      <div>
-        <div>
-          <h2>Project List</h2>
-        </div>
-        { projectList }
-      </div>
-    );
-  }
-}
-
-const projects = gql`
-  query {
-    deploymentGroups {
-      uuid
-      name
-    }
-  }
-`;
-
-const ProjectListWithData = graphql(projects, {
-  props: ({ data: deploymentGroups, loading, error }) => ({
-    deploymentGroups,
-    loading,
-    error
-  })
-})(ProjectList)
-
-export default ProjectListWithData;

spikes/graphql/apollo-redux/src/containers/services/list.js

@@ -19,7 +19,7 @@ class ServiceList extends Component {
       services.map((service, index) =>
         <p key={index}>
           <Link
-            to={`${location.pathname}/${service.uuid}/instances`}
+            to={`${location.pathname}/${service.id}/instances`}
           >
             {service.name}
           </Link>
@@ -37,11 +37,12 @@ class ServiceList extends Component {
 }
 
 const services = gql`
-  query Services($deploymentGroupUuid: String!){
+  query Services($deploymentGroupId: String!){
-    deploymentGroup(uuid: $deploymentGroupUuid) {
+    deploymentGroup(id: $deploymentGroupId) {
       services {
         uuid
         name
+        id
       }
     }
   }
@@ -51,15 +52,15 @@ const ServiceListWithData = graphql(services, {
   options(props) {
     return {
       variables: {
-        deploymentGroupUuid: props.match.params.project
+        deploymentGroupId: props.match.params.deploymentGroup
       }
-    };
+    }
   },
-  props: ({ data: { deploymentGroup, loading, error } }) => ({
+  props: ({ data: { deploymentGroup, loading, error }}) => ({
     services: deploymentGroup ? deploymentGroup.services : null,
     loading,
     error
   })
-})(ServiceList)
+})(ServiceList);
 
 export default ServiceListWithData;

spikes/graphql/apollo-redux/src/containers/services/list.js-bak

@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import { gql, graphql } from 'react-apollo';
-
-class ServiceList extends Component {
-
-  render() {
-
-    const {
-      data,
-      location
-    } = this.props;
-
-    const {
-      services,
-      loading,
-      error
-    } = data;
-
-    const serviceList =
-      loading ? <p>Loading...</p> :
-      error ? <p>Error!!!</p> :
-      services.map((service, index) =>
-        <p key={index}>{service.name}</p> );
-
-    return (
-      <div>
-        <div>
-          <h2>Service List</h2>
-        </div>
-        { serviceList }
-      </div>
-    );
-  }
-}
-
-const services = gql`
-  query Services($deploymentGroupUuid: String!){
-    services(deploymentGroupUuid: $deploymentGroupUuid) {
-      uuid
-      name
-    }
-  }
-`;
-
-const ServiceListWithData = graphql(services, {
-  options(props) {
-    return {
-      variables: {
-        deploymentGroupUuid: props.match.params.project
-      }
-    };
-  },
-  props: ({ data }) => ({
-    data
-  })
-})(ServiceList)
-
-export default ServiceListWithData;

spikes/graphql/apollo-redux/src/routing/routes.js

@@ -7,15 +7,15 @@ import {
 } from 'react-router-dom';
 
 import { Container } from '../components/layout';
-import { ProjectList } from '../containers/projects';
+import { DeploymentGroupList } from '../containers/deployment-groups';
 import { ServiceList } from '../containers/services';
 import { InstanceList } from '../containers/instances';
 
 const rootRedirect = (p) => (
-  <Redirect to='/projects' />
+  <Redirect to='/deployment-groups' />
 );
 
-const projectRedirect = (p) => (
+const deploymentGroupRedirect = (p) => (
   <Redirect to={`${p.location.pathname}/services`} />
 );
 
@@ -24,13 +24,13 @@ const Router = (
     <Container>
 
       <Route path='/' exact component={rootRedirect} />
-      <Route path='/projects' exact component={ProjectList} />
+      <Route path='/deployment-groups' exact component={DeploymentGroupList} />
 
-      <Route path='/projects/:project' exact component={projectRedirect} />
+      <Route path='/deployment-groups/:deploymentGroup' exact component={deploymentGroupRedirect} />
-      <Route path='/projects/:project/services' exact component={ServiceList} />
+      <Route path='/deployment-groups/:deploymentGroup/services' exact component={ServiceList} />
+
+      <Route path='/deployment-groups/:deploymentGroup/services/:service/instances' exact component={InstanceList} />
 
-      <Route path='/projects/:project/services/:service/instances' exact component={InstanceList} />
-      
     </Container>
   </BrowserRouter>
 );

spikes/graphql/apollo-redux/yarn.lock

@@ -2585,6 +2585,12 @@ ignore@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.0.tgz#3812d22cbe9125f2c2b4915755a1b8abd745a001"
 
+immutability-helper@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.2.0.tgz#c4385ad4f68315843efaf0cff3575ee82ffa405f"
+  dependencies:
+    invariant "^2.2.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"

spikes/graphql/graphql-server/package.json

@@ -17,6 +17,7 @@
     "graphql-tools": "^0.11.0",
     "hapi": "^16.1.1",
     "lodash": "^4.17.4",
-    "nodemon": "^1.11.0"
+    "nodemon": "^1.11.0",
+    "param-case": "^2.1.1"
   }
 }

spikes/graphql/graphql-server/src/resolvers.js

@@ -1,4 +1,5 @@
 import { find, filter } from 'lodash';
+import paramCase from 'param-case';
 import data from './mock-data';
 
 const portal = { username: 'juditgreskovits', host: 'dockerhost'};
@@ -16,19 +17,48 @@ const resolveFunctions = {
     deploymentGroups() {
       return deploymentGroups;
     },
-    deploymentGroup(_, { uuid }) {
+    deploymentGroup(_, { uuid, id }) {
-      return find(deploymentGroups, { uuid: uuid });
+      if(uuid) {
+        return find(deploymentGroups, { uuid: uuid });
+      }
+      if(id) {
+        return find(deploymentGroups, { id: id });
+      }
+      return null;
     },
-    services(_, { deploymentGroupUuid=null }) {
+    services(_, { deploymentGroupUuid=null, deploymentGroupId=null }) {
       if(deploymentGroupUuid) {
-        return filter(services, { project: deploymentGroupUuid })
+        return filter(services, { project: deploymentGroupUuid });
+      }
+      if(deploymentGroupId) {
+        const deploymentGroup = find(deploymentGroups, { id: deploymentGroupId });
+        if(deploymentGroup) {
+          return filter(services, { project: deploymentGroup.uuid });
+        }
+        return null;
       }
       return services;
     },
-    service(_, { uuid }) {
+    service(_, { uuid, id }) {
-      return find(services, { uuid: uuid });
+      if(uuid) {
+        return find(services, { uuid: uuid });
+      }
+      if(id) {
+        return find(services, { id: id });
+      }
+      return null;
     },
-    instances() {
+    instances(_, { serviceUuid=null, serviceId=null }) {
+      if(serviceUuid) {
+        return filter(instances, { service: serviceUuid });
+      }
+      if(serviceId) {
+        const service = find(services, { id: serviceId });
+        if(service) {
+          return filter(instances, { service: service.uuid });
+        }
+        return null;
+      }
       return instances;
     },
     metricTypes() {
@@ -41,7 +71,7 @@ const resolveFunctions = {
   DeploymentGroup: {
     services(deploymentGroup) {
       return filter(services, { project: deploymentGroup.uuid })
-    }
+    },
   },
   Service: {
     instances(service) {
@@ -51,7 +81,7 @@ const resolveFunctions = {
       return service.metrics ?
         service.metrics.map((metric) =>
           find(metricTypes, { uuid: metric.type })) : []
-    }
+    },
   },
 };
 

spikes/graphql/graphql-server/src/schema.js

@@ -20,6 +20,7 @@ type Version {
 type DeploymentGroup {
   uuid: String!
   name: String!
+  id: String!
   datacenter: Datacenter!
   services: [Service]!
   state: DeploymentState
@@ -47,6 +48,7 @@ type Service {
   deploymentGoup: String!
   version: Version!
   name: String!
+  id: String!
   instances: [Instance]!
   metrics: [MetricType]!
   package: Package! # we don't have this in current mock data
@@ -100,11 +102,11 @@ type Datacenter {
 type Query {
   portal: Portal
   deploymentGroups: [DeploymentGroup]
-  deploymentGroup(uuid: String!): DeploymentGroup
+  deploymentGroup(uuid: String, id: String): DeploymentGroup
-  services(deploymentGroupUuid: String): [Service]
+  services(deploymentGroupUuid: String, deploymentGroupId: String): [Service]
-  service(uuid: String!): Service
+  service(uuid: String, id: String): Service
-  instances: [Instance]
+  instances(serviceUuid: String, serviceId: String): [Instance]
-  instance(uuid: String!): Instance
+  instance(uuid: String, id: String): Instance
   metricTypes: [MetricType]
   package: Package
   datacenters: [Datacenter]

spikes/graphql/graphql-server/yarn.lock

@@ -1381,6 +1381,10 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^3.0.0"
 
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+
 lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
@@ -1465,6 +1469,12 @@ nigel@2.x.x:
     hoek "4.x.x"
     vise "2.x.x"
 
+no-case@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
+  dependencies:
+    lower-case "^1.1.1"
+
 node-pre-gyp@^0.6.29:
   version "0.6.34"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
@@ -1587,6 +1597,12 @@ package-json@^1.0.0:
     got "^3.2.0"
     registry-url "^3.0.0"
 
+param-case@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  dependencies:
+    no-case "^2.2.0"
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"