fix(my-joy-beta): create instance - 8 col descriptions
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
9432bfd1a3
commit
67c79c4629
@ -459,7 +459,7 @@ exports[`renders <Rule/> without throwing 1`] = `
|
||||
equalling
|
||||
</option>
|
||||
<option
|
||||
value="!equalling"
|
||||
value="not-equalling"
|
||||
>
|
||||
not equalling
|
||||
</option>
|
||||
@ -925,7 +925,7 @@ exports[`renders <Rule/> without throwing 2`] = `
|
||||
equalling
|
||||
</option>
|
||||
<option
|
||||
value="!equalling"
|
||||
value="not-equalling"
|
||||
>
|
||||
not equalling
|
||||
</option>
|
||||
|
||||
@ -13,19 +13,19 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
.c0 {
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c11 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -49,7 +49,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -69,26 +69,35 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c14 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -101,30 +110,30 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c13::-moz-focus-inner,
|
||||
.c13[type='button']::-moz-focus-inner,
|
||||
.c13[type='reset']::-moz-focus-inner,
|
||||
.c13[type='submit']::-moz-focus-inner {
|
||||
.c14::-moz-focus-inner,
|
||||
.c14[type='button']::-moz-focus-inner,
|
||||
.c14[type='reset']::-moz-focus-inner,
|
||||
.c14[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c13:-moz-focusring,
|
||||
.c13[type='button']:-moz-focusring,
|
||||
.c13[type='reset']:-moz-focusring,
|
||||
.c13[type='submit']:-moz-focusring {
|
||||
.c14:-moz-focusring,
|
||||
.c14[type='button']:-moz-focusring,
|
||||
.c14[type='reset']:-moz-focusring,
|
||||
.c14[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c13 + button {
|
||||
.c14 + button {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c13 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c12 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
@ -169,50 +178,50 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c11:focus {
|
||||
.c12:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
.c12:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11:active,
|
||||
.c11:active:hover,
|
||||
.c11:active:focus {
|
||||
.c12:active,
|
||||
.c12:active:hover,
|
||||
.c12:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c11[disabled] {
|
||||
.c12[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c11:focus {
|
||||
.c12:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c11:hover {
|
||||
.c12:hover {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c11:active,
|
||||
.c11:active:hover,
|
||||
.c11:active:focus {
|
||||
.c12:active,
|
||||
.c12:active:hover,
|
||||
.c12:active:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -227,7 +236,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
@ -240,7 +249,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c8 {
|
||||
position: relative;
|
||||
vertical-align: text-bottom;
|
||||
display: -webkit-box;
|
||||
@ -253,29 +262,29 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c9 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c7:checked + label {
|
||||
.c9:checked + label {
|
||||
background: #3B46CC;
|
||||
border: 0.0625rem solid rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c7:checked + label:after {
|
||||
.c9:checked + label:after {
|
||||
left: 50%;
|
||||
box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c7:checked + label:active {
|
||||
.c9:checked + label:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c7:checked + label:active:after {
|
||||
.c9:checked + label:active:after {
|
||||
margin-left: -00.75rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c10 {
|
||||
outline: 0;
|
||||
display: block;
|
||||
width: 2.875rem;
|
||||
@ -295,28 +304,28 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.c8::selection {
|
||||
.c10::selection {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.c8:active {
|
||||
.c10:active {
|
||||
box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c8:active:after {
|
||||
.c10:active:after {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.c8:hover {
|
||||
.c10:hover {
|
||||
border: 0.0625rem solid rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c8:hover:after {
|
||||
.c10:hover:after {
|
||||
box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
|
||||
}
|
||||
|
||||
.c8:after,
|
||||
.c8:before {
|
||||
.c10:after,
|
||||
.c10:before {
|
||||
position: relative;
|
||||
display: block;
|
||||
content: '';
|
||||
@ -324,7 +333,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.c8:after {
|
||||
.c10:after {
|
||||
left: 0;
|
||||
border-radius: 2em;
|
||||
background: rgb(255,255,255);
|
||||
@ -333,26 +342,52 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c8:active {
|
||||
.c10:active {
|
||||
box-shadow: inset 0 0 0 2em rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c8:active:after {
|
||||
.c10:active:after {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.c8:before {
|
||||
.c10:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers.
|
||||
|
||||
@ -365,39 +400,41 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
className="c4"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
className="c5"
|
||||
name="vms"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
className="c6"
|
||||
>
|
||||
<label
|
||||
className="c5"
|
||||
className="c7"
|
||||
htmlFor="Y"
|
||||
>
|
||||
Infrastructure Container
|
||||
</label>
|
||||
<div
|
||||
className="c6"
|
||||
className="c8"
|
||||
>
|
||||
<input
|
||||
checked={undefined}
|
||||
className="c7"
|
||||
className="c9"
|
||||
id="Y"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
className="c8"
|
||||
className="c10"
|
||||
htmlFor="Y"
|
||||
/>
|
||||
<label
|
||||
className="c5"
|
||||
className="c7"
|
||||
htmlFor="Y"
|
||||
>
|
||||
|
||||
@ -408,13 +445,13 @@ exports[`renders <Images expanded /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c9"
|
||||
className="c0"
|
||||
/>
|
||||
<div
|
||||
className="c10"
|
||||
className="c11"
|
||||
>
|
||||
<button
|
||||
className="c11 c12 c13"
|
||||
className="c12 c13 c14"
|
||||
disabled={true}
|
||||
href=""
|
||||
type="submit"
|
||||
|
||||
@ -7,31 +7,59 @@ exports[`renders <Name /> without throwing 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
.c0 {
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c10 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -44,30 +72,30 @@ exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c8::-moz-focus-inner,
|
||||
.c8[type='button']::-moz-focus-inner,
|
||||
.c8[type='reset']::-moz-focus-inner,
|
||||
.c8[type='submit']::-moz-focus-inner {
|
||||
.c10::-moz-focus-inner,
|
||||
.c10[type='button']::-moz-focus-inner,
|
||||
.c10[type='reset']::-moz-focus-inner,
|
||||
.c10[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c8:-moz-focusring,
|
||||
.c8[type='button']:-moz-focusring,
|
||||
.c8[type='reset']:-moz-focusring,
|
||||
.c8[type='submit']:-moz-focusring {
|
||||
.c10:-moz-focusring,
|
||||
.c10[type='button']:-moz-focusring,
|
||||
.c10[type='reset']:-moz-focusring,
|
||||
.c10[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c8 + button {
|
||||
.c10 + button {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c9 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c8 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
@ -107,33 +135,33 @@ exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c6:focus {
|
||||
.c8:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c6:hover {
|
||||
.c8:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c6:active,
|
||||
.c6:active:hover,
|
||||
.c6:active:focus {
|
||||
.c8:active,
|
||||
.c8:active:hover,
|
||||
.c8:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c6[disabled] {
|
||||
.c8[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -149,7 +177,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
@ -173,45 +201,45 @@ exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c4::-webkit-input-placeholder {
|
||||
.c6::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4::-moz-placeholder {
|
||||
.c6::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4:-ms-input-placeholder {
|
||||
.c6:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4:invalid {
|
||||
.c6:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c4:disabled {
|
||||
.c6:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c4:disabled::-webkit-input-placeholder {
|
||||
.c6:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4:disabled::-moz-placeholder {
|
||||
.c6:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4:disabled:-ms-input-placeholder {
|
||||
.c6:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4:focus {
|
||||
.c6:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c5 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
@ -224,7 +252,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
@ -237,41 +265,69 @@ exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
margin-left: 1.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;
|
||||
}
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Your instance name will be used to identify this specific instance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
className="c4"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<label
|
||||
className="c3"
|
||||
className="c5"
|
||||
htmlFor="Y"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="c4"
|
||||
className="c6"
|
||||
disabled={false}
|
||||
id="Y"
|
||||
/>
|
||||
<label
|
||||
className="c5"
|
||||
className="c7"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="c6 c7 c8"
|
||||
className="c8 c9 c10"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
type="submit"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import { P } from 'joyent-ui-toolkit';
|
||||
|
||||
export default ({ children }) => (
|
||||
<Row>
|
||||
<Col xs={12} sm={8}>
|
||||
<Margin bottom={3}>
|
||||
<P>{children}</P>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
@ -1,3 +1,5 @@
|
||||
/* eslint-disable camelcase */
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import { Field } from 'redux-form';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
@ -7,17 +9,9 @@ import remcalc from 'remcalc';
|
||||
import constantCase from 'constant-case';
|
||||
|
||||
import {
|
||||
NameIcon,
|
||||
H3,
|
||||
P,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Input,
|
||||
FormMeta,
|
||||
Button,
|
||||
Toggle,
|
||||
Card,
|
||||
CardOutlet,
|
||||
Divider,
|
||||
Row,
|
||||
Col,
|
||||
@ -25,7 +19,6 @@ import {
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
import Tag from '@components/instances/tags';
|
||||
import Title from './title';
|
||||
|
||||
const Box = styled.div`
|
||||
display: inline-block;
|
||||
@ -131,8 +124,7 @@ export default ({
|
||||
</Margin>
|
||||
{enabled && defaultRules.length ? (
|
||||
<Fragment>
|
||||
<H3>Default firewall rules</H3>
|
||||
<span /> {/* trick H3 margin sibling rule */}
|
||||
<H3 noMargin>Default firewall rules</H3>
|
||||
<Margin top={3}>
|
||||
{defaultRules.map(rule => (
|
||||
<Margin bottom={2}>
|
||||
@ -147,8 +139,7 @@ export default ({
|
||||
) : null}
|
||||
{enabled && tagRules.length ? (
|
||||
<Fragment>
|
||||
<H3>Firewall rules from instance tags</H3>
|
||||
<span /> {/* trick H3 margin sibling rule */}
|
||||
<H3 noMargin>Firewall rules from instance tags</H3>
|
||||
<Margin top={3}>
|
||||
{tagRules.map(rule => (
|
||||
<Margin bottom={2}>
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
Select,
|
||||
StatusLoader
|
||||
} from 'joyent-ui-toolkit';
|
||||
import Description from '@components/create-instance/description';
|
||||
|
||||
const fadeIn = keyframes`
|
||||
from {
|
||||
@ -103,11 +104,10 @@ export default ({
|
||||
<form onSubmit={handleSubmit}>
|
||||
{expanded && (
|
||||
<Fragment>
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
Hardware virtual machines are generally used for non-containerized
|
||||
applications. Infrastructure containers are generally for running
|
||||
any Linux image on secure, bare metal containers.{' '}
|
||||
applications. Infrastructure containers are generally for running any
|
||||
Linux image on secure, bare metal containers.{' '}
|
||||
<a
|
||||
href="https://docs.joyent.com/private-cloud/images"
|
||||
rel="noopener noreferrer"
|
||||
@ -115,8 +115,7 @@ export default ({
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
{loading ? (
|
||||
<StatusLoader />
|
||||
) : (
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Field } from 'redux-form';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import Description from '@components/create-instance/description';
|
||||
|
||||
import {
|
||||
H3,
|
||||
P,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Input,
|
||||
@ -16,11 +16,9 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
{expanded ? (
|
||||
<Fragment>
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
Your instance name will be used to identify this specific instance.
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
<FormGroup name="name" fluid field={Field}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<Input />
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
/* eslint-disable camelcase */
|
||||
|
||||
import React from 'react';
|
||||
import { Field } from 'redux-form';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import styled from 'styled-components';
|
||||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import remcalc from 'remcalc';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
|
||||
import {
|
||||
H4,
|
||||
@ -34,6 +37,8 @@ const Box = styled.div`
|
||||
`;
|
||||
|
||||
export const Collapsed = ({ name, fabric, ...network }) => (
|
||||
<Row>
|
||||
<Col xs={12} sm={8}>
|
||||
<Margin inline right={3} top={3}>
|
||||
<Box>
|
||||
<Flex column>
|
||||
@ -82,6 +87,8 @@ export const Collapsed = ({ name, fabric, ...network }) => (
|
||||
</Flex>
|
||||
</Box>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
export const Expanded = ({
|
||||
@ -97,6 +104,8 @@ export const Expanded = ({
|
||||
onInfoClick,
|
||||
...network
|
||||
}) => (
|
||||
<Row>
|
||||
<Col xs={12} sm={8}>
|
||||
<Margin bottom={4}>
|
||||
<Card shadow>
|
||||
<CardHeader secondary={selected}>
|
||||
@ -199,6 +208,8 @@ export const Expanded = ({
|
||||
</CardOutlet>
|
||||
</Card>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
export default ({ small = false, ...rest }) =>
|
||||
|
||||
@ -384,35 +384,89 @@ Array [
|
||||
height="0.0625rem"
|
||||
/>
|
||||
</div>,
|
||||
.c1 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + 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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
|
||||
|
||||
@ -423,6 +477,8 @@ Array [
|
||||
Read the docs
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c20 {
|
||||
font-family: sans-serif;
|
||||
@ -1839,35 +1895,89 @@ Array [
|
||||
height="0.0625rem"
|
||||
/>
|
||||
</div>,
|
||||
.c1 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + 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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
|
||||
|
||||
@ -1878,6 +1988,8 @@ Array [
|
||||
Read the docs
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c2 {
|
||||
font-family: sans-serif;
|
||||
@ -4539,35 +4651,89 @@ Array [
|
||||
height="0.0625rem"
|
||||
/>
|
||||
</div>,
|
||||
.c1 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + 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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
|
||||
|
||||
@ -4578,6 +4744,8 @@ Array [
|
||||
Read the docs
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c21 {
|
||||
font-family: sans-serif;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -358,35 +358,89 @@ Array [
|
||||
height="0.0625rem"
|
||||
/>
|
||||
</div>,
|
||||
.c1 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + 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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
|
||||
|
||||
@ -397,6 +451,8 @@ Array [
|
||||
Read the docs
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c0 {
|
||||
margin: 0;
|
||||
@ -1790,35 +1846,89 @@ Array [
|
||||
height="0.0625rem"
|
||||
/>
|
||||
</div>,
|
||||
.c1 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + 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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
|
||||
|
||||
@ -1829,6 +1939,8 @@ Array [
|
||||
Read the docs
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c0 {
|
||||
margin: 0;
|
||||
@ -2414,35 +2526,89 @@ Array [
|
||||
height="0.0625rem"
|
||||
/>
|
||||
</div>,
|
||||
.c1 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + 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;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
|
||||
|
||||
@ -2453,6 +2619,8 @@ Array [
|
||||
Read the docs
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c0 {
|
||||
margin: 0;
|
||||
|
||||
@ -12,6 +12,7 @@ import { AffinityIcon, P, Button, H3 } from 'joyent-ui-toolkit';
|
||||
import Title from '@components/create-instance/title';
|
||||
import { Rule, Header } from '@components/create-instance/affinity';
|
||||
import KeyValue from '@components/instances/key-value';
|
||||
import Description from '@components/create-instance/description';
|
||||
|
||||
const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
|
||||
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
|
||||
@ -46,19 +47,17 @@ export const Affinity = ({
|
||||
<Fragment>
|
||||
<Title icon={<AffinityIcon />}>Affinity</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
Affinity rules control the location of instances, to help reduce
|
||||
traffic across networks and keep the workload balanced. With strict
|
||||
rules, instances are only provisioned when the criteria is met.{' '}
|
||||
<Description>
|
||||
Affinity rules control the location of instances, to help reduce traffic
|
||||
across networks and keep the workload balanced. With strict rules,
|
||||
instances are only provisioned when the criteria is met.{' '}
|
||||
<a
|
||||
target="__blank"
|
||||
href="https://apidocs.joyent.com/docker/features/placement"
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{proceeded ? (
|
||||
<Margin bottom={4}>
|
||||
|
||||
@ -30,6 +30,7 @@ import {
|
||||
} from '@components/create-instance/cns';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Tag from '@components/instances/tags';
|
||||
import Description from '@components/create-instance/description';
|
||||
|
||||
const CNS_FORM = 'create-instance-cns';
|
||||
|
||||
@ -50,8 +51,7 @@ const CNSContainer = ({
|
||||
<Fragment>
|
||||
<Title icon={<CnsIcon />}>Container Name Service</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<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.{' '}
|
||||
@ -62,8 +62,7 @@ const CNSContainer = ({
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{expanded && cnsEnabled ? (
|
||||
<Card>
|
||||
|
||||
@ -5,14 +5,14 @@ import ReduxForm from 'declarative-redux-form';
|
||||
import { set } from 'react-redux-values';
|
||||
import { connect } from 'react-redux';
|
||||
import get from 'lodash.get';
|
||||
import find from 'lodash.find';
|
||||
import forceArray from 'force-array';
|
||||
|
||||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/create-instance/description';
|
||||
import FirewallForm from '@components/create-instance/firewall';
|
||||
import ListFwRules from '@graphql/list-fw-rules.gql';
|
||||
|
||||
import { StatusLoader, FirewallIcon, P, H3, Button } from 'joyent-ui-toolkit';
|
||||
import { StatusLoader, FirewallIcon, H3, Button } from 'joyent-ui-toolkit';
|
||||
|
||||
const FORM_NAME = 'CREATE-INSTANCE-FIREWALL';
|
||||
|
||||
@ -29,8 +29,7 @@ const Firewall = ({
|
||||
<Fragment>
|
||||
<Title icon={<FirewallIcon />}>Firewall</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
Cloud Firewall rules control traffic across instances. Enabling the
|
||||
firewall adds a default set of rules and rules defined by your chosen
|
||||
tags.{' '}
|
||||
@ -40,8 +39,7 @@ const Firewall = ({
|
||||
>
|
||||
Read more
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{loading && expanded ? <StatusLoader /> : null}
|
||||
{!loading ? (
|
||||
|
||||
@ -10,6 +10,7 @@ import get from 'lodash.get';
|
||||
import { MetadataIcon, P, Button, H3 } from 'joyent-ui-toolkit';
|
||||
|
||||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/create-instance/description';
|
||||
import KeyValue from '@components/instances/key-value';
|
||||
|
||||
const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
|
||||
@ -32,8 +33,7 @@ export const Metadata = ({
|
||||
<Fragment>
|
||||
<Title icon={<MetadataIcon />}>Metadata</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
Metadata can be used to pass data to the instance. It can also be used
|
||||
to inject a custom boot script. Unlike tags, metadata is only viewable
|
||||
inside the instance.{' '}
|
||||
@ -43,8 +43,7 @@ export const Metadata = ({
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{proceeded ? (
|
||||
<Margin bottom={4}>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { set } from 'react-redux-values';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import { compose, graphql } from 'react-apollo';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
@ -9,6 +8,7 @@ import forceArray from 'force-array';
|
||||
|
||||
import { NetworkIcon, P, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
|
||||
|
||||
import Description from '@components/create-instance/description';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Network from '@components/create-instance/network';
|
||||
import ListNetworks from '@graphql/list-networks.gql';
|
||||
@ -30,21 +30,19 @@ export const Networks = ({
|
||||
<Fragment>
|
||||
<Title icon={<NetworkIcon />}>Networks</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
Instances are automatically connected to a private fabric network,
|
||||
which is the best choice for internal communication within your
|
||||
application. Data center networks are the best choice for exposing
|
||||
your application to the public internet (if the data center network
|
||||
is a public network).{' '}
|
||||
your application to the public internet (if the data center network is
|
||||
a public network).{' '}
|
||||
<a
|
||||
target="__blank"
|
||||
href="https://docs.joyent.com/public-cloud/network/sdn"
|
||||
>
|
||||
Read more
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{proceeded && !expanded ? (
|
||||
<H3>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import { compose, graphql } from 'react-apollo';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
@ -18,6 +17,7 @@ import {
|
||||
Overview
|
||||
} from '@components/create-instance/package';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Description from '@components/create-instance/description';
|
||||
import priceData from '../../data/prices.json';
|
||||
|
||||
import getPackages from '../../graphql/get-packages.gql';
|
||||
@ -39,8 +39,7 @@ const PackageContainer = ({
|
||||
<Fragment>
|
||||
<Title icon={<PackageIcon />}>Package</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
A package defines the specs of your instance. On Triton, packages can
|
||||
only increase in size.{' '}
|
||||
<a
|
||||
@ -50,8 +49,7 @@ const PackageContainer = ({
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{!loading && expanded ? (
|
||||
<ReduxForm
|
||||
|
||||
@ -12,6 +12,7 @@ import { TagsIcon, P, Button, H3, TagList } from 'joyent-ui-toolkit';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Tag from '@components/instances/tags';
|
||||
import KeyValue from '@components/instances/key-value';
|
||||
import Description from '@components/create-instance/description';
|
||||
|
||||
const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
|
||||
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
|
||||
@ -33,8 +34,7 @@ export const Tags = ({
|
||||
<Fragment>
|
||||
<Title icon={<TagsIcon />}>Tags</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
<Description>
|
||||
Tags can be used to identify your instances, group multiple instances
|
||||
together, define firewall and affinity rules, and more.{' '}
|
||||
<a
|
||||
@ -43,8 +43,7 @@ export const Tags = ({
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
</Description>
|
||||
) : null}
|
||||
{proceeded ? (
|
||||
<Margin bottom={4}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user