Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-10 01:16:39 +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 {
margin: 0;
height: auto;
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 { Link } from 'react-router';
import { AppsLinkList, calc, styles as commonStyles } from '../common';
import { formatFullDateTime } from '../common/util';
import styles from './metrics.scss';
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 lastMinutePercent = 1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
return (<div>
return (<div style={{ padding: '16px' }}>
<Grid style={{ textAlign: 'center' }}>
<Cell tablet={4} col={3} phone={12}>
{
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>
<Progress color="#e91e63" animatePercentageText strokeWidth={10} percentage={lastMinutePercent} width="50" />
</div>
@ -69,7 +70,7 @@ export default class MetricComponent extends React.Component {
<Cell col={3} tablet={4} phone={12}>
{
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>
<Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
</div>
@ -80,12 +81,13 @@ export default class MetricComponent extends React.Component {
{seenApps.length > 0 ?
(<div><strong>Seen in applications:</strong></div>) :
<div>
<Icon className={styles.problemIcon} name="report problem" title="Not used in a app in the last hour" />
<div><small><strong>Not used in a app in the last hour.</strong>
<Icon className={styles.problemIcon} name="report problem" title="Not used in an app in the last hour" />
<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>
</div>
}
<AppsLinkList apps={seenApps} />
<span>Created {formatFullDateTime(featureToggle.createdAt)}</span>
</Cell>
</Grid>
<hr className={commonStyles.divider}/>

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

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