2017-08-28 21:30:12 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2016-11-10 14:26:24 +01:00
|
|
|
import { Link } from 'react-router';
|
2017-02-04 23:56:36 +01:00
|
|
|
import { Switch, Chip, ListItem } from 'react-mdl';
|
2016-12-04 11:56:41 +01:00
|
|
|
import Progress from './progress';
|
2017-01-09 23:10:25 +01:00
|
|
|
import { calc, styles as commonStyles } from '../common';
|
2016-12-04 11:56:41 +01:00
|
|
|
|
2017-01-04 00:29:27 +01:00
|
|
|
import styles from './feature.scss';
|
2016-11-10 14:26:24 +01:00
|
|
|
|
|
|
|
const Feature = ({
|
|
|
|
feature,
|
2017-01-09 11:08:04 +01:00
|
|
|
toggleFeature,
|
2016-12-04 11:56:41 +01:00
|
|
|
settings,
|
|
|
|
metricsLastHour = { yes: 0, no: 0, isFallback: true },
|
|
|
|
metricsLastMinute = { yes: 0, no: 0, isFallback: true },
|
2016-11-10 14:26:24 +01:00
|
|
|
}) => {
|
2016-12-04 11:56:41 +01:00
|
|
|
const { name, description, enabled, strategies } = feature;
|
|
|
|
|
|
|
|
const { showLastHour = false } = settings;
|
2017-08-28 19:15:47 +02:00
|
|
|
const isStale = showLastHour
|
|
|
|
? metricsLastHour.isFallback
|
|
|
|
: metricsLastMinute.isFallback;
|
2016-11-10 14:26:24 +01:00
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
const percent =
|
|
|
|
1 *
|
|
|
|
(showLastHour
|
|
|
|
? calc(
|
|
|
|
metricsLastHour.yes,
|
|
|
|
metricsLastHour.yes + metricsLastHour.no,
|
|
|
|
0
|
|
|
|
)
|
|
|
|
: calc(
|
|
|
|
metricsLastMinute.yes,
|
|
|
|
metricsLastMinute.yes + metricsLastMinute.no,
|
|
|
|
0
|
|
|
|
));
|
2016-12-22 16:06:30 +01:00
|
|
|
|
2017-01-09 23:10:25 +01:00
|
|
|
const strategiesToShow = Math.min(strategies.length, 3);
|
|
|
|
const remainingStrategies = strategies.length - strategiesToShow;
|
|
|
|
|
2017-08-28 19:15:47 +02:00
|
|
|
const strategyChips =
|
|
|
|
strategies &&
|
|
|
|
strategies.slice(0, strategiesToShow).map((s, i) => (
|
|
|
|
<Chip className={styles.strategyChip} key={i}>
|
|
|
|
{s.name}
|
|
|
|
</Chip>
|
|
|
|
));
|
|
|
|
const summaryChip = remainingStrategies > 0 && (
|
|
|
|
<Chip className={styles.strategyChip}>+{remainingStrategies}</Chip>
|
|
|
|
);
|
2017-01-09 23:10:25 +01:00
|
|
|
|
2016-11-10 14:26:24 +01:00
|
|
|
return (
|
2017-02-04 19:30:06 +01:00
|
|
|
<ListItem twoLine>
|
|
|
|
<span className={styles.listItemMetric}>
|
2017-08-28 19:15:47 +02:00
|
|
|
<Progress
|
|
|
|
strokeWidth={15}
|
|
|
|
percentage={percent}
|
|
|
|
isFallback={isStale}
|
|
|
|
/>
|
2017-01-01 21:26:23 +01:00
|
|
|
</span>
|
2017-02-04 19:30:06 +01:00
|
|
|
<span className={styles.listItemToggle}>
|
2017-08-28 19:15:47 +02:00
|
|
|
<Switch
|
|
|
|
title={`Toggle ${name}`}
|
|
|
|
key="left-actions"
|
|
|
|
onChange={() => toggleFeature(name)}
|
|
|
|
checked={enabled}
|
|
|
|
/>
|
2017-01-01 21:26:23 +01:00
|
|
|
</span>
|
2017-08-28 19:15:47 +02:00
|
|
|
<span
|
|
|
|
className={[
|
|
|
|
'mdl-list__item-primary-content',
|
|
|
|
styles.listItemLink,
|
|
|
|
].join(' ')}
|
|
|
|
>
|
|
|
|
<Link
|
|
|
|
to={`/features/view/${name}`}
|
|
|
|
className={[
|
|
|
|
commonStyles.listLink,
|
|
|
|
commonStyles.truncate,
|
|
|
|
].join(' ')}
|
|
|
|
>
|
2017-01-09 23:10:25 +01:00
|
|
|
{name}
|
2017-08-28 19:15:47 +02:00
|
|
|
<span
|
|
|
|
className={[
|
|
|
|
'mdl-list__item-sub-title',
|
|
|
|
commonStyles.truncate,
|
|
|
|
].join(' ')}
|
|
|
|
>
|
|
|
|
{description}
|
|
|
|
</span>
|
2016-12-04 11:56:41 +01:00
|
|
|
</Link>
|
|
|
|
</span>
|
2017-08-28 19:15:47 +02:00
|
|
|
<span
|
|
|
|
className={[
|
|
|
|
styles.listItemStrategies,
|
|
|
|
commonStyles.hideLt920,
|
|
|
|
].join(' ')}
|
|
|
|
>
|
2017-01-09 23:10:25 +01:00
|
|
|
{strategyChips}
|
|
|
|
{summaryChip}
|
2016-12-04 11:56:41 +01:00
|
|
|
</span>
|
2017-02-04 19:30:06 +01:00
|
|
|
</ListItem>
|
2016-11-10 14:26:24 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Feature.propTypes = {
|
|
|
|
feature: PropTypes.object,
|
2017-01-09 11:08:04 +01:00
|
|
|
toggleFeature: PropTypes.func,
|
2017-02-04 19:30:06 +01:00
|
|
|
settings: PropTypes.object,
|
|
|
|
metricsLastHour: PropTypes.object,
|
|
|
|
metricsLastMinute: PropTypes.object,
|
2016-11-10 14:26:24 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Feature;
|