feat: upgrade graphql with dc and pagination
This commit is contained in:
Sérgio Ramos
parent
c6b245aebc
commit
bf0a1a0ba0
@ -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",
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 |
@ -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>
|
||||
|
||||
@ -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 |
@ -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>
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 |
@ -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}`;
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
@ -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', []);
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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'
|
||||
);
|
||||
|
||||
@ -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, {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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)
|
||||
);
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
mutation addMachineTags($id: ID!, $tags: DynamicObjectType!) {
|
||||
addMachineTags(id: $id, tags: $tags)
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
query Account {
|
||||
datacenter {
|
||||
name
|
||||
}
|
||||
account {
|
||||
id
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
query Image($name: String) {
|
||||
images(name: $name) {
|
||||
id
|
||||
name
|
||||
os
|
||||
version
|
||||
type
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
query instance($name: String) {
|
||||
machines(name: $name) {
|
||||
id
|
||||
results {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
query packages($id: ID) {
|
||||
packages(id: $id) {
|
||||
id
|
||||
name
|
||||
memory
|
||||
disk
|
||||
swap
|
||||
lwps
|
||||
vcpus
|
||||
version
|
||||
group
|
||||
description
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
query instance($name: String!) {
|
||||
machines(name: $name) {
|
||||
id
|
||||
name
|
||||
dns_names
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
query instance($name: String!) {
|
||||
machines(name: $name) {
|
||||
id
|
||||
name
|
||||
metadata {
|
||||
results {
|
||||
id
|
||||
name
|
||||
value
|
||||
metadata {
|
||||
id
|
||||
name
|
||||
value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
query packages {
|
||||
packages {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
query instance($name: String!) {
|
||||
machines(name: $name) {
|
||||
id
|
||||
name
|
||||
tags {
|
||||
results {
|
||||
id
|
||||
name
|
||||
value
|
||||
tags {
|
||||
id
|
||||
name
|
||||
value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
mutation resizeInstance($id: ID!, $package: ID!) {
|
||||
resizeMachine(id: $id, package: $package)
|
||||
}
|
||||
@ -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, {
|
||||
|
||||
47
yarn.lock
47
yarn.lock
@ -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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user