leak client code

spikes/leak/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/leak/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/leak/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/leak/artillery/artillery-fast.yml

@@ -0,0 +1,9 @@
+config:
+  target: "http://fast-node:8000"
+  phases:
+    - duration: 13200
+      arrivalRate: 1
+scenarios:
+  - flow:
+      - get:
+          url: "/mem-fast"

spikes/leak/docker-compose.yml

@@ -13,6 +13,19 @@ services:
       - MODE=fast
     depends_on:
       - fast-node
+  another-fast-node:
+    build: .
+    environment:
+      - TYPE=node
+    ports:
+     - "8004:8000"
+  another-fast-artillery:
+    build: .
+    environment:
+      - TYPE=artillery
+      - MODE=another-fast
+    depends_on:
+      - another-fast-node
   slow-node:
     build: .
     environment:
@@ -49,5 +62,6 @@ services:
       - TYPE=telemetry
     depends_on:
       - fast-node
+      - another-fast-node
       - slow-node
       - plain-node

spikes/leak/etc/containerpilot.json

@@ -1 +0,0 @@
-{}

spikes/leak/package.json

@@ -7,13 +7,20 @@
   "dependencies": {
     "artillery": "^1.5.0-17",
     "clone": "^2.0.0",
+    "date.js": "^0.3.1",
     "epimetheus": "^1.0.46",
     "good": "^7.0.2",
     "good-console": "^6.3.1",
     "good-squeeze": "^5.0.1",
+    "got": "^6.6.3",
     "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.2.0",
+    "internet-timestamp": "^0.0.1",
+    "lodash.get": "^4.4.2",
+    "minimist": "^1.2.0",
     "pretty-hrtime": "^1.0.3",
     "prom-client": "^6.1.2",
-    "require-dir": "^0.3.1"
+    "require-dir": "^0.3.1",
+    "webpack": "^1.13.3"
   }
 }

spikes/leak/prometheus.yml

@@ -3,7 +3,7 @@ scrape_configs:
     # Override the global default and scrape targets from this job every 5 seconds.
     scrape_interval: 1s
     static_configs:
-      - targets: ['fast-node:8000']
+      - targets: ['fast-node:8000', 'another-fast-node:8000']
   - job_name: 'leak-slow'
     # Override the global default and scrape targets from this job every 5 seconds.
     scrape_interval: 1s

spikes/leak/readme.md

@@ -1,16 +0,0 @@
-GET /mem
-GET /cpu
-
-  cpu-node:
-    build: .
-    environment:
-      - TYPE=node
-    ports:
-     - "8003:8000"
-  cpu-artillery:
-    build: .
-    environment:
-      - TYPE=artillery
-      - MODE=cpu
-    depends_on:
-      - cpu-node

spikes/leak/scripts/metrics.js

@@ -0,0 +1,78 @@
+process.on('unhandledRejection', (reason) => {
+  throw reason
+});
+
+const argv = require('minimist')(process.argv.slice(2));
+const get = require('lodash.get');
+const date = require('date.js');
+const timestamp = require('internet-timestamp');
+const got = require('got');
+const url = require('url');
+
+const conf = {
+  query: argv.query,
+  ago: argv.ago || '1h',
+  step: argv.step || '1s',
+  hostname: argv.hostname || 'localhost',
+};
+
+if (!conf.query) {
+  console.error(`
+Usage: node metrics.js --query={metric} --step={step} --ago={ago}
+       node metrics.js --query=node_memory_heap_used_bytes --query=node_memory_heap_total_bytes
+  `.trim());
+
+  process.exit(1);
+}
+
+// query=node_memory_heap_used_bytes&end=147989905368&step=15s
+const end = timestamp(new Date());
+const start = timestamp(date(`${conf.ago} ago`));
+
+Promise.all(conf.query.map((query) => {
+  return got(url.format({
+    protocol: 'http:',
+    slashes: true,
+    port: '9090',
+    hostname: conf.hostname,
+    pathname: '/api/v1/query_range',
+    query: {
+      query: query,
+      end: end,
+      step: conf.step,
+      start: start
+    }
+  }));
+})).then((res) => {
+  return res.reduce((sum, r) => {
+    const {
+      data: {
+        result
+      }
+    } = JSON.parse(r.body);
+
+    return result.reduce((sum, inst) => {
+      const {
+        values,
+        metric: {
+          instance,
+          job,
+          __name__
+        }
+      } = inst;
+
+      const oldJob = get(sum, job, {});
+      const oldQuery = get(sum, `${job}.${__name__}`, {});
+
+      return Object.assign(sum, {
+        [job]: Object.assign(oldJob, {
+          [__name__]: Object.assign(oldQuery, {
+            [instance]: values
+          })
+        })
+      })
+    }, sum);
+  }, {});
+}).then((res) => {
+  console.log(JSON.stringify(res, null, 2));
+});

