Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: upgrade graphql with dc and pagination

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundle/package.json
View File

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

2
bundle/src/index.js
View File

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

2
packages/my-joy-images/src/containers/create.js
View File

@ -102,7 +102,7 @@ export default compose(
}), }),
props: ({ data: { loading, error, variables, ...rest } }) => { props: ({ data: { loading, error, variables, ...rest } }) => {
const notFoundMsg = `Instance "${variables.name}" not found!`; 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; const notFound = !loading && !inst ? notFoundMsg : false;
return { return {

2
packages/my-joy-images/src/graphql/get-instance.gql
View File

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

BIN
packages/my-joy-instances/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

5
packages/my-joy-instances/src/components/cns.js
View File

@ -57,7 +57,10 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
</Margin> </Margin>
{enabled ? ( {enabled ? (
<Margin bottom={4}> <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> </Margin>
) : null} ) : null}
</Fragment> </Fragment>

252
packages/my-joy-instances/src/components/create-instance/network.js
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} />;

BIN
packages/my-joy-instances/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
packages/my-joy-instances/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
packages/my-joy-instances/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
packages/my-joy-instances/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-networks-expanded-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 60 KiB

435
packages/my-joy-instances/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
View File

@ -1055,7 +1055,7 @@ Array [
cursor: not-allowed; cursor: not-allowed;
} }
.c16 { .c17 {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
@ -1091,7 +1091,7 @@ Array [
display: block; display: block;
} }
.c12 { .c13 {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-weight: 600; font-weight: 600;
line-height: 1.5rem; line-height: 1.5rem;
@ -1099,20 +1099,20 @@ Array [
margin: 0; margin: 0;
} }
.c12 + p, .c13 + p,
.c12 + small, .c13 + small,
.c12 + h1, .c13 + h1,
.c12 + h2, .c13 + h2,
.c12 + label, .c13 + label,
.c12 + h3, .c13 + h3,
.c12 + h4, .c13 + h4,
.c12 + h5, .c13 + h5,
.c12 + div, .c13 + div,
.c12 + span { .c13 + span {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.c30 { .c31 {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-weight: 600; font-weight: 600;
line-height: 1.5rem; line-height: 1.5rem;
@ -1122,24 +1122,24 @@ Array [
color: rgb(255,255,255); color: rgb(255,255,255);
} }
.c30 + p, .c31 + p,
.c30 + small, .c31 + small,
.c30 + h1, .c31 + h1,
.c30 + h2, .c31 + h2,
.c30 + label, .c31 + label,
.c30 + h3, .c31 + h3,
.c30 + h4, .c31 + h4,
.c30 + h5, .c31 + h5,
.c30 + div, .c31 + div,
.c30 + span { .c31 + span {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.c21 { .c22 {
margin-right: 0.375rem; margin-right: 0.375rem;
} }
.c15 { .c16 {
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
@ -1147,24 +1147,29 @@ Array [
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.c18 { .c19 {
margin-right: 1.5rem; margin-right: 1.5rem;
} }
.c22 { .c23 {
margin-top: 1.125rem; margin-top: 1.125rem;
} }
.c14 { .c12 {
padding-right: 0rem;
padding-left: 0rem;
}
.c15 {
padding: 1.5rem; padding: 1.5rem;
} }
.c26 { .c27 {
padding-right: 1.125rem; padding-right: 1.125rem;
padding-left: 1.125rem; padding-left: 1.125rem;
} }
.c17 { .c18 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -1184,7 +1189,7 @@ Array [
align-content: stretch; align-content: stretch;
} }
.c20 { .c21 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -1208,7 +1213,7 @@ Array [
align-items: center; align-items: center;
} }
.c19 { .c20 {
-webkit-order: 0; -webkit-order: 0;
-ms-flex-order: 0; -ms-flex-order: 0;
order: 0; order: 0;
@ -1399,7 +1404,7 @@ Array [
color: inherit; color: inherit;
} }
.c13 { .c14 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1435,15 +1440,15 @@ Array [
background-color: transparent; background-color: transparent;
} }
.c13 > [name='card']:not(:last-child) { .c14 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
.c13 > [name='card']:last-child { .c14 > [name='card']:last-child {
margin-bottom: 0.4375rem; margin-bottom: 0.4375rem;
} }
.c23 { .c24 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1471,7 +1476,7 @@ Array [
flex: 0 0 2.875rem; flex: 0 0 2.875rem;
} }
.c24 { .c25 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1509,12 +1514,12 @@ Array [
box-shadow: none; box-shadow: none;
} }
.c24 button { .c25 button {
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
.c25 { .c26 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1573,7 +1578,7 @@ Array [
color: inherit; color: inherit;
} }
.c27 { .c28 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1611,12 +1616,12 @@ Array [
margin: -0.0625rem -0.0625rem 0 -0.0625rem; margin: -0.0625rem -0.0625rem 0 -0.0625rem;
} }
.c27 button { .c28 button {
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
.c28 { .c29 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1672,7 +1677,7 @@ Array [
box-shadow: none; box-shadow: none;
} }
.c29 { .c30 {
box-sizing: content-box; box-sizing: content-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1889,32 +1894,33 @@ Array [
disabled={false} disabled={false}
name="card-header-meta" name="card-header-meta"
> >
<h4 <div
className="c12" className="c12"
>
<h4
className="c13"
> >
name name
</h4> </h4>
</div> </div>
</div> </div>
<div </div>
className="c13"
name="card-outlet"
>
<div <div
className="c14" className="c14"
name="card-outlet"
> >
<div <div
className="c15" className="c15"
> >
<p <div
className="c16" className="c16"
>
<p
className="c17"
> >
description description
</p> </p>
</div> </div>
<div
className="c17"
>
<div <div
className="c18" className="c18"
> >
@ -1925,10 +1931,13 @@ Array [
className="c20" className="c20"
> >
<div <div
className="c19" className="c21"
> >
<div <div
className="c21" className="c20"
>
<div
className="c22"
> >
<svg <svg
className="" className=""
@ -1951,10 +1960,10 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c19" className="c20"
> >
<p <p
className="c16" className="c17"
> >
Private Private
</p> </p>
@ -1962,9 +1971,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
className="c18"
>
<div <div
className="c19" className="c19"
> >
@ -1972,10 +1978,13 @@ Array [
className="c20" className="c20"
> >
<div <div
className="c19" className="c21"
> >
<div <div
className="c21" className="c20"
>
<div
className="c22"
> >
<svg <svg
height="16.2" height="16.2"
@ -1991,10 +2000,10 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c19" className="c20"
> >
<p <p
className="c16" className="c17"
> >
Fabric network Fabric network
</p> </p>
@ -2002,31 +2011,165 @@ Array [
</div> </div>
</div> </div>
</div> </div>
</div> <div
className="c19"
>
<div
className="c20"
>
<div
className="c21"
>
<div
className="c20"
>
<div <div
className="c22" 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 <div
className="c23" className="c23"
>
<div
className="c24"
disabled={false} disabled={false}
name="card" name="card"
> >
<div <div
className="c24" className="c25"
disabled={false} disabled={false}
name="card-header" name="card-header"
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="c25" className="c26"
disabled={false} disabled={false}
name="card-header-meta" name="card-header-meta"
> >
<div <div
className="c26" className="c27"
> >
<p <p
className="c16" className="c17"
> >
Network information Network information
</p> </p>
@ -2080,12 +2223,12 @@ Array [
name="card" name="card"
> >
<div <div
className="c27" className="c28"
disabled={false} disabled={false}
name="card-header" name="card-header"
> >
<div <div
className="c28" className="c29"
disabled={false} disabled={false}
name="card-header-box" name="card-header-box"
> >
@ -2123,36 +2266,37 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c29" className="c30"
disabled={false} disabled={false}
name="card-header-meta" name="card-header-meta"
>
<div
className="c12"
> >
<h4 <h4
className="c30" className="c31"
> >
name2 name2
</h4> </h4>
</div> </div>
</div> </div>
<div </div>
className="c13"
name="card-outlet"
>
<div <div
className="c14" className="c14"
name="card-outlet"
> >
<div <div
className="c15" className="c15"
> >
<p <div
className="c16" className="c16"
>
<p
className="c17"
> >
description2 description2
</p> </p>
</div> </div>
<div
className="c17"
>
<div <div
className="c18" className="c18"
> >
@ -2163,10 +2307,13 @@ Array [
className="c20" className="c20"
> >
<div <div
className="c19" className="c21"
> >
<div <div
className="c21" className="c20"
>
<div
className="c22"
> >
<svg <svg
className="" className=""
@ -2189,10 +2336,10 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c19" className="c20"
> >
<p <p
className="c16" className="c17"
> >
Private Private
</p> </p>
@ -2200,9 +2347,6 @@ Array [
</div> </div>
</div> </div>
</div> </div>
<div
className="c18"
>
<div <div
className="c19" className="c19"
> >
@ -2210,10 +2354,13 @@ Array [
className="c20" className="c20"
> >
<div <div
className="c19" className="c21"
> >
<div <div
className="c21" className="c20"
>
<div
className="c22"
> >
<svg <svg
height="13" height="13"
@ -2229,10 +2376,10 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c19" className="c20"
> >
<p <p
className="c16" className="c17"
> >
Data center network Data center network
</p> </p>
@ -2547,14 +2694,14 @@ Array [
s s
added added
</h3>, </h3>,
.c5 { .c7 {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
margin: 0; margin: 0;
} }
.c7 { .c0 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -2573,34 +2720,44 @@ Array [
margin-left: -0.625rem; 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); background-color: rgb(216,216,216);
margin: 0; margin: 0;
height: 0.0625rem; height: 0.0625rem;
} }
.c11 { .c12 {
margin-right: 0.375rem; margin-right: 0.375rem;
} }
.c9 { .c10 {
margin-right: 1.5rem; margin-right: 1.5rem;
} }
.c0 { .c2 {
display: inline-block; display: inline-block;
margin-top: 1.125rem; margin-top: 1.125rem;
margin-right: 1.125rem; margin-right: 1.125rem;
} }
.c4 { .c6 {
margin-top: 0.75rem; margin-top: 0.75rem;
margin-right: 1.125rem; margin-right: 1.125rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
margin-left: 1.125rem; margin-left: 1.125rem;
} }
.c8 { .c9 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -2620,7 +2777,7 @@ Array [
align-content: stretch; align-content: stretch;
} }
.c10 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -2644,7 +2801,7 @@ Array [
align-items: center; align-items: center;
} }
.c2 { .c4 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -2667,7 +2824,7 @@ Array [
flex-direction: column; flex-direction: column;
} }
.c3 { .c5 {
-webkit-order: 0; -webkit-order: 0;
-ms-flex-order: 0; -ms-flex-order: 0;
order: 0; order: 0;
@ -2684,7 +2841,7 @@ Array [
display: block; display: block;
} }
.c1 { .c3 {
display: inline-block; display: inline-block;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
@ -2692,6 +2849,24 @@ Array [
min-width: 18.75rem; 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> <form>
<div <div
className="c0" className="c0"
@ -2708,44 +2883,50 @@ Array [
<div <div
className="c4" className="c4"
> >
<p <div
className="c5" className="c5"
>
<div
className="c6"
>
<p
className="c7"
> >
name2 name2
</p> </p>
</div> </div>
</div> </div>
<div <div
className="c3" className="c5"
> >
<div <div
className="c6 c7" className="c8 c0"
height="0.0625rem" height="0.0625rem"
/> />
</div> </div>
<div <div
className="c3" className="c5"
> >
<div <div
className="c4" className="c6"
>
<div
className="c8"
> >
<div <div
className="c9" className="c9"
>
<div
className="c3"
> >
<div <div
className="c10" className="c10"
> >
<div <div
className="c3" className="c5"
> >
<div <div
className="c11" className="c11"
>
<div
className="c5"
>
<div
className="c12"
> >
<svg <svg
className="" className=""
@ -2768,10 +2949,10 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c3" className="c5"
> >
<p <p
className="c5" className="c7"
> >
Private Private
</p> </p>
@ -2783,16 +2964,16 @@ Array [
className="" className=""
> >
<div <div
className="c3" className="c5"
>
<div
className="c10"
>
<div
className="c3"
> >
<div <div
className="c11" className="c11"
>
<div
className="c5"
>
<div
className="c12"
> >
<svg <svg
height="13" height="13"
@ -2808,10 +2989,10 @@ Array [
</div> </div>
</div> </div>
<div <div
className="c3" className="c5"
> >
<p <p
className="c5" className="c7"
> >
Data center network Data center network
</p> </p>
@ -2825,6 +3006,8 @@ Array [
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</form>, </form>,
.c3 { .c3 {
font-family: sans-serif; font-family: sans-serif;

31
packages/my-joy-instances/src/containers/create-instance/cns.js
View File

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

1
packages/my-joy-instances/src/containers/create-instance/name.js
View File

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

2
packages/my-joy-instances/src/containers/create-instance/networks.js
View File

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

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

28
packages/my-joy-instances/src/containers/instances/cns.js
View File

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

2
packages/my-joy-instances/src/containers/instances/firewall.js
View File

@ -145,7 +145,7 @@ export default compose(
const { loading, error, variables, refetch, ...rest } = data; const { loading, error, variables, refetch, ...rest } = data;
const { name } = variables; 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 enabled = get(instance, 'firewall_enabled');
const rules = get(instance, 'firewall_rules', []); const rules = get(instance, 'firewall_rules', []);

3
packages/my-joy-instances/src/containers/instances/list.js
View File

@ -184,7 +184,8 @@ export default compose(
ssr: false, ssr: false,
pollInterval: 1000 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 }) => ({ const instances = forceArray(machines).map(({ state, ...machine }) => ({
...machine, ...machine,
state, state,

2
packages/my-joy-instances/src/containers/instances/metadata.js
View File

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

2
packages/my-joy-instances/src/containers/instances/snapshots.js
View File

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

5
packages/my-joy-instances/src/containers/instances/summary.js
View File

@ -145,7 +145,10 @@ export default compose(
} }
}), }),
props: ({ data: { loading, error, variables, ...rest } }) => { 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) { if (instance) {
const { ips } = instance; const { ips } = instance;

2
packages/my-joy-instances/src/containers/instances/tags.js
View File

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

2
packages/my-joy-instances/src/containers/instances/user-script.js
View File

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

3
packages/my-joy-instances/src/graphql/add-tags.gql
View File

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

3
packages/my-joy-instances/src/graphql/get-account.gql
View File

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

9
packages/my-joy-instances/src/graphql/get-image.gql
View File

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

2
packages/my-joy-instances/src/graphql/get-instance-small.gql
View File

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

2
packages/my-joy-instances/src/graphql/get-instance.gql
View File

@ -1,5 +1,6 @@
query instance($name: String) { query instance($name: String) {
machines(name: $name) { machines(name: $name) {
results {
id id
state state
brand brand
@ -21,3 +22,4 @@ query instance($name: String) {
} }
} }
} }
}

14
packages/my-joy-instances/src/graphql/get-package.gql
View File

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

7
packages/my-joy-instances/src/graphql/list-dns.gql
View File

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

2
packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql
View File

@ -1,5 +1,6 @@
query instance($name: String!) { query instance($name: String!) {
machines(name: $name) { machines(name: $name) {
results {
id id
name name
firewall_enabled firewall_enabled
@ -13,3 +14,4 @@ query instance($name: String!) {
} }
} }
} }
}

2
packages/my-joy-instances/src/graphql/list-instance-networks.gql
View File

@ -1,5 +1,6 @@
query instance($name: String!) { query instance($name: String!) {
machines(name: $name) { machines(name: $name) {
results {
id id
name name
networks { networks {
@ -21,3 +22,4 @@ query instance($name: String!) {
} }
} }
} }
}

2
packages/my-joy-instances/src/graphql/list-instances.gql
View File

@ -1,5 +1,6 @@
query instances { query instances {
machines { machines {
results {
id id
name name
state state
@ -18,3 +19,4 @@ query instances {
} }
} }
} }
}

2
packages/my-joy-instances/src/graphql/list-metadata.gql
View File

@ -1,5 +1,6 @@
query instance($name: String!) { query instance($name: String!) {
machines(name: $name) { machines(name: $name) {
results {
id id
name name
metadata { metadata {
@ -9,3 +10,4 @@ query instance($name: String!) {
} }
} }
} }
}

6
packages/my-joy-instances/src/graphql/list-packages.gql
View File

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

2
packages/my-joy-instances/src/graphql/list-snapshots.gql
View File

@ -1,5 +1,6 @@
query instance($name: String!) { query instance($name: String!) {
machines(name: $name) { machines(name: $name) {
results {
id id
name name
snapshots { snapshots {
@ -11,3 +12,4 @@ query instance($name: String!) {
} }
} }
} }
}

2
packages/my-joy-instances/src/graphql/list-tags.gql
View File

@ -1,5 +1,6 @@
query instance($name: String!) { query instance($name: String!) {
machines(name: $name) { machines(name: $name) {
results {
id id
name name
tags { tags {
@ -9,3 +10,4 @@ query instance($name: String!) {
} }
} }
} }
}

3
packages/my-joy-instances/src/graphql/resize-instance.gql
View File

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

27
packages/my-joy-navigation/src/header.js
View File

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

47
yarn.lock
View File

@ -487,7 +487,7 @@ apollo-link-state@^0.4.0:
apollo-utilities "^1.0.6" apollo-utilities "^1.0.6"
graphql-anywhere "^4.1.0-alpha.0" 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" version "1.2.1"
resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2" resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
dependencies: dependencies:
@ -499,7 +499,7 @@ apollo-server-module-graphiql@^1.3.2:
version "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" 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" version "1.0.8"
resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.8.tgz#74d797d38953d2ba35e16f880326e2abcbc8b016" 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" version "1.0.3"
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
cloudapi-gql@^6.1.1: cloudapi-gql@^7.1.1:
version "6.1.1" version "7.1.1"
resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-6.1.1.tgz#2f48b12b2f96612f62759eac6c5280573bc4ba49" resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-7.1.1.tgz#54e7d979d32d4542f5f41ffe0fe33b477f9d71a0"
dependencies: dependencies:
apr-map "3.x.x" apr-map "3.x.x"
boom "7.x.x" boom "7.x.x"
@ -2578,7 +2578,6 @@ cloudapi-gql@^6.1.1:
force-array "3.1.x" force-array "3.1.x"
fwrule "1.4.x" fwrule "1.4.x"
graphi "5.x.x" graphi "5.x.x"
graphql-tools "2.21.x"
hasha "3.0.x" hasha "3.0.x"
lodash.uniq "4.5.x" lodash.uniq "4.5.x"
sentiment "4.2.x" sentiment "4.2.x"
@ -2752,7 +2751,7 @@ concat-map@0.0.1:
version "0.0.1" version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" 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" version "1.6.0"
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7" resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
dependencies: 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" readable-stream "^2.2.2"
typedarray "^0.0.6" 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: configstore@^3.0.0:
version "3.1.1" version "3.1.1"
resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90" 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" resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
copy-webpack-plugin@^4.3.0: copy-webpack-plugin@^4.3.0:
version "4.4.2" version "4.4.3"
resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.2.tgz#c92bcd7df4d5e42c51398cc36b23820d0d10446a" resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.3.tgz#65d56fb9e1936b39e129f9aa2aec097ce1fd44be"
dependencies: dependencies:
cacache "^10.0.1" cacache "^10.0.1"
find-cache-dir "^1.0.0" find-cache-dir "^1.0.0"
globby "^7.1.1" globby "^7.1.1"
is-glob "^4.0.0" is-glob "^4.0.0"
loader-utils "^0.2.15" loader-utils "^1.1.0"
minimatch "^3.0.4" minimatch "^3.0.4"
p-limit "^1.0.0" p-limit "^1.0.0"
serialize-javascript "^1.4.0" serialize-javascript "^1.4.0"
@ -3493,10 +3500,6 @@ depd@~1.1.1:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" 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: des.js@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc" 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" version "2.8.0"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.8.0.tgz#52cdea07a842154ec11a2e840c11b977f9b835ce" 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: graphql@0.12.x, graphql@^0.12.3:
version "0.12.3" version "0.12.3"
resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.12.3.tgz#11668458bbe28261c0dcb6e265f515ba79f6ce07" resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.12.3.tgz#11668458bbe28261c0dcb6e265f515ba79f6ce07"
@ -6249,10 +6242,6 @@ iterall@1.1.3:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9" 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: javascript-stringify@^1.6.0:
version "1.6.0" version "1.6.0"
resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3" 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" version "2.3.0"
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2" 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" version "0.2.17"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
dependencies: dependencies: