fix(my-joy-beta): small fixes
@ -1,4 +1,4 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const Brule = require('brule');
|
const Brule = require('brule');
|
||||||
const Hapi = require('hapi');
|
const Hapi = require('hapi');
|
||||||
|
@ -2,8 +2,8 @@ import remcalc from 'remcalc';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
export default styled.span`
|
export default styled.span`
|
||||||
width: ${remcalc(6)};
|
width: ${props => props.size || remcalc(6)};
|
||||||
height: ${remcalc(6)};
|
height: ${props => props.size || remcalc(6)};
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: ${props => props.theme[props.color]};
|
background-color: ${props => props.theme[props.color]};
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -4,10 +4,7 @@
|
|||||||
"no-console": 0,
|
"no-console": 0,
|
||||||
"new-cap": 0,
|
"new-cap": 0,
|
||||||
"camelcase": 1,
|
"camelcase": 1,
|
||||||
// temp
|
"jsx-a11y/href-no-hash": 0,
|
||||||
"no-undef": 1,
|
"no-negated-condition": 0
|
||||||
"no-debugger": 1,
|
|
||||||
"no-negated-condition": 0,
|
|
||||||
"jsx-a11y/href-no-hash": 0
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
5
packages/my-joy-beta/.gitignore
vendored
@ -14,5 +14,10 @@
|
|||||||
.env
|
.env
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
|
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
|
## Image Snapshots Diff
|
||||||
|
|
||||||
|
**/__diff_output__
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.0 KiB |
@ -4554,7 +4554,11 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
margin-top: 1.125rem;
|
margin-top: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c29 {
|
.c28 {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c30 {
|
||||||
margin-top: 0.1875rem;
|
margin-top: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4743,7 +4747,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c28 {
|
.c29 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -5093,7 +5097,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30 {
|
.c31 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
@ -5116,57 +5120,57 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30::-webkit-input-placeholder {
|
.c31::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30::-moz-placeholder {
|
.c31::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:-ms-input-placeholder {
|
.c31:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:invalid {
|
.c31:invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled {
|
.c31:disabled {
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled::-webkit-input-placeholder {
|
.c31:disabled::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled::-moz-placeholder {
|
.c31:disabled::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled:-ms-input-placeholder {
|
.c31:disabled:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled {
|
.c31:disabled {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled::-webkit-input-placeholder {
|
.c31:disabled::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled::-moz-placeholder {
|
.c31:disabled::-moz-placeholder {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:disabled:-ms-input-placeholder {
|
.c31:disabled:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c30:focus {
|
.c31:focus {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
@ -5571,27 +5575,31 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
className="c20"
|
className="c20"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="baseline-jVaZNU kXgQxt c6"
|
className="c28"
|
||||||
name="id"
|
|
||||||
role="group"
|
|
||||||
style={undefined}
|
|
||||||
>
|
>
|
||||||
<label
|
|
||||||
className="c28"
|
|
||||||
htmlFor="x"
|
|
||||||
>
|
|
||||||
ID
|
|
||||||
</label>
|
|
||||||
<div
|
<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"
|
className="c30"
|
||||||
disabled={false}
|
>
|
||||||
id="x"
|
<input
|
||||||
onBlur={null}
|
className="c31"
|
||||||
value="1"
|
disabled={false}
|
||||||
/>
|
id="x"
|
||||||
|
onBlur={null}
|
||||||
|
value="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -5605,16 +5613,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c28"
|
className="c29"
|
||||||
htmlFor="y"
|
htmlFor="y"
|
||||||
>
|
>
|
||||||
Subnet
|
Subnet
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c29"
|
className="c30"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c30"
|
className="c31"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="y"
|
id="y"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
@ -5633,16 +5641,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c28"
|
className="c29"
|
||||||
htmlFor="z"
|
htmlFor="z"
|
||||||
>
|
>
|
||||||
IP range
|
IP range
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c29"
|
className="c30"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c30"
|
className="c31"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="z"
|
id="z"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
|
@ -5,6 +5,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
margin-top: 0.1875rem;
|
margin-top: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c18 {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.c3 {
|
.c3 {
|
||||||
padding-right: 1.125rem;
|
padding-right: 1.125rem;
|
||||||
padding-left: 1.125rem;
|
padding-left: 1.125rem;
|
||||||
@ -14,7 +18,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
padding: 1.125rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22 {
|
.c23 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -27,30 +31,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22::-moz-focus-inner,
|
.c23::-moz-focus-inner,
|
||||||
.c22[type='button']::-moz-focus-inner,
|
.c23[type='button']::-moz-focus-inner,
|
||||||
.c22[type='reset']::-moz-focus-inner,
|
.c23[type='reset']::-moz-focus-inner,
|
||||||
.c22[type='submit']::-moz-focus-inner {
|
.c23[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22:-moz-focusring,
|
.c23:-moz-focusring,
|
||||||
.c22[type='button']:-moz-focusring,
|
.c23[type='button']:-moz-focusring,
|
||||||
.c22[type='reset']:-moz-focusring,
|
.c23[type='reset']:-moz-focusring,
|
||||||
.c22[type='submit']:-moz-focusring {
|
.c23[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22 + button {
|
.c23 + button {
|
||||||
margin-left: 0.375rem;
|
margin-left: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c21 {
|
.c22 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20 {
|
.c21 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -94,50 +98,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:focus {
|
.c21: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:hover {
|
.c21: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:active,
|
.c21:active,
|
||||||
.c20:active:hover,
|
.c21:active:hover,
|
||||||
.c20:active:focus {
|
.c21: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20[disabled] {
|
.c21[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:focus {
|
.c21:focus {
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:hover {
|
.c21:hover {
|
||||||
background-color: rgb(247,247,247);
|
background-color: rgb(247,247,247);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:active,
|
.c21:active,
|
||||||
.c20:active:hover,
|
.c21:active:hover,
|
||||||
.c20:active:focus {
|
.c21:active:focus {
|
||||||
background-color: rgb(230,230,230);
|
background-color: rgb(230,230,230);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23 {
|
.c24 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -182,50 +186,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:hover {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:active,
|
.c24:active,
|
||||||
.c23:active:hover,
|
.c24:active:hover,
|
||||||
.c23:active:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23[disabled] {
|
.c24[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:hover {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:active,
|
.c24:active,
|
||||||
.c23:active:hover,
|
.c24:active:hover,
|
||||||
.c23:active:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 {
|
.c26 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -282,73 +286,73 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:focus {
|
.c26: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:hover {
|
.c26: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:active,
|
.c26:active,
|
||||||
.c25:active:hover,
|
.c26:active:hover,
|
||||||
.c25:active:focus {
|
.c26: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25[disabled] {
|
.c26[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:focus {
|
.c26:focus {
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:hover {
|
.c26:hover {
|
||||||
background-color: rgb(247,247,247);
|
background-color: rgb(247,247,247);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:active,
|
.c26:active,
|
||||||
.c25:active:hover,
|
.c26:active:hover,
|
||||||
.c25:active:focus {
|
.c26:active:focus {
|
||||||
background-color: rgb(230,230,230);
|
background-color: rgb(230,230,230);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:focus {
|
.c26:focus {
|
||||||
color: rgb(205,37,27);
|
color: rgb(205,37,27);
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(205,37,27);
|
border-color: rgb(205,37,27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:hover {
|
.c26:hover {
|
||||||
color: rgb(205,37,27);
|
color: rgb(205,37,27);
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(205,37,27);
|
border-color: rgb(205,37,27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:active,
|
.c26:active,
|
||||||
.c25:active:hover,
|
.c26:active:hover,
|
||||||
.c25:active:focus {
|
.c26:active:focus {
|
||||||
background-color: rgba(210,67,58,0.1);
|
background-color: rgba(210,67,58,0.1);
|
||||||
border-color: rgb(205,37,27);
|
border-color: rgb(205,37,27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 svg + span {
|
.c26 svg + span {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 svg {
|
.c26 svg {
|
||||||
max-height: 1.125rem;
|
max-height: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -379,7 +383,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c19 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -398,7 +402,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
margin-left: -0.625rem;
|
margin-left: -0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c19 {
|
.c20 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
-ms-flex: 0 0 auto;
|
-ms-flex: 0 0 auto;
|
||||||
@ -408,7 +412,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c24 {
|
.c25 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
-ms-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) {
|
@media only screen and (min-width:0em) {
|
||||||
.c18 {
|
.c19 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -802,7 +806,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c18 {
|
.c19 {
|
||||||
-webkit-box-pack: justify;
|
-webkit-box-pack: justify;
|
||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
@ -811,7 +815,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c19 {
|
.c20 {
|
||||||
-webkit-flex-basis: 100%;
|
-webkit-flex-basis: 100%;
|
||||||
-ms-flex-preferred-size: 100%;
|
-ms-flex-preferred-size: 100%;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
@ -820,7 +824,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c24 {
|
.c25 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -941,61 +945,65 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
<div
|
<div
|
||||||
className="c19"
|
className="c19"
|
||||||
>
|
>
|
||||||
<button
|
<div
|
||||||
className="c20 c21 c22"
|
className="c20"
|
||||||
disabled={false}
|
|
||||||
href=""
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
<span>
|
<button
|
||||||
Cancel
|
className="c21 c22 c23"
|
||||||
</span>
|
disabled={false}
|
||||||
</button>
|
href=""
|
||||||
<button
|
onClick={[Function]}
|
||||||
className="c23 c21 c22"
|
type="button"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<path
|
<span>
|
||||||
d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
|
Cancel
|
||||||
fill="rgb(210, 67, 58)"
|
</span>
|
||||||
/>
|
</button>
|
||||||
</svg>
|
<button
|
||||||
<span>
|
className="c24 c22 c23"
|
||||||
Remove
|
disabled={true}
|
||||||
</span>
|
href=""
|
||||||
</button>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1009,6 +1017,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
margin-top: 0.1875rem;
|
margin-top: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c18 {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.c3 {
|
.c3 {
|
||||||
padding-right: 1.125rem;
|
padding-right: 1.125rem;
|
||||||
padding-left: 1.125rem;
|
padding-left: 1.125rem;
|
||||||
@ -1018,7 +1030,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
padding: 1.125rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22 {
|
.c23 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -1031,30 +1043,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22::-moz-focus-inner,
|
.c23::-moz-focus-inner,
|
||||||
.c22[type='button']::-moz-focus-inner,
|
.c23[type='button']::-moz-focus-inner,
|
||||||
.c22[type='reset']::-moz-focus-inner,
|
.c23[type='reset']::-moz-focus-inner,
|
||||||
.c22[type='submit']::-moz-focus-inner {
|
.c23[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22:-moz-focusring,
|
.c23:-moz-focusring,
|
||||||
.c22[type='button']:-moz-focusring,
|
.c23[type='button']:-moz-focusring,
|
||||||
.c22[type='reset']:-moz-focusring,
|
.c23[type='reset']:-moz-focusring,
|
||||||
.c22[type='submit']:-moz-focusring {
|
.c23[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c22 + button {
|
.c23 + button {
|
||||||
margin-left: 0.375rem;
|
margin-left: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c21 {
|
.c22 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20 {
|
.c21 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -1098,50 +1110,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:focus {
|
.c21: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:hover {
|
.c21: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:active,
|
.c21:active,
|
||||||
.c20:active:hover,
|
.c21:active:hover,
|
||||||
.c20:active:focus {
|
.c21: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20[disabled] {
|
.c21[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:focus {
|
.c21:focus {
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:hover {
|
.c21:hover {
|
||||||
background-color: rgb(247,247,247);
|
background-color: rgb(247,247,247);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20:active,
|
.c21:active,
|
||||||
.c20:active:hover,
|
.c21:active:hover,
|
||||||
.c20:active:focus {
|
.c21:active:focus {
|
||||||
background-color: rgb(230,230,230);
|
background-color: rgb(230,230,230);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23 {
|
.c24 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -1186,50 +1198,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:hover {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:active,
|
.c24:active,
|
||||||
.c23:active:hover,
|
.c24:active:hover,
|
||||||
.c23:active:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23[disabled] {
|
.c24[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:hover {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c23:active,
|
.c24:active,
|
||||||
.c23:active:hover,
|
.c24:active:hover,
|
||||||
.c23:active:focus {
|
.c24: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 {
|
.c26 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -1286,73 +1298,73 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:focus {
|
.c26: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:hover {
|
.c26: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:active,
|
.c26:active,
|
||||||
.c25:active:hover,
|
.c26:active:hover,
|
||||||
.c25:active:focus {
|
.c26: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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25[disabled] {
|
.c26[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:focus {
|
.c26:focus {
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:hover {
|
.c26:hover {
|
||||||
background-color: rgb(247,247,247);
|
background-color: rgb(247,247,247);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:active,
|
.c26:active,
|
||||||
.c25:active:hover,
|
.c26:active:hover,
|
||||||
.c25:active:focus {
|
.c26:active:focus {
|
||||||
background-color: rgb(230,230,230);
|
background-color: rgb(230,230,230);
|
||||||
border-color: rgb(216,216,216);
|
border-color: rgb(216,216,216);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:focus {
|
.c26:focus {
|
||||||
color: rgb(205,37,27);
|
color: rgb(205,37,27);
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(205,37,27);
|
border-color: rgb(205,37,27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:hover {
|
.c26:hover {
|
||||||
color: rgb(205,37,27);
|
color: rgb(205,37,27);
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border-color: rgb(205,37,27);
|
border-color: rgb(205,37,27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25:active,
|
.c26:active,
|
||||||
.c25:active:hover,
|
.c26:active:hover,
|
||||||
.c25:active:focus {
|
.c26:active:focus {
|
||||||
background-color: rgba(210,67,58,0.1);
|
background-color: rgba(210,67,58,0.1);
|
||||||
border-color: rgb(205,37,27);
|
border-color: rgb(205,37,27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 svg + span {
|
.c26 svg + span {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 svg {
|
.c26 svg {
|
||||||
max-height: 1.125rem;
|
max-height: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1383,7 +1395,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c19 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -1402,7 +1414,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
margin-left: -0.625rem;
|
margin-left: -0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c19 {
|
.c20 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
-ms-flex: 0 0 auto;
|
-ms-flex: 0 0 auto;
|
||||||
@ -1412,7 +1424,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c24 {
|
.c25 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
-ms-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) {
|
@media only screen and (min-width:0em) {
|
||||||
.c18 {
|
.c19 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -1796,7 +1808,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c18 {
|
.c19 {
|
||||||
-webkit-box-pack: justify;
|
-webkit-box-pack: justify;
|
||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
@ -1805,7 +1817,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c19 {
|
.c20 {
|
||||||
-webkit-flex-basis: 58.333333333333336%;
|
-webkit-flex-basis: 58.333333333333336%;
|
||||||
-ms-flex-preferred-size: 58.333333333333336%;
|
-ms-flex-preferred-size: 58.333333333333336%;
|
||||||
flex-basis: 58.333333333333336%;
|
flex-basis: 58.333333333333336%;
|
||||||
@ -1814,7 +1826,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c24 {
|
.c25 {
|
||||||
-webkit-flex-basis: 41.66666666666667%;
|
-webkit-flex-basis: 41.66666666666667%;
|
||||||
-ms-flex-preferred-size: 41.66666666666667%;
|
-ms-flex-preferred-size: 41.66666666666667%;
|
||||||
flex-basis: 41.66666666666667%;
|
flex-basis: 41.66666666666667%;
|
||||||
@ -1955,61 +1967,65 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
<div
|
<div
|
||||||
className="c19"
|
className="c19"
|
||||||
>
|
>
|
||||||
<button
|
<div
|
||||||
className="c20 c21 c22"
|
className="c20"
|
||||||
disabled={false}
|
|
||||||
href=""
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
<span>
|
<button
|
||||||
Cancel
|
className="c21 c22 c23"
|
||||||
</span>
|
disabled={false}
|
||||||
</button>
|
href=""
|
||||||
<button
|
onClick={[Function]}
|
||||||
className="c23 c21 c22"
|
type="button"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<path
|
<span>
|
||||||
d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
|
Cancel
|
||||||
fill="rgb(210, 67, 58)"
|
</span>
|
||||||
/>
|
</button>
|
||||||
</svg>
|
<button
|
||||||
<span>
|
className="c24 c22 c23"
|
||||||
Remove
|
disabled={true}
|
||||||
</span>
|
href=""
|
||||||
</button>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,14 +1,9 @@
|
|||||||
import React, { Fragment } from 'react';
|
/* eslint-disable camelcase */
|
||||||
|
import React from 'react';
|
||||||
import renderer from 'react-test-renderer';
|
import renderer from 'react-test-renderer';
|
||||||
import 'jest-styled-components';
|
import 'jest-styled-components';
|
||||||
|
|
||||||
import {
|
import { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
|
||||||
Rules,
|
|
||||||
TagRules,
|
|
||||||
DefaultRules,
|
|
||||||
ToggleFirewallForm,
|
|
||||||
ToggleInactiveForm
|
|
||||||
} from '../firewall';
|
|
||||||
|
|
||||||
import Theme from '@mocks/theme';
|
import Theme from '@mocks/theme';
|
||||||
|
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import React, { Fragment } from 'react';
|
/* eslint-disable camelcase */
|
||||||
|
import React from 'react';
|
||||||
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
||||||
import screenshot from 'react-screenshot-renderer';
|
import screenshot from 'react-screenshot-renderer';
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable camelcase */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import renderer from 'react-test-renderer';
|
import renderer from 'react-test-renderer';
|
||||||
import 'jest-styled-components';
|
import 'jest-styled-components';
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable camelcase */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
||||||
import screenshot from 'react-screenshot-renderer';
|
import screenshot from 'react-screenshot-renderer';
|
||||||
|
@ -34,8 +34,8 @@ export const Header = () => (
|
|||||||
<H3>Hostnames</H3>
|
<H3>Hostnames</H3>
|
||||||
<Padding bottom={2}>
|
<Padding bottom={2}>
|
||||||
<P>
|
<P>
|
||||||
Default hostnames are automatically generated from both the instance
|
Default hostnames are automatically generated from both the instance name and any attached
|
||||||
name and any attached networks.
|
networks.
|
||||||
</P>
|
</P>
|
||||||
</Padding>
|
</Padding>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
@ -46,7 +46,7 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
|
|||||||
<Margin bottom={4} top={4}>
|
<Margin bottom={4} top={4}>
|
||||||
<FormGroup name="cns-enabled">
|
<FormGroup name="cns-enabled">
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<FormLabel>Disabled CNS</FormLabel>
|
<FormLabel disabled={submitting}>Disabled CNS</FormLabel>
|
||||||
<Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
|
<Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
|
||||||
Enabled CNS
|
Enabled CNS
|
||||||
</Toggle>
|
</Toggle>
|
||||||
@ -66,20 +66,15 @@ export const HostnamesHeader = () => (
|
|||||||
<H3>CNS service hostnames</H3>
|
<H3>CNS service hostnames</H3>
|
||||||
<Padding bottom={3}>
|
<Padding bottom={3}>
|
||||||
<P>
|
<P>
|
||||||
CNS service hostnames are created by attaching a CNS service name to one
|
CNS service hostnames are created by attaching a CNS service name to one or more instances.
|
||||||
or more instances. You can serve multiple instances under the same
|
You can serve multiple instances under the same hostname by assigning them to a matching CNS
|
||||||
hostname by assigning them to a matching CNS service name.
|
service name.
|
||||||
</P>
|
</P>
|
||||||
</Padding>
|
</Padding>
|
||||||
</Margin>
|
</Margin>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const AddServiceForm = ({
|
export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
|
||||||
handleSubmit,
|
|
||||||
submitting,
|
|
||||||
disabled,
|
|
||||||
pristine
|
|
||||||
}) => (
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Flex alignEnd>
|
<Flex alignEnd>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
@ -97,12 +92,7 @@ export const AddServiceForm = ({
|
|||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin left={2}>
|
<Margin left={2}>
|
||||||
<Button
|
<Button type="submit" disabled={disabled || pristine} loading={submitting} inline>
|
||||||
type="submit"
|
|
||||||
disabled={disabled || pristine}
|
|
||||||
loading={submitting}
|
|
||||||
inline
|
|
||||||
>
|
|
||||||
Add
|
Add
|
||||||
</Button>
|
</Button>
|
||||||
<Divider height={remcalc(4)} transparent />
|
<Divider height={remcalc(4)} transparent />
|
||||||
@ -120,15 +110,11 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
|
|||||||
<SmallBordered bold noMargin>
|
<SmallBordered bold noMargin>
|
||||||
{network && service
|
{network && service
|
||||||
? 'Network CNS service'
|
? 'Network CNS service'
|
||||||
: network
|
: network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '}
|
||||||
? 'Network'
|
|
||||||
: service ? 'CNS service' : 'Instance name'}{' '}
|
|
||||||
hostname{values.length === 1 ? '' : 's'}
|
hostname{values.length === 1 ? '' : 's'}
|
||||||
</SmallBordered>
|
</SmallBordered>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>
|
<Margin right={1}>{hostname.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
|
||||||
{hostname.public ? <PublicIcon /> : <PrivateIcon />}
|
|
||||||
</Margin>
|
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
|
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
|
||||||
@ -137,10 +123,7 @@ export const Hostname = ({ values = [], network, service, ...hostname }) => (
|
|||||||
{values.map((value, i) => (
|
{values.map((value, i) => (
|
||||||
<Margin
|
<Margin
|
||||||
top={0.5}
|
top={0.5}
|
||||||
bottom={
|
bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
|
||||||
values.length !== 1 && values.length !== i + 1 ? '1' : undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Input onBlur={null} disabled monospace fluid value={value} />
|
<Input onBlur={null} disabled monospace fluid value={value} />
|
||||||
</Margin>
|
</Margin>
|
||||||
))}
|
))}
|
||||||
@ -178,9 +161,7 @@ const CnsHostnames = ({
|
|||||||
active
|
active
|
||||||
key={value}
|
key={value}
|
||||||
value={value}
|
value={value}
|
||||||
onRemoveClick={
|
onRemoveClick={onRemoveService && (() => onRemoveService(value))}
|
||||||
onRemoveService && (() => onRemoveService(value))
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</TagList>
|
</TagList>
|
||||||
@ -198,24 +179,16 @@ const CnsHostnames = ({
|
|||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default ({
|
export default ({ hostnames = [], services = [], onRemoveService, children = null }) => (
|
||||||
hostnames = [],
|
|
||||||
services = [],
|
|
||||||
onRemoveService,
|
|
||||||
children = null
|
|
||||||
}) => (
|
|
||||||
<Card>
|
<Card>
|
||||||
<Padding all={4} bottom={0}>
|
<Padding all={4} bottom={0}>
|
||||||
<DefaultHostnames
|
<DefaultHostnames hostnames={hostnames.filter(({ service }) => !service)} />
|
||||||
hostnames={hostnames.filter(({ service }) => !service)}
|
|
||||||
/>
|
|
||||||
<Divider height={remcalc(1)} />
|
<Divider height={remcalc(1)} />
|
||||||
<Margin top={4}>
|
<Margin top={4}>
|
||||||
<CnsHostnames
|
<CnsHostnames
|
||||||
services={services}
|
services={services}
|
||||||
hostnames={hostnames.filter(({ service }) => service)}
|
hostnames={hostnames.filter(({ service }) => service)}
|
||||||
onRemoveService={onRemoveService}
|
onRemoveService={onRemoveService}>
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</CnsHostnames>
|
</CnsHostnames>
|
||||||
</Margin>
|
</Margin>
|
||||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.7 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@ -86,7 +86,7 @@ exports[`renders <Rule/> without throwing 1`] = `
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 0.75rem;
|
padding-right: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -112,7 +112,7 @@ exports[`renders <Rule/> without throwing 1`] = `
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 0.75rem;
|
padding-right: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -138,7 +138,7 @@ exports[`renders <Rule/> without throwing 1`] = `
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 0.75rem;
|
padding-right: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -772,7 +772,7 @@ exports[`renders <Rule/> without throwing 2`] = `
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 0.75rem;
|
padding-right: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -798,7 +798,7 @@ exports[`renders <Rule/> without throwing 2`] = `
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 0.75rem;
|
padding-right: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -824,7 +824,7 @@ exports[`renders <Rule/> without throwing 2`] = `
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 0.75rem;
|
padding-right: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
@ -1238,15 +1238,15 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <Packages expanded /> without throwing 1`] = `
|
exports[`renders <Packages expanded /> without throwing 1`] = `
|
||||||
.c10 {
|
.c11 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c9 {
|
||||||
padding: 2.25rem;
|
padding: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c10 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -1282,7 +1282,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
|
|||||||
margin-left: 0.5625rem;
|
margin-left: 0.5625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c13 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
@ -1290,20 +1290,20 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 + p,
|
.c13 + p,
|
||||||
.c12 + small,
|
.c13 + small,
|
||||||
.c12 + h1,
|
.c13 + h1,
|
||||||
.c12 + h2,
|
.c13 + h2,
|
||||||
.c12 + label,
|
.c13 + label,
|
||||||
.c12 + h3,
|
.c13 + h3,
|
||||||
.c12 + h4,
|
.c13 + h4,
|
||||||
.c12 + h5,
|
.c13 + h5,
|
||||||
.c12 + div,
|
.c13 + div,
|
||||||
.c12 + span {
|
.c13 + span {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c8 {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -1439,10 +1439,14 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
|
|||||||
border-bottom-width: 0.0625rem;
|
border-bottom-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c12 {
|
||||||
color: rgb(151,151,151);
|
color: rgb(151,151,151);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c7 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<table
|
<table
|
||||||
className="c0"
|
className="c0"
|
||||||
@ -1533,25 +1537,26 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
|
|||||||
/>
|
/>
|
||||||
</table>
|
</table>
|
||||||
<div
|
<div
|
||||||
className="c7"
|
className="c7 c8"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
name="card"
|
name="card"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c9"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c9"
|
className="c10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c11"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
alt="Sad Animal"
|
||||||
src="no-packages.svg"
|
src="no-packages.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3
|
||||||
className="c11 c12"
|
className="c12 c13"
|
||||||
>
|
>
|
||||||
Sorry, but we weren’t able to find any packages with that filter
|
Sorry, but we weren’t able to find any packages with that filter
|
||||||
</h3>
|
</h3>
|
||||||
@ -1562,15 +1567,15 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
||||||
.c10 {
|
.c11 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c9 {
|
||||||
padding: 2.25rem;
|
padding: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c10 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -1606,7 +1611,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
|||||||
margin-left: 0.5625rem;
|
margin-left: 0.5625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c13 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
@ -1614,20 +1619,20 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 + p,
|
.c13 + p,
|
||||||
.c12 + small,
|
.c13 + small,
|
||||||
.c12 + h1,
|
.c13 + h1,
|
||||||
.c12 + h2,
|
.c13 + h2,
|
||||||
.c12 + label,
|
.c13 + label,
|
||||||
.c12 + h3,
|
.c13 + h3,
|
||||||
.c12 + h4,
|
.c13 + h4,
|
||||||
.c12 + h5,
|
.c13 + h5,
|
||||||
.c12 + div,
|
.c13 + div,
|
||||||
.c12 + span {
|
.c13 + span {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c8 {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -1763,10 +1768,14 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
|||||||
border-bottom-width: 0.0625rem;
|
border-bottom-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c12 {
|
||||||
color: rgb(151,151,151);
|
color: rgb(151,151,151);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c7 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<table
|
<table
|
||||||
className="c0"
|
className="c0"
|
||||||
@ -1857,25 +1866,26 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
|||||||
/>
|
/>
|
||||||
</table>
|
</table>
|
||||||
<div
|
<div
|
||||||
className="c7"
|
className="c7 c8"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
name="card"
|
name="card"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c9"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c9"
|
className="c10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c11"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
alt="Sad Animal"
|
||||||
src="no-packages.svg"
|
src="no-packages.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3
|
||||||
className="c11 c12"
|
className="c12 c13"
|
||||||
>
|
>
|
||||||
Sorry, but we weren’t able to find any packages with that filter
|
Sorry, but we weren’t able to find any packages with that filter
|
||||||
</h3>
|
</h3>
|
||||||
@ -1886,15 +1896,15 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <Packages loading /> without throwing 1`] = `
|
exports[`renders <Packages loading /> without throwing 1`] = `
|
||||||
.c10 {
|
.c11 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c9 {
|
||||||
padding: 2.25rem;
|
padding: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c10 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -1930,7 +1940,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
|
|||||||
margin-left: 0.5625rem;
|
margin-left: 0.5625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c13 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
@ -1938,20 +1948,20 @@ exports[`renders <Packages loading /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 + p,
|
.c13 + p,
|
||||||
.c12 + small,
|
.c13 + small,
|
||||||
.c12 + h1,
|
.c13 + h1,
|
||||||
.c12 + h2,
|
.c13 + h2,
|
||||||
.c12 + label,
|
.c13 + label,
|
||||||
.c12 + h3,
|
.c13 + h3,
|
||||||
.c12 + h4,
|
.c13 + h4,
|
||||||
.c12 + h5,
|
.c13 + h5,
|
||||||
.c12 + div,
|
.c13 + div,
|
||||||
.c12 + span {
|
.c13 + span {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c8 {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -2087,10 +2097,14 @@ exports[`renders <Packages loading /> without throwing 1`] = `
|
|||||||
border-bottom-width: 0.0625rem;
|
border-bottom-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c12 {
|
||||||
color: rgb(151,151,151);
|
color: rgb(151,151,151);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c7 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<table
|
<table
|
||||||
className="c0"
|
className="c0"
|
||||||
@ -2181,25 +2195,26 @@ exports[`renders <Packages loading /> without throwing 1`] = `
|
|||||||
/>
|
/>
|
||||||
</table>
|
</table>
|
||||||
<div
|
<div
|
||||||
className="c7"
|
className="c7 c8"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
name="card"
|
name="card"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c9"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c9"
|
className="c10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c11"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
alt="Sad Animal"
|
||||||
src="no-packages.svg"
|
src="no-packages.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3
|
||||||
className="c11 c12"
|
className="c12 c13"
|
||||||
>
|
>
|
||||||
Sorry, but we weren’t able to find any packages with that filter
|
Sorry, but we weren’t able to find any packages with that filter
|
||||||
</h3>
|
</h3>
|
||||||
@ -2422,15 +2437,15 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <Packages pristine={false} /> without throwing 1`] = `
|
exports[`renders <Packages pristine={false} /> without throwing 1`] = `
|
||||||
.c10 {
|
.c11 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c9 {
|
||||||
padding: 2.25rem;
|
padding: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c10 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -2466,7 +2481,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
|
|||||||
margin-left: 0.5625rem;
|
margin-left: 0.5625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c13 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
@ -2474,20 +2489,20 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 + p,
|
.c13 + p,
|
||||||
.c12 + small,
|
.c13 + small,
|
||||||
.c12 + h1,
|
.c13 + h1,
|
||||||
.c12 + h2,
|
.c13 + h2,
|
||||||
.c12 + label,
|
.c13 + label,
|
||||||
.c12 + h3,
|
.c13 + h3,
|
||||||
.c12 + h4,
|
.c13 + h4,
|
||||||
.c12 + h5,
|
.c13 + h5,
|
||||||
.c12 + div,
|
.c13 + div,
|
||||||
.c12 + span {
|
.c13 + span {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c8 {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -2623,10 +2638,14 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
|
|||||||
border-bottom-width: 0.0625rem;
|
border-bottom-width: 0.0625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c12 {
|
||||||
color: rgb(151,151,151);
|
color: rgb(151,151,151);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c7 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<table
|
<table
|
||||||
className="c0"
|
className="c0"
|
||||||
@ -2717,25 +2736,26 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
|
|||||||
/>
|
/>
|
||||||
</table>
|
</table>
|
||||||
<div
|
<div
|
||||||
className="c7"
|
className="c7 c8"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
name="card"
|
name="card"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c9"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c9"
|
className="c10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c11"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
alt="Sad Animal"
|
||||||
src="no-packages.svg"
|
src="no-packages.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3
|
||||||
className="c11 c12"
|
className="c12 c13"
|
||||||
>
|
>
|
||||||
Sorry, but we weren’t able to find any packages with that filter
|
Sorry, but we weren’t able to find any packages with that filter
|
||||||
</h3>
|
</h3>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
/* 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';
|
||||||
@ -71,14 +72,10 @@ export const Collapsed = ({ name, fabric, ...network }) => (
|
|||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>
|
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
|
||||||
{fabric ? <FabricIcon /> : <DataCenterIcon />}
|
|
||||||
</Margin>
|
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<P>
|
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
|
||||||
{fabric ? 'Fabric network' : 'Data center network'}
|
|
||||||
</P>
|
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Flex>
|
</Flex>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
@ -146,14 +143,10 @@ export const Expanded = ({
|
|||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>
|
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
|
||||||
{fabric ? <FabricIcon /> : <DataCenterIcon />}
|
|
||||||
</Margin>
|
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<P>
|
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
|
||||||
{fabric ? 'Fabric network' : 'Data center network'}
|
|
||||||
</P>
|
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Flex>
|
</Flex>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
@ -162,11 +155,7 @@ export const Expanded = ({
|
|||||||
{fabric ? (
|
{fabric ? (
|
||||||
<Margin top={3}>
|
<Margin top={3}>
|
||||||
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
|
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
|
||||||
<CardHeader
|
<CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
|
||||||
secondary={false}
|
|
||||||
transparent={false}
|
|
||||||
onClick={onInfoClick}
|
|
||||||
>
|
|
||||||
<CardHeaderMeta>
|
<CardHeaderMeta>
|
||||||
<Padding left={3} right={3}>
|
<Padding left={3} right={3}>
|
||||||
<P>Network information</P>
|
<P>Network information</P>
|
||||||
@ -185,11 +174,7 @@ export const Expanded = ({
|
|||||||
<Margin bottom={3}>
|
<Margin bottom={3}>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<Margin right={1}>
|
<Margin right={1}>
|
||||||
<DotIcon
|
<DotIcon size={remcalc(12)} color="green" />
|
||||||
width={remcalc(12)}
|
|
||||||
height={remcalc(12)}
|
|
||||||
color="green"
|
|
||||||
/>
|
|
||||||
</Margin>
|
</Margin>
|
||||||
<Small bold noMargin>
|
<Small bold noMargin>
|
||||||
Outbound internet access enabled
|
Outbound internet access enabled
|
||||||
@ -201,28 +186,16 @@ export const Expanded = ({
|
|||||||
<FlexItem>
|
<FlexItem>
|
||||||
<FormGroup name="id">
|
<FormGroup name="id">
|
||||||
<FormLabel>ID</FormLabel>
|
<FormLabel>ID</FormLabel>
|
||||||
<Margin top={0.5}>
|
<Margin top={0.5} bottom={2}>
|
||||||
<Input
|
<Input onBlur={null} big monospace type="text" value={id} />
|
||||||
onBlur={null}
|
|
||||||
big
|
|
||||||
monospace
|
|
||||||
type="text"
|
|
||||||
value={id}
|
|
||||||
/>
|
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<FormGroup name="subnet">
|
<FormGroup name="subnet">
|
||||||
<FormLabel>Subnet</FormLabel>
|
<FormLabel>Subnet</FormLabel>
|
||||||
<Margin top={0.5}>
|
<Margin top={0.5} bottom={2}>
|
||||||
<Input
|
<Input onBlur={null} big monospace type="text" value={subnet} />
|
||||||
onBlur={null}
|
|
||||||
big
|
|
||||||
monospace
|
|
||||||
type="text"
|
|
||||||
value={subnet}
|
|
||||||
/>
|
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
|
@ -10,15 +10,19 @@ const NoPackagesTitle = styled(H3)`
|
|||||||
color: ${props => props.theme.greyDark};
|
color: ${props => props.theme.greyDark};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const FullWidthCard = styled(Card)`
|
||||||
|
width: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
export default ({ children }) => (
|
export default ({ children }) => (
|
||||||
<Card>
|
<FullWidthCard>
|
||||||
<Padding all={6}>
|
<Padding all={6}>
|
||||||
<Flex alignCenter justifyCenter column>
|
<Flex alignCenter justifyCenter column>
|
||||||
<Margin bottom={2}>
|
<Margin bottom={2}>
|
||||||
<img src={NoPackagesImage} />
|
<img src={NoPackagesImage} alt="Sad Animal"/>
|
||||||
</Margin>
|
</Margin>
|
||||||
<NoPackagesTitle>{children}</NoPackagesTitle>
|
<NoPackagesTitle>{children}</NoPackagesTitle>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Padding>
|
</Padding>
|
||||||
</Card>
|
</FullWidthCard>
|
||||||
);
|
);
|
||||||
|
@ -1,35 +1,26 @@
|
|||||||
|
/* 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';
|
||||||
import Flex, { FlexItem } from 'styled-flex-component';
|
import Flex, { FlexItem } from 'styled-flex-component';
|
||||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||||
|
|
||||||
import {
|
import { H3, FormGroup, FormLabel, Toggle, TagList, P, Strong, Card } from 'joyent-ui-toolkit';
|
||||||
H3,
|
|
||||||
FormGroup,
|
|
||||||
FormLabel,
|
|
||||||
Toggle,
|
|
||||||
TagList,
|
|
||||||
P,
|
|
||||||
Strong,
|
|
||||||
Card
|
|
||||||
} from 'joyent-ui-toolkit';
|
|
||||||
|
|
||||||
import Tag from '@components/tags';
|
import Tag from '@components/tags';
|
||||||
|
|
||||||
const capitalizeFirstLetter = string =>
|
const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
|
||||||
string.charAt(0).toUpperCase() + string.slice(1);
|
|
||||||
|
|
||||||
const Wildcards = {
|
const Wildcards = {
|
||||||
vmall: 'All VMs in DC',
|
vmall: 'All VMs in DC',
|
||||||
any: 'Any'
|
any: 'Any'
|
||||||
};
|
};
|
||||||
|
|
||||||
const parsePartial = (p, index) => {
|
const parsePartial = (p, index, style) => {
|
||||||
if (p[0] === 'wildcard') {
|
if (p[0] === 'wildcard') {
|
||||||
return (
|
return (
|
||||||
<Margin key={index} top={0.5} bottom={0.5}>
|
<Margin key={index} top={0.5} bottom={0.5}>
|
||||||
<P>{Wildcards[p[1]]}</P>
|
<P style={style}>{Wildcards[p[1]]}</P>
|
||||||
</Margin>
|
</Margin>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -41,7 +32,7 @@ const parsePartial = (p, index) => {
|
|||||||
return (
|
return (
|
||||||
<Margin left={0.5}>
|
<Margin left={0.5}>
|
||||||
<TagList>
|
<TagList>
|
||||||
<Tag norMargin key={index} name={name} value={value} />
|
<Tag style={style} norMargin key={index} name={name} value={value} />
|
||||||
</TagList>
|
</TagList>
|
||||||
</Margin>
|
</Margin>
|
||||||
);
|
);
|
||||||
@ -51,9 +42,12 @@ const parsePartial = (p, index) => {
|
|||||||
const Rule = ({ enabled, rule_obj }) => {
|
const Rule = ({ enabled, rule_obj }) => {
|
||||||
const { action, protocol } = rule_obj;
|
const { action, protocol } = rule_obj;
|
||||||
|
|
||||||
const froms = rule_obj.from.map(parsePartial);
|
const style = {
|
||||||
const tos = rule_obj.to.map(parsePartial);
|
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 (
|
return (
|
||||||
<Card disabled={!enabled}>
|
<Card disabled={!enabled}>
|
||||||
<Padding left={3} right={3} top={1.5} bottom={1.5}>
|
<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>
|
<Flex justifyStart alignCenter contentStretch full>
|
||||||
<Margin right={0.5}>
|
<Margin right={0.5}>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Strong>From: </Strong>
|
<Strong style={style}>From: </Strong>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
<Flex alignCenter>{froms}</Flex>
|
<Flex alignCenter>{froms}</Flex>
|
||||||
@ -72,7 +66,7 @@ const Rule = ({ enabled, rule_obj }) => {
|
|||||||
<Flex justifyStart alignCenter contentStretch full>
|
<Flex justifyStart alignCenter contentStretch full>
|
||||||
<Margin right={0.5}>
|
<Margin right={0.5}>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Strong>To: </Strong>
|
<Strong style={style}>To: </Strong>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
<Flex alignCenter>{tos}</Flex>
|
<Flex alignCenter>{tos}</Flex>
|
||||||
@ -82,12 +76,12 @@ const Rule = ({ enabled, rule_obj }) => {
|
|||||||
<Flex justifyStart alignCenter contentStretch full>
|
<Flex justifyStart alignCenter contentStretch full>
|
||||||
<Margin right={0.5}>
|
<Margin right={0.5}>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Strong>Protocol: </Strong>
|
<Strong style={style}>Protocol: </Strong>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<Margin top={0.5} bottom={0.5}>
|
<Margin top={0.5} bottom={0.5}>
|
||||||
<P>{protocol.name}</P>
|
<P style={style}>{protocol.name}</P>
|
||||||
</Margin>
|
</Margin>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
@ -96,12 +90,12 @@ const Rule = ({ enabled, rule_obj }) => {
|
|||||||
<Flex justifyStart alignCenter contentStretch full>
|
<Flex justifyStart alignCenter contentStretch full>
|
||||||
<Margin right={0.5}>
|
<Margin right={0.5}>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Strong>Ports: </Strong>
|
<Strong style={style}>Ports: </Strong>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<Margin top={0.5} bottom={0.5}>
|
<Margin top={0.5} bottom={0.5}>
|
||||||
<P>{protocol.targets.join(';')}</P>
|
<P style={style}>{protocol.targets.join(';')}</P>
|
||||||
</Margin>
|
</Margin>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
@ -110,12 +104,12 @@ const Rule = ({ enabled, rule_obj }) => {
|
|||||||
<Flex justifyStart alignCenter contentStretch full>
|
<Flex justifyStart alignCenter contentStretch full>
|
||||||
<Margin right={0.5}>
|
<Margin right={0.5}>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Strong>Action: </Strong>
|
<Strong style={style}>Action: </Strong>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<Margin top={0.5} bottom={0.5}>
|
<Margin top={0.5} bottom={0.5}>
|
||||||
<P>{capitalizeFirstLetter(action)}</P>
|
<P style={style}>{capitalizeFirstLetter(action)}</P>
|
||||||
</Margin>
|
</Margin>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 35 KiB |