spikes/leak/scripts/start.js

@@ -1,4 +1,5 @@
 const cp = require('child_process');
+const path = require('path');
 
 const TYPE = process.env.TYPE;
 const MODE = process.env.MODE;
@@ -12,17 +13,15 @@ Usage: TYPE={type} node start.js
   process.exit(1);
 }
 
-
 const handler = ({
   node: () => {
-    console.log('node src/index.js');
     return cp.exec('node src/index.js', {
       cwd: __dirname
     })
   },
   artillery: () => {
-    console.log(`./node_modules/.bin/artillery run ${__dirname}/artillery-${MODE}.yml`);
-    return cp.exec(`./node_modules/.bin/artillery run ${__dirname}/artillery-${MODE}.yml`)
+    const conf = path.join(__dirname, '../artillery/artillery-${MODE}.yml');
+    return cp.exec(`../node_modules/.bin/artillery run ${conf}`)
   }
 })[TYPE];
 

spikes/leak/src/client/actions.js

@@ -0,0 +1,82 @@
+const take = require('lodash.take');
+
+const actions =  {
+  'UPDATE_STATS': (state, action) => {
+    const data = (state[action.subscription] || {
+      cpu: [],
+      mem: [],
+      disk: []
+    });
+
+    const newData = ['cpu', 'mem', 'disk'].reduce((sum, key) => {
+      const item = {
+        ...action.payload.stats[key],
+        when: action.payload.when
+      };
+
+      const prepended = [item].concat(data[key]);
+
+      return {
+        ...sum,
+        [key]: take(prepended, state.windowSize)
+      };
+    }, {});
+
+    return {
+      ...state,
+      [action.subscription]: newData
+    };
+  }
+};
+
+module.exports = (state, action) => {
+  return !actions[action.type] ? state : actions[action.type](state, action);
+};
+
+module.exports.subscribe = (id) => (dispatch, getState) => {
+  const {
+    ws
+  } = getState();
+
+  const p = new Promise((resolve, reject) => {
+    ws.subscribe(`/stats/${id}`, (update, flag) => {
+      dispatch({
+        type: 'UPDATE_STATS',
+        payload: update,
+        subscription: id
+      });
+    }, (err) => {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve();
+    });
+  });
+
+  return dispatch({
+    type: 'SUBSCRIBE',
+    payload: p
+  });
+};
+
+module.exports.unsubscribe = (id) => (dispatch, getState) => {
+  const {
+    ws
+  } = getState();
+
+  const p = new Promise((resolve, reject) => {
+    ws.unsubscribe(`/stats/${id}`, null, (err) => {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve();
+    });
+  });
+
+  return dispatch({
+    type: 'UNSUBSCRIBE',
+    payload: p
+  });
+};

spikes/leak/src/client/chart/base.js

@@ -0,0 +1,71 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const React = require('react');
+
+module.exports = React.createClass({
+  ref: function(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  },
+  componentDidMount: function() {
+    const {
+      datasets = [],
+      labels = 0,
+      stacked = false,
+      xAxe = false,
+      yAxe = false,
+      legend = false
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels).map((v, i) => '')
+      : labels;
+
+    this._chart = new Chart(this._refs.component, {
+      type: 'bar',
+      stacked: stacked,
+      responsive: true,
+      options: {
+        scales: {
+          xAxes: [{
+            display: xAxe,
+            stacked: stacked
+          }],
+          yAxes: [{
+            display: yAxe,
+            stacked: stacked
+          }]
+        },
+        legend: {
+          display: legend
+        }
+      },
+      data: {
+        labels:
+        datasets: datasets
+      }
+    });
+  },
+  componentWillReceiveProps: function(nextProps) {
+    const {
+      datasets = [],
+      labels = 0
+    } = this.props;
+
+    this._chart.data.datasets = datasets;
+    this._chart.data.labels = buildArray(labels).map((v, i) => '');
+    this._chart.update(0);
+  },
+  render: function() {
+    return (
+      <canvas
+        ref={this.ref('component')}
+        width='400'
+        height='400'
+      />
+    );
+  }
+});

