feat: upgrade graphql with dc and pagination
This commit is contained in:
Sérgio Ramos
parent
c6b245aebc
commit
bf0a1a0ba0
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
query instance($name: String) {
|
query instance($name: String) {
|
||||||
machines(name: $name) {
|
machines(name: $name) {
|
||||||
|
results {
|
||||||
id
|
id
|
||||||
name
|
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>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
|
||||||
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>
|
<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}`;
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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', []);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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, {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
mutation addMachineTags($id: ID!, $tags: DynamicObjectType!) {
|
|
||||||
addMachineTags(id: $id, tags: $tags)
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
query Account {
|
query Account {
|
||||||
|
datacenter {
|
||||||
|
name
|
||||||
|
}
|
||||||
account {
|
account {
|
||||||
id
|
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) {
|
query instance($name: String) {
|
||||||
machines(name: $name) {
|
machines(name: $name) {
|
||||||
|
results {
|
||||||
id
|
id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,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!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
query instances {
|
query instances {
|
||||||
machines {
|
machines {
|
||||||
|
results {
|
||||||
id
|
id
|
||||||
name
|
name
|
||||||
state
|
state
|
||||||
|
|
@ -18,3 +19,4 @@ query instances {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
query packages {
|
|
||||||
packages {
|
|
||||||
id
|
|
||||||
name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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`
|
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
47
yarn.lock
|
|
@ -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:
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue