From fc81d666d025778549cea14475e83adc76be351c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= Date: Fri, 1 Jun 2018 16:00:37 +0100 Subject: [PATCH] feat(instances): CI - firewall responsive designs --- packages/instance-steps/src/firewall/index.js | 230 +++++++++--------- packages/instance-steps/src/metadata/index.js | 1 - .../resource-widgets/src/firewall/index.js | 184 ++++++++++---- .../resource-widgets/src/key-value/index.js | 14 +- yarn.lock | 130 +++++----- 5 files changed, 324 insertions(+), 235 deletions(-) diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js index ebfd3ced..6e79efff 100644 --- a/packages/instance-steps/src/firewall/index.js +++ b/packages/instance-steps/src/firewall/index.js @@ -1,4 +1,5 @@ import React, { Fragment } from 'react'; +import { withTheme } from 'styled-components'; import { Margin } from 'styled-components-spacing'; import Flex, { FlexItem } from 'styled-flex-component'; import { compose, graphql } from 'react-apollo'; @@ -42,119 +43,126 @@ const Firewall = ({ enabled = false, showInactiveRules = null, showInactive = false, + theme = {}, ...props -}) => ( - - }>Firewall rules - - Cloud firewall rules secure instances by defining network traffic rules, - controlling incoming and outgoing traffic. Enabling the firewall applies - only rules which match your instance. Although these rules are created in - the firewall console, the addition of tags can alter the firewall rules. - - - - - - - - {({ next }) => ( - - - - - - {props => ( - - +}) => { + const mobile = theme.screen === 'mobile'; + + return ( + + }>Firewall rules + + Cloud firewall rules secure instances by defining network traffic rules, + controlling incoming and outgoing traffic. Enabling the firewall applies + only rules which match your instance. Although these rules are created + in the firewall console, the addition of tags can alter the firewall + rules. + + + + + + + + {({ next }) => ( + + + + + + {props => ( + + + + )} + + + + + {props => + enabled && !loading ? ( + + ) : null + } + + + + + {enabled && !loading && !defaultRules.length && !tagRules.length ? ( + + + +

No Firewall rules found

+ +

+ Try viewing inactive rules instead to see firewalls that + can potentially affect your instance +

- )} - - - - - {props => - enabled && !loading ? ( - - ) : null - } - - - - - {enabled && !loading && !defaultRules.length && !tagRules.length ? ( + + + + + + + ) : null} + {!loading && enabled && defaultRules.length ? ( + + + + ) : null} + {!loading && enabled && tagRules.length ? ( + + + + ) : null} + {!loading && enabled && (tagRules.length || defaultRules.length) ? ( + +

+ *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} - - -

No Firewall rules found

- -

- Try viewing inactive rules instead to see firewalls that - can potentially affect your instance -

- - - - - - + - ) : null} - {!loading && enabled && defaultRules.length ? ( - - - - ) : null} - {!loading && enabled && tagRules.length ? ( - - - - ) : null} - {!loading && enabled && (tagRules.length || defaultRules.length) ? ( - -

- *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} - - - - - )} - - -); + + )} + + + ); +}; export default compose( connect(({ form, values }, ownProps) => ({ @@ -206,6 +214,4 @@ export default compose( showInactiveRules: () => dispatch(change(IR_FW_F_INACTIVE, 'inactive', true)) })) -)(Firewall); - -export { Preview } from './components'; +)(withTheme(({ ...rest }) => )); diff --git a/packages/instance-steps/src/metadata/index.js b/packages/instance-steps/src/metadata/index.js index bccce92d..5595e6cf 100644 --- a/packages/instance-steps/src/metadata/index.js +++ b/packages/instance-steps/src/metadata/index.js @@ -2,7 +2,6 @@ import React, { Fragment } from 'react'; import { Margin } from 'styled-components-spacing'; import Flex, { FlexItem } from 'styled-flex-component'; import { withTheme } from 'styled-components'; - import { compose } from 'react-apollo'; import { Link } from 'react-router-dom'; import ReduxForm from 'declarative-redux-form'; diff --git a/packages/resource-widgets/src/firewall/index.js b/packages/resource-widgets/src/firewall/index.js index 76cfc8ba..ceeb0a98 100644 --- a/packages/resource-widgets/src/firewall/index.js +++ b/packages/resource-widgets/src/firewall/index.js @@ -9,14 +9,18 @@ import { H3, FormGroup, FormLabel, + Toggle, TagList, TagItem, P, Checkbox, Strong, - Card + Card, + QueryBreakpoints } from 'joyent-ui-toolkit'; +const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints; + const Form = styled.form` margin-bottom: 0 !important; `; @@ -71,66 +75,138 @@ const Rule = ({ enabled, rule_obj }) => { const tos = rule_obj.to.map((p, index) => parsePartial(p, index, style)); return ( - - - - - - - From: - + + + + + + From: + + {froms} + - {froms} - - - - - - - To: - + + To: + + {tos} + - {tos} - - - - - + + + + + Protocol: - - - -

{protocol.name}

- - - - - - - + + {protocol.name} + + + Ports: - - - -

{protocol.targets.join(';')}

- - - - - - - + + {protocol.targets.join(';')} + + + Action: - - - -

{capitalizeFirstLetter(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)}

+ + + + + + ); }; diff --git a/packages/resource-widgets/src/key-value/index.js b/packages/resource-widgets/src/key-value/index.js index 29beadf7..377917ea 100644 --- a/packages/resource-widgets/src/key-value/index.js +++ b/packages/resource-widgets/src/key-value/index.js @@ -91,7 +91,7 @@ const TextareaKeyValue = ({