2018-01-09 17:59:04 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { Field } from 'redux-form';
|
|
|
|
import { Margin, Padding } from 'styled-components-spacing';
|
|
|
|
import Flex, { FlexItem } from 'styled-flex-component';
|
2018-01-30 18:04:03 +02:00
|
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
2018-01-09 17:59:04 +02:00
|
|
|
|
2018-02-01 17:33:58 +02:00
|
|
|
import {
|
|
|
|
H3,
|
|
|
|
FormGroup,
|
|
|
|
FormLabel,
|
|
|
|
TagList,
|
2018-04-12 12:53:00 +03:00
|
|
|
TagItem,
|
2018-02-01 17:33:58 +02:00
|
|
|
P,
|
2018-05-10 19:44:18 +03:00
|
|
|
Checkbox,
|
2018-02-01 17:33:58 +02:00
|
|
|
Strong,
|
2018-06-01 18:00:37 +03:00
|
|
|
Card,
|
|
|
|
QueryBreakpoints
|
2018-02-01 17:33:58 +02:00
|
|
|
} from 'joyent-ui-toolkit';
|
2018-01-09 17:59:04 +02:00
|
|
|
|
2018-06-01 18:00:37 +03:00
|
|
|
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
|
|
|
|
|
2018-02-01 17:33:58 +02:00
|
|
|
const capitalizeFirstLetter = string =>
|
|
|
|
string.charAt(0).toUpperCase() + string.slice(1);
|
2018-01-09 17:59:04 +02:00
|
|
|
|
|
|
|
const Wildcards = {
|
|
|
|
vmall: 'All VMs in DC',
|
|
|
|
any: 'Any'
|
|
|
|
};
|
|
|
|
|
2018-02-01 12:38:12 +02:00
|
|
|
const parsePartial = (p, index, style) => {
|
2018-01-09 17:59:04 +02:00
|
|
|
if (p[0] === 'wildcard') {
|
2018-04-12 12:53:00 +03:00
|
|
|
return <P style={style}>{Wildcards[p[1]]}</P>;
|
2018-01-09 17:59:04 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
if (p[0] === 'tag') {
|
|
|
|
const value = Array.isArray(p[1]) ? p[1][1] : '';
|
|
|
|
const name = Array.isArray(p[1]) ? p[1][0] : p[1];
|
|
|
|
|
2018-01-23 16:33:55 +02:00
|
|
|
return (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin left="0.5">
|
2018-01-29 20:09:18 +02:00
|
|
|
<TagList>
|
2018-04-12 12:53:00 +03:00
|
|
|
<TagItem
|
|
|
|
style={style}
|
|
|
|
norMargin
|
|
|
|
key={index}
|
|
|
|
name={name}
|
|
|
|
value={value}
|
|
|
|
/>
|
2018-01-29 20:09:18 +02:00
|
|
|
</TagList>
|
2018-01-23 16:33:55 +02:00
|
|
|
</Margin>
|
|
|
|
);
|
2018-01-09 17:59:04 +02:00
|
|
|
}
|
2018-03-28 18:32:09 +03:00
|
|
|
|
|
|
|
return (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin key={index} top="0.5" bottom="0.5">
|
2018-03-28 18:32:09 +03:00
|
|
|
<P style={style}>{p[1]}</P>
|
|
|
|
</Margin>
|
|
|
|
);
|
2018-01-12 19:40:23 +02:00
|
|
|
};
|
2018-01-09 17:59:04 +02:00
|
|
|
|
|
|
|
const Rule = ({ enabled, rule_obj }) => {
|
|
|
|
const { action, protocol } = rule_obj;
|
|
|
|
|
2018-02-01 12:38:12 +02:00
|
|
|
const style = {
|
2018-04-12 12:53:00 +03:00
|
|
|
color: enabled ? null : '#D8D8D8'
|
2018-02-01 12:38:12 +02:00
|
|
|
};
|
2018-01-09 17:59:04 +02:00
|
|
|
|
2018-02-01 12:38:12 +02:00
|
|
|
const froms = rule_obj.from.map((p, index) => parsePartial(p, index, style));
|
|
|
|
const tos = rule_obj.to.map((p, index) => parsePartial(p, index, style));
|
2018-01-09 17:59:04 +02:00
|
|
|
return (
|
2018-01-29 20:09:18 +02:00
|
|
|
<Card disabled={!enabled}>
|
2018-06-01 18:00:37 +03:00
|
|
|
<MediumDown>
|
|
|
|
<Flex column>
|
|
|
|
<Padding horizontal="3" vertical="2">
|
|
|
|
<Flex row>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
<Strong style={style}>From: </Strong>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{froms}
|
|
|
|
</Margin>
|
2018-01-18 16:51:22 +02:00
|
|
|
</Margin>
|
2018-06-01 18:00:37 +03:00
|
|
|
<Margin left="5" right="1" inline>
|
|
|
|
<Strong style={style}>To: </Strong>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{tos}
|
|
|
|
</Margin>
|
2018-01-18 16:51:22 +02:00
|
|
|
</Margin>
|
2018-01-09 17:59:04 +02:00
|
|
|
</Flex>
|
2018-06-01 18:00:37 +03:00
|
|
|
</Padding>
|
|
|
|
<Padding
|
|
|
|
horizontal="3"
|
|
|
|
vertical="2"
|
|
|
|
style={{ 'border-top': '1px solid #D8D8D8' }}
|
|
|
|
>
|
|
|
|
<SmallOnly>
|
|
|
|
<Flex column>
|
|
|
|
<Margin horizontal="1" inline>
|
2018-02-01 12:38:12 +02:00
|
|
|
<Strong style={style}>Protocol: </Strong>
|
2018-06-01 18:00:37 +03:00
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{protocol.name}
|
|
|
|
</Margin>
|
|
|
|
</Margin>
|
|
|
|
<Margin horizontal="1" inline>
|
2018-02-01 12:38:12 +02:00
|
|
|
<Strong style={style}>Ports: </Strong>
|
2018-06-01 18:00:37 +03:00
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{protocol.targets.join(';')}
|
|
|
|
</Margin>
|
|
|
|
</Margin>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
<Strong style={style}>Action: </Strong>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{capitalizeFirstLetter(action)}
|
|
|
|
</Margin>
|
|
|
|
</Margin>
|
2018-01-29 20:09:18 +02:00
|
|
|
</Flex>
|
2018-06-01 18:00:37 +03:00
|
|
|
</SmallOnly>
|
|
|
|
<Medium>
|
|
|
|
<Flex row>
|
|
|
|
<Margin left="1" right="4" inline>
|
|
|
|
<Strong style={style}>Protocol: </Strong>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{protocol.name}
|
|
|
|
</Margin>
|
|
|
|
</Margin>
|
|
|
|
<Margin horizontal="4" inline>
|
|
|
|
<Strong style={style}>Ports: </Strong>
|
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{protocol.targets.join(';')}
|
|
|
|
</Margin>
|
|
|
|
</Margin>
|
|
|
|
<Margin left="4" right="1" inline>
|
2018-02-01 12:38:12 +02:00
|
|
|
<Strong style={style}>Action: </Strong>
|
2018-06-01 18:00:37 +03:00
|
|
|
<Margin horizontal="1" inline>
|
|
|
|
{capitalizeFirstLetter(action)}
|
|
|
|
</Margin>
|
|
|
|
</Margin>
|
2018-01-29 20:09:18 +02:00
|
|
|
</Flex>
|
2018-06-01 18:00:37 +03:00
|
|
|
</Medium>
|
|
|
|
</Padding>
|
|
|
|
</Flex>
|
|
|
|
</MediumDown>
|
|
|
|
<Large>
|
|
|
|
<Padding left="3" right="3" top="2" bottom="2">
|
|
|
|
<Row>
|
|
|
|
<Col xs="3">
|
|
|
|
<Flex justifyStart alignCenter contentStretch>
|
|
|
|
<Margin right="0.5">
|
|
|
|
<FlexItem>
|
|
|
|
<Strong style={style}>From: </Strong>
|
|
|
|
</FlexItem>
|
|
|
|
</Margin>
|
|
|
|
<Flex alignCenter>{froms}</Flex>
|
|
|
|
</Flex>
|
|
|
|
</Col>
|
|
|
|
<Col xs="3">
|
|
|
|
<Flex justifyStart alignCenter contentStretch>
|
|
|
|
<Margin right="0.5">
|
|
|
|
<FlexItem>
|
|
|
|
<Strong style={style}>To: </Strong>
|
|
|
|
</FlexItem>
|
|
|
|
</Margin>
|
|
|
|
<Flex alignCenter>{tos}</Flex>
|
|
|
|
</Flex>
|
|
|
|
</Col>
|
|
|
|
<Col xs="2">
|
|
|
|
<Flex justifyStart alignCenter contentStretch>
|
|
|
|
<Margin right="0.5">
|
|
|
|
<FlexItem>
|
|
|
|
<Strong style={style}>Protocol: </Strong>
|
|
|
|
</FlexItem>
|
|
|
|
</Margin>
|
|
|
|
<Flex alignCenter>
|
|
|
|
<P style={style}>{protocol.name}</P>
|
|
|
|
</Flex>
|
|
|
|
</Flex>
|
|
|
|
</Col>
|
|
|
|
<Col xs="2">
|
|
|
|
<Flex justifyStart alignCenter contentStretch>
|
|
|
|
<Margin right="0.5">
|
|
|
|
<FlexItem>
|
|
|
|
<Strong style={style}>Ports: </Strong>
|
|
|
|
</FlexItem>
|
|
|
|
</Margin>
|
|
|
|
<Flex alignCenter>
|
|
|
|
<P style={style}>{protocol.targets.join(';')}</P>
|
|
|
|
</Flex>
|
|
|
|
</Flex>
|
|
|
|
</Col>
|
|
|
|
<Col xs="2">
|
|
|
|
<Flex justifyStart alignCenter contentStretch>
|
|
|
|
<Margin right="0.5">
|
|
|
|
<FlexItem>
|
|
|
|
<Strong style={style}>Action: </Strong>
|
|
|
|
</FlexItem>
|
|
|
|
</Margin>
|
|
|
|
<Flex alignCenter>
|
|
|
|
<P style={style}>{capitalizeFirstLetter(action)}</P>
|
|
|
|
</Flex>
|
|
|
|
</Flex>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Padding>
|
|
|
|
</Large>
|
2018-01-29 20:09:18 +02:00
|
|
|
</Card>
|
2018-01-09 17:59:04 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2018-01-25 00:40:43 +02:00
|
|
|
export const Rules = ({ rules = [] }) => (
|
|
|
|
<Fragment>
|
2018-04-12 12:53:00 +03:00
|
|
|
{rules.map((rule, index) => (
|
2018-05-23 19:29:04 +03:00
|
|
|
<Margin key={rule.id} bottom={index === rules.length - 1 ? '0' : '2'}>
|
2018-01-25 00:40:43 +02:00
|
|
|
<Rule {...rule} />
|
|
|
|
</Margin>
|
|
|
|
))}
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
|
|
|
export const DefaultRules = ({ rules = [] }) => (
|
|
|
|
<Fragment>
|
|
|
|
<H3 noMargin>Default firewall rules</H3>
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="3">
|
2018-01-25 00:40:43 +02:00
|
|
|
<Rules rules={rules} />
|
|
|
|
</Margin>
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
|
|
|
export const TagRules = ({ rules = [] }) => (
|
|
|
|
<Fragment>
|
|
|
|
<H3 noMargin>Firewall rules from instance tags</H3>
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="3">
|
2018-01-25 00:40:43 +02:00
|
|
|
<Rules rules={rules} />
|
|
|
|
</Margin>
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
2018-01-30 18:04:03 +02:00
|
|
|
export const ToggleFirewallForm = ({
|
|
|
|
handleSubmit = () => null,
|
|
|
|
submitOnChange = false,
|
|
|
|
submitting = false,
|
|
|
|
left = false
|
|
|
|
}) => {
|
|
|
|
const onChange = submitOnChange
|
|
|
|
? (...args) => setTimeout(() => handleSubmit(...args), 16)
|
|
|
|
: undefined;
|
|
|
|
|
|
|
|
return (
|
2018-05-25 18:27:05 +03:00
|
|
|
<form onChange={onChange}>
|
2018-05-15 16:21:01 +03:00
|
|
|
<FormGroup
|
2018-04-06 17:53:44 +03:00
|
|
|
id="fw-toggle-firewall"
|
2018-05-15 16:21:01 +03:00
|
|
|
type="checkbox"
|
|
|
|
name="enabled"
|
|
|
|
field={Field}
|
|
|
|
>
|
2018-05-10 19:44:18 +03:00
|
|
|
<Checkbox disabled={submitting}>
|
|
|
|
<FormLabel noMargin actionable>
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin left="2" right="2">
|
2018-05-10 19:44:18 +03:00
|
|
|
Enable Firewall
|
|
|
|
</Margin>
|
|
|
|
</FormLabel>
|
|
|
|
</Checkbox>
|
2018-01-30 18:04:03 +02:00
|
|
|
</FormGroup>
|
2018-05-25 18:27:05 +03:00
|
|
|
</form>
|
2018-01-30 18:04:03 +02:00
|
|
|
);
|
|
|
|
};
|
2018-01-25 00:40:43 +02:00
|
|
|
|
|
|
|
export const ToggleInactiveForm = () => (
|
2018-05-25 18:27:05 +03:00
|
|
|
<form>
|
2018-05-15 16:21:01 +03:00
|
|
|
<FormGroup
|
2018-04-06 17:53:44 +03:00
|
|
|
id="fw-toggle-inactive"
|
2018-05-15 16:21:01 +03:00
|
|
|
type="checkbox"
|
|
|
|
name="inactive"
|
|
|
|
field={Field}
|
|
|
|
>
|
2018-05-10 19:44:18 +03:00
|
|
|
<Checkbox>
|
|
|
|
<FormLabel noMargin actionable>
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin left="2" right="2">
|
2018-04-12 12:53:00 +03:00
|
|
|
Show inactive rules
|
2018-05-10 19:44:18 +03:00
|
|
|
</Margin>
|
|
|
|
</FormLabel>
|
|
|
|
</Checkbox>
|
2018-01-25 00:40:43 +02:00
|
|
|
</FormGroup>
|
2018-05-25 18:27:05 +03:00
|
|
|
</form>
|
2018-01-25 00:40:43 +02:00
|
|
|
);
|