moving more components over to new storybook structure
This commit is contained in:
Alex Windett
parent
8f2e140cbe
commit
68b418c7d2
52
ui/src/components/add-metric/story.js
Normal file
52
ui/src/components/add-metric/story.js
Normal file
@ -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>
|
||||
));
|
||||
103
ui/src/components/list/mini-metric-data.js
Normal file
103
ui/src/components/list/mini-metric-data.js
Normal file
@ -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,
|
||||
}];
|
||||
320
ui/src/components/list/story.js
Normal file
320
ui/src/components/list/story.js
Normal file
@ -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>
|
||||
));
|
||||
@ -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>
|
||||
));
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user