feat(instances): bug fixes #1387
This commit is contained in:
johnytiago
Sérgio Ramos
parent
5d46689869
commit
0189822a08
@ -12,7 +12,7 @@ import {
|
||||
CardOutlet,
|
||||
H2,
|
||||
P,
|
||||
Label,
|
||||
Label as BaseLabel,
|
||||
Divider,
|
||||
Button,
|
||||
QueryBreakpoints,
|
||||
@ -42,6 +42,10 @@ const VerticalDivider = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Label = styled(BaseLabel)`
|
||||
font-weight: 200;
|
||||
`;
|
||||
|
||||
const GreyLabel = styled(Label)`
|
||||
opacity: 0.5;
|
||||
padding-right: ${remcalc(3)};
|
||||
@ -147,7 +151,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
|
||||
<Margin right="1">
|
||||
<DeleteIcon fill={theme.red} />
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Col>
|
||||
|
||||
@ -1050,7 +1050,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -2133,7 +2133,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||
import { withTheme } from 'styled-components';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import Flex from 'styled-flex-component';
|
||||
|
||||
import {
|
||||
Button,
|
||||
@ -25,9 +27,10 @@ export default withTheme(
|
||||
onRemove,
|
||||
theme = {}
|
||||
}) => (
|
||||
<StickyFooter fixed bottom>
|
||||
<StickyFooter fixed bottom fill="#FAFAFA">
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={7}>
|
||||
<Flex>
|
||||
{onStart && [
|
||||
<SmallOnly key="small-only">
|
||||
<Button
|
||||
@ -42,6 +45,7 @@ export default withTheme(
|
||||
<StartIcon disabled={submitting || !allowedActions.start} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Margin right={1}>
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
@ -51,10 +55,15 @@ export default withTheme(
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<StartIcon disabled={submitting || !allowedActions.start} />
|
||||
<Margin right={1}>
|
||||
<StartIcon
|
||||
disabled={submitting || !allowedActions.start}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Start</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Margin>
|
||||
]}
|
||||
{onStop && [
|
||||
<SmallOnly key="small-only">
|
||||
@ -70,6 +79,7 @@ export default withTheme(
|
||||
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Margin right={1}>
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
@ -79,10 +89,13 @@ export default withTheme(
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<Margin right={1}>
|
||||
<StopIcon disabled={submitting || !allowedActions.stop} />
|
||||
</Margin>
|
||||
<span>Stop</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Margin>
|
||||
]}
|
||||
{onReboot && [
|
||||
<SmallOnly key="small-only">
|
||||
@ -98,6 +111,7 @@ export default withTheme(
|
||||
<ResetIcon disabled={submitting || !allowedActions.reboot} />
|
||||
</Button>
|
||||
</SmallOnly>,
|
||||
<Margin right={1}>
|
||||
<Medium key="medium">
|
||||
<Button
|
||||
type="button"
|
||||
@ -107,11 +121,15 @@ export default withTheme(
|
||||
secondary
|
||||
icon
|
||||
>
|
||||
<ResetIcon disabled={submitting || !allowedActions.reboot} />
|
||||
<ResetIcon
|
||||
disabled={submitting || !allowedActions.reboot}
|
||||
/>
|
||||
<span>Reboot</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Margin>
|
||||
]}
|
||||
</Flex>
|
||||
</Col>
|
||||
{onRemove && (
|
||||
<Col xs={5}>
|
||||
@ -148,6 +166,7 @@ export default withTheme(
|
||||
right
|
||||
icon
|
||||
>
|
||||
<Margin right={1}>
|
||||
<DeleteIcon
|
||||
disabled={submitting || !allowedActions.remove}
|
||||
fill={
|
||||
@ -156,6 +175,7 @@ export default withTheme(
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
|
||||
@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
|
||||
import { Field } from 'redux-form';
|
||||
import Flex from 'styled-flex-component';
|
||||
import queryString from 'query-string';
|
||||
import { Padding } from 'styled-components-spacing';
|
||||
|
||||
import {
|
||||
Anchor,
|
||||
@ -24,8 +25,8 @@ import {
|
||||
Popover,
|
||||
PopoverContainer,
|
||||
PopoverTarget,
|
||||
PopoverItem,
|
||||
PopoverDivider,
|
||||
PopoverItem as BasePopoverItem,
|
||||
PopoverDivider as BasePopoverDivider,
|
||||
DotIcon,
|
||||
ActionsIcon
|
||||
} from 'joyent-ui-toolkit';
|
||||
@ -66,6 +67,14 @@ const Actions = styled(Flex)`
|
||||
height: ${remcalc(48)};
|
||||
`;
|
||||
|
||||
const PopoverItem = styled(BasePopoverItem)`
|
||||
padding-bottom: ${remcalc(11)};
|
||||
`;
|
||||
|
||||
const PopoverDivider = styled(BasePopoverDivider)`
|
||||
margin-left: ${remcalc(-18)};
|
||||
`;
|
||||
|
||||
export const FetchingItem = () => (
|
||||
<TableTr colSpan="6">
|
||||
<TableTd colSpan="6" middle center>
|
||||
@ -131,9 +140,14 @@ export const Item = ({
|
||||
Stop
|
||||
</PopoverItem>
|
||||
<PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
|
||||
Reboot
|
||||
Restart
|
||||
</PopoverItem>
|
||||
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
|
||||
Delete
|
||||
</PopoverItem>
|
||||
<Padding bottom={2}>
|
||||
<PopoverDivider />
|
||||
</Padding>
|
||||
<PopoverItem disabled={false} onClick={onCreateImage}>
|
||||
<ItemAnchor
|
||||
href={`${GLOBAL.origin}/images/~create/${id}`}
|
||||
@ -143,10 +157,6 @@ export const Item = ({
|
||||
Create Image
|
||||
</ItemAnchor>
|
||||
</PopoverItem>
|
||||
<PopoverDivider />
|
||||
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
|
||||
Remove
|
||||
</PopoverItem>
|
||||
</Popover>
|
||||
</TableTd>
|
||||
</PopoverContainer>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||
import { default as Flex, FlexItem } from 'styled-flex-component';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import titleCase from 'title-case';
|
||||
@ -12,10 +13,12 @@ import {
|
||||
Card,
|
||||
CardOutlet,
|
||||
Divider,
|
||||
ResetIcon,
|
||||
Button as BaseButton,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
PopoverButton,
|
||||
PopoverItem as BasePopoverItem,
|
||||
H2 as BaseH2,
|
||||
Label,
|
||||
Label as BaseLabel,
|
||||
CopiableField,
|
||||
QueryBreakpoints,
|
||||
DotIcon,
|
||||
@ -23,7 +26,6 @@ import {
|
||||
StartIcon,
|
||||
StopIcon,
|
||||
EditIcon,
|
||||
InstanceTypeIcon,
|
||||
Input,
|
||||
FormMeta,
|
||||
FormGroup
|
||||
@ -42,6 +44,10 @@ const stateColor = {
|
||||
FAILED: 'red'
|
||||
};
|
||||
|
||||
const Label = styled(BaseLabel)`
|
||||
font-weight: 200;
|
||||
`;
|
||||
|
||||
const GreyLabel = styled(Label)`
|
||||
opacity: 0.5;
|
||||
padding-right: ${remcalc(3)};
|
||||
@ -53,16 +59,6 @@ const TrimedLabel = styled(Label)`
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
const Flex = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@media (max-width: ${remcalc(767)}) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const Actionable = styled(Margin)`
|
||||
cursor: pointer;
|
||||
`;
|
||||
@ -84,8 +80,8 @@ const H2 = styled(BaseH2)`
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const Button = styled(BaseButton)`
|
||||
margin-right: ${remcalc(6)};
|
||||
const PopoverItem = styled(BasePopoverItem)`
|
||||
padding-bottom: ${remcalc(11)};
|
||||
`;
|
||||
|
||||
export const Meta = ({
|
||||
@ -107,7 +103,7 @@ export const Meta = ({
|
||||
<H2>
|
||||
{editingName ? (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Flex style={{ alignItems: 'start' }}>
|
||||
<Flex alignStart>
|
||||
<FormGroup name="name" field={Field}>
|
||||
<Input
|
||||
onBlur={null}
|
||||
@ -200,50 +196,11 @@ export default withTheme(
|
||||
<Margin top={3}>
|
||||
<Row between="xs">
|
||||
<Col xs={9}>
|
||||
<Button
|
||||
href={`${GLOBAL.origin}/images/~create/${instance.id}`}
|
||||
target="__blank"
|
||||
rel="noopener noreferrer"
|
||||
secondary
|
||||
bold
|
||||
small
|
||||
icon
|
||||
>
|
||||
<Padding top={0.5}>
|
||||
<InstanceTypeIcon />
|
||||
</Padding>
|
||||
</Button>
|
||||
<SmallOnly>
|
||||
<Button
|
||||
href={`${GLOBAL.origin}/images/~create/${instance.id}`}
|
||||
target="__blank"
|
||||
rel="noopener noreferrer"
|
||||
secondary
|
||||
bold
|
||||
small
|
||||
icon
|
||||
>
|
||||
<Padding top={0}>
|
||||
<InstanceTypeIcon />
|
||||
</Padding>
|
||||
</Button>
|
||||
</SmallOnly>
|
||||
<SmallOnly>
|
||||
<Button
|
||||
type="button"
|
||||
loading={starting}
|
||||
disabled={instance.state !== 'STOPPED'}
|
||||
onClick={() => onAction('start')}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<StartIcon disabled={instance.state !== 'STOPPED'} />
|
||||
</Margin>
|
||||
</Button>
|
||||
</SmallOnly>
|
||||
<Medium>
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
<Margin right={1}>
|
||||
<ButtonGroup>
|
||||
{instance.state === 'STOPPED' ? (
|
||||
<Button
|
||||
type="button"
|
||||
loading={starting}
|
||||
@ -254,27 +211,13 @@ export default withTheme(
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<StartIcon disabled={instance.state !== 'STOPPED'} />
|
||||
<StartIcon
|
||||
disabled={instance.state !== 'STOPPED'}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Start</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
<SmallOnly>
|
||||
<Button
|
||||
type="button"
|
||||
loading={stopping}
|
||||
disabled={instance.state !== 'RUNNING'}
|
||||
onClick={() => onAction('stop')}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<StopIcon disabled={instance.state !== 'RUNNING'} />
|
||||
</Margin>
|
||||
</Button>
|
||||
</SmallOnly>
|
||||
<Medium>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
loading={stopping}
|
||||
@ -285,42 +228,63 @@ export default withTheme(
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<StopIcon disabled={instance.state !== 'RUNNING'} />
|
||||
<StopIcon
|
||||
disabled={instance.state !== 'RUNNING'}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Stop</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
<SmallOnly>
|
||||
<Button
|
||||
type="button"
|
||||
loading={rebooting}
|
||||
disabled={instance.state !== 'RUNNING'}
|
||||
onClick={() => onAction('reboot')}
|
||||
secondary
|
||||
small
|
||||
icon
|
||||
)}
|
||||
<PopoverButton secondary>
|
||||
<PopoverItem
|
||||
disabled={instance.state === 'RUNNING'}
|
||||
onClick={() =>
|
||||
instance.state === 'RUNNING'
|
||||
? null
|
||||
: onAction('start')
|
||||
}
|
||||
>
|
||||
<Margin right={2}>
|
||||
<ResetIcon disabled={instance.state !== 'RUNNING'} />
|
||||
Start
|
||||
</PopoverItem>
|
||||
<PopoverItem
|
||||
disabled={instance.state === 'STOPPED'}
|
||||
onClick={() =>
|
||||
instance.state === 'STOPPED'
|
||||
? null
|
||||
: onAction('reboot')
|
||||
}
|
||||
>
|
||||
Restart
|
||||
</PopoverItem>
|
||||
<PopoverItem
|
||||
disabled={instance.state === 'STOPPED'}
|
||||
onClick={() =>
|
||||
instance.state === 'STOPPED'
|
||||
? null
|
||||
: onAction('stop')
|
||||
}
|
||||
>
|
||||
Stop
|
||||
</PopoverItem>
|
||||
</PopoverButton>
|
||||
</ButtonGroup>
|
||||
</Margin>
|
||||
</Button>
|
||||
</SmallOnly>
|
||||
<Medium>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Button
|
||||
type="button"
|
||||
loading={rebooting}
|
||||
disabled={instance.state !== 'RUNNING'}
|
||||
onClick={() => onAction('reboot')}
|
||||
href={`${GLOBAL.origin}/images/~create/${
|
||||
instance.id
|
||||
}`}
|
||||
target="__blank"
|
||||
rel="noopener noreferrer"
|
||||
secondary
|
||||
bold
|
||||
icon
|
||||
>
|
||||
<Margin right={2}>
|
||||
<ResetIcon disabled={instance.state !== 'RUNNING'} />
|
||||
</Margin>
|
||||
<span>Reboot</span>
|
||||
Create Image
|
||||
</Button>
|
||||
</Medium>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col xs={3}>
|
||||
<SmallOnly>
|
||||
@ -374,7 +338,7 @@ export default withTheme(
|
||||
}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Medium>
|
||||
</Col>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1738,7 +1738,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -4295,7 +4295,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -4525,7 +4525,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -207,11 +207,15 @@ exports[`renders <Networks /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c9"
|
||||
disabled={false}
|
||||
@ -700,11 +704,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c8"
|
||||
>
|
||||
@ -924,11 +932,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c8"
|
||||
>
|
||||
@ -1438,11 +1450,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h3
|
||||
className="c7"
|
||||
>
|
||||
Networks attached to this instance
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1687,7 +1687,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -3464,7 +3464,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
/* eslint-disable camelcase */
|
||||
import React, { Fragment } from 'react';
|
||||
import React from 'react';
|
||||
import intercept from 'apr-intercept';
|
||||
import { connect } from 'react-redux';
|
||||
import { compose, graphql } from 'react-apollo';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { SubmissionError } from 'redux-form';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import remcalc from 'remcalc';
|
||||
import { default as Flex, FlexItem } from 'styled-flex-component';
|
||||
import isBoolean from 'lodash.isboolean';
|
||||
import get from 'lodash.get';
|
||||
|
||||
@ -15,8 +15,7 @@ import {
|
||||
Message,
|
||||
MessageTitle,
|
||||
MessageDescription,
|
||||
StatusLoader,
|
||||
Divider
|
||||
StatusLoader
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
import {
|
||||
@ -70,6 +69,8 @@ export const Firewall = ({
|
||||
</Message>
|
||||
</Margin>
|
||||
) : null}
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
<ReduxForm
|
||||
form="fw-enabled"
|
||||
destroyOnUnmount={false}
|
||||
@ -79,15 +80,14 @@ export const Firewall = ({
|
||||
>
|
||||
{props =>
|
||||
loading ? null : (
|
||||
<Fragment>
|
||||
<Margin bottom={5}>
|
||||
<Margin right={5}>
|
||||
<ToggleFirewallForm {...props} submitOnChange />
|
||||
</Margin>
|
||||
<Divider height={remcalc(1)} />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
</ReduxForm>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<ReduxForm
|
||||
form="fw-inactive"
|
||||
destroyOnUnmount={false}
|
||||
@ -95,13 +95,11 @@ export const Firewall = ({
|
||||
initialValues={{ inactive }}
|
||||
>
|
||||
{props =>
|
||||
!enabled || loading ? null : (
|
||||
<Margin top={4}>
|
||||
<ToggleInactiveForm {...props} />
|
||||
</Margin>
|
||||
)
|
||||
!enabled || loading ? null : <ToggleInactiveForm {...props} />
|
||||
}
|
||||
</ReduxForm>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
{!loading && !defaultRules.length && !tagRules.length ? (
|
||||
<Margin top={5}>
|
||||
<Empty borderTop>
|
||||
|
||||
@ -37,7 +37,9 @@ export const Networks = ({
|
||||
complete control over the network environment. Read more on fabrics.
|
||||
</Description>
|
||||
</Margin>
|
||||
<Margin bottom={3}>
|
||||
<H3>Networks attached to this instance</H3>
|
||||
</Margin>
|
||||
{loading ? <StatusLoader /> : null}
|
||||
{!loading && error && !networks.length ? (
|
||||
<Margin bottom={5}>
|
||||
@ -79,14 +81,14 @@ export default compose(
|
||||
}
|
||||
}),
|
||||
props: ({ data }) => {
|
||||
console.log(data);
|
||||
const { loading, error, variables } = data;
|
||||
const { id } = variables;
|
||||
|
||||
const machines = get(data, 'machines.results', []);
|
||||
const machines = get(data, 'machine', []);
|
||||
const instance = find(forceArray(machines), ['id', id]);
|
||||
const values = get(instance, 'networks', []);
|
||||
const networks = reverse(sortBy(values, 'public'));
|
||||
|
||||
return {
|
||||
networks,
|
||||
instance,
|
||||
|
||||
@ -96,11 +96,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
@ -1449,11 +1444,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
@ -1852,11 +1842,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
@ -2255,11 +2240,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
@ -2662,11 +2642,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
@ -3073,11 +3048,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
@ -3580,11 +3550,6 @@ Array [
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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)};
|
||||
|
||||
@ -995,7 +995,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -2207,7 +2207,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -3269,7 +3269,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -4276,7 +4276,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -5285,7 +5285,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -7500,7 +7500,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -8507,7 +8507,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span>
|
||||
Remove
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -351,7 +351,7 @@ export const KeyValue = ({
|
||||
fill={disabled || submitting ? undefined : theme.red}
|
||||
/>
|
||||
</Margin>
|
||||
<span>Remove</span>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
@ -36,6 +36,7 @@ Array [
|
||||
.c1 {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user