Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-15 17:50:48 +02:00
Code Issues Projects Releases Wiki Activity

changes layout for the feature toggle page (#57)

Browse Source
This commit is contained in:
Vegard Sandvold 2017-01-28 17:01:30 +01:00 committed by GitHub
parent f73d2c6633
commit fae7e6e55b
3 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/common/common.scss
View File

@ -19,6 +19,7 @@
.divider { .divider {
margin: 0; margin: 0;
height: auto;
border-color: rgba(0,0,0,.12); border-color: rgba(0,0,0,.12);
} }

12
frontend/src/component/feature/metric-component.jsx
View File

@ -3,6 +3,7 @@ import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
import Progress from './progress'; import Progress from './progress';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { AppsLinkList, calc, styles as commonStyles } from '../common'; import { AppsLinkList, calc, styles as commonStyles } from '../common';
import { formatFullDateTime } from '../common/util';
import styles from './metrics.scss'; import styles from './metrics.scss';
const StrategyChipItem = ({ strategy }) => ( const StrategyChipItem = ({ strategy }) => (
@ -54,12 +55,12 @@ export default class MetricComponent extends React.Component {
const lastHourPercent = 1 * calc(lastHour.yes, lastHour.yes + lastHour.no, 0); const lastHourPercent = 1 * calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
const lastMinutePercent = 1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0); const lastMinutePercent = 1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
return (<div> return (<div style={{ padding: '16px' }}>
<Grid style={{ textAlign: 'center' }}> <Grid style={{ textAlign: 'center' }}>
<Cell tablet={4} col={3} phone={12}> <Cell tablet={4} col={3} phone={12}>
{ {
lastMinute.isFallback ? lastMinute.isFallback ?
<Icon className={styles.problemIcon} name="report problem" title="No metrics avaiable" /> : <Icon className={styles.problemIcon} name="report problem" title="No metrics available" /> :
<div> <div>
<Progress color="#e91e63" animatePercentageText strokeWidth={10} percentage={lastMinutePercent} width="50" /> <Progress color="#e91e63" animatePercentageText strokeWidth={10} percentage={lastMinutePercent} width="50" />
</div> </div>
@ -69,7 +70,7 @@ export default class MetricComponent extends React.Component {
<Cell col={3} tablet={4} phone={12}> <Cell col={3} tablet={4} phone={12}>
{ {
lastHour.isFallback ? lastHour.isFallback ?
<Icon className={styles.problemIcon} name="report problem" title="No metrics avaiable" /> : <Icon className={styles.problemIcon} name="report problem" title="No metrics available" /> :
<div> <div>
<Progress strokeWidth={10} percentage={lastHourPercent} width="50" /> <Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
</div> </div>
@ -80,12 +81,13 @@ export default class MetricComponent extends React.Component {
{seenApps.length > 0 ? {seenApps.length > 0 ?
(<div><strong>Seen in applications:</strong></div>) : (<div><strong>Seen in applications:</strong></div>) :
<div> <div>
<Icon className={styles.problemIcon} name="report problem" title="Not used in a app in the last hour" /> <Icon className={styles.problemIcon} name="report problem" title="Not used in an app in the last hour" />
<div><small><strong>Not used in a app in the last hour.</strong> <div><small><strong>Not used in an app in the last hour.</strong>
This might be due to your client implementation is not reporting usage.</small></div> This might be due to your client implementation is not reporting usage.</small></div>
</div> </div>
} }
<AppsLinkList apps={seenApps} /> <AppsLinkList apps={seenApps} />
<span>Created {formatFullDateTime(featureToggle.createdAt)}</span>
</Cell> </Cell>
</Grid> </Grid>
<hr className={commonStyles.divider}/> <hr className={commonStyles.divider}/>

43
frontend/src/component/feature/view-component.jsx
View File

@ -1,12 +1,11 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { Tabs, Tab, ProgressBar, IconButton, Grid, Cell } from 'react-mdl'; import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardText, CardActions, Switch } from 'react-mdl';
import { hashHistory, Link } from 'react-router'; import { hashHistory, Link } from 'react-router';
import HistoryComponent from '../history/history-list-toggle-container'; import HistoryComponent from '../history/history-list-toggle-container';
import MetricComponent from './metric-container'; import MetricComponent from './metric-container';
import EditFeatureToggle from './form-edit-container.jsx'; import EditFeatureToggle from './form-edit-container.jsx';
import { SwitchWithLabel } from '../common'; import { styles as commonStyles } from '../common';
import { formatFullDateTime } from '../common/util';
const TABS = { const TABS = {
view: 0, view: 0,
@ -90,27 +89,23 @@ export default class ViewFeatureToggleComponent extends React.Component {
}; };
return ( return (
<Grid className="mdl-color--white"> <Card shadow={0} className={commonStyles.fullwidth}>
<Cell col={12}> <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
<h4 style={{ marginTop: '16px' }}> <CardText>{featureToggle.description}</CardText>
<SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} /> <CardActions border style={{ display: 'flex', alignItems: 'center' }}>
{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small> <Switch ripple checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)}>
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
<IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" /> </Switch>
<small style={{ float: 'right', lineHeight: '38px' }}> <Button onClick={removeToggle} style={{ flexShrink: 0 }}>Archive</Button>
Created {formatFullDateTime(featureToggle.createdAt)} </CardActions>
</small> <hr className={commonStyles.divider}/>
</h4> <Tabs activeTab={activeTabId} ripple tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
<div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div> <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
<Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }} tabBarProps={{ style: { width: '100%' } }}> <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
<Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab> <Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
<Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab> </Tabs>
<Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab> {tabContent}
</Tabs> </Card>
{tabContent}
</Cell>
</Grid>
); );
} }
} }