From 09ef1cacde462a39bf6dd4b1ec984a7f31234649 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 27 Sep 2017 15:26:12 +0100 Subject: [PATCH] feat(my-joy-beta): initial tableview for networks and firewall --- .../src/components/instances/firewall-rule.js | 22 ++++++++++++++++ .../src/components/instances/index.js | 2 ++ .../src/components/instances/network.js | 23 +++++++++++++++++ .../src/containers/instances/firewall.js | 18 +++++++++---- .../src/containers/instances/networks.js | 17 ++++++++++--- packages/ui-toolkit/src/card/label.js | 25 ++++++++++++++----- 6 files changed, 92 insertions(+), 15 deletions(-) create mode 100644 packages/my-joy-beta/src/components/instances/firewall-rule.js create mode 100644 packages/my-joy-beta/src/components/instances/network.js diff --git a/packages/my-joy-beta/src/components/instances/firewall-rule.js b/packages/my-joy-beta/src/components/instances/firewall-rule.js new file mode 100644 index 00000000..1fd846ab --- /dev/null +++ b/packages/my-joy-beta/src/components/instances/firewall-rule.js @@ -0,0 +1,22 @@ +import React from 'react'; +import forceArray from 'force-array'; + +import { + Card, + CardMeta, + CardTitle, + CardLabel, + CardView +} from 'joyent-ui-toolkit'; + +export default ({ rule = '', global = false, enabled = false, first, last }) => ( + + + + {rule} + + + + + +); diff --git a/packages/my-joy-beta/src/components/instances/index.js b/packages/my-joy-beta/src/components/instances/index.js index 4bd5c1f4..d64b6a7f 100644 --- a/packages/my-joy-beta/src/components/instances/index.js +++ b/packages/my-joy-beta/src/components/instances/index.js @@ -1,3 +1,5 @@ export { default as Item } from './item'; export { default as List } from './list'; export { default as KeyValue } from './key-value'; +export { default as Network } from './network'; +export { default as FirewallRule } from './firewall-rule'; diff --git a/packages/my-joy-beta/src/components/instances/network.js b/packages/my-joy-beta/src/components/instances/network.js new file mode 100644 index 00000000..01f12e69 --- /dev/null +++ b/packages/my-joy-beta/src/components/instances/network.js @@ -0,0 +1,23 @@ +import React from 'react'; +import forceArray from 'force-array'; + +import { + Card, + CardMeta, + CardTitle, + CardLabel, + CardView +} from 'joyent-ui-toolkit'; + +export default ({ name, gateway, subnet, resolvers = [], first, last }) => ( + + + + {name} + {gateway} + {subnet} + {forceArray(resolvers).join('\u00B7')} + + + +); diff --git a/packages/my-joy-beta/src/containers/instances/firewall.js b/packages/my-joy-beta/src/containers/instances/firewall.js index 62f21ce8..f0a76f36 100644 --- a/packages/my-joy-beta/src/containers/instances/firewall.js +++ b/packages/my-joy-beta/src/containers/instances/firewall.js @@ -9,6 +9,8 @@ import get from 'lodash.get'; import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit'; import GetFirewallRules from '@graphql/list-firewall-rules.gql'; +import { FirewallRule as InstanceFirewallRule } from '@components/instances'; + const Firewall = ({ firewallEnabled = false, @@ -16,13 +18,20 @@ const Firewall = ({ loading, error }) => { + const values = forceArray(firewallRules); const _title = Firewall; - const _loading = !(loading && !forceArray(firewallRules).length) ? null : ( + const _loading = !(loading && !values.length) ? null : ( ); - const _rules = !_loading && ; - const _enabled = !_loading && ; + const _firewall = !_loading && values.map((rule, i, all) => ( + + )); const _error = !(error && !_loading) ? null : ( ); }; diff --git a/packages/my-joy-beta/src/containers/instances/networks.js b/packages/my-joy-beta/src/containers/instances/networks.js index 21b7b281..c028d901 100644 --- a/packages/my-joy-beta/src/containers/instances/networks.js +++ b/packages/my-joy-beta/src/containers/instances/networks.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactJson from 'react-json-view'; import PropTypes from 'prop-types'; import forceArray from 'force-array'; import { compose, graphql } from 'react-apollo'; @@ -9,14 +8,24 @@ import get from 'lodash.get'; import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit'; import GetNetworks from '@graphql/list-networks.gql'; +import { Network as InstanceNetwork } from '@components/instances'; + const Networks = ({ networks = [], loading, error }) => { + const values = forceArray(networks); const _title = Networks; - const _loading = !(loading && !forceArray(networks).length) ? null : ( + const _loading = !(loading && !values.length) ? null : ( ); - const _summary = !_loading && ; + const _networks = !_loading && values.map((network, i, all) => ( + + )); const _error = !(error && !_loading) ? null : ( { {_title} {_loading} {_error} - {_summary} + {_networks} ); }; diff --git a/packages/ui-toolkit/src/card/label.js b/packages/ui-toolkit/src/card/label.js index 61d26ead..b5ab23c3 100644 --- a/packages/ui-toolkit/src/card/label.js +++ b/packages/ui-toolkit/src/card/label.js @@ -2,6 +2,7 @@ import React from 'react'; import remcalc from 'remcalc'; import styled from 'styled-components'; import is, { isNot } from 'styled-is'; +import unitcalc from 'unitcalc'; const Dot = styled.span` width: ${remcalc(6)}; @@ -9,7 +10,7 @@ const Dot = styled.span` border-radius: ${remcalc(3)}; ${is('hasChildren')` - margin-right: ${remcalc(6)}; + margin-left: ${remcalc(6)}; `}; background-color: ${props => props.theme[props.color]}; @@ -18,6 +19,10 @@ const Dot = styled.span` flex: none; `; +const Icon = styled.span` + background-color: none; +`; + const Label = styled.label` line-height: 1; padding: 0 ${remcalc(18)}; @@ -28,24 +33,31 @@ const Label = styled.label` align-items: center; justify-content: center; - width: ${remcalc(100)}; + min-width: ${remcalc(100)}; + padding-left: 0; ${isNot('hasDot')` - width: ${remcalc(88)}; + min-width: ${remcalc(88)}; `}; ${isNot('hasChildren')` width: ${remcalc(6)}; + min-width: ${remcalc(6)}; `}; `; const Span = styled.span` align-self: auto; flex: 1 1 auto; + + ${is('hasDot')` + text-align: right; + `}; `; -export default ({ color, children, ...rest }) => { - const hasDot = Boolean(color); +export default ({ color, icon, children, width, ...rest }) => { + const hasIcon = Boolean(icon); + const hasDot = hasIcon || Boolean(color); const hasChildren = Array.isArray(children) ? children.length @@ -53,8 +65,9 @@ export default ({ color, children, ...rest }) => { return ( ); };