feat(instances): adds cli-details UI

This commit is contained in:
johnytiago 2018-05-25 16:27:05 +01:00 committed by Sérgio Ramos
parent a1ff036db1
commit 078513f603
41 changed files with 2058 additions and 1874 deletions

View File

@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
.c6 { .c6 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c6:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c1 { .c1 {
@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
position: relative; position: relative;
} }
.c5.active:after { .c5:after {
width: 100%; width: 100%;
height: 0.0625rem; height: 0.0625rem;
background: rgb(73,73,73); background: rgb(216,216,216);
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
z-index: 2; z-index: 2;
} }
.c5.active:after {
background: rgb(73,73,73);
}
.c5.active {
font-weight: 600;
}
.c3 { .c3 {
background: rgb(250,250,250); background: rgb(250,250,250);
list-style-type: none; list-style-type: none;

View File

@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
.c21 { .c21 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c21:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c11 { .c11 {
@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
.c21 { .c21 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c21:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c11 { .c11 {
@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
.c21 { .c21 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c21:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c12 { .c12 {
@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
.c21 { .c21 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c21:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c12 { .c12 {
@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
.c21 { .c21 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c21:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c11 { .c11 {
@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
.c21 { .c21 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c21:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c11 { .c11 {
@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
.c11 { .c11 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c11:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c12 { .c12 {
@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
.c11 { .c11 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c11:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c12 { .c12 {
@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
.c11 { .c11 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c11:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c12 { .c12 {
@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
.c11 { .c11 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c11:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c13 { .c13 {

View File

@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
.c23 { .c23 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 6rem; height: 12rem;
min-height: 6rem; min-height: 12rem;
padding: 0.8125rem 0.75rem; padding: 0.8125rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
.c23 { .c23 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 6rem; height: 12rem;
min-height: 6rem; min-height: 12rem;
padding: 0.8125rem 0.75rem; padding: 0.8125rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;

View File

@ -497,7 +497,7 @@ Array [
.c6 { .c6 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -2401,7 +2401,7 @@ Array [
.c6 { .c6 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -3289,7 +3289,7 @@ Array [
.c6 { .c6 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -4177,7 +4177,7 @@ Array [
.c6 { .c6 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -5065,7 +5065,7 @@ Array [
.c6 { .c6 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -5953,7 +5953,7 @@ Array [
.c6 { .c6 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }

View File

@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
.c36 { .c36 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c36:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 { .c29 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c35 { .c35 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 { .c29 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c35 { .c35 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 { .c29 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c39 { .c39 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c39:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c32 { .c32 {
fill: rgb(59,70,204); fill: rgb(59,70,204);
stroke: rgb(59,70,204); stroke: rgb(59,70,204);
@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c35 { .c35 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 { .c29 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c35 { .c35 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 { .c29 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c36 { .c36 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c36:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 { .c29 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c9 { .c9 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;

View File

@ -24,7 +24,7 @@ export default ({
onReboot, onReboot,
onRemove onRemove
}) => ( }) => (
<StickyFooter fill="#FAFAFA" fixed bottom> <StickyFooter fill="disabled" fixed bottom>
<Row between="xs" middle="xs"> <Row between="xs" middle="xs">
<Col xs="7"> <Col xs="7">
<Flex> <Flex>

View File

@ -18,6 +18,7 @@ export const Forms = {
}; };
export const Values = { export const Values = {
IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN', IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN', IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY', IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',

View File

@ -1,15 +1,14 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { Margin, Padding } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import { graphql, compose } from 'react-apollo'; import { graphql, compose } from 'react-apollo';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { SubmissionError, destroy } from 'redux-form'; import { SubmissionError, destroy } from 'redux-form';
import { set, destroyAll } from 'react-redux-values'; import { set, destroyAll } from 'react-redux-values';
import Flex, { FlexItem } from 'styled-flex-component';
import intercept from 'apr-intercept'; import intercept from 'apr-intercept';
import get from 'lodash.get'; import get from 'lodash.get';
import styled from 'styled-components';
import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import { import {
Name, Name,
@ -22,14 +21,20 @@ import {
Firewall, Firewall,
CNS, CNS,
Affinity, Affinity,
generatePayload generatePayload,
Footer
} from 'joyent-ui-instance-steps'; } from 'joyent-ui-instance-steps';
import { Forms } from '@root/constants'; import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
import { Forms, Values } from '@root/constants';
import parseError from '@state/parse-error'; import parseError from '@state/parse-error';
import CreateInstanceMutation from '@graphql/create-instance.gql'; import CreateInstanceMutation from '@graphql/create-instance.gql';
const { IC_F } = Forms; const { IC_F } = Forms;
const { IC_SHOW_CLI } = Values;
const names = { const names = {
name: 'IC_NAME', name: 'IC_NAME',
image: 'IC_IMAGE', image: 'IC_IMAGE',
@ -86,7 +91,16 @@ class CreateInstance extends Component {
}; };
render() { render() {
const { match, steps, handleDefocus, handleSubmit, disabled } = this.props; const {
match,
steps,
showCli = false,
handleDefocus,
handleToggleShowCli,
handleSubmit,
disabled
} = this.props;
const { params } = match; const { params } = match;
const { step } = params; const { step } = params;
@ -102,6 +116,16 @@ class CreateInstance extends Component {
affinity affinity
} = steps; } = steps;
const Mask = styled.div`
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
position: absolute;
display: ${showCli ? 'block' : 'none'};
`;
return ( return (
<ViewContainer main> <ViewContainer main>
<Margin top="5"> <Margin top="5">
@ -218,6 +242,8 @@ class CreateInstance extends Component {
</Margin> </Margin>
</ResourceSteps> </ResourceSteps>
<Margin bottom="5"> <Margin bottom="5">
<Flex alignCenter>
<FlexItem>
<ReduxForm form={IC_F} onSubmit={handleSubmit}> <ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => ( {({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@ -230,8 +256,29 @@ class CreateInstance extends Component {
</form> </form>
)} )}
</ReduxForm> </ReduxForm>
</FlexItem>
<FlexItem>
<Margin left={3}>
<Anchor
disabled={disabled || !this.isFormValid()}
onClick={() => handleToggleShowCli(!showCli)}
>
View CLI Details
</Anchor>
</Margin>
</FlexItem>
</Flex>
</Margin> </Margin>
</Padding> </Padding>
{showCli ? (
<Fragment>
<Footer
getData={() => generatePayload(steps)}
onCloseCli={() => handleToggleShowCli(!showCli)}
/>
<Mask onClick={() => handleToggleShowCli(!showCli)} />
</Fragment>
) : null}
</ViewContainer> </ViewContainer>
); );
} }
@ -254,6 +301,7 @@ export default compose(
}; };
const error = get(form, `${IC_F}.error`, null); const error = get(form, `${IC_F}.error`, null);
const showCli = Boolean(values[IC_SHOW_CLI]);
// Maybe re-use saved to only write the rule once // Maybe re-use saved to only write the rule once
const disabled = !( const disabled = !(
@ -270,6 +318,7 @@ export default compose(
return { return {
disabled, disabled,
showCli,
forms: Object.keys(form), // improve this forms: Object.keys(form), // improve this
error, error,
steps steps
@ -277,10 +326,12 @@ export default compose(
}), }),
connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => { connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
return { return {
handleToggleShowCli: value => {
return dispatch(set({ name: IC_SHOW_CLI, value }));
},
handleDefocus: name => value => { handleDefocus: name => value => {
return dispatch(set({ name: names[name], value })); return dispatch(set({ name: names[name], value }));
}, },
handleSubmit: async () => { handleSubmit: async () => {
const [err, res] = await intercept( const [err, res] = await intercept(
createInstance({ createInstance({

View File

@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
.c33 { .c33 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c33:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c13 { .c13 {
@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c33 { .c33 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c33:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c58 { .c58 {
@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
-webkit-box-align: stretch; -webkit-box-align: stretch;
-ms-flex-align: stretch; -ms-flex-align: stretch;
align-items: stretch; align-items: stretch;
background-color: rgb(250,250,250);
border-top: 0.0625rem solid rgb(216,216,216); border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem; line-height: 1.5625rem;
height: 4.375rem; height: 4.375rem;
max-height: 4.375rem;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
left: 0; left: 0;
@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</form> </form>
<div <div
className="c51" className="c51"
fill="#FAFAFA" fill="disabled"
> >
<div <div
className="c52 c53 c1" className="c52 c53 c1"
fill="disabled"
> >
<div <div
className="c54" className="c54"
@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c33 { .c33 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c33:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c58 { .c58 {
@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
-webkit-box-align: stretch; -webkit-box-align: stretch;
-ms-flex-align: stretch; -ms-flex-align: stretch;
align-items: stretch; align-items: stretch;
background-color: rgb(250,250,250);
border-top: 0.0625rem solid rgb(216,216,216); border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem; line-height: 1.5625rem;
height: 4.375rem; height: 4.375rem;
max-height: 4.375rem;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
left: 0; left: 0;
@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</form> </form>
<div <div
className="c51" className="c51"
fill="#FAFAFA" fill="disabled"
> >
<div <div
className="c52 c53 c1" className="c52 c53 c1"
fill="disabled"
> >
<div <div
className="c54" className="c54"
@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c33 { .c33 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c33:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c58 { .c58 {
@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
-webkit-box-align: stretch; -webkit-box-align: stretch;
-ms-flex-align: stretch; -ms-flex-align: stretch;
align-items: stretch; align-items: stretch;
background-color: rgb(250,250,250);
border-top: 0.0625rem solid rgb(216,216,216); border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem; line-height: 1.5625rem;
height: 4.375rem; height: 4.375rem;
max-height: 4.375rem;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
left: 0; left: 0;
@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</form> </form>
<div <div
className="c51" className="c51"
fill="#FAFAFA" fill="disabled"
> >
<div <div
className="c52 c53 c1" className="c52 c53 c1"
fill="disabled"
> >
<div <div
className="c54" className="c54"
@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
.c3 { .c3 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }

View File

@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c39 { .c39 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 6rem; height: 12rem;
min-height: 6rem; min-height: 12rem;
padding: 0.8125rem 0.75rem; padding: 0.8125rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
.c25 { .c25 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c39 { .c39 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 6rem; height: 12rem;
min-height: 6rem; min-height: 12rem;
padding: 0.8125rem 0.75rem; padding: 0.8125rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;

View File

@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
.c7 { .c7 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
.c7 { .c7 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
.c7 { .c7 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
.c7 { .c7 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }

View File

@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c37 { .c37 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c37:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c31 { .c31 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c11 { .c11 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c37 { .c37 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c37:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c31 { .c31 {
min-width: 7.5rem; min-width: 7.5rem;
} }
@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c11 { .c11 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;

View File

@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
.c47 { .c47 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
.c49 { .c49 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
.c52 { .c52 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
.c19 { .c19 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }

View File

@ -26,6 +26,7 @@
"apr-reduce": "^3.0.3", "apr-reduce": "^3.0.3",
"constant-case": "^2.0.0", "constant-case": "^2.0.0",
"declarative-redux-form": "^2.0.8", "declarative-redux-form": "^2.0.8",
"force-array": "^3.1.0",
"joyent-ui-resource-step": "^1.0.0", "joyent-ui-resource-step": "^1.0.0",
"joyent-ui-resource-widgets": "^1.0.0", "joyent-ui-resource-widgets": "^1.0.0",
"joyent-ui-toolkit": "^6.0.0", "joyent-ui-toolkit": "^6.0.0",

View File

@ -0,0 +1,131 @@
const ForceArray = require('force-array');
export const generateTerraform = data => {
const {
name,
package: pkg,
image,
affinity,
metadata: _metadata,
tags: _tags,
firewall_enabled,
networks
} = formatData(data);
const cns = ForceArray(
(_tags.filter(({ name }) => name === 'triton.cns.services').pop() || {})
.value
);
const userScript = (
_metadata.filter(({ name }) => name === 'user-script').pop() || {}
).value;
const tags = _tags.filter(({ name }) => !/^triton./.test(name));
const metadata = _metadata.filter(({ name }) => name !== 'user-script');
return (
`resource "triton_machine" ${name} {
name = "${name}"
package = "${pkg}"
image = "${image}"
networks = ["${networks.join('","')}"]
firewall_enabled = ${Boolean(firewall_enabled)}` +
`${
affinity
? `
affinity = ["${affinity}"]`
: ''
}` +
`${
userScript && userScript.length
? `\n
user_script = "${userScript}"`
: ''
}` +
`${
cns.length
? `\n
cns {
services = ["${cns.join('", "')}"]
}`
: ''
}` +
`${
tags.length
? `\n
tags {
${tags.map(e => `${e.name} = "${e.value}"`).join('\n ')}
}`
: ''
}` +
`${
metadata.length
? `\n
metadata {
${metadata.map(e => `${e.name} = "${e.value}"`).join('\n ')}
}`
: ''
}` +
`\n}`
);
};
export const generateCLI = data => {
const {
metadata,
tags,
firewall_enabled,
networks,
name,
package: pkg,
image
} = data;
const { affinity } = formatData(data);
const _networks = `--network="${networks.join('","')}"`;
const _affinity = affinity ? `--affinity="${affinity}"` : '';
const _tags = tags.length
? `--tag=${JSON.stringify(
tags.reduce((acc, t) => Object.assign(acc, { [t.name]: t.value }))
)}`
: '';
const _metadata = metadata.length
? `--metadata=${JSON.stringify(
metadata.reduce(
(acc, m) => Object.assign(acc, { [m.name]: m.value }),
{}
)
)}`
: '';
const _firewall = firewall_enabled ? `--firewall` : '';
return `triton instance create -w --name=${name} ${_networks} ${_affinity} ${_tags} ${_metadata} ${_firewall} ${image} ${pkg}`;
};
const formatData = ({ affinity, metadata = [], tags = [], ...rest }) => ({
affinity:
affinity &&
affinity.length &&
`${affinity[0].key}${getAffinityOp(affinity[0].type)}${affinity[0].value}`,
tags: tags.filter(
e => e.name !== 'triton.cns.services' || e.name !== 'triton.cns.disable'
),
metadata: metadata.filter(e => e.name !== 'user-script'),
...rest
});
const getAffinityOp = type => {
switch (type.toUpperCase()) {
case 'MUST_EQUAL':
return '==';
case 'MUST_NOT_EQUAL':
return '!=';
case 'SHOULD_EQUAL':
return '==~';
case 'SHOULD_NOT_EQUAL':
return '!=~';
}
};

View File

@ -0,0 +1,141 @@
import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin, Padding } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
Anchor,
CloseIcon as Close,
H3,
Textarea,
Input,
P,
SectionList,
SectionListAnchor,
SectionListItem,
StickyFooter,
ViewContainer
} from 'joyent-ui-toolkit';
import { generateTerraform, generateCLI } from './cli-details';
export default class CLIFooter extends React.Component {
state = {
active: 'triton'
};
render() {
const { active } = this.state;
const { getData, onCloseCli } = this.props;
return (
<StickyFooter borderless auto fixed bottom fill="#494949">
<div>
<Padding vertical="8">
<CloseIcon onClick={onCloseCli} />
<Row>
<Col xs="12" sm="8">
<Margin bottom="2">
<Flex>
<H3 white>CLI details</H3>
</Flex>
</Margin>
<Margin bottom="5">
<P white>
Below you can find the command line instructions to deploy
this exact instance, or a copy of it, directly from either
the Triton CLI or Terraform.
</P>
</Margin>
</Col>
</Row>
<Row>
<Col sm="12">
<ViewContainer plain>
<Margin bottom="3">
<SectionList clear>
<SectionListItem>
<SectionListAnchor
white
active={active === 'triton'}
onClick={() => this.setState({ active: 'triton' })}
>
Triton CLI
</SectionListAnchor>
</SectionListItem>
<SectionListItem>
<SectionListAnchor
white
active={active === 'terraform'}
onClick={() => this.setState({ active: 'terraform' })}
>
Terraform
</SectionListAnchor>
</SectionListItem>
</SectionList>
</Margin>
</ViewContainer>
<Margin bottom="3">
{active === 'triton' ? (
<Input
readOnly
borderless
monospace
fluid
white
dark
resize
rows="15"
value={generateCLI(getData())}
/>
) : (
<Textarea
readOnly
borderless
monospace
fluid
white
dark
resize
value={generateTerraform(getData())}
/>
)}
</Margin>
<Margin>
<Anchor white>{`Learn how to configure ${
active === 'triton' ? 'Triton CLI' : 'Terraform'
}`}</Anchor>
</Margin>
</Col>
</Row>
</Padding>
</div>
</StickyFooter>
);
}
}
const Frame = styled.div`
border-radius: 50%;
border: ${remcalc(1)} solid ${props => props.theme.white};
height: ${remcalc(30)};
width: ${remcalc(30)};
background: none;
cursor: pointer;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
float: right;
`;
const CloseIcon = props => (
<Frame {...props}>
<Margin all="1">
<Close fill="white" />
</Margin>
</Frame>
);

View File

@ -66,7 +66,7 @@ export const generatePayload = steps => {
}); });
if (cns.serviceNames.length) { if (cns.serviceNames.length) {
metadata.push({ tags.push({
name: 'triton.cns.services', name: 'triton.cns.services',
value: cns.serviceNames.join(',') value: cns.serviceNames.join(',')
}); });
@ -94,3 +94,4 @@ export { default as UserScript } from './user-script';
export { default as Firewall, Preview as FirewallPreview } from './firewall'; export { default as Firewall, Preview as FirewallPreview } from './firewall';
export { default as CNS, Preview as CnsPreview } from './cns'; export { default as CNS, Preview as CnsPreview } from './cns';
export { default as Affinity } from './affinity'; export { default as Affinity } from './affinity';
export { default as Footer } from './footer';

View File

@ -45,10 +45,6 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
width: ${remcalc(16)}; width: ${remcalc(16)};
`; `;
const Form = styled.form`
margin-bottom: 0;
`;
const NameContainer = ({ const NameContainer = ({
history, history,
randomizable = false, randomizable = false,
@ -86,7 +82,7 @@ const NameContainer = ({
keepDirtyOnReinitialize keepDirtyOnReinitialize
> >
{({ invalid }) => ( {({ invalid }) => (
<Form onSubmit={() => history.push(next)}> <form onSubmit={() => history.push(next)}>
<FormGroup id="input-name" name="name" fluid field={Field}> <FormGroup id="input-name" name="name" fluid field={Field}>
<FormLabel>Instance name</FormLabel> <FormLabel>Instance name</FormLabel>
<Margin top="0.5"> <Margin top="0.5">
@ -159,7 +155,7 @@ const NameContainer = ({
Next Next
</Button> </Button>
</Margin> </Margin>
</Form> </form>
)} )}
</ReduxForm> </ReduxForm>
</Margin> </Margin>

View File

@ -9,8 +9,7 @@ import get from 'lodash.get';
import forceArray from 'force-array'; import forceArray from 'force-array';
import includes from 'lodash.includes'; import includes from 'lodash.includes';
import find from 'lodash.find'; import find from 'lodash.find';
import styled, { withTheme } from 'styled-components'; import { withTheme } from 'styled-components';
import remcalc from 'remcalc';
import Step, { import Step, {
Header as StepHeader, Header as StepHeader,

View File

@ -223,4 +223,4 @@ export default compose(
]); ]);
} }
})) }))
)(withTheme(({ ...rest }) => <Metadata {...rest} />)); )(withTheme(({ ...rest }) => <TagsContainer {...rest} />));

View File

@ -58,13 +58,13 @@ export const Saved = ({ inverted, children }) => {
}; };
export const Error = ({ inverted = false, noLabel = false, children }) => { export const Error = ({ inverted = false, noLabel = false, children }) => {
const fill = inverted ? 'red' : 'white'; const statusFill = inverted ? 'red' : 'white';
const iconFill = inverted ? 'white' : 'redDark'; const iconFill = inverted ? 'white' : 'redDark';
return ( return (
<StatusIcon <StatusIcon
border="redDark" border={'redDark'}
fill={fill} fill={statusFill}
Icon={() => <CloseIcon fill={iconFill} />} Icon={() => <CloseIcon fill={iconFill} />}
> >
{noLabel ? null : ( {noLabel ? null : (

View File

@ -5,15 +5,15 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
.c8 { .c7 {
margin-top: 0.1875rem; margin-top: 0.1875rem;
} }
.c10 { .c9 {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
.c2 { .c1 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -40,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
align-items: flex-end; align-items: flex-end;
} }
.c4 { .c3 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -60,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
align-content: stretch; align-content: stretch;
} }
.c3 { .c2 {
-webkit-order: 0; -webkit-order: 0;
-ms-flex-order: 0; -ms-flex-order: 0;
order: 0; order: 0;
@ -77,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
display: block; display: block;
} }
.c14 { .c13 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -89,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
appearance: button; appearance: button;
} }
.c14::-moz-focus-inner, .c13::-moz-focus-inner,
.c14[type='button']::-moz-focus-inner, .c13[type='button']::-moz-focus-inner,
.c14[type='reset']::-moz-focus-inner, .c13[type='reset']::-moz-focus-inner,
.c14[type='submit']::-moz-focus-inner { .c13[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c14:-moz-focusring, .c13:-moz-focusring,
.c14[type='button']:-moz-focusring, .c13[type='button']:-moz-focusring,
.c14[type='reset']:-moz-focusring, .c13[type='reset']:-moz-focusring,
.c14[type='submit']:-moz-focusring { .c13[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c13 { .c12 {
min-width: 7.5rem; min-width: 7.5rem;
} }
.c12 { .c11 {
display: inline-block; display: inline-block;
} }
.c11 { .c10 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
-webkit-box-pack: center; -webkit-box-pack: center;
@ -151,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
} }
.c11:focus { .c10:focus {
outline: 0; outline: 0;
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
@ -159,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c11:hover { .c10:hover {
background-color: rgb(72,83,217); background-color: rgb(72,83,217);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c11:active, .c10:active,
.c11:active:hover, .c10:active:hover,
.c11:active:focus { .c10:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
background-color: rgb(45,56,132); background-color: rgb(45,56,132);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c11[disabled] { .c10[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c7 { .c6 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem; line-height: 1.125rem;
font-style: normal; font-style: normal;
@ -188,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
text-align: left; text-align: left;
} }
.c5 { .c4 {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
border: none; border: none;
@ -200,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c9 { .c8 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
@ -222,89 +222,84 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.c9:focus { .c8:focus {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
outline: 0; outline: 0;
} }
.c9::-webkit-input-placeholder { .c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9::-moz-placeholder { .c8::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:-ms-input-placeholder { .c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:invalid { .c8:invalid {
box-shadow: none; box-shadow: none;
} }
.c9:disabled { .c8: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;
} }
.c9:disabled::-webkit-input-placeholder { .c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:disabled::-moz-placeholder { .c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:disabled:-ms-input-placeholder { .c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c6 { .c5 {
font-weight: 600; font-weight: 600;
white-space: pre; white-space: pre;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
.c1 {
margin-bottom: 0;
}
<div <div
className="c0" className="c0"
> >
<form <form
className="c1"
onSubmit={undefined} onSubmit={undefined}
> >
<div <div
className="c2" className="c1"
wrap={true} wrap={true}
>
<div
className="c2"
> >
<div <div
className="c3" className="c3"
> >
<div <div
className="c4" className="c4"
>
<div
className="c5"
name="name" name="name"
role="group" role="group"
style={undefined} style={undefined}
> >
<label <label
className="c6 c7" className="c5 c6"
htmlFor="k" htmlFor="k"
> >
Attach to new CNS service name Attach to new CNS service name
</label> </label>
<div <div
className="c8" className="c7"
> >
<input <input
className="c9" className="c8"
disabled={false} disabled={false}
id="k" id="k"
onBlur={null} onBlur={null}
@ -315,13 +310,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
</div> </div>
</div> </div>
<div <div
className="c3" className="c2"
> >
<div <div
className="c10" className="c9"
> >
<button <button
className="c11 c12 c13 c14" className="c10 c11 c12 c13"
data-ui-button="true" data-ui-button="true"
disabled={undefined} disabled={undefined}
href="" href=""
@ -341,15 +336,15 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
.c8 { .c7 {
margin-top: 0.1875rem; margin-top: 0.1875rem;
} }
.c10 { .c9 {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
.c2 { .c1 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -376,7 +371,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
align-items: flex-end; align-items: flex-end;
} }
.c4 { .c3 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -396,7 +391,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
align-content: stretch; align-content: stretch;
} }
.c3 { .c2 {
-webkit-order: 0; -webkit-order: 0;
-ms-flex-order: 0; -ms-flex-order: 0;
order: 0; order: 0;
@ -413,7 +408,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
display: block; display: block;
} }
.c14 { .c13 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -425,30 +420,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
appearance: button; appearance: button;
} }
.c14::-moz-focus-inner, .c13::-moz-focus-inner,
.c14[type='button']::-moz-focus-inner, .c13[type='button']::-moz-focus-inner,
.c14[type='reset']::-moz-focus-inner, .c13[type='reset']::-moz-focus-inner,
.c14[type='submit']::-moz-focus-inner { .c13[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c14:-moz-focusring, .c13:-moz-focusring,
.c14[type='button']:-moz-focusring, .c13[type='button']:-moz-focusring,
.c14[type='reset']:-moz-focusring, .c13[type='reset']:-moz-focusring,
.c14[type='submit']:-moz-focusring { .c13[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c13 { .c12 {
min-width: 7.5rem; min-width: 7.5rem;
} }
.c12 { .c11 {
display: inline-block; display: inline-block;
} }
.c11 { .c10 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
-webkit-box-pack: center; -webkit-box-pack: center;
@ -487,7 +482,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
} }
.c11:focus { .c10:focus {
outline: 0; outline: 0;
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
@ -495,26 +490,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c11:hover { .c10:hover {
background-color: rgb(72,83,217); background-color: rgb(72,83,217);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c11:active, .c10:active,
.c11:active:hover, .c10:active:hover,
.c11:active:focus { .c10:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
background-color: rgb(45,56,132); background-color: rgb(45,56,132);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c11[disabled] { .c10[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c7 { .c6 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem; line-height: 1.125rem;
font-style: normal; font-style: normal;
@ -524,7 +519,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
text-align: left; text-align: left;
} }
.c5 { .c4 {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
border: none; border: none;
@ -536,7 +531,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c9 { .c8 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 3rem; height: 3rem;
@ -558,89 +553,84 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.c9:focus { .c8:focus {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
outline: 0; outline: 0;
} }
.c9::-webkit-input-placeholder { .c8::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9::-moz-placeholder { .c8::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:-ms-input-placeholder { .c8:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:invalid { .c8:invalid {
box-shadow: none; box-shadow: none;
} }
.c9:disabled { .c8: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;
} }
.c9:disabled::-webkit-input-placeholder { .c8:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:disabled::-moz-placeholder { .c8:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c9:disabled:-ms-input-placeholder { .c8:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c6 { .c5 {
font-weight: 600; font-weight: 600;
white-space: pre; white-space: pre;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
.c1 {
margin-bottom: 0;
}
<div <div
className="c0" className="c0"
> >
<form <form
className="c1"
onSubmit={undefined} onSubmit={undefined}
> >
<div <div
className="c2" className="c1"
wrap={true} wrap={true}
>
<div
className="c2"
> >
<div <div
className="c3" className="c3"
> >
<div <div
className="c4" className="c4"
>
<div
className="c5"
name="name" name="name"
role="group" role="group"
style={undefined} style={undefined}
> >
<label <label
className="c6 c7" className="c5 c6"
htmlFor="l" htmlFor="l"
> >
Attach to new CNS service name Attach to new CNS service name
</label> </label>
<div <div
className="c8" className="c7"
> >
<input <input
className="c9" className="c8"
disabled={false} disabled={false}
id="l" id="l"
onBlur={null} onBlur={null}
@ -651,13 +641,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
</div> </div>
</div> </div>
<div <div
className="c3" className="c2"
> >
<div <div
className="c10" className="c9"
> >
<button <button
className="c11 c12 c13 c14" className="c10 c11 c12 c13"
data-ui-button="true" data-ui-button="true"
disabled={undefined} disabled={undefined}
href="" href=""
@ -692,7 +682,7 @@ exports[`renders <Header/> without throwing 1`] = `
.c2 { .c2 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -944,6 +934,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
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;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -1116,7 +1107,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
.c2 { .c2 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }

View File

@ -5,7 +5,7 @@ Array [
.c0 { .c0 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -30,7 +30,7 @@ Array [
.c0 { .c0 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -351,7 +351,7 @@ Array [
.c0 { .c0 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -376,7 +376,7 @@ Array [
.c0 { .c0 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }
@ -499,12 +499,12 @@ Array [
`; `;
exports[`renders <ToggleFirewallForm /> without throwing 1`] = ` exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
.c10 { .c9 {
margin-right: 0.75rem; margin-right: 0.75rem;
margin-left: 0.75rem; margin-left: 0.75rem;
} }
.c5 { .c4 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -512,39 +512,39 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
overflow: visible; overflow: visible;
} }
.c5[type='checkbox'], .c4[type='checkbox'],
.c5[type='radio'] { .c4[type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
.c5[type='number']::-webkit-inner-spin-button, .c4[type='number']::-webkit-inner-spin-button,
.c5[type='number']::-webkit-outer-spin-button { .c4[type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
.c5[type='search'] { .c4[type='search'] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield; appearance: textfield;
outline-offset: -0.125rem; outline-offset: -0.125rem;
} }
.c5[type='search']::-webkit-search-cancel-button, .c4[type='search']::-webkit-search-cancel-button,
.c5[type='search']::-webkit-search-decoration { .c4[type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
.c5::-webkit-file-upload-button { .c4::-webkit-file-upload-button {
-webkit-appearance: button; -webkit-appearance: button;
-moz-appearance: button; -moz-appearance: button;
appearance: button; appearance: button;
font: inherit; font: inherit;
} }
.c9 { .c8 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem; line-height: 1.125rem;
font-style: normal; font-style: normal;
@ -554,33 +554,33 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
text-align: left; text-align: left;
} }
.c4 { .c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
.c4:checked + label::after { .c3:checked + label::after {
opacity: 1; opacity: 1;
} }
.c4:selected + label::after { .c3:selected + label::after {
opacity: 1; opacity: 1;
} }
.c4:checked + label { .c3:checked + label {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
} }
.c4:selected + label { .c3:selected + label {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
} }
.c4:disabled + label { .c3:disabled + label {
background-color: rgb(249,249,249); background-color: rgb(249,249,249);
cursor: not-allowed; cursor: not-allowed;
} }
.c6 { .c5 {
color: rgb(100,100,100); color: rgb(100,100,100);
position: absolute; position: absolute;
width: 1.125rem; width: 1.125rem;
@ -597,7 +597,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
} }
.c6::after { .c5::after {
opacity: 0; opacity: 0;
content: ''; content: '';
position: absolute; position: absolute;
@ -614,7 +614,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.c3 { .c2 {
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
width: 1.125rem; width: 1.125rem;
@ -623,12 +623,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
cursor: pointer; cursor: pointer;
} }
.c7 label { .c6 label {
font-weight: normal; font-weight: normal;
font-size: 0.9375rem; font-size: 0.9375rem;
} }
.c2 { .c1 {
list-style-type: none; list-style-type: none;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -652,25 +652,25 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
height: 1.5rem; height: 1.5rem;
} }
.c2 label { .c1 label {
font-weight: 400; font-weight: 400;
} }
.c2 label::after { .c1 label::after {
width: 0.475rem; width: 0.475rem;
height: 0.205rem; height: 0.205rem;
top: 0.4125rem; top: 0.4125rem;
left: 0.35rem; left: 0.35rem;
} }
.c2 div[type='checkbox'], .c1 div[type='checkbox'],
.c2 div[type='checkbox'] input, .c1 div[type='checkbox'] input,
.c2 div[type='checkbox'] label { .c1 div[type='checkbox'] label {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
} }
.c1 { .c0 {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
border: none; border: none;
@ -682,23 +682,18 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c8 { .c7 {
font-weight: 600; font-weight: 600;
white-space: pre; white-space: pre;
font-size: 0.8125rem; font-size: 0.8125rem;
cursor: pointer; cursor: pointer;
} }
.c0 {
margin-bottom: 0 !important;
}
<form <form
className="c0"
onChange={undefined} onChange={undefined}
> >
<div <div
className="c1" className="c0"
id="fw-toggle-firewall" id="fw-toggle-firewall"
name="enabled" name="enabled"
role="group" role="group"
@ -706,11 +701,11 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
type="checkbox" type="checkbox"
> >
<li <li
className="c2" className="c1"
> >
<div <div
checked={false} checked={false}
className="c3" className="c2"
disabled={false} disabled={false}
id="fw-toggle-firewall" id="fw-toggle-firewall"
onBlur={undefined} onBlur={undefined}
@ -718,30 +713,30 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
> >
<input <input
checked={false} checked={false}
className="c4 c5" className="c3 c4"
disabled={false} disabled={false}
id="l" id="l"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c5"
htmlFor="l" htmlFor="l"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c7" className="c6"
disabled={false} disabled={false}
id="fw-toggle-firewall" id="fw-toggle-firewall"
onBlur={undefined} onBlur={undefined}
> >
<label <label
className="c8 c9" className="c7 c8"
htmlFor="l" htmlFor="l"
> >
<div <div
className="c10" className="c9"
> >
Enable Firewall Enable Firewall
</div> </div>
@ -753,12 +748,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
`; `;
exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = ` exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
.c10 { .c9 {
margin-right: 0.75rem; margin-right: 0.75rem;
margin-left: 0.75rem; margin-left: 0.75rem;
} }
.c5 { .c4 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -766,39 +761,39 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
overflow: visible; overflow: visible;
} }
.c5[type='checkbox'], .c4[type='checkbox'],
.c5[type='radio'] { .c4[type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
.c5[type='number']::-webkit-inner-spin-button, .c4[type='number']::-webkit-inner-spin-button,
.c5[type='number']::-webkit-outer-spin-button { .c4[type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
.c5[type='search'] { .c4[type='search'] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield; appearance: textfield;
outline-offset: -0.125rem; outline-offset: -0.125rem;
} }
.c5[type='search']::-webkit-search-cancel-button, .c4[type='search']::-webkit-search-cancel-button,
.c5[type='search']::-webkit-search-decoration { .c4[type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
.c5::-webkit-file-upload-button { .c4::-webkit-file-upload-button {
-webkit-appearance: button; -webkit-appearance: button;
-moz-appearance: button; -moz-appearance: button;
appearance: button; appearance: button;
font: inherit; font: inherit;
} }
.c9 { .c8 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem; line-height: 1.125rem;
font-style: normal; font-style: normal;
@ -808,33 +803,33 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
text-align: left; text-align: left;
} }
.c4 { .c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
.c4:checked + label::after { .c3:checked + label::after {
opacity: 1; opacity: 1;
} }
.c4:selected + label::after { .c3:selected + label::after {
opacity: 1; opacity: 1;
} }
.c4:checked + label { .c3:checked + label {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
} }
.c4:selected + label { .c3:selected + label {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
} }
.c4:disabled + label { .c3:disabled + label {
background-color: rgb(249,249,249); background-color: rgb(249,249,249);
cursor: not-allowed; cursor: not-allowed;
} }
.c6 { .c5 {
color: rgb(100,100,100); color: rgb(100,100,100);
position: absolute; position: absolute;
width: 1.125rem; width: 1.125rem;
@ -851,7 +846,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
} }
.c6::after { .c5::after {
opacity: 0; opacity: 0;
content: ''; content: '';
position: absolute; position: absolute;
@ -868,7 +863,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.c3 { .c2 {
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
width: 1.125rem; width: 1.125rem;
@ -877,12 +872,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
cursor: pointer; cursor: pointer;
} }
.c7 label { .c6 label {
font-weight: normal; font-weight: normal;
font-size: 0.9375rem; font-size: 0.9375rem;
} }
.c2 { .c1 {
list-style-type: none; list-style-type: none;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -906,25 +901,25 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
height: 1.5rem; height: 1.5rem;
} }
.c2 label { .c1 label {
font-weight: 400; font-weight: 400;
} }
.c2 label::after { .c1 label::after {
width: 0.475rem; width: 0.475rem;
height: 0.205rem; height: 0.205rem;
top: 0.4125rem; top: 0.4125rem;
left: 0.35rem; left: 0.35rem;
} }
.c2 div[type='checkbox'], .c1 div[type='checkbox'],
.c2 div[type='checkbox'] input, .c1 div[type='checkbox'] input,
.c2 div[type='checkbox'] label { .c1 div[type='checkbox'] label {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
} }
.c1 { .c0 {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
border: none; border: none;
@ -936,23 +931,18 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c8 { .c7 {
font-weight: 600; font-weight: 600;
white-space: pre; white-space: pre;
font-size: 0.8125rem; font-size: 0.8125rem;
cursor: pointer; cursor: pointer;
} }
.c0 {
margin-bottom: 0 !important;
}
<form <form
className="c0"
onChange={undefined} onChange={undefined}
> >
<div <div
className="c1" className="c0"
id="fw-toggle-firewall" id="fw-toggle-firewall"
name="enabled" name="enabled"
role="group" role="group"
@ -960,11 +950,11 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
type="checkbox" type="checkbox"
> >
<li <li
className="c2" className="c1"
> >
<div <div
checked={false} checked={false}
className="c3" className="c2"
disabled={true} disabled={true}
id="fw-toggle-firewall" id="fw-toggle-firewall"
onBlur={undefined} onBlur={undefined}
@ -972,30 +962,30 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
> >
<input <input
checked={false} checked={false}
className="c4 c5" className="c3 c4"
disabled={true} disabled={true}
id="n" id="n"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c5"
htmlFor="n" htmlFor="n"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c7" className="c6"
disabled={true} disabled={true}
id="fw-toggle-firewall" id="fw-toggle-firewall"
onBlur={undefined} onBlur={undefined}
> >
<label <label
className="c8 c9" className="c7 c8"
htmlFor="n" htmlFor="n"
> >
<div <div
className="c10" className="c9"
> >
Enable Firewall Enable Firewall
</div> </div>
@ -1007,12 +997,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
`; `;
exports[`renders <ToggleInactiveForm /> without throwing 1`] = ` exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
.c10 { .c9 {
margin-right: 0.75rem; margin-right: 0.75rem;
margin-left: 0.75rem; margin-left: 0.75rem;
} }
.c5 { .c4 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -1020,39 +1010,39 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
overflow: visible; overflow: visible;
} }
.c5[type='checkbox'], .c4[type='checkbox'],
.c5[type='radio'] { .c4[type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
.c5[type='number']::-webkit-inner-spin-button, .c4[type='number']::-webkit-inner-spin-button,
.c5[type='number']::-webkit-outer-spin-button { .c4[type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
.c5[type='search'] { .c4[type='search'] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield; -moz-appearance: textfield;
appearance: textfield; appearance: textfield;
outline-offset: -0.125rem; outline-offset: -0.125rem;
} }
.c5[type='search']::-webkit-search-cancel-button, .c4[type='search']::-webkit-search-cancel-button,
.c5[type='search']::-webkit-search-decoration { .c4[type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
.c5::-webkit-file-upload-button { .c4::-webkit-file-upload-button {
-webkit-appearance: button; -webkit-appearance: button;
-moz-appearance: button; -moz-appearance: button;
appearance: button; appearance: button;
font: inherit; font: inherit;
} }
.c9 { .c8 {
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.125rem; line-height: 1.125rem;
font-style: normal; font-style: normal;
@ -1062,33 +1052,33 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
text-align: left; text-align: left;
} }
.c4 { .c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
.c4:checked + label::after { .c3:checked + label::after {
opacity: 1; opacity: 1;
} }
.c4:selected + label::after { .c3:selected + label::after {
opacity: 1; opacity: 1;
} }
.c4:checked + label { .c3:checked + label {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
} }
.c4:selected + label { .c3:selected + label {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
} }
.c4:disabled + label { .c3:disabled + label {
background-color: rgb(249,249,249); background-color: rgb(249,249,249);
cursor: not-allowed; cursor: not-allowed;
} }
.c6 { .c5 {
color: rgb(100,100,100); color: rgb(100,100,100);
position: absolute; position: absolute;
width: 1.125rem; width: 1.125rem;
@ -1105,7 +1095,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
} }
.c6::after { .c5::after {
opacity: 0; opacity: 0;
content: ''; content: '';
position: absolute; position: absolute;
@ -1122,7 +1112,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.c3 { .c2 {
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
width: 1.125rem; width: 1.125rem;
@ -1131,12 +1121,12 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
cursor: pointer; cursor: pointer;
} }
.c7 label { .c6 label {
font-weight: normal; font-weight: normal;
font-size: 0.9375rem; font-size: 0.9375rem;
} }
.c2 { .c1 {
list-style-type: none; list-style-type: none;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1160,25 +1150,25 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
height: 1.5rem; height: 1.5rem;
} }
.c2 label { .c1 label {
font-weight: 400; font-weight: 400;
} }
.c2 label::after { .c1 label::after {
width: 0.475rem; width: 0.475rem;
height: 0.205rem; height: 0.205rem;
top: 0.4125rem; top: 0.4125rem;
left: 0.35rem; left: 0.35rem;
} }
.c2 div[type='checkbox'], .c1 div[type='checkbox'],
.c2 div[type='checkbox'] input, .c1 div[type='checkbox'] input,
.c2 div[type='checkbox'] label { .c1 div[type='checkbox'] label {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
} }
.c1 { .c0 {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
border: none; border: none;
@ -1190,22 +1180,16 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c8 { .c7 {
font-weight: 600; font-weight: 600;
white-space: pre; white-space: pre;
font-size: 0.8125rem; font-size: 0.8125rem;
cursor: pointer; cursor: pointer;
} }
.c0 { <form>
margin-bottom: 0 !important;
}
<form
className="c0"
>
<div <div
className="c1" className="c0"
id="fw-toggle-inactive" id="fw-toggle-inactive"
name="inactive" name="inactive"
role="group" role="group"
@ -1213,11 +1197,11 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
type="checkbox" type="checkbox"
> >
<li <li
className="c2" className="c1"
> >
<div <div
checked={false} checked={false}
className="c3" className="c2"
disabled={false} disabled={false}
id="fw-toggle-inactive" id="fw-toggle-inactive"
onBlur={undefined} onBlur={undefined}
@ -1225,30 +1209,30 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
> >
<input <input
checked={false} checked={false}
className="c4 c5" className="c3 c4"
disabled={false} disabled={false}
id="p" id="p"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c5"
htmlFor="p" htmlFor="p"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c7" className="c6"
disabled={false} disabled={false}
id="fw-toggle-inactive" id="fw-toggle-inactive"
onBlur={undefined} onBlur={undefined}
> >
<label <label
className="c8 c9" className="c7 c8"
htmlFor="p" htmlFor="p"
> >
<div <div
className="c10" className="c9"
> >
Show inactive rules Show inactive rules
</div> </div>

View File

@ -4362,6 +4362,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
max-width: 22.1875rem; max-width: 22.1875rem;
width: 22.1875rem; width: 22.1875rem;

View File

@ -50,10 +50,6 @@ const ShortDivider = styled(Divider)`
margin-right: 0; margin-right: 0;
`; `;
const Form = styled.form`
margin-bottom: 0;
`;
export const Header = () => ( export const Header = () => (
<Margin bottom="5"> <Margin bottom="5">
<H3>CNS Default Hostnames</H3> <H3>CNS Default Hostnames</H3>
@ -104,7 +100,7 @@ export const AddServiceForm = ({
invalid invalid
}) => ( }) => (
<Margin bottom="3"> <Margin bottom="3">
<Form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Flex wrap alignCenter={invalid} alignEnd={!invalid}> <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
<FlexItem> <FlexItem>
<Flex collumn> <Flex collumn>
@ -135,7 +131,7 @@ export const AddServiceForm = ({
</Margin> </Margin>
</FlexItem> </FlexItem>
</Flex> </Flex>
</Form> </form>
</Margin> </Margin>
); );

View File

@ -3,13 +3,11 @@ 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 styled from 'styled-components';
import { import {
H3, H3,
FormGroup, FormGroup,
FormLabel, FormLabel,
Toggle,
TagList, TagList,
TagItem, TagItem,
P, P,
@ -21,10 +19,6 @@ import {
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints; const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
const Form = styled.form`
margin-bottom: 0 !important;
`;
const capitalizeFirstLetter = string => const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1); string.charAt(0).toUpperCase() + string.slice(1);
@ -250,7 +244,7 @@ export const ToggleFirewallForm = ({
: undefined; : undefined;
return ( return (
<Form onChange={onChange}> <form onChange={onChange}>
<FormGroup <FormGroup
id="fw-toggle-firewall" id="fw-toggle-firewall"
type="checkbox" type="checkbox"
@ -265,12 +259,12 @@ export const ToggleFirewallForm = ({
</FormLabel> </FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
</Form> </form>
); );
}; };
export const ToggleInactiveForm = () => ( export const ToggleInactiveForm = () => (
<Form> <form>
<FormGroup <FormGroup
id="fw-toggle-inactive" id="fw-toggle-inactive"
type="checkbox" type="checkbox"
@ -285,5 +279,5 @@ export const ToggleInactiveForm = () => (
</FormLabel> </FormLabel>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
</Form> </form>
); );

View File

@ -2931,8 +2931,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
.c23 { .c23 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 6rem; height: 12rem;
min-height: 6rem; min-height: 12rem;
padding: 0.8125rem 0.75rem; padding: 0.8125rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
@ -2946,6 +2946,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
outline: 0; outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace; font-family: "Roboto Mono",monospace;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;

View File

@ -14,11 +14,9 @@ exports[`Anchor Default Anchor 1`] = `
.c0 { .c0 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c0:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
<a <a
@ -43,21 +41,14 @@ exports[`Anchor Disabled Anchor 1`] = `
.c0 { .c0 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(216,216,216); color: rgb(216,216,216);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
pointer-events: none; pointer-events: none;
} }
.c0:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c0:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
<a <a
className="c0 c1 c2" className="c0 c1 c2"
disabled={true} disabled={true}
@ -81,15 +72,13 @@ exports[`Anchor Reversed Anchor 1`] = `
.c0 { .c0 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c0:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
<a <a
className="c0 c1 c2" className="c0 c1 c2"
href="https://joyent.com" href="https://joyent.com"

View File

@ -13,12 +13,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
)` )`
color: ${props => props.theme.primary}; color: ${props => props.theme.primary};
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
text-decoration: underline;
&:hover { ${isOr('secondary', 'reversed', 'white')`
text-decoration: none;
}
${isOr('secondary', 'reversed')`
color: ${props => props.theme.white}; color: ${props => props.theme.white};
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
`}; `};
@ -32,10 +30,6 @@ const BaseLink = styled(({ component, children, ...rest }) =>
color: ${props => props.theme.grey}; color: ${props => props.theme.grey};
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
pointer-events: none; pointer-events: none;
&:hover {
text-decoration: underline;
}
`}; `};
`; `;

View File

@ -44,6 +44,10 @@ export default ({ theme }) => css`
flex-flow: column; flex-flow: column;
} }
form {
margin: 0;
}
.CodeMirror { .CodeMirror {
border: solid ${remcalc(1)} ${theme.grey}; border: solid ${remcalc(1)} ${theme.grey};
margin: ${remcalc(8)} 0 ${remcalc(8)} 0; margin: ${remcalc(8)} 0 ${remcalc(8)} 0;

View File

@ -14,11 +14,9 @@ exports[`Button Default Button 1`] = `
.c2 { .c2 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c2:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c1 { .c1 {
@ -114,21 +112,14 @@ exports[`Button Disabled Button 1`] = `
.c2 { .c2 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(216,216,216); color: rgb(216,216,216);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
pointer-events: none; pointer-events: none;
} }
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c2:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 { .c1 {
display: inline-block; display: inline-block;
} }
@ -245,11 +236,9 @@ exports[`Button Error Button 1`] = `
.c2 { .c2 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} cursor: pointer;
-webkit-text-decoration: underline;
.c2:hover { text-decoration: underline;
-webkit-text-decoration: none;
text-decoration: none;
} }
.c1 { .c1 {
@ -368,21 +357,14 @@ exports[`Button Loading Button 1`] = `
.c2 { .c2 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(216,216,216); color: rgb(216,216,216);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
pointer-events: none; pointer-events: none;
} }
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c2:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 { .c1 {
display: inline-block; display: inline-block;
} }
@ -499,15 +481,13 @@ exports[`Button Secondary Button 1`] = `
.c2 { .c2 {
color: rgb(59,70,204); color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255); color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
} }
.c2:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c1 { .c1 {
display: inline-block; display: inline-block;
} }

View File

@ -1,6 +1,5 @@
export { default } from './card'; export { default } from './card';
export { default as Outlet } from './outlet'; export { default as Outlet } from './outlet';
export { export {
default as Header, default as Header,
Meta as HeaderMeta, Meta as HeaderMeta,

View File

@ -10,7 +10,10 @@ const Container = styled(ViewContainer)`
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: stretch; align-content: stretch;
align-items: stretch; align-items: stretch;
background: ${props => props.theme.background}; background: ${props =>
props.fill
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
: props.theme.background};
`; `;
const Footer = styled.div` const Footer = styled.div`
@ -20,15 +23,22 @@ const Footer = styled.div`
align-content: stretch; align-content: stretch;
align-items: stretch; align-items: stretch;
background-color: ${props => background-color: ${props =>
props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'}; props.fill
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
: 'rgba(241, 241, 241, 1)'};
border-top: ${remcalc(1)} solid ${props => props.theme.grey}; border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
line-height: ${remcalc(25)}; line-height: ${remcalc(25)};
height: ${remcalc(70)}; height: ${remcalc(70)};
max-height: ${remcalc(70)};
z-index: 1; z-index: 1;
${is('auto')`
height: auto;
`};
${is('borderless')`
border: none;
`};
${is('fixed')` ${is('fixed')`
position: fixed; position: fixed;
left: 0; left: 0;
@ -38,10 +48,16 @@ const Footer = styled.div`
${is('bottom', 'fixed')` ${is('bottom', 'fixed')`
bottom: 0; bottom: 0;
`}; `};
${is('top', 'fixed')`
top: 0;
`};
`; `;
export default ({ children, fluid, ...rest }) => ( export default ({ children, fluid, innerFill, ...rest }) => (
<Footer {...rest}> <Footer {...rest}>
<Container fluid={fluid}>{children}</Container> <Container fill={innerFill || rest.fill} fluid={fluid}>
{children}
</Container>
</Footer> </Footer>
); );

View File

@ -726,8 +726,8 @@ exports[`Form Textarea 1`] = `
.c1 { .c1 {
box-sizing: border-box; box-sizing: border-box;
width: 18.75rem; width: 18.75rem;
height: 6rem; height: 12rem;
min-height: 6rem; min-height: 12rem;
padding: 0.8125rem 0.75rem; padding: 0.8125rem 0.75rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);

View File

@ -17,7 +17,7 @@ const color = props =>
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props); props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
const height = props => const height = props =>
props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48); props.multiple ? 'auto' : props.textarea ? remcalc(192) : remcalc(48);
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13)); const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
@ -106,6 +106,7 @@ const style = css`
`}; `};
${is('monospace')` ${is('monospace')`
white-space: pre-wrap;
font-family: ${props => props.theme.monoFont.families}; font-family: ${props => props.theme.monoFont.families};
&:disabled { &:disabled {
@ -164,6 +165,10 @@ const style = css`
width: ${remcalc(120)}; width: ${remcalc(120)};
`}; `};
${is('borderless')`
border: none;
`};
${is('success')` ${is('success')`
border-color: ${props => props.theme.greenDark} border-color: ${props => props.theme.greenDark}
`}; `};
@ -199,6 +204,14 @@ const style = css`
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
`}; `};
${is('white')`
color: ${props => props.theme.white};
`};
${is('dark')`
background: ${props => props.theme.greyDarker};
`};
`; `;
const BaseInput = Component => ({ resize, onBlur, type, ...props }) => { const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import is from 'styled-is';
const UnorderedList = styled.ul` const UnorderedList = styled.ul`
background: ${props => props.theme.disabled}; background: ${props => props.theme.disabled};
@ -24,6 +25,10 @@ const UnorderedList = styled.ul`
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
${is('clear')`
background: none !important;
`};
`; `;
/** /**

View File

@ -1,20 +1,9 @@
import styled, { css } from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import is from 'styled-is'; import is, { isNot } from 'styled-is';
import BaseAnchor from '../anchor'; import BaseAnchor from '../anchor';
const border = css`
width: 100%;
height: ${remcalc(1)};
background: ${props => props.theme.text};
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
`;
export default styled.li` export default styled.li`
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
line-height: 1.6; line-height: 1.6;
@ -23,25 +12,53 @@ export default styled.li`
export const Anchor = styled(BaseAnchor)` export const Anchor = styled(BaseAnchor)`
color: ${props => props.theme.text}; color: ${props => props.theme.text};
font-weight: ${props => props.theme.font.weight.text};
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
padding: 0 ${remcalc(12)}; padding: 0 ${remcalc(12)};
padding-bottom: ${remcalc(15)}; padding-bottom: ${remcalc(15)};
position: relative; position: relative;
&.active {
font-weight: ${props => props.theme.font.weight.text};
&:after { &:after {
${border}; width: 100%;
height: ${remcalc(1)};
background: ${props => props.theme.grey};
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
} }
&.active {
&:after {
background: ${props => props.theme.font.regular};
}
}
&.active {
font-weight: ${props => props.theme.font.weight.semibold};
} }
${is('active')` ${is('active')`
font-weight: ${props => props.theme.font.weight.text}; font-weight: ${props => props.theme.font.weight.semibold}
`};
${is('white')`
color: ${props => props.theme.white};
${isNot('active')`
color: ${props => props.theme.greyDark};
`};
&:after { &:after {
${border} background: ${props => props.theme.greyDarker};
};
`};
${is('white', 'active')`
&:after {
background: ${props => props.theme.white};
} }
`}; `};
`; `;

View File

@ -14,7 +14,7 @@ exports[`Button H1 1`] = `
line-height: 2.8125rem; line-height: 2.8125rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: normal; font-weight: 400;
margin: 0; margin: 0;
} }
@ -29,7 +29,7 @@ exports[`Button H2 1`] = `
.c0 { .c0 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.875rem; line-height: 1.875rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -45,7 +45,7 @@ exports[`Button H3 1`] = `
.c0 { .c0 {
margin: 0; margin: 0;
color: rgb(73,73,73); color: rgb(73,73,73);
font-weight: normal; font-weight: 400;
line-height: 1.625rem; line-height: 1.625rem;
font-size: 1.3125rem; font-size: 1.3125rem;
} }

View File

@ -12,7 +12,7 @@ export const H1 = styled(NH1)`
line-height: ${remcalc(45)}; line-height: ${remcalc(45)};
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: normal; font-weight: ${props => props.theme.font.weight.normal};
margin: 0; margin: 0;
${is('inline')` ${is('inline')`
@ -36,7 +36,7 @@ export const H1 = styled(NH1)`
export const H2 = styled.h2` export const H2 = styled.h2`
margin: 0; margin: 0;
color: ${props => props.theme.text}; color: ${props => props.theme.text};
font-weight: normal; font-weight: ${props => props.theme.font.weight.normal};
line-height: ${remcalc(30)}; line-height: ${remcalc(30)};
font-size: ${remcalc(24)}; font-size: ${remcalc(24)};
@ -61,7 +61,7 @@ export const H2 = styled.h2`
export const H3 = styled.h3` export const H3 = styled.h3`
margin: 0; margin: 0;
color: ${props => props.theme.text}; color: ${props => props.theme.text};
font-weight: normal; font-weight: ${props => props.theme.font.weight.normal};
line-height: ${remcalc(26)}; line-height: ${remcalc(26)};
font-size: ${remcalc(21)}; font-size: ${remcalc(21)};