Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

moving more components over to new storybook structure

Browse Source
This commit is contained in:
Alex Windett 2017-01-11 14:44:58 +00:00
parent 8f2e140cbe
commit 68b418c7d2
4 changed files with 481 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
ui/src/components/add-metric/story.js Normal file
View 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
View 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
View 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>
));

454
ui/stories/index.js
View File

@ -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>
));