spikes/leak/src/client/chart/cpu.js

@@ -0,0 +1,31 @@
+const buildArray = require('build-array');
+const Chart = require('./base');
+const React = require('react');
+
+const colors = {
+  user: 'rgb(255, 99, 132)',
+  sys: 'rgb(255, 159, 64)'
+};
+
+module.exports = ({
+  data = {},
+  windowSize
+}) => {
+  const datasets = ['user', 'sys'].map((key) => {
+    return {
+      label: key,
+      backgroundColor: colors[key],
+      data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || 0))
+    };
+  });
+
+  return (
+    <Chart
+      datasets={datasets}
+      stacked={true}
+      labels={datasets[0].data.length}
+      legend={true}
+    />
+  );
+};
+

spikes/leak/src/client/chart/disk.js

@@ -0,0 +1,35 @@
+const pretty = require('prettysize');
+const buildArray = require('build-array');
+const Chart = require('./base');
+const React = require('react');
+
+const colors = {
+  user: 'rgb(255, 99, 132)',
+  sys: 'rgb(255, 159, 64)'
+};
+
+module.exports = ({
+  data = [],
+  windowSize
+}) => {
+  const datasets = [{
+    label: 'disk',
+    backgroundColor: 'rgb(255, 159, 64)',
+    data: buildArray(windowSize).map((v, i) => {
+      return data[i] ? (data[i].total - data[i].free) : 0;
+    })
+  }];
+
+  const labels = buildArray(windowSize).map((v, i) => {
+    return data[i] ? pretty(datasets[0].data[i]) : '';
+  });
+
+  return (
+    <Chart
+      datasets={datasets}
+      labels={labels}
+      legend={true}
+    />
+  );
+};
+

spikes/leak/src/client/chart/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  CPU: require('./cpu'),
+  cpu: require('./cpu'),
+  Mem: require('./mem'),
+  mem: require('./mem'),
+  Disk: require('./disk'),
+  disk: require('./disk')
+};

spikes/leak/src/client/chart/mem.js

@@ -0,0 +1,28 @@
+const buildArray = require('build-array');
+const Chart = require('./base');
+const React = require('react');
+
+const colors = {
+  user: 'rgb(255, 99, 132)',
+  sys: 'rgb(255, 159, 64)'
+};
+
+module.exports = ({
+  data = [],
+  windowSize
+}) => {
+  const datasets = [{
+    label: 'mem',
+    backgroundColor: 'rgb(255, 99, 132)',
+    data: buildArray(windowSize).map((v, i) => ((data[i] || {}).used || 0))
+  }];
+
+  return (
+    <Chart
+      datasets={datasets}
+      labels={datasets[0].data.length}
+      legend={true}
+    />
+  );
+};
+

spikes/leak/src/client/index.js

@@ -0,0 +1,36 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const Store = require('./store');
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+});
+
+const store = Store({
+  ws: client,
+  windowSize: 20
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/leak/src/client/matrix.js

@@ -0,0 +1,89 @@
+const React = require('react');
+const buildArray = require('build-array');
+const ReactRedux = require('react-redux');
+const Chart = require('./chart');
+const actions = require('./actions');
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  subscribe,
+  unsubscribe
+} = actions;
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    windowSize: state.windowSize,
+    data: state[ownProps.id]
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    subscribe: () => {
+      return dispatch(subscribe(ownProps.id));
+    },
+    unsubscribe: () => {
+      return unsubscribe(ownProps.id);
+    }
+  }
+};
+
+const Row = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(React.createClass({
+  componentWillMount: function() {
+    this.props.subscribe();
+  },
+  componentWillUnmount: function() {
+    this.props.unsubscribe();
+  },
+  render: function() {
+    const {
+      data = {},
+      windowSize
+    } = this.props;
+
+    const charts = Object.keys(data).map((key, i, arr) => {
+      if (!Chart[key]) {
+        return null;
+      }
+
+      const chart = React.createElement(Chart[key], {
+        data: data[key],
+        windowSize
+      });
+
+      return (
+        <div key={key} className={`col-xs-${12/arr.length}`}>
+          {chart}
+        </div>
+      );
+    });
+
+    return (
+      <div className='row'>
+        {charts}
+      </div>
+    );
+  }
+}));
+
+module.exports = ({
+  rows
+}) => {
+  const _rows = buildArray(rows).map((v, i) => {
+    return (
+      <Row id={i} key={i} />
+    );
+  });
+
+  return (
+    <div>
+      {_rows}
+    </div>
+  );
+};

