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', () => (
+
+
+
+
+ Aggregated CPU usage
+
+ CPU usages accross all of the CPU cores.
+
+ Learn more
+ Add
+
+
+
+
+ ))
+ .add('Added Metric', () => (
+
+
+
+
+ Aggregated CPU usage
+
+ CPU usages accross all of the CPU cores.
+
+ Learn more
+ Added
+
+
+
+
+ ));
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', () => (
+
+
+
+
+ Nginx 01
+ 4 instances
+ Flags
+
+
+ Metrics
+
+
+
+ …
+
+
+
+ ))
+ .add('collapsed', () => (
+
+
+
+
+ Nginx 01
+ 4 instances
+ Flags
+
+
+ Metrics
+
+
+
+ …
+
+
+
+ ))
+ .add('headed', () => (
+
+
+
+
+ Nginx 01
+ 4 instances
+ Flags
+
+
+ …
+
+
+
+
+ Flags
+
+
+ Metrics
+
+
+
+
+ ))
+ .add('headed collapsed', () => (
+
+
+
+
+ Nginx 01
+ 4 instances
+ Flags
+
+
+ …
+
+
+
+
+ Flags
+
+
+ Metrics
+
+
+
+
+ ))
+ .add('stacked', () => (
+
+
+
+
+ Nginx 01
+ 4 instances
+ Flags
+
+
+ Metrics
+
+
+
+ …
+
+
+
+ ))
+ .add('view-group', () => (
+
+
+
+
+ Percona
+ 5 instances
+ Flags
+
+ …
+
+
+
+
+
+ percona_database
+
+
+ Metrics
+
+
+
+
+
+
+ percona_database
+ 5 instances
+ Flags
+
+
+ Metrics
+
+
+
+
+
+
+ percona_database
+ 5 instances
+
+
+ Metrics
+
+
+
+
+
+
+ ))
+ .add('view-group with metrics', () => (
+
+
+
+
+ Percona
+ 5 instances
+ Flags
+
+ …
+
+
+
+
+
+ percona_database
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+
+
+
+
+ percona_database
+ 5 instances
+ Flags
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+
+
+
+
+ percona_database
+ 5 instances
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
+
+
+
+
+
+
+
+
+ ));
\ 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)
));
-storiesOf('Add Metric', module)
- .add('Add Metric', () => (
-
-
-
-
- Aggregated CPU usage
-
- CPU usages accross all of the CPU cores.
-
- Learn more
- Add
-
-
-
-
- ))
- .add('Added Metric', () => (
-
-
-
-
- Aggregated CPU usage
-
- CPU usages accross all of the CPU cores.
-
- Learn more
- Added
-
-
-
-
- ));
-
-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', () => (
@@ -240,7 +85,7 @@ storiesOf('Metrics', module)
Memory: 54%
(1280/3000 MB)
-
+
@@ -249,7 +94,7 @@ storiesOf('Metrics', module)
Memory: 54%
(1280/3000 MB)
-
+
@@ -258,298 +103,11 @@ storiesOf('Metrics', module)
Memory: 54%
(1280/3000 MB)
-
+
));
-storiesOf('ListItem', module)
- .add('default', () => (
-
-
-
-
- Nginx 01
- 4 instances
- Flags
-
-
- Metrics
-
-
-
- …
-
-
-
- ))
- .add('collapsed', () => (
-
-
-
-
- Nginx 01
- 4 instances
- Flags
-
-
- Metrics
-
-
-
- …
-
-
-
- ))
- .add('headed', () => (
-
-
-
-
- Nginx 01
- 4 instances
- Flags
-
-
- …
-
-
-
-
- Flags
-
-
- Metrics
-
-
-
-
- ))
- .add('headed collapsed', () => (
-
-
-
-
- Nginx 01
- 4 instances
- Flags
-
-
- …
-
-
-
-
- Flags
-
-
- Metrics
-
-
-
-
- ))
- .add('stacked', () => (
-
-
-
-
- Nginx 01
- 4 instances
- Flags
-
-
- Metrics
-
-
-
- …
-
-
-
- ))
- .add('view-group', () => (
-
-
-
-
- Percona
- 5 instances
- Flags
-
- …
-
-
-
-
-
- percona_database
-
-
- Metrics
-
-
-
-
-
-
- percona_database
- 5 instances
- Flags
-
-
- Metrics
-
-
-
-
-
-
- percona_database
- 5 instances
-
-
- Metrics
-
-
-
-
-
-
- ))
- .add('view-group with metrics', () => (
-
-
-
-
- Percona
- 5 instances
- Flags
-
- …
-
-
-
-
-
- percona_database
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
-
-
-
-
- percona_database
- 5 instances
- Flags
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
-
-
-
-
- percona_database
- 5 instances
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
- Memory: 54%
- (1280/3000 MB)
-
-
-
-
-
-
-
-
-
-
-
- ));
+