From 52d651a598835710b0795972896026a5ea44561a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 24 Jan 2018 02:11:33 +0000 Subject: [PATCH] feat(my-joy-beta): imc cns fixes #1076 fixes #886 --- packages/my-joy-beta/package.json | 1 + .../__tests__/__snapshots__/cns.spec.js.snap | 0 .../__tests__/cns.spec.js | 0 packages/my-joy-beta/src/components/cns.js | 209 + .../src/components/create-instance/cns.js | 95 - .../my-joy-beta/src/components/key-value.js | 12 +- .../__snapshots__/metadata.spec.js.snap | 3 + .../__snapshots__/networks.spec.js.snap | 385 +- .../__tests__/__snapshots__/tag.spec.js.snap | 3 + .../containers/create-instance/affinity.js | 1 + .../src/containers/create-instance/cns.js | 134 +- .../containers/create-instance/firewall.js | 1 + .../containers/create-instance/metadata.js | 1 + .../containers/create-instance/networks.js | 5 +- .../src/containers/create-instance/tags.js | 1 + .../__tests__/__snapshots__/cns.spec.js.snap | 6690 +++++++++++++++++ .../instances/__tests__/cns.spec.js | 205 + .../instances/__tests__/networks.spec.js | 2 +- .../src/containers/instances/cns.js | 350 + .../src/containers/instances/dns.js | 62 - .../src/containers/instances/index.js | 2 +- .../src/containers/navigation/menu.js | 21 +- packages/my-joy-beta/src/router.js | 8 +- packages/my-joy-beta/src/state/store.js | 13 +- yarn.lock | 12 +- 25 files changed, 7564 insertions(+), 652 deletions(-) rename packages/my-joy-beta/src/components/{create-instance => }/__tests__/__snapshots__/cns.spec.js.snap (100%) rename packages/my-joy-beta/src/components/{create-instance => }/__tests__/cns.spec.js (100%) create mode 100644 packages/my-joy-beta/src/components/cns.js delete mode 100644 packages/my-joy-beta/src/components/create-instance/cns.js create mode 100644 packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap create mode 100644 packages/my-joy-beta/src/containers/instances/__tests__/cns.spec.js create mode 100644 packages/my-joy-beta/src/containers/instances/cns.js delete mode 100644 packages/my-joy-beta/src/containers/instances/dns.js diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index cf54a6c8..e2deecfe 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -29,6 +29,7 @@ "lodash.find": "^4.6.0", "lodash.get": "^4.4.2", "lodash.includes": "^4.3.0", + "lodash.isarray": "^4.0.0", "lodash.isfinite": "^3.3.2", "lodash.isfunction": "^3.0.8", "lodash.isstring": "^4.0.1", diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap similarity index 100% rename from packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.spec.js.snap rename to packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/cns.spec.js b/packages/my-joy-beta/src/components/__tests__/cns.spec.js similarity index 100% rename from packages/my-joy-beta/src/components/create-instance/__tests__/cns.spec.js rename to packages/my-joy-beta/src/components/__tests__/cns.spec.js diff --git a/packages/my-joy-beta/src/components/cns.js b/packages/my-joy-beta/src/components/cns.js new file mode 100644 index 00000000..786332a8 --- /dev/null +++ b/packages/my-joy-beta/src/components/cns.js @@ -0,0 +1,209 @@ +import React, { Fragment } from 'react'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; +import { Margin, Padding } from 'styled-components-spacing'; +import Flex, { FlexItem } from 'styled-flex-component'; +import { Field } from 'redux-form'; + +import { + P, + H3, + Card, + Divider, + TagList, + Input, + Toggle, + Small, + Button, + FormGroup, + FormLabel, + PublicIcon, + PrivateIcon +} from 'joyent-ui-toolkit'; + +import Tag from '@components/tags'; + +const SmallBordered = styled(Small)` + padding-right: ${remcalc(12)}; + margin-right: ${remcalc(12)}; + border-right: ${remcalc(1)} solid ${props => props.theme.grey}; +`; + +export const Header = () => ( + +

Hostnames

+ +

+ Default hostnames are automatically generated from both the instance + name and any attached networks. +