spikes/leak/src/client/root.js

@@ -0,0 +1,24 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const Matrix = require('./matrix');
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <Matrix rows={4} />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/leak/src/client/store.js

@@ -0,0 +1,21 @@
+const createLogger = require('redux-logger');
+const promiseMiddleware = require('redux-promise-middleware').default;
+const thunk = require('redux-thunk').default;
+const redux = require('redux');
+const reducer = require('./actions');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state, applyMiddleware(
+    createLogger({
+      predicate: (getState, action) => action.type !== 'UPDATE_STATS'
+    }),
+    promiseMiddleware(),
+    thunk
+  ));
+};

spikes/leak/src/plugins.js

@@ -1,17 +0,0 @@
-module.exports = [{
-  register: require('good'),
-  options: {
-    reporters: {
-      console: [{
-        module: 'good-squeeze',
-        name: 'Squeeze',
-        args: [{
-          response: '*',
-          log: '*'
-        }]
-      }, {
-        module: 'good-console'
-      }, 'stdout']
-    }
-  }
-}];

spikes/leak/src/server/plugins.js

@@ -0,0 +1,29 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'), {
+  register: require('good'),
+  options: {
+    reporters: {
+      console: [{
+        module: 'good-squeeze',
+        name: 'Squeeze',
+        args: [{
+          response: '*',
+          log: '*'
+        }]
+      }, {
+        module: 'good-console'
+      }, 'stdout']
+    }
+  }
+}, {
+  register: require('hapi-webpack-dev-plugin'),
+  options: {
+    compiler: webpack(cfg),
+    devIndex: path.join(__dirname, '../static')
+  }
+}];

spikes/leak/src/webpack.config.js

@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, '../static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      'd3': 'd3'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: '../static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);

spikes/leak/static/index.html

