Merge branch 'master' of https://github.com/yldio/joyent-portal into 1406
This commit is contained in:
Fábio Moreira
commit
59344255fc
|
|
@ -4,7 +4,7 @@ import { Margin, Padding } from 'styled-components-spacing';
|
|||
import Flex from 'styled-flex-component';
|
||||
|
||||
import { H3, Card } from 'joyent-ui-toolkit';
|
||||
import { NoPackages } from 'joyent-logo-assets';
|
||||
import { EmptyState } from 'joyent-icons';
|
||||
|
||||
const NoPackagesTitle = styled(H3)`
|
||||
color: ${props => props.theme.greyDark};
|
||||
|
|
@ -20,7 +20,7 @@ export default ({ children }) => (
|
|||
<Padding all={6}>
|
||||
<Flex alignCenter justifyCenter column>
|
||||
<Margin bottom={2}>
|
||||
<NoPackages />
|
||||
<EmptyState />
|
||||
</Margin>
|
||||
<NoPackagesTitle>{children}</NoPackagesTitle>
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
CardOutlet,
|
||||
H2,
|
||||
P,
|
||||
Label,
|
||||
Label as BaseLabel,
|
||||
Divider,
|
||||
Button,
|
||||
QueryBreakpoints,
|
||||
|
|
@ -43,6 +43,10 @@ const VerticalDivider = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const Label = styled(BaseLabel)`
|
||||
font-weight: 200;
|
||||
`;
|
||||
|
||||
const GreyLabel = styled(Label)`
|
||||
opacity: 0.5;
|
||||
padding-right: ${remcalc(3)};
|
||||
|
|
@ -148,7 +152,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>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -89,7 +89,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -384,7 +383,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -679,7 +677,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -996,7 +993,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -1291,7 +1287,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -1586,7 +1581,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -1881,7 +1875,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
|
|||
|
|
@ -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,93 +27,109 @@ export default withTheme(
|
|||
onRemove,
|
||||
theme = {}
|
||||
}) => (
|
||||
<StickyFooter fixed bottom>
|
||||
<StickyFooter fixed bottom fill="#FAFAFA">
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={7}>
|
||||
{onStart && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStart}
|
||||
disabled={submitting || !allowedActions.start}
|
||||
loading={submitting && statuses.starting}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<StartIcon disabled={submitting || !allowedActions.start} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStart}
|
||||
disabled={submitting || !allowedActions.start}
|
||||
loading={submitting && statuses.starting}
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<StartIcon disabled={submitting || !allowedActions.start} />
|
||||
<span>Start</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
]}
|
||||
{onStop && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStop}
|
||||
disabled={submitting || !allowedActions.stop}
|
||||
loading={submitting && statuses.stopping}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStop}
|
||||
disabled={submitting || !allowedActions.stop}
|
||||
loading={submitting && statuses.stopping}
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||||
<span>Stop</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
]}
|
||||
{onReboot && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onReboot}
|
||||
disabled={submitting || !allowedActions.reboot}
|
||||
loading={submitting && statuses.rebooting}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<ResetIcon disabled={submitting || !allowedActions.reboot} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<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>
|
||||
]}
|
||||
<Flex>
|
||||
{onStart && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStart}
|
||||
disabled={submitting || !allowedActions.start}
|
||||
loading={submitting && statuses.starting}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<StartIcon disabled={submitting || !allowedActions.start} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Margin right={1}>
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStart}
|
||||
disabled={submitting || !allowedActions.start}
|
||||
loading={submitting && statuses.starting}
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<Margin right={1}>
|
||||
<StartIcon
|
||||
disabled={submitting || !allowedActions.start}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Start</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Margin>
|
||||
]}
|
||||
{onStop && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStop}
|
||||
disabled={submitting || !allowedActions.stop}
|
||||
loading={submitting && statuses.stopping}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Margin right={1}>
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onStop}
|
||||
disabled={submitting || !allowedActions.stop}
|
||||
loading={submitting && statuses.stopping}
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<Margin right={1}>
|
||||
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||||
</Margin>
|
||||
<span>Stop</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Margin>
|
||||
]}
|
||||
{onReboot && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onReboot}
|
||||
disabled={submitting || !allowedActions.reboot}
|
||||
loading={submitting && statuses.rebooting}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<ResetIcon disabled={submitting || !allowedActions.reboot} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Margin right={1}>
|
||||
<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>
|
||||
{onRemove && (
|
||||
<Col xs={5}>
|
||||
|
|
@ -148,14 +166,16 @@ export default withTheme(
|
|||
right
|
||||
icon
|
||||
>
|
||||
<DeleteIcon
|
||||
disabled={submitting || !allowedActions.remove}
|
||||
fill={
|
||||
!(submitting || !allowedActions.remove)
|
||||
? theme.red
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<Margin right={1}>
|
||||
<DeleteIcon
|
||||
disabled={submitting || !allowedActions.remove}
|
||||
fill={
|
||||
!(submitting || !allowedActions.remove)
|
||||
? theme.red
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<PopoverDivider />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -13,10 +14,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,
|
||||
|
|
@ -24,7 +27,6 @@ import {
|
|||
StartIcon,
|
||||
StopIcon,
|
||||
EditIcon,
|
||||
InstanceTypeIcon,
|
||||
Input,
|
||||
FormMeta,
|
||||
FormGroup
|
||||
|
|
@ -43,6 +45,10 @@ const stateColor = {
|
|||
FAILED: 'red'
|
||||
};
|
||||
|
||||
const Label = styled(BaseLabel)`
|
||||
font-weight: 200;
|
||||
`;
|
||||
|
||||
const GreyLabel = styled(Label)`
|
||||
opacity: 0.5;
|
||||
padding-right: ${remcalc(3)};
|
||||
|
|
@ -54,16 +60,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(breakpoints.small.upper)}) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const Actionable = styled(Margin)`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
|
@ -85,8 +81,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 = ({
|
||||
|
|
@ -108,7 +104,7 @@ export const Meta = ({
|
|||
<H2>
|
||||
{editingName ? (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Flex style={{ alignItems: 'start' }}>
|
||||
<Flex alignStart>
|
||||
<FormGroup name="name" field={Field}>
|
||||
<Input
|
||||
onBlur={null}
|
||||
|
|
@ -125,7 +121,7 @@ export const Meta = ({
|
|||
loading={submitting}
|
||||
inline
|
||||
>
|
||||
Add
|
||||
Save
|
||||
</Button>
|
||||
</Margin>
|
||||
</Flex>
|
||||
|
|
@ -201,127 +197,95 @@ 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'} />
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
<Margin right={1}>
|
||||
<ButtonGroup>
|
||||
{instance.state === 'STOPPED' ? (
|
||||
<Button
|
||||
type="button"
|
||||
loading={starting}
|
||||
disabled={instance.state !== 'STOPPED'}
|
||||
onClick={() => onAction('start')}
|
||||
secondary
|
||||
bold
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<StartIcon
|
||||
disabled={instance.state !== 'STOPPED'}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Start</span>
|
||||
</Button>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
<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>
|
||||
</Button>
|
||||
</SmallOnly>
|
||||
<Medium>
|
||||
<Button
|
||||
type="button"
|
||||
loading={starting}
|
||||
disabled={instance.state !== 'STOPPED'}
|
||||
onClick={() => onAction('start')}
|
||||
secondary
|
||||
bold
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<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}
|
||||
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>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Button
|
||||
href={`${GLOBAL.origin}/images/~create/${
|
||||
instance.id
|
||||
}`}
|
||||
target="__blank"
|
||||
rel="noopener noreferrer"
|
||||
secondary
|
||||
bold
|
||||
icon
|
||||
>
|
||||
Create Image
|
||||
</Button>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col xs={3}>
|
||||
<SmallOnly>
|
||||
|
|
@ -375,7 +339,7 @@ export default withTheme(
|
|||
}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Col>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -221,11 +221,15 @@ exports[`renders <Networks /> without throwing 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
className="c7"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c9"
|
||||
disabled={false}
|
||||
|
|
@ -241,227 +245,289 @@ exports[`renders <Networks /> without throwing 1`] = `
|
|||
className="c12"
|
||||
>
|
||||
<svg
|
||||
height={60}
|
||||
viewBox="0 0 79 60"
|
||||
width={79}
|
||||
height={109}
|
||||
viewBox="0 0 119.34 109.47"
|
||||
width={119}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>
|
||||
Guilty_Salamander
|
||||
</title>
|
||||
<desc>
|
||||
Created using Figma
|
||||
</desc>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(23.8 22)"
|
||||
xlinkHref="#a"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(27.3 25.5)"
|
||||
xlinkHref="#b"
|
||||
/>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(4.8 32.1)"
|
||||
xlinkHref="#c"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(12.2 31.8)"
|
||||
xlinkHref="#d"
|
||||
/>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(54.4 31.9)"
|
||||
xlinkHref="#e"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(54.4 32)"
|
||||
xlinkHref="#f"
|
||||
/>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(15.8 26.8)"
|
||||
xlinkHref="#g"
|
||||
/>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(5)"
|
||||
xlinkHref="#h"
|
||||
/>
|
||||
<use
|
||||
fill="#FAFBFC"
|
||||
transform="rotate(-15.13 41.037 5.45)"
|
||||
xlinkHref="#i"
|
||||
/>
|
||||
<use
|
||||
fill="#412B13"
|
||||
transform="rotate(-15.13 67.273 -24.78)"
|
||||
xlinkHref="#j"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(2.2 8)"
|
||||
xlinkHref="#k"
|
||||
/>
|
||||
<use
|
||||
fill="#FAFBFC"
|
||||
transform="rotate(-74.87 40.46 -20.511)"
|
||||
xlinkHref="#l"
|
||||
/>
|
||||
<use
|
||||
fill="#412B13"
|
||||
transform="rotate(-74.87 41.364 -22.098)"
|
||||
xlinkHref="#m"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(52.1 8)"
|
||||
xlinkHref="#n"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(31.5 34.3)"
|
||||
xlinkHref="#o"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(14.3)"
|
||||
xlinkHref="#p"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(30.9 18.9)"
|
||||
xlinkHref="#q"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(37.6 18.9)"
|
||||
xlinkHref="#r"
|
||||
/>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(27.4 53.9)"
|
||||
xlinkHref="#s"
|
||||
/>
|
||||
<use
|
||||
fill="#FAA427"
|
||||
transform="translate(39.1 53.9)"
|
||||
xlinkHref="#t"
|
||||
/>
|
||||
<use
|
||||
fill="#F3722C"
|
||||
transform="translate(27.4 53.9)"
|
||||
xlinkHref="#u"
|
||||
/>
|
||||
<use
|
||||
fill="#342013"
|
||||
transform="translate(28.6 26.2)"
|
||||
xlinkHref="#v"
|
||||
/>
|
||||
<use
|
||||
fill="#FFF"
|
||||
transform="translate(32.6 28.7)"
|
||||
xlinkHref="#w"
|
||||
/>
|
||||
<defs>
|
||||
<path
|
||||
d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
|
||||
id="a"
|
||||
/>
|
||||
<path
|
||||
d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
|
||||
id="b"
|
||||
/>
|
||||
<path
|
||||
d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
|
||||
id="c"
|
||||
/>
|
||||
<path
|
||||
d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
|
||||
id="d"
|
||||
/>
|
||||
<path
|
||||
d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
|
||||
id="e"
|
||||
/>
|
||||
<path
|
||||
d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
|
||||
id="f"
|
||||
/>
|
||||
<path
|
||||
d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
|
||||
id="g"
|
||||
/>
|
||||
<path
|
||||
d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
|
||||
id="h"
|
||||
/>
|
||||
<path
|
||||
d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
|
||||
id="i"
|
||||
/>
|
||||
<path
|
||||
d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
|
||||
id="j"
|
||||
/>
|
||||
<path
|
||||
d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
|
||||
id="k"
|
||||
/>
|
||||
<path
|
||||
d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
|
||||
id="l"
|
||||
/>
|
||||
<path
|
||||
d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
|
||||
id="m"
|
||||
/>
|
||||
<path
|
||||
d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
|
||||
id="n"
|
||||
/>
|
||||
<path
|
||||
d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
|
||||
id="o"
|
||||
/>
|
||||
<path
|
||||
d="M0 0l22.258 18.498L44.516 0H0z"
|
||||
id="p"
|
||||
/>
|
||||
<path
|
||||
d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
|
||||
id="q"
|
||||
/>
|
||||
<path
|
||||
d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
|
||||
id="r"
|
||||
/>
|
||||
<path
|
||||
d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
|
||||
id="s"
|
||||
/>
|
||||
<path
|
||||
d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
|
||||
id="t"
|
||||
/>
|
||||
<path
|
||||
d="M31.328 0H0v1.474h31.328V0z"
|
||||
id="u"
|
||||
/>
|
||||
<path
|
||||
d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
|
||||
id="v"
|
||||
/>
|
||||
<path
|
||||
d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
|
||||
id="w"
|
||||
<style
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<radialGradient
|
||||
cx="208.79"
|
||||
cy="99.06"
|
||||
gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="radial-gradient"
|
||||
r="57.13"
|
||||
>
|
||||
<stop
|
||||
offset="0.05"
|
||||
stopColor="#436275"
|
||||
/>
|
||||
<stop
|
||||
offset="0.1"
|
||||
stopColor="#415f72"
|
||||
/>
|
||||
<stop
|
||||
offset="0.13"
|
||||
stopColor="#3a5769"
|
||||
/>
|
||||
<stop
|
||||
offset="0.16"
|
||||
stopColor="#2e4959"
|
||||
/>
|
||||
<stop
|
||||
offset="0.19"
|
||||
stopColor="#1d3543"
|
||||
/>
|
||||
<stop
|
||||
offset="0.19"
|
||||
stopColor="#1b3240"
|
||||
/>
|
||||
<stop
|
||||
offset="0.26"
|
||||
stopColor="#1e3644"
|
||||
/>
|
||||
<stop
|
||||
offset="0.32"
|
||||
stopColor="#274150"
|
||||
/>
|
||||
<stop
|
||||
offset="0.39"
|
||||
stopColor="#365364"
|
||||
/>
|
||||
<stop
|
||||
offset="0.43"
|
||||
stopColor="#436275"
|
||||
/>
|
||||
<stop
|
||||
offset="0.49"
|
||||
stopColor="#3f5d6f"
|
||||
/>
|
||||
<stop
|
||||
offset="0.56"
|
||||
stopColor="#324e5f"
|
||||
/>
|
||||
<stop
|
||||
offset="0.65"
|
||||
stopColor="#1e3644"
|
||||
/>
|
||||
<stop
|
||||
offset="0.66"
|
||||
stopColor="#1b3240"
|
||||
/>
|
||||
<stop
|
||||
offset="0.85"
|
||||
stopColor="#1b3240"
|
||||
/>
|
||||
<stop
|
||||
offset="0.9"
|
||||
stopColor="#2c4656"
|
||||
/>
|
||||
<stop
|
||||
offset="0.95"
|
||||
stopColor="#436275"
|
||||
/>
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
cx="59.15"
|
||||
cy="56.86"
|
||||
gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="radial-gradient-2"
|
||||
r="46.01"
|
||||
>
|
||||
<stop
|
||||
offset={0}
|
||||
stopColor="#436275"
|
||||
/>
|
||||
<stop
|
||||
offset="0.1"
|
||||
stopColor="#426073"
|
||||
/>
|
||||
<stop
|
||||
offset="0.13"
|
||||
stopColor="#3c5a6c"
|
||||
/>
|
||||
<stop
|
||||
offset="0.16"
|
||||
stopColor="#344f61"
|
||||
/>
|
||||
<stop
|
||||
offset="0.18"
|
||||
stopColor="#274050"
|
||||
/>
|
||||
<stop
|
||||
offset="0.19"
|
||||
stopColor="#1b3240"
|
||||
/>
|
||||
<stop
|
||||
offset="0.26"
|
||||
stopColor="#1e3644"
|
||||
/>
|
||||
<stop
|
||||
offset="0.32"
|
||||
stopColor="#274150"
|
||||
/>
|
||||
<stop
|
||||
offset="0.39"
|
||||
stopColor="#365364"
|
||||
/>
|
||||
<stop
|
||||
offset="0.43"
|
||||
stopColor="#436275"
|
||||
/>
|
||||
<stop
|
||||
offset="0.49"
|
||||
stopColor="#3f5d6f"
|
||||
/>
|
||||
<stop
|
||||
offset="0.56"
|
||||
stopColor="#324e5f"
|
||||
/>
|
||||
<stop
|
||||
offset="0.65"
|
||||
stopColor="#1e3644"
|
||||
/>
|
||||
<stop
|
||||
offset="0.66"
|
||||
stopColor="#1b3240"
|
||||
/>
|
||||
<stop
|
||||
offset="0.85"
|
||||
stopColor="#1b3240"
|
||||
/>
|
||||
<stop
|
||||
offset="0.92"
|
||||
stopColor="#2c4656"
|
||||
/>
|
||||
<stop
|
||||
offset={1}
|
||||
stopColor="#436275"
|
||||
/>
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
cx="-521.06"
|
||||
cy="366.16"
|
||||
gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="radial-gradient-3"
|
||||
r="32.44"
|
||||
>
|
||||
<stop
|
||||
offset={0}
|
||||
stopColor="#436275"
|
||||
/>
|
||||
<stop
|
||||
offset="0.02"
|
||||
stopColor="#436275"
|
||||
stopOpacity="0.97"
|
||||
/>
|
||||
<stop
|
||||
offset="0.34"
|
||||
stopColor="#436275"
|
||||
stopOpacity="0.55"
|
||||
/>
|
||||
<stop
|
||||
offset="0.62"
|
||||
stopColor="#436275"
|
||||
stopOpacity="0.25"
|
||||
/>
|
||||
<stop
|
||||
offset="0.85"
|
||||
stopColor="#436275"
|
||||
stopOpacity="0.07"
|
||||
/>
|
||||
<stop
|
||||
offset={1}
|
||||
stopColor="#436275"
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
cx="-136.43"
|
||||
cy="140.9"
|
||||
gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="radial-gradient-4"
|
||||
r="54.82"
|
||||
>
|
||||
<stop
|
||||
offset={0}
|
||||
stopColor="#436275"
|
||||
/>
|
||||
<stop
|
||||
offset="0.58"
|
||||
stopColor="#436275"
|
||||
stopOpacity="0.4"
|
||||
/>
|
||||
<stop
|
||||
offset={1}
|
||||
stopColor="#436275"
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<title>
|
||||
Empty-state-illustration
|
||||
</title>
|
||||
<g
|
||||
data-name="Layer 2"
|
||||
id="Layer_2"
|
||||
>
|
||||
<g
|
||||
data-name="Layer 1"
|
||||
id="Layer_1-2"
|
||||
>
|
||||
<g
|
||||
className="cls-1"
|
||||
>
|
||||
<path
|
||||
className="cls-2"
|
||||
d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
className="cls-1"
|
||||
>
|
||||
<path
|
||||
className="cls-3"
|
||||
d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
|
||||
/>
|
||||
</g>
|
||||
<circle
|
||||
className="cls-4"
|
||||
cx="23.53"
|
||||
cy="73.77"
|
||||
r="11.93"
|
||||
/>
|
||||
<circle
|
||||
className="cls-5"
|
||||
cx="23.53"
|
||||
cy="73.77"
|
||||
r="11.93"
|
||||
/>
|
||||
<circle
|
||||
className="cls-6"
|
||||
cx="61.95"
|
||||
cy="55.24"
|
||||
r="34.25"
|
||||
/>
|
||||
<circle
|
||||
className="cls-7"
|
||||
cx="61.95"
|
||||
cy="55.24"
|
||||
r="34.25"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h3
|
||||
|
|
@ -666,11 +732,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
className="c7"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c8"
|
||||
>
|
||||
|
|
@ -904,11 +974,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
className="c7"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c8"
|
||||
>
|
||||
|
|
@ -1432,11 +1506,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
className="c7"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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,38 +69,37 @@ export const Firewall = ({
|
|||
</Message>
|
||||
</Margin>
|
||||
) : null}
|
||||
<ReduxForm
|
||||
form="fw-enabled"
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
{...{ initialValues: isBoolean(enabled) ? { enabled } : undefined }}
|
||||
onSubmit={handleEnabledToggle}
|
||||
>
|
||||
{props =>
|
||||
loading ? null : (
|
||||
<Fragment>
|
||||
<Margin bottom={5}>
|
||||
<ToggleFirewallForm {...props} submitOnChange />
|
||||
</Margin>
|
||||
<Divider height={remcalc(1)} />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
</ReduxForm>
|
||||
<ReduxForm
|
||||
form="fw-inactive"
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
initialValues={{ inactive }}
|
||||
>
|
||||
{props =>
|
||||
!enabled || loading ? null : (
|
||||
<Margin top={4}>
|
||||
<ToggleInactiveForm {...props} />
|
||||
</Margin>
|
||||
)
|
||||
}
|
||||
</ReduxForm>
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
<ReduxForm
|
||||
form="fw-enabled"
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
{...{ initialValues: isBoolean(enabled) ? { enabled } : undefined }}
|
||||
onSubmit={handleEnabledToggle}
|
||||
>
|
||||
{props =>
|
||||
loading ? null : (
|
||||
<Margin right={5}>
|
||||
<ToggleFirewallForm {...props} submitOnChange />
|
||||
</Margin>
|
||||
)
|
||||
}
|
||||
</ReduxForm>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<ReduxForm
|
||||
form="fw-inactive"
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
initialValues={{ inactive }}
|
||||
>
|
||||
{props =>
|
||||
!enabled || loading ? null : <ToggleInactiveForm {...props} />
|
||||
}
|
||||
</ReduxForm>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
{!loading && !defaultRules.length && !tagRules.length ? (
|
||||
<Margin top={5}>
|
||||
<Empty borderTop>
|
||||
|
|
|
|||
|
|
@ -259,8 +259,12 @@ export default compose(
|
|||
const sortBy = get(values, 'instance-list-sort-by', 'name');
|
||||
const sortOrder = get(values, 'instance-list-sort-order', 'asc');
|
||||
|
||||
console.log(index, filter);
|
||||
// if user is searching something, get items that match that query
|
||||
const filtered = filter ? index.search(filter) : instances;
|
||||
const filtered =
|
||||
filter && index.list.length
|
||||
? index.list.filter(i => i.name.includes(filter))
|
||||
: instances;
|
||||
|
||||
// from filtered instances, sort asc
|
||||
// set's mutating flag
|
||||
|
|
|
|||
|
|
@ -37,7 +37,9 @@ export const Networks = ({
|
|||
complete control over the network environment. Read more on fabrics.
|
||||
</Description>
|
||||
</Margin>
|
||||
<H3>Networks attached to this instance</H3>
|
||||
<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,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
import React from 'react';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
colors = {},
|
||||
...rest
|
||||
}) => (
|
||||
<svg
|
||||
width={119}
|
||||
height={109}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 119.34 109.47"
|
||||
>
|
||||
<defs>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
'.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}'
|
||||
}}
|
||||
/>
|
||||
<radialGradient
|
||||
id="radial-gradient"
|
||||
cx="208.79"
|
||||
cy="99.06"
|
||||
r="57.13"
|
||||
gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.05" stopColor="#436275" />
|
||||
<stop offset="0.1" stopColor="#415f72" />
|
||||
<stop offset="0.13" stopColor="#3a5769" />
|
||||
<stop offset="0.16" stopColor="#2e4959" />
|
||||
<stop offset="0.19" stopColor="#1d3543" />
|
||||
<stop offset="0.19" stopColor="#1b3240" />
|
||||
<stop offset="0.26" stopColor="#1e3644" />
|
||||
<stop offset="0.32" stopColor="#274150" />
|
||||
<stop offset="0.39" stopColor="#365364" />
|
||||
<stop offset="0.43" stopColor="#436275" />
|
||||
<stop offset="0.49" stopColor="#3f5d6f" />
|
||||
<stop offset="0.56" stopColor="#324e5f" />
|
||||
<stop offset="0.65" stopColor="#1e3644" />
|
||||
<stop offset="0.66" stopColor="#1b3240" />
|
||||
<stop offset="0.85" stopColor="#1b3240" />
|
||||
<stop offset="0.9" stopColor="#2c4656" />
|
||||
<stop offset="0.95" stopColor="#436275" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="radial-gradient-2"
|
||||
cx="59.15"
|
||||
cy="56.86"
|
||||
r="46.01"
|
||||
gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset={0} stopColor="#436275" />
|
||||
<stop offset="0.1" stopColor="#426073" />
|
||||
<stop offset="0.13" stopColor="#3c5a6c" />
|
||||
<stop offset="0.16" stopColor="#344f61" />
|
||||
<stop offset="0.18" stopColor="#274050" />
|
||||
<stop offset="0.19" stopColor="#1b3240" />
|
||||
<stop offset="0.26" stopColor="#1e3644" />
|
||||
<stop offset="0.32" stopColor="#274150" />
|
||||
<stop offset="0.39" stopColor="#365364" />
|
||||
<stop offset="0.43" stopColor="#436275" />
|
||||
<stop offset="0.49" stopColor="#3f5d6f" />
|
||||
<stop offset="0.56" stopColor="#324e5f" />
|
||||
<stop offset="0.65" stopColor="#1e3644" />
|
||||
<stop offset="0.66" stopColor="#1b3240" />
|
||||
<stop offset="0.85" stopColor="#1b3240" />
|
||||
<stop offset="0.92" stopColor="#2c4656" />
|
||||
<stop offset={1} stopColor="#436275" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="radial-gradient-3"
|
||||
cx="-521.06"
|
||||
cy="366.16"
|
||||
r="32.44"
|
||||
gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset={0} stopColor="#436275" />
|
||||
<stop offset="0.02" stopColor="#436275" stopOpacity="0.97" />
|
||||
<stop offset="0.34" stopColor="#436275" stopOpacity="0.55" />
|
||||
<stop offset="0.62" stopColor="#436275" stopOpacity="0.25" />
|
||||
<stop offset="0.85" stopColor="#436275" stopOpacity="0.07" />
|
||||
<stop offset={1} stopColor="#436275" stopOpacity={0} />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="radial-gradient-4"
|
||||
cx="-136.43"
|
||||
cy="140.9"
|
||||
r="54.82"
|
||||
gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset={0} stopColor="#436275" />
|
||||
<stop offset="0.58" stopColor="#436275" stopOpacity="0.4" />
|
||||
<stop offset={1} stopColor="#436275" stopOpacity={0} />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<title>Empty-state-illustration</title>
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g className="cls-1">
|
||||
<path
|
||||
className="cls-2"
|
||||
d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
|
||||
/>
|
||||
</g>
|
||||
<g className="cls-1">
|
||||
<path
|
||||
className="cls-3"
|
||||
d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
|
||||
/>
|
||||
</g>
|
||||
<circle className="cls-4" cx="23.53" cy="73.77" r="11.93" />
|
||||
<circle className="cls-5" cx="23.53" cy="73.77" r="11.93" />
|
||||
<circle className="cls-6" cx="61.95" cy="55.24" r="34.25" />
|
||||
<circle className="cls-7" cx="61.95" cy="55.24" r="34.25" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -12,6 +12,7 @@ export { default as Delete } from './delete';
|
|||
export { default as Dot } from './dot';
|
||||
export { default as Duplicate } from './duplicate';
|
||||
export { default as Edit } from './edit';
|
||||
export { default as EmptyState } from './empty-state';
|
||||
export { default as Fabric } from './fabric';
|
||||
// export { default as Filter } from './filter';
|
||||
export { default as Firewall } from './firewall';
|
||||
|
|
|
|||
|
|
@ -34,9 +34,19 @@ const Input = styled(BaseInput)`
|
|||
|
||||
const Values = touched => (
|
||||
<Margin right={1}>
|
||||
<Select style={style} touched={touched} width={remcalc(130)} embedded>
|
||||
<option value="equalling">equalling</option>
|
||||
<option value="starting">starting with</option>
|
||||
<Select
|
||||
id={'affinity-rule-3-select'}
|
||||
style={style}
|
||||
touched={touched}
|
||||
width={remcalc(130)}
|
||||
embedded
|
||||
>
|
||||
<option id={'affinity-rule-3-equalling'} value="equalling">
|
||||
equalling
|
||||
</option>
|
||||
<option id={'affinity-rule-3-starting'} value="starting">
|
||||
starting with
|
||||
</option>
|
||||
</Select>
|
||||
</Margin>
|
||||
);
|
||||
|
|
@ -54,9 +64,14 @@ export const Rule = ({ valid, ...rule }) => (
|
|||
touched={rule.conditional}
|
||||
width={remcalc(86)}
|
||||
embedded
|
||||
id={'affinity-rule-0-select'}
|
||||
>
|
||||
<option value="should">should</option>
|
||||
<option value="must">must</option>
|
||||
<option id={'affinity-rule-0-should'} value="should">
|
||||
should
|
||||
</option>
|
||||
<option id={'affinity-rule-0-must'} value="must">
|
||||
must
|
||||
</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
</Margin>
|
||||
|
|
@ -70,9 +85,14 @@ export const Rule = ({ valid, ...rule }) => (
|
|||
touched={rule.placement}
|
||||
width={remcalc(100)}
|
||||
embedded
|
||||
id={'affinity-rule-1-select'}
|
||||
>
|
||||
<option value="same">the same</option>
|
||||
<option value="different">a different</option>
|
||||
<option id={'affinity-rule-1-same'} value="same">
|
||||
the same
|
||||
</option>
|
||||
<option id={'affinity-rule-1-different'} value="different">
|
||||
a different
|
||||
</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
</Margin>
|
||||
|
|
@ -82,21 +102,26 @@ export const Rule = ({ valid, ...rule }) => (
|
|||
<Margin horizontal={1}>
|
||||
<FormGroup name="type" field={Field}>
|
||||
<Select
|
||||
id={'affinity-rule-2-select'}
|
||||
style={style}
|
||||
touched={rule.type}
|
||||
width={remcalc(135)}
|
||||
embedded
|
||||
left
|
||||
>
|
||||
<option value="name">instance name</option>
|
||||
<option value="tag">tag</option>
|
||||
<option id={'affinity-rule-2-name'} value="name">
|
||||
instance name
|
||||
</option>
|
||||
<option id={'affinity-rule-2-tag'} value="tag">
|
||||
tag
|
||||
</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
</Margin>
|
||||
<FormGroup name="pattern" field={Field}>
|
||||
{Values(rule.pattern)}
|
||||
</FormGroup>
|
||||
<FormGroup name="value" field={Field}>
|
||||
<FormGroup id={'affinity-rule-input'} name="value" field={Field}>
|
||||
<Input
|
||||
onBlur={null}
|
||||
style={style}
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@ const Affinity = ({
|
|||
noRemove
|
||||
borderless
|
||||
headless
|
||||
id="affinity"
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
/>
|
||||
</Margin>
|
||||
|
|
@ -169,7 +170,12 @@ const Affinity = ({
|
|||
) : null}
|
||||
{!addOpen && exitingRule ? (
|
||||
<Margin top={5}>
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-affinity'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,12 @@ const CnsContainer = ({
|
|||
</ReduxForm>
|
||||
</Cns>
|
||||
<Margin top={5}>
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-cns'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { compose, graphql } from 'react-apollo';
|
|||
import { Link } from 'react-router-dom';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
import { change } from 'redux-form';
|
||||
import get from 'lodash.get';
|
||||
import forceArray from 'force-array';
|
||||
|
||||
|
|
@ -39,6 +40,8 @@ const Firewall = ({
|
|||
tagRules = [],
|
||||
loading = false,
|
||||
enabled = false,
|
||||
showInactiveRules = null,
|
||||
showInactive = false,
|
||||
...props
|
||||
}) => (
|
||||
<Step name="firewall" getValue={handleGetValue} {...props}>
|
||||
|
|
@ -98,6 +101,15 @@ const Firewall = ({
|
|||
can potentially affect your instance
|
||||
</P>
|
||||
</Margin>
|
||||
<Margin top={2}>
|
||||
<Button
|
||||
secondary
|
||||
onClick={showInactiveRules}
|
||||
disabled={showInactive}
|
||||
>
|
||||
View Inactive Rules
|
||||
</Button>
|
||||
</Margin>
|
||||
</Fragment>
|
||||
</Empty>
|
||||
</Margin>
|
||||
|
|
@ -129,7 +141,12 @@ const Firewall = ({
|
|||
</Margin>
|
||||
) : null}
|
||||
<Margin top={5}>
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-firewall'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
@ -142,7 +159,9 @@ const Firewall = ({
|
|||
export default compose(
|
||||
connect(({ form, values }, ownProps) => ({
|
||||
...ownProps,
|
||||
enabled: get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
|
||||
enabled:
|
||||
console.log(form, values) ||
|
||||
get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
|
||||
showInactive: get(form, `${IC_FW_F_INACTIVE}.values.inactive`, false),
|
||||
tags: get(values, IC_TAG_V_TAGS, [])
|
||||
})),
|
||||
|
|
@ -184,5 +203,9 @@ export default compose(
|
|||
handleGetValue: () => ({ enabled, defaultRules, tagRules })
|
||||
};
|
||||
}
|
||||
})
|
||||
}),
|
||||
connect(null, (dispatch, { ...args }) => ({
|
||||
showInactiveRules: () =>
|
||||
dispatch(change(IC_FW_F_INACTIVE, 'inactive', true))
|
||||
}))
|
||||
)(Firewall);
|
||||
|
|
|
|||
|
|
@ -137,12 +137,20 @@ export const ImageType = ({ setImageType, vms }) => (
|
|||
<Margin bottom={3}>
|
||||
<SectionList>
|
||||
<SectionListItem>
|
||||
<SectionListAnchor active={vms} onClick={() => setImageType(true)}>
|
||||
<SectionListAnchor
|
||||
id={'image-type-hwvm'}
|
||||
active={vms}
|
||||
onClick={() => setImageType(true)}
|
||||
>
|
||||
Hardware virtual machine
|
||||
</SectionListAnchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
|
||||
<SectionListAnchor
|
||||
id={'image-type-ic'}
|
||||
active={!vms}
|
||||
onClick={() => setImageType(false)}
|
||||
>
|
||||
Infrastructure container
|
||||
</SectionListAnchor>
|
||||
</SectionListItem>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,12 @@ const Image = ({
|
|||
onSelectLatest={handleSelectLatest}
|
||||
/>
|
||||
<Margin top="2">
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-image'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ const Metadata = ({
|
|||
method="add"
|
||||
input="textarea"
|
||||
type="metadata"
|
||||
id="metadata"
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
editor={Editor}
|
||||
expanded
|
||||
|
|
@ -101,6 +102,7 @@ const Metadata = ({
|
|||
<FlexItem>
|
||||
<Margin right={1}>
|
||||
<Button
|
||||
id={'button-add-metadata'}
|
||||
type="button"
|
||||
onClick={() => handleChangeAddOpen(true)}
|
||||
secondary
|
||||
|
|
@ -110,7 +112,12 @@ const Metadata = ({
|
|||
</Margin>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-metadata'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</FlexItem>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,10 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
|
|||
width: ${remcalc(16)};
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
const Name = ({
|
||||
initialValues,
|
||||
handleValidate,
|
||||
|
|
@ -79,8 +83,8 @@ const Name = ({
|
|||
keepDirtyOnReinitialize
|
||||
>
|
||||
{props => (
|
||||
<form onSubmit={null}>
|
||||
<FormGroup name="name" fluid field={Field}>
|
||||
<Form onSubmit={null}>
|
||||
<FormGroup id={'input-name'} name="name" fluid field={Field}>
|
||||
<FormLabel>Instance name</FormLabel>
|
||||
<Margin top="0.5">
|
||||
<Flex>
|
||||
|
|
@ -90,6 +94,7 @@ const Name = ({
|
|||
<FlexItem>
|
||||
<Margin left="1" inline>
|
||||
<Button
|
||||
id={'randomize-button-name'}
|
||||
type="button"
|
||||
loading={randomizing}
|
||||
onClick={handleRandomize}
|
||||
|
|
@ -109,11 +114,16 @@ const Name = ({
|
|||
<FormMeta />
|
||||
</FormGroup>
|
||||
<Margin top="5">
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-name'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</ReduxForm>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,12 @@ const Networks = ({
|
|||
)}
|
||||
</Form>
|
||||
<Margin top="5">
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-networks'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import {
|
|||
|
||||
import { NoPackages } from 'joyent-logo-assets';
|
||||
import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
|
||||
import { EmptyState } from 'joyent-icons';
|
||||
|
||||
const GroupIcons = {
|
||||
MEMORY: <MemoryIcon fill="#32ABCF" />,
|
||||
|
|
@ -461,7 +462,7 @@ export const Empty = ({ children, ...rest }) => (
|
|||
<Padding all={6}>
|
||||
<Flex alignCenter justifyCenter column>
|
||||
<Margin bottom={2}>
|
||||
<NoPackages />
|
||||
<EmptyState />
|
||||
</Margin>
|
||||
<NoPackagesTitle>{children}</NoPackagesTitle>
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -124,7 +124,12 @@ const PackageComponent = ({
|
|||
</Packages>
|
||||
</Medium>
|
||||
<Margin top="4">
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-packages'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ const TagsContainer = ({
|
|||
name={name}
|
||||
value={value}
|
||||
onRemoveClick={() => handleRemoveTag(index)}
|
||||
id={'tag-' + index}
|
||||
/>
|
||||
))}
|
||||
</TagList>
|
||||
|
|
@ -119,6 +120,7 @@ const TagsContainer = ({
|
|||
method="add"
|
||||
input="input"
|
||||
type="tag"
|
||||
id="tag"
|
||||
expanded
|
||||
borderless
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
|
|
@ -134,6 +136,7 @@ const TagsContainer = ({
|
|||
<FlexItem>
|
||||
<Margin right={1}>
|
||||
<Button
|
||||
id={'add-tag-button'}
|
||||
type="button"
|
||||
onClick={() => handleChangeAddOpen(true)}
|
||||
secondary
|
||||
|
|
@ -143,7 +146,12 @@ const TagsContainer = ({
|
|||
</Margin>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-tags'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</FlexItem>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class EditorField extends PureComponent {
|
|||
|
||||
export default () => (
|
||||
<form name="user-script">
|
||||
<FormGroup name="value" field={Field} fluid>
|
||||
<FormGroup id="userscript-editor" name="value" field={Field} fluid>
|
||||
<Field name="value" component={EditorField} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,12 @@ const UserScript = ({
|
|||
<Fragment>
|
||||
<UserScriptForm {...props} />
|
||||
<Margin top={5}>
|
||||
<Button type="button" component={Link} to={next}>
|
||||
<Button
|
||||
id={'next-button-userscript'}
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Margin>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119.34 109.47"><defs><style>.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}</style><radialGradient id="radial-gradient" cx="208.79" cy="99.06" r="57.13" gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0.05" stop-color="#436275"/><stop offset="0.1" stop-color="#415f72"/><stop offset="0.13" stop-color="#3a5769"/><stop offset="0.16" stop-color="#2e4959"/><stop offset="0.19" stop-color="#1d3543"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.9" stop-color="#2c4656"/><stop offset="0.95" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-2" cx="59.15" cy="56.86" r="46.01" gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.1" stop-color="#426073"/><stop offset="0.13" stop-color="#3c5a6c"/><stop offset="0.16" stop-color="#344f61"/><stop offset="0.18" stop-color="#274050"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.92" stop-color="#2c4656"/><stop offset="1" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-3" cx="-521.06" cy="366.16" r="32.44" gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.02" stop-color="#436275" stop-opacity="0.97"/><stop offset="0.34" stop-color="#436275" stop-opacity="0.55"/><stop offset="0.62" stop-color="#436275" stop-opacity="0.25"/><stop offset="0.85" stop-color="#436275" stop-opacity="0.07"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient><radialGradient id="radial-gradient-4" cx="-136.43" cy="140.9" r="54.82" gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.58" stop-color="#436275" stop-opacity="0.4"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient></defs><title>Empty-state-illustration</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><path class="cls-2" d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"/></g><g class="cls-1"><path class="cls-3" d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"/></g><circle class="cls-4" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-5" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-6" cx="61.95" cy="55.24" r="34.25"/><circle class="cls-7" cx="61.95" cy="55.24" r="34.25"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -46,46 +46,42 @@ export const Header = ({ icon = null, children }) => (
|
|||
<Flex justifyBetween>
|
||||
<FlexItem>
|
||||
<Flex alignCenter>
|
||||
<FlexItem>{icon}</FlexItem>
|
||||
<FlexItem>
|
||||
<Divider vertical />
|
||||
<Margin right="2">{icon}</Margin>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<H3 bold>{children}</H3>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Divider vertical />
|
||||
</FlexItem>
|
||||
<FlexItem alignCenter>
|
||||
<Link
|
||||
to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
|
||||
>
|
||||
<Flex alignCenter>
|
||||
{expanded ? 'Save and Collase' : 'Expand'}
|
||||
<Margin left={1}>
|
||||
<Flex>
|
||||
<ArrowIcon
|
||||
fill="primary"
|
||||
direction={expanded ? 'up' : 'down'}
|
||||
/>
|
||||
</Flex>
|
||||
{/* improve this */}
|
||||
{optional ? (
|
||||
<Fragment>
|
||||
<FlexItem>
|
||||
<Margin horizontal="1">
|
||||
<Divider vertical />
|
||||
</Margin>
|
||||
</Flex>
|
||||
</Link>
|
||||
</FlexItem>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<P optional>Optional</P>
|
||||
</FlexItem>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Flex>
|
||||
</FlexItem>
|
||||
{isValid && !expanded && saved ? (
|
||||
<FlexItem>
|
||||
<SavedIcon />
|
||||
</FlexItem>
|
||||
) : null}
|
||||
{/* improve this */}
|
||||
{!saved && optional ? (
|
||||
<FlexItem>
|
||||
<P optional>Optional</P>
|
||||
</FlexItem>
|
||||
) : null}
|
||||
<FlexItem alignCenter>
|
||||
<Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
|
||||
<Flex alignCenter>
|
||||
{expanded ? 'Save and Collapse' : 'Edit'}
|
||||
<Margin left="1">
|
||||
<Flex>
|
||||
<ArrowIcon
|
||||
fill="primary"
|
||||
direction={expanded ? 'up' : 'down'}
|
||||
/>
|
||||
</Flex>
|
||||
</Margin>
|
||||
</Flex>
|
||||
</Link>
|
||||
</FlexItem>
|
||||
{!expanded && !isValid ? (
|
||||
<FlexItem>
|
||||
<ErrorIcon />
|
||||
|
|
@ -93,7 +89,7 @@ export const Header = ({ icon = null, children }) => (
|
|||
) : null}
|
||||
</Flex>
|
||||
{expanded || saved ? (
|
||||
<Margin vertical={3}>
|
||||
<Margin vertical="3">
|
||||
<Divider noMargin />
|
||||
</Margin>
|
||||
) : null}
|
||||
|
|
@ -172,7 +168,7 @@ export default class Step extends PureComponent {
|
|||
>
|
||||
<Card expanded={expanded} error={!expanded && !isValid}>
|
||||
<CardOutlet>
|
||||
<Padding all={5}>{children}</Padding>
|
||||
<Padding all="5">{children}</Padding>
|
||||
</CardOutlet>
|
||||
</Card>
|
||||
</Broadcast>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
.c6 {
|
||||
margin-top: 0.1875rem;
|
||||
.c0 {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -36,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -56,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c3 {
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
|
|
@ -73,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
display: block;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c14 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
|
|
@ -85,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
appearance: button;
|
||||
}
|
||||
|
||||
.c12::-moz-focus-inner,
|
||||
.c12[type='button']::-moz-focus-inner,
|
||||
.c12[type='reset']::-moz-focus-inner,
|
||||
.c12[type='submit']::-moz-focus-inner {
|
||||
.c14::-moz-focus-inner,
|
||||
.c14[type='button']::-moz-focus-inner,
|
||||
.c14[type='reset']::-moz-focus-inner,
|
||||
.c14[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c12:-moz-focusring,
|
||||
.c12[type='button']:-moz-focusring,
|
||||
.c12[type='reset']:-moz-focusring,
|
||||
.c12[type='submit']:-moz-focusring {
|
||||
.c14:-moz-focusring,
|
||||
.c14[type='button']:-moz-focusring,
|
||||
.c14[type='reset']:-moz-focusring,
|
||||
.c14[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c13 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c12 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c11 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
|
|
@ -129,7 +133,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -148,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9:focus {
|
||||
.c11:focus {
|
||||
outline: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
|
|
@ -156,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9:hover {
|
||||
.c11:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9:active,
|
||||
.c9:active:hover,
|
||||
.c9:active:focus {
|
||||
.c11:active,
|
||||
.c11:active:hover,
|
||||
.c11:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9[disabled] {
|
||||
.c11[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
|
|
@ -185,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
|
@ -197,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c9 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
|
|
@ -219,121 +222,134 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c7:focus {
|
||||
.c9:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c7::-webkit-input-placeholder {
|
||||
.c9::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7::-moz-placeholder {
|
||||
.c9::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:-ms-input-placeholder {
|
||||
.c9:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:invalid {
|
||||
.c9:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c7:disabled {
|
||||
.c9:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c7:disabled::-webkit-input-placeholder {
|
||||
.c9:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled::-moz-placeholder {
|
||||
.c9:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled:-ms-input-placeholder {
|
||||
.c9:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
.c1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
wrap={true}
|
||||
<form
|
||||
className="c1"
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
className="c2"
|
||||
wrap={true}
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
className="c4"
|
||||
>
|
||||
<label
|
||||
className="c4 c5"
|
||||
htmlFor="k"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<div
|
||||
className="c6"
|
||||
className="c5"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<input
|
||||
className="c7"
|
||||
disabled={false}
|
||||
id="k"
|
||||
onBlur={null}
|
||||
placeholder="Example: mySQLdb"
|
||||
/>
|
||||
<label
|
||||
className="c6 c7"
|
||||
htmlFor="k"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<div
|
||||
className="c8"
|
||||
>
|
||||
<input
|
||||
className="c9"
|
||||
disabled={false}
|
||||
id="k"
|
||||
onBlur={null}
|
||||
placeholder="Example: mySQLdb"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c8"
|
||||
className="c3"
|
||||
>
|
||||
<button
|
||||
className="c9 c10 c11 c12"
|
||||
data-ui-button="true"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
type="submit"
|
||||
<div
|
||||
className="c10"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
className="c11 c12 c13 c14"
|
||||
data-ui-button="true"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
type="submit"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
.c6 {
|
||||
margin-top: 0.1875rem;
|
||||
.c0 {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -360,7 +376,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -380,7 +396,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c3 {
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
|
|
@ -397,7 +413,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
display: block;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c14 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
|
|
@ -409,30 +425,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
appearance: button;
|
||||
}
|
||||
|
||||
.c12::-moz-focus-inner,
|
||||
.c12[type='button']::-moz-focus-inner,
|
||||
.c12[type='reset']::-moz-focus-inner,
|
||||
.c12[type='submit']::-moz-focus-inner {
|
||||
.c14::-moz-focus-inner,
|
||||
.c14[type='button']::-moz-focus-inner,
|
||||
.c14[type='reset']::-moz-focus-inner,
|
||||
.c14[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c12:-moz-focusring,
|
||||
.c12[type='button']:-moz-focusring,
|
||||
.c12[type='reset']:-moz-focusring,
|
||||
.c12[type='submit']:-moz-focusring {
|
||||
.c14:-moz-focusring,
|
||||
.c14[type='button']:-moz-focusring,
|
||||
.c14[type='reset']:-moz-focusring,
|
||||
.c14[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c13 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c12 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c11 {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
|
|
@ -453,7 +469,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -472,7 +487,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9:focus {
|
||||
.c11:focus {
|
||||
outline: 0;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
|
|
@ -480,26 +495,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9:hover {
|
||||
.c11:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9:active,
|
||||
.c9:active:hover,
|
||||
.c9:active:focus {
|
||||
.c11:active,
|
||||
.c11:active:hover,
|
||||
.c11:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c9[disabled] {
|
||||
.c11[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
font-style: normal;
|
||||
|
|
@ -509,7 +524,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
|
@ -521,7 +536,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c9 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
|
|
@ -543,109 +558,118 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.c7:focus {
|
||||
.c9:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c7::-webkit-input-placeholder {
|
||||
.c9::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7::-moz-placeholder {
|
||||
.c9::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:-ms-input-placeholder {
|
||||
.c9:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:invalid {
|
||||
.c9:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c7:disabled {
|
||||
.c9:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c7:disabled::-webkit-input-placeholder {
|
||||
.c9:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled::-moz-placeholder {
|
||||
.c9:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled:-ms-input-placeholder {
|
||||
.c9:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
.c1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
wrap={true}
|
||||
<form
|
||||
className="c1"
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
className="c2"
|
||||
wrap={true}
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
className="c4"
|
||||
>
|
||||
<label
|
||||
className="c4 c5"
|
||||
htmlFor="l"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<div
|
||||
className="c6"
|
||||
className="c5"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<input
|
||||
className="c7"
|
||||
disabled={false}
|
||||
id="l"
|
||||
onBlur={null}
|
||||
placeholder="Example: mySQLdb"
|
||||
/>
|
||||
<label
|
||||
className="c6 c7"
|
||||
htmlFor="l"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<div
|
||||
className="c8"
|
||||
>
|
||||
<input
|
||||
className="c9"
|
||||
disabled={false}
|
||||
id="l"
|
||||
onBlur={null}
|
||||
placeholder="Example: mySQLdb"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c8"
|
||||
className="c3"
|
||||
>
|
||||
<button
|
||||
className="c9 c10 c11 c12"
|
||||
data-ui-button="true"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
type="submit"
|
||||
<div
|
||||
className="c10"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
className="c11 c12 c13 c14"
|
||||
data-ui-button="true"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
type="submit"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders <Header/> without throwing 1`] = `
|
||||
|
|
@ -824,14 +848,14 @@ exports[`renders <Hostname /> without throwing 1`] = `
|
|||
`;
|
||||
|
||||
exports[`renders <Hostname values /> without throwing 1`] = `
|
||||
.c10 {
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
margin-right: 0.375rem;
|
||||
margin-bottom: 0.1875rem;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -246,21 +241,6 @@ Array [
|
|||
}
|
||||
|
||||
.c17 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.125rem;
|
||||
|
|
@ -1274,21 +1254,17 @@ Array [
|
|||
<ul
|
||||
className="c16"
|
||||
>
|
||||
<div
|
||||
<li
|
||||
className="c17"
|
||||
>
|
||||
<li
|
||||
className="c18"
|
||||
fill={null}
|
||||
name="wat"
|
||||
style={
|
||||
Object {
|
||||
"color": "#D8D8D8",
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
fill={null}
|
||||
name="wat"
|
||||
style={
|
||||
Object {
|
||||
"color": "#D8D8D8",
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1468,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 {
|
||||
|
|
@ -1871,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 {
|
||||
|
|
@ -2274,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 {
|
||||
|
|
@ -2681,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 {
|
||||
|
|
@ -3092,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 {
|
||||
|
|
@ -3169,7 +3120,7 @@ Array [
|
|||
display: block;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c14 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
|
|
@ -3220,21 +3171,6 @@ Array [
|
|||
}
|
||||
|
||||
.c13 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.125rem;
|
||||
|
|
@ -3278,7 +3214,7 @@ Array [
|
|||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c15 {
|
||||
.c14 {
|
||||
-webkit-flex-basis: 16.666666666666668%;
|
||||
-ms-flex-preferred-size: 16.666666666666668%;
|
||||
flex-basis: 16.666666666666668%;
|
||||
|
|
@ -3373,28 +3309,24 @@ Array [
|
|||
<ul
|
||||
className="c12"
|
||||
>
|
||||
<div
|
||||
<li
|
||||
className="c13"
|
||||
>
|
||||
<li
|
||||
className="c14"
|
||||
fill={null}
|
||||
name="wat"
|
||||
style={
|
||||
Object {
|
||||
"color": "#D8D8D8",
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
fill={null}
|
||||
name="wat"
|
||||
style={
|
||||
Object {
|
||||
"color": "#D8D8D8",
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c15"
|
||||
className="c14"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
|
|
@ -3434,7 +3366,7 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c15"
|
||||
className="c14"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
|
|
@ -3474,7 +3406,7 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c15"
|
||||
className="c14"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
|
|
@ -3618,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 {
|
||||
|
|
@ -3768,21 +3695,6 @@ Array [
|
|||
}
|
||||
|
||||
.c17 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.125rem;
|
||||
|
|
@ -4796,21 +4708,17 @@ Array [
|
|||
<ul
|
||||
className="c16"
|
||||
>
|
||||
<div
|
||||
<li
|
||||
className="c17"
|
||||
>
|
||||
<li
|
||||
className="c18"
|
||||
fill={null}
|
||||
name="wat"
|
||||
style={
|
||||
Object {
|
||||
"color": "#D8D8D8",
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
fill={null}
|
||||
name="wat"
|
||||
style={
|
||||
Object {
|
||||
"color": "#D8D8D8",
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5146,6 +5054,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c1"
|
||||
id="fw-toggle-firewall"
|
||||
name="enabled"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -5158,7 +5067,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c3"
|
||||
disabled={false}
|
||||
id="k"
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -5179,7 +5088,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c7"
|
||||
disabled={false}
|
||||
id="k"
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
>
|
||||
<label
|
||||
|
|
@ -5400,6 +5309,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c1"
|
||||
id="fw-toggle-firewall"
|
||||
name="enabled"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -5412,7 +5322,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c3"
|
||||
disabled={true}
|
||||
id="m"
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -5433,7 +5343,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c7"
|
||||
disabled={true}
|
||||
id="m"
|
||||
id="fw-toggle-firewall"
|
||||
onBlur={undefined}
|
||||
>
|
||||
<label
|
||||
|
|
@ -5653,6 +5563,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c1"
|
||||
id="fw-toggle-inactive"
|
||||
name="inactive"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -5665,7 +5576,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c3"
|
||||
disabled={false}
|
||||
id="o"
|
||||
id="fw-toggle-inactive"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -5686,7 +5597,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c7"
|
||||
disabled={false}
|
||||
id="o"
|
||||
id="fw-toggle-inactive"
|
||||
onBlur={undefined}
|
||||
>
|
||||
<label
|
||||
|
|
|
|||
|
|
@ -479,6 +479,7 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c8"
|
||||
id="network-checkbox-"
|
||||
name={undefined}
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -490,7 +491,7 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c10"
|
||||
disabled={false}
|
||||
id="l"
|
||||
id="network-checkbox-"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -1389,6 +1390,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c8"
|
||||
id="network-checkbox-name"
|
||||
name="1"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -1400,7 +1402,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c10"
|
||||
disabled={false}
|
||||
id="n"
|
||||
id="network-checkbox-name"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -2312,6 +2314,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||
>
|
||||
<div
|
||||
className="c8"
|
||||
id="network-checkbox-name"
|
||||
name="1"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -2323,7 +2326,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||
checked={false}
|
||||
className="c10"
|
||||
disabled={false}
|
||||
id="p"
|
||||
id="network-checkbox-name"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -3285,6 +3288,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c8"
|
||||
id="network-checkbox-name"
|
||||
name="1"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -3296,7 +3300,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c10"
|
||||
disabled={false}
|
||||
id="t"
|
||||
id="network-checkbox-name"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -4533,6 +4537,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c8"
|
||||
id="network-checkbox-name"
|
||||
name="1"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -4544,7 +4549,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c10"
|
||||
disabled={false}
|
||||
id="v"
|
||||
id="network-checkbox-name"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -5744,6 +5749,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c8"
|
||||
id="network-checkbox-name"
|
||||
name="1"
|
||||
role="group"
|
||||
style={undefined}
|
||||
|
|
@ -5755,7 +5761,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||
checked={false}
|
||||
className="c10"
|
||||
disabled={false}
|
||||
id="r"
|
||||
id="network-checkbox-name"
|
||||
onBlur={undefined}
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
P as BaseP,
|
||||
H3 as BaseH3,
|
||||
Divider,
|
||||
TagList,
|
||||
TagList as BaseTagList,
|
||||
Input,
|
||||
Toggle as BaseToggle,
|
||||
Small,
|
||||
|
|
@ -23,6 +23,10 @@ import {
|
|||
TagItem
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const TagList = styled(BaseTagList)`
|
||||
margin-bottom: ${remcalc(-6)};
|
||||
`;
|
||||
|
||||
const SmallBordered = styled(Small)`
|
||||
padding-right: ${remcalc(12)};
|
||||
margin-right: ${remcalc(12)};
|
||||
|
|
@ -46,6 +50,10 @@ const ShortDivider = styled(Divider)`
|
|||
margin-right: 0;
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
export const Header = () => (
|
||||
<Margin bottom={5}>
|
||||
<H3>CNS Default Hostnames</H3>
|
||||
|
|
@ -95,38 +103,40 @@ export const AddServiceForm = ({
|
|||
pristine,
|
||||
invalid
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Flex wrap alignCenter={invalid} alignEnd={!invalid}>
|
||||
<FlexItem>
|
||||
<Flex collumn>
|
||||
<FormGroup name="name" field={Field}>
|
||||
<FormLabel>Attach to new CNS service name</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<Input
|
||||
onBlur={null}
|
||||
type="text"
|
||||
placeholder="Example: mySQLdb"
|
||||
disabled={disabled || submitting}
|
||||
/>
|
||||
<FormMeta />
|
||||
</Margin>
|
||||
</FormGroup>
|
||||
</Flex>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Margin left={2}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
loading={submitting}
|
||||
inline
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</form>
|
||||
<Margin bottom={3}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Flex wrap alignCenter={invalid} alignEnd={!invalid}>
|
||||
<FlexItem>
|
||||
<Flex collumn>
|
||||
<FormGroup name="name" field={Field}>
|
||||
<FormLabel>Attach to new CNS service name</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<Input
|
||||
onBlur={null}
|
||||
type="text"
|
||||
placeholder="Example: mySQLdb"
|
||||
disabled={disabled || submitting}
|
||||
/>
|
||||
<FormMeta />
|
||||
</Margin>
|
||||
</FormGroup>
|
||||
</Flex>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Margin left={2}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
loading={submitting}
|
||||
inline
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Form>
|
||||
</Margin>
|
||||
);
|
||||
|
||||
export const Hostname = ({
|
||||
|
|
@ -195,28 +205,31 @@ const CnsHostnames = ({
|
|||
}) => (
|
||||
<Fragment>
|
||||
<HostnamesHeader />
|
||||
{children}
|
||||
{services.length ? (
|
||||
<Margin bottom={3}>
|
||||
<FormLabel>Existing CNS service name(s)</FormLabel>
|
||||
<Margin top={1}>
|
||||
<TagList>
|
||||
{services.map(value => (
|
||||
<TagItem
|
||||
active
|
||||
fill={'rgba(66, 134, 244, 0.1)'}
|
||||
key={value}
|
||||
onRemoveClick={
|
||||
onRemoveService && (() => onRemoveService(value))
|
||||
}
|
||||
>
|
||||
{value}
|
||||
</TagItem>
|
||||
{services.map((value, index) => (
|
||||
<Margin right={1} bottom={1}>
|
||||
<TagItem
|
||||
active
|
||||
fill={'rgba(66, 134, 244, 0.1)'}
|
||||
key={value}
|
||||
onRemoveClick={
|
||||
onRemoveService && (() => onRemoveService(value))
|
||||
}
|
||||
id={'cns-tag-' + index}
|
||||
>
|
||||
{value}
|
||||
</TagItem>
|
||||
</Margin>
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
</Margin>
|
||||
) : null}
|
||||
{children}
|
||||
{hostnames.length &&
|
||||
hostnames.filter(({ values }) => values.length).length ? (
|
||||
<Margin top={5}>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import is, { isNot } from 'styled-is';
|
|||
import remcalc from 'remcalc';
|
||||
|
||||
import { H3, Card } from 'joyent-ui-toolkit';
|
||||
import { NoPackages } from 'joyent-logo-assets';
|
||||
import { EmptyState } from 'joyent-icons';
|
||||
|
||||
const NoPackagesTitle = styled(H3)`
|
||||
color: ${props => props.theme.greyDark};
|
||||
|
|
@ -28,7 +28,7 @@ export default ({ children, ...rest }) => (
|
|||
<Padding all={6}>
|
||||
<Flex alignCenter justifyCenter column>
|
||||
<Margin bottom={2}>
|
||||
<NoPackages />
|
||||
<EmptyState />
|
||||
</Margin>
|
||||
<NoPackagesTitle>{children}</NoPackagesTitle>
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -177,7 +177,12 @@ export const ToggleFirewallForm = ({
|
|||
|
||||
return (
|
||||
<Form onChange={onChange}>
|
||||
<FormGroup type="checkbox" name="enabled" field={Field}>
|
||||
<FormGroup
|
||||
id={'fw-toggle-firewall'}
|
||||
type="checkbox"
|
||||
name="enabled"
|
||||
field={Field}
|
||||
>
|
||||
<Checkbox disabled={submitting}>
|
||||
<FormLabel noMargin actionable>
|
||||
<Margin left={2} right={2}>
|
||||
|
|
@ -192,7 +197,12 @@ export const ToggleFirewallForm = ({
|
|||
|
||||
export const ToggleInactiveForm = () => (
|
||||
<Form>
|
||||
<FormGroup type="checkbox" name="inactive" field={Field}>
|
||||
<FormGroup
|
||||
id={'fw-toggle-inactive'}
|
||||
type="checkbox"
|
||||
name="inactive"
|
||||
field={Field}
|
||||
>
|
||||
<Checkbox>
|
||||
<FormLabel noMargin actionable>
|
||||
<Margin left={2} right={2}>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import styled from 'styled-components';
|
|||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import remcalc from 'remcalc';
|
||||
import { isNot } from 'styled-is';
|
||||
import paramCase from 'param-case';
|
||||
|
||||
import {
|
||||
H4,
|
||||
|
|
@ -121,7 +122,11 @@ export const Expanded = ({
|
|||
<CardHeader secondary={selected}>
|
||||
{readOnly ? null : (
|
||||
<CardHeaderBox>
|
||||
<FormGroup name={id} field={Field}>
|
||||
<FormGroup
|
||||
id={'network-checkbox-' + paramCase(name)}
|
||||
name={id}
|
||||
field={Field}
|
||||
>
|
||||
<Checkbox noMargin checked={selected} />
|
||||
</FormGroup>
|
||||
</CardHeaderBox>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export default ({ theme }) => css`
|
|||
padding: 0;
|
||||
background: ${theme.background};
|
||||
color: ${theme.text};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ exports[`Button Default Button 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -155,7 +154,6 @@ exports[`Button Disabled Button 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -279,7 +277,6 @@ exports[`Button Error Button 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -411,7 +408,6 @@ exports[`Button Loading Button 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
@ -537,7 +533,6 @@ exports[`Button Secondary Button 1`] = `
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const Button = styled(BaseButton)`
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { Margin } from 'styled-components-spacing';
|
|||
import { FormLabel, Input } from '..';
|
||||
|
||||
import {
|
||||
default as Tooltip,
|
||||
default as BaseTooltip,
|
||||
Container as TooltipContainer,
|
||||
Target as TooltipTarget
|
||||
} from '../tooltip';
|
||||
|
|
@ -29,6 +29,10 @@ const InputIconWrapper = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const Tooltip = styled(BaseTooltip)`
|
||||
top: ${remcalc(-6)} !important;
|
||||
`;
|
||||
|
||||
const ClipboardIconActionable = styled(Clipboard)`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,6 +27,10 @@ import { H4 } from '../text/headings';
|
|||
import Button from '../button';
|
||||
import Divider from '../divider';
|
||||
|
||||
const Form = styled.form`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
const CollapsedKeyValue = styled.div`
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
|
|
@ -70,6 +74,7 @@ const Bold = styled.span`
|
|||
`;
|
||||
|
||||
const TextareaKeyValue = ({
|
||||
id = null,
|
||||
type,
|
||||
submitting,
|
||||
onlyName,
|
||||
|
|
@ -80,7 +85,12 @@ const TextareaKeyValue = ({
|
|||
{!onlyValue ? (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<FormGroup name="name" field={Field} fluid>
|
||||
<FormGroup
|
||||
id={id ? 'kv-input-key-' + id : null}
|
||||
name="name"
|
||||
field={Field}
|
||||
fluid
|
||||
>
|
||||
<FormLabel>{titleCase(type)} key</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<Input onBlur={null} type="text" disabled={submitting} />
|
||||
|
|
@ -98,7 +108,12 @@ const TextareaKeyValue = ({
|
|||
{!onlyName ? (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<FormGroup name="value" field={Field} fluid>
|
||||
<FormGroup
|
||||
id={id ? 'kv-input-value-' + id : null}
|
||||
name="value"
|
||||
field={Field}
|
||||
fluid
|
||||
>
|
||||
<FormLabel>{titleCase(type)} value</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<Textarea
|
||||
|
|
@ -123,6 +138,7 @@ const TextareaKeyValue = ({
|
|||
);
|
||||
|
||||
const InputKeyValue = ({
|
||||
id = null,
|
||||
type,
|
||||
submitting,
|
||||
typeLabel,
|
||||
|
|
@ -132,7 +148,12 @@ const InputKeyValue = ({
|
|||
<Flex wrap justifyStart contentStretch>
|
||||
{!onlyValue ? (
|
||||
<FlexItem basis="auto">
|
||||
<FormGroup name="name" field={Field} fluid>
|
||||
<FormGroup
|
||||
id={id ? 'kv-input-name-' + id : null}
|
||||
name="name"
|
||||
field={Field}
|
||||
fluid
|
||||
>
|
||||
<FormLabel>
|
||||
{titleCase(type)} {typeLabel}
|
||||
</FormLabel>
|
||||
|
|
@ -150,7 +171,12 @@ const InputKeyValue = ({
|
|||
{!onlyName ? (
|
||||
<Fragment>
|
||||
<FlexItem basis="auto">
|
||||
<FormGroup name="value" field={Field} fluid>
|
||||
<FormGroup
|
||||
id={id ? 'kv-input-value-' + id : null}
|
||||
name="value"
|
||||
field={Field}
|
||||
fluid
|
||||
>
|
||||
<FormLabel>{titleCase(type)} value</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<Input onBlur={null} type="text" disabled={submitting} />
|
||||
|
|
@ -168,6 +194,7 @@ const InputKeyValue = ({
|
|||
);
|
||||
|
||||
export const KeyValue = ({
|
||||
id = null,
|
||||
disabled = false,
|
||||
input = 'input',
|
||||
type = 'metadata',
|
||||
|
|
@ -262,6 +289,7 @@ export const KeyValue = ({
|
|||
) : null}
|
||||
{input === 'input' ? (
|
||||
<InputKeyValue
|
||||
id={id}
|
||||
onBlur={null}
|
||||
type={type}
|
||||
typeLabel={typeLabel}
|
||||
|
|
@ -272,6 +300,7 @@ export const KeyValue = ({
|
|||
) : null}
|
||||
{input === 'textarea' ? (
|
||||
<TextareaKeyValue
|
||||
id={id}
|
||||
type={type}
|
||||
submitting={disabled || submitting}
|
||||
onlyName={onlyName}
|
||||
|
|
@ -286,6 +315,7 @@ export const KeyValue = ({
|
|||
<Row between="xs" middle="xs">
|
||||
<Col xs={method === 'add' ? 12 : 7}>
|
||||
<MarginalButton
|
||||
id={id ? 'kv-cancel-button-' + id : null}
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={disabled || submitting}
|
||||
|
|
@ -294,6 +324,7 @@ export const KeyValue = ({
|
|||
<span>Cancel</span>
|
||||
</MarginalButton>
|
||||
<Button
|
||||
id={id ? 'kv-submit-button-' + id : null}
|
||||
type="submit"
|
||||
disabled={pristine || invalid}
|
||||
loading={submitting && !removing}
|
||||
|
|
@ -312,6 +343,7 @@ export const KeyValue = ({
|
|||
right
|
||||
icon
|
||||
error
|
||||
id={id ? 'kv-remove-button-' + id : null}
|
||||
>
|
||||
<Margin right={2}>
|
||||
<DeleteIcon
|
||||
|
|
@ -319,7 +351,7 @@ export const KeyValue = ({
|
|||
fill={disabled || submitting ? undefined : theme.red}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Col>
|
||||
)}
|
||||
|
|
@ -348,7 +380,7 @@ KeyValue.propTypes = {
|
|||
};
|
||||
|
||||
export default withTheme(({ handleSubmit, ...rest }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<KeyValue {...rest} />
|
||||
</form>
|
||||
</Form>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ Array [
|
|||
.c1 {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +111,7 @@ Array [
|
|||
|
||||
.c0[data-placement='top'] .b,
|
||||
.c0[data-placement='bottom'] .b {
|
||||
left: calc(50% - 0.6875rem);
|
||||
left: calc(50% - 0.375rem);
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] .b {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@ const CloseIcon = styled(Close)`
|
|||
`};
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const Tag = styled.li`
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
box-sizing: border-box;
|
||||
|
|
@ -59,19 +53,15 @@ export default withTheme(
|
|||
iconFill = null,
|
||||
...rest
|
||||
}) => (
|
||||
<Container>
|
||||
<Tag fill={fill} active={active} {...rest}>
|
||||
{children}
|
||||
{onRemoveClick ? (
|
||||
<CloseIcon
|
||||
fill={
|
||||
iconFill ? iconFill : active ? theme.primaryActive : theme.text
|
||||
}
|
||||
disabled
|
||||
onClick={onRemoveClick}
|
||||
/>
|
||||
) : null}
|
||||
</Tag>
|
||||
</Container>
|
||||
<Tag fill={fill} active={active} {...rest}>
|
||||
{children}
|
||||
{onRemoveClick ? (
|
||||
<CloseIcon
|
||||
fill={iconFill ? iconFill : active ? theme.primaryActive : theme.text}
|
||||
disabled
|
||||
onClick={onRemoveClick}
|
||||
/>
|
||||
) : null}
|
||||
</Tag>
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default styled.ul`
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ Array [
|
|||
|
||||
.c0[data-placement='top'] .b,
|
||||
.c0[data-placement='bottom'] .b {
|
||||
left: calc(50% - 0.6875rem);
|
||||
left: calc(50% - 0.375rem);
|
||||
}
|
||||
|
||||
.c0[data-placement^='left'] .b {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default ({ background, color, border, arrow }) => css`
|
|||
}
|
||||
|
||||
&[data-placement='top'] .${arrow}, &[data-placement='bottom'] .${arrow} {
|
||||
left: calc(50% - ${remcalc(11)});
|
||||
left: calc(50% - ${remcalc(6)});
|
||||
}
|
||||
|
||||
&[data-placement^='left'] .${arrow} {
|
||||
|
|
|
|||
Loading…
Reference in New Issue