Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

minor cleanup of tabs

Browse Source
This commit is contained in:
sveisvei 2016-12-14 12:45:34 +01:00
parent 53909f9ca0
commit 1195cd84ca
1 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/component/feature/view-edit-container.jsx
View File

@ -13,6 +13,62 @@ import { fetchHistoryForToggle } from '../../store/history-actions';
import { AppsLinkList, SwitchWithLabel, getIcon } from '../common'; import { AppsLinkList, SwitchWithLabel, getIcon } from '../common';
const MetricTab = ({ metrics, featureToggle, toggleFeature }) => {
const {
lastHour = { yes: 0, no: 0, isFallback: true },
lastMinute = { yes: 0, no: 0, isFallback: true },
seenApps = [],
} = metrics;
const lastHourPercent = 1 * percentLib.calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
const lastMinutePercent = 1 * percentLib.calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
return (<div>
<SwitchWithLabel
checked={featureToggle.enabled}
onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
<hr />
<Grid style={{ textAlign: 'center' }}>
<Cell col={3}>
{
lastMinute.isFallback ?
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }}
name="report problem" title="No metrics avaiable" /> :
<div>
<Progress strokeWidth={10} percentage={lastMinutePercent} width="50" />
</div>
}
<p><strong>Last minute</strong><br /> Yes {lastMinute.yes}, No: {lastMinute.no}</p>
</Cell>
<Cell col={3}>
{
lastHour.isFallback ?
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }}
name="report problem" title="No metrics avaiable" /> :
<div>
<Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
</div>
}
<p><strong>Last hour</strong><br /> Yes {lastHour.yes}, No: {lastHour.no}</p>
</Cell>
<Cell col={6}>
{seenApps.length > 0 ?
(<div><strong>Seen in applications:</strong></div>) :
<div>
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }}
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>
This might be due to your client implementation is not reporting usage.</small></div>
</div>
}
<AppsLinkList apps={seenApps} />
</Cell>
</Grid>
</div>);
};
class EditFeatureToggleWrapper extends React.Component { class EditFeatureToggleWrapper extends React.Component {
constructor (props) { constructor (props) {
@ -54,15 +110,6 @@ class EditFeatureToggleWrapper extends React.Component {
metrics = {}, metrics = {},
} = this.props; } = this.props;
const {
lastHour = { yes: 0, no: 0, isFallback: true },
lastMinute = { yes: 0, no: 0, isFallback: true },
seenApps = [],
} = metrics;
const lastHourPercent = 1 * percentLib.calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
const lastMinutePercent = 1 * percentLib.calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
const featureToggle = features.find(toggle => toggle.name === featureToggleName); const featureToggle = features.find(toggle => toggle.name === featureToggleName);
if (!featureToggle) { if (!featureToggle) {
@ -72,48 +119,13 @@ class EditFeatureToggleWrapper extends React.Component {
return <span>Could not find the toggle "{this.props.featureToggleName}"</span>; return <span>Could not find the toggle "{this.props.featureToggleName}"</span>;
} }
const content = this.state.activeTab === 0 ? ( let tabContent;
<div> if (this.state.activeTab === 0) {
<SwitchWithLabel tabContent = <MetricTab metrics={metrics} toggleFeature={toggleFeature} featureToggle={featureToggle} />;
checked={featureToggle.enabled} } else if (this.state.activeTab === 1) {
onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel> tabContent = <EditFeatureToggle featureToggle={featureToggle} />;
<hr /> } else {
<Grid style={{ textAlign: 'center' }}> tabContent = (
<Cell col={3}>
{
lastMinute.isFallback ?
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
<div>
<Progress strokeWidth={10} percentage={lastMinutePercent} width="50" />
</div>
}
<p><strong>Last minute</strong><br /> Yes {lastMinute.yes}, No: {lastMinute.no}</p>
</Cell>
<Cell col={3}>
{
lastHour.isFallback ?
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
<div>
<Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
</div>
}
<p><strong>Last hour</strong><br /> Yes {lastHour.yes}, No: {lastHour.no}</p>
</Cell>
<Cell col={6}>
{seenApps.length > 0 ?
(<div><strong>Seen in applications:</strong></div>) :
<div>
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} 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> This might be due to your client implementation is not reporting usage.</small></div>
</div>
}
<AppsLinkList apps={seenApps} />
</Cell>
</Grid>
</div>
) : this.state.activeTab === 1 ? (
<EditFeatureToggle featureToggle={featureToggle} />
) : (
<div> <div>
<List style={{ textAlign: 'left' }}> <List style={{ textAlign: 'left' }}>
{history.map(({ createdAt, type, createdBy }, i) => {history.map(({ createdAt, type, createdBy }, i) =>
@ -128,6 +140,7 @@ class EditFeatureToggleWrapper extends React.Component {
</Link> </Link>
</div> </div>
); );
}
return ( return (
<div> <div>
@ -142,7 +155,7 @@ class EditFeatureToggleWrapper extends React.Component {
<Tab>History</Tab> <Tab>History</Tab>
</Tabs> </Tabs>
{content} {tabContent}
</div> </div>
); );
} }