From 466fe72459542acc54e6e6fcd777df24d73614c2 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 14:08:47 +0000
Subject: [PATCH 1/9] sorting stories alphabetically

---
 ui/.storybook/config.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js
index 404a63a1..61c63a83 100644
--- a/ui/.storybook/config.js
+++ b/ui/.storybook/config.js
@@ -3,7 +3,13 @@ const { configure } = require('@kadira/storybook');
 const req = require.context('../src/components', true, /story.js$/)
 
 function loadStories() {
-  req.keys().forEach((filename) => req(filename));
+  let stories = req.keys();
+      stories = stories.sort();
+
+  stories.forEach( story => req(story));
+
+  // Fallback to stories/index.js file for anything that
+  // hasn't been moved
   require('../stories');
 }
 

From 8f2e140cbe2674ad7d4fbc4441c8d4cd3294c49a Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 14:22:28 +0000
Subject: [PATCH 2/9] moving stories to directory folders

---
 ui/src/components/checkbox/story.js      |  18 ++
 ui/src/components/close/story.js         |  20 ++
 ui/src/components/input/story.js         |  35 +++
 ui/src/components/modal/story.js         |  17 ++
 ui/src/components/notification/story.js  |  34 +++
 ui/src/components/pagination/story.js    |  20 ++
 ui/src/components/radio-group/story.js   |  27 +++
 ui/src/components/radio/story.js         |  20 ++
 ui/src/components/range-slider/story.js  |  12 ++
 ui/src/components/select-custom/story.js |  28 +++
 ui/src/components/select/story.js        |  26 +++
 ui/src/components/tabs/story.js          |  20 ++
 ui/src/components/toggle/story.js        |  30 +++
 ui/src/components/tooltip/story.js       |  29 +++
 ui/src/components/widget/story.js        |  24 +++
 ui/stories/index.js                      | 261 -----------------------
 16 files changed, 360 insertions(+), 261 deletions(-)
 create mode 100644 ui/src/components/checkbox/story.js
 create mode 100644 ui/src/components/close/story.js
 create mode 100644 ui/src/components/input/story.js
 create mode 100644 ui/src/components/modal/story.js
 create mode 100644 ui/src/components/notification/story.js
 create mode 100644 ui/src/components/pagination/story.js
 create mode 100644 ui/src/components/radio-group/story.js
 create mode 100644 ui/src/components/radio/story.js
 create mode 100644 ui/src/components/range-slider/story.js
 create mode 100644 ui/src/components/select-custom/story.js
 create mode 100644 ui/src/components/select/story.js
 create mode 100644 ui/src/components/tabs/story.js
 create mode 100644 ui/src/components/toggle/story.js
 create mode 100644 ui/src/components/tooltip/story.js
 create mode 100644 ui/src/components/widget/story.js

