import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import {
H3,
FormGroup,
FormLabel,
TagList,
TagItem,
P,
Checkbox,
Strong,
Card,
QueryBreakpoints
} from 'joyent-ui-toolkit';
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
const Wildcards = {
vmall: 'All VMs in DC',
any: 'Any'
};
const parsePartial = (p, index, style) => {
if (p[0] === 'wildcard') {
return
{Wildcards[p[1]]}
;
}
if (p[0] === 'tag') {
const value = Array.isArray(p[1]) ? p[1][1] : '';
const name = Array.isArray(p[1]) ? p[1][0] : p[1];
return (
);
}
return (
{p[1]}
);
};
const Rule = ({ enabled, rule_obj }) => {
const { action, protocol } = rule_obj;
const style = {
color: enabled ? null : '#D8D8D8'
};
const froms = rule_obj.from.map((p, index) => parsePartial(p, index, style));
const tos = rule_obj.to.map((p, index) => parsePartial(p, index, style));
return (
From:
{froms}
To:
{tos}
Protocol:
{protocol.name}
Ports:
{protocol.targets.join(';')}
Action:
{capitalizeFirstLetter(action)}
Protocol:
{protocol.name}
Ports:
{protocol.targets.join(';')}
Action:
{capitalizeFirstLetter(action)}
From:
{froms}
To:
{tos}
Protocol:
{protocol.name}
Ports:
{protocol.targets.join(';')}
Action:
{capitalizeFirstLetter(action)}
);
};
export const Rules = ({ rules = [] }) => (
{rules.map((rule, index) => (
))}
);
export const DefaultRules = ({ rules = [] }) => (
Default firewall rules
);
export const TagRules = ({ rules = [] }) => (
Firewall rules from instance tags
);
export const ToggleFirewallForm = ({
handleSubmit = () => null,
submitOnChange = false,
submitting = false,
left = false
}) => {
const onChange = submitOnChange
? (...args) => setTimeout(() => handleSubmit(...args), 16)
: undefined;
return (
);
};
export const ToggleInactiveForm = () => (
);