mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
add strategies to metric view, add OR text between strategies
This commit is contained in:
sveisvei
parent
ea47883815
commit
539645d4ef
@ -8,20 +8,7 @@ import { DragSource, DropTarget } from 'react-dnd';
|
||||
import { Link } from 'react-router';
|
||||
import StrategyInputPercentage from './strategy-input-percentage';
|
||||
import StrategyInputList from './strategy-input-list';
|
||||
|
||||
const style = {
|
||||
flex: '1',
|
||||
minWidth: '300px',
|
||||
maxWidth: '100%',
|
||||
margin: '5px 20px 15px 0px',
|
||||
};
|
||||
|
||||
const helpText = {
|
||||
color: 'rgba(0,0,0, 0.54)',
|
||||
fontSize: '12px',
|
||||
lineHeight: '14px',
|
||||
};
|
||||
|
||||
import styles from './strategy.scss';
|
||||
|
||||
const dragSource = {
|
||||
beginDrag (props) {
|
||||
@ -105,7 +92,7 @@ class StrategyConfigure extends React.Component {
|
||||
name={name}
|
||||
onChange={this.handleConfigChange.bind(this, name)}
|
||||
value={1 * value} />
|
||||
{description && <p style={helpText}>{description}</p>}
|
||||
{description && <p className={styles.helpText}>{description}</p>}
|
||||
</div>
|
||||
);
|
||||
} else if (type === 'list') {
|
||||
@ -119,7 +106,7 @@ class StrategyConfigure extends React.Component {
|
||||
return (
|
||||
<div key={name}>
|
||||
<StrategyInputList name={name} list={list} setConfig={this.setConfig} />
|
||||
{description && <p style={helpText}>{description}</p>}
|
||||
{description && <p className={styles.helpText}>{description}</p>}
|
||||
</div>
|
||||
);
|
||||
} else if (type === 'number') {
|
||||
@ -136,7 +123,7 @@ class StrategyConfigure extends React.Component {
|
||||
onChange={this.handleConfigChange.bind(this, name)}
|
||||
value={value}
|
||||
/>
|
||||
{description && <p style={helpText}>{description}</p>}
|
||||
{description && <p className={styles.helpText}>{description}</p>}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
@ -152,7 +139,7 @@ class StrategyConfigure extends React.Component {
|
||||
onChange={this.handleConfigChange.bind(this, name)}
|
||||
value={value}
|
||||
/>
|
||||
{description && <p style={helpText}>{description}</p>}
|
||||
{description && <p className={styles.helpText}>{description}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -169,8 +156,8 @@ class StrategyConfigure extends React.Component {
|
||||
const inputFields = this.renderInputFields(this.props.strategyDefinition);
|
||||
const { name } = this.props.strategy;
|
||||
item = (
|
||||
<Card shadow={0} style={{ background: '#f2f9fc', width: '100%', display: 'block', opacity: isDragging ? '0.1' : '1' }}>
|
||||
<CardTitle style={{ color: '#fff', height: '65px', background: '#607d8b' }}>
|
||||
<Card shadow={0} className={styles.card} style={{ opacity: isDragging ? '0.1' : '1' }}>
|
||||
<CardTitle className={styles.cardTitle}>
|
||||
<Icon name="extension" /> {name}
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
@ -182,27 +169,23 @@ class StrategyConfigure extends React.Component {
|
||||
</CardActions>
|
||||
}
|
||||
|
||||
<CardMenu style={{ color: '#fff' }}>
|
||||
<CardMenu className="mdl-color-text--white">
|
||||
<Link
|
||||
title="View strategy"
|
||||
to={`/strategies/view/${name}`}
|
||||
style={{ color: '#fff', display: 'inline-block', verticalAlign: 'bottom', marginRight: '5px' }}>
|
||||
className={styles.editLink}>
|
||||
<Icon name="link" />
|
||||
</Link>
|
||||
<IconButton title="Remove strategy from toggle" name="delete" onClick={this.handleRemove} />
|
||||
{connectDragSource(
|
||||
<span style={{
|
||||
cursor: 'pointer',
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'bottom',
|
||||
}}><Icon name="reorder" /></span>)}
|
||||
<span className={styles.reorderIcon}><Icon name="reorder" /></span>)}
|
||||
</CardMenu>
|
||||
</Card>
|
||||
);
|
||||
} else {
|
||||
const { name } = this.props.strategy;
|
||||
item = (
|
||||
<Card shadow={0} style={style}>
|
||||
<Card shadow={0} className={styles.card}>
|
||||
<CardTitle>"{name}" deleted?</CardTitle>
|
||||
<CardText>
|
||||
The strategy "{name}" does not exist on this server.
|
||||
@ -217,7 +200,7 @@ class StrategyConfigure extends React.Component {
|
||||
}
|
||||
|
||||
return (connectDropTarget(connectDragPreview(
|
||||
<div style={style}>{item}</div>
|
||||
<div className={styles.item}>{item}</div>
|
||||
)));
|
||||
}
|
||||
}
|
||||
|
||||
58
frontend/src/component/feature/form/strategy.scss
Normal file
58
frontend/src/component/feature/form/strategy.scss
Normal file
@ -0,0 +1,58 @@
|
||||
.item {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
max-width: 100%;
|
||||
margin: 5px 0px 15px 35px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
};
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: #f2f9fc;
|
||||
}
|
||||
|
||||
.item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.item:not(:first-child):after {
|
||||
content: " OR ";
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
color: #ccc;
|
||||
width: 25px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
color: #fff;
|
||||
height: 65px;
|
||||
background-color: #607d8b !important;
|
||||
}
|
||||
|
||||
.helpText {
|
||||
color: rgba(0,0,0, 0.54);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
};
|
||||
|
||||
|
||||
.editLink {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.reorderIcon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
@ -1,8 +1,25 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Grid, Cell, Icon } from 'react-mdl';
|
||||
import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
|
||||
import Progress from './progress';
|
||||
import { Link } from 'react-router';
|
||||
import { AppsLinkList, SwitchWithLabel, calc } from '../common';
|
||||
import styles from './metrics.scss';
|
||||
|
||||
const StrategyChipItem = ({ strategy }) => (
|
||||
<Chip className={styles.chip}>
|
||||
<ChipContact className="mdl-color--blue-grey mdl-color-text--white">
|
||||
<Icon style={{ marginTop: '3px' }} name="link" />
|
||||
</ChipContact>
|
||||
<Link to={`/strategies/view/${strategy.name}`} className="mdl-color-text--blue-grey">{strategy.name}</Link>
|
||||
</Chip>
|
||||
);
|
||||
|
||||
// TODO what about "missing" strategies here?
|
||||
const StrategiesList = ({ strategies }) => (
|
||||
<div style={{ verticalAlign: 'middle', textAlign: 'center' }}>With {strategies.length > 1 ? 'strategies' : 'strategy'} {
|
||||
strategies.map((strategy, i) => <StrategyChipItem key={i} strategy={strategy} />)
|
||||
}</div>
|
||||
);
|
||||
|
||||
export default class MetricComponent extends React.Component {
|
||||
static propTypes () {
|
||||
@ -47,8 +64,7 @@ export default class MetricComponent extends React.Component {
|
||||
<Cell tablet={4} col={3} phone={12}>
|
||||
{
|
||||
lastMinute.isFallback ?
|
||||
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }}
|
||||
name="report problem" title="No metrics avaiable" /> :
|
||||
<Icon className={styles.problemIcon} name="report problem" title="No metrics avaiable" /> :
|
||||
<div>
|
||||
<Progress animatePercentageText strokeWidth={10} percentage={lastMinutePercent} width="50" />
|
||||
</div>
|
||||
@ -58,8 +74,7 @@ export default class MetricComponent extends React.Component {
|
||||
<Cell col={3} tablet={4} phone={12}>
|
||||
{
|
||||
lastHour.isFallback ?
|
||||
<Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }}
|
||||
name="report problem" title="No metrics avaiable" /> :
|
||||
<Icon className={styles.problemIcon} name="report problem" title="No metrics avaiable" /> :
|
||||
<div>
|
||||
<Progress strokeWidth={10} percentage={lastHourPercent} width="50" />
|
||||
</div>
|
||||
@ -70,8 +85,7 @@ export default class MetricComponent extends React.Component {
|
||||
{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" />
|
||||
<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>
|
||||
This might be due to your client implementation is not reporting usage.</small></div>
|
||||
</div>
|
||||
@ -79,6 +93,8 @@ export default class MetricComponent extends React.Component {
|
||||
<AppsLinkList apps={seenApps} />
|
||||
</Cell>
|
||||
</Grid>
|
||||
<hr />
|
||||
<StrategiesList strategies={featureToggle.strategies}/>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
37
frontend/src/component/feature/metrics.scss
Normal file
37
frontend/src/component/feature/metrics.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.chip {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.chip:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.chip:not(:first-child):after {
|
||||
content: " OR ";
|
||||
position: absolute;
|
||||
left: -27px;
|
||||
top: 0;
|
||||
color: #ccc;
|
||||
width: 25px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.chip:first-child:before {
|
||||
content: ''
|
||||
}
|
||||
|
||||
.problemIcon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 100px;
|
||||
color: #ccc;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user