diff --git a/ui/src/components/checkbox/story.js b/ui/src/components/checkbox/story.js
new file mode 100644
index 00000000..bdbebdab
--- /dev/null
+++ b/ui/src/components/checkbox/story.js
@@ -0,0 +1,18 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Checkbox = require('./');
+
+storiesOf('Checkbox', module)
+  .add('Default', () => (
+    <Checkbox />
+  ))
+  .add('Checked', () => (
+    <Checkbox checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Checkbox disabled />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/close/story.js b/ui/src/components/close/story.js
new file mode 100644
index 00000000..2776d6e2
--- /dev/null
+++ b/ui/src/components/close/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Close = require('./');
+
+storiesOf('Close', module)
+  .add('Default', () => (
+    <Base
+      style={{
+        position: 'relative',
+        width: 60
+      }}
+    >
+      <Close onClick={function noop() {}} />
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/input/story.js b/ui/src/components/input/story.js
new file mode 100644
index 00000000..af8538db
--- /dev/null
+++ b/ui/src/components/input/story.js
@@ -0,0 +1,35 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Input = require('./');
+
+storiesOf('Input', module)
+  .add('Default', () => (
+    <Base>
+      <Input placeholder="I am the placeholder" />
+    </Base>
+  ))
+  .add('type=email', () => (
+    <Base>
+      <Input
+        label='Email Address'
+        placeholder='Enter email'
+        type='email'
+      >
+        <small>We&apos;ll never share your email with anyone else.</small>
+      </Input>
+    </Base>
+  ))
+  .add('Error', () => (
+    <Base>
+      <Input
+        error="Somethings missing"
+        placeholder="There was an error"
+        value="alexw/makeusproud.com"
+      />
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/modal/story.js b/ui/src/components/modal/story.js
new file mode 100644
index 00000000..74a142fc
--- /dev/null
+++ b/ui/src/components/modal/story.js
@@ -0,0 +1,17 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Modal = require('./');
+
+storiesOf('Modal', module)
+  .add('Default', () => (
+    <Base>
+      <Modal>
+        <h2>This is the Modal</h2>
+      </Modal>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/notification/story.js b/ui/src/components/notification/story.js
new file mode 100644
index 00000000..5c126b90
--- /dev/null
+++ b/ui/src/components/notification/story.js
@@ -0,0 +1,34 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Notificaton = require('./');
+
+storiesOf('Notificaton', module)
+  .add('Default', () => (
+    <Base>
+      <Notificaton>
+        <span>This is the default content</span>
+      </Notificaton>
+    </Base>
+  ))
+  .add('Success', () => (
+    <Base>
+      <Notificaton
+        close={function noop() {}}
+        type="success"
+      >
+        <span>This is a success notification that is closable</span>
+      </Notificaton>
+    </Base>
+  ))
+  .add('Alert', () => (
+    <Base>
+      <Notificaton type="alert">
+        <span>This is the alert content</span>
+      </Notificaton>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/pagination/story.js b/ui/src/components/pagination/story.js
new file mode 100644
index 00000000..284fb49e
--- /dev/null
+++ b/ui/src/components/pagination/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Pagination = require('./');
+
+storiesOf('Pagination', module)
+  .add('Default', () => (
+    <Pagination>
+      <a>
+        <span>&laquo;</span>
+        <span>Previous</span>
+      </a>
+      <a>1</a>
+      <a active>2</a>
+      <a>3</a>
+    </Pagination>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/radio-group/story.js b/ui/src/components/radio-group/story.js
new file mode 100644
index 00000000..09d7b34f
--- /dev/null
+++ b/ui/src/components/radio-group/story.js
@@ -0,0 +1,27 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const RadioGroup = require('./');
+const Radio = require('./item');
+
+
+storiesOf('Radio Group', module)
+  .add('Default', () => (
+    <Base>
+      <RadioGroup>
+        <Radio name='hello' value='default'>
+          Video killed the radio star
+        </Radio>
+        <Radio name='hello' value='fancy'>
+          Video killed the radio star
+        </Radio>
+        <Radio name='hello' value='none'>
+          Video killed the radio star
+        </Radio>
+      </RadioGroup>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/radio/story.js b/ui/src/components/radio/story.js
new file mode 100644
index 00000000..ed9697ad
--- /dev/null
+++ b/ui/src/components/radio/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Radio = require('./');
+
+storiesOf('Radio', module)
+  .add('Default', () => (
+    <Radio>
+      Video killed the radio star
+    </Radio>
+  ))
+  .add('Checked', () => (
+    <Radio checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Radio disabled />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/range-slider/story.js b/ui/src/components/range-slider/story.js
new file mode 100644
index 00000000..21e479f5
--- /dev/null
+++ b/ui/src/components/range-slider/story.js
@@ -0,0 +1,12 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const RangeSlider = require('./');
+
+storiesOf('Range Slider', module)
+  .add('Default', () => (
+    <RangeSlider />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/select-custom/story.js b/ui/src/components/select-custom/story.js
new file mode 100644
index 00000000..7763f7fa
--- /dev/null
+++ b/ui/src/components/select-custom/story.js
@@ -0,0 +1,28 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  selectData
+} = require('../../shared/fake-data');
+
+const SelectCustom = require('./');
+
+storiesOf('Select Custom', module)
+  .add('Default', () => (
+    <SelectCustom
+      label="This is the label"
+      onChange={function noop() {}}
+      options={selectData}
+    />
+  ))
+  .add('Multiple', () => (
+    <SelectCustom
+      label="This is the label"
+      multi
+      onChange={function noop() {}}
+      options={selectData}
+    />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/select/story.js b/ui/src/components/select/story.js
new file mode 100644
index 00000000..871941c3
--- /dev/null
+++ b/ui/src/components/select/story.js
@@ -0,0 +1,26 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Select = require('./');
+
+storiesOf('Select', module)
+  .add('Default', () => (
+    <Select label='example select'>
+      <option>Apple</option>
+      <option>Banana</option>
+      <option>Pear</option>
+      <option>Orange</option>
+    </Select>
+  ))
+  .add('multiple', () => (
+    <Select label='example multiple select' multiple>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </Select>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/tabs/story.js b/ui/src/components/tabs/story.js
new file mode 100644
index 00000000..f23bb076
--- /dev/null
+++ b/ui/src/components/tabs/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Tabs = require('./');
+const Tab = require('./tab');
+
+storiesOf('Tabs', module)
+  .add('Default', () => (
+    <Tabs name='my-tab-group'>
+      <Tab title='Containers'>
+        <h1>Containers</h1>
+      </Tab>
+      <Tab title='Users'>
+        <h1>User</h1>
+      </Tab>
+    </Tabs>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/toggle/story.js b/ui/src/components/toggle/story.js
new file mode 100644
index 00000000..6af792bc
--- /dev/null
+++ b/ui/src/components/toggle/story.js
@@ -0,0 +1,30 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Toggle = require('./');
+
+storiesOf('Toggle', module)
+  .add('default', () => (
+    <Toggle checked />
+  ))
+  .add('checked', () => (
+    <Toggle
+      defaultChecked
+      options={[
+        {
+          label: 'Topology',
+          checked: true
+        },
+        {
+          label: 'List',
+          checked: false
+        }
+      ]}
+    />
+  ))
+  .add('no props', () => (
+    <Toggle />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/tooltip/story.js b/ui/src/components/tooltip/story.js
new file mode 100644
index 00000000..260d6120
--- /dev/null
+++ b/ui/src/components/tooltip/story.js
@@ -0,0 +1,29 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Tooltip = require('./');
+
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <Tooltip>
+      <li>One</li>
+      <li>Two</li>
+      <li>Three</li>
+    </Tooltip>
+  ))
+  .add('custom position', () => {
+    const arrowPosition = {
+      left: '90%',
+      bottom: '100%'
+    };
+    return (
+      <Tooltip arrowPosition={arrowPosition}>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+      </Tooltip>
+    );
+  });
\ No newline at end of file
diff --git a/ui/src/components/widget/story.js b/ui/src/components/widget/story.js
new file mode 100644
index 00000000..a2fbe982
--- /dev/null
+++ b/ui/src/components/widget/story.js
@@ -0,0 +1,24 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Widget = require('./');
+
+storiesOf('Widget', module)
+  .add('single', () => (
+    <Widget
+      checked
+      name='flag'
+      selectable='single'
+      value='flag_1'
+    >
+      <img
+        alt='england flag'
+        // eslint-disable-next-line max-len
+        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
+      />
+      <p>Some text</p>
+    </Widget>
+  ));
\ No newline at end of file
diff --git a/ui/stories/index.js b/ui/stories/index.js
index ed0100c8..f49080cb 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -8,10 +8,8 @@ const {
 const {
   Base,
   Container,
-  Checkbox,
   Row,
   Column,
-  Close,
   AddMetric: {
     AddMetricButton,
     AddMetricDescription,
@@ -19,7 +17,6 @@ const {
     AddMetricTile,
     AddMetricTitle
   },
-  Input,
   List: {
     ListItemDescription,
     ListItemHeader,
@@ -39,27 +36,8 @@ const {
     MiniMetricSubtitle,
     MiniMetricView
   },
-  Modal,
-  Notificaton,
-  Pagination,
-  RangeSlider,
-  Select,
-  SelectCustom,
-  Tabs,
-  Tab,
-  Toggle,
-  Tooltip,
-  Widget,
-  Radio,
-  RadioGroup
 } = require('../src/');
 
-const fakeData = require('../src/shared/fake-data');
-
-const {
-	selectData
-} = fakeData;
-
 const styles = {
   base: {
     backgroundColor: '#FFEBEE'
@@ -148,245 +126,6 @@ storiesOf('Add Metric', module)
     </Base>
   ));
 
-storiesOf('Checkbox', module)
-  .add('Default', () => (
-    <Checkbox />
-  ))
-  .add('Checked', () => (
-    <Checkbox checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Checkbox disabled />
-  ));
-
-storiesOf('Radio', module)
-  .add('Default', () => (
-    <Radio>
-     Video killed the radio star
-    </Radio>
-  ))
-  .add('Checked', () => (
-    <Radio checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Radio disabled />
-  ));
-
-storiesOf('Input', module)
-  .add('Default', () => (
-    <Base>
-      <Input placeholder="I am the placeholder" />
-    </Base>
-  ))
-  .add('type=email', () => (
-    <Base>
-      <Input
-        label='Email Address'
-        placeholder='Enter email'
-        type='email'
-      >
-        <small>We&apos;ll never share your email with anyone else.</small>
-      </Input>
-    </Base>
-  ))
-  .add('Error', () => (
-    <Base>
-      <Input
-        error="Somethings missing"
-        placeholder="There was an error"
-        value="alexw/makeusproud.com"
-      />
-    </Base>
-  ));
-
-storiesOf('Modal', module)
-  .add('Default', () => (
-    <Modal>
-      <h2>This is the Modal</h2>
-    </Modal>
-  ));
-
-storiesOf('Notificaton', module)
-  .add('Default', () => (
-    <Base>
-      <Notificaton>
-        <span>This is the default content</span>
-      </Notificaton>
-    </Base>
-  ))
-  .add('Success', () => (
-    <Base>
-      <Notificaton
-        close={function noop() {}}
-        type="success"
-      >
-        <span>This is a success notification that is closable</span>
-      </Notificaton>
-    </Base>
-  ))
-  .add('Alert', () => (
-    <Base>
-      <Notificaton type="alert">
-        <span>This is the alert content</span>
-      </Notificaton>
-    </Base>
-  ));
-
-storiesOf('Pagination', module)
-  .add('Default', () => (
-    <Pagination>
-      <a>
-        <span>&laquo;</span>
-        <span>Previous</span>
-      </a>
-      <a>1</a>
-      <a active>2</a>
-      <a>3</a>
-    </Pagination>
-  ));
-
-storiesOf('Radio Group', module)
-  .add('Default', () => (
-    <RadioGroup>
-      <Radio name='hello' value='default'>
-       Video killed the radio star
-      </Radio>
-      <Radio name='hello' value='fancy'>
-       Video killed the radio star
-      </Radio>
-      <Radio name='hello' value='none'>
-       Video killed the radio star
-      </Radio>
-    </RadioGroup>
-  ));
-
-storiesOf('RangeSlider', module)
-  .add('Default', () => (
-    <RangeSlider />
-  ));
-
-storiesOf('Select', module)
-  .add('Default', () => (
-    <Select label='example select'>
-      <option>Apple</option>
-      <option>Banana</option>
-      <option>Pear</option>
-      <option>Orange</option>
-    </Select>
-  ))
-  .add('multiple', () => (
-    <Select label='example multiple select' multiple>
-      <option>1</option>
-      <option>2</option>
-      <option>3</option>
-      <option>4</option>
-      <option>5</option>
-    </Select>
-  ));
-
-storiesOf('Select Custom', module)
-  .add('Default', () => (
-    <SelectCustom
-      label="This is the label"
-      onChange={function noop() {}}
-      options={selectData}
-    />
-  ))
-  .add('Multiple', () => (
-    <SelectCustom
-      label="This is the label"
-      multi
-      onChange={function noop() {}}
-      options={selectData}
-    />
-  ));
-
-storiesOf('Tabs', module)
-  .add('Default', () => (
-    <Tabs name='my-tab-group'>
-      <Tab title='Containers'>
-        <h1>Containers</h1>
-      </Tab>
-      <Tab title='Users'>
-        <h1>User</h1>
-      </Tab>
-    </Tabs>
-  ));
-
-storiesOf('Close', module)
-  .add('Default', () => (
-    <Base
-      style={{
-        position: 'relative',
-        width: 60
-      }}
-    >
-      <Close onClick={function noop() {}} />
-    </Base>
-  ));
-
-storiesOf('Toggle', module)
-  .add('default', () => (
-    <Toggle checked />
-  ))
-  .add('checked', () => (
-    <Toggle
-      defaultChecked
-      options={[
-        {
-          label: 'Topology',
-          checked: true
-        },
-        {
-          label: 'List',
-          checked: false
-        }
-      ]}
-    />
-  ))
-  .add('no props', () => (
-    <Toggle />
-  ));
-
-storiesOf('Tooltip', module)
-  .add('default', () => (
-    <Tooltip>
-      <li>One</li>
-      <li>Two</li>
-      <li>Three</li>
-    </Tooltip>
-  ))
-  .add('custom position', () => {
-    const arrowPosition = {
-      left: '90%',
-      bottom: '100%'
-    };
-    return (
-      <Tooltip arrowPosition={arrowPosition}>
-        <li>One</li>
-        <li>Two</li>
-        <li>Three</li>
-      </Tooltip>
-    );
-  });
-
-storiesOf('Widget', module)
-  .add('single', () => (
-    <Widget
-      checked
-      name='flag'
-      selectable='single'
-      value='flag_1'
-    >
-      <img
-        alt='england flag'
-        // eslint-disable-next-line max-len
-        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
-      />
-      <p>Some text</p>
-    </Widget>
-  ));
-
 const minMetricData = [{
   firstQuartile: 15,
   thirdQuartile: 15,

From 68b418c7d2c3f6b10348f2e8287e40d43daefc77 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 14:44:58 +0000
Subject: [PATCH 3/9] moving more components over to new storybook structure

---
 ui/src/components/add-metric/story.js      |  52 +++
 ui/src/components/list/mini-metric-data.js | 103 +++++
 ui/src/components/list/story.js            | 320 +++++++++++++++
 ui/stories/index.js                        | 454 +--------------------
 4 files changed, 481 insertions(+), 448 deletions(-)
 create mode 100644 ui/src/components/add-metric/story.js
 create mode 100644 ui/src/components/list/mini-metric-data.js
 create mode 100644 ui/src/components/list/story.js

diff --git a/ui/src/components/add-metric/story.js b/ui/src/components/add-metric/story.js
new file mode 100644
index 00000000..1ec8043d
--- /dev/null
+++ b/ui/src/components/add-metric/story.js
@@ -0,0 +1,52 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Row = require('../row');
+const Column  = require('../column');
+const AddMetric = require('./');
+
+const {
+  AddMetricButton,
+  AddMetricDescription,
+  AddMetricLink,
+  AddMetricTile,
+  AddMetricTitle
+} = AddMetric;
+
+storiesOf('Add Metric', module)
+  .add('Add Metric', () => (
+    <Base>
+      <Row>
+        <Column>
+          <AddMetricTile>
+            <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
+            <AddMetricDescription>
+              CPU usages accross all of the CPU cores.
+            </AddMetricDescription>
+            <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
+            <AddMetricButton>Add</AddMetricButton>
+          </AddMetricTile>
+        </Column>
+      </Row>
+    </Base>
+  ))
+  .add('Added Metric', () => (
+    <Base>
+      <Row>
+        <Column>
+          <AddMetricTile>
+            <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
+            <AddMetricDescription>
+              CPU usages accross all of the CPU cores.
+            </AddMetricDescription>
+            <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
+            <AddMetricButton disabled>Added</AddMetricButton>
+          </AddMetricTile>
+        </Column>
+      </Row>
+    </Base>
+  ));
diff --git a/ui/src/components/list/mini-metric-data.js b/ui/src/components/list/mini-metric-data.js
new file mode 100644
index 00000000..c1cdb615
--- /dev/null
+++ b/ui/src/components/list/mini-metric-data.js
@@ -0,0 +1,103 @@
+module.exports = [{
+  firstQuartile: 15,
+  thirdQuartile: 15,
+  median: 15,
+  max: 15,
+  min: 15,
+}, {
+  firstQuartile: 26,
+  thirdQuartile: 26,
+  median: 26,
+  max: 26,
+  min: 26,
+}, {
+  firstQuartile: 17,
+  thirdQuartile: 17,
+  median: 17,
+  max: 17,
+  min: 17,
+}, {
+  firstQuartile: 15,
+  thirdQuartile: 25,
+  median: 19,
+  max: 19,
+  min: 20,
+}, {
+  firstQuartile: 19,
+  thirdQuartile: 25,
+  median: 21,
+  max: 20,
+  min: 25,
+}, {
+  firstQuartile: 24,
+  thirdQuartile: 30,
+  median: 25,
+  max: 26,
+  min: 27,
+}, {
+  firstQuartile: 28,
+  thirdQuartile: 34,
+  median: 30,
+  max: 30,
+  min: 30,
+}, {
+  firstQuartile: 30,
+  thirdQuartile: 45,
+  median: 35,
+  max: 40,
+  min: 40,
+}, {
+  firstQuartile: 20,
+  thirdQuartile: 55,
+  median: 45,
+  max: 44,
+  min: 44,
+}, {
+  firstQuartile: 55,
+  thirdQuartile: 55,
+  median: 55,
+  max: 55,
+  min: 55,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 56,
+  median: 57,
+  max: 58,
+  min: 57,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 56,
+  median: 56,
+  max: 56,
+  min: 56,
+}, {
+  firstQuartile: 60,
+  thirdQuartile: 56,
+  median: 60,
+  max: 60,
+  min: 60,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 57,
+  median: 57,
+  max: 57,
+  min: 57,
+}, {
+  firstQuartile: 57,
+  thirdQuartile: 55,
+  median: 55,
+  max: 55,
+  min: 55,
+}, {
+  firstQuartile: 20,
+  thirdQuartile: 45,
+  median: 45,
+  max: 45,
+  min: 45,
+}, {
+  firstQuartile: 15,
+  thirdQuartile: 40,
+  median: 30,
+  max: 49,
+  min: 30,
+}];
\ No newline at end of file
diff --git a/ui/src/components/list/story.js b/ui/src/components/list/story.js
new file mode 100644
index 00000000..49da758f
--- /dev/null
+++ b/ui/src/components/list/story.js
@@ -0,0 +1,320 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Row = require('../row');
+const Column = require('../column');
+const MiniMetricData = require('./mini-metric-data');
+
+const {
+  MiniMetricGraph,
+  MiniMetricMeta,
+  MiniMetricTitle,
+  MiniMetricSubtitle,
+  MiniMetricView
+} = require('../mini-metric');
+
+const {
+  ListItemDescription,
+  ListItemHeader,
+  ListItem,
+  ListItemMeta,
+  ListItemOptions,
+  ListItemOutlet,
+  ListItemSubTitle,
+  ListItemTitle,
+  ListItemView,
+  ListItemGroupView
+} = require('./');
+
+storiesOf('List Item', module)
+  .add('default', () => (
+    <Base>
+      <ListItem>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('collapsed', () => (
+    <Base>
+      <ListItem collapsed>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('headed', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>
+            …
+          </ListItemOptions>
+        </ListItemHeader>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+      </ListItem>
+    </Base>
+  ))
+  .add('headed collapsed', () => (
+    <Base>
+      <ListItem collapsed headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>
+            …
+          </ListItemOptions>
+        </ListItemHeader>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+      </ListItem>
+    </Base>
+  ))
+  .add('stacked', () => (
+    <Base>
+      <ListItem stacked>
+        <ListItemView>
+          <ListItemMeta>
+            <ListItemTitle>Nginx 01</ListItemTitle>
+            <ListItemSubTitle>4 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOutlet>
+            Metrics
+          </ListItemOutlet>
+        </ListItemView>
+        <ListItemOptions>
+          …
+        </ListItemOptions>
+      </ListItem>
+    </Base>
+  ))
+  .add('view-group', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Percona</ListItemTitle>
+            <ListItemSubTitle>5 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>…</ListItemOptions>
+        </ListItemHeader>
+        <ListItemGroupView>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+                <ListItemDescription>Flags</ListItemDescription>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat stacked>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                Metrics
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+        </ListItemGroupView>
+      </ListItem>
+    </Base>
+  ))
+  .add('view-group with metrics', () => (
+    <Base>
+      <ListItem headed>
+        <ListItemHeader>
+          <ListItemMeta>
+            <ListItemTitle>Percona</ListItemTitle>
+            <ListItemSubTitle>5 instances</ListItemSubTitle>
+            <ListItemDescription>Flags</ListItemDescription>
+          </ListItemMeta>
+          <ListItemOptions>…</ListItemOptions>
+        </ListItemHeader>
+        <ListItemGroupView>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                <Row>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                </Row>
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+                <ListItemDescription>Flags</ListItemDescription>
+              </ListItemMeta>
+              <ListItemOutlet>
+                <Row>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                </Row>
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+          <ListItem flat stacked>
+            <ListItemView>
+              <ListItemMeta>
+                <ListItemTitle>percona_database</ListItemTitle>
+                <ListItemSubTitle>5 instances</ListItemSubTitle>
+              </ListItemMeta>
+              <ListItemOutlet>
+                <Row>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                  <Column xs={4}>
+                    <MiniMetricView borderless>
+                      <MiniMetricMeta>
+                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+                      </MiniMetricMeta>
+                      <MiniMetricGraph data={MiniMetricData} />
+                    </MiniMetricView>
+                  </Column>
+                </Row>
+              </ListItemOutlet>
+            </ListItemView>
+          </ListItem>
+        </ListItemGroupView>
+      </ListItem>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/stories/index.js b/ui/stories/index.js
index f49080cb..085d7bd4 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -10,25 +10,6 @@ const {
   Container,
   Row,
   Column,
-  AddMetric: {
-    AddMetricButton,
-    AddMetricDescription,
-    AddMetricLink,
-    AddMetricTile,
-    AddMetricTitle
-  },
-  List: {
-    ListItemDescription,
-    ListItemHeader,
-    ListItem,
-    ListItemMeta,
-    ListItemOptions,
-    ListItemOutlet,
-    ListItemSubTitle,
-    ListItemTitle,
-    ListItemView,
-    ListItemGroupView
-  },
   MiniMetric: {
     MiniMetricGraph,
     MiniMetricMeta,
@@ -38,6 +19,8 @@ const {
   },
 } = require('../src/');
 
+const MiniMetricData = require('../src/components/list/mini-metric-data');
+
 const styles = {
   base: {
     backgroundColor: '#FFEBEE'
@@ -92,144 +75,6 @@ storiesOf('Grid', module)
     </Base>
   ));
 
-storiesOf('Add Metric', module)
-  .add('Add Metric', () => (
-    <Base>
-      <Row>
-        <Column>
-          <AddMetricTile>
-            <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
-            <AddMetricDescription>
-              CPU usages accross all of the CPU cores.
-            </AddMetricDescription>
-            <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
-            <AddMetricButton>Add</AddMetricButton>
-          </AddMetricTile>
-        </Column>
-      </Row>
-    </Base>
-  ))
-  .add('Added Metric', () => (
-    <Base>
-      <Row>
-        <Column>
-          <AddMetricTile>
-            <AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
-            <AddMetricDescription>
-              CPU usages accross all of the CPU cores.
-            </AddMetricDescription>
-            <AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
-            <AddMetricButton disabled>Added</AddMetricButton>
-          </AddMetricTile>
-        </Column>
-      </Row>
-    </Base>
-  ));
-
-const minMetricData = [{
-  firstQuartile: 15,
-  thirdQuartile: 15,
-  median: 15,
-  max: 15,
-  min: 15,
-}, {
-  firstQuartile: 26,
-  thirdQuartile: 26,
-  median: 26,
-  max: 26,
-  min: 26,
-}, {
-  firstQuartile: 17,
-  thirdQuartile: 17,
-  median: 17,
-  max: 17,
-  min: 17,
-}, {
-  firstQuartile: 15,
-  thirdQuartile: 25,
-  median: 19,
-  max: 19,
-  min: 20,
-}, {
-  firstQuartile: 19,
-  thirdQuartile: 25,
-  median: 21,
-  max: 20,
-  min: 25,
-}, {
-  firstQuartile: 24,
-  thirdQuartile: 30,
-  median: 25,
-  max: 26,
-  min: 27,
-}, {
-  firstQuartile: 28,
-  thirdQuartile: 34,
-  median: 30,
-  max: 30,
-  min: 30,
-}, {
-  firstQuartile: 30,
-  thirdQuartile: 45,
-  median: 35,
-  max: 40,
-  min: 40,
-}, {
-  firstQuartile: 20,
-  thirdQuartile: 55,
-  median: 45,
-  max: 44,
-  min: 44,
-}, {
-  firstQuartile: 55,
-  thirdQuartile: 55,
-  median: 55,
-  max: 55,
-  min: 55,
-}, {
-  firstQuartile: 57,
-  thirdQuartile: 56,
-  median: 57,
-  max: 58,
-  min: 57,
-}, {
-  firstQuartile: 57,
-  thirdQuartile: 56,
-  median: 56,
-  max: 56,
-  min: 56,
-}, {
-  firstQuartile: 60,
-  thirdQuartile: 56,
-  median: 60,
-  max: 60,
-  min: 60,
-}, {
-  firstQuartile: 57,
-  thirdQuartile: 57,
-  median: 57,
-  max: 57,
-  min: 57,
-}, {
-  firstQuartile: 57,
-  thirdQuartile: 55,
-  median: 55,
-  max: 55,
-  min: 55,
-}, {
-  firstQuartile: 20,
-  thirdQuartile: 45,
-  median: 45,
-  max: 45,
-  min: 45,
-}, {
-  firstQuartile: 15,
-  thirdQuartile: 40,
-  median: 30,
-  max: 49,
-  min: 30,
-}];
-
 storiesOf('Metrics', module)
   .add('Mini Metric', () => (
     <Base>
@@ -240,7 +85,7 @@ storiesOf('Metrics', module)
               <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
               <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
             </MiniMetricMeta>
-            <MiniMetricGraph data={minMetricData} />
+            <MiniMetricGraph data={MiniMetricData} />
           </MiniMetricView>
         </Column>
         <Column xs={3}>
@@ -249,7 +94,7 @@ storiesOf('Metrics', module)
               <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
               <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
             </MiniMetricMeta>
-            <MiniMetricGraph data={minMetricData} />
+            <MiniMetricGraph data={MiniMetricData} />
           </MiniMetricView>
         </Column>
         <Column xs={3}>
@@ -258,298 +103,11 @@ storiesOf('Metrics', module)
               <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
               <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
             </MiniMetricMeta>
-            <MiniMetricGraph data={minMetricData} />
+            <MiniMetricGraph data={MiniMetricData} />
           </MiniMetricView>
         </Column>
       </Row>
     </Base>
   ));
 
-storiesOf('ListItem', module)
-  .add('default', () => (
-    <Base>
-      <ListItem>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-        <ListItemOptions>
-          …
-        </ListItemOptions>
-      </ListItem>
-    </Base>
-  ))
-  .add('collapsed', () => (
-    <Base>
-      <ListItem collapsed>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-        <ListItemOptions>
-          …
-        </ListItemOptions>
-      </ListItem>
-    </Base>
-  ))
-  .add('headed', () => (
-    <Base>
-      <ListItem headed>
-        <ListItemHeader>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOptions>
-            …
-          </ListItemOptions>
-        </ListItemHeader>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-      </ListItem>
-    </Base>
-  ))
-  .add('headed collapsed', () => (
-    <Base>
-      <ListItem collapsed headed>
-        <ListItemHeader>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOptions>
-            …
-          </ListItemOptions>
-        </ListItemHeader>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-      </ListItem>
-    </Base>
-  ))
-  .add('stacked', () => (
-    <Base>
-      <ListItem stacked>
-        <ListItemView>
-          <ListItemMeta>
-            <ListItemTitle>Nginx 01</ListItemTitle>
-            <ListItemSubTitle>4 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOutlet>
-            Metrics
-          </ListItemOutlet>
-        </ListItemView>
-        <ListItemOptions>
-          …
-        </ListItemOptions>
-      </ListItem>
-    </Base>
-  ))
-  .add('view-group', () => (
-    <Base>
-      <ListItem headed>
-        <ListItemHeader>
-          <ListItemMeta>
-            <ListItemTitle>Percona</ListItemTitle>
-            <ListItemSubTitle>5 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOptions>…</ListItemOptions>
-        </ListItemHeader>
-        <ListItemGroupView>
-          <ListItem flat>
-            <ListItemView>
-              <ListItemMeta>
-                <ListItemTitle>percona_database</ListItemTitle>
-              </ListItemMeta>
-              <ListItemOutlet>
-                Metrics
-              </ListItemOutlet>
-            </ListItemView>
-          </ListItem>
-          <ListItem flat>
-            <ListItemView>
-              <ListItemMeta>
-                <ListItemTitle>percona_database</ListItemTitle>
-                <ListItemSubTitle>5 instances</ListItemSubTitle>
-                <ListItemDescription>Flags</ListItemDescription>
-              </ListItemMeta>
-              <ListItemOutlet>
-                Metrics
-              </ListItemOutlet>
-            </ListItemView>
-          </ListItem>
-          <ListItem flat stacked>
-            <ListItemView>
-              <ListItemMeta>
-                <ListItemTitle>percona_database</ListItemTitle>
-                <ListItemSubTitle>5 instances</ListItemSubTitle>
-              </ListItemMeta>
-              <ListItemOutlet>
-                Metrics
-              </ListItemOutlet>
-            </ListItemView>
-          </ListItem>
-        </ListItemGroupView>
-      </ListItem>
-    </Base>
-  ))
-  .add('view-group with metrics', () => (
-    <Base>
-      <ListItem headed>
-        <ListItemHeader>
-          <ListItemMeta>
-            <ListItemTitle>Percona</ListItemTitle>
-            <ListItemSubTitle>5 instances</ListItemSubTitle>
-            <ListItemDescription>Flags</ListItemDescription>
-          </ListItemMeta>
-          <ListItemOptions>…</ListItemOptions>
-        </ListItemHeader>
-        <ListItemGroupView>
-          <ListItem flat>
-            <ListItemView>
-              <ListItemMeta>
-                <ListItemTitle>percona_database</ListItemTitle>
-              </ListItemMeta>
-              <ListItemOutlet>
-                <Row>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                </Row>
-              </ListItemOutlet>
-            </ListItemView>
-          </ListItem>
-          <ListItem flat>
-            <ListItemView>
-              <ListItemMeta>
-                <ListItemTitle>percona_database</ListItemTitle>
-                <ListItemSubTitle>5 instances</ListItemSubTitle>
-                <ListItemDescription>Flags</ListItemDescription>
-              </ListItemMeta>
-              <ListItemOutlet>
-                <Row>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                </Row>
-              </ListItemOutlet>
-            </ListItemView>
-          </ListItem>
-          <ListItem flat stacked>
-            <ListItemView>
-              <ListItemMeta>
-                <ListItemTitle>percona_database</ListItemTitle>
-                <ListItemSubTitle>5 instances</ListItemSubTitle>
-              </ListItemMeta>
-              <ListItemOutlet>
-                <Row>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                  <Column xs={4}>
-                    <MiniMetricView borderless>
-                      <MiniMetricMeta>
-                        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-                        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-                      </MiniMetricMeta>
-                      <MiniMetricGraph data={minMetricData} />
-                    </MiniMetricView>
-                  </Column>
-                </Row>
-              </ListItemOutlet>
-            </ListItemView>
-          </ListItem>
-        </ListItemGroupView>
-      </ListItem>
-    </Base>
-  ));
+

From 56d9a5ba463d02960066464dfd2b14d42663a358 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 17:04:07 +0000
Subject: [PATCH 4/9] creating textarea component

---
 ui/src/components/textarea/index.js  | 146 +++++++++++++++++++++++++++
 ui/src/components/textarea/readme.md |  60 +++++++++++
 ui/src/components/textarea/story.js  |  24 +++++
 ui/src/index.js                      |   1 +
 4 files changed, 231 insertions(+)
 create mode 100644 ui/src/components/textarea/index.js
 create mode 100644 ui/src/components/textarea/readme.md
 create mode 100644 ui/src/components/textarea/story.js

diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js
new file mode 100644
index 00000000..b7b0f0ad
--- /dev/null
+++ b/ui/src/components/textarea/index.js
@@ -0,0 +1,146 @@
+const React = require('react');
+
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  baseBox
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const Label = styled.label`
+  color: ${props => props.error ? colors.alert : colors.fonts.regular}
+`;
+
+const InputField = styled.textarea`
+  background: ${colors.brandSecondary};
+  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
+  display: block;
+  font-size: 16px;
+  padding: ${remcalc('15 18')};
+  visibility: visible;
+  width: 100%;
+  min-height: ${remcalc(96)};
+  ${baseBox()};
+  border-color: ${props => props.error ? colors.alert : ''};
+  
+  &:focus {
+    border-color: ${boxes.border.checked};
+    outline: none;
+  }
+`;
+
+const Error = styled.span`
+  float: right;
+  color: ${colors.alert};
+  font-size: ${remcalc(14)};
+`;
+
+const Textarea = ({
+  autoComplete,
+  autoFocus,
+  children,
+  className,
+  disabled = false,
+  error,
+  form,
+  id,
+  inputMode,
+  label,
+  labelledby,
+  list,
+  name,
+  onChange,
+  pattern,
+  placeholder,
+  readOnly,
+  required,
+  selectionDirection,
+  spellCheck,
+  style,
+  tabIndex,
+  type,
+  value
+}) => {
+  const _label = label || children;
+  const _children = label && children ? children : null;
+  const _error = error ? (<Error>{error}</Error>) : null;
+
+  return (
+    <div>
+      <Label
+        error={error}
+        htmlFor={id}
+      >
+        {_label}
+      </Label>
+      {_error}
+      <InputField
+        aria-labelledby={labelledby}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        error={error}
+        form={form}
+        id={id}
+        inputMode={inputMode}
+        list={list}
+        name={name}
+        onChange={onChange}
+        pattern={pattern}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        spellCheck={spellCheck}
+        tabIndex={tabIndex}
+        type={type}
+        value={value}
+      />
+      {_children}
+    </div>
+  );
+};
+
+Textarea.propTypes = {
+  autoComplete: React.PropTypes.string,
+  autoFocus: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  error: React.PropTypes.string,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  inputMode: React.PropTypes.string,
+  label: React.PropTypes.string,
+  labelledby: React.PropTypes.string,
+  list: React.PropTypes.string,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  pattern: React.PropTypes.string,
+  placeholder: React.PropTypes.string,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  spellCheck: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
+  type: React.PropTypes.string,
+  value: React.PropTypes.string
+};
+
+module.exports = Textarea;
diff --git a/ui/src/components/textarea/readme.md b/ui/src/components/textarea/readme.md
new file mode 100644
index 00000000..e199c638
--- /dev/null
+++ b/ui/src/components/textarea/readme.md
@@ -0,0 +1,60 @@
+# Input
+
+## demo
+
+```embed
+const  React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Input = require('./index.js');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Input
+          placeholder='Enter email'
+          label='Email Address'
+          type='email'
+        >
+          <small>We'll never share your email with anyone else.</small>
+        </Input>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Input placeholder='Password' type='password'>
+          Password
+        </Input>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Input = require('ui/input');
+
+module.exports = () => {
+  return (
+    <div>
+      <Input
+        placeholder='Enter email'
+        label='Email Address'
+        type='email'
+      >
+        <small>We'll never share your email with anyone else.</small>
+      </Input>
+      <Input placeholder='Password' type='password'>
+        Password
+      </Input>
+    </div>
+  );
+}
+```
diff --git a/ui/src/components/textarea/story.js b/ui/src/components/textarea/story.js
new file mode 100644
index 00000000..d74a5ee3
--- /dev/null
+++ b/ui/src/components/textarea/story.js
@@ -0,0 +1,24 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Textarea = require('./');
+
+storiesOf('Textarea', module)
+  .add('Default', () => (
+    <Base>
+      <Textarea placeholder="I am the placeholder" />
+    </Base>
+  ))
+  .add('Error', () => (
+    <Base>
+      <Textarea
+        error="Somethings missing"
+        placeholder="There was an error"
+        value="alexw/makeusproud.com"
+      />
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/index.js b/ui/src/index.js
index b638bdc6..89758ed4 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -24,5 +24,6 @@ module.exports = {
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   Tooltip: require('./components/tooltip'),
+  Textarea: require('./components/textarea'),
   Widget: require('./components/widget'),
 };

From 1b0fd139405e5389a5ddd2ba3460a1d1119dd0c9 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 17:05:55 +0000
Subject: [PATCH 5/9] removing height on input component

---
 ui/src/components/input/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js
index 63fa5d72..0ced95fa 100644
--- a/ui/src/components/input/index.js
+++ b/ui/src/components/input/index.js
@@ -31,12 +31,11 @@ const InputField = styled.input`
   color: ${props => props.error ? colors.alert : colors.fonts.semibold}
   display: block;
   font-size: 16px;
-  height: ${remcalc(50)};
-  padding: ${remcalc(16)};
+  padding: ${remcalc('15 18')};
   visibility: visible;
   width: 100%;
   ${baseBox()};
-  border-color: ${props => props.error ? colors.alert : 'auto'};
+  border-color: ${props => props.error ? colors.alert : ''};
   
   &:focus {
     border-color: ${boxes.border.checked};

From e12b87283a48d97d13865bbd51b1ca62868b63a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 11 Jan 2017 17:41:28 +0000
Subject: [PATCH 6/9] metrics data in state

---
 frontend/src/mock-state.json    | 189 +++++++++++++++++++++++++++++---
 frontend/src/state/selectors.js |  30 +++--
 2 files changed, 192 insertions(+), 27 deletions(-)

diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index ec6c9ce7..a5544fbb 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -65,16 +65,129 @@
         "time_of_day"
       ]
     },
-    "data": [{
-      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
-      "id": "agg-cpu-usage"
-    }, {
-      "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
-      "id": "mem-res-set-size"
-    }, {
-      "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
-      "id": "apache-http-reqs"
-    }]
+    "data": {
+      "types": [{
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
+        "id": "agg-cpu-usage"
+      }, {
+        "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
+        "id": "mem-res-set-size"
+      }, {
+        "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
+        "id": "apache-http-reqs"
+      }, {
+        "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "name": "Memory",
+        "id": "memory"
+      }],
+      "datasets": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "data": [{
+          "firstQuartile": 15,
+          "thirdQuartile": 15,
+          "median": 15,
+          "max": 15,
+          "min": 15
+        }, {
+          "firstQuartile": 26,
+          "thirdQuartile": 26,
+          "median": 26,
+          "max": 26,
+          "min": 26
+        }, {
+          "firstQuartile": 17,
+          "thirdQuartile": 17,
+          "median": 17,
+          "max": 17,
+          "min": 17
+        }, {
+          "firstQuartile": 15,
+          "thirdQuartile": 25,
+          "median": 19,
+          "max": 19,
+          "min": 20
+        }, {
+          "firstQuartile": 19,
+          "thirdQuartile": 25,
+          "median": 21,
+          "max": 20,
+          "min": 25
+        }, {
+          "firstQuartile": 24,
+          "thirdQuartile": 30,
+          "median": 25,
+          "max": 26,
+          "min": 27
+        }, {
+          "firstQuartile": 28,
+          "thirdQuartile": 34,
+          "median": 30,
+          "max": 30,
+          "min": 30
+        }, {
+          "firstQuartile": 30,
+          "thirdQuartile": 45,
+          "median": 35,
+          "max": 40,
+          "min": 40
+        }, {
+          "firstQuartile": 20,
+          "thirdQuartile": 55,
+          "median": 45,
+          "max": 44,
+          "min": 44
+        }, {
+          "firstQuartile": 55,
+          "thirdQuartile": 55,
+          "median": 55,
+          "max": 55,
+          "min": 55
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 56,
+          "median": 57,
+          "max": 58,
+          "min": 57
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 56,
+          "median": 56,
+          "max": 56,
+          "min": 56
+        }, {
+          "firstQuartile": 60,
+          "thirdQuartile": 56,
+          "median": 60,
+          "max": 60,
+          "min": 60
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 57,
+          "median": 57,
+          "max": 57,
+          "min": 57
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 55,
+          "median": 55,
+          "max": 55,
+          "min": 55
+        }, {
+          "firstQuartile": 20,
+          "thirdQuartile": 45,
+          "median": 45,
+          "max": 45,
+          "min": 45
+        }, {
+          "firstQuartile": 15,
+          "thirdQuartile": 40,
+          "median": 30,
+          "max": 49,
+          "min": 30
+        }]
+      }]
+    }
   },
   "orgs": {
     "ui": {
@@ -177,51 +290,91 @@
       "id": "nginx",
       "name": "Nginx",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
       "id": "wordpress",
       "name": "Wordpress",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
       "id": "nfs",
       "name": "NFS",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
       "id": "memcached",
       "name": "Memcached",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "id": "percona",
       "name": "Percona",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 5
+      "instances": 5,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
       "id": "primary",
       "name": "Primary",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
       "id": "secondaries",
       "name": "Secondaries",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 4
+      "instances": 4,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
       "id": "consul",
       "name": "Consul",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }]
   },
   "instances": {
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index f9da01c7..0e2d9225 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -17,6 +17,7 @@ const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
 const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
+const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
 
 const projectById = (projectId) => createSelector(
   projects,
@@ -46,22 +47,33 @@ const orgSections = (orgId) => createSelector(
 );
 
 const servicesByProjectId = (projectId) => createSelector(
-  [services, projectById(projectId), collapsedServices],
-  (services, project, collapsed) =>
+  [services, projectById(projectId), collapsedServices, metricDatasets],
+  (services, project, collapsed, metrics) =>
     services.filter((s) => s.project === project.uuid)
     .map((service) => ({
       ...service,
       services: services.filter((s) => s.parent === service.uuid)
     }))
     .filter((s) => !s.parent)
-    .map((service) => ({
-      ...service,
-      collapsed: collapsed.indexOf(service.uuid) >= 0,
-      services: service.services.map((service) => ({
+    .map((service) => {
+      const isCollapsed = (uuid) => collapsed.indexOf(uuid) >= 0;
+
+      const datasets = (uuids) => uuids.map((uuid) => find(metrics, [
+        'uuid',
+        uuid
+      ]));
+
+      return {
         ...service,
-        collapsed: collapsed.indexOf(service.uuid) >= 0
-      }))
-    }))
+        metrics: datasets(service.metrics),
+        collapsed: isCollapsed(service.uuid),
+        services: service.services.map((service) => ({
+          ...service,
+          metrics: datasets(service.metrics),
+          collapsed: isCollapsed(service.uuid)
+        }))
+      };
+    })
 );
 
 const instancesByServiceId = (serviceId) => createSelector(

From 2095eaf00c590f63f5dd908ea254a1aeca8eab12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 11 Jan 2017 17:42:47 +0000
Subject: [PATCH 7/9] recursive service item with metrics

---
 frontend/src/components/service-item/index.js | 126 +++++++++++++-----
 ui/src/components/list/transfer-props.js      |   2 +-
 2 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/service-item/index.js b/frontend/src/components/service-item/index.js
index 2680f894..c3e6e528 100644
--- a/frontend/src/components/service-item/index.js
+++ b/frontend/src/components/service-item/index.js
@@ -1,14 +1,23 @@
+const forceArray = require('force-array');
 const React = require('react');
 const ReactRouter = require('react-router');
+const Styled = require('styled-components');
 
 const Anchor = require('@ui/components/anchor');
+const Column = require('@ui/components/column');
 const List = require('@ui/components/list');
+const MiniMetric = require('@ui/components/mini-metric');
 const PropTypes = require('@root/prop-types');
+const Row = require('@ui/components/row');
 
 const {
   Link
 } = ReactRouter;
 
+const {
+  default: styled
+} = Styled;
+
 const {
   ListItem,
   ListItemView,
@@ -22,30 +31,84 @@ const {
   ListItemHeader
 } = List;
 
+const {
+  MiniMetricGraph,
+  MiniMetricMeta,
+  MiniMetricTitle,
+  MiniMetricSubtitle,
+  MiniMetricView
+} = MiniMetric;
+
+const MetricsRow = styled(Row)`
+  margin: 0;
+
+  & > div {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
 const ServiceItem = ({
   org = '',
   project = '',
   service = {}
 }) => {
+  const isChild = !!service.parent;
+
+  const childs = forceArray(service.services).map((service) => (
+    <ServiceItem
+      key={service.uuid}
+      org={org}
+      project={project}
+      service={service}
+    />
+  ));
+
   const to = `/${org}/projects/${project}/services/${service.id}`;
 
-  const childs = service.services.map((service) => (
-    <ListItem
-      collapsed={service.collapsed}
-      flat
-      key={service.uuid}
-      stacked={service.instances > 1}
-    >
-      <ListItemView>
-        <ListItemMeta>
-          <ListItemTitle>{service.name}</ListItemTitle>
-          <ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
-        </ListItemMeta>
-        <ListItemOutlet>
-          Metrics
-        </ListItemOutlet>
-      </ListItemView>
-    </ListItem>
+  const title = isChild ? (
+    <ListItemTitle>{service.name}</ListItemTitle>
+  ) : (
+    <ListItemTitle>
+      <Link to={to}>
+        {Anchor.fn(
+          <Anchor secondary>
+            {service.name}
+          </Anchor>
+        )}
+      </Link>
+    </ListItemTitle>
+  );
+
+  const subtitle = (
+    <ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
+  );
+
+  const description = (
+    <ListItemDescription>Flags</ListItemDescription>
+  );
+
+  const header = isChild ? null : (
+    <ListItemHeader>
+      <ListItemMeta>
+        {title}
+        {subtitle}
+        {description}
+      </ListItemMeta>
+      <ListItemOptions>…</ListItemOptions>
+    </ListItemHeader>
+  );
+
+  const metrics = service.metrics.map((metric, i) => (
+    <Column key={i} xs={4}>
+      <MiniMetricView borderless>
+        <MiniMetricMeta>
+          <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+          <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+        </MiniMetricMeta>
+        <MiniMetricGraph data={metric.data} />
+      </MiniMetricView>
+    </Column>
   ));
 
   const view = childs.length ? (
@@ -55,10 +118,14 @@ const ServiceItem = ({
   ) : (
     <ListItemView>
       <ListItemMeta>
-        <ListItemDescription>Flags</ListItemDescription>
+        {isChild && title}
+        {isChild && subtitle}
+        {description}
       </ListItemMeta>
       <ListItemOutlet>
-        Metrics
+        <MetricsRow>
+          {metrics}
+        </MetricsRow>
       </ListItemOutlet>
     </ListItemView>
   );
@@ -66,23 +133,12 @@ const ServiceItem = ({
   return (
     <ListItem
       collapsed={service.collapsed}
-      headed
+      flat={isChild}
+      headed={!isChild}
+      key={service.uuid}
+      stacked={isChild && (service.instances > 1)}
     >
-      <ListItemHeader>
-        <ListItemMeta>
-          <ListItemTitle>
-            <Link to={to}>
-              {Anchor.fn(
-                <Anchor secondary>
-                  {service.name}
-                </Anchor>
-              )}
-            </Link>
-          </ListItemTitle>
-          <ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
-        </ListItemMeta>
-        <ListItemOptions>…</ListItemOptions>
-      </ListItemHeader>
+      {header}
       {view}
     </ListItem>
   );
diff --git a/ui/src/components/list/transfer-props.js b/ui/src/components/list/transfer-props.js
index 0d8f4284..275dc6e3 100644
--- a/ui/src/components/list/transfer-props.js
+++ b/ui/src/components/list/transfer-props.js
@@ -4,7 +4,7 @@ const React = require('react');
 const transfer = (parentProps, props) => {
 // eslint-disable-next-line react/prop-types
   return React.Children.map(props.children, (c) => {
-    return React.cloneElement(c, {
+    return c && React.cloneElement(c, {
       ...c.props,
       ...parentProps.reduce((sum, name) => ({
         ...sum,

From 520b178281a6b104c9fb06214e52c9c149176204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 11 Jan 2017 17:46:00 +0000
Subject: [PATCH 8/9] primary/sec on the same service

---
 frontend/src/mock-state.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index a5544fbb..49e5f94c 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -323,7 +323,7 @@
       "id": "memcached",
       "name": "Memcached",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
+      "instances": 5,
       "metrics": [
         "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
         "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
@@ -436,13 +436,13 @@
       "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
       "name": "percona-primary",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
+      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
     }, {
       "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
       "name": "percona-secundary",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "c8411ef0-ab39-42cb-a704-d20b170eff31",
+      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
     }]
   }

From 6f48ec1d23903db93151661cc4c683e5594a43c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 11 Jan 2017 21:11:48 +0000
Subject: [PATCH 9/9] instance metrics

---
 frontend/src/components/metrics-row/index.js  | 56 +++++++++++++
 frontend/src/components/service-item/index.js | 42 +---------
 frontend/src/containers/service/instances.js  | 35 ++++++--
 frontend/src/mock-state.json                  | 80 ++++++++++++++++---
 frontend/src/prop-types.js                    | 17 +++-
 frontend/src/state/actions.js                 |  3 +-
 frontend/src/state/reducers/common.js         | 25 ++++++
 frontend/src/state/reducers/instances.js      | 13 ++-
 frontend/src/state/reducers/services.js       | 15 ++--
 frontend/src/state/selectors.js               | 44 +++++-----
 10 files changed, 239 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/metrics-row/index.js
 create mode 100644 frontend/src/state/reducers/common.js

diff --git a/frontend/src/components/metrics-row/index.js b/frontend/src/components/metrics-row/index.js
new file mode 100644
index 00000000..ff842e52
--- /dev/null
+++ b/frontend/src/components/metrics-row/index.js
@@ -0,0 +1,56 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const Column = require('@ui/components/column');
+const MiniMetric = require('@ui/components/mini-metric');
+const PropTypes = require('@root/prop-types');
+const Row = require('@ui/components/row');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  MiniMetricGraph,
+  MiniMetricMeta,
+  MiniMetricTitle,
+  MiniMetricSubtitle,
+  MiniMetricView
+} = MiniMetric;
+
+const StyledRow = styled(Row)`
+  margin: 0;
+
+  & > div {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+const MetricsRow = ({
+  datasets = []
+}) => {
+  const _datasets = datasets.map((metric, i) => (
+    <Column key={i} xs={4}>
+      <MiniMetricView borderless>
+        <MiniMetricMeta>
+          <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+          <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+        </MiniMetricMeta>
+        <MiniMetricGraph data={metric.data} />
+      </MiniMetricView>
+    </Column>
+  ));
+
+  return (
+    <StyledRow>
+      {_datasets}
+    </StyledRow>
+  );
+};
+
+MetricsRow.propTypes = {
+  datasets: React.PropTypes.arrayOf(PropTypes.dataset)
+};
+
+module.exports = MetricsRow;
diff --git a/frontend/src/components/service-item/index.js b/frontend/src/components/service-item/index.js
index c3e6e528..3fe83741 100644
--- a/frontend/src/components/service-item/index.js
+++ b/frontend/src/components/service-item/index.js
@@ -1,23 +1,16 @@
 const forceArray = require('force-array');
 const React = require('react');
 const ReactRouter = require('react-router');
-const Styled = require('styled-components');
 
 const Anchor = require('@ui/components/anchor');
-const Column = require('@ui/components/column');
 const List = require('@ui/components/list');
-const MiniMetric = require('@ui/components/mini-metric');
+const MetricsRow = require('@components/metrics-row');
 const PropTypes = require('@root/prop-types');
-const Row = require('@ui/components/row');
 
 const {
   Link
 } = ReactRouter;
 
-const {
-  default: styled
-} = Styled;
-
 const {
   ListItem,
   ListItemView,
@@ -31,23 +24,6 @@ const {
   ListItemHeader
 } = List;
 
-const {
-  MiniMetricGraph,
-  MiniMetricMeta,
-  MiniMetricTitle,
-  MiniMetricSubtitle,
-  MiniMetricView
-} = MiniMetric;
-
-const MetricsRow = styled(Row)`
-  margin: 0;
-
-  & > div {
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;
-
 const ServiceItem = ({
   org = '',
   project = '',
@@ -99,18 +75,6 @@ const ServiceItem = ({
     </ListItemHeader>
   );
 
-  const metrics = service.metrics.map((metric, i) => (
-    <Column key={i} xs={4}>
-      <MiniMetricView borderless>
-        <MiniMetricMeta>
-          <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-          <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-        </MiniMetricMeta>
-        <MiniMetricGraph data={metric.data} />
-      </MiniMetricView>
-    </Column>
-  ));
-
   const view = childs.length ? (
     <ListItemGroupView>
       {childs}
@@ -123,9 +87,7 @@ const ServiceItem = ({
         {description}
       </ListItemMeta>
       <ListItemOutlet>
-        <MetricsRow>
-          {metrics}
-        </MetricsRow>
+        <MetricsRow metrics={service.metrics} />
       </ListItemOutlet>
     </ListItemView>
   );
diff --git a/frontend/src/containers/service/instances.js b/frontend/src/containers/service/instances.js
index c062a507..6572c529 100644
--- a/frontend/src/containers/service/instances.js
+++ b/frontend/src/containers/service/instances.js
@@ -1,11 +1,17 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
 
+const actions = require('@state/actions');
 const EmptyInstances = require('@components/empty/instances');
 const PropTypes = require('@root/prop-types');
 const List = require('@ui/components/list');
+const DatasetsRow = require('@components/metrics-row');
 const selectors = require('@state/selectors');
 
+const {
+  toggleInstanceCollapsed
+} = actions;
+
 const {
   connect
 } = ReactRedux;
@@ -19,22 +25,29 @@ const {
   ListItemView,
   ListItemMeta,
   ListItemTitle,
-  ListItemOptions
+  ListItemOptions,
+  ListItemOutlet
 } = List;
 
 const Instances = ({
-  instances = []
+  instances = [],
+  toggleCollapsed = () => null
 }) => {
+  const onClick = (uuid) => () => toggleCollapsed(uuid);
+
   const empty = instances.length ? null : (
     <EmptyInstances />
   );
 
-  const instanceList = instances.map((service) => (
-    <ListItem collapsed key={service.uuid}>
+  const instanceList = instances.map((instance) => (
+    <ListItem collapsed={!instance.collapsed} key={instance.uuid} >
       <ListItemView>
-        <ListItemMeta>
-          <ListItemTitle>{service.name}</ListItemTitle>
+        <ListItemMeta onClick={onClick(instance.uuid)}>
+          <ListItemTitle>{instance.name}</ListItemTitle>
         </ListItemMeta>
+        <ListItemOutlet>
+          <DatasetsRow metrics={instance.metrics} />
+        </ListItemOutlet>
       </ListItemView>
       <ListItemOptions>
         …
@@ -51,7 +64,8 @@ const Instances = ({
 };
 
 Instances.propTypes = {
-  instances: React.PropTypes.arrayOf(PropTypes.instance)
+  instances: React.PropTypes.arrayOf(PropTypes.instance),
+  toggleCollapsed: React.PropTypes.func
 };
 
 const mapStateToProps = (state, {
@@ -60,6 +74,11 @@ const mapStateToProps = (state, {
   instances: instancesByServiceIdSelector(params.serviceId)(state)
 });
 
+const mapDispatchToProps = (dispatch) => ({
+  toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
+});
+
 module.exports = connect(
-  mapStateToProps
+  mapStateToProps,
+  mapDispatchToProps
 )(Instances);
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index 49e5f94c..48be8b2d 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -378,72 +378,130 @@
     }]
   },
   "instances": {
+    "ui": {
+      "collapsed": []
+    },
     "data": [{
       "uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
       "name": "wordpress_01",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
       "name": "nfs_01",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
       "name": "consul",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "97c68055-db88-45c9-ad49-f26da4264777",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
       "name": "memcache_01",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
       "name": "memcache_02",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
       "name": "memcache_03",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
       "name": "memcache_04",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
       "name": "memcache_05",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
       "name": "nginx",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
       "name": "percona-primary",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
       "name": "percona-secundary",
       "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
       "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }]
   }
 }
diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js
index 611097f0..c3422655 100644
--- a/frontend/src/prop-types.js
+++ b/frontend/src/prop-types.js
@@ -39,6 +39,20 @@ const Metric = React.PropTypes.shape({
   ...BaseObject
 });
 
+const Dataset = React.PropTypes.shape({
+  uuid: React.PropTypes.string,
+  type: React.PropTypes.string,
+  data: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      firstQuartile: React.PropTypes.string,
+      thirdQuartile: React.PropTypes.string,
+      median: React.PropTypes.string,
+      max: React.PropTypes.string,
+      min: React.PropTypes.string
+    })
+  )
+});
+
 const Sections = React.PropTypes.arrayOf(
   React.PropTypes.string
 );
@@ -58,5 +72,6 @@ module.exports = {
   instance: Instance,
   metric: Metric,
   // consinder renaming this to 'Types' as it could be used for any
-  metricTypes: MetricTypes
+  metricTypes: MetricTypes,
+  dataset: Dataset
 };
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
index 739bc96a..35e0629d 100644
--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@@ -11,5 +11,6 @@ module.exports = {
   ...require('@state/thunks'),
   updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
   toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
-  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
+  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`),
+  toggleInstanceCollapsed: createAction(`${APP}/APP/TOGGLE_INSTANCE_COLLAPSED`)
 };
diff --git a/frontend/src/state/reducers/common.js b/frontend/src/state/reducers/common.js
new file mode 100644
index 00000000..d192085c
--- /dev/null
+++ b/frontend/src/state/reducers/common.js
@@ -0,0 +1,25 @@
+const toggleCollapsed = (state, action) => {
+  const {
+    ui
+  } = state;
+
+  const {
+    collapsed = []
+  } = ui;
+
+  const _collapsed = collapsed.indexOf(action.payload) >= 0
+    ? collapsed.filter((uuid) => uuid !== action.payload)
+    : [...collapsed, action.payload];
+
+  return {
+    ...state,
+    ui: {
+      ...ui,
+      collapsed: _collapsed
+    }
+  };
+};
+
+module.exports = {
+  toggleCollapsed
+};
diff --git a/frontend/src/state/reducers/instances.js b/frontend/src/state/reducers/instances.js
index 7fec06fb..4f04e2f4 100644
--- a/frontend/src/state/reducers/instances.js
+++ b/frontend/src/state/reducers/instances.js
@@ -1,9 +1,20 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+const common = require('@state/reducers/common');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  toggleInstanceCollapsed
+} = actions;
+
+const {
+  toggleCollapsed
+} = common;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [toggleInstanceCollapsed.toString()]: toggleCollapsed
 }, {});
diff --git a/frontend/src/state/reducers/services.js b/frontend/src/state/reducers/services.js
index 4a6311db..d67ffb59 100644
--- a/frontend/src/state/reducers/services.js
+++ b/frontend/src/state/reducers/services.js
@@ -1,6 +1,7 @@
 const ReduxActions = require('redux-actions');
 
 const actions = require('@state/actions');
+const common = require('@state/reducers/common');
 
 const {
   handleActions
@@ -10,14 +11,10 @@ const {
   toggleServiceCollapsed
 } = actions;
 
+const {
+  toggleCollapsed
+} = common;
+
 module.exports = handleActions({
-  [toggleServiceCollapsed.toString()]: (state, action) => ({
-    ...state,
-    ui: {
-      ...state.ui,
-      collapsed: state.ui.collapsed.indexOf(action.payload) >= 0
-        ? state.ui.collapsed.filter((uuid) => uuid !== action.payload)
-        : [...state.ui.collapsed, action.payload]
-    }
-  })
+  [toggleServiceCollapsed.toString()]: toggleCollapsed
 }, {});
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index 0e2d9225..4ef35fbd 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -16,6 +16,7 @@ const orgs = (state) => get(state, 'orgs.data', []);
 const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
 const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
+const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
 const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
 
@@ -46,6 +47,13 @@ const orgSections = (orgId) => createSelector(
   )
 );
 
+const isCollapsed = (collapsed, uuid) => collapsed.indexOf(uuid) >= 0;
+
+const datasets = (metrics, uuids) => uuids.map((uuid) => find(metrics, [
+  'uuid',
+  uuid
+]));
+
 const servicesByProjectId = (projectId) => createSelector(
   [services, projectById(projectId), collapsedServices, metricDatasets],
   (services, project, collapsed, metrics) =>
@@ -55,31 +63,27 @@ const servicesByProjectId = (projectId) => createSelector(
       services: services.filter((s) => s.parent === service.uuid)
     }))
     .filter((s) => !s.parent)
-    .map((service) => {
-      const isCollapsed = (uuid) => collapsed.indexOf(uuid) >= 0;
-
-      const datasets = (uuids) => uuids.map((uuid) => find(metrics, [
-        'uuid',
-        uuid
-      ]));
-
-      return {
+    .map((service) => ({
+      ...service,
+      metrics: datasets(metrics, service.metrics),
+      collapsed: isCollapsed(collapsed, service.uuid),
+      services: service.services.map((service) => ({
         ...service,
-        metrics: datasets(service.metrics),
-        collapsed: isCollapsed(service.uuid),
-        services: service.services.map((service) => ({
-          ...service,
-          metrics: datasets(service.metrics),
-          collapsed: isCollapsed(service.uuid)
-        }))
-      };
-    })
+        metrics: datasets(metrics, service.metrics),
+        collapsed: isCollapsed(collapsed, service.uuid)
+      }))
+    }))
 );
 
 const instancesByServiceId = (serviceId) => createSelector(
-  [instances, serviceById(serviceId)],
-  (instances, service) =>
+  [instances, serviceById(serviceId), collapsedInstances, metricDatasets],
+  (instances, service, collapsed, metrics) =>
     instances.filter((i) => i.service === service.uuid)
+    .map((instance) => ({
+      ...instance,
+      metrics: datasets(metrics, instance.metrics),
+      collapsed: isCollapsed(collapsed, instance.uuid)
+    }))
 );