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

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

8
consoles/my-joy-images/src/components/summary.js
View File

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

4
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

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

17427
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

206
consoles/my-joy-instances/src/components/instances/footer.js
View File

@ -1,6 +1,8 @@
import React from 'react'; import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid'; import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { withTheme } from 'styled-components'; import { withTheme } from 'styled-components';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { import {
Button, Button,
@ -25,93 +27,109 @@ export default withTheme(
onRemove, onRemove,
theme = {} theme = {}
}) => ( }) => (
<StickyFooter fixed bottom> <StickyFooter fixed bottom fill="#FAFAFA">
<Row between="xs" middle="xs"> <Row between="xs" middle="xs">
<Col xs={7}> <Col xs={7}>
{onStart && [ <Flex>
<SmallOnly key="small-only"> {onStart && [
<Button <SmallOnly key="small-only">
type="button" <Button
onClick={onStart} type="button"
disabled={submitting || !allowedActions.start} onClick={onStart}
loading={submitting && statuses.starting} disabled={submitting || !allowedActions.start}
secondary loading={submitting && statuses.starting}
small secondary
icon small
> icon
<StartIcon disabled={submitting || !allowedActions.start} /> >
</Button> <StartIcon disabled={submitting || !allowedActions.start} />
</SmallOnly>, </Button>
<Medium key="medium"> </SmallOnly>,
<Button <Margin right={1}>
type="button" <Medium key="medium">
onClick={onStart} <Button
disabled={submitting || !allowedActions.start} type="button"
loading={submitting && statuses.starting} onClick={onStart}
secondary disabled={submitting || !allowedActions.start}
icon loading={submitting && statuses.starting}
> secondary
<StartIcon disabled={submitting || !allowedActions.start} /> icon
<span>Start</span> >
</Button> <Margin right={1}>
</Medium> <StartIcon
]} disabled={submitting || !allowedActions.start}
{onStop && [ />
<SmallOnly key="small-only"> </Margin>
<Button <span>Start</span>
type="button" </Button>
onClick={onStop} </Medium>
disabled={submitting || !allowedActions.stop} </Margin>
loading={submitting && statuses.stopping} ]}
secondary {onStop && [
small <SmallOnly key="small-only">
icon <Button
> type="button"
<StopIcon disabled={submitting || !allowedActions.stop} /> onClick={onStop}
</Button> disabled={submitting || !allowedActions.stop}
</SmallOnly>, loading={submitting && statuses.stopping}
<Medium key="medium"> secondary
<Button small
type="button" icon
onClick={onStop} >
disabled={submitting || !allowedActions.stop} <StopIcon disabled={submitting || !allowedActions.stop} />
loading={submitting && statuses.stopping} </Button>
secondary </SmallOnly>,
icon <Margin right={1}>
> <Medium key="medium">
<StopIcon disabled={submitting || !allowedActions.stop} /> <Button
<span>Stop</span> type="button"
</Button> onClick={onStop}
</Medium> disabled={submitting || !allowedActions.stop}
]} loading={submitting && statuses.stopping}
{onReboot && [ secondary
<SmallOnly key="small-only"> icon
<Button >
type="button" <Margin right={1}>
onClick={onReboot} <StopIcon disabled={submitting || !allowedActions.stop} />
disabled={submitting || !allowedActions.reboot} </Margin>
loading={submitting && statuses.rebooting} <span>Stop</span>
secondary </Button>
small </Medium>
icon </Margin>
> ]}
<ResetIcon disabled={submitting || !allowedActions.reboot} /> {onReboot && [
</Button> <SmallOnly key="small-only">
</SmallOnly>, <Button
<Medium key="medium"> type="button"
<Button onClick={onReboot}
type="button" disabled={submitting || !allowedActions.reboot}
onClick={onReboot} loading={submitting && statuses.rebooting}
disabled={submitting || !allowedActions.reboot} secondary
loading={submitting && statuses.rebooting} small
secondary icon
icon >
> <ResetIcon disabled={submitting || !allowedActions.reboot} />
<ResetIcon disabled={submitting || !allowedActions.reboot} /> </Button>
<span>Reboot</span> </SmallOnly>,
</Button> <Margin right={1}>
</Medium> <Medium key="medium">
]} <Button
type="button"
onClick={onReboot}
disabled={submitting || !allowedActions.reboot}
loading={submitting && statuses.rebooting}
secondary
icon
>
<ResetIcon
disabled={submitting || !allowedActions.reboot}
/>
<span>Reboot</span>
</Button>
</Medium>
</Margin>
]}
</Flex>
</Col> </Col>
{onRemove && ( {onRemove && (
<Col xs={5}> <Col xs={5}>
@ -148,14 +166,16 @@ export default withTheme(
right right
icon icon
> >
<DeleteIcon <Margin right={1}>
disabled={submitting || !allowedActions.remove} <DeleteIcon
fill={ disabled={submitting || !allowedActions.remove}
!(submitting || !allowedActions.remove) fill={
? theme.red !(submitting || !allowedActions.remove)
: undefined ? theme.red
} : undefined
/> }
/>
</Margin>
<span>Remove</span> <span>Remove</span>
</Button> </Button>
</Medium> </Medium>

26
consoles/my-joy-instances/src/components/instances/list.js
View File

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

240
consoles/my-joy-instances/src/components/instances/summary.js
View File

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

3918
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

11145
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

6
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

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

48
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
View File

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

2354
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

4
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

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

70
consoles/my-joy-instances/src/containers/instances/firewall.js
View File

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

8
consoles/my-joy-instances/src/containers/instances/networks.js
View File

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

35
packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
View File

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

10
packages/resource-widgets/src/firewall/index.js
View File

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

1
packages/ui-toolkit/src/button/group.js
View File

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

3
packages/ui-toolkit/src/footer/sticky-footer.js
View File

@ -19,7 +19,8 @@ const Footer = styled.div`
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: stretch; align-content: stretch;
align-items: 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}; border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)}; max-height: ${remcalc(53)};
min-height: ${remcalc(53)}; min-height: ${remcalc(53)};

14
packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
View File

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

2
packages/ui-toolkit/src/key-value/index.js
View File

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

1
packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
View File

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

4
packages/ui-toolkit/src/popover/item.js
View File

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