diff --git a/Readme.md b/Readme.md index aa3e640..66ac45b 100644 --- a/Readme.md +++ b/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/) =) diff --git a/client/containers/clusters/index.js b/client/containers/clusters/index.js index cecc8a6..66b1652 100644 --- a/client/containers/clusters/index.js +++ b/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 @@ -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; + }); } /** diff --git a/client/index.css b/client/index.css index f98792b..5c1423b 100644 --- a/client/index.css +++ b/client/index.css @@ -5,6 +5,7 @@ .App { width: 1200px; margin: 0 auto; + padding: 0 20px; font: 20px Freight Sans,Verdana,Geneva,sans-serif; } diff --git a/package.json b/package.json index 02a7912..5db7e33 100644 --- a/package.json +++ b/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",