diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index d484169fe4..b481983774 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/frontend/src/component/feature/form/strategy-configure.jsx
@@ -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 &&
{description}
}
+ {description && {description}
}
);
} else if (type === 'list') {
@@ -119,7 +106,7 @@ class StrategyConfigure extends React.Component {
return (
- {description &&
{description}
}
+ {description &&
{description}
}
);
} else if (type === 'number') {
@@ -136,7 +123,7 @@ class StrategyConfigure extends React.Component {
onChange={this.handleConfigChange.bind(this, name)}
value={value}
/>
- {description && {description}
}
+ {description && {description}
}
);
} else {
@@ -152,7 +139,7 @@ class StrategyConfigure extends React.Component {
onChange={this.handleConfigChange.bind(this, name)}
value={value}
/>
- {description && {description}
}
+ {description && {description}
}
);
}
@@ -169,8 +156,8 @@ class StrategyConfigure extends React.Component {
const inputFields = this.renderInputFields(this.props.strategyDefinition);
const { name } = this.props.strategy;
item = (
-
-
+
+
{name}
@@ -182,27 +169,23 @@ class StrategyConfigure extends React.Component {
}
-
+
+ className={styles.editLink}>
{connectDragSource(
- )}
+ )}
);
} else {
const { name } = this.props.strategy;
item = (
-
+
"{name}" deleted?
The strategy "{name}" does not exist on this server.
@@ -217,7 +200,7 @@ class StrategyConfigure extends React.Component {
}
return (connectDropTarget(connectDragPreview(
- {item}
+ {item}
)));
}
}
diff --git a/frontend/src/component/feature/form/strategy.scss b/frontend/src/component/feature/form/strategy.scss
new file mode 100644
index 0000000000..30026e8560
--- /dev/null
+++ b/frontend/src/component/feature/form/strategy.scss
@@ -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;
+}
diff --git a/frontend/src/component/feature/metric-component.jsx b/frontend/src/component/feature/metric-component.jsx
index a47e889e1e..727c36c092 100644
--- a/frontend/src/component/feature/metric-component.jsx
+++ b/frontend/src/component/feature/metric-component.jsx
@@ -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 }) => (
+
+
+
+
+ {strategy.name}
+
+);
+
+// TODO what about "missing" strategies here?
+const StrategiesList = ({ strategies }) => (
+ With {strategies.length > 1 ? 'strategies' : 'strategy'} {
+ strategies.map((strategy, i) => )
+ }
+);
export default class MetricComponent extends React.Component {
static propTypes () {
@@ -47,8 +64,7 @@ export default class MetricComponent extends React.Component {
{
lastMinute.isFallback ?
- :
+ :
@@ -58,8 +74,7 @@ export default class MetricComponent extends React.Component {
{
lastHour.isFallback ?
- :
+ :
@@ -70,8 +85,7 @@ export default class MetricComponent extends React.Component {
{seenApps.length > 0 ?
( Seen in applications: ) :
-
+
Not used in a app in the last hour.
This might be due to your client implementation is not reporting usage.
@@ -79,6 +93,8 @@ export default class MetricComponent extends React.Component {
|
+
+
);
}
}
diff --git a/frontend/src/component/feature/metrics.scss b/frontend/src/component/feature/metrics.scss
new file mode 100644
index 0000000000..0bbe832def
--- /dev/null
+++ b/frontend/src/component/feature/metrics.scss
@@ -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;
+}
|