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