feat: upgrade graphql with dc and pagination

This commit is contained in:
Sérgio Ramos 2018-03-01 22:35:37 +00:00
parent c6b245aebc
commit bf0a1a0ba0
53 changed files with 562 additions and 637 deletions

View File

@ -18,7 +18,7 @@
"dependencies": {
"brok": "^2.0.0",
"brule": "^3.1.0",
"cloudapi-gql": "^6.1.1",
"cloudapi-gql": "^7.1.1",
"hapi": "^17.2.0",
"hapi-triton-auth": "^2.0.0",
"inert": "^5.1.0",

View File

@ -22,7 +22,7 @@ const {
BASE_URL = `http://0.0.0.0:${PORT}`,
ROLLBAR_SERVER_TOKEN,
NODE_ENV = 'development',
CONSOLE = 'my-joy-beta'
CONSOLE = 'my-joy-instances'
} = process.env;
const Ui = require(CONSOLE);

View File

@ -102,7 +102,7 @@ export default compose(
}),
props: ({ data: { loading, error, variables, ...rest } }) => {
const notFoundMsg = `Instance "${variables.name}" not found!`;
const inst = find(get(rest, 'machines', []), ['name', variables.name]);
const inst = find(get(rest, 'machines.results', []), ['name', variables.name]);
const notFound = !loading && !inst ? notFoundMsg : false;
return {

View File

@ -1,6 +1,8 @@
query instance($name: String) {
machines(name: $name) {
id
name
results {
id
name
}
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -57,7 +57,10 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
</Margin>
{enabled ? (
<Margin bottom={4}>
<P>Please note: All hostnames listed here will be confirmed after deployment.</P>
<P>
Please note: All hostnames listed here will be confirmed after
deployment.
</P>
</Margin>
) : null}
</Fragment>

View File

@ -1,252 +0,0 @@
/* eslint-disable camelcase */
import React from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled from 'styled-components';
import Flex, { FlexItem } from 'styled-flex-component';
import remcalc from 'remcalc';
import {
H4,
P,
Small,
DotIcon,
Card,
CardHeader,
CardHeaderMeta,
CardHeaderBox,
CardOutlet,
FormGroup,
FormLabel,
Input,
Checkbox,
Divider,
FabricIcon,
DataCenterIcon,
PublicIcon,
PrivateIcon,
ArrowIcon
} from 'joyent-ui-toolkit';
const Box = styled.div`
display: inline-block;
background-color: ${props => props.theme.white};
border: ${remcalc(1)} solid ${props => props.theme.grey};
border-radius: ${remcalc(4)};
min-width: ${remcalc(300)};
`;
export const Collapsed = ({ name, fabric, ...network }) => (
<Margin inline right={3} top={3}>
<Box>
<Flex column>
<FlexItem>
<Margin left={3} right={3} top={2} bottom={2}>
<P>{name}</P>
</Margin>
</FlexItem>
<FlexItem>
<Divider height={remcalc(1)} />
</FlexItem>
<FlexItem>
<Margin left={3} right={3} top={2} bottom={2}>
<Flex>
<Margin right={4}>
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{network.public ? <PublicIcon /> : <PrivateIcon />}
</Margin>
</FlexItem>
<FlexItem>
<P>{network.public ? 'Public' : 'Private'}</P>
</FlexItem>
</Flex>
</FlexItem>
</Margin>
<Margin>
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
</FlexItem>
<FlexItem>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
</Margin>
</Flex>
</Margin>
</FlexItem>
</Flex>
</Box>
</Margin>
);
export const Expanded = ({
id,
name,
fabric,
subnet,
description,
provision_start_ip,
provision_end_ip,
selected = false,
infoExpanded = false,
onInfoClick,
...network
}) => (
<Row>
<Col xs={12} sm={8}>
<Margin bottom={4}>
<Card shadow>
<CardHeader secondary={selected}>
<CardHeaderBox>
<FormGroup name={id} field={Field}>
<Checkbox noMargin checked={selected} />
</FormGroup>
</CardHeaderBox>
<CardHeaderMeta paddingLeft={0}>
<H4 white={selected}>{name}</H4>
</CardHeaderMeta>
</CardHeader>
<CardOutlet>
<Padding all={4}>
{description && (
<Margin bottom={3}>
<P>{description}</P>
</Margin>
)}
<Flex>
<Margin right={4}>
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{network.public ? <PublicIcon /> : <PrivateIcon />}
</Margin>
</FlexItem>
<FlexItem>
<P>{network.public ? 'Public' : 'Private'}</P>
</FlexItem>
</Flex>
</FlexItem>
</Margin>
<Margin right={4}>
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
</FlexItem>
</Flex>
</FlexItem>
</Margin>
</Flex>
{fabric ? (
<Margin top={3}>
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
<CardHeader
secondary={false}
transparent={false}
onClick={onInfoClick}
>
<CardHeaderMeta>
<Padding left={3} right={3}>
<P>Network information</P>
</Padding>
</CardHeaderMeta>
<CardHeaderBox>
<ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
</CardHeaderBox>
</CardHeader>
{infoExpanded ? (
<CardOutlet>
<Padding all={3}>
<Flex column>
{network.internet_nat ? (
<FlexItem>
<Margin bottom={3}>
<Flex alignCenter>
<DotIcon
right={remcalc(6)}
size={remcalc(12)}
color="green"
/>
<Small bold noMargin>
Outbound internet access enabled
</Small>
</Flex>
</Margin>
</FlexItem>
) : null}
<FlexItem>
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5} bottom={2}>
<Input
onBlur={null}
big
monospace
type="text"
value={id}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<Margin top={0.5} bottom={2}>
<Input
onBlur={null}
big
monospace
type="text"
value={subnet}
/>
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="ip-range">
<FormLabel>IP range</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
monospace
type="text"
value={`${provision_start_ip} - ${provision_end_ip}`}
/>
</Margin>
</FormGroup>
</FlexItem>
</Flex>
</Padding>
</CardOutlet>
) : null}
</Card>
</Margin>
) : null}
</Padding>
</CardOutlet>
</Card>
</Margin>
</Col>
</Row>
);
export default ({ small = false, ...rest }) =>
small ? <Collapsed {...rest} /> : <Expanded {...rest} />;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View File

@ -1055,7 +1055,7 @@ Array [
cursor: not-allowed;
}
.c16 {
.c17 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
@ -1091,7 +1091,7 @@ Array [
display: block;
}
.c12 {
.c13 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@ -1099,20 +1099,20 @@ Array [
margin: 0;
}
.c12 + p,
.c12 + small,
.c12 + h1,
.c12 + h2,
.c12 + label,
.c12 + h3,
.c12 + h4,
.c12 + h5,
.c12 + div,
.c12 + span {
.c13 + p,
.c13 + small,
.c13 + h1,
.c13 + h2,
.c13 + label,
.c13 + h3,
.c13 + h4,
.c13 + h5,
.c13 + div,
.c13 + span {
margin-top: 0.75rem;
}
.c30 {
.c31 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@ -1122,24 +1122,24 @@ Array [
color: rgb(255,255,255);
}
.c30 + p,
.c30 + small,
.c30 + h1,
.c30 + h2,
.c30 + label,
.c30 + h3,
.c30 + h4,
.c30 + h5,
.c30 + div,
.c30 + span {
.c31 + p,
.c31 + small,
.c31 + h1,
.c31 + h2,
.c31 + label,
.c31 + h3,
.c31 + h4,
.c31 + h5,
.c31 + div,
.c31 + span {
margin-top: 0.75rem;
}
.c21 {
.c22 {
margin-right: 0.375rem;
}
.c15 {
.c16 {
margin-bottom: 1.125rem;
}
@ -1147,24 +1147,29 @@ Array [
margin-bottom: 1.5rem;
}
.c18 {
.c19 {
margin-right: 1.5rem;
}
.c22 {
.c23 {
margin-top: 1.125rem;
}
.c14 {
.c12 {
padding-right: 0rem;
padding-left: 0rem;
}
.c15 {
padding: 1.5rem;
}
.c26 {
.c27 {
padding-right: 1.125rem;
padding-left: 1.125rem;
}
.c17 {
.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1184,7 +1189,7 @@ Array [
align-content: stretch;
}
.c20 {
.c21 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -1208,7 +1213,7 @@ Array [
align-items: center;
}
.c19 {
.c20 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
@ -1399,7 +1404,7 @@ Array [
color: inherit;
}
.c13 {
.c14 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1435,15 +1440,15 @@ Array [
background-color: transparent;
}
.c13 > [name='card']:not(:last-child) {
.c14 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c13 > [name='card']:last-child {
.c14 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c23 {
.c24 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1471,7 +1476,7 @@ Array [
flex: 0 0 2.875rem;
}
.c24 {
.c25 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1509,12 +1514,12 @@ Array [
box-shadow: none;
}
.c24 button {
.c25 button {
margin-bottom: 0;
margin-top: 0;
}
.c25 {
.c26 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1573,7 +1578,7 @@ Array [
color: inherit;
}
.c27 {
.c28 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1611,12 +1616,12 @@ Array [
margin: -0.0625rem -0.0625rem 0 -0.0625rem;
}
.c27 button {
.c28 button {
margin-bottom: 0;
margin-top: 0;
}
.c28 {
.c29 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1672,7 +1677,7 @@ Array [
box-shadow: none;
}
.c29 {
.c30 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1889,46 +1894,50 @@ Array [
disabled={false}
name="card-header-meta"
>
<h4
<div
className="c12"
>
name
</h4>
<h4
className="c13"
>
name
</h4>
</div>
</div>
</div>
<div
className="c13"
className="c14"
name="card-outlet"
>
<div
className="c14"
className="c15"
>
<div
className="c15"
className="c16"
>
<p
className="c16"
className="c17"
>
description
</p>
</div>
<div
className="c17"
className="c18"
>
<div
className="c18"
className="c19"
>
<div
className="c19"
className="c20"
>
<div
className="c20"
className="c21"
>
<div
className="c19"
className="c20"
>
<div
className="c21"
className="c22"
>
<svg
className=""
@ -1951,10 +1960,10 @@ Array [
</div>
</div>
<div
className="c19"
className="c20"
>
<p
className="c16"
className="c17"
>
Private
</p>
@ -1963,19 +1972,19 @@ Array [
</div>
</div>
<div
className="c18"
className="c19"
>
<div
className="c19"
className="c20"
>
<div
className="c20"
className="c21"
>
<div
className="c19"
className="c20"
>
<div
className="c21"
className="c22"
>
<svg
height="16.2"
@ -1991,10 +2000,10 @@ Array [
</div>
</div>
<div
className="c19"
className="c20"
>
<p
className="c16"
className="c17"
>
Fabric network
</p>
@ -2002,31 +2011,165 @@ Array [
</div>
</div>
</div>
<div
className="c19"
>
<div
className="c20"
>
<div
className="c21"
>
<div
className="c20"
>
<div
className="c22"
>
<svg
className=""
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-1105 974)"
>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1111 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1117 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -968)"
xlinkHref="#c"
/>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1111 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1117 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1111 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1117 -962)"
xlinkHref="#d"
/>
</g>
</g>
</g>
</g>
<defs>
<path
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
id="c"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="d"
/>
</defs>
</svg>
</div>
</div>
<div
className="c20"
>
<p
className="c17"
>
0 instances
</p>
</div>
</div>
</div>
</div>
</div>
<div
className="c22"
className="c23"
>
<div
className="c23"
className="c24"
disabled={false}
name="card"
>
<div
className="c24"
className="c25"
disabled={false}
name="card-header"
onClick={[Function]}
>
<div
className="c25"
className="c26"
disabled={false}
name="card-header-meta"
>
<div
className="c26"
className="c27"
>
<p
className="c16"
className="c17"
>
Network information
</p>
@ -2080,12 +2223,12 @@ Array [
name="card"
>
<div
className="c27"
className="c28"
disabled={false}
name="card-header"
>
<div
className="c28"
className="c29"
disabled={false}
name="card-header-box"
>
@ -2123,50 +2266,54 @@ Array [
</div>
</div>
<div
className="c29"
className="c30"
disabled={false}
name="card-header-meta"
>
<h4
className="c30"
<div
className="c12"
>
name2
</h4>
<h4
className="c31"
>
name2
</h4>
</div>
</div>
</div>
<div
className="c13"
className="c14"
name="card-outlet"
>
<div
className="c14"
className="c15"
>
<div
className="c15"
className="c16"
>
<p
className="c16"
className="c17"
>
description2
</p>
</div>
<div
className="c17"
className="c18"
>
<div
className="c18"
className="c19"
>
<div
className="c19"
className="c20"
>
<div
className="c20"
className="c21"
>
<div
className="c19"
className="c20"
>
<div
className="c21"
className="c22"
>
<svg
className=""
@ -2189,10 +2336,10 @@ Array [
</div>
</div>
<div
className="c19"
className="c20"
>
<p
className="c16"
className="c17"
>
Private
</p>
@ -2201,19 +2348,19 @@ Array [
</div>
</div>
<div
className="c18"
className="c19"
>
<div
className="c19"
className="c20"
>
<div
className="c20"
className="c21"
>
<div
className="c19"
className="c20"
>
<div
className="c21"
className="c22"
>
<svg
height="13"
@ -2229,10 +2376,10 @@ Array [
</div>
</div>
<div
className="c19"
className="c20"
>
<p
className="c16"
className="c17"
>
Data center network
</p>
@ -2547,14 +2694,14 @@ Array [
s
added
</h3>,
.c5 {
.c7 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c7 {
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -2573,34 +2720,44 @@ Array [
margin-left: -0.625rem;
}
.c6 {
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.625rem;
padding-left: 0.625rem;
display: block;
}
.c8 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
.c12 {
margin-right: 0.375rem;
}
.c9 {
.c10 {
margin-right: 1.5rem;
}
.c0 {
.c2 {
display: inline-block;
margin-top: 1.125rem;
margin-right: 1.125rem;
}
.c4 {
.c6 {
margin-top: 0.75rem;
margin-right: 1.125rem;
margin-bottom: 0.75rem;
margin-left: 1.125rem;
}
.c8 {
.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -2620,7 +2777,7 @@ Array [
align-content: stretch;
}
.c10 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -2644,7 +2801,7 @@ Array [
align-items: center;
}
.c2 {
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -2667,7 +2824,7 @@ Array [
flex-direction: column;
}
.c3 {
.c5 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
@ -2684,7 +2841,7 @@ Array [
display: block;
}
.c1 {
.c3 {
display: inline-block;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@ -2692,6 +2849,24 @@ Array [
min-width: 18.75rem;
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 66.66666666666667%;
-ms-flex-preferred-size: 66.66666666666667%;
flex-basis: 66.66666666666667%;
max-width: 66.66666666666667%;
}
}
<form>
<div
className="c0"
@ -2708,114 +2883,122 @@ Array [
<div
className="c4"
>
<p
<div
className="c5"
>
name2
</p>
</div>
</div>
<div
className="c3"
>
<div
className="c6 c7"
height="0.0625rem"
/>
</div>
<div
className="c3"
>
<div
className="c4"
>
<div
className="c6"
>
<p
className="c7"
>
name2
</p>
</div>
</div>
<div
className="c8"
className="c5"
>
<div
className="c9"
className="c8 c0"
height="0.0625rem"
/>
</div>
<div
className="c5"
>
<div
className="c6"
>
<div
className="c3"
className="c9"
>
<div
className="c10"
>
<div
className="c3"
className="c5"
>
<div
className="c11"
>
<svg
className=""
height="16"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 16"
width="12"
xmlns="http://www.w3.org/2000/svg"
<div
className="c5"
>
<path
d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
<div
className="c12"
>
<svg
className=""
height="16"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 12 16"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
</div>
<div
className="c5"
>
<p
className="c7"
>
Private
</p>
</div>
</div>
</div>
<div
className="c3"
>
<p
className="c5"
>
Private
</p>
</div>
</div>
</div>
</div>
<div
className=""
>
<div
className="c3"
>
<div
className="c10"
className=""
>
<div
className="c3"
className="c5"
>
<div
className="c11"
>
<svg
height="13"
viewBox="0 0 9 13"
width="9"
xmlns="http://www.w3.org/2000/svg"
<div
className="c5"
>
<path
d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
<div
className="c12"
>
<svg
height="13"
viewBox="0 0 9 13"
width="9"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
</div>
<div
className="c5"
>
<p
className="c7"
>
Data center network
</p>
</div>
</div>
</div>
<div
className="c3"
>
<p
className="c5"
>
Data center network
</p>
</div>
</div>
</div>
</div>

View File

@ -3,9 +3,9 @@ import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { destroy } from 'redux-form';
import { connect } from 'react-redux';
import get from 'lodash.get';
import { Margin } from 'styled-components-spacing';
import { set } from 'react-redux-values';
import get from 'lodash.get';
import { CnsIcon, H3, Button } from 'joyent-ui-toolkit';
@ -47,9 +47,9 @@ const CNSContainer = ({
</Title>
{expanded ? (
<Description>
Triton CNS is used to automatically update hostnames for your
instances. You can serve multiple instances (with multiple IP
addresses) under the same hostname by matching the CNS service names.{' '}
Triton CNS is used to automatically update hostnames for your instances.
You can serve multiple instances (with multiple IP addresses) under the
same hostname by matching the CNS service names.{' '}
<a
href="https://docs.joyent.com/private-cloud/install/cns"
target="_blank"
@ -111,25 +111,28 @@ export default compose(
options: () => ({
ssr: false
}),
props: ({ data: { account: { id = '<account-id>' } = [] } }) => ({
id
})
props: ({ data }) => {
const id = get(data, 'account.id', '<account-id>');
const datacenter = get(data, 'datacenter.name', '<dc>');
return {
id,
datacenter
};
}
}),
connect(({ form, values }, { id }) => {
connect(({ form, values }, { id, datacenter }) => {
const proceeded = get(values, IC_CNS_V_PROCEEDED, false);
const instanceName = get(form, `${IC_NAME_F}.values.name`, '<inst-name>');
const serviceNames = get(values, IC_CNS_V_SERVICES, []);
// REPLACE WITH DATA CENTER
const dataCenter = 'us-east-1';
const hostnames = [
{
values: [`${instanceName}.inst.${id}.${dataCenter}.triton.zone`],
values: [`${instanceName}.inst.${id}.${datacenter}.triton.zone`],
public: true
},
{
values: [`${instanceName}.inst.${id}.${dataCenter}.cns.joyent.com`]
values: [`${instanceName}.inst.${id}.${datacenter}.cns.joyent.com`]
},
{
values: [],
@ -149,7 +152,7 @@ export default compose(
serviceNames.forEach(name => {
const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com';
const value = `${name}.svc.${id}.${dataCenter}${postfix}`;
const value = `${name}.svc.${id}.${datacenter}${postfix}`;
hostname.values.push(value);
});
});

View File

@ -16,7 +16,6 @@ import Description from '@components/description';
import GetRandomName from '@graphql/get-random-name.gql';
import { instanceName as validateName } from '@state/validators';
import createClient from '@state/apollo-client';
import parseError from '@state/parse-error';
import { Forms, Values } from '@root/constants';
const { IC_NAME_F } = Forms;

View File

@ -12,7 +12,7 @@ import get from 'lodash.get';
import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
import Title from '@components/create-instance/title';
import Network from '@components/create-instance/network';
import Network from '@components/network';
import Description from '@components/description';
import ListNetworks from '@graphql/list-networks.gql';
import { Forms, Values } from '@root/constants';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -47,9 +47,9 @@ const CnsContainer = ({
<ViewContainer main>
<Margin bottom={1}>
<Description>
Triton CNS is used to automatically update hostnames for your
instances. You can serve multiple instances (with multiple IP
addresses) under the same hostname by matching the CNS service names.{' '}
Triton CNS is used to automatically update hostnames for your instances.
You can serve multiple instances (with multiple IP addresses) under the
same hostname by matching the CNS service names.{' '}
<a
href="https://docs.joyent.com/private-cloud/install/cns"
target="_blank"
@ -133,10 +133,13 @@ export default compose(
ssr: false
}),
props: ({ data }) => {
const { account = {} } = data;
const { id = '<account-id>' } = account;
const id = get(data, 'account.id', '<account-id>');
const datacenter = get(data, 'datacenter.name', '<dc>');
return { id };
return {
id,
datacenter
};
}
}),
graphql(GetTags, {
@ -151,7 +154,7 @@ export default compose(
const { loading, error, variables, refetch, ...rest } = data;
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const instance = find(get(rest, 'machines.results', []), ['name', name]);
const tags = get(instance, 'tags', []);
return {
@ -164,7 +167,7 @@ export default compose(
}
}),
connect(
({ values, form }, { id, instance = {}, tags = [] }) => {
({ values, form }, { id, datacenter, instance = {}, tags = [] }) => {
const { name = '<instance-name>' } = instance;
const cnsDisable = find(tags, ['name', 'triton.cns.disable']) || {};
@ -199,16 +202,13 @@ export default compose(
services = svcs;
}
// REPLACE WITH DATA CENTER
const dataCenter = 'us-east-1';
const defaultHostnames = [
{
values: [`${name}.inst.${id}.${dataCenter}.triton.zone`],
values: [`${name}.inst.${id}.${datacenter}.triton.zone`],
public: true
},
{
values: [`${name}.inst.${id}.${dataCenter}.cns.joyent.com`]
values: [`${name}.inst.${id}.${datacenter}.cns.joyent.com`]
},
{
values: [],
@ -232,7 +232,7 @@ export default compose(
const postfix = hostname.public
? '.triton.zone'
: '.cns.joyent.com';
return `${name}.svc.${id}.${dataCenter}${postfix}`;
return `${name}.svc.${id}.${datacenter}${postfix}`;
})
};
});

View File

@ -145,7 +145,7 @@ export default compose(
const { loading, error, variables, refetch, ...rest } = data;
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const instance = find(get(rest, 'machines.results', []), ['name', name]);
const enabled = get(instance, 'firewall_enabled');
const rules = get(instance, 'firewall_rules', []);

View File

@ -184,7 +184,8 @@ export default compose(
ssr: false,
pollInterval: 1000
}),
props: ({ data: { machines, loading, error, refetch } }) => {
props: ({ data: { loading, error, refetch, ...rest } }) => {
const machines = get(rest, 'machines.results', []);
const instances = forceArray(machines).map(({ state, ...machine }) => ({
...machine,
state,

View File

@ -167,7 +167,7 @@ export default compose(
props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const instance = find(get(rest, 'machines.results', []), ['name', name]);
const values = get(instance, 'metadata', []).filter(
({ name = '' }) => name !== 'user-script'
);

View File

@ -176,7 +176,7 @@ export default compose(
}),
props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const instance = find(get(rest, 'machines.results', []), ['name', name]);
const snapshots = get(instance, 'snapshots', []);
const index = new Fuse(snapshots, {

View File

@ -145,7 +145,10 @@ export default compose(
}
}),
props: ({ data: { loading, error, variables, ...rest } }) => {
let instance = find(get(rest, 'machines', []), ['name', variables.name]);
let instance = find(get(rest, 'machines.results', []), [
'name',
variables.name
]);
if (instance) {
const { ips } = instance;

View File

@ -158,7 +158,7 @@ export default compose(
props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const instance = find(get(rest, 'machines.results', []), ['name', name]);
const tags = get(instance, 'tags', []).filter(
({ name = '' }) => !/^triton\.cns\./i.test(name)
);

View File

@ -57,7 +57,7 @@ export default compose(
const { loading, error, variables, refetch, ...rest } = data;
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const instance = find(get(rest, 'machines.results', []), ['name', name]);
const metadata = get(instance, 'metadata', [])
.filter(({ name = '' }) => name === 'user-script')
.shift();

View File

@ -1,3 +0,0 @@
mutation addMachineTags($id: ID!, $tags: DynamicObjectType!) {
addMachineTags(id: $id, tags: $tags)
}

View File

@ -1,4 +1,7 @@
query Account {
datacenter {
name
}
account {
id
}

View File

@ -1,9 +0,0 @@
query Image($name: String) {
images(name: $name) {
id
name
os
version
type
}
}

View File

@ -1,5 +1,7 @@
query instance($name: String) {
machines(name: $name) {
id
results {
id
}
}
}

View File

@ -1,23 +1,25 @@
query instance($name: String) {
machines(name: $name) {
id
state
brand
name
created
updated
primary_ip
ips
docker
dns_names
compute_node
image {
id
name
}
package {
results {
id
state
brand
name
created
updated
primary_ip
ips
docker
dns_names
compute_node
image {
id
name
}
package {
id
name
}
}
}
}

View File

@ -1,14 +0,0 @@
query packages($id: ID) {
packages(id: $id) {
id
name
memory
disk
swap
lwps
vcpus
version
group
description
}
}

View File

@ -1,7 +0,0 @@
query instance($name: String!) {
machines(name: $name) {
id
name
dns_names
}
}

View File

@ -1,15 +1,17 @@
query instance($name: String!) {
machines(name: $name) {
id
name
firewall_enabled
firewall_rules {
results {
id
enabled
rule_str
rule_obj
global
description
name
firewall_enabled
firewall_rules {
id
enabled
rule_str
rule_obj
global
description
}
}
}
}

View File

@ -1,22 +1,24 @@
query instance($name: String!) {
machines(name: $name) {
id
name
networks {
results {
id
name
public
fabric
description
subnet
provision_start_ip
provision_end_ip
gateway
resolvers
internet_nat
machines {
networks {
id
name
public
fabric
description
subnet
provision_start_ip
provision_end_ip
gateway
resolvers
internet_nat
machines {
id
name
}
}
}
}

View File

@ -1,20 +1,22 @@
query instances {
machines {
id
name
state
primary_ip
firewall_enabled
created
updated
brand
memory
disk
package {
name
}
snapshots {
results {
id
name
state
primary_ip
firewall_enabled
created
updated
brand
memory
disk
package {
name
}
snapshots {
name
}
}
}
}

View File

@ -1,11 +1,13 @@
query instance($name: String!) {
machines(name: $name) {
id
name
metadata {
results {
id
name
value
metadata {
id
name
value
}
}
}
}

View File

@ -1,6 +0,0 @@
query packages {
packages {
id
name
}
}

View File

@ -1,13 +1,15 @@
query instance($name: String!) {
machines(name: $name) {
id
name
snapshots {
results {
id
name
state
created
updated
snapshots {
id
name
state
created
updated
}
}
}
}

View File

@ -1,11 +1,13 @@
query instance($name: String!) {
machines(name: $name) {
id
name
tags {
results {
id
name
value
tags {
id
name
value
}
}
}
}

View File

@ -1,3 +0,0 @@
mutation resizeInstance($id: ID!, $package: ID!) {
resizeMachine(id: $id, package: $package)
}

View File

@ -35,13 +35,22 @@ const GetHeader = gql`
const GetAccount = gql`
{
datacenter {
name
}
account {
login
}
}
`;
const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => (
const Navigation = ({
login,
datacenter,
toggleSectionOpen,
isOpen,
activePanel
}) => (
<Header onOutsideClick={() => toggleSectionOpen()}>
<HeaderRow>
<HeaderItem>
@ -60,20 +69,22 @@ const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => (
<HeaderDividerItem />
<HeaderFlexibleSpaceItem />
<HeaderDividerItem />
<HeaderItem
onClick={() => toggleSectionOpen('datacenter')}
active={isOpen && activePanel === 'datacenter'}
>
<HeaderItemContent>
<HeaderItemSubContent>Data Center:</HeaderItemSubContent>
<HeaderSpace />
<span>us-east-1</span>
</HeaderItemContent>
<HeaderItemIcon>
<DataCenterIcon light />
</HeaderItemIcon>
</HeaderItem>
<HeaderDividerItem />
{datacenter ? (
<HeaderItem
onClick={() => toggleSectionOpen('datacenter')}
active={isOpen && activePanel === 'datacenter'}
>
<HeaderItemContent>
<HeaderItemSubContent>Data Center:</HeaderItemSubContent>
<HeaderSpace />
<span>{datacenter}</span>
</HeaderItemContent>
<HeaderItemIcon>
<DataCenterIcon light />
</HeaderItemIcon>
</HeaderItem>
) : null}
{datacenter ? (<HeaderDividerItem />) : null}
{login ? (
<HeaderItem>
<HeaderItemContent>
@ -101,10 +112,16 @@ export default compose(
ssr: false
}),
props: ({ data }) => {
const { account = {}, loading = false, error = null } = data;
const {
account = {},
datacenter = {},
loading = false,
error = null
} = data;
const { login } = account;
const { name } = datacenter;
return { login, loading, error };
return { login, datacenter: name, loading, error };
}
}),
graphql(GetHeader, {

View File

@ -487,7 +487,7 @@ apollo-link-state@^0.4.0:
apollo-utilities "^1.0.6"
graphql-anywhere "^4.1.0-alpha.0"
apollo-link@^1.0.0, apollo-link@^1.1.0, apollo-link@^1.2.1:
apollo-link@^1.0.0, apollo-link@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
dependencies:
@ -499,7 +499,7 @@ apollo-server-module-graphiql@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/apollo-server-module-graphiql/-/apollo-server-module-graphiql-1.3.2.tgz#0a9e4c48dece3af904fee333f95f7b9817335ca7"
apollo-utilities@^1.0.0, apollo-utilities@^1.0.1, apollo-utilities@^1.0.6, apollo-utilities@^1.0.8:
apollo-utilities@^1.0.0, apollo-utilities@^1.0.6, apollo-utilities@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.8.tgz#74d797d38953d2ba35e16f880326e2abcbc8b016"
@ -2568,9 +2568,9 @@ clone@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
cloudapi-gql@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-6.1.1.tgz#2f48b12b2f96612f62759eac6c5280573bc4ba49"
cloudapi-gql@^7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-7.1.1.tgz#54e7d979d32d4542f5f41ffe0fe33b477f9d71a0"
dependencies:
apr-map "3.x.x"
boom "7.x.x"
@ -2578,7 +2578,6 @@ cloudapi-gql@^6.1.1:
force-array "3.1.x"
fwrule "1.4.x"
graphi "5.x.x"
graphql-tools "2.21.x"
hasha "3.0.x"
lodash.uniq "4.5.x"
sentiment "4.2.x"
@ -2752,7 +2751,7 @@ concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
concat-stream@1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
dependencies:
@ -2760,6 +2759,14 @@ concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@
readable-stream "^2.2.2"
typedarray "^0.0.6"
concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.1.tgz#261b8f518301f1d834e36342b9fea095d2620a26"
dependencies:
inherits "^2.0.3"
readable-stream "^2.2.2"
typedarray "^0.0.6"
configstore@^3.0.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
@ -3000,14 +3007,14 @@ copy-descriptor@^0.1.0:
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
copy-webpack-plugin@^4.3.0:
version "4.4.2"
resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.2.tgz#c92bcd7df4d5e42c51398cc36b23820d0d10446a"
version "4.4.3"
resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.3.tgz#65d56fb9e1936b39e129f9aa2aec097ce1fd44be"
dependencies:
cacache "^10.0.1"
find-cache-dir "^1.0.0"
globby "^7.1.1"
is-glob "^4.0.0"
loader-utils "^0.2.15"
loader-utils "^1.1.0"
minimatch "^3.0.4"
p-limit "^1.0.0"
serialize-javascript "^1.4.0"
@ -3493,10 +3500,6 @@ depd@~1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
deprecated-decorator@^0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz#00966317b7a12fe92f3cc831f7583af329b86c37"
des.js@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@ -5140,16 +5143,6 @@ graphql-tag@^2.6.1, graphql-tag@^2.7.3, graphql-tag@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.8.0.tgz#52cdea07a842154ec11a2e840c11b977f9b835ce"
graphql-tools@2.21.x:
version "2.21.0"
resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.21.0.tgz#c0d0fbda6f40a87c8d267a2989ade2ae8b9a288e"
dependencies:
apollo-link "^1.1.0"
apollo-utilities "^1.0.1"
deprecated-decorator "^0.1.6"
iterall "^1.1.3"
uuid "^3.1.0"
graphql@0.12.x, graphql@^0.12.3:
version "0.12.3"
resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.12.3.tgz#11668458bbe28261c0dcb6e265f515ba79f6ce07"
@ -6249,10 +6242,6 @@ iterall@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
iterall@^1.1.3:
version "1.2.2"
resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
javascript-stringify@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
@ -6915,7 +6904,7 @@ loader-runner@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
loader-utils@^0.2.15, loader-utils@^0.2.16:
loader-utils@^0.2.16:
version "0.2.17"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
dependencies: