157 lines
4.0 KiB
JavaScript
157 lines
4.0 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import styled from 'styled-components';
|
|
import { Margin } from 'styled-components-spacing';
|
|
import Flex from 'styled-flex-component';
|
|
import { Field } from 'redux-form';
|
|
import titleCase from 'title-case';
|
|
import remcalc from 'remcalc';
|
|
|
|
import {
|
|
H5,
|
|
Select as BaseSelect,
|
|
Input as BaseInput,
|
|
FormGroup,
|
|
FormMeta
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
const style = {
|
|
lineHeight: remcalc(48),
|
|
fontSize: remcalc(18)
|
|
};
|
|
|
|
const Bold = styled.span`
|
|
font-weight: ${props => props.theme.font.weight.semibold};
|
|
`;
|
|
|
|
const Select = styled(BaseSelect)`
|
|
color: rgba(73, 73, 73, 0.5);
|
|
border-color: rgba(73, 73, 73, 0.5);
|
|
`;
|
|
|
|
const Input = styled(BaseInput)`
|
|
border-color: rgba(73, 73, 73, 0.5);
|
|
`;
|
|
|
|
const Values = touched => (
|
|
<Margin right={1}>
|
|
<Select
|
|
id={'affinity-rule-3-select'}
|
|
style={style}
|
|
touched={touched}
|
|
width={remcalc(130)}
|
|
embedded
|
|
>
|
|
<option id={'affinity-rule-3-equalling'} value="equalling">
|
|
equalling
|
|
</option>
|
|
<option id={'affinity-rule-3-starting'} value="starting">
|
|
starting with
|
|
</option>
|
|
</Select>
|
|
</Margin>
|
|
);
|
|
|
|
export const Rule = ({ valid, ...rule }) => (
|
|
<Margin bottom={valid ? 4 : 8}>
|
|
<Flex alignCenter wrap>
|
|
<H5 style={style} inline noMargin>
|
|
The instance
|
|
</H5>
|
|
<Margin horizontal={1}>
|
|
<FormGroup name="conditional" field={Field}>
|
|
<Select
|
|
style={style}
|
|
touched={rule.conditional}
|
|
width={remcalc(86)}
|
|
embedded
|
|
id={'affinity-rule-0-select'}
|
|
>
|
|
<option id={'affinity-rule-0-should'} value="should">
|
|
should
|
|
</option>
|
|
<option id={'affinity-rule-0-must'} value="must">
|
|
must
|
|
</option>
|
|
</Select>
|
|
</FormGroup>
|
|
</Margin>
|
|
<H5 style={style} inline noMargin>
|
|
be on
|
|
</H5>
|
|
<Margin horizontal={1}>
|
|
<FormGroup name="placement" field={Field}>
|
|
<Select
|
|
style={style}
|
|
touched={rule.placement}
|
|
width={remcalc(100)}
|
|
embedded
|
|
id={'affinity-rule-1-select'}
|
|
>
|
|
<option id={'affinity-rule-1-same'} value="same">
|
|
the same
|
|
</option>
|
|
<option id={'affinity-rule-1-different'} value="different">
|
|
a different
|
|
</option>
|
|
</Select>
|
|
</FormGroup>
|
|
</Margin>
|
|
<H5 style={style} inline noMargin>
|
|
node as the instance(s) identified by the
|
|
</H5>
|
|
<Margin horizontal={1}>
|
|
<FormGroup name="type" field={Field}>
|
|
<Select
|
|
id={'affinity-rule-2-select'}
|
|
style={style}
|
|
touched={rule.type}
|
|
width={remcalc(135)}
|
|
embedded
|
|
left
|
|
>
|
|
<option id={'affinity-rule-2-name'} value="name">
|
|
instance name
|
|
</option>
|
|
<option id={'affinity-rule-2-tag'} value="tag">
|
|
tag
|
|
</option>
|
|
</Select>
|
|
</FormGroup>
|
|
</Margin>
|
|
<FormGroup name="pattern" field={Field}>
|
|
{Values(rule.pattern)}
|
|
</FormGroup>
|
|
<FormGroup id={'affinity-rule-input'} name="value" field={Field}>
|
|
<Input
|
|
onBlur={null}
|
|
style={style}
|
|
type="text"
|
|
placeholder="Example instance name: nginx"
|
|
embedded
|
|
required
|
|
/>
|
|
<FormMeta absolute />
|
|
</FormGroup>
|
|
</Flex>
|
|
</Margin>
|
|
);
|
|
|
|
export const Header = ({ rule }) => (
|
|
<Fragment>
|
|
<Bold>{titleCase(rule.conditional)}:</Bold> be on a {rule.placement} node as
|
|
the instance(s) identified by the instance {rule.type}
|
|
{rule.type === 'name' ? (
|
|
<Fragment>
|
|
{' '}
|
|
{rule.pattern} “{rule.value}”
|
|
</Fragment>
|
|
) : (
|
|
<Fragment>
|
|
{' '}
|
|
key “{rule.name}" and the instance tag value{' '}
|
|
{rule.pattern && rule.pattern.split('-').join(' ')} "{rule.value}”
|
|
</Fragment>
|
|
)}
|
|
</Fragment>
|
|
);
|