fix(my-joy-beta): create instance improve firewall ui

fixes #1012
This commit is contained in:
Sara Vieira 2018-01-18 15:51:22 +01:00 committed by Sérgio Ramos
parent 780814aef9
commit 57eecf0552
4 changed files with 86 additions and 43 deletions

View File

@ -0,0 +1,25 @@
import React from 'react';
import styled from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { H3, Card } from 'joyent-ui-toolkit';
import NoPackagesImage from '../../assets/no-packages.svg';
const NoPackagesTitle = styled(H3)`
color: ${props => props.theme.greyDark};
`;
export default ({ children }) => (
<Card>
<Padding all={6}>
<Flex alignCenter justifyCenter column>
<Margin bottom={2}>
<img src={NoPackagesImage} alt="No packages were found" />
</Margin>
<NoPackagesTitle>{children}</NoPackagesTitle>
</Flex>
</Padding>
</Card>
);

View File

@ -6,7 +6,6 @@ import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component'; import Flex, { FlexItem } from 'styled-flex-component';
import styled from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import constantCase from 'constant-case';
import { import {
H3, H3,
@ -15,10 +14,15 @@ import {
Divider, Divider,
Row, Row,
Col, Col,
TagList TagList,
P
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import Tag from '@components/instances/tags'; import Tag from '@components/instances/tags';
import Empty from './empty';
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
const Box = styled.div` const Box = styled.div`
display: inline-block; display: inline-block;
@ -57,9 +61,11 @@ const Rule = ({ enabled, rule_obj }) => {
<Row> <Row>
<Col xs={3}> <Col xs={3}>
<Flex justifyStart alignCenter contentStretch> <Flex justifyStart alignCenter contentStretch>
<FlexItem> <Margin right={0.5}>
<b>From: </b> <FlexItem>
</FlexItem> <b>From: </b>
</FlexItem>
</Margin>
<FlexItem grow={1}> <FlexItem grow={1}>
<TagList>{froms}</TagList> <TagList>{froms}</TagList>
</FlexItem> </FlexItem>
@ -67,9 +73,11 @@ const Rule = ({ enabled, rule_obj }) => {
</Col> </Col>
<Col xs={3}> <Col xs={3}>
<Flex justifyStart alignCenter contentStretch> <Flex justifyStart alignCenter contentStretch>
<FlexItem> <Margin right={0.5}>
<b>To: </b> <FlexItem>
</FlexItem> <b>To: </b>
</FlexItem>
</Margin>
<FlexItem grow={1}> <FlexItem grow={1}>
<TagList>{tos}</TagList> <TagList>{tos}</TagList>
</FlexItem> </FlexItem>
@ -77,26 +85,32 @@ const Rule = ({ enabled, rule_obj }) => {
</Col> </Col>
<Col xs={2}> <Col xs={2}>
<Flex justifyStart alignCenter contentStretch> <Flex justifyStart alignCenter contentStretch>
<FlexItem> <Margin right={0.5}>
<b>Protocol: </b> <FlexItem>
</FlexItem> <b>Protocol: </b>
</FlexItem>
</Margin>
<FlexItem grow={1}>{protocol.name}</FlexItem> <FlexItem grow={1}>{protocol.name}</FlexItem>
</Flex> </Flex>
</Col> </Col>
<Col xs={2}> <Col xs={2}>
<Flex justifyStart alignCenter contentStretch> <Flex justifyStart alignCenter contentStretch>
<FlexItem> <Margin right={0.5}>
<b>Ports: </b> <FlexItem>
</FlexItem> <b>Ports: </b>
</FlexItem>
</Margin>
<FlexItem grow={1}>{protocol.targets.join(';')}</FlexItem> <FlexItem grow={1}>{protocol.targets.join(';')}</FlexItem>
</Flex> </Flex>
</Col> </Col>
<Col xs={2}> <Col xs={2}>
<Flex justifyStart alignCenter contentStretch> <Flex justifyStart alignCenter contentStretch>
<FlexItem> <Margin right={0.5}>
<b>Action: </b> <FlexItem>
</FlexItem> <b>Action: </b>
<FlexItem grow={1}>{constantCase(action)}</FlexItem> </FlexItem>
</Margin>
<FlexItem grow={1}>{capitalizeFirstLetter(action)}</FlexItem>
</Flex> </Flex>
</Col> </Col>
</Row> </Row>
@ -134,6 +148,11 @@ export default ({
</Margin> </Margin>
</Fragment> </Fragment>
) : null} ) : null}
{enabled && !defaultRules.length ? (
<Margin bottom={4}>
<Empty>Sorry, but we werent able to find any firewalls.</Empty>
</Margin>
) : null}
{enabled && tagRules.length && defaultRules.length ? ( {enabled && tagRules.length && defaultRules.length ? (
<Divider height={remcalc(18)} transparent /> <Divider height={remcalc(18)} transparent />
) : null} ) : null}
@ -152,5 +171,21 @@ export default ({
{enabled && (tagRules.length || defaultRules.length) ? ( {enabled && (tagRules.length || defaultRules.length) ? (
<Divider height={remcalc(12)} transparent /> <Divider height={remcalc(12)} transparent />
) : null} ) : null}
{enabled ? (
<Margin bottom={4}>
<P>
*Other firewall rules may apply as defined by wildcard(s), IP(s),
subnet(s), tag(s) or VM(s). Please see{' '}
<a
href="https://apidocs.joyent.com/cloudapi/#firewall-rule-syntax"
target="_blank"
rel="noopener noreferrer"
>
firewall rule list
</a>{' '}
for more details.
</P>
</Margin>
) : null}
</form> </form>
); );

View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import styled from 'styled-components'; import styled from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import Flex from 'styled-flex-component'; import Flex from 'styled-flex-component';
import bytes from 'bytes'; import bytes from 'bytes';
@ -9,7 +9,6 @@ import bytes from 'bytes';
import { import {
H3, H3,
H4, H4,
Card,
FormGroup, FormGroup,
Button, Button,
TableTh, TableTh,
@ -27,7 +26,7 @@ import {
MemoryIcon MemoryIcon
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import NoPackagesImage from '../../assets/no-packages.svg'; import Empty from './empty';
const GroupIcons = { const GroupIcons = {
MEMORY: <MemoryIcon fill="#32ABCF" />, MEMORY: <MemoryIcon fill="#32ABCF" />,
@ -62,10 +61,6 @@ const SuperScript = styled.div`
margin-left: ${remcalc(6)}; margin-left: ${remcalc(6)};
`; `;
const NoPackagesTitle = styled(H3)`
color: ${props => props.theme.greyDark};
`;
export const Filters = ({ resetFilters }) => ( export const Filters = ({ resetFilters }) => (
<Margin top={4} bottom={3}> <Margin top={4} bottom={3}>
<H4>Filters</H4> <H4>Filters</H4>
@ -132,21 +127,6 @@ export const Filters = ({ resetFilters }) => (
</Margin> </Margin>
); );
export const NoPackages = () => (
<Card>
<Padding all={6}>
<Flex alignCenter justifyCenter column>
<Margin bottom={2}>
<img src={NoPackagesImage} alt="No packages were found" />
</Margin>
<NoPackagesTitle>
Sorry, but we werent able to find any packages with that filter
</NoPackagesTitle>
</Flex>
</Padding>
</Card>
);
export const Package = ({ export const Package = ({
selected = false, selected = false,
id, id,
@ -265,7 +245,11 @@ export const Packages = ({
</TableThead> </TableThead>
<TableTbody>{children}</TableTbody> <TableTbody>{children}</TableTbody>
</Table> </Table>
{!packages ? <NoPackages /> : null} {!packages ? (
<Empty>
Sorry, but we werent able to find any packages with that filter
</Empty>
) : null}
<Margin top={4}> <Margin top={4}>
<Button type="submit" disabled={pristine}> <Button type="submit" disabled={pristine}>
Next Next

View File

@ -59,8 +59,7 @@ const Firewall = ({
tagRules={tagRules} tagRules={tagRules}
enabled={enabled} enabled={enabled}
/> />
) : null ) : null}
}
</ReduxForm> </ReduxForm>
) : null} ) : null}
{proceeded && !expanded ? ( {proceeded && !expanded ? (