diff --git a/packages/my-joy-beta/src/components/create-instance/empty.js b/packages/my-joy-beta/src/components/create-instance/empty.js new file mode 100644 index 00000000..fa8dab9e --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/empty.js @@ -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 }) => ( + + + + + No packages were found + + {children} + + + +); diff --git a/packages/my-joy-beta/src/components/create-instance/firewall.js b/packages/my-joy-beta/src/components/create-instance/firewall.js index ce6c52e9..37ce65a9 100644 --- a/packages/my-joy-beta/src/components/create-instance/firewall.js +++ b/packages/my-joy-beta/src/components/create-instance/firewall.js @@ -6,7 +6,6 @@ import { Margin, Padding } from 'styled-components-spacing'; import Flex, { FlexItem } from 'styled-flex-component'; import styled from 'styled-components'; import remcalc from 'remcalc'; -import constantCase from 'constant-case'; import { H3, @@ -15,10 +14,15 @@ import { Divider, Row, Col, - TagList + TagList, + P } from 'joyent-ui-toolkit'; import Tag from '@components/instances/tags'; +import Empty from './empty'; + +const capitalizeFirstLetter = string => + string.charAt(0).toUpperCase() + string.slice(1); const Box = styled.div` display: inline-block; @@ -57,9 +61,11 @@ const Rule = ({ enabled, rule_obj }) => { - - From: - + + + From: + + {froms} @@ -67,9 +73,11 @@ const Rule = ({ enabled, rule_obj }) => { - - To: - + + + To: + + {tos} @@ -77,26 +85,32 @@ const Rule = ({ enabled, rule_obj }) => { - - Protocol: - + + + Protocol: + + {protocol.name} - - Ports: - + + + Ports: + + {protocol.targets.join(';')} - - Action: - - {constantCase(action)} + + + Action: + + + {capitalizeFirstLetter(action)} @@ -134,6 +148,11 @@ export default ({ ) : null} + {enabled && !defaultRules.length ? ( + + Sorry, but we weren’t able to find any firewalls. + + ) : null} {enabled && tagRules.length && defaultRules.length ? ( ) : null} @@ -152,5 +171,21 @@ export default ({ {enabled && (tagRules.length || defaultRules.length) ? ( ) : null} + {enabled ? ( + +

+ *Other firewall rules may apply as defined by wildcard(s), IP(s), + subnet(s), tag(s) or VM(s). Please see{' '} + + firewall rule list + {' '} + for more details. +

+
+ ) : null} ); diff --git a/packages/my-joy-beta/src/components/create-instance/package.js b/packages/my-joy-beta/src/components/create-instance/package.js index a632738b..8a2987fb 100644 --- a/packages/my-joy-beta/src/components/create-instance/package.js +++ b/packages/my-joy-beta/src/components/create-instance/package.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { Field } from 'redux-form'; import styled from 'styled-components'; -import { Margin, Padding } from 'styled-components-spacing'; +import { Margin } from 'styled-components-spacing'; import remcalc from 'remcalc'; import Flex from 'styled-flex-component'; import bytes from 'bytes'; @@ -9,7 +9,6 @@ import bytes from 'bytes'; import { H3, H4, - Card, FormGroup, Button, TableTh, @@ -27,7 +26,7 @@ import { MemoryIcon } from 'joyent-ui-toolkit'; -import NoPackagesImage from '../../assets/no-packages.svg'; +import Empty from './empty'; const GroupIcons = { MEMORY: , @@ -62,10 +61,6 @@ const SuperScript = styled.div` margin-left: ${remcalc(6)}; `; -const NoPackagesTitle = styled(H3)` - color: ${props => props.theme.greyDark}; -`; - export const Filters = ({ resetFilters }) => (

Filters

@@ -132,21 +127,6 @@ export const Filters = ({ resetFilters }) => (
); -export const NoPackages = () => ( - - - - - No packages were found - - - Sorry, but we weren’t able to find any packages with that filter - - - - -); - export const Package = ({ selected = false, id, @@ -265,7 +245,11 @@ export const Packages = ({ {children} - {!packages ? : null} + {!packages ? ( + + Sorry, but we weren’t able to find any packages with that filter + + ) : null}