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

add more ListItem story states

This commit is contained in:
Sérgio Ramos 2017-01-11 14:15:11 +00:00
parent 0b775fb600
commit 74c061a6cd
1 changed files with 145 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
ui/stories/index.js
View File

@ -654,6 +654,18 @@ storiesOf('ListItem', module)
</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>
@ -668,4 +680,137 @@ storiesOf('ListItem', module)
</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>
));