+ + +); + +export const Footer = ({ enabled, submitting, onToggle }) => ( + + + + + Disabled CNS + + Enabled CNS + + + + + {enabled ? ( + +

*All hostnames listed here will be confirmed after deployment.

+ + ) : null} + +); + +export const HostnamesHeader = () => ( + +

CNS service hostnames

+ +

+ CNS service hostnames are created by attaching a CNS service name to one + or more instances. You can serve multiple instances under the same + hostname by assigning them to a matching CNS service name. +

+ + +); + +export const AddServiceForm = ({ + handleSubmit, + submitting, + disabled, + pristine +}) => ( +
+ + + Attach to new CNS service name + + + + + + +
+); + +export const Hostname = ({ values = [], network, service, ...hostname }) => ( + + {values.length ? ( + + + + {network && service + ? 'Network CNS service' + : network + ? 'Network' + : service ? 'CNS service' : 'Instance name'}{' '} + hostname{values.length === 1 ? '' : 's'} + + + + {hostname.public ? : } + + + + {hostname.public ? 'Public' : 'Private'} + + + {values.map(value => ( + + ))} + + ) : null} + +); + +const DefaultHostnames = ({ hostnames }) => ( + +
+ + {hostnames.map(({ value, ...hostname }) => ( + + ))} + + +); + +const CnsHostnames = ({ + hostnames = [], + services = [], + onRemoveService = () => null, + children = null +}) => ( + + + {services.length ? ( + + Existing CNS service name(s) + + + {services.map(value => ( + onRemoveService(value)) + } + /> + ))} + + + + ) : null} + {children} + + + {hostnames.map(({ value, ...hostname }) => ( + + ))} + + + +); + +export default ({ + hostnames = [], + services = [], + onRemoveService, + children = null +}) => ( + + + !service)} + /> + + + service)} + onRemoveService={onRemoveService} + > + {children} + + + + +); diff --git a/packages/my-joy-beta/src/components/create-instance/cns.js b/packages/my-joy-beta/src/components/create-instance/cns.js deleted file mode 100644 index 46b03de1..00000000 --- a/packages/my-joy-beta/src/components/create-instance/cns.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { Fragment } from 'react'; -import styled from 'styled-components'; -import remcalc from 'remcalc'; -import { Margin, Padding } from 'styled-components-spacing'; -import Flex, { FlexItem } from 'styled-flex-component'; -import { Field } from 'redux-form'; - -import { - P, - H3, - Input, - Small, - Button, - FormGroup, - FormLabel, - PublicIcon, - PrivateIcon -} from 'joyent-ui-toolkit'; - -const SmallBordered = styled(Small)` - padding-right: ${remcalc(12)}; - margin-right: ${remcalc(12)}; - border-right: ${remcalc(1)} solid ${props => props.theme.grey}; -`; - -export const Header = () => ( - -

Hostnames

- -

- Default hostnames are automatically generated from both the instance - name and any attached networks. -

- - -); - -export const HostnamesHeader = () => ( - -

CNS service hostnames

- -

- CNS service hostnames are created by attaching a CNS service name to one - or more instances. You can serve multiple instances under the same - hostname by assigning them to a matching CNS service name. -

- - -); - -export const AddServiceForm = ({ handleSubmit, pristine }) => ( -
- - - Attach to new CNS service name - - - - - - -
-); - -export const Hostname = ({ values = [], network, service, ...hostname }) => ( - - {values.length ? ( - - - - {network && service - ? 'Network CNS service' - : network - ? 'Network' - : service ? 'CNS service' : 'Instance name'}{' '} - hostname{values.length === 1 ? '' : 's'} - - - - {hostname.public ? : } - - - - {hostname.public ? 'Public' : 'Private'} - - - {values.map(value => ( - - ))} - - ) : null} - -); diff --git a/packages/my-joy-beta/src/components/key-value.js b/packages/my-joy-beta/src/components/key-value.js index 6940b0b1..fd9943a5 100644 --- a/packages/my-joy-beta/src/components/key-value.js +++ b/packages/my-joy-beta/src/components/key-value.js @@ -163,13 +163,13 @@ export const KeyValue = ({ {initialValues.name ? ( {expanded ? ( - {`${initialValues.name}${type === 'metadata' - ? '-' - : ':'}`} + {`${initialValues.name}${ + type === 'metadata' ? '-' : ':' + }`} ) : ( - {`${initialValues.name}${type === 'metadata' - ? '-' - : ':'}`} + {`${initialValues.name}${ + type === 'metadata' ? '-' : ':' + }`} )} {initialValues.value} diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap index 543455e4..8f235d94 100644 --- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap @@ -398,6 +398,7 @@ Array [ Read the docs @@ -1930,6 +1931,7 @@ Array [ Read the docs @@ -4756,6 +4758,7 @@ Array [ Read the docs diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap index a2f7649d..f0d8d3b4 100644 --- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap @@ -547,6 +547,7 @@ Array [ Read more @@ -963,334 +964,7 @@ Array [ /> , - .c7 { - color: rgba(73,73,73,1); - line-height: 1.5rem; - font-size: 0.9375rem; - margin: 0; -} - -.c7 + p, -.c7 + small, -.c7 + h1, -.c7 + h2, -.c7 + label, -.c7 + h3, -.c7 + h4, -.c7 + h5, -.c7 + div, -.c7 + span { - padding-bottom: 2.25rem; -} - -.c0 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 0 1 auto; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-right: -0.5rem; - margin-left: -0.5rem; -} - -.c1 { - box-sizing: border-box; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; -} - -.c8 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c5 { - -webkit-order: 0; - -ms-flex-order: 0; - order: 0; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 1; - -ms-flex-negative: 1; - flex-shrink: 1; -} - -.c12 { - margin-right: 0.25rem; -} - -.c2 { - display: inline-block; - margin-top: 1rem; - margin-right: 1rem; -} - -.c6 { - margin-top: 0.5rem; - margin-right: 1rem; - margin-bottom: 0.5rem; - margin-left: 1rem; -} - -.c10 { - margin-right: 2rem; -} - -.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c3 { - display: inline-block; - background-color: rgb(255,255,255); - border: 0.0625rem solid rgb(216,216,216); - border-radius: 0.25rem; - min-width: 18.75rem; -} - -@media only screen and (min-width:0em) { - .c1 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - display: block; - } -} - -@media only screen and (min-width:48em) { - .c1 { - -webkit-flex-basis: 66.66666666666667%; - -ms-flex-preferred-size: 66.66666666666667%; - flex-basis: 66.66666666666667%; - max-width: 66.66666666666667%; - display: block; - } -} - -
-
-
-
-
-
-
-
-

- name2 -

-
-
-
-
-
-
-
-
-
-
-
-
-
- - - -
-
-
-

- Private -

-
-
-
-
-
-
-
-
-
- - - -
-
-
-

- Data center network -

-
-
-
-
-
-
-
-
-
-
-
-
-, +
, .c0 { margin-bottom: 2rem; } @@ -1535,6 +1209,7 @@ Array [ Read more @@ -3409,6 +3084,10 @@ Array [ margin-right: 0.25rem; } +.c10 { + margin-right: 2rem; +} + .c2 { display: inline-block; margin-top: 1rem; @@ -3422,10 +3101,6 @@ Array [ margin-left: 1rem; } -.c10 { - margin-right: 2rem; -} - .c9 { display: -webkit-box; display: -webkit-flex; @@ -3446,29 +3121,6 @@ Array [ align-content: stretch; } -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - .c11 { display: -webkit-box; display: -webkit-flex; @@ -3493,6 +3145,29 @@ Array [ align-items: center; } +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .c3 { display: inline-block; background-color: rgb(255,255,255); diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap index e179f72d..66508a20 100644 --- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap @@ -384,6 +384,7 @@ Array [ Read the docs @@ -1889,6 +1890,7 @@ Array [ Read the docs @@ -2525,6 +2527,7 @@ Array [ Read the docs diff --git a/packages/my-joy-beta/src/containers/create-instance/affinity.js b/packages/my-joy-beta/src/containers/create-instance/affinity.js index dfb4afb4..694ab3bc 100644 --- a/packages/my-joy-beta/src/containers/create-instance/affinity.js +++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js @@ -60,6 +60,7 @@ export const Affinity = ({ Read the docs diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js index 2f32dc6a..68f2b3af 100644 --- a/packages/my-joy-beta/src/containers/create-instance/cns.js +++ b/packages/my-joy-beta/src/containers/create-instance/cns.js @@ -4,37 +4,17 @@ import ReduxForm from 'declarative-redux-form'; import { destroy } from 'redux-form'; import { connect } from 'react-redux'; import get from 'lodash.get'; -import { Margin, Padding } from 'styled-components-spacing'; -import Flex from 'styled-flex-component'; +import { Margin } from 'styled-components-spacing'; import { set } from 'react-redux-values'; import punycode from 'punycode'; -import remcalc from 'remcalc'; -import { - CnsIcon, - P, - Card, - H3, - Button, - FormGroup, - FormLabel, - Toggle, - Divider, - TagList, - StatusLoader -} from 'joyent-ui-toolkit'; - -import { - Hostname, - Header, - AddServiceForm, - HostnamesHeader -} from '@components/create-instance/cns'; +import { CnsIcon, H3, Button, FormLabel, TagList } from 'joyent-ui-toolkit'; +import Cns, { Footer, AddServiceForm } from '@components/cns'; import Tag from '@components/tags'; import Title from '@components/create-instance/title'; import Description from '@components/description'; -import getAccount from '@graphql/get-account.gql'; +import GetAccount from '@graphql/get-account.gql'; const CNS_FORM = 'create-instance-cns'; @@ -50,8 +30,7 @@ const CNSContainer = ({ handleEdit, handleToggleCnsEnabled, handleAddService, - handleRemoveService, - loading + handleRemoveService }) => ( }> @@ -73,81 +52,24 @@ const CNSContainer = ({ ) : null} <div> {expanded && cnsEnabled ? ( - <Card> - <Padding all={4} bottom={0}> - <Header /> - {loading ? ( - <Margin all={2}> - {' '} - <StatusLoader /> - </Margin> - ) : ( - <Flex column> - {hostnames - .filter(({ service }) => !service) - .map(({ value, ...hostname }) => ( - <Hostname key={value} value={value} {...hostname} /> - ))} - </Flex> - )} - <Divider height={remcalc(1)} /> - <Margin top={4}> - <HostnamesHeader /> - {serviceNames.length ? ( - <Margin bottom={3}> - <FormLabel>Existing CNS service name(s)</FormLabel> - <Margin top={1}> - <TagList> - {serviceNames.map((value, index) => ( - <Tag - active - key={index} - value={value} - onRemoveClick={() => handleRemoveService(index)} - /> - ))} - </TagList> - </Margin> - </Margin> - ) : null} - <ReduxForm - form={`${CNS_FORM}-new-service`} - destroyOnUnmount={false} - forceUnregisterOnUnmount={true} - onSubmit={handleAddService} - > - {props => <AddServiceForm {...props} />} - </ReduxForm> - <Margin top={4}> - <Flex column> - {hostnames - .filter(({ service }) => service) - .map(({ value, ...hostname }) => ( - <Hostname key={value} value={value} {...hostname} /> - ))} - </Flex> - </Margin> - </Margin> - </Padding> - </Card> + <Cns + hostnames={hostnames} + services={serviceNames} + onRemoveService={handleRemoveService} + > + <ReduxForm + form={`${CNS_FORM}-new-service`} + destroyOnUnmount={false} + forceUnregisterOnUnmount={true} + onSubmit={handleAddService} + > + {props => <AddServiceForm {...props} />} + </ReduxForm> + </Cns> ) : null} {expanded ? ( <Fragment> - <Margin bottom={4} top={4}> - <FormGroup name="cns-enabled"> - <Flex alignCenter> - <FormLabel>Disabled CNS</FormLabel> - <Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}> - Enabled CNS - </Toggle> - </Flex> - </FormGroup> - </Margin> - <Margin bottom={4}> - <P> - *All hostnames listed here will be confirmed after deployment. - </P> - </Margin> + <Footer enabled={cnsEnabled} onToggle={handleToggleCnsEnabled} /> <Margin bottom={4}> <Button type="button" onClick={handleNext}> Next @@ -184,9 +106,8 @@ const CNSContainer = ({ ); export default compose( - graphql(getAccount, { - props: ({ data: { loading, account: { id } = [] } }) => ({ - loading, + graphql(GetAccount, { + props: ({ data: { account: { id = '<account-id>' } = [] } }) => ({ id }) }), @@ -252,7 +173,7 @@ export default compose( handleAddService: ({ name }) => { const serviceName = punycode .encode(name.toLowerCase().replace(/\s/g, '-')) - .replace(/\-$/, ''); + .replace(/-$/, ''); dispatch([ destroy(`${CNS_FORM}-new-service`), @@ -262,11 +183,12 @@ export default compose( }) ]); }, - handleRemoveService: index => { - serviceNames.splice(index, 1); - + handleRemoveService: value => { return dispatch( - set({ name: `${CNS_FORM}-services`, value: serviceNames.slice() }) + set({ + name: `${CNS_FORM}-services`, + value: serviceNames.filter(name => name !== value) + }) ); } })) diff --git a/packages/my-joy-beta/src/containers/create-instance/firewall.js b/packages/my-joy-beta/src/containers/create-instance/firewall.js index a80d6d57..b0b721d3 100644 --- a/packages/my-joy-beta/src/containers/create-instance/firewall.js +++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js @@ -43,6 +43,7 @@ const Firewall = ({ <a target="__blank" href="https://docs.joyent.com/public-cloud/network/firewall" + rel="noopener noreferrer" > Read more </a> diff --git a/packages/my-joy-beta/src/containers/create-instance/metadata.js b/packages/my-joy-beta/src/containers/create-instance/metadata.js index 049ae825..8b4bd929 100644 --- a/packages/my-joy-beta/src/containers/create-instance/metadata.js +++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js @@ -45,6 +45,7 @@ export const Metadata = ({ <a target="__blank" href="https://docs.joyent.com/public-cloud/tags-metadata/metadata" + rel="noopener noreferrer" > Read the docs </a> diff --git a/packages/my-joy-beta/src/containers/create-instance/networks.js b/packages/my-joy-beta/src/containers/create-instance/networks.js index dc5a7c37..a307caa8 100644 --- a/packages/my-joy-beta/src/containers/create-instance/networks.js +++ b/packages/my-joy-beta/src/containers/create-instance/networks.js @@ -44,6 +44,7 @@ export const Networks = ({ <a target="__blank" href="https://docs.joyent.com/public-cloud/network/sdn" + rel="noopener noreferrer" > Read more </a> @@ -65,7 +66,7 @@ export const Networks = ({ <form> {networks.map( ({ id, selected, infoExpanded, machinesExpanded, ...network }) => - !expanded && !selected ? null : ( + expanded || (selected && proceeded) ? ( <Network key={id} id={id} @@ -79,7 +80,7 @@ export const Networks = ({ } {...network} /> - ) + ) : null )} </form> )} diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js index 2666af4e..97e3076c 100644 --- a/packages/my-joy-beta/src/containers/create-instance/tags.js +++ b/packages/my-joy-beta/src/containers/create-instance/tags.js @@ -42,6 +42,7 @@ export const Tags = ({ <a target="__blank" href="https://docs.joyent.com/public-cloud/tags-metadata/tags" + rel="noopener noreferrer" > Read the docs </a> diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap new file mode 100644 index 00000000..ed8d51d4 --- /dev/null +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap @@ -0,0 +1,6690 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders <Cns /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c12 { + margin-top: 2rem; +} + +.c18 { + margin-left: 0.5rem; +} + +.c22 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c27 { + margin-bottom: 2rem; +} + +.c7 { + padding: 2rem; + padding-bottom: 0; +} + +.c9 { + padding-bottom: 0.5rem; +} + +.c13 { + padding-bottom: 1rem; +} + +.c21 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c21::-moz-focus-inner, +.c21[type='button']::-moz-focus-inner, +.c21[type='reset']::-moz-focus-inner, +.c21[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c21:-moz-focusring, +.c21[type='button']:-moz-focusring, +.c21[type='reset']:-moz-focusring, +.c21[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c21 + button { + margin-left: 0.375rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c20 { + display: inline-block; +} + +.c19 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c19:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c19:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c19:active, +.c19:active:hover, +.c19:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c19[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c16 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c8 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c8 + p, +.c8 + small, +.c8 + h1, +.c8 + h2, +.c8 + label, +.c8 + h3, +.c8 + h4, +.c8 + h5, +.c8 + div, +.c8 + span { + margin-top: 1.5rem; +} + +.c11 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c6 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c15 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c17 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 22.1875rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c17::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c17::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c17:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c17:invalid { + box-shadow: none; +} + +.c17:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c17:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c17:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c17:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c17:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c24 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c25 { + display: none; +} + +.c25:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c25:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c25:checked + label:active { + box-shadow: none; +} + +.c26 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c26::selection { + background: none; +} + +.c26:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c26:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c26:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c26:after, +.c26:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c26:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c26:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c26:before { + display: none; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.c23 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + disabled={false} + name="card" + > + <div + className="c7" + > + <h3 + className="c8" + > + Hostnames + </h3> + <div + className="c9" + > + <p + className="c5" + > + Default hostnames are automatically generated from both the instance name and any attached networks. + </p> + </div> + <div + className="c10" + /> + <div + className="c11 c2" + height="0.0625rem" + /> + <div + className="c12" + > + <div + className="c12" + > + <h3 + className="c8" + > + CNS service hostnames + </h3> + <div + className="c13" + > + <p + className="c5" + > + CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name. + </p> + </div> + </div> + <form + onSubmit={undefined} + > + <div + className="c14" + > + <div + className="baseline-jVaZNU kXgQxt c15" + name="name" + role="group" + style={undefined} + > + <label + className="c16" + htmlFor="k" + > + Attach to new CNS service name + </label> + <input + className="c17" + disabled={false} + id="k" + onBlur={null} + placeholder="Example: mySQLdb" + /> + </div> + <div + className="c18" + > + <button + className="c19 c20 c21" + disabled={undefined} + href="" + type="submit" + > + Add + </button> + </div> + </div> + </form> + <div + className="c12" + > + <div + className="c10" + /> + </div> + </div> + </div> + </div> + <div + className="c22" + > + <div + className="baseline-jVaZNU kXgQxt c15" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c23" + > + <label + className="c16" + htmlFor="l" + > + Disabled CNS + </label> + <div + className="c24" + > + <input + checked={true} + className="c25" + disabled={false} + id="l" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={true} + className="c26" + disabled={false} + htmlFor="l" + id="l" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={true} + className="c16" + disabled={false} + htmlFor="l" + id="l" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> + <div + className="c27" + > + <p + className="c5" + > + *All hostnames listed here will be confirmed after deployment. + </p> + </div> +</div> +`; + +exports[`renders <Cns disabled /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c6 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c7 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c10 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c11 { + display: none; +} + +.c11:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c11:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c11:checked + label:active { + box-shadow: none; +} + +.c12 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c12::selection { + background: none; +} + +.c12:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c12:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c12:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c12:after, +.c12:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c12:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c12:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c12:before { + display: none; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + > + <div + className="baseline-jVaZNU kXgQxt c7" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c8" + > + <label + className="c9" + htmlFor="r" + > + Disabled CNS + </label> + <div + className="c10" + > + <input + checked={false} + className="c11" + disabled={false} + id="r" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={false} + className="c12" + disabled={false} + htmlFor="r" + id="r" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={false} + className="c9" + disabled={false} + htmlFor="r" + id="r" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> +</div> +`; + +exports[`renders <Cns hostnames /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c20 { + margin-top: 2rem; +} + +.c26 { + margin-left: 0.5rem; +} + +.c30 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c11 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 0.25rem; +} + +.c7 { + padding: 2rem; + padding-bottom: 0; +} + +.c9 { + padding-bottom: 0.5rem; +} + +.c21 { + padding-bottom: 1rem; +} + +.c14 { + font-size: 80%; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + color: rgba(73,73,73,1); + line-height: 1.125rem; + font-size: 0.8125rem; + font-weight: 600; +} + +.c17 { + font-size: 80%; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + color: rgba(73,73,73,1); + line-height: 1.125rem; + font-size: 0.8125rem; +} + +.c29 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c29::-moz-focus-inner, +.c29[type='button']::-moz-focus-inner, +.c29[type='reset']::-moz-focus-inner, +.c29[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c29:-moz-focusring, +.c29[type='button']:-moz-focusring, +.c29[type='reset']:-moz-focusring, +.c29[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c29 + button { + margin-left: 0.375rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c28 { + display: inline-block; +} + +.c27 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c27:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c27:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c27:active, +.c27:active:hover, +.c27:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c27[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c24 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c8 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c8 + p, +.c8 + small, +.c8 + h1, +.c8 + h2, +.c8 + label, +.c8 + h3, +.c8 + h4, +.c8 + h5, +.c8 + div, +.c8 + span { + margin-top: 1.5rem; +} + +.c19 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c6 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c23 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c25 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 22.1875rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c25::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c25::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c25:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c25:invalid { + box-shadow: none; +} + +.c25:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c25:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c25:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c25:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c25:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c18 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgb(250,250,250); + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; + font-family: "Roboto Mono"; + width: 100%; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c18::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:invalid { + box-shadow: none; +} + +.c18::-webkit-input-placeholder { + color: rgb(216,216,216); +} + +.c18::-moz-placeholder { + color: rgb(216,216,216); +} + +.c18:-ms-input-placeholder { + color: rgb(216,216,216); +} + +.c18:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c18:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:disabled { + color: rgba(73,73,73,1); +} + +.c18:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,1); +} + +.c18:disabled::-moz-placeholder { + color: rgba(73,73,73,1); +} + +.c18:disabled:-ms-input-placeholder { + color: rgba(73,73,73,1); +} + +.c18:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c32 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c33 { + display: none; +} + +.c33:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c33:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c33:checked + label:active { + box-shadow: none; +} + +.c34 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c34::selection { + background: none; +} + +.c34:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c34:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c34:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c34:after, +.c34:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c34:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c34:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c34:before { + display: none; +} + +.c15 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c22 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.c31 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c13 { + padding-right: 0.75rem; + margin-right: 0.75rem; + border-right: 0.0625rem solid rgb(216,216,216); +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + disabled={false} + name="card" + > + <div + className="c7" + > + <h3 + className="c8" + > + Hostnames + </h3> + <div + className="c9" + > + <p + className="c5" + > + Default hostnames are automatically generated from both the instance name and any attached networks. + </p> + </div> + <div + className="c10" + > + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + Instance name + + hostname + + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + > + <path + d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Public + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="stuffy-stuff" + /> + </div> + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + Instance name + + hostname + + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Private + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="stuffy-stuff" + /> + </div> + </div> + <div + className="c19 c2" + height="0.0625rem" + /> + <div + className="c20" + > + <div + className="c20" + > + <h3 + className="c8" + > + CNS service hostnames + </h3> + <div + className="c21" + > + <p + className="c5" + > + CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name. + </p> + </div> + </div> + <form + onSubmit={undefined} + > + <div + className="c22" + > + <div + className="baseline-jVaZNU kXgQxt c23" + name="name" + role="group" + style={undefined} + > + <label + className="c24" + htmlFor="u" + > + Attach to new CNS service name + </label> + <input + className="c25" + disabled={false} + id="u" + onBlur={null} + placeholder="Example: mySQLdb" + /> + </div> + <div + className="c26" + > + <button + className="c27 c28 c29" + disabled={undefined} + href="" + type="submit" + > + Add + </button> + </div> + </div> + </form> + <div + className="c20" + > + <div + className="c10" + > + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + CNS service + + hostname + s + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + > + <path + d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Public + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="serbice" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dssasda" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dsasd" + /> + </div> + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + CNS service + + hostname + s + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Private + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="serbice" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dssasda" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dsasd" + /> + </div> + </div> + </div> + </div> + </div> + </div> + <div + className="c30" + > + <div + className="baseline-jVaZNU kXgQxt c23" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c31" + > + <label + className="c24" + htmlFor="v" + > + Disabled CNS + </label> + <div + className="c32" + > + <input + checked={true} + className="c33" + disabled={false} + id="v" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={true} + className="c34" + disabled={false} + htmlFor="v" + id="v" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={true} + className="c24" + disabled={false} + htmlFor="v" + id="v" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> + <div + className="c11" + > + <p + className="c5" + > + *All hostnames listed here will be confirmed after deployment. + </p> + </div> +</div> +`; + +exports[`renders <Cns loading /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c7 { + fill: rgb(59,70,204); + stroke: rgb(59,70,204); + -webkit-animation: iCqDak 1.5s ease-out 0s infinite; + animation: iCqDak 1.5s ease-out 0s infinite; +} + +.c8 { + fill: rgb(59,70,204); + stroke: rgb(59,70,204); + -webkit-animation: iCqDak 1.5s ease-out 0s infinite; + animation: iCqDak 1.5s ease-out 0s infinite; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} + +.c9 { + fill: rgb(59,70,204); + stroke: rgb(59,70,204); + -webkit-animation: iCqDak 1.5s ease-out 0s infinite; + animation: iCqDak 1.5s ease-out 0s infinite; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + text-align: center; + margin-bottom: 0; + margin-left: 0.375rem; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + padding-bottom: 2.25rem; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 1.25rem; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + > + <svg + height="10" + width="28" + > + <rect + className="c7" + height="6" + width="6" + x="2" + y="2" + /> + <rect + className="c8" + height="6" + width="6" + x="11" + y="2" + /> + <rect + className="c9" + height="6" + width="6" + x="20" + y="2" + /> + </svg> + <p + className="c10" + > + Loading... + </p> + </div> +</div> +`; + +exports[`renders <Cns loadingError /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c17 { + margin-top: 2rem; +} + +.c23 { + margin-left: 0.5rem; +} + +.c12 { + padding: 2rem; + padding-bottom: 0; +} + +.c14 { + padding-bottom: 0.5rem; +} + +.c18 { + padding-bottom: 1rem; +} + +.c26 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c26::-moz-focus-inner, +.c26[type='button']::-moz-focus-inner, +.c26[type='reset']::-moz-focus-inner, +.c26[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c26:-moz-focusring, +.c26[type='button']:-moz-focusring, +.c26[type='reset']:-moz-focusring, +.c26[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c26 + button { + margin-left: 0.375rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c25 { + display: inline-block; +} + +.c24 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c24:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c24:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c24:active, +.c24:active:hover, +.c24:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c24[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c21 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c13 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c13 + p, +.c13 + small, +.c13 + h1, +.c13 + h2, +.c13 + label, +.c13 + h3, +.c13 + h4, +.c13 + h5, +.c13 + div, +.c13 + span { + margin-top: 1.5rem; +} + +.c9 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c9 + p, +.c9 + small, +.c9 + h1, +.c9 + h2, +.c9 + label, +.c9 + h3, +.c9 + h4, +.c9 + h5, +.c9 + div, +.c9 + span { + margin-top: 0.75rem; +} + +.c16 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c11 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c20 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c22 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 22.1875rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c22::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:invalid { + box-shadow: none; +} + +.c22:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c22:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c6 { + position: relative; + margin-bottom: 0.75rem; + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid rgb(216,216,216); + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c7 { + min-width: 2.25rem; + margin-right: 1.125rem; + min-height: 100%; + background-color: rgb(0,152,88); + background-color: rgb(210,67,58); +} + +.c8 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c10 { + position: absolute; + right: 0.1875rem; + margin: 0; +} + +.c15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c19 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + /> + <div + className="c8" + > + <h4 + className="c9" + > + Ooops! + </h4> + <p + className="c5" + > + An error occurred while loading your CNS services + </p> + </div> + <svg + className="c10 " + height="11.31" + innerRef={undefined} + onClick={[Function]} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 11.31 11.31" + width="11.31" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + <div + className="c11" + disabled={false} + name="card" + > + <div + className="c12" + > + <h3 + className="c13" + > + Hostnames + </h3> + <div + className="c14" + > + <p + className="c5" + > + Default hostnames are automatically generated from both the instance name and any attached networks. + </p> + </div> + <div + className="c15" + /> + <div + className="c16 c2" + height="0.0625rem" + /> + <div + className="c17" + > + <div + className="c17" + > + <h3 + className="c13" + > + CNS service hostnames + </h3> + <div + className="c18" + > + <p + className="c5" + > + CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name. + </p> + </div> + </div> + <form + onSubmit={undefined} + > + <div + className="c19" + > + <div + className="baseline-jVaZNU kXgQxt c20" + name="name" + role="group" + style={undefined} + > + <label + className="c21" + htmlFor="m" + > + Attach to new CNS service name + </label> + <input + className="c22" + disabled={false} + id="m" + onBlur={null} + placeholder="Example: mySQLdb" + /> + </div> + <div + className="c23" + > + <button + className="c24 c25 c26" + disabled={undefined} + href="" + type="submit" + > + Add + </button> + </div> + </div> + </form> + <div + className="c17" + > + <div + className="c15" + /> + </div> + </div> + </div> + </div> +</div> +`; + +exports[`renders <Cns mutating /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c20 { + margin-top: 2rem; +} + +.c31 { + margin-left: 0.5rem; +} + +.c35 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c11 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 0.25rem; +} + +.c23 { + margin-top: 0.25rem; +} + +.c25 { + margin-right: 0.25rem; + margin-bottom: 0.25rem; +} + +.c7 { + padding: 2rem; + padding-bottom: 0; +} + +.c9 { + padding-bottom: 0.5rem; +} + +.c21 { + padding-bottom: 1rem; +} + +.c14 { + font-size: 80%; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + color: rgba(73,73,73,1); + line-height: 1.125rem; + font-size: 0.8125rem; + font-weight: 600; +} + +.c17 { + font-size: 80%; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + color: rgba(73,73,73,1); + line-height: 1.125rem; + font-size: 0.8125rem; +} + +.c34 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c34::-moz-focus-inner, +.c34[type='button']::-moz-focus-inner, +.c34[type='reset']::-moz-focus-inner, +.c34[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c34:-moz-focusring, +.c34[type='button']:-moz-focusring, +.c34[type='reset']:-moz-focusring, +.c34[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c34 + button { + margin-left: 0.375rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c33 { + display: inline-block; +} + +.c32 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c32:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c32:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c32:active, +.c32:active:hover, +.c32:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c32[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c32:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c32:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c32:active, +.c32:active:hover, +.c32:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c22 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c40 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; + color: rgb(216,216,216); +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c8 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c8 + p, +.c8 + small, +.c8 + h1, +.c8 + h2, +.c8 + label, +.c8 + h3, +.c8 + h4, +.c8 + h5, +.c8 + div, +.c8 + span { + margin-top: 1.5rem; +} + +.c19 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c26 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c6 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c29 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c18 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgb(250,250,250); + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; + font-family: "Roboto Mono"; + width: 100%; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c18::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:invalid { + box-shadow: none; +} + +.c18::-webkit-input-placeholder { + color: rgb(216,216,216); +} + +.c18::-moz-placeholder { + color: rgb(216,216,216); +} + +.c18:-ms-input-placeholder { + color: rgb(216,216,216); +} + +.c18:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c18:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c18:disabled { + color: rgba(73,73,73,1); +} + +.c18:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,1); +} + +.c18:disabled::-moz-placeholder { + color: rgba(73,73,73,1); +} + +.c18:disabled:-ms-input-placeholder { + color: rgba(73,73,73,1); +} + +.c18:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c30 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgb(250,250,250); + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; + max-width: 22.1875rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c30::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c30::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c30:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c30:invalid { + box-shadow: none; +} + +.c30::-webkit-input-placeholder { + color: rgb(216,216,216); +} + +.c30::-moz-placeholder { + color: rgb(216,216,216); +} + +.c30:-ms-input-placeholder { + color: rgb(216,216,216); +} + +.c30:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c30:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c30:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c30:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c30:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c37 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c38 { + display: none; +} + +.c38:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c38:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c38:checked + label:active { + box-shadow: none; +} + +.c39 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; + cursor: not-allowed; +} + +.c39::selection { + background: none; +} + +.c39:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c39:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c39:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c39:after, +.c39:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c39:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c39:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c39:before { + display: none; +} + +.c39:active { + box-shadow: none; +} + +.c39:active:after { + padding-right: 0; +} + +.c39:before { + cursor: not-allowed; +} + +.c39:after { + cursor: not-allowed; + background: rgb(230,230,230); +} + +.c39:hover { + border: 0.0625rem solid rgb(216,216,216); +} + +.c39:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c15 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.c27 { + border: 0.0625rem solid rgb(216,216,216); + box-sizing: border-box; + border-radius: 0.1875rem; + font-size: 0.8125rem; + line-height: 1.125rem; + padding: 0.375rem 0.75rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border: 0.0625rem solid rgb(45,56,132); + background: rgba(59,70,204,.1); +} + +.c24 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.c36 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c13 { + padding-right: 0.75rem; + margin-right: 0.75rem; + border-right: 0.0625rem solid rgb(216,216,216); +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + disabled={false} + name="card" + > + <div + className="c7" + > + <h3 + className="c8" + > + Hostnames + </h3> + <div + className="c9" + > + <p + className="c5" + > + Default hostnames are automatically generated from both the instance name and any attached networks. + </p> + </div> + <div + className="c10" + > + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + Instance name + + hostname + + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + > + <path + d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Public + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="stuffy-stuff" + /> + </div> + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + Instance name + + hostname + + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Private + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="stuffy-stuff" + /> + </div> + </div> + <div + className="c19 c2" + height="0.0625rem" + /> + <div + className="c20" + > + <div + className="c20" + > + <h3 + className="c8" + > + CNS service hostnames + </h3> + <div + className="c21" + > + <p + className="c5" + > + CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name. + </p> + </div> + </div> + <div + className="c4" + > + <label + className="c22" + htmlFor="" + > + Existing CNS service name(s) + </label> + <div + className="c23" + > + <ul + className="c24" + > + <div + className="c25" + > + <div + className="c26" + > + <li + className="c27" + onClick={undefined} + > + serbice + </li> + </div> + </div> + <div + className="c25" + > + <div + className="c26" + > + <li + className="c27" + onClick={undefined} + > + dssasda + </li> + </div> + </div> + <div + className="c25" + > + <div + className="c26" + > + <li + className="c27" + onClick={undefined} + > + dsasd + </li> + </div> + </div> + </ul> + </div> + </div> + <form + onSubmit={undefined} + > + <div + className="c28" + > + <div + className="baseline-jVaZNU kXgQxt c29" + name="name" + role="group" + style={undefined} + > + <label + className="c22" + htmlFor="p" + > + Attach to new CNS service name + </label> + <input + className="c30" + disabled={true} + id="p" + onBlur={null} + placeholder="Example: mySQLdb" + /> + </div> + <div + className="c31" + > + <button + className="c32 c33 c34" + disabled={true} + href="" + type="submit" + > + Add + </button> + </div> + </div> + </form> + <div + className="c20" + > + <div + className="c10" + > + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + CNS service + + hostname + s + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + > + <path + d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Public + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="serbice" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dssasda" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dsasd" + /> + </div> + <div + className="c11" + > + <div + className="c12" + > + <small + className="c13 c14" + > + CNS service + + hostname + s + </small> + <div + className="c15" + > + <div + className="c16" + > + <svg + className="" + height="16" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 12 16" + width="12" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <div + className="c15" + > + <small + className="c17" + > + Private + </small> + </div> + </div> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="serbice" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dssasda" + /> + <input + className="c18" + disabled={true} + id="" + onBlur={null} + value="dsasd" + /> + </div> + </div> + </div> + </div> + </div> + </div> + <div + className="c35" + > + <div + className="baseline-jVaZNU kXgQxt c29" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c36" + > + <label + className="c22" + htmlFor="q" + > + Disabled CNS + </label> + <div + className="c37" + > + <input + checked={true} + className="c38" + disabled={true} + id="q" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={true} + className="c39" + disabled={true} + htmlFor="q" + id="q" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={true} + className="c40" + disabled={true} + htmlFor="q" + id="q" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> + <div + className="c11" + > + <p + className="c5" + > + *All hostnames listed here will be confirmed after deployment. + </p> + </div> +</div> +`; + +exports[`renders <Cns mutationError /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c17 { + margin-top: 2rem; +} + +.c23 { + margin-left: 0.5rem; +} + +.c27 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c32 { + margin-bottom: 2rem; +} + +.c12 { + padding: 2rem; + padding-bottom: 0; +} + +.c14 { + padding-bottom: 0.5rem; +} + +.c18 { + padding-bottom: 1rem; +} + +.c26 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c26::-moz-focus-inner, +.c26[type='button']::-moz-focus-inner, +.c26[type='reset']::-moz-focus-inner, +.c26[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c26:-moz-focusring, +.c26[type='button']:-moz-focusring, +.c26[type='reset']:-moz-focusring, +.c26[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c26 + button { + margin-left: 0.375rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c25 { + display: inline-block; +} + +.c24 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c24:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c24:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c24:active, +.c24:active:hover, +.c24:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c24[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c21 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c13 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c13 + p, +.c13 + small, +.c13 + h1, +.c13 + h2, +.c13 + label, +.c13 + h3, +.c13 + h4, +.c13 + h5, +.c13 + div, +.c13 + span { + margin-top: 1.5rem; +} + +.c9 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c9 + p, +.c9 + small, +.c9 + h1, +.c9 + h2, +.c9 + label, +.c9 + h3, +.c9 + h4, +.c9 + h5, +.c9 + div, +.c9 + span { + margin-top: 0.75rem; +} + +.c16 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c11 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c20 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c22 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 22.1875rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c22::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:invalid { + box-shadow: none; +} + +.c22:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c22:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c22:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c29 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c30 { + display: none; +} + +.c30:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c30:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c30:checked + label:active { + box-shadow: none; +} + +.c31 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c31::selection { + background: none; +} + +.c31:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c31:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c31:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c31:after, +.c31:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c31:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c31:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c31:before { + display: none; +} + +.c6 { + position: relative; + margin-bottom: 0.75rem; + background-color: rgb(255,255,255); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid rgb(216,216,216); + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c7 { + min-width: 2.25rem; + margin-right: 1.125rem; + min-height: 100%; + background-color: rgb(0,152,88); + background-color: rgb(210,67,58); +} + +.c8 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c10 { + position: absolute; + right: 0.1875rem; + margin: 0; +} + +.c15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c19 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.c28 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + /> + <div + className="c8" + > + <h4 + className="c9" + > + Ooops! + </h4> + <p + className="c5" + > + mutation error + </p> + </div> + <svg + className="c10 " + height="11.31" + innerRef={undefined} + onClick={[Function]} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 11.31 11.31" + width="11.31" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + <div + className="c11" + disabled={false} + name="card" + > + <div + className="c12" + > + <h3 + className="c13" + > + Hostnames + </h3> + <div + className="c14" + > + <p + className="c5" + > + Default hostnames are automatically generated from both the instance name and any attached networks. + </p> + </div> + <div + className="c15" + /> + <div + className="c16 c2" + height="0.0625rem" + /> + <div + className="c17" + > + <div + className="c17" + > + <h3 + className="c13" + > + CNS service hostnames + </h3> + <div + className="c18" + > + <p + className="c5" + > + CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name. + </p> + </div> + </div> + <form + onSubmit={undefined} + > + <div + className="c19" + > + <div + className="baseline-jVaZNU kXgQxt c20" + name="name" + role="group" + style={undefined} + > + <label + className="c21" + htmlFor="n" + > + Attach to new CNS service name + </label> + <input + className="c22" + disabled={false} + id="n" + onBlur={null} + placeholder="Example: mySQLdb" + /> + </div> + <div + className="c23" + > + <button + className="c24 c25 c26" + disabled={undefined} + href="" + type="submit" + > + Add + </button> + </div> + </div> + </form> + <div + className="c17" + > + <div + className="c15" + /> + </div> + </div> + </div> + </div> + <div + className="c27" + > + <div + className="baseline-jVaZNU kXgQxt c20" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c28" + > + <label + className="c21" + htmlFor="o" + > + Disabled CNS + </label> + <div + className="c29" + > + <input + checked={true} + className="c30" + disabled={false} + id="o" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={true} + className="c31" + disabled={false} + htmlFor="o" + id="o" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={true} + className="c21" + disabled={false} + htmlFor="o" + id="o" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> + <div + className="c32" + > + <p + className="c5" + > + *All hostnames listed here will be confirmed after deployment. + </p> + </div> +</div> +`; + +exports[`renders <Cns services /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c12 { + margin-top: 2rem; +} + +.c24 { + margin-left: 0.5rem; +} + +.c28 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c33 { + margin-bottom: 2rem; +} + +.c15 { + margin-top: 0.25rem; +} + +.c17 { + margin-right: 0.25rem; + margin-bottom: 0.25rem; +} + +.c7 { + padding: 2rem; + padding-bottom: 0; +} + +.c9 { + padding-bottom: 0.5rem; +} + +.c13 { + padding-bottom: 1rem; +} + +.c27 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c27::-moz-focus-inner, +.c27[type='button']::-moz-focus-inner, +.c27[type='reset']::-moz-focus-inner, +.c27[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c27:-moz-focusring, +.c27[type='button']:-moz-focusring, +.c27[type='reset']:-moz-focusring, +.c27[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c27 + button { + margin-left: 0.375rem; +} + +.c20 { + margin-left: 0.75rem; + cursor: pointer; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c26 { + display: inline-block; +} + +.c25 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c25:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c25:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c25:active, +.c25:active:hover, +.c25:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c25[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c14 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c8 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c8 + p, +.c8 + small, +.c8 + h1, +.c8 + h2, +.c8 + label, +.c8 + h3, +.c8 + h4, +.c8 + h5, +.c8 + div, +.c8 + span { + margin-top: 1.5rem; +} + +.c11 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c6 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c22 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c23 { + box-sizing: border-box; + width: 18.75rem; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 22.1875rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c23::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c23::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c23:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c23:invalid { + box-shadow: none; +} + +.c23:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c23:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c23:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c23:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c23:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c30 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c31 { + display: none; +} + +.c31:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c31:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c31:checked + label:active { + box-shadow: none; +} + +.c32 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c32::selection { + background: none; +} + +.c32:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c32:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c32:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c32:after, +.c32:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c32:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c32:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c32:before { + display: none; +} + +.c19 { + border: 0.0625rem solid rgb(216,216,216); + box-sizing: border-box; + border-radius: 0.1875rem; + font-size: 0.8125rem; + line-height: 1.125rem; + padding: 0.375rem 0.75rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border: 0.0625rem solid rgb(45,56,132); + background: rgba(59,70,204,.1); +} + +.c16 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c21 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; +} + +.c29 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + disabled={false} + name="card" + > + <div + className="c7" + > + <h3 + className="c8" + > + Hostnames + </h3> + <div + className="c9" + > + <p + className="c5" + > + Default hostnames are automatically generated from both the instance name and any attached networks. + </p> + </div> + <div + className="c10" + /> + <div + className="c11 c2" + height="0.0625rem" + /> + <div + className="c12" + > + <div + className="c12" + > + <h3 + className="c8" + > + CNS service hostnames + </h3> + <div + className="c13" + > + <p + className="c5" + > + CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name. + </p> + </div> + </div> + <div + className="c4" + > + <label + className="c14" + htmlFor="" + > + Existing CNS service name(s) + </label> + <div + className="c15" + > + <ul + className="c16" + > + <div + className="c17" + > + <div + className="c18" + > + <li + className="c19" + onClick={undefined} + > + serbice + <svg + className="c20" + height="11.31" + innerRef={undefined} + onClick={[Function]} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 11.31 11.31" + width="11.31" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z" + fill="rgb(45, 56, 132)" + /> + </svg> + </li> + </div> + </div> + <div + className="c17" + > + <div + className="c18" + > + <li + className="c19" + onClick={undefined} + > + dssasda + <svg + className="c20" + height="11.31" + innerRef={undefined} + onClick={[Function]} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 11.31 11.31" + width="11.31" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z" + fill="rgb(45, 56, 132)" + /> + </svg> + </li> + </div> + </div> + <div + className="c17" + > + <div + className="c18" + > + <li + className="c19" + onClick={undefined} + > + dsasd + <svg + className="c20" + height="11.31" + innerRef={undefined} + onClick={[Function]} + style={ + Object { + "transform": "rotate(0deg)", + } + } + viewBox="0 0 11.31 11.31" + width="11.31" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z" + fill="rgb(45, 56, 132)" + /> + </svg> + </li> + </div> + </div> + </ul> + </div> + </div> + <form + onSubmit={undefined} + > + <div + className="c21" + > + <div + className="baseline-jVaZNU kXgQxt c22" + name="name" + role="group" + style={undefined} + > + <label + className="c14" + htmlFor="s" + > + Attach to new CNS service name + </label> + <input + className="c23" + disabled={false} + id="s" + onBlur={null} + placeholder="Example: mySQLdb" + /> + </div> + <div + className="c24" + > + <button + className="c25 c26 c27" + disabled={undefined} + href="" + type="submit" + > + Add + </button> + </div> + </div> + </form> + <div + className="c12" + > + <div + className="c10" + /> + </div> + </div> + </div> + </div> + <div + className="c28" + > + <div + className="baseline-jVaZNU kXgQxt c22" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c29" + > + <label + className="c14" + htmlFor="t" + > + Disabled CNS + </label> + <div + className="c30" + > + <input + checked={true} + className="c31" + disabled={false} + id="t" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={true} + className="c32" + disabled={false} + htmlFor="t" + id="t" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={true} + className="c14" + disabled={false} + htmlFor="t" + id="t" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> + <div + className="c33" + > + <p + className="c5" + > + *All hostnames listed here will be confirmed after deployment. + </p> + </div> +</div> +`; + +exports[`renders <Cns services hostnames /> without throwing 1`] = ` +.c1 { + margin-bottom: 0.25rem; +} + +.c4 { + margin-bottom: 1rem; +} + +.c6 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c0 { + margin-right: auto; + margin-left: auto; + box-sizing: border-box; + width: 100%; + max-width: 62.5rem; + padding-bottom: 1.125rem; +} + +.c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c3 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c7 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c10 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c11 { + display: none; +} + +.c11:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c11:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c11:checked + label:active { + box-shadow: none; +} + +.c12 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c12::selection { + background: none; +} + +.c12:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c12:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c12:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c12:after, +.c12:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c12:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c12:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c12:before { + display: none; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media only screen and (min-width:48em) { + .c0 { + width: 46rem; + } +} + +@media only screen and (min-width:64em) { + .c0 { + width: 61rem; + } +} + +@media only screen and (min-width:75em) { + .c0 { + width: 76rem; + } +} + +@media only screen and (max-width:47.9375rem) { + .c0 { + padding-left: 0.375rem; + padding-right: 0.375rem; + } +} + +@media only screen and (min-width:0em) { + .c3 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c3 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +<div + className="c0" +> + <div + className="c1" + > + <div + className="c2" + > + <div + className="c3" + > + <div + className="c4" + > + <p + className="c5" + > + Triton CNS is used to automatically update hostnames for your instances*. You can serve multiple instances (with multiple IP addresses) under the same hostname by matching the CNS service names. + + <a + href="https://docs.joyent.com/private-cloud/install/cns" + rel="noopener noreferrer" + target="_blank" + > + Read the docs + </a> + </p> + </div> + </div> + </div> + </div> + <div + className="c6" + > + <div + className="baseline-jVaZNU kXgQxt c7" + name="cns-enabled" + role="group" + style={undefined} + > + <div + className="c8" + > + <label + className="c9" + htmlFor="w" + > + Disabled CNS + </label> + <div + className="c10" + > + <input + checked={false} + className="c11" + disabled={false} + id="w" + onBlur={undefined} + onChange={[Function]} + type="checkbox" + /> + <label + checked={false} + className="c12" + disabled={false} + htmlFor="w" + id="w" + onBlur={undefined} + onChange={[Function]} + /> + <label + checked={false} + className="c9" + disabled={false} + htmlFor="w" + id="w" + onBlur={undefined} + onChange={[Function]} + > + + Enabled CNS + </label> + </div> + </div> + </div> + </div> +</div> +`; diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/cns.spec.js b/packages/my-joy-beta/src/containers/instances/__tests__/cns.spec.js new file mode 100644 index 00000000..16254732 --- /dev/null +++ b/packages/my-joy-beta/src/containers/instances/__tests__/cns.spec.js @@ -0,0 +1,205 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { Cns } from '../cns'; +import Theme from '@mocks/theme'; + +// services = [], +// hostnames = [], +// disabled = false, +// loading = false, +// mutationError = false, +// loadingError = null + +it('renders <Cns /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Cns /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns loading /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Cns loading /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns loadingError /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Cns loadingError /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns mutationError /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Cns mutationError="mutation error" /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns mutating /> without throwing', () => { + const services = ['serbice', 'dssasda', 'dsasd']; + + const hostnames = [ + { + values: ['stuffy-stuff'], + public: true + }, + { + values: ['stuffy-stuff'] + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + public: true, + service: true + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + service: true + } + ]; + + expect( + renderer + .create( + <Theme> + <Cns mutating services={services} hostnames={hostnames} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns disabled /> without throwing', () => { + const services = ['serbice', 'dssasda', 'dsasd']; + + const hostnames = [ + { + values: ['stuffy-stuff'], + public: true + }, + { + values: ['stuffy-stuff'] + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + public: true, + service: true + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + service: true + } + ]; + + expect( + renderer + .create( + <Theme> + <Cns disabled services={services} hostnames={hostnames} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns services /> without throwing', () => { + const services = ['serbice', 'dssasda', 'dsasd']; + + expect( + renderer + .create( + <Theme> + <Cns services={services} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns hostnames /> without throwing', () => { + const hostnames = [ + { + values: ['stuffy-stuff'], + public: true + }, + { + values: ['stuffy-stuff'] + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + public: true, + service: true + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + service: true + } + ]; + + expect( + renderer + .create( + <Theme> + <Cns hostnames={hostnames} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Cns services hostnames /> without throwing', () => { + const services = ['serbice', 'dssasda', 'dsasd']; + + const hostnames = [ + { + values: ['stuffy-stuff'], + public: true + }, + { + values: ['stuffy-stuff'] + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + public: true, + service: true + }, + { + values: ['serbice', 'dssasda', 'dsasd'], + service: true + } + ]; + + expect( + renderer + .create( + <Theme> + <Cns disabled services={services} hostnames={hostnames} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/networks.spec.js b/packages/my-joy-beta/src/containers/instances/__tests__/networks.spec.js index 251e4693..6769e7c0 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/networks.spec.js +++ b/packages/my-joy-beta/src/containers/instances/__tests__/networks.spec.js @@ -60,7 +60,7 @@ it('renders <Networks networks /> without throwing', () => { fabric: false, subnet: '255.255.255.0', provision_start_ip: '192.168.1.2', - provision_end_ip: '192.168.1.253', + provision_end_ip: '192.168.1.253' } ]; diff --git a/packages/my-joy-beta/src/containers/instances/cns.js b/packages/my-joy-beta/src/containers/instances/cns.js new file mode 100644 index 00000000..effcbcf0 --- /dev/null +++ b/packages/my-joy-beta/src/containers/instances/cns.js @@ -0,0 +1,350 @@ +import React, { PureComponent } from 'react'; +import intercept from 'apr-intercept'; +import { compose, graphql } from 'react-apollo'; +import { connect } from 'react-redux'; +import { SubmissionError, destroy } from 'redux-form'; +import ReduxForm from 'declarative-redux-form'; +import { set, destroy as destroyValue } from 'react-redux-values'; +import { Margin } from 'styled-components-spacing'; +import find from 'lodash.find'; +import isBoolean from 'lodash.isboolean'; +import isArray from 'lodash.isarray'; +import get from 'lodash.get'; + +import { + ViewContainer, + StatusLoader, + Message, + MessageTitle, + MessageDescription +} from 'joyent-ui-toolkit'; + +import Description from '@components/description'; +import Cns, { Footer, AddServiceForm } from '@components/cns'; +import GetAccount from '@graphql/get-account.gql'; +import UpdateTags from '@graphql/update-tags.gql'; +import GetTags from '@graphql/list-tags.gql'; +import parseError from '@state/parse-error'; + +const CNS_FORM = 'cns-new-service'; + +const CnsContainer = ({ + services = [], + hostnames = [], + disabled = false, + handleToggleCnsEnabled, + handleAddService, + handleRemoveService, + mutating = false, + loading = false, + mutationError = false, + loadingError = null +}) => ( + <ViewContainer main> + <Margin bottom={1}> + <Description> + Triton CNS is used to automatically update hostnames for your + instances*. You can serve multiple instances (with multiple IP + addresses) under the same hostname by matching the CNS service names.{' '} + <a + href="https://docs.joyent.com/private-cloud/install/cns" + target="_blank" + rel="noopener noreferrer" + > + Read the docs + </a> + </Description> + </Margin> + {loading ? <StatusLoader /> : null} + {!loading && loadingError ? ( + <Message error> + <MessageTitle>Ooops!</MessageTitle> + <MessageDescription> + An error occurred while loading your CNS services + </MessageDescription> + </Message> + ) : null} + {!loading && mutationError ? ( + <Message error> + <MessageTitle>Ooops!</MessageTitle> + <MessageDescription>{mutationError}</MessageDescription> + </Message> + ) : null} + {!loading && !disabled ? ( + <Cns + services={services} + hostnames={hostnames} + onRemoveService={ + !mutating && (name => handleRemoveService(name, services)) + } + > + <ReduxForm + form={CNS_FORM} + destroyOnUnmount={false} + forceUnregisterOnUnmount={true} + onSubmit={val => handleAddService(val, services)} + > + {props => <AddServiceForm {...props} disabled={mutating} />} + </ReduxForm> + </Cns> + ) : null} + {!loading && !loadingError ? ( + <Footer + enabled={!disabled} + submitting={mutating} + onToggle={() => handleToggleCnsEnabled(!disabled)} + /> + ) : null} + </ViewContainer> +); + +export { CnsContainer as Cns }; + +class CnsClass extends PureComponent { + componentWillMount() { + const { reset = () => null } = this.props; + reset(); + } + render() { + const { reset, children, ...rest } = this.props; + + return <CnsContainer {...rest}>{children}</CnsContainer>; + } +} + +export default compose( + graphql(UpdateTags, { name: 'updateTags' }), + graphql(GetAccount, { + props: ({ data }) => { + const { account = {} } = data; + const { id = '<account-id>' } = account; + + return { id }; + } + }), + graphql(GetTags, { + options: ({ match }) => ({ + variables: { + fetchPolicy: 'network-only', + name: get(match, 'params.instance') + } + }), + props: ({ data }) => { + const { loading, error, variables, refetch, ...rest } = data; + const { name } = variables; + + const instance = find(get(rest, 'machines', []), ['name', name]); + const tags = get(instance, 'tags', []); + + return { + tags, + instance, + loading, + loadingError: error, + refetch + }; + } + }), + connect( + ({ values, form }, { id, instance = {}, tags = [] }) => { + const { name = '<instance-name>' } = instance; + + const cnsDisable = find(tags, ['name', 'triton.cns.disable']) || {}; + const cnsServices = find(tags, ['name', 'triton.cns.services']) || {}; + + let disabled = JSON.parse(cnsDisable.value || 'false'); + let services = (cnsServices.value || '').split(/,/gi).filter(Boolean); + + const adding = get(form, `${CNS_FORM}.submitting`, false); + const toggling = get(values, `cns-${instance.id}-toggling`, false); + const removing = get(values, `cns-${instance.id}-removing`, false); + const enabled = get(values, `cns-${instance.id}-enabled`, undefined); + const togglingError = get( + values, + `cns-${instance.id}-toggling-error`, + null + ); + const removingError = get( + values, + `cns-${instance.id}-removing-error`, + null + ); + const svcs = get(values, `cns-${instance.id}-svcs`, undefined); + + if (isBoolean(enabled)) { + disabled = !enabled; + } + + if (isArray(svcs)) { + services = svcs; + } + + // REPLACE WITH DATA CENTER + const dataCenter = 'us-east-1'; + + const defaultHostnames = [ + { + values: [`${name}.inst.${id}.${dataCenter}.triton.zone`], + public: true + }, + { + values: [`${name}.inst.${id}.${dataCenter}.cns.joyent.com`] + }, + { + values: [], + public: true, + service: true + }, + { + values: [], + service: true + } + ]; + + const hostnames = defaultHostnames.map(hostname => { + if (!hostname.service) { + return hostname; + } + + return { + ...hostname, + values: services.map(name => { + const postfix = hostname.public + ? '.triton.zone' + : '.cns.joyent.com'; + return `${name}.svc.${id}.${dataCenter}${postfix}`; + }) + }; + }); + + return { + hostnames, + disabled, + services, + mutating: toggling || removing || adding, + mutationError: togglingError || removingError + }; + }, + (dispatch, { instance = {}, refetch, updateTags }) => ({ + reset: () => { + dispatch([ + destroyValue({ name: `cns-${instance.id}-removing` }), + destroyValue({ name: `cns-${instance.id}-svcs` }), + destroyValue({ name: `cns-${instance.id}-removing-error` }), + destroyValue({ name: `cns-${instance.id}-toggling` }), + destroyValue({ name: `cns-${instance.id}-enabled` }), + destroyValue({ name: `cns-${instance.id}-toggling-error` }) + ]); + + return refetch(); + }, + handleRemoveService: async (name, services) => { + const value = services.filter(svc => name !== svc); + + dispatch([ + set({ name: `cns-${instance.id}-removing`, value: true }), + set({ name: `cns-${instance.id}-svcs`, value }) + ]); + + const [err] = await intercept( + updateTags({ + variables: { + id: instance.id, + tags: [ + { + name: 'triton.cns.services', + value: value.join(',') + } + ] + } + }) + ); + + const setLoadingFalse = set({ + name: `cns-${instance.id}-removing`, + value: false + }); + + if (err) { + return dispatch([ + setLoadingFalse, + set({ + name: `cns-${instance.id}-removing-error`, + value: parseError(err) + }), + set({ name: `cns-${instance.id}-svcs`, value: null }) + ]); + } + + return dispatch(setLoadingFalse); + }, + handleToggleCnsEnabled: async disabled => { + dispatch([ + set({ name: `cns-${instance.id}-toggling`, value: true }), + set({ name: `cns-${instance.id}-enabled`, value: !disabled }) + ]); + + const [err] = await intercept( + updateTags({ + variables: { + id: instance.id, + tags: [ + { + name: 'triton.cns.disable', + value: disabled ? 'true' : 'false' + } + ] + } + }) + ); + + const setLoadingFalse = set({ + name: `cns-${instance.id}-toggling`, + value: false + }); + + if (err) { + return dispatch([ + setLoadingFalse, + set({ + name: `cns-${instance.id}-toggling-error`, + value: parseError(err) + }), + set({ name: `cns-${instance.id}-enabled`, value: null }) + ]); + } + + return dispatch(setLoadingFalse); + }, + handleAddService: async ({ name }, services) => { + const value = services.concat(name); + + dispatch(set({ name: `cns-${instance.id}-svcs`, value })); + + const [err] = await intercept( + updateTags({ + variables: { + id: instance.id, + tags: [ + { + name: 'triton.cns.services', + value: value.join(',') + } + ] + } + }) + ); + + if (err) { + dispatch(set({ name: `cns-${instance.id}-svcs`, services })); + + throw new SubmissionError({ + _error: parseError(err) + }); + } + + return dispatch(destroy(CNS_FORM)); + } + }) + ) +)(CnsClass); diff --git a/packages/my-joy-beta/src/containers/instances/dns.js b/packages/my-joy-beta/src/containers/instances/dns.js deleted file mode 100644 index 12eb7413..00000000 --- a/packages/my-joy-beta/src/containers/instances/dns.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { compose, graphql } from 'react-apollo'; -import find from 'lodash.find'; -import get from 'lodash.get'; - -import { - ViewContainer, - StatusLoader, - Message, - MessageDescription, - MessageTitle -} from 'joyent-ui-toolkit'; - -import ListDNS from '@graphql/list-dns.gql'; - -const DNS = ({ instance, loading, error }) => { - // eslint-disable-next-line camelcase - const { name, dns_names } = instance || {}; - // eslint-disable-next-line camelcase - const _loading = loading && !name && !dns_names && <StatusLoader />; - const _summary = !_loading && - instance && <pre>{JSON.stringify(dns_names, null, 2)}</pre>; - - const _error = error && - !_loading && - !instance && ( - <Message error> - <MessageTitle>Ooops!</MessageTitle> - <MessageDescription> - An error occurred while loading your instance DNS - </MessageDescription> - </Message> - ); - - return ( - <ViewContainer center={Boolean(_loading)} main> - {_loading} - {_error} - {_summary} - </ViewContainer> - ); -}; - -DNS.propTypes = { - loading: PropTypes.bool -}; - -export default compose( - graphql(ListDNS, { - options: ({ match }) => ({ - variables: { - name: get(match, 'params.instance') - } - }), - props: ({ data: { loading, error, variables, ...rest } }) => ({ - instance: find(get(rest, 'machines', []), ['name', variables.name]), - loading, - error - }) - }) -)(DNS); diff --git a/packages/my-joy-beta/src/containers/instances/index.js b/packages/my-joy-beta/src/containers/instances/index.js index 0a0c6bc4..cf8e58ad 100644 --- a/packages/my-joy-beta/src/containers/instances/index.js +++ b/packages/my-joy-beta/src/containers/instances/index.js @@ -4,6 +4,6 @@ export { default as Tags } from './tags'; export { default as Metadata } from './metadata'; export { default as Networks } from './networks'; export { default as Firewall } from './firewall'; -export { default as Dns } from './dns'; +export { default as Cns } from './cns'; export { default as Snapshots } from './snapshots'; export { default as Resize } from './resize'; diff --git a/packages/my-joy-beta/src/containers/navigation/menu.js b/packages/my-joy-beta/src/containers/navigation/menu.js index c57bb466..6c77485f 100644 --- a/packages/my-joy-beta/src/containers/navigation/menu.js +++ b/packages/my-joy-beta/src/containers/navigation/menu.js @@ -1,7 +1,4 @@ import { connect } from 'react-redux'; -import paramCase from 'param-case'; -import titleCase from 'title-case'; -import isString from 'lodash.isstring'; import get from 'lodash.get'; import { Menu } from '@components/navigation'; @@ -11,20 +8,10 @@ export default connect((state, { match }) => { const allSections = get(state, 'ui.sections'); const sections = instanceSlug ? allSections.instances : []; - const links = sections - .map( - section => - !isString(section) - ? section - : { - pathname: paramCase(section), - name: titleCase(section) - } - ) - .map(({ name, pathname }) => ({ - name, - pathname: `/instances/${instanceSlug}/${pathname}` - })); + const links = sections.map(({ name, pathname }) => ({ + name, + pathname: `/instances/${instanceSlug}/${pathname}` + })); return { links diff --git a/packages/my-joy-beta/src/router.js b/packages/my-joy-beta/src/router.js index 476806c1..8b73e0c2 100644 --- a/packages/my-joy-beta/src/router.js +++ b/packages/my-joy-beta/src/router.js @@ -15,7 +15,7 @@ import { Metadata as InstanceMetadata, Networks as InstanceNetworks, Firewall as InstanceFirewall, - Dns as InstanceDns, + Cns as InstanceCns, Snapshots as InstanceSnapshots, Resize as InstanceResize } from '@containers/instances'; @@ -77,12 +77,16 @@ export default () => ( exact component={InstanceFirewall} /> - <Route path="/instances/:instance/dns" exact component={InstanceDns} /> <Route path="/instances/:instance/snapshots" exact component={InstanceSnapshots} /> + <Route + path="/instances/:instance/cns-dns" + exact + component={InstanceCns} + /> <Route path="/instances/:instance" exact diff --git a/packages/my-joy-beta/src/state/store.js b/packages/my-joy-beta/src/state/store.js index 07ad58d2..403bcc24 100644 --- a/packages/my-joy-beta/src/state/store.js +++ b/packages/my-joy-beta/src/state/store.js @@ -5,6 +5,7 @@ import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { reducer as valuesReducer } from 'react-redux-values'; +import paramCase from 'param-case'; const { REACT_APP_GQL_PORT = 443, @@ -22,7 +23,17 @@ export const client = new ApolloClient({ const initialState = { ui: { sections: { - instances: ['summary', 'tags', 'metadata', 'networks', 'snapshots'] + instances: [ + 'Summary', + 'CNS & DNS', + 'Snapshots', + 'Tags', + 'Metadata', + 'Networks' + ].map(name => ({ + pathname: paramCase(name), + name + })) } } }; diff --git a/yarn.lock b/yarn.lock index 396853aa..c945766f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3829,8 +3829,8 @@ eslint-plugin-flowtype@2.39.1: lodash "^4.15.0" eslint-plugin-flowtype@^2.39.1: - version "2.41.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.0.tgz#fd5221c60ba917c059d7ef69686a99cca09fd871" + version "2.41.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.1.tgz#0996e1ea1d501dfc945802453a304ae9e8098b78" dependencies: lodash "^4.15.0" @@ -4926,8 +4926,8 @@ graphql-tag@^2.6.1: resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.6.1.tgz#4788d509f6e29607d947fc47a40c4e18f736d34a" graphql-tools@^2.6.1: - version "2.18.0" - resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.18.0.tgz#8e2d6436f9adba1d579c1a1710ae95e7f5e7248b" + version "2.19.0" + resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.19.0.tgz#04e1065532ab877aff3ad1883530fb56804ce9bf" dependencies: apollo-link "^1.0.0" apollo-utilities "^1.0.1" @@ -6656,6 +6656,10 @@ lodash.intersection@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.intersection/-/lodash.intersection-4.4.0.tgz#0a11ba631d0e95c23c7f2f4cbb9a692ed178e705" +lodash.isarray@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403" + lodash.isarraylike@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/lodash.isarraylike/-/lodash.isarraylike-4.2.0.tgz#4623310ab318804b667ddc3619058137559400c4"