feat(instances): bug fixes #1387

This commit is contained in:
johnytiago 2018-05-17 11:05:28 +01:00 committed by Sérgio Ramos
parent 5d46689869
commit 0189822a08
22 changed files with 16180 additions and 19354 deletions

View File

@ -12,7 +12,7 @@ import {
CardOutlet,
H2,
P,
Label,
Label as BaseLabel,
Divider,
Button,
QueryBreakpoints,
@ -42,6 +42,10 @@ const VerticalDivider = styled.div`
}
`;
const Label = styled(BaseLabel)`
font-weight: 200;
`;
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
@ -147,7 +151,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
<Margin right="1">
<DeleteIcon fill={theme.red} />
</Margin>
<span>Remove</span>
<span>Delete</span>
</Button>
</Medium>
</Col>

View File

@ -1050,7 +1050,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -2133,7 +2133,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

View File

@ -1,6 +1,8 @@
import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { withTheme } from 'styled-components';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import {
Button,
@ -25,9 +27,10 @@ export default withTheme(
onRemove,
theme = {}
}) => (
<StickyFooter fixed bottom>
<StickyFooter fixed bottom fill="#FAFAFA">
<Row between="xs" middle="xs">
<Col xs={7}>
<Flex>
{onStart && [
<SmallOnly key="small-only">
<Button
@ -42,6 +45,7 @@ export default withTheme(
<StartIcon disabled={submitting || !allowedActions.start} />
</Button>
</SmallOnly>,
<Margin right={1}>
<Medium key="medium">
<Button
type="button"
@ -51,10 +55,15 @@ export default withTheme(
secondary
icon
>
<StartIcon disabled={submitting || !allowedActions.start} />
<Margin right={1}>
<StartIcon
disabled={submitting || !allowedActions.start}
/>
</Margin>
<span>Start</span>
</Button>
</Medium>
</Margin>
]}
{onStop && [
<SmallOnly key="small-only">
@ -70,6 +79,7 @@ export default withTheme(
<StopIcon disabled={submitting || !allowedActions.stop} />
</Button>
</SmallOnly>,
<Margin right={1}>
<Medium key="medium">
<Button
type="button"
@ -79,10 +89,13 @@ export default withTheme(
secondary
icon
>
<Margin right={1}>
<StopIcon disabled={submitting || !allowedActions.stop} />
</Margin>
<span>Stop</span>
</Button>
</Medium>
</Margin>
]}
{onReboot && [
<SmallOnly key="small-only">
@ -98,6 +111,7 @@ export default withTheme(
<ResetIcon disabled={submitting || !allowedActions.reboot} />
</Button>
</SmallOnly>,
<Margin right={1}>
<Medium key="medium">
<Button
type="button"
@ -107,11 +121,15 @@ export default withTheme(
secondary
icon
>
<ResetIcon disabled={submitting || !allowedActions.reboot} />
<ResetIcon
disabled={submitting || !allowedActions.reboot}
/>
<span>Reboot</span>
</Button>
</Medium>
</Margin>
]}
</Flex>
</Col>
{onRemove && (
<Col xs={5}>
@ -148,6 +166,7 @@ export default withTheme(
right
icon
>
<Margin right={1}>
<DeleteIcon
disabled={submitting || !allowedActions.remove}
fill={
@ -156,6 +175,7 @@ export default withTheme(
: undefined
}
/>
</Margin>
<span>Remove</span>
</Button>
</Medium>

View File

@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
import { Field } from 'redux-form';
import Flex from 'styled-flex-component';
import queryString from 'query-string';
import { Padding } from 'styled-components-spacing';
import {
Anchor,
@ -24,8 +25,8 @@ import {
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
PopoverDivider,
PopoverItem as BasePopoverItem,
PopoverDivider as BasePopoverDivider,
DotIcon,
ActionsIcon
} from 'joyent-ui-toolkit';
@ -66,6 +67,14 @@ const Actions = styled(Flex)`
height: ${remcalc(48)};
`;
const PopoverItem = styled(BasePopoverItem)`
padding-bottom: ${remcalc(11)};
`;
const PopoverDivider = styled(BasePopoverDivider)`
margin-left: ${remcalc(-18)};
`;
export const FetchingItem = () => (
<TableTr colSpan="6">
<TableTd colSpan="6" middle center>
@ -131,9 +140,14 @@ export const Item = ({
Stop
</PopoverItem>
<PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
Reboot
Restart
</PopoverItem>
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
Delete
</PopoverItem>
<Padding bottom={2}>
<PopoverDivider />
</Padding>
<PopoverItem disabled={false} onClick={onCreateImage}>
<ItemAnchor
href={`${GLOBAL.origin}/images/~create/${id}`}
@ -143,10 +157,6 @@ export const Item = ({
Create Image
</ItemAnchor>
</PopoverItem>
<PopoverDivider />
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
Remove
</PopoverItem>
</Popover>
</TableTd>
</PopoverContainer>

View File

@ -1,6 +1,7 @@
import React from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { default as Flex, FlexItem } from 'styled-flex-component';
import styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import titleCase from 'title-case';
@ -12,10 +13,12 @@ import {
Card,
CardOutlet,
Divider,
ResetIcon,
Button as BaseButton,
Button,
ButtonGroup,
PopoverButton,
PopoverItem as BasePopoverItem,
H2 as BaseH2,
Label,
Label as BaseLabel,
CopiableField,
QueryBreakpoints,
DotIcon,
@ -23,7 +26,6 @@ import {
StartIcon,
StopIcon,
EditIcon,
InstanceTypeIcon,
Input,
FormMeta,
FormGroup
@ -42,6 +44,10 @@ const stateColor = {
FAILED: 'red'
};
const Label = styled(BaseLabel)`
font-weight: 200;
`;
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
@ -53,16 +59,6 @@ const TrimedLabel = styled(Label)`
text-overflow: ellipsis;
`;
const Flex = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
@media (max-width: ${remcalc(767)}) {
display: block;
}
`;
const Actionable = styled(Margin)`
cursor: pointer;
`;
@ -84,8 +80,8 @@ const H2 = styled(BaseH2)`
margin: 0;
`;
const Button = styled(BaseButton)`
margin-right: ${remcalc(6)};
const PopoverItem = styled(BasePopoverItem)`
padding-bottom: ${remcalc(11)};
`;
export const Meta = ({
@ -107,7 +103,7 @@ export const Meta = ({
<H2>
{editingName ? (
<form onSubmit={handleSubmit}>
<Flex style={{ alignItems: 'start' }}>
<Flex alignStart>
<FormGroup name="name" field={Field}>
<Input
onBlur={null}
@ -200,50 +196,11 @@ export default withTheme(
<Margin top={3}>
<Row between="xs">
<Col xs={9}>
<Button
href={`${GLOBAL.origin}/images/~create/${instance.id}`}
target="__blank"
rel="noopener noreferrer"
secondary
bold
small
icon
>
<Padding top={0.5}>
<InstanceTypeIcon />
</Padding>
</Button>
<SmallOnly>
<Button
href={`${GLOBAL.origin}/images/~create/${instance.id}`}
target="__blank"
rel="noopener noreferrer"
secondary
bold
small
icon
>
<Padding top={0}>
<InstanceTypeIcon />
</Padding>
</Button>
</SmallOnly>
<SmallOnly>
<Button
type="button"
loading={starting}
disabled={instance.state !== 'STOPPED'}
onClick={() => onAction('start')}
secondary
small
icon
>
<Margin right={2}>
<StartIcon disabled={instance.state !== 'STOPPED'} />
</Margin>
</Button>
</SmallOnly>
<Medium>
<Flex>
<FlexItem>
<Margin right={1}>
<ButtonGroup>
{instance.state === 'STOPPED' ? (
<Button
type="button"
loading={starting}
@ -254,27 +211,13 @@ export default withTheme(
icon
>
<Margin right={2}>
<StartIcon disabled={instance.state !== 'STOPPED'} />
<StartIcon
disabled={instance.state !== 'STOPPED'}
/>
</Margin>
<span>Start</span>
</Button>
</Medium>
<SmallOnly>
<Button
type="button"
loading={stopping}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('stop')}
secondary
small
icon
>
<Margin right={2}>
<StopIcon disabled={instance.state !== 'RUNNING'} />
</Margin>
</Button>
</SmallOnly>
<Medium>
) : (
<Button
type="button"
loading={stopping}
@ -285,42 +228,63 @@ export default withTheme(
icon
>
<Margin right={2}>
<StopIcon disabled={instance.state !== 'RUNNING'} />
<StopIcon
disabled={instance.state !== 'RUNNING'}
/>
</Margin>
<span>Stop</span>
</Button>
</Medium>
<SmallOnly>
<Button
type="button"
loading={rebooting}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('reboot')}
secondary
small
icon
)}
<PopoverButton secondary>
<PopoverItem
disabled={instance.state === 'RUNNING'}
onClick={() =>
instance.state === 'RUNNING'
? null
: onAction('start')
}
>
<Margin right={2}>
<ResetIcon disabled={instance.state !== 'RUNNING'} />
Start
</PopoverItem>
<PopoverItem
disabled={instance.state === 'STOPPED'}
onClick={() =>
instance.state === 'STOPPED'
? null
: onAction('reboot')
}
>
Restart
</PopoverItem>
<PopoverItem
disabled={instance.state === 'STOPPED'}
onClick={() =>
instance.state === 'STOPPED'
? null
: onAction('stop')
}
>
Stop
</PopoverItem>
</PopoverButton>
</ButtonGroup>
</Margin>
</Button>
</SmallOnly>
<Medium>
</FlexItem>
<FlexItem>
<Button
type="button"
loading={rebooting}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('reboot')}
href={`${GLOBAL.origin}/images/~create/${
instance.id
}`}
target="__blank"
rel="noopener noreferrer"
secondary
bold
icon
>
<Margin right={2}>
<ResetIcon disabled={instance.state !== 'RUNNING'} />
</Margin>
<span>Reboot</span>
Create Image
</Button>
</Medium>
</FlexItem>
</Flex>
</Col>
<Col xs={3}>
<SmallOnly>
@ -374,7 +338,7 @@ export default withTheme(
}
/>
</Margin>
<span>Remove</span>
<span>Delete</span>
</Button>
</Medium>
</Col>

View File

@ -1738,7 +1738,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -4295,7 +4295,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -4525,7 +4525,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

View File

@ -207,11 +207,15 @@ exports[`renders <Networks /> without throwing 1`] = `
</div>
</div>
</div>
<div
className="c2"
>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c8 c9"
disabled={false}
@ -700,11 +704,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
</div>
</div>
</div>
<div
className="c2"
>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c8"
>
@ -924,11 +932,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
</div>
</div>
</div>
<div
className="c2"
>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c8"
>
@ -1438,11 +1450,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
</div>
</div>
</div>
<div
className="c2"
>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c3"
>

View File

@ -1687,7 +1687,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -3464,7 +3464,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

View File

@ -1,12 +1,12 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import React from 'react';
import intercept from 'apr-intercept';
import { connect } from 'react-redux';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { SubmissionError } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import { default as Flex, FlexItem } from 'styled-flex-component';
import isBoolean from 'lodash.isboolean';
import get from 'lodash.get';
@ -15,8 +15,7 @@ import {
Message,
MessageTitle,
MessageDescription,
StatusLoader,
Divider
StatusLoader
} from 'joyent-ui-toolkit';
import {
@ -70,6 +69,8 @@ export const Firewall = ({
</Message>
</Margin>
) : null}
<Flex>
<FlexItem>
<ReduxForm
form="fw-enabled"
destroyOnUnmount={false}
@ -79,15 +80,14 @@ export const Firewall = ({
>
{props =>
loading ? null : (
<Fragment>
<Margin bottom={5}>
<Margin right={5}>
<ToggleFirewallForm {...props} submitOnChange />
</Margin>
<Divider height={remcalc(1)} />
</Fragment>
)
}
</ReduxForm>
</FlexItem>
<FlexItem>
<ReduxForm
form="fw-inactive"
destroyOnUnmount={false}
@ -95,13 +95,11 @@ export const Firewall = ({
initialValues={{ inactive }}
>
{props =>
!enabled || loading ? null : (
<Margin top={4}>
<ToggleInactiveForm {...props} />
</Margin>
)
!enabled || loading ? null : <ToggleInactiveForm {...props} />
}
</ReduxForm>
</FlexItem>
</Flex>
{!loading && !defaultRules.length && !tagRules.length ? (
<Margin top={5}>
<Empty borderTop>

View File

@ -37,7 +37,9 @@ export const Networks = ({
complete control over the network environment. Read more on fabrics.
</Description>
</Margin>
<Margin bottom={3}>
<H3>Networks attached to this instance</H3>
</Margin>
{loading ? <StatusLoader /> : null}
{!loading && error && !networks.length ? (
<Margin bottom={5}>
@ -79,14 +81,14 @@ export default compose(
}
}),
props: ({ data }) => {
console.log(data);
const { loading, error, variables } = data;
const { id } = variables;
const machines = get(data, 'machines.results', []);
const machines = get(data, 'machine', []);
const instance = find(forceArray(machines), ['id', id]);
const values = get(instance, 'networks', []);
const networks = reverse(sortBy(values, 'public'));
return {
networks,
instance,

View File

@ -96,11 +96,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c10 {
@ -1449,11 +1444,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -1852,11 +1842,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -2255,11 +2240,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -2662,11 +2642,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -3073,11 +3048,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -3580,11 +3550,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c10 {

View File

@ -76,7 +76,7 @@ const Rule = ({ enabled, rule_obj }) => {
<Padding left={3} right={3} top={2} bottom={2}>
<Row>
<Col xs={3}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>From: </Strong>
@ -86,7 +86,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={3}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>To: </Strong>
@ -96,7 +96,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={2}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>Protocol: </Strong>
@ -108,7 +108,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={2}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>Ports: </Strong>
@ -120,7 +120,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={2}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>Action: </Strong>

View File

@ -6,6 +6,7 @@ export default styled.span`
& [data-ui-button='true']:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
& [data-ui-button='true']:not(:last-child) {

View File

@ -19,7 +19,8 @@ const Footer = styled.div`
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
background-color: rgba(241, 241, 241, 1);
background-color: ${props =>
props.fill ? props => props.fill : 'rgba(241, 241, 241, 1)'};
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};

View File

@ -995,7 +995,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -2207,7 +2207,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -3269,7 +3269,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -4276,7 +4276,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -5285,7 +5285,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -7500,7 +7500,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -8507,7 +8507,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

View File

@ -351,7 +351,7 @@ export const KeyValue = ({
fill={disabled || submitting ? undefined : theme.red}
/>
</Margin>
<span>Remove</span>
<span>Delete</span>
</Button>
</Col>
)}

View File

@ -36,6 +36,7 @@ Array [
.c1 {
display: block;
text-align: left;
font-size: 1rem;
cursor: pointer;
}

View File

@ -2,12 +2,12 @@ import React, { Component } from 'react';
import is, { isNot } from 'styled-is';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import remcalc from 'remcalc';
const BaseItem = styled.span`
display: block;
text-align: left;
${isNot('disabled')`
font-size: ${remcalc(16)} ${isNot('disabled')`
cursor: pointer;
&:hover {