Duplicate service name across clusters bugfix

Readme.md

@@ -52,13 +52,13 @@ Then you should be off to the races.
 
 To develop, you'll first need to install [node][node]. Then, you can run the server and client builders, both of which will watch for changes and hot-reload.
 
-In one terminal window (which has your AWS credentials exported), run the following:
+Run the server and client (with has your AWS credentials exported) with the following:
 
-    $ make server
+    $ npm run dev
 
-In another, do:
+If you encouter this error: `ConfigError: Missing region in config` you will need to provide a default config environment or set the AWS_REGION environment variable like the following:
 
-    $ make dev-server
+    $ AWS_REGION=us-east-1 npm run dev
 
 
 Now visit [http://localhost:3001/](http://localhost:3001/) =)

client/containers/clusters/index.js

@@ -60,7 +60,7 @@ export default class ClustersContainer extends Component {
     }
 
     const clusterName = this.props.params.clusterName;
-    const cluster = this.getByName('cluster', clusterName);
+    const cluster = this.findCluster(clusterName);
     // TODO: if no matching cluster, show an error
     return cluster && cluster.clusterArn;
   }
@@ -88,9 +88,10 @@ export default class ClustersContainer extends Component {
    */
 
   renderServiceSheet() {
+    const clusterName = this.props.params.clusterName;
     const serviceName = this.props.params.serviceName;
     if (!serviceName) return null;
-    const service = this.getByName('service', serviceName);
+    const service = this.findService(clusterName, serviceName);
     if (!service) return null;
     // TODO: if no matching service is found, show an error
     return <Service service={service} />
@@ -107,22 +108,29 @@ export default class ClustersContainer extends Component {
   }
 
   /**
-   * Get item of `type` by its `name`.
+   * Get cluster by its `name`.
    */
 
-  getByName(type, name) {
-    const items = type === 'service'
-      ? this.state.services
-      : this.state.clusters;
-    const prop = `${type}Name`;
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item[prop] === name) {
-        return item;
-      }
+  findCluster(name) {
+    return this.state.clusters.find((cluster) => {
+      return cluster.clusterName == name;
+    });
+  }
+
+  /**
+   * Get service by its `clusterName` and `serviceName`.
+   */
+
+  findService(clusterName, serviceName) {
+    const cluster = this.findCluster(clusterName);
+    if (!cluster) {
+      return;
     }
 
-    return null;
+    return this.state.services.find((service) => {
+      return service.clusterArn === cluster.clusterArn &&
+        service.serviceName === serviceName;
+    });
   }
 
   /**

client/index.css

@@ -5,6 +5,7 @@
 .App {
   width: 1200px;
   margin: 0 auto;
+  padding: 0 20px;
   font: 20px Freight Sans,Verdana,Geneva,sans-serif;
 }
 

package.json

@@ -8,7 +8,10 @@
     "url": "github.com/segmentio/specs"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "server": "nodemon --harmony --ignore client --ignore build bin/server",
+    "client": "webpack-dev-server -d --hot --inline --port 3001",
+    "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"",
+    "build": "webpack -p"
   },
   "author": "",
   "license": "ISC",
@@ -39,6 +42,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-runtime": "^6.6.1",
     "classname": "0.0.0",
+    "concurrently": "^3.5.0",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",