@@ -0,0 +1,973 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <style>
+      .container-fluid,
+      .container {
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      .container-fluid {
+        padding-right: 2rem;
+        padding-left: 2rem;
+      }
+
+      .row {
+        box-sizing: border-box;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 1 auto;
+        flex: 0 1 auto;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        margin-right: -0.5rem;
+        margin-left: -0.5rem;
+      }
+
+      .row.reverse {
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      }
+
+      .col.reverse {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+      }
+
+      .col-xs,
+      .col-xs-1,
+      .col-xs-2,
+      .col-xs-3,
+      .col-xs-4,
+      .col-xs-5,
+      .col-xs-6,
+      .col-xs-7,
+      .col-xs-8,
+      .col-xs-9,
+      .col-xs-10,
+      .col-xs-11,
+      .col-xs-12,
+      .col-xs-offset-0,
+      .col-xs-offset-1,
+      .col-xs-offset-2,
+      .col-xs-offset-3,
+      .col-xs-offset-4,
+      .col-xs-offset-5,
+      .col-xs-offset-6,
+      .col-xs-offset-7,
+      .col-xs-offset-8,
+      .col-xs-offset-9,
+      .col-xs-offset-10,
+      .col-xs-offset-11,
+      .col-xs-offset-12 {
+        box-sizing: border-box;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding-right: 0.5rem;
+        padding-left: 0.5rem;
+      }
+
+      .col-xs {
+        -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        max-width: 100%;
+      }
+
+      .col-xs-1 {
+        -ms-flex-preferred-size: 8.33333333%;
+        flex-basis: 8.33333333%;
+        max-width: 8.33333333%;
+      }
+
+      .col-xs-2 {
+        -ms-flex-preferred-size: 16.66666667%;
+        flex-basis: 16.66666667%;
+        max-width: 16.66666667%;
+      }
+
+      .col-xs-3 {
+        -ms-flex-preferred-size: 25%;
+        flex-basis: 25%;
+        max-width: 25%;
+      }
+
+      .col-xs-4 {
+        -ms-flex-preferred-size: 33.33333333%;
+        flex-basis: 33.33333333%;
+        max-width: 33.33333333%;
+      }
+
+      .col-xs-5 {
+        -ms-flex-preferred-size: 41.66666667%;
+        flex-basis: 41.66666667%;
+        max-width: 41.66666667%;
+      }
+
+      .col-xs-6 {
+        -ms-flex-preferred-size: 50%;
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+
+      .col-xs-7 {
+        -ms-flex-preferred-size: 58.33333333%;
+        flex-basis: 58.33333333%;
+        max-width: 58.33333333%;
+      }
+
+      .col-xs-8 {
+        -ms-flex-preferred-size: 66.66666667%;
+        flex-basis: 66.66666667%;
+        max-width: 66.66666667%;
+      }
+
+      .col-xs-9 {
+        -ms-flex-preferred-size: 75%;
+        flex-basis: 75%;
+        max-width: 75%;
+      }
+
+      .col-xs-10 {
+        -ms-flex-preferred-size: 83.33333333%;
+        flex-basis: 83.33333333%;
+        max-width: 83.33333333%;
+      }
+
+      .col-xs-11 {
+        -ms-flex-preferred-size: 91.66666667%;
+        flex-basis: 91.66666667%;
+        max-width: 91.66666667%;
+      }
+
+      .col-xs-12 {
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        max-width: 100%;
+      }
+
+      .col-xs-offset-0 {
+        margin-left: 0;
+      }
+
+      .col-xs-offset-1 {
+        margin-left: 8.33333333%;
+      }
+
+      .col-xs-offset-2 {
+        margin-left: 16.66666667%;
+      }
+
+      .col-xs-offset-3 {
+        margin-left: 25%;
+      }
+
+      .col-xs-offset-4 {
+        margin-left: 33.33333333%;
+      }
+
+      .col-xs-offset-5 {
+        margin-left: 41.66666667%;
+      }
+
+      .col-xs-offset-6 {
+        margin-left: 50%;
+      }
+
+      .col-xs-offset-7 {
+        margin-left: 58.33333333%;
+      }
+
+      .col-xs-offset-8 {
+        margin-left: 66.66666667%;
+      }
+
+      .col-xs-offset-9 {
+        margin-left: 75%;
+      }
+
+      .col-xs-offset-10 {
+        margin-left: 83.33333333%;
+      }
+
+      .col-xs-offset-11 {
+        margin-left: 91.66666667%;
+      }
+
+      .start-xs {
+        -webkit-box-pack: start;
+        -ms-flex-pack: start;
+        justify-content: flex-start;
+        text-align: start;
+      }
+
+      .center-xs {
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        text-align: center;
+      }
+
+      .end-xs {
+        -webkit-box-pack: end;
+        -ms-flex-pack: end;
+        justify-content: flex-end;
+        text-align: end;
+      }
+
+      .top-xs {
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+      }
+
+      .middle-xs {
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .bottom-xs {
+        -webkit-box-align: end;
+        -ms-flex-align: end;
+        align-items: flex-end;
+      }
+
+      .around-xs {
+        -ms-flex-pack: distribute;
+        justify-content: space-around;
+      }
+
+      .between-xs {
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+      }
+
+      .first-xs {
+        -webkit-box-ordinal-group: 0;
+        -ms-flex-order: -1;
+        order: -1;
+      }
+
+      .last-xs {
+        -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+        order: 1;
+      }
+
+      @media only screen and (min-width: 48em) {
+        .container {
+          width: 49rem;
+        }
+
+        .col-sm,
+        .col-sm-1,
+        .col-sm-2,
+        .col-sm-3,
+        .col-sm-4,
+        .col-sm-5,
+        .col-sm-6,
+        .col-sm-7,
+        .col-sm-8,
+        .col-sm-9,
+        .col-sm-10,
+        .col-sm-11,
+        .col-sm-12,
+        .col-sm-offset-0,
+        .col-sm-offset-1,
+        .col-sm-offset-2,
+        .col-sm-offset-3,
+        .col-sm-offset-4,
+        .col-sm-offset-5,
+        .col-sm-offset-6,
+        .col-sm-offset-7,
+        .col-sm-offset-8,
+        .col-sm-offset-9,
+        .col-sm-offset-10,
+        .col-sm-offset-11,
+        .col-sm-offset-12 {
+          box-sizing: border-box;
+          -webkit-box-flex: 0;
+          -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+          padding-right: 0.5rem;
+          padding-left: 0.5rem;
+        }
+
+        .col-sm {
+          -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+          flex-grow: 1;
+          -ms-flex-preferred-size: 0;
+          flex-basis: 0;
+          max-width: 100%;
+        }
+
+        .col-sm-1 {
+          -ms-flex-preferred-size: 8.33333333%;
+          flex-basis: 8.33333333%;
+          max-width: 8.33333333%;
+        }
+
+        .col-sm-2 {
+          -ms-flex-preferred-size: 16.66666667%;
+          flex-basis: 16.66666667%;
+          max-width: 16.66666667%;
+        }
+
+        .col-sm-3 {
+          -ms-flex-preferred-size: 25%;
+          flex-basis: 25%;
+          max-width: 25%;
+        }
+
+        .col-sm-4 {
+          -ms-flex-preferred-size: 33.33333333%;
+          flex-basis: 33.33333333%;
+          max-width: 33.33333333%;
+        }
+
+        .col-sm-5 {
+          -ms-flex-preferred-size: 41.66666667%;
+          flex-basis: 41.66666667%;
+          max-width: 41.66666667%;
+        }
+
+        .col-sm-6 {
+          -ms-flex-preferred-size: 50%;
+          flex-basis: 50%;
+          max-width: 50%;
+        }
+
+        .col-sm-7 {
+          -ms-flex-preferred-size: 58.33333333%;
+          flex-basis: 58.33333333%;
+          max-width: 58.33333333%;
+        }
+
+        .col-sm-8 {
+          -ms-flex-preferred-size: 66.66666667%;
+          flex-basis: 66.66666667%;
+          max-width: 66.66666667%;
+        }
+
+        .col-sm-9 {
+          -ms-flex-preferred-size: 75%;
+          flex-basis: 75%;
+          max-width: 75%;
+        }
+
+        .col-sm-10 {
+          -ms-flex-preferred-size: 83.33333333%;
+          flex-basis: 83.33333333%;
+          max-width: 83.33333333%;
+        }
+
+        .col-sm-11 {
+          -ms-flex-preferred-size: 91.66666667%;
+          flex-basis: 91.66666667%;
+          max-width: 91.66666667%;
+        }
+
+        .col-sm-12 {
+          -ms-flex-preferred-size: 100%;
+          flex-basis: 100%;
+          max-width: 100%;
+        }
+
+        .col-sm-offset-0 {
+          margin-left: 0;
+        }
+
+        .col-sm-offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .col-sm-offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .col-sm-offset-3 {
+          margin-left: 25%;
+        }
+
+        .col-sm-offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .col-sm-offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .col-sm-offset-6 {
+          margin-left: 50%;
+        }
+
+        .col-sm-offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .col-sm-offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .col-sm-offset-9 {
+          margin-left: 75%;
+        }
+
+        .col-sm-offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .col-sm-offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .start-sm {
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          text-align: start;
+        }
+
+        .center-sm {
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .end-sm {
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+          text-align: end;
+        }
+
+        .top-sm {
+          -webkit-box-align: start;
+          -ms-flex-align: start;
+          align-items: flex-start;
+        }
+
+        .middle-sm {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .bottom-sm {
+          -webkit-box-align: end;
+          -ms-flex-align: end;
+          align-items: flex-end;
+        }
+
+        .around-sm {
+          -ms-flex-pack: distribute;
+          justify-content: space-around;
+        }
+
+        .between-sm {
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+
+        .first-sm {
+          -webkit-box-ordinal-group: 0;
+          -ms-flex-order: -1;
+          order: -1;
+        }
+
+        .last-sm {
+          -webkit-box-ordinal-group: 2;
+          -ms-flex-order: 1;
+          order: 1;
+        }
+      }
+
+      @media only screen and (min-width: 64em) {
+        .container {
+          width: 65rem;
+        }
+
+        .col-md,
+        .col-md-1,
+        .col-md-2,
+        .col-md-3,
+        .col-md-4,
+        .col-md-5,
+        .col-md-6,
+        .col-md-7,
+        .col-md-8,
+        .col-md-9,
+        .col-md-10,
+        .col-md-11,
+        .col-md-12,
+        .col-md-offset-0,
+        .col-md-offset-1,
+        .col-md-offset-2,
+        .col-md-offset-3,
+        .col-md-offset-4,
+        .col-md-offset-5,
+        .col-md-offset-6,
+        .col-md-offset-7,
+        .col-md-offset-8,
+        .col-md-offset-9,
+        .col-md-offset-10,
+        .col-md-offset-11,
+        .col-md-offset-12 {
+          box-sizing: border-box;
+          -webkit-box-flex: 0;
+          -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+          padding-right: 0.5rem;
+          padding-left: 0.5rem;
+        }
+
+        .col-md {
+          -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+          flex-grow: 1;
+          -ms-flex-preferred-size: 0;
+          flex-basis: 0;
+          max-width: 100%;
+        }
+
+        .col-md-1 {
+          -ms-flex-preferred-size: 8.33333333%;
+          flex-basis: 8.33333333%;
+          max-width: 8.33333333%;
+        }
+
+        .col-md-2 {
+          -ms-flex-preferred-size: 16.66666667%;
+          flex-basis: 16.66666667%;
+          max-width: 16.66666667%;
+        }
+
+        .col-md-3 {
+          -ms-flex-preferred-size: 25%;
+          flex-basis: 25%;
+          max-width: 25%;
+        }
+
+        .col-md-4 {
+          -ms-flex-preferred-size: 33.33333333%;
+          flex-basis: 33.33333333%;
+          max-width: 33.33333333%;
+        }
+
+        .col-md-5 {
+          -ms-flex-preferred-size: 41.66666667%;
+          flex-basis: 41.66666667%;
+          max-width: 41.66666667%;
+        }
+
+        .col-md-6 {
+          -ms-flex-preferred-size: 50%;
+          flex-basis: 50%;
+          max-width: 50%;
+        }
+
+        .col-md-7 {
+          -ms-flex-preferred-size: 58.33333333%;
+          flex-basis: 58.33333333%;
+          max-width: 58.33333333%;
+        }
+
+        .col-md-8 {
+          -ms-flex-preferred-size: 66.66666667%;
+          flex-basis: 66.66666667%;
+          max-width: 66.66666667%;
+        }
+
+        .col-md-9 {
+          -ms-flex-preferred-size: 75%;
+          flex-basis: 75%;
+          max-width: 75%;
+        }
+
+        .col-md-10 {
+          -ms-flex-preferred-size: 83.33333333%;
+          flex-basis: 83.33333333%;
+          max-width: 83.33333333%;
+        }
+
+        .col-md-11 {
+          -ms-flex-preferred-size: 91.66666667%;
+          flex-basis: 91.66666667%;
+          max-width: 91.66666667%;
+        }
+
+        .col-md-12 {
+          -ms-flex-preferred-size: 100%;
+          flex-basis: 100%;
+          max-width: 100%;
+        }
+
+        .col-md-offset-0 {
+          margin-left: 0;
+        }
+
+        .col-md-offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .col-md-offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .col-md-offset-3 {
+          margin-left: 25%;
+        }
+
+        .col-md-offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .col-md-offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .col-md-offset-6 {
+          margin-left: 50%;
+        }
+
+        .col-md-offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .col-md-offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .col-md-offset-9 {
+          margin-left: 75%;
+        }
+
+        .col-md-offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .col-md-offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .start-md {
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          text-align: start;
+        }
+
+        .center-md {
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .end-md {
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+          text-align: end;
+        }
+
+        .top-md {
+          -webkit-box-align: start;
+          -ms-flex-align: start;
+          align-items: flex-start;
+        }
+
+        .middle-md {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .bottom-md {
+          -webkit-box-align: end;
+          -ms-flex-align: end;
+          align-items: flex-end;
+        }
+
+        .around-md {
+          -ms-flex-pack: distribute;
+          justify-content: space-around;
+        }
+
+        .between-md {
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+
+        .first-md {
+          -webkit-box-ordinal-group: 0;
+          -ms-flex-order: -1;
+          order: -1;
+        }
+
+        .last-md {
+          -webkit-box-ordinal-group: 2;
+          -ms-flex-order: 1;
+          order: 1;
+        }
+      }
+
+      @media only screen and (min-width: 75em) {
+        .container {
+          width: 76rem;
+        }
+
+        .col-lg,
+        .col-lg-1,
+        .col-lg-2,
+        .col-lg-3,
+        .col-lg-4,
+        .col-lg-5,
+        .col-lg-6,
+        .col-lg-7,
+        .col-lg-8,
+        .col-lg-9,
+        .col-lg-10,
+        .col-lg-11,
+        .col-lg-12,
+        .col-lg-offset-0,
+        .col-lg-offset-1,
+        .col-lg-offset-2,
+        .col-lg-offset-3,
+        .col-lg-offset-4,
+        .col-lg-offset-5,
+        .col-lg-offset-6,
+        .col-lg-offset-7,
+        .col-lg-offset-8,
+        .col-lg-offset-9,
+        .col-lg-offset-10,
+        .col-lg-offset-11,
+        .col-lg-offset-12 {
+          box-sizing: border-box;
+          -webkit-box-flex: 0;
+          -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+          padding-right: 0.5rem;
+          padding-left: 0.5rem;
+        }
+
+        .col-lg {
+          -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+          flex-grow: 1;
+          -ms-flex-preferred-size: 0;
+          flex-basis: 0;
+          max-width: 100%;
+        }
+
+        .col-lg-1 {
+          -ms-flex-preferred-size: 8.33333333%;
+          flex-basis: 8.33333333%;
+          max-width: 8.33333333%;
+        }
+
+        .col-lg-2 {
+          -ms-flex-preferred-size: 16.66666667%;
+          flex-basis: 16.66666667%;
+          max-width: 16.66666667%;
+        }
+
+        .col-lg-3 {
+          -ms-flex-preferred-size: 25%;
+          flex-basis: 25%;
+          max-width: 25%;
+        }
+
+        .col-lg-4 {
+          -ms-flex-preferred-size: 33.33333333%;
+          flex-basis: 33.33333333%;
+          max-width: 33.33333333%;
+        }
+
+        .col-lg-5 {
+          -ms-flex-preferred-size: 41.66666667%;
+          flex-basis: 41.66666667%;
+          max-width: 41.66666667%;
+        }
+
+        .col-lg-6 {
+          -ms-flex-preferred-size: 50%;
+          flex-basis: 50%;
+          max-width: 50%;
+        }
+
+        .col-lg-7 {
+          -ms-flex-preferred-size: 58.33333333%;
+          flex-basis: 58.33333333%;
+          max-width: 58.33333333%;
+        }
+
+        .col-lg-8 {
+          -ms-flex-preferred-size: 66.66666667%;
+          flex-basis: 66.66666667%;
+          max-width: 66.66666667%;
+        }
+
+        .col-lg-9 {
+          -ms-flex-preferred-size: 75%;
+          flex-basis: 75%;
+          max-width: 75%;
+        }
+
+        .col-lg-10 {
+          -ms-flex-preferred-size: 83.33333333%;
+          flex-basis: 83.33333333%;
+          max-width: 83.33333333%;
+        }
+
+        .col-lg-11 {
+          -ms-flex-preferred-size: 91.66666667%;
+          flex-basis: 91.66666667%;
+          max-width: 91.66666667%;
+        }
+
+        .col-lg-12 {
+          -ms-flex-preferred-size: 100%;
+          flex-basis: 100%;
+          max-width: 100%;
+        }
+
+        .col-lg-offset-0 {
+          margin-left: 0;
+        }
+
+        .col-lg-offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .col-lg-offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .col-lg-offset-3 {
+          margin-left: 25%;
+        }
+
+        .col-lg-offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .col-lg-offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .col-lg-offset-6 {
+          margin-left: 50%;
+        }
+
+        .col-lg-offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .col-lg-offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .col-lg-offset-9 {
+          margin-left: 75%;
+        }
+
+        .col-lg-offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .col-lg-offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .start-lg {
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          text-align: start;
+        }
+
+        .center-lg {
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .end-lg {
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+          text-align: end;
+        }
+
+        .top-lg {
+          -webkit-box-align: start;
+          -ms-flex-align: start;
+          align-items: flex-start;
+        }
+
+        .middle-lg {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .bottom-lg {
+          -webkit-box-align: end;
+          -ms-flex-align: end;
+          align-items: flex-end;
+        }
+
+        .around-lg {
+          -ms-flex-pack: distribute;
+          justify-content: space-around;
+        }
+
+        .between-lg {
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+
+        .first-lg {
+          -webkit-box-ordinal-group: 0;
+          -ms-flex-order: -1;
+          order: -1;
+        }
+
+        .last-lg {
+          -webkit-box-ordinal-group: 2;
+          -ms-flex-order: 1;
+          order: 1;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>