mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 22:20:06 +02:00
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,
|
Container,
|
||||||
Row,
|
Row,
|
||||||
Column,
|
Column,
|
||||||
AddMetric: {
|
|
||||||
AddMetricButton,
|
|
||||||
AddMetricDescription,
|
|
||||||
AddMetricLink,
|
|
||||||
AddMetricTile,
|
|
||||||
AddMetricTitle
|
|
||||||
},
|
|
||||||
List: {
|
|
||||||
ListItemDescription,
|
|
||||||
ListItemHeader,
|
|
||||||
ListItem,
|
|
||||||
ListItemMeta,
|
|
||||||
ListItemOptions,
|
|
||||||
ListItemOutlet,
|
|
||||||
ListItemSubTitle,
|
|
||||||
ListItemTitle,
|
|
||||||
ListItemView,
|
|
||||||
ListItemGroupView
|
|
||||||
},
|
|
||||||
MiniMetric: {
|
MiniMetric: {
|
||||||
MiniMetricGraph,
|
MiniMetricGraph,
|
||||||
MiniMetricMeta,
|
MiniMetricMeta,
|
||||||
@ -38,6 +19,8 @@ const {
|
|||||||
},
|
},
|
||||||
} = require('../src/');
|
} = require('../src/');
|
||||||
|
|
||||||
|
const MiniMetricData = require('../src/components/list/mini-metric-data');
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
base: {
|
base: {
|
||||||
backgroundColor: '#FFEBEE'
|
backgroundColor: '#FFEBEE'
|
||||||
@ -92,144 +75,6 @@ storiesOf('Grid', module)
|
|||||||
</Base>
|
</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)
|
storiesOf('Metrics', module)
|
||||||
.add('Mini Metric', () => (
|
.add('Mini Metric', () => (
|
||||||
<Base>
|
<Base>
|
||||||
@ -240,7 +85,7 @@ storiesOf('Metrics', module)
|
|||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
</MiniMetricMeta>
|
</MiniMetricMeta>
|
||||||
<MiniMetricGraph data={minMetricData} />
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
</MiniMetricView>
|
</MiniMetricView>
|
||||||
</Column>
|
</Column>
|
||||||
<Column xs={3}>
|
<Column xs={3}>
|
||||||
@ -249,7 +94,7 @@ storiesOf('Metrics', module)
|
|||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
</MiniMetricMeta>
|
</MiniMetricMeta>
|
||||||
<MiniMetricGraph data={minMetricData} />
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
</MiniMetricView>
|
</MiniMetricView>
|
||||||
</Column>
|
</Column>
|
||||||
<Column xs={3}>
|
<Column xs={3}>
|
||||||
@ -258,298 +103,11 @@ storiesOf('Metrics', module)
|
|||||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
</MiniMetricMeta>
|
</MiniMetricMeta>
|
||||||
<MiniMetricGraph data={minMetricData} />
|
<MiniMetricGraph data={MiniMetricData} />
|
||||||
</MiniMetricView>
|
</MiniMetricView>
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</Base>
|
</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