├── .babelrc ├── .dockerignore ├── .gitignore ├── Dockerfile ├── Makefile ├── Readme.md ├── bin └── server ├── circle.yml ├── client ├── components │ ├── cluster-list │ │ ├── index.css │ │ └── index.js │ ├── error-message │ │ ├── index.css │ │ └── index.js │ ├── page │ │ ├── index.css │ │ └── index.js │ ├── search │ │ ├── icons.svg │ │ ├── index.css │ │ └── index.js │ ├── service-event-list │ │ ├── index.css │ │ └── index.js │ ├── service-list │ │ ├── index.css │ │ └── index.js │ ├── service-stats │ │ ├── index.css │ │ └── index.js │ ├── service-task-def │ │ ├── index.css │ │ └── index.js │ ├── service-tasks │ │ ├── index.css │ │ └── index.js │ ├── sheet │ │ ├── index.css │ │ └── index.js │ └── sidebar │ │ ├── index.css │ │ └── index.js ├── containers │ ├── clusters │ │ └── index.js │ └── service │ │ ├── index.css │ │ └── index.js ├── index.css ├── index.html └── index.js ├── package-lock.json ├── package.json ├── server ├── app.js ├── cache.js └── ecs.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "es2015", "stage-0", "react" ], 3 | "plugins": [ "transform-runtime" ] 4 | } 5 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .envrc 3 | build 4 | #ignore git history to prevent unwanted secrets and bloat 5 | .git 6 | 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .envrc 3 | build -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12.18-alpine3.11 as build 2 | WORKDIR /src 3 | COPY package* ./ 4 | RUN apk add --update make 5 | RUN npm install 6 | COPY . . 7 | RUN make build 8 | FROM node:12.18-alpine3.11 9 | 10 | WORKDIR /src 11 | COPY package* ./ 12 | RUN npm install --production 13 | COPY --from=build /src/bin ./bin 14 | COPY --from=build /src/build ./build 15 | COPY --from=build /src/server ./server 16 | 17 | VOLUME /src 18 | 19 | EXPOSE 3000 20 | CMD ["node", "--harmony", "/src/bin/server"] 21 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | 2 | .DEFAULT_GOAL := node_modules 3 | 4 | WEBPACK_FLAGS ?= -p 5 | 6 | server: node_modules 7 | node_modules/.bin/nodemon --harmony \ 8 | --ignore client \ 9 | --ignore build \ 10 | bin/server 11 | 12 | dev-server: node_modules 13 | node_modules/.bin/webpack-dev-server -d --hot --inline --port 3001 14 | 15 | build: node_modules 16 | NODE_ENV=production node_modules/.bin/webpack $(WEBPACK_FLAGS) 17 | 18 | node_modules: package.json 19 | npm install 20 | touch $@ 21 | 22 | clean: 23 | rm -rf build 24 | 25 | distclean: clean 26 | rm -rf node_modules 27 | 28 | .PHONY: clean distclean build server dev-server 29 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # ⚠️ Unmaintained ⚠️ 2 | 3 | This repository is unmaintained, but left as a historical relic for any wishing to adapt it. Godspeed! 4 | 5 | # Specs 6 | 7 | Specs is a high level dashboard for viewing your [ECS][ecs] clusters. For a more complete description, [see the blog post][blog]. 8 | 9 | Specs can quickly show you: 10 | 11 | - the services a given cluster is running 12 | - the desired count of a given service 13 | - the tagged docker image running 14 | - the most recent events of a service 15 | 16 | ![](https://assets.contents.io/asset_y6nF1vpx.png) 17 | 18 | We built Specs to work around the sluggishness of the internal AWS dashboard. It allows for quick searching, and doesn't require paging through results. And if you run it internally, your teammates won't need any separate IAM users or permissions. 19 | 20 | ## Docker 21 | 22 | It's easiest to run Specs with docker. Assuming you have your AWS credentials exported, simply run the container like this: 23 | 24 | $ docker run \ 25 | -e "AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID" \ 26 | -e "AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY" \ 27 | -e "AWS_REGION=$AWS_REGION" \ 28 | -e "AWS_SESSION_TOKEN=$AWS_SESSION_TOKEN" \ 29 | -p 3000:3000 \ 30 | segment/specs 31 | 32 | ## IAM Permissions 33 | 34 | In order to run Specs, you'll need to create an IAM user or role with the following permissions: 35 | 36 | { 37 | "Version": "2012-10-17", 38 | "Statement": [ 39 | { 40 | "Action": [ 41 | "ecs:Describe*", 42 | "ecs:DiscoverPollEndpoint", 43 | "ecs:List*", 44 | "ecs:Poll" 45 | ], 46 | "Effect": "Allow", 47 | "Resource": "*" 48 | } 49 | ] 50 | } 51 | 52 | Then you should be off to the races. 53 | 54 | ## Development 55 | 56 | 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. 57 | 58 | Run the server and client (with has your AWS credentials exported) with the following: 59 | 60 | $ npm run dev 61 | 62 | 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: 63 | 64 | $ AWS_REGION=us-east-1 npm run dev 65 | 66 | 67 | Now visit [http://localhost:3001/](http://localhost:3001/) =) 68 | 69 | [ecs]: https://aws.amazon.com/ecs/ 70 | [node]: https://nodejs.org/en/ 71 | [blog]: https://segment.com/blog/releasing-specs/ 72 | 73 | ## License 74 | 75 | Released under the MIT License 76 | 77 | (The MIT License) 78 | 79 | Copyright (c) 2016 Segment 80 | 81 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 82 | 83 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 84 | 85 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 86 | -------------------------------------------------------------------------------- /bin/server: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | 'use strict' 4 | 5 | let app = require('..'); 6 | 7 | /** 8 | * Run the server. 9 | */ 10 | 11 | let port = process.env.PORT || 3000; 12 | 13 | app.listen(port); 14 | 15 | process.on('SIGINT', function () { 16 | process.exit(); 17 | }); 18 | 19 | process.on('SIGTERM', function() { 20 | process.exit(); 21 | }) 22 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:6 6 | steps: 7 | - checkout 8 | - restore_cache: 9 | key: cache-{{ checksum "package-lock.json" }} 10 | - run: make node_modules 11 | - save_cache: 12 | key: cache-{{ checksum "package-lock.json" }} 13 | paths: 14 | - ./node_modules 15 | 16 | publish: 17 | docker: 18 | - image: circleci/node:6 19 | steps: 20 | - setup_remote_docker 21 | - checkout 22 | - restore_cache: 23 | key: cache-{{ checksum "package-lock.json" }} 24 | - run: 25 | name: Authenticate with AWS and Docker 26 | command: | 27 | sudo apt-get update && sudo apt-get install -y python-dev 28 | curl -O https://bootstrap.pypa.io/get-pip.py && sudo python get-pip.py 29 | sudo pip install awscli==1.11.91 30 | aws ecr get-login --no-include-email --region $AWS_REGION | sh 31 | docker login -u $DOCKER_USER -p $DOCKER_PASS 32 | 33 | - run: 34 | name: Build and Publish Docker Images 35 | command: | 36 | docker build -t segment/specs . 37 | docker push segment/specs:latest 38 | docker tag segment/specs:latest $AWS_ACCOUNT_ID.dkr.ecr.$AWS_REGION.amazonaws.com/specs:latest 39 | docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_REGION.amazonaws.com/specs:latest 40 | 41 | workflows: 42 | version: 2 43 | build-and-publish: 44 | jobs: 45 | - build 46 | - publish: 47 | filters: 48 | branches: 49 | only: 50 | - master 51 | -------------------------------------------------------------------------------- /client/components/cluster-list/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ClusterList {} 3 | 4 | .ClusterList h2 { 5 | font-size: 18px; 6 | color: #54585e; 7 | text-transform: lowercase; 8 | line-height: 20px; 9 | font-family: Freight Sans Small Caps,Verdana,Geneva,sans-serif; 10 | margin-bottom: 10px; 11 | font-weight: 400; 12 | display: block; 13 | } 14 | 15 | .ClusterList ul { 16 | list-style: none; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .ClusterListItem { 22 | align-items: center; 23 | line-height: 29px; 24 | margin-bottom: 5px; 25 | position: relative; 26 | transition: opacity .1s ease-in-out; 27 | } 28 | 29 | .ClusterListItem--is-active { 30 | background-color: #fff; 31 | box-shadow: 0 1px 0 rgba(0,0,0,.05); 32 | } 33 | 34 | .ClusterListItem a { 35 | display: block; 36 | padding-left: 10px; 37 | padding-right: 10px; 38 | border-radius: 4px; 39 | border: 1px solid transparent; 40 | font-family: Freight Sans Small Caps,Verdana,Geneva,sans-serif; 41 | text-transform: lowercase; 42 | font-size: 16px; 43 | font-weight: 400; 44 | color: #707479; 45 | height: 100%; 46 | } 47 | 48 | .ClusterListItem--is-active a { 49 | color: #3cc76a; 50 | border-color: #3cc76a; 51 | } 52 | 53 | .ClusterListItem a:hover { 54 | background-color: #fff; 55 | text-decoration: none; 56 | color: #3cc76a; 57 | border-color: rgba(183,189,196,.5); 58 | } 59 | -------------------------------------------------------------------------------- /client/components/cluster-list/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import classname from 'classname'; 4 | import { Link } from 'react-router'; 5 | import styles from './index.css'; 6 | 7 | export default class ClusterList extends Component { 8 | render() { 9 | return ( 10 |
11 |

clusters

12 | 16 |
17 | ); 18 | } 19 | 20 | renderItem(item) { 21 | const isActive = item 22 | ? item.clusterArn === this.props.activeClusterArn 23 | : !this.props.activeClusterArn; 24 | const classes = classname({ 25 | [styles.ClusterListItem]: true, 26 | [styles['ClusterListItem--is-active']]: isActive, 27 | }); 28 | return ( 29 |
  • 30 | 31 | {item ? item.clusterName : 'all'} 32 | 33 |
    • 34 | ); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /client/components/error-message/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ErrorMessage h2, h3 { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /client/components/error-message/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import styles from './index.css'; 4 | 5 | export default class ErrorMessage extends Component { 6 | render() { 7 | return ( 8 |
    9 |

    Oh no! An error occurred in that request.

    10 |

    {this.props.error}

    11 |
    12 | ); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /client/components/page/index.css: -------------------------------------------------------------------------------- 1 | 2 | .Page {} 3 | .Page h1 { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .PageContent { 9 | clear: both; 10 | } 11 | -------------------------------------------------------------------------------- /client/components/page/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import styles from './index.css'; 4 | 5 | export default class Page extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    specs

    11 |

    peer into your ecs clusters

    12 |
    13 |
    14 | {this.props.children} 15 |
    16 |
    17 | ) 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /client/components/search/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Search Icons 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /client/components/search/index.css: -------------------------------------------------------------------------------- 1 | 2 | .Search { 3 | position: relative; 4 | } 5 | 6 | .Search::before { 7 | content: ''; 8 | display: block; 9 | width: 20px; 10 | height: 20px; 11 | margin-left: 10px; 12 | background-image: url('./icons.svg'); 13 | background-repeat: no-repeat; 14 | position: absolute; 15 | top: 50%; 16 | transform: translateY(-50%); 17 | } 18 | 19 | .Search input { 20 | width: 200px; 21 | border: 1px solid #e3e4e6; 22 | height: 40px; 23 | border-radius: 4px; 24 | padding-left: 35px; 25 | font-size: 14px; 26 | color: #736448; 27 | background-color: #fff; 28 | background-repeat: no-repeat; 29 | outline: none; 30 | box-sizing: border-box; 31 | } 32 | 33 | .Search input::placeholder { 34 | color: var(--color-fog); 35 | font-size: 18px; 36 | font-weight: 300; 37 | text-transform: lowercase; 38 | font-family: var(--font-family-caps); 39 | } 40 | 41 | .Search input:focus { 42 | border-color: #5CCC5C; 43 | box-shadow: 0px 0px 4px 0px rgba(92,204,92,0.50); 44 | } 45 | -------------------------------------------------------------------------------- /client/components/search/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import styles from './index.css'; 4 | 5 | export default class Search extends Component { 6 | render() { 7 | return ( 8 |
    9 | 15 |
    16 | ); 17 | } 18 | 19 | handleChange(e) { 20 | this.props.setSearchTerm(e.target.value); 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /client/components/service-event-list/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ServiceEventList ul { 3 | margin: 0; 4 | } 5 | .ServiceEventListItem {} 6 | 7 | .ServiceEventListItem-message { 8 | color: #54585E; 9 | font-size: 16px; 10 | } 11 | 12 | .ServiceEventListItem-timestamp { 13 | padding-left: 10px; 14 | font-size: 16px; 15 | color: #b7bdc4; 16 | } 17 | -------------------------------------------------------------------------------- /client/components/service-event-list/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import uniq from 'uniq'; 4 | import moment from 'moment'; 5 | import styles from './index.css'; 6 | 7 | export default class ServiceEventList extends Component { 8 | render() { 9 | const events = this.filterEvents(); 10 | return ( 11 |
    12 | 15 |
    16 | ); 17 | } 18 | 19 | /** 20 | * Filter events. 21 | */ 22 | 23 | filterEvents() { 24 | const unique = uniq(this.props.events, function(a, b) { 25 | return a.message === b.message 26 | ? 0 27 | : 1; 28 | }, true); 29 | return unique; 30 | } 31 | 32 | /** 33 | * Render an event. 34 | */ 35 | 36 | renderEvent({ id, createdAt, message }) { 37 | const timestamp = moment(createdAt).fromNow(); 38 | return ( 39 |
  • 40 | 41 | {message} 42 | 43 | 44 | ({timestamp}) 45 | 46 |
    • 47 | ); 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /client/components/service-list/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ServiceList { 3 | list-style: none; 4 | float: right; 5 | margin: -5px; 6 | width: 950px; 7 | padding-bottom: 100px; 8 | } 9 | 10 | .ServiceListItem { 11 | display: inline-block; 12 | width: 216px; 13 | height: 193px; 14 | box-sizing: border-box; 15 | list-style: none; 16 | margin: 5px; 17 | } 18 | 19 | 20 | .ServiceListItem a { 21 | height: 100%; 22 | width: 100%; 23 | display: block; 24 | padding-top: 25px; 25 | padding-bottom: 25px; 26 | padding-left: 5px; 27 | padding-right: 5px; 28 | text-align: center; 29 | position: relative; 30 | border: 1px solid #e3e4e6; 31 | background: #fff; 32 | border-radius: 4px; 33 | font-family: Freight Sans,Verdana,Geneva,sans-serif; 34 | box-shadow: 0 1px 0 rgba(0,0,0,.05); 35 | box-sizing: border-box; 36 | transform: translateZ(0); 37 | } 38 | 39 | .ServiceListItem a:focus, 40 | .ServiceListItem a:hover { 41 | border-color: #3cc76a; 42 | } 43 | 44 | .ServiceListItem h3 { 45 | margin: 0; 46 | padding: 0; 47 | font-size: 24px; 48 | margin-bottom: 15px; 49 | overflow: hidden; 50 | white-space: nowrap; 51 | text-overflow: ellipsis; 52 | } 53 | 54 | 55 | .ServiceListItem p { 56 | margin: 0; 57 | padding: 0; 58 | text-transform: capitalize; 59 | display: inline-block; 60 | color: #707479; 61 | letter-spacing: 1; 62 | font-weight: 400; 63 | font-size: 14px; 64 | } 65 | -------------------------------------------------------------------------------- /client/components/service-list/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import classname from 'classname'; 4 | import moment from 'moment'; 5 | import { Link } from 'react-router'; 6 | import ServiceStats from '../service-stats'; 7 | import styles from './index.css'; 8 | 9 | export default class ServiceList extends Component { 10 | render() { 11 | const services = this.matchingServices(); 12 | return ( 13 | 16 | ); 17 | } 18 | 19 | renderServiceItem(service, n) { 20 | const { runningCount, desiredCount } = service; 21 | const { name, image } = service.task.containerDefinitions[0]; 22 | const updated = moment(service.deployments[0].updatedAt).fromNow(); 23 | // HACK: pull the cluster name from its arn 24 | const clusterName = service.clusterArn.split('cluster/')[1]; 25 | return ( 26 |
  • 27 | 28 |

    {service.serviceName}

    29 | 30 | 31 |
    • 32 | ); 33 | } 34 | 35 | matchingServices() { 36 | const services = this.props.services; 37 | const activeClusterArn = this.props.activeClusterArn; 38 | const searchTerm = (this.props.searchTerm || '').toLowerCase(); 39 | 40 | // first, all matches on the cluster 41 | const matchesCluster = services.filter(function(service) { 42 | if (!activeClusterArn) return true; 43 | return service.clusterArn === activeClusterArn; 44 | }); 45 | 46 | // then, attempt to match a search filter 47 | const matchesSearch = matchesCluster.filter(function(service) { 48 | if (!searchTerm) return true; 49 | return service.serviceName.indexOf(searchTerm) !== -1; 50 | }); 51 | 52 | return matchesSearch; 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /client/components/service-stats/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ServiceStats {} 3 | 4 | .ServiceStats table { 5 | font-size: 16px; 6 | color: #54585E; 7 | width: 100%; 8 | table-layout: fixed; 9 | } 10 | 11 | .ServiceStats th { 12 | text-align: right; 13 | font-weight: 500; 14 | width: 38%; 15 | } 16 | 17 | .ServiceStats td { 18 | text-align: left; 19 | padding-left: 7px; 20 | overflow: hidden; 21 | white-space: nowrap; 22 | text-overflow: ellipsis; 23 | } 24 | 25 | 26 | .ServiceStats--left-aligned th { 27 | text-align: left; 28 | font-weight: 500; 29 | width: 60px; 30 | } 31 | -------------------------------------------------------------------------------- /client/components/service-stats/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import moment from 'moment'; 4 | import classname from 'classname'; 5 | import styles from './index.css'; 6 | 7 | export default class ServiceStats extends Component { 8 | render() { 9 | const { service } = this.props; 10 | const { runningCount, desiredCount } = service; 11 | const { image } = service.task.containerDefinitions[0]; 12 | const date = moment(service.deployments[0].updatedAt) 13 | const updatedAgo = date.fromNow(); 14 | const updatedIso = date.toISOString(); 15 | const classes = classname({ 16 | [styles.ServiceStats]: true, 17 | [styles['ServiceStats--left-aligned']]: this.props.left 18 | }); 19 | return ( 20 |
    21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 38 | 39 | 40 |
    Image{image}
    Running 30 | {runningCount} out of {desiredCount} 31 |
    Updated 36 | 37 |
    41 |
    42 | ); 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /client/components/service-task-def/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ServiceTaskDef { 3 | color: #54585E; 4 | font-size: 16px; 5 | } 6 | 7 | .ServiceTaskDef table {} 8 | 9 | .ServiceTaskDef th { 10 | text-align: right; 11 | padding-right: 5px; 12 | vertical-align: top; 13 | } 14 | 15 | .ServiceTaskDef td {} 16 | 17 | .ServiceTaskDef ul { 18 | list-style: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | .ServiceTaskDef li {} 24 | 25 | /* hack to account for huge amounts of env vars (example: /default/app) */ 26 | .ServiceTaskDefEnvVars { 27 | max-height: 500px; 28 | width: 380px; 29 | overflow: auto; 30 | } 31 | 32 | .ServiceTaskDefEnvVars li { 33 | white-space: nowrap; 34 | } 35 | -------------------------------------------------------------------------------- /client/components/service-task-def/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import moment from 'moment'; 4 | import classname from 'classname'; 5 | import styles from './index.css'; 6 | 7 | const awsRegion = process.env.AWS_REGION 8 | 9 | export default class ServiceTaskDef extends Component { 10 | render() { 11 | const { family, revision, definition } = this.props; 12 | const command = definition.command ? definition.command.join(' ') : null; 13 | return ( 14 |
    15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 48 | 49 | 50 |
    task def 20 | 21 | {family}:{revision} 22 | 23 |
    CPU{definition.cpu}
    memory{definition.memory}
    command 36 | {command} 37 |
    environment 42 |
      43 | {definition.environment.sort((a, b) => a.name > b.name ? 1 : -1).map(({ name, value }) => 44 |
    • {name}={value}
      • 45 | )} 46 |
    47 |
    51 |
    52 | ); 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /client/components/service-tasks/index.css: -------------------------------------------------------------------------------- 1 | 2 | .ServiceTask { 3 | display: inline-block; 4 | list-style: none; 5 | padding: 0; 6 | box-sizing: border-box; 7 | width: 100%; 8 | padding: 20px 10px; 9 | font-size: 16px; 10 | margin-bottom: 10px; 11 | border: 1px solid #e3e4e6; 12 | border-radius: 4px; 13 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); 14 | } 15 | 16 | .ServiceTask th { 17 | text-align: right; 18 | padding-right: 5px; 19 | vertical-align: top; 20 | } 21 | -------------------------------------------------------------------------------- /client/components/service-tasks/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import moment from 'moment'; 4 | import classname from 'classname'; 5 | import styles from './index.css'; 6 | 7 | const awsRegion = process.env.AWS_REGION 8 | 9 | const Task = ({ task, clusterName }) => { 10 | const [family, revision] = task.taskDefinitionArn.split('/'); 11 | const taskId = task.taskArn.split('/')[0]; 12 | 13 | return ( 14 | 44 | ); 45 | } 46 | 47 | export default class ServiceTasks extends Component { 48 | render() { 49 | const { tasks, clusterName } = this.props; 50 | 51 | return ( 52 |
    53 | {tasks.map((task, i) => )} 54 |
    55 | ); 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /client/components/sheet/index.css: -------------------------------------------------------------------------------- 1 | 2 | .SheetOverlay { 3 | position: fixed; 4 | top: 0; 5 | right: 0; 6 | bottom: 0; 7 | left: 0; 8 | z-index: 100; 9 | background: rgba(255,255,255,0.6); 10 | transform: translate3d(0,0,0); 11 | will-change: opacity; 12 | } 13 | 14 | .Sheet { 15 | position: absolute; 16 | top: 0; 17 | right: 0; 18 | bottom: 0; 19 | width: 600px; 20 | box-sizing: border-box; 21 | background-color: #FAFAFB; 22 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); 23 | overflow-y: auto; 24 | animation: SheetSlideIn .25s cubic-bezier(0.305, 0.555, 0.405, 1.025); 25 | padding: 30px; 26 | } 27 | 28 | @keyframes SheetSlideIn { 29 | from { 30 | transform: translateX(100%); 31 | } 32 | to { 33 | transform: translateX(0); 34 | } 35 | } 36 | 37 | .NotScrollable { 38 | overflow: hidden; 39 | } 40 | -------------------------------------------------------------------------------- /client/components/sheet/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import keyname from 'keyname'; 4 | import styles from './index.css'; 5 | 6 | export default class Sheet extends Component { 7 | render() { 8 | return ( 9 |
    10 |
    11 | {this.props.children} 12 |
    13 |
    14 | ); 15 | } 16 | 17 | componentDidMount() { 18 | document.body.classList.add(styles.NotScrollable) 19 | } 20 | 21 | componentWillUnmount() { 22 | document.body.classList.remove(styles.NotScrollable) 23 | } 24 | 25 | /** 26 | * Close. 27 | */ 28 | 29 | onClose() { 30 | this.props.onClose(); 31 | } 32 | 33 | /** 34 | * Close on "escape" keypresses. 35 | */ 36 | 37 | handleOverlayKeydown(e) { 38 | const key = keyname(e.which); 39 | if (key == 'esc') { 40 | this.onClose(); 41 | } 42 | } 43 | 44 | /** 45 | * Close sheet on overlay click. 46 | */ 47 | 48 | handleOverlayClick() { 49 | this.onClose(); 50 | } 51 | 52 | /** 53 | * Don't let clicks on the sheet bubble to the overlay. 54 | */ 55 | 56 | handleSheetClick(e) { 57 | e.stopPropagation(); 58 | } 59 | }; 60 | -------------------------------------------------------------------------------- /client/components/sidebar/index.css: -------------------------------------------------------------------------------- 1 | 2 | .Sidebar { 3 | float: left; 4 | margin-left: 0px; 5 | margin-right: 20px; 6 | width: 200px; 7 | padding-bottom: 100px; 8 | } 9 | -------------------------------------------------------------------------------- /client/components/sidebar/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import Search from '../search'; 4 | import ClusterList from '../cluster-list'; 5 | import styles from './index.css'; 6 | 7 | export default class Sidebar extends Component { 8 | render() { 9 | return ( 10 |
    11 | 14 | 18 |
    19 | ); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /client/containers/clusters/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import request from 'superagent'; 4 | import Batch from 'batch'; 5 | import flatten from 'flatten'; 6 | import Loader from 'react-loader'; 7 | import Page from '../../components/page'; 8 | import ErrorMessage from '../../components/error-message'; 9 | import Sidebar from '../../components/sidebar'; 10 | import ServiceList from '../../components/service-list'; 11 | import Service from '../service'; 12 | 13 | export default class ClustersContainer extends Component { 14 | constructor(props, context) { 15 | super(props, context) 16 | this.state = { 17 | error: null, 18 | clusters: [], 19 | services: [], 20 | tasks: [], 21 | activeClusterArn: null, 22 | activeServiceArn: null 23 | }; 24 | } 25 | 26 | /** 27 | * Render. 28 | */ 29 | 30 | render() { 31 | const activeClusterArn = this.getActiveClusterArn(); 32 | const isLoading = !!this.state.error || !!this.state.services.length; 33 | return ( 34 | 35 | 41 | 42 | 43 | {this.renderError()} 44 | 48 | 49 | {this.renderServiceSheet()} 50 | 51 | ) 52 | } 53 | 54 | /** 55 | * Get the active cluster ARN. 56 | */ 57 | 58 | getActiveClusterArn() { 59 | if (this.state.activeClusterArn) { 60 | return this.state.activeClusterArn; 61 | } 62 | 63 | const clusterName = this.props.params.clusterName; 64 | const cluster = this.findCluster(clusterName); 65 | // TODO: if no matching cluster, show an error 66 | return cluster && cluster.clusterArn; 67 | } 68 | 69 | /** 70 | * Set the current search term. 71 | */ 72 | 73 | setSearchTerm(str) { 74 | this.setState({ searchTerm: str }); 75 | } 76 | 77 | /** 78 | * Set the active cluster ARN. 79 | */ 80 | 81 | setActiveCluster(cluster) { 82 | this.setState({ 83 | activeClusterArn: cluster && cluster.clusterArn 84 | }); 85 | } 86 | 87 | /** 88 | * Render the service sheet. 89 | */ 90 | 91 | renderServiceSheet() { 92 | const clusterName = this.props.params.clusterName; 93 | const serviceName = this.props.params.serviceName; 94 | if (!serviceName) return null; 95 | const service = this.findService(clusterName, serviceName); 96 | if (!service) return null; 97 | const tasks = this.findTasks(service); 98 | 99 | // TODO: if no matching service is found, show an error 100 | return 101 | } 102 | 103 | /** 104 | * Render the error. 105 | */ 106 | 107 | renderError() { 108 | return this.state.error 109 | ? 110 | : null; 111 | } 112 | 113 | /** 114 | * Get cluster by its `name`. 115 | */ 116 | 117 | findCluster(name) { 118 | return this.state.clusters.find((cluster) => { 119 | return cluster.clusterName == name; 120 | }); 121 | } 122 | 123 | /** 124 | * Get service by its `clusterName` and `serviceName`. 125 | */ 126 | 127 | findService(clusterName, serviceName) { 128 | const cluster = this.findCluster(clusterName); 129 | if (!cluster) { 130 | return; 131 | } 132 | 133 | return this.state.services.find((service) => { 134 | return service.clusterArn === cluster.clusterArn && 135 | service.serviceName === serviceName; 136 | }); 137 | } 138 | 139 | /** 140 | * Get all tasks beloning to a service 141 | */ 142 | 143 | findTasks(service) { 144 | return this.state.tasks.filter((task) => `service:${service.serviceName}` === task.group); 145 | } 146 | 147 | /** 148 | * Fetch data. 149 | */ 150 | 151 | componentDidMount() { 152 | request 153 | .get('/api/clusters') 154 | .end(function(err, res) { 155 | if (err) { 156 | return this.setState({ error: err.message }); 157 | } 158 | 159 | const clusters = res.body; 160 | this.setState({ clusters }); 161 | 162 | for (let i = 0; i < clusters.length; i++) { 163 | this.fetchServices(clusters[i]); 164 | } 165 | }.bind(this)); 166 | } 167 | 168 | /** 169 | * Fetch services for the given `cluster`. 170 | */ 171 | 172 | fetchServices(cluster) { 173 | request 174 | .get(`/api/clusters/${cluster.clusterName}`) 175 | .end(function(err, res) { 176 | if (err) { 177 | err = err || new Error(`unable to fetch information on ${cluster.clusterName} (${res.status})`); 178 | return this.setState({ error: err.message }); 179 | } 180 | 181 | const { services } = this.state; 182 | services.push(res.body); 183 | this.setState({ 184 | services: flatten(services) 185 | }); 186 | res.body.forEach(service => { 187 | this.fetchTasks(cluster.clusterName, service.serviceName) 188 | }) 189 | }.bind(this)); 190 | } 191 | 192 | /** 193 | * Fetch running tasks for the given `cluster` and `service`. 194 | */ 195 | 196 | fetchTasks(cluster, service) { 197 | request 198 | .get(`/api/clusters/${cluster}/tasks/${service}`) 199 | .end((err, { body }) =>{ 200 | if (err) { 201 | const message = err.message || `unable to fetch tasks in cluster ${cluster.clusterName} family ${service} (${res.status})`; 202 | return this.setState({ error: message }); 203 | } 204 | 205 | this.setState({ tasks: this.state.tasks.concat(body)}) 206 | }); 207 | } 208 | }; 209 | -------------------------------------------------------------------------------- /client/containers/service/index.css: -------------------------------------------------------------------------------- 1 | 2 | .Service {} 3 | 4 | .ServiceTabs { 5 | margin-top: 40px; 6 | } 7 | 8 | .ServiceTabs-navigation { 9 | } 10 | .ServiceTabs-navigation ul { 11 | list-style: none; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | .ServiceTabs-navigation li { 16 | display: inline-block; 17 | padding-right: 10px; 18 | } 19 | 20 | .ServiceTabs-navigation a { 21 | font-size: 16px; 22 | font-weight: 400; 23 | text-transform: lowercase; 24 | line-height: 1; 25 | color: #b7bdc4; 26 | } 27 | 28 | /* hack */ 29 | .ServiceTabs-navigation a > div { 30 | display: inline; 31 | border-radius: 5px; 32 | border-bottom-left-radius: 0; 33 | border-bottom-right-radius: 0; 34 | 35 | padding-top: 5px; 36 | padding-left: 15px; 37 | padding-right: 15px; 38 | padding-bottom: 2px; /* where is this coming from? wtf */ 39 | border: 1px solid #BDC0C5; 40 | background: #fff; 41 | } 42 | 43 | .ServiceTabs-content { 44 | background: #fff; 45 | border: 1px solid #BDC0C5; 46 | border-top-right-radius: 5px; 47 | padding: 15px; 48 | } 49 | -------------------------------------------------------------------------------- /client/containers/service/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import { findDOMNode } from 'react-dom'; 4 | import classname from 'classname'; 5 | import moment from 'moment'; 6 | import qs from 'querystring'; 7 | import { Link, browserHistory } from 'react-router'; 8 | import { Tabs, TabLink, TabContent } from 'react-tabs-redux'; 9 | import Sheet from '../../components/sheet'; 10 | import ServiceEventList from '../../components/service-event-list'; 11 | import ServiceStats from '../../components/service-stats'; 12 | import ServiceTasks from '../../components/service-tasks'; 13 | import ServiceTaskDef from '../../components/service-task-def'; 14 | import styles from './index.css'; 15 | 16 | const activeLinkStyle = { 17 | borderBottomColor: '#fff', 18 | color: '#54585E', 19 | }; 20 | 21 | export default class Service extends Component { 22 | constructor() { 23 | super() 24 | const hash = window.location.hash.slice(1) 25 | const map = qs.decode(hash) 26 | this.state = { 27 | tab: map.tab 28 | } 29 | } 30 | 31 | render() { 32 | return ( 33 |
    34 | 35 |

    {this.props.service.serviceName}

    36 | 37 | 38 | 57 | 58 |
    59 | 60 | 61 | 62 | 63 | 67 | 68 | 69 | 73 | 74 |
    75 |     76 |     77 |
    78 | ); 79 | } 80 | 81 | /** 82 | * Select the given `tab`. 83 | */ 84 | 85 | selectTab(tab) { 86 | this.setState({ tab: tab }) 87 | } 88 | 89 | /** 90 | * Close the sheet. 91 | */ 92 | 93 | closeSheet() { 94 | const { service } = this.props; 95 | const clusterName = service.clusterArn.split('cluster/')[1]; 96 | browserHistory.push(`/${clusterName}`); 97 | } 98 | 99 | /** 100 | * Put focus in the sheet. 101 | */ 102 | 103 | componentDidMount() { 104 | findDOMNode(this.refs.heading).focus(); 105 | } 106 | }; 107 | -------------------------------------------------------------------------------- /client/index.css: -------------------------------------------------------------------------------- 1 | 2 | @import 'normalize.css'; 3 | @import '@segment/typography'; 4 | 5 | .App { 6 | width: 1200px; 7 | margin: 0 auto; 8 | padding: 0 20px; 9 | font: 20px Freight Sans,Verdana,Geneva,sans-serif; 10 | } 11 | 12 | .App a { 13 | text-decoration: none; 14 | } 15 | -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Specs - peer into your ECS clusters 6 | 7 | 8 |
    9 | 10 | 11 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Module dependencies. 4 | */ 5 | 6 | import { render } from 'react-dom'; 7 | import React, { Component } from 'react'; 8 | import { Router, Route, browserHistory } from 'react-router'; 9 | import ClustersContainer from './containers/clusters'; 10 | import styles from './index.css'; 11 | 12 | const root = document.getElementById('root'); 13 | 14 | root.className = styles.App; 15 | 16 | const app = ( 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | render(app, root); 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "specs", 3 | "version": "1.0.0", 4 | "description": "Peer into your ECS clusters", 5 | "main": "server/app", 6 | "repository": { 7 | "type": "git", 8 | "url": "github.com/segmentio/specs" 9 | }, 10 | "scripts": { 11 | "server": "nodemon --harmony --ignore client --ignore build bin/server", 12 | "client": "webpack-dev-server -d --hot --inline --port 3001", 13 | "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"", 14 | "build": "webpack -p" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "dependencies": { 19 | "aws-sdk": "^2.5.3", 20 | "batch": "^0.5.3", 21 | "bluebird": "^3.0.6", 22 | "chunk": "0.0.2", 23 | "co-defer": "^1.0.0", 24 | "debug": "^2.2.0", 25 | "kcors": "^1.0.1", 26 | "koa": "^1.1.2", 27 | "koa-logger": "^1.3.0", 28 | "koa-route": "^2.4.2", 29 | "koa-send": "^3.1.0", 30 | "koa-static": "^2.0.0", 31 | "lru-cache": "^4.0.1", 32 | "ms": "^0.7.1" 33 | }, 34 | "devDependencies": { 35 | "@segment/typography": "^1.0.0", 36 | "babel": "^6.3.13", 37 | "babel-core": "^6.7.7", 38 | "babel-loader": "^6.2.4", 39 | "babel-plugin-transform-runtime": "^6.7.5", 40 | "babel-preset-es2015": "^6.3.13", 41 | "babel-preset-react": "^6.3.13", 42 | "babel-preset-stage-0": "^6.5.0", 43 | "babel-runtime": "^6.6.1", 44 | "classname": "0.0.0", 45 | "concurrently": "^3.5.0", 46 | "css-loader": "^0.23.1", 47 | "extract-text-webpack-plugin": "^1.0.1", 48 | "file-loader": "^0.8.5", 49 | "flatten": "^1.0.2", 50 | "history": "^1.17.0", 51 | "html-webpack-plugin": "^2.24.1", 52 | "keyname": "^0.1.0", 53 | "moment": "^2.10.6", 54 | "nodemon": "^1.8.1", 55 | "normalize.css": "^4.1.1", 56 | "postcss-loader": "^0.8.2", 57 | "querystring": "^0.2.0", 58 | "react": "^15.1.0", 59 | "react-dom": "^15.0.1", 60 | "react-hot-loader": "^1.3.0", 61 | "react-loader": "^2.4.0", 62 | "react-router": "^2.4.0", 63 | "react-tabs-redux": "^1.2.0", 64 | "style-loader": "^0.13.1", 65 | "superagent": "^1.5.0", 66 | "uniq": "^1.0.1", 67 | "url-loader": "^0.5.7", 68 | "watchify": "^3.6.1", 69 | "webpack": "^1.13.0", 70 | "webpack-dev-server": "^1.14.1" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /server/app.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | 4 | let logger = require('koa-logger'); 5 | let route = require('koa-route'); 6 | let send = require('koa-send'); 7 | let Cache = require('./cache'); 8 | let AWS = require('aws-sdk'); 9 | let cors = require('kcors'); 10 | let path = require('path'); 11 | let ECS = require('./ecs'); 12 | let koa = require('koa'); 13 | let serve = require('koa-static'); 14 | 15 | /** 16 | * Create our app 17 | */ 18 | 19 | let app = koa(); 20 | let ecs = new ECS(AWS, { 21 | disableTasks: process.env.DISABLE_TASKS 22 | }); 23 | let cache = new Cache(ecs); 24 | 25 | /** 26 | * Set a cache error handler 27 | */ 28 | 29 | cache.on('error', err => console.log('cache error:', err.stack)); 30 | 31 | /** 32 | * Export the app 33 | */ 34 | 35 | module.exports = app; 36 | 37 | /** 38 | * Add in a logger 39 | */ 40 | 41 | app.use(logger()); 42 | 43 | /** 44 | * Setup an error handler. 45 | */ 46 | 47 | app.use(function *(next){ 48 | try { 49 | yield next; 50 | } catch (err) { 51 | console.log('error:', err.stack); 52 | } 53 | }); 54 | 55 | /** 56 | * Add our CORS handler. 57 | */ 58 | 59 | app.use(cors()); 60 | 61 | /** 62 | * Create our state. 63 | */ 64 | 65 | app.use(function *(next){ 66 | this.cache = cache; 67 | this.ecs = ecs; 68 | yield next; 69 | }); 70 | 71 | /** 72 | * Set our routes. 73 | */ 74 | 75 | app.use(route.get('/api/clusters', list)); 76 | app.use(route.get('/api/clusters/:cluster', services)); 77 | app.use(route.get('/api/clusters/:cluster/tasks/:family', tasks)); 78 | 79 | /** 80 | * Static routes. 81 | */ 82 | 83 | app.use(route.get('/bundle.js', bundle)); 84 | app.use(route.get('/bundle.js.map', sourcemap)); 85 | app.use(route.get('/bundle.css', stylesheet)); 86 | app.use(route.get('/bundle.css.map', stylesheetMap)); 87 | app.use(route.get('/*', index)); 88 | 89 | /** 90 | * Transfer the index page 91 | */ 92 | 93 | function *index(){ 94 | yield send(this, 'build/index.html'); 95 | } 96 | 97 | /** 98 | * Transfer js bundle 99 | */ 100 | 101 | function *bundle(){ 102 | yield send(this, 'build/bundle.js'); 103 | } 104 | 105 | /** 106 | * Transfer the bundle sourcemap. 107 | */ 108 | 109 | function *sourcemap(){ 110 | yield send(this, 'build/bundle.js.map'); 111 | } 112 | 113 | /** 114 | * Transfer stylesheet 115 | */ 116 | 117 | function *stylesheet(){ 118 | yield send(this, 'build/bundle.css'); 119 | } 120 | 121 | /** 122 | * Transfer stylesheet sourcemap 123 | */ 124 | 125 | function *stylesheetMap(){ 126 | yield send(this, 'build/bundle.css.map'); 127 | } 128 | 129 | /** 130 | * Return a json array of all the clusters 131 | */ 132 | 133 | function *list(){ 134 | let cache = this.cache; 135 | let clusters = cache.clusters(); 136 | this.body = clusters; 137 | } 138 | 139 | /** 140 | * Returns a json array of a given cluster in 141 | * the path parameter. 142 | * 143 | * @param {String} cluster 144 | */ 145 | 146 | function *services(cluster){ 147 | let cache = this.cache; 148 | this.body = cache.services(cluster); 149 | } 150 | 151 | /** 152 | * Further describes a task, given the ARN in 153 | * the path parameter 154 | * 155 | * @param {String} taskArn 156 | */ 157 | 158 | function *tasks(cluster, family){ 159 | let ecs = this.ecs; 160 | let task = yield ecs.tasks(cluster, family); 161 | this.body = task; 162 | } 163 | -------------------------------------------------------------------------------- /server/cache.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | let LRU = require('lru-cache'); 4 | let debug = require('debug')('ecs:cache'); 5 | let inherits = require('util').inherits; 6 | let defer = require('co-defer'); 7 | let Emitter = require('events'); 8 | let co = require('co'); 9 | let ms = require('ms'); 10 | 11 | module.exports = Cache; 12 | 13 | /** 14 | * Cache constructor 15 | * 16 | * @param {ECS} ecs ecs client 17 | */ 18 | 19 | function Cache(ecs){ 20 | Emitter.call(this); 21 | this.tasks = LRU({ 22 | max: 1000000, 23 | maxAge: ms('1d'), 24 | length: (val, key) => 1 25 | }); 26 | this.ecs = ecs; 27 | this.cache([], []); // initial state 28 | this.start(); 29 | } 30 | 31 | inherits(Cache, Emitter); 32 | 33 | /** 34 | * Starts our cache polling for 35 | * changes from ECS. 36 | */ 37 | 38 | Cache.prototype.start = function(){ 39 | let poll = this.poll.bind(this); 40 | defer(poll, err => { 41 | if (err) this.emit('error', err); 42 | }); 43 | 44 | let self = this; 45 | defer.setInterval(function *(){ 46 | try { 47 | yield poll(); 48 | } catch (err) { 49 | self.emit('error', err); 50 | } 51 | }, ms('1m')); 52 | }; 53 | 54 | /** 55 | * Polls ECS for the most recent cluster 56 | * definitions. 57 | */ 58 | 59 | Cache.prototype.poll = function *(){ 60 | debug('polling ecs...'); 61 | let ecs = this.ecs; 62 | 63 | // retrieve the cluster definitions 64 | let clusters = yield ecs.clusters(); 65 | clusters = clusters.clusters; 66 | debug('received %d clusters', Object.keys(clusters).length); 67 | 68 | // from all the clusters, retrieve the services 69 | let serviceCalls = clusters.map(cluster => { 70 | return ecs.services(cluster.clusterArn); 71 | }) 72 | let services = yield Promise.all(serviceCalls); 73 | services = flatten(services); 74 | debug('received %d services', services.length); 75 | 76 | // from all the tasks, get the versions running, then cache the result. 77 | let taskCache = this.tasks; 78 | let taskCalls = services.map(service => { 79 | let task = taskCache.get(service.taskDefinition); 80 | if (task) { 81 | return Promise.resolve(task); 82 | } 83 | return ecs.task(service.taskDefinition).then(task => { 84 | taskCache.set(service.taskDefinition, task); 85 | return task; 86 | }); 87 | }); 88 | let tasks = yield Promise.all(taskCalls); 89 | services.forEach((service, i) => service.task = tasks[i].taskDefinition); 90 | debug('received %d tasks', services.length); 91 | this.cache(clusters, services); 92 | }; 93 | 94 | /** 95 | * Return the clusters 96 | */ 97 | 98 | Cache.prototype.clusters = function(){ 99 | return this._clusters; 100 | } 101 | 102 | /** 103 | * Return the services, optionally filtered by 104 | * cluster. 105 | * 106 | * @param {String} cluster [optional] 107 | */ 108 | 109 | Cache.prototype.services = function(cluster){ 110 | if (!cluster) return this._services; 111 | return this._services.filter(service => { 112 | return clusterName(service.clusterArn) == cluster; 113 | }); 114 | }; 115 | 116 | /** 117 | * Sets the existing clusters and services in 118 | * the cache 119 | * 120 | * @param {Array} clusters 121 | * @param {Array} services 122 | */ 123 | 124 | Cache.prototype.cache = function(clusters, services){ 125 | this._clusters = clusters; 126 | this._services = services; 127 | }; 128 | 129 | /** 130 | * Flatten our list of lists into a single array. 131 | */ 132 | 133 | function flatten(arrays) { 134 | var output = []; 135 | arrays.forEach(arr => output = output.concat(arr)); 136 | return output; 137 | } 138 | 139 | function clusterName(arn){ 140 | return arn.split('/')[1]; 141 | } 142 | -------------------------------------------------------------------------------- /server/ecs.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | 4 | let debug = require('debug')('ecs'); 5 | let Promise = require('bluebird'); 6 | let chunk = require('chunk'); 7 | let Batch = require('batch'); 8 | let co = require('co'); 9 | 10 | module.exports = ECS; 11 | 12 | /** 13 | * Create a new ECS client. 14 | * 15 | * @param {AWS} aws - an aws client 16 | */ 17 | 18 | function ECS(aws, opts){ 19 | this.ecs = new aws.ECS(); 20 | this.disableTasks = opts.disableTasks; 21 | } 22 | 23 | /** 24 | * Return a promise to return the full list of 25 | * clusters. 26 | * 27 | * @public 28 | * @return {Promise} [clusters] 29 | */ 30 | 31 | ECS.prototype.clusters = function(){ 32 | debug('ecs.clusters()'); 33 | return this.listClusters() 34 | .bind(this) 35 | .then(this.describeClusters); 36 | }; 37 | 38 | /** 39 | * Return a promise to return the full list of 40 | * services for a cluster. 41 | * 42 | * @public 43 | * @param {String} cluster - the cluster arn 44 | * @return {Promise} [services] 45 | */ 46 | 47 | ECS.prototype.services = function(cluster){ 48 | debug('ecs.services(%s)', cluster); 49 | return this.listServices(cluster) 50 | .bind(this) 51 | .then(this.describeServices); 52 | }; 53 | 54 | 55 | /** 56 | * Return a promise to return the full list of 57 | * running tasks for a cluster. 58 | * 59 | * @public 60 | * @param {String} cluster - the cluster name 61 | * @param {String} family - the cluster name 62 | * @return {Promise} [tasks] 63 | */ 64 | 65 | ECS.prototype.tasks = function(cluster, family){ 66 | if (this.disableTasks) { 67 | debug('listing tasks is disabled'); 68 | return Promise.resolve([]); 69 | } 70 | debug('ecs.tasks(%s)', cluster, family); 71 | return this.listTasks(cluster, family) 72 | .bind(this) 73 | .then(this.describeTasks); 74 | }; 75 | 76 | /** 77 | * Lists all the clusters from the API. 78 | * 79 | * @private 80 | */ 81 | 82 | ECS.prototype.listClusters = function(){ 83 | let ecs = this.ecs; 84 | debug('ecs.listClusters()'); 85 | return new Promise((resolve, reject) => { 86 | ecs.listClusters((err, data) => { 87 | debug('ecs.listClusters received reponse', err, data); 88 | if (err) return reject(err); 89 | resolve(data.clusterArns); 90 | }); 91 | }); 92 | } 93 | 94 | /** 95 | * Describes individual clusters. 96 | * 97 | * @private 98 | * @param {Array[string]} clusters 99 | * @return {Promise} 100 | */ 101 | 102 | ECS.prototype.describeClusters = function(clusters){ 103 | let ecs = this.ecs; 104 | debug('ecs.describeClusters()'); 105 | return new Promise((resolve, reject) => { 106 | ecs.describeClusters({ clusters: clusters }, (err, data) => { 107 | if (err) return reject(err); 108 | resolve(data); 109 | }); 110 | }); 111 | } 112 | 113 | /** 114 | * Lists all the services for a cluster 115 | * 116 | * @private 117 | * @param {String} cluster 118 | */ 119 | 120 | ECS.prototype.listServices = function(cluster){ 121 | let ecs = this.ecs; 122 | debug('ecs.listServices()'); 123 | return new Promise((resolve, reject) => { 124 | let services = []; 125 | list(cluster, null, (err, services) => { 126 | if (err) return reject(err); 127 | resolve([cluster, services]); 128 | }); 129 | 130 | function list(cluster, token, fn){ 131 | ecs.listServices({ cluster: cluster, nextToken: token }, (err, data) => { 132 | if (err) return fn(err); 133 | let {nextToken, serviceArns} = data; 134 | services = services.concat(serviceArns); 135 | if (nextToken) return list(cluster, nextToken, fn); 136 | fn(null, services); 137 | }); 138 | } 139 | }) 140 | } 141 | 142 | /** 143 | * Describe individual services, passed from the promise resolved 144 | * from listServices 145 | * 146 | * @private 147 | * @param {Array} [cluster, services] 148 | */ 149 | 150 | ECS.prototype.describeServices = function ([cluster, services]){ 151 | let ecs = this.ecs; 152 | debug('ecs.describeServices called'); 153 | return new Promise((resolve, reject) => { 154 | let chunks = chunk(services, 10); 155 | let batch = new Batch(); 156 | 157 | // describe the services in chunks of 10, 158 | // the max limit for ECS 159 | chunks.forEach((services) => batch.push(describe(services))); 160 | 161 | batch.end((err, results) => { 162 | if (err) return reject(err); 163 | let services = []; 164 | // combine our results and pass them back 165 | results.forEach((result) => { 166 | services = services.concat(result.services); 167 | }); 168 | resolve(services); 169 | }); 170 | 171 | function describe(services) { 172 | return function (done){ 173 | let req = { cluster, services }; 174 | ecs.describeServices(req, done); 175 | }; 176 | } 177 | }); 178 | } 179 | 180 | /** 181 | * Describes an individual task 182 | * 183 | * @public 184 | * @param {String} task the task arn 185 | */ 186 | 187 | ECS.prototype.task = function (task){ 188 | debug('ecs.task called'); 189 | return new Promise((resolve, reject) => { 190 | let req = { taskDefinition: task }; 191 | this.ecs.describeTaskDefinition(req, (err, res) => { 192 | if (err) return reject(err); 193 | resolve(res); 194 | }); 195 | }); 196 | } 197 | 198 | /** 199 | * Lists tasks in the cluster belonging to the given family 200 | * 201 | * @public 202 | * @param {String} cluster the cluster name 203 | * @param {String} family the family name 204 | * @return {Promise} { tasks, cluster} 205 | */ 206 | 207 | ECS.prototype.listTasks = function (cluster, family){ 208 | debug('ecs.listTasks called'); 209 | return new Promise((resolve, reject) => { 210 | const req = { cluster, family }; 211 | this.ecs.listTasks(req, (err, res) => { 212 | if (err) return reject(err); 213 | const tasks = res.taskArns.map(taskArns => taskArns.split('/')[1]) 214 | resolve({ tasks, cluster }); 215 | }); 216 | }); 217 | } 218 | 219 | /** 220 | * Describes the given tasks 221 | * 222 | * @public 223 | * @param {Object} { cluster, tasks } 224 | * @return {Promise} [tasks] 225 | */ 226 | 227 | ECS.prototype.describeTasks = function (req){ 228 | debug('ecs.describeTasks called'); 229 | return new Promise((resolve, reject) => { 230 | if (req.tasks.length === 0) 231 | return resolve([]); 232 | 233 | this.ecs.describeTasks(req, (err, res) => { 234 | if (err) return reject(err); 235 | resolve(res.tasks); 236 | }); 237 | }); 238 | } 239 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | 4 | const webpack = require('webpack'); 5 | const HMRPlugin = webpack.HotModuleReplacementPlugin; 6 | const DefinePlugin = webpack.DefinePlugin; 7 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | const HtmlWebpackPlugin = require('html-webpack-plugin') 9 | const path = require('path'); 10 | 11 | const env = process.env.NODE_ENV || 'development'; 12 | const awsRegion = process.env.AWS_REGION || 'us-west-2'; 13 | 14 | const config = module.exports = { 15 | context: path.join(__dirname, 'client'), 16 | devtool: 'source-map', 17 | entry: { 18 | main: './index.js', 19 | }, 20 | output: { 21 | path: './build', 22 | publicPath: '/', 23 | filename: 'bundle.js', 24 | }, 25 | plugins: [ 26 | new DefinePlugin({ 27 | 'process.env': { 28 | NODE_ENV: JSON.stringify(env), 29 | AWS_REGION: JSON.stringify(awsRegion) 30 | } 31 | }), 32 | new HtmlWebpackPlugin({ 33 | template: 'index.html', 34 | inject: 'body' 35 | }) 36 | ], 37 | module: { 38 | loaders: [ 39 | { 40 | test: /\.js$/, 41 | exclude: /node_modules/, 42 | loaders: [ 43 | 'react-hot', 44 | 'babel' 45 | ] 46 | }, 47 | { 48 | test: /\.css$/, 49 | include: /client/, 50 | loader: env === 'production' 51 | ? ExtractTextPlugin.extract('style-loader', 'css-loader?module!postcss-loader', { 52 | publicPath: '/' 53 | }) 54 | : 'style!css?module&localIdentName=[path][name]---[local]---[hash:base64:5]!postcss' 55 | }, 56 | { 57 | test: /\.css$/, 58 | exclude: /client/, 59 | loader: 'style!css' 60 | }, 61 | { 62 | test: /\.svg$/, 63 | loader: 'url' 64 | }, 65 | ] 66 | }, 67 | devServer: { 68 | contentBase: './client', 69 | historyApiFallback: true, 70 | proxy: { 71 | '/api/*': { 72 | target: 'http://localhost:3000/' 73 | } 74 | } 75 | } 76 | } 77 | 78 | if (env == 'production') { 79 | config.plugins.push(new ExtractTextPlugin('bundle.css')) 80 | } 81 | --------------------------------------------------------------------------------