fix(my-joy-beta): small fixes

This commit is contained in:
Sara Vieira 2018-02-01 10:38:12 +00:00 committed by Sérgio Ramos
parent 1c1909324f
commit 2cc953daae
227 changed files with 13063 additions and 11229 deletions

View File

@ -1,4 +1,4 @@
'use strict';
const Brule = require('brule');
const Hapi = require('hapi');

View File

@ -2,8 +2,8 @@ import remcalc from 'remcalc';
import styled from 'styled-components';
export default styled.span`
width: ${remcalc(6)};
height: ${remcalc(6)};
width: ${props => props.size || remcalc(6)};
height: ${props => props.size || remcalc(6)};
border-radius: 50%;
background-color: ${props => props.theme[props.color]};
display: inline-block;

View File

@ -4,10 +4,7 @@
"no-console": 0,
"new-cap": 0,
"camelcase": 1,
// temp
"no-undef": 1,
"no-debugger": 1,
"no-negated-condition": 0,
"jsx-a11y/href-no-hash": 0
"jsx-a11y/href-no-hash": 0,
"no-negated-condition": 0
}
}

View File

@ -14,5 +14,10 @@
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
## Image Snapshots Diff
**/__diff_output__

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

View File

@ -4554,7 +4554,11 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
margin-top: 1.125rem;
}
.c29 {
.c28 {
margin-bottom: 0.75rem;
}
.c30 {
margin-top: 0.1875rem;
}
@ -4743,7 +4747,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
padding-bottom: 2.25rem;
}
.c28 {
.c29 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -5093,7 +5097,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c30 {
.c31 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
@ -5116,57 +5120,57 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
outline: 0;
}
.c30::-webkit-input-placeholder {
.c31::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30::-moz-placeholder {
.c31::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:-ms-input-placeholder {
.c31:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:invalid {
.c31:invalid {
box-shadow: none;
}
.c30:disabled {
.c31:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c30:disabled::-webkit-input-placeholder {
.c31:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:disabled::-moz-placeholder {
.c31:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:disabled:-ms-input-placeholder {
.c31:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:disabled {
.c31:disabled {
color: rgba(73,73,73,1);
}
.c30:disabled::-webkit-input-placeholder {
.c31:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,1);
}
.c30:disabled::-moz-placeholder {
.c31:disabled::-moz-placeholder {
color: rgba(73,73,73,1);
}
.c30:disabled:-ms-input-placeholder {
.c31:disabled:-ms-input-placeholder {
color: rgba(73,73,73,1);
}
.c30:focus {
.c31:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -5571,27 +5575,31 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
className="c20"
>
<div
className="baseline-jVaZNU kXgQxt c6"
name="id"
role="group"
style={undefined}
className="c28"
>
<label
className="c28"
htmlFor="x"
>
ID
</label>
<div
className="c29"
className="baseline-jVaZNU kXgQxt c6"
name="id"
role="group"
style={undefined}
>
<input
<label
className="c29"
htmlFor="x"
>
ID
</label>
<div
className="c30"
disabled={false}
id="x"
onBlur={null}
value="1"
/>
>
<input
className="c31"
disabled={false}
id="x"
onBlur={null}
value="1"
/>
</div>
</div>
</div>
</div>
@ -5605,16 +5613,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
style={undefined}
>
<label
className="c28"
className="c29"
htmlFor="y"
>
Subnet
</label>
<div
className="c29"
className="c30"
>
<input
className="c30"
className="c31"
disabled={false}
id="y"
onBlur={null}
@ -5633,16 +5641,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
style={undefined}
>
<label
className="c28"
className="c29"
htmlFor="z"
>
IP range
</label>
<div
className="c29"
className="c30"
>
<input
className="c30"
className="c31"
disabled={false}
id="z"
onBlur={null}

View File

@ -5,6 +5,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.1875rem;
}
.c18 {
margin-top: 0.75rem;
}
.c3 {
padding-right: 1.125rem;
padding-left: 1.125rem;
@ -14,7 +18,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
padding: 1.125rem;
}
.c22 {
.c23 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -27,30 +31,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
min-width: 7.5rem;
}
.c22::-moz-focus-inner,
.c22[type='button']::-moz-focus-inner,
.c22[type='reset']::-moz-focus-inner,
.c22[type='submit']::-moz-focus-inner {
.c23::-moz-focus-inner,
.c23[type='button']::-moz-focus-inner,
.c23[type='reset']::-moz-focus-inner,
.c23[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c22:-moz-focusring,
.c22[type='button']:-moz-focusring,
.c22[type='reset']:-moz-focusring,
.c22[type='submit']:-moz-focusring {
.c23:-moz-focusring,
.c23[type='button']:-moz-focusring,
.c23[type='reset']:-moz-focusring,
.c23[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c22 + button {
.c23 + button {
margin-left: 0.375rem;
}
.c21 {
.c22 {
display: inline-block;
}
.c20 {
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -94,50 +98,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin: 0;
}
.c20:focus {
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c20:hover {
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c20[disabled] {
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c20:focus {
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c20:hover {
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c23 {
.c24 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -182,50 +186,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin: 0;
}
.c23:focus {
.c24:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c23:hover {
.c24:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c23[disabled] {
.c24[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c23:focus {
.c24:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c23:hover {
.c24:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c25 {
.c26 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -282,73 +286,73 @@ exports[`renders <AddForm /> without throwing 1`] = `
float: right;
}
.c25:focus {
.c26:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c25:hover {
.c26:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c25[disabled] {
.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c25:focus {
.c26:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c25:hover {
.c26:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c25:focus {
.c26:focus {
color: rgb(205,37,27);
background-color: rgb(255,255,255);
border-color: rgb(205,37,27);
}
.c25:hover {
.c26:hover {
color: rgb(205,37,27);
background-color: rgb(255,255,255);
border-color: rgb(205,37,27);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgba(210,67,58,0.1);
border-color: rgb(205,37,27);
}
.c25 svg + span {
.c26 svg + span {
margin-left: 0.75rem;
}
.c25 svg {
.c26 svg {
max-height: 1.125rem;
}
@ -379,7 +383,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
float: none;
}
.c18 {
.c19 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -398,7 +402,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-left: -0.625rem;
}
.c19 {
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -408,7 +412,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
display: block;
}
.c24 {
.c25 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -793,7 +797,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c18 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -802,7 +806,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c18 {
.c19 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
@ -811,7 +815,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c19 {
.c20 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@ -820,7 +824,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c24 {
.c25 {
display: none;
}
}
@ -941,61 +945,65 @@ exports[`renders <AddForm /> without throwing 1`] = `
<div
className="c19"
>
<button
className="c20 c21 c22"
disabled={false}
href=""
onClick={[Function]}
type="button"
<div
className="c20"
>
<span>
Cancel
</span>
</button>
<button
className="c23 c21 c22"
disabled={true}
href=""
type="submit"
>
<span>
Create
</span>
</button>
</div>
<div
className="c24"
>
<button
className="c25 c21 c22"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="16"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 16"
width="12"
xmlns="http://www.w3.org/2000/svg"
<button
className="c21 c22 c23"
disabled={false}
href=""
onClick={[Function]}
type="button"
>
<path
d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
fill="rgb(210, 67, 58)"
/>
</svg>
<span>
Remove
</span>
</button>
<span>
Cancel
</span>
</button>
<button
className="c24 c22 c23"
disabled={true}
href=""
type="submit"
>
<span>
Create
</span>
</button>
</div>
<div
className="c25"
>
<button
className="c26 c22 c23"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="16"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 16"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
fill="rgb(210, 67, 58)"
/>
</svg>
<span>
Remove
</span>
</button>
</div>
</div>
</div>
</div>
@ -1009,6 +1017,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.1875rem;
}
.c18 {
margin-top: 0.75rem;
}
.c3 {
padding-right: 1.125rem;
padding-left: 1.125rem;
@ -1018,7 +1030,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
padding: 1.125rem;
}
.c22 {
.c23 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1031,30 +1043,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
min-width: 7.5rem;
}
.c22::-moz-focus-inner,
.c22[type='button']::-moz-focus-inner,
.c22[type='reset']::-moz-focus-inner,
.c22[type='submit']::-moz-focus-inner {
.c23::-moz-focus-inner,
.c23[type='button']::-moz-focus-inner,
.c23[type='reset']::-moz-focus-inner,
.c23[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c22:-moz-focusring,
.c22[type='button']:-moz-focusring,
.c22[type='reset']:-moz-focusring,
.c22[type='submit']:-moz-focusring {
.c23:-moz-focusring,
.c23[type='button']:-moz-focusring,
.c23[type='reset']:-moz-focusring,
.c23[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c22 + button {
.c23 + button {
margin-left: 0.375rem;
}
.c21 {
.c22 {
display: inline-block;
}
.c20 {
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1098,50 +1110,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin: 0;
}
.c20:focus {
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c20:hover {
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c20[disabled] {
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c20:focus {
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c20:hover {
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c23 {
.c24 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1186,50 +1198,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin: 0;
}
.c23:focus {
.c24:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c23:hover {
.c24:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c23[disabled] {
.c24[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c23:focus {
.c24:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c23:hover {
.c24:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c23:active,
.c23:active:hover,
.c23:active:focus {
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c25 {
.c26 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1286,73 +1298,73 @@ exports[`renders <EditForm /> without throwing 1`] = `
float: right;
}
.c25:focus {
.c26:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c25:hover {
.c26:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c25[disabled] {
.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c25:focus {
.c26:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c25:hover {
.c26:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c25:focus {
.c26:focus {
color: rgb(205,37,27);
background-color: rgb(255,255,255);
border-color: rgb(205,37,27);
}
.c25:hover {
.c26:hover {
color: rgb(205,37,27);
background-color: rgb(255,255,255);
border-color: rgb(205,37,27);
}
.c25:active,
.c25:active:hover,
.c25:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgba(210,67,58,0.1);
border-color: rgb(205,37,27);
}
.c25 svg + span {
.c26 svg + span {
margin-left: 0.75rem;
}
.c25 svg {
.c26 svg {
max-height: 1.125rem;
}
@ -1383,7 +1395,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
float: none;
}
.c18 {
.c19 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -1402,7 +1414,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-left: -0.625rem;
}
.c19 {
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -1412,7 +1424,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
display: block;
}
.c24 {
.c25 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -1787,7 +1799,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c18 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -1796,7 +1808,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c18 {
.c19 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
@ -1805,7 +1817,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c19 {
.c20 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
@ -1814,7 +1826,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
}
@media only screen and (min-width:0em) {
.c24 {
.c25 {
-webkit-flex-basis: 41.66666666666667%;
-ms-flex-preferred-size: 41.66666666666667%;
flex-basis: 41.66666666666667%;
@ -1955,61 +1967,65 @@ exports[`renders <EditForm /> without throwing 1`] = `
<div
className="c19"
>
<button
className="c20 c21 c22"
disabled={false}
href=""
onClick={[Function]}
type="button"
<div
className="c20"
>
<span>
Cancel
</span>
</button>
<button
className="c23 c21 c22"
disabled={true}
href=""
type="submit"
>
<span>
Save
</span>
</button>
</div>
<div
className="c24"
>
<button
className="c25 c21 c22"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="16"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 16"
width="12"
xmlns="http://www.w3.org/2000/svg"
<button
className="c21 c22 c23"
disabled={false}
href=""
onClick={[Function]}
type="button"
>
<path
d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
fill="rgb(210, 67, 58)"
/>
</svg>
<span>
Remove
</span>
</button>
<span>
Cancel
</span>
</button>
<button
className="c24 c22 c23"
disabled={true}
href=""
type="submit"
>
<span>
Save
</span>
</button>
</div>
<div
className="c25"
>
<button
className="c26 c22 c23"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="16"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 16"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
fill="rgb(210, 67, 58)"
/>
</svg>
<span>
Remove
</span>
</button>
</div>
</div>
</div>
</div>

View File

@ -1,14 +1,9 @@
import React, { Fragment } from 'react';
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import {
Rules,
TagRules,
DefaultRules,
ToggleFirewallForm,
ToggleInactiveForm
} from '../firewall';
import { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
import Theme from '@mocks/theme';

View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
/* eslint-disable camelcase */
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';

View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';

View File

@ -34,8 +34,8 @@ export const Header = () => (
<H3>Hostnames</H3>
<Padding bottom={2}>
<P>
Default hostnames are automatically generated from both the instance
name and any attached networks.
Default hostnames are automatically generated from both the instance name and any attached
networks.
</P>
</Padding>
</Fragment>
@ -46,7 +46,7 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
<Margin bottom={4} top={4}>
<FormGroup name="cns-enabled">
<Flex alignCenter>
<FormLabel>Disabled CNS</FormLabel>
<FormLabel disabled={submitting}>Disabled CNS</FormLabel>
<Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
Enabled CNS
</Toggle>
@ -66,20 +66,15 @@ export const HostnamesHeader = () => (
<H3>CNS service hostnames</H3>
<Padding bottom={3}>
<P>
CNS service hostnames are created by attaching a CNS service name to one
or more instances. You can serve multiple instances under the same
hostname by assigning them to a matching CNS service name.
CNS service hostnames are created by attaching a CNS service name to one or more instances.
You can serve multiple instances under the same hostname by assigning them to a matching CNS
service name.
</P>
</Padding>
</Margin>
);
export const AddServiceForm = ({
handleSubmit,
submitting,
disabled,
pristine
}) => (
export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
<form onSubmit={handleSubmit}>
<Flex alignEnd>
<FlexItem>
@ -97,12 +92,7 @@ export const AddServiceForm = ({
</FlexItem>
<FlexItem>
<Margin left={2}>
<Button
type="submit"
disabled={disabled || pristine}
loading={submitting}
inline
>
<Button type="submit" disabled={disabled || pristine} loading={submitting} inline>
Add
</Button>
<Divider height={remcalc(4)} transparent />
@ -120,15 +110,11 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
<SmallBordered bold noMargin>
{network && service
? 'Network CNS service'
: network
? 'Network'
: service ? 'CNS service' : 'Instance name'}{' '}
: network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '}
hostname{values.length === 1 ? '' : 's'}
</SmallBordered>
<FlexItem>
<Margin right={1}>
{hostname.public ? <PublicIcon /> : <PrivateIcon />}
</Margin>
<Margin right={1}>{hostname.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
</FlexItem>
<FlexItem>
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
@ -137,10 +123,7 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
{values.map((value, i) => (
<Margin
top={0.5}
bottom={
values.length !== 1 && values.length !== i + 1 ? '1' : undefined
}
>
bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
<Input onBlur={null} disabled monospace fluid value={value} />
</Margin>
))}
@ -178,9 +161,7 @@ const CnsHostnames = ({
active
key={value}
value={value}
onRemoveClick={
onRemoveService && (() => onRemoveService(value))
}
onRemoveClick={onRemoveService && (() => onRemoveService(value))}
/>
))}
</TagList>
@ -198,24 +179,16 @@ const CnsHostnames = ({
</Fragment>
);
export default ({
hostnames = [],
services = [],
onRemoveService,
children = null
}) => (
export default ({ hostnames = [], services = [], onRemoveService, children = null }) => (
<Card>
<Padding all={4} bottom={0}>
<DefaultHostnames
hostnames={hostnames.filter(({ service }) => !service)}
/>
<DefaultHostnames hostnames={hostnames.filter(({ service }) => !service)} />
<Divider height={remcalc(1)} />
<Margin top={4}>
<CnsHostnames
services={services}
hostnames={hostnames.filter(({ service }) => service)}
onRemoveService={onRemoveService}
>
onRemoveService={onRemoveService}>
{children}
</CnsHostnames>
</Margin>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -86,7 +86,7 @@ exports[`renders <Rule/> without throwing 1`] = `
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
padding-right: 1rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
@ -112,7 +112,7 @@ exports[`renders <Rule/> without throwing 1`] = `
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
padding-right: 1rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
@ -138,7 +138,7 @@ exports[`renders <Rule/> without throwing 1`] = `
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
padding-right: 1rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
@ -772,7 +772,7 @@ exports[`renders <Rule/> without throwing 2`] = `
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
padding-right: 1rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
@ -798,7 +798,7 @@ exports[`renders <Rule/> without throwing 2`] = `
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
padding-right: 1rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;
@ -824,7 +824,7 @@ exports[`renders <Rule/> without throwing 2`] = `
border-radius: 0;
background: transparent;
padding: 0;
padding-right: 0.75rem;
padding-right: 1rem;
display: inline;
height: 1.5rem;
-webkit-appearance: none;

View File

@ -1238,15 +1238,15 @@ exports[`renders <Package /> without throwing 1`] = `
`;
exports[`renders <Packages expanded /> without throwing 1`] = `
.c10 {
.c11 {
margin-bottom: 0.75rem;
}
.c8 {
.c9 {
padding: 2.25rem;
}
.c9 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1282,7 +1282,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
margin-left: 0.5625rem;
}
.c12 {
.c13 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
@ -1290,20 +1290,20 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
margin: 0;
}
.c12 + p,
.c12 + small,
.c12 + h1,
.c12 + h2,
.c12 + label,
.c12 + h3,
.c12 + h4,
.c12 + h5,
.c12 + div,
.c12 + span {
.c13 + p,
.c13 + small,
.c13 + h1,
.c13 + h2,
.c13 + label,
.c13 + h3,
.c13 + h4,
.c13 + h5,
.c13 + div,
.c13 + span {
margin-top: 1.5rem;
}
.c7 {
.c8 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1439,10 +1439,14 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
.c11 {
.c12 {
color: rgb(151,151,151);
}
.c7 {
width: 100%;
}
<form>
<table
className="c0"
@ -1533,25 +1537,26 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
/>
</table>
<div
className="c7"
className="c7 c8"
disabled={false}
name="card"
>
<div
className="c8"
className="c9"
>
<div
className="c9"
className="c10"
>
<div
className="c10"
className="c11"
>
<img
alt="Sad Animal"
src="no-packages.svg"
/>
</div>
<h3
className="c11 c12"
className="c12 c13"
>
Sorry, but we werent able to find any packages with that filter
</h3>
@ -1562,15 +1567,15 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
`;
exports[`renders <Packages isVmSelected /> without throwing 1`] = `
.c10 {
.c11 {
margin-bottom: 0.75rem;
}
.c8 {
.c9 {
padding: 2.25rem;
}
.c9 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1606,7 +1611,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
margin-left: 0.5625rem;
}
.c12 {
.c13 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
@ -1614,20 +1619,20 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
margin: 0;
}
.c12 + p,
.c12 + small,
.c12 + h1,
.c12 + h2,
.c12 + label,
.c12 + h3,
.c12 + h4,
.c12 + h5,
.c12 + div,
.c12 + span {
.c13 + p,
.c13 + small,
.c13 + h1,
.c13 + h2,
.c13 + label,
.c13 + h3,
.c13 + h4,
.c13 + h5,
.c13 + div,
.c13 + span {
margin-top: 1.5rem;
}
.c7 {
.c8 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1763,10 +1768,14 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
.c11 {
.c12 {
color: rgb(151,151,151);
}
.c7 {
width: 100%;
}
<form>
<table
className="c0"
@ -1857,25 +1866,26 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
/>
</table>
<div
className="c7"
className="c7 c8"
disabled={false}
name="card"
>
<div
className="c8"
className="c9"
>
<div
className="c9"
className="c10"
>
<div
className="c10"
className="c11"
>
<img
alt="Sad Animal"
src="no-packages.svg"
/>
</div>
<h3
className="c11 c12"
className="c12 c13"
>
Sorry, but we werent able to find any packages with that filter
</h3>
@ -1886,15 +1896,15 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
`;
exports[`renders <Packages loading /> without throwing 1`] = `
.c10 {
.c11 {
margin-bottom: 0.75rem;
}
.c8 {
.c9 {
padding: 2.25rem;
}
.c9 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1930,7 +1940,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
margin-left: 0.5625rem;
}
.c12 {
.c13 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
@ -1938,20 +1948,20 @@ exports[`renders <Packages loading /> without throwing 1`] = `
margin: 0;
}
.c12 + p,
.c12 + small,
.c12 + h1,
.c12 + h2,
.c12 + label,
.c12 + h3,
.c12 + h4,
.c12 + h5,
.c12 + div,
.c12 + span {
.c13 + p,
.c13 + small,
.c13 + h1,
.c13 + h2,
.c13 + label,
.c13 + h3,
.c13 + h4,
.c13 + h5,
.c13 + div,
.c13 + span {
margin-top: 1.5rem;
}
.c7 {
.c8 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -2087,10 +2097,14 @@ exports[`renders <Packages loading /> without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
.c11 {
.c12 {
color: rgb(151,151,151);
}
.c7 {
width: 100%;
}
<form>
<table
className="c0"
@ -2181,25 +2195,26 @@ exports[`renders <Packages loading /> without throwing 1`] = `
/>
</table>
<div
className="c7"
className="c7 c8"
disabled={false}
name="card"
>
<div
className="c8"
className="c9"
>
<div
className="c9"
className="c10"
>
<div
className="c10"
className="c11"
>
<img
alt="Sad Animal"
src="no-packages.svg"
/>
</div>
<h3
className="c11 c12"
className="c12 c13"
>
Sorry, but we werent able to find any packages with that filter
</h3>
@ -2422,15 +2437,15 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
`;
exports[`renders <Packages pristine={false} /> without throwing 1`] = `
.c10 {
.c11 {
margin-bottom: 0.75rem;
}
.c8 {
.c9 {
padding: 2.25rem;
}
.c9 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -2466,7 +2481,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
margin-left: 0.5625rem;
}
.c12 {
.c13 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
@ -2474,20 +2489,20 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
margin: 0;
}
.c12 + p,
.c12 + small,
.c12 + h1,
.c12 + h2,
.c12 + label,
.c12 + h3,
.c12 + h4,
.c12 + h5,
.c12 + div,
.c12 + span {
.c13 + p,
.c13 + small,
.c13 + h1,
.c13 + h2,
.c13 + label,
.c13 + h3,
.c13 + h4,
.c13 + h5,
.c13 + div,
.c13 + span {
margin-top: 1.5rem;
}
.c7 {
.c8 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -2623,10 +2638,14 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
.c11 {
.c12 {
color: rgb(151,151,151);
}
.c7 {
width: 100%;
}
<form>
<table
className="c0"
@ -2717,25 +2736,26 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
/>
</table>
<div
className="c7"
className="c7 c8"
disabled={false}
name="card"
>
<div
className="c8"
className="c9"
>
<div
className="c9"
className="c10"
>
<div
className="c10"
className="c11"
>
<img
alt="Sad Animal"
src="no-packages.svg"
/>
</div>
<h3
className="c11 c12"
className="c12 c13"
>
Sorry, but we werent able to find any packages with that filter
</h3>

View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
@ -71,14 +72,10 @@ export const Collapsed = ({ name, fabric, ...network }) => (
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -146,14 +143,10 @@ export const Expanded = ({
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -162,11 +155,7 @@ export const Expanded = ({
{fabric ? (
<Margin top={3}>
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
<CardHeader
secondary={false}
transparent={false}
onClick={onInfoClick}
>
<CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
<CardHeaderMeta>
<Padding left={3} right={3}>
<P>Network information</P>
@ -185,11 +174,7 @@ export const Expanded = ({
<Margin bottom={3}>
<Flex alignCenter>
<Margin right={1}>
<DotIcon
width={remcalc(12)}
height={remcalc(12)}
color="green"
/>
<DotIcon size={remcalc(12)} color="green" />
</Margin>
<Small bold noMargin>
Outbound internet access enabled
@ -201,28 +186,16 @@ export const Expanded = ({
<FlexItem>
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
monospace
type="text"
value={id}
/>
<Margin top={0.5} bottom={2}>
<Input onBlur={null} big monospace type="text" value={id} />
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
monospace
type="text"
value={subnet}
/>
<Margin top={0.5} bottom={2}>
<Input onBlur={null} big monospace type="text" value={subnet} />
</Margin>
</FormGroup>
</FlexItem>

View File

@ -10,15 +10,19 @@ const NoPackagesTitle = styled(H3)`
color: ${props => props.theme.greyDark};
`;
const FullWidthCard = styled(Card)`
width: 100%;
`
export default ({ children }) => (
<Card>
<FullWidthCard>
<Padding all={6}>
<Flex alignCenter justifyCenter column>
<Margin bottom={2}>
<img src={NoPackagesImage} />
<img src={NoPackagesImage} alt="Sad Animal"/>
</Margin>
<NoPackagesTitle>{children}</NoPackagesTitle>
</Flex>
</Padding>
</Card>
</FullWidthCard>
);

View File

@ -1,35 +1,26 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import {
H3,
FormGroup,
FormLabel,
Toggle,
TagList,
P,
Strong,
Card
} from 'joyent-ui-toolkit';
import { H3, FormGroup, FormLabel, Toggle, TagList, P, Strong, Card } from 'joyent-ui-toolkit';
import Tag from '@components/tags';
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
const Wildcards = {
vmall: 'All VMs in DC',
any: 'Any'
};
const parsePartial = (p, index) => {
const parsePartial = (p, index, style) => {
if (p[0] === 'wildcard') {
return (
<Margin key={index} top={0.5} bottom={0.5}>
<P>{Wildcards[p[1]]}</P>
<P style={style}>{Wildcards[p[1]]}</P>
</Margin>
);
}
@ -41,7 +32,7 @@ const parsePartial = (p, index) => {
return (
<Margin left={0.5}>
<TagList>
<Tag norMargin key={index} name={name} value={value} />
<Tag style={style} norMargin key={index} name={name} value={value} />
</TagList>
</Margin>
);
@ -51,9 +42,12 @@ const parsePartial = (p, index) => {
const Rule = ({ enabled, rule_obj }) => {
const { action, protocol } = rule_obj;
const froms = rule_obj.from.map(parsePartial);
const tos = rule_obj.to.map(parsePartial);
const style = {
color: !enabled ? '#D8D8D8' : null
};
const froms = rule_obj.from.map((p, index) => parsePartial(p, index, style));
const tos = rule_obj.to.map((p, index) => parsePartial(p, index, style));
return (
<Card disabled={!enabled}>
<Padding left={3} right={3} top={1.5} bottom={1.5}>
@ -62,7 +56,7 @@ const Rule = ({ enabled, rule_obj }) => {
<Flex justifyStart alignCenter contentStretch full>
<Margin right={0.5}>
<FlexItem>
<Strong>From: </Strong>
<Strong style={style}>From: </Strong>
</FlexItem>
</Margin>
<Flex alignCenter>{froms}</Flex>
@ -72,7 +66,7 @@ const Rule = ({ enabled, rule_obj }) => {
<Flex justifyStart alignCenter contentStretch full>
<Margin right={0.5}>
<FlexItem>
<Strong>To: </Strong>
<Strong style={style}>To: </Strong>
</FlexItem>
</Margin>
<Flex alignCenter>{tos}</Flex>
@ -82,12 +76,12 @@ const Rule = ({ enabled, rule_obj }) => {
<Flex justifyStart alignCenter contentStretch full>
<Margin right={0.5}>
<FlexItem>
<Strong>Protocol: </Strong>
<Strong style={style}>Protocol: </Strong>
</FlexItem>
</Margin>
<Flex alignCenter>
<Margin top={0.5} bottom={0.5}>
<P>{protocol.name}</P>
<P style={style}>{protocol.name}</P>
</Margin>
</Flex>
</Flex>
@ -96,12 +90,12 @@ const Rule = ({ enabled, rule_obj }) => {
<Flex justifyStart alignCenter contentStretch full>
<Margin right={0.5}>
<FlexItem>
<Strong>Ports: </Strong>
<Strong style={style}>Ports: </Strong>
</FlexItem>
</Margin>
<Flex alignCenter>
<Margin top={0.5} bottom={0.5}>
<P>{protocol.targets.join(';')}</P>
<P style={style}>{protocol.targets.join(';')}</P>
</Margin>
</Flex>
</Flex>
@ -110,12 +104,12 @@ const Rule = ({ enabled, rule_obj }) => {
<Flex justifyStart alignCenter contentStretch full>
<Margin right={0.5}>
<FlexItem>
<Strong>Action: </Strong>
<Strong style={style}>Action: </Strong>
</FlexItem>
</Margin>
<Flex alignCenter>
<Margin top={0.5} bottom={0.5}>
<P>{capitalizeFirstLetter(action)}</P>
<P style={style}>{capitalizeFirstLetter(action)}</P>
</Margin>
</Flex>
</Flex>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Some files were not shown because too many files have changed in this diff Show More