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

feat(instances): Adds Counts, Updates Firewall

Browse Source
This commit is contained in:
johnytiago 2018-05-10 17:44:18 +01:00 committed by Sérgio Ramos
parent 062ff0ba67
commit 84b2d67d2c
7 changed files with 139 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/instance-steps/src/firewall/index.js
View File

@ -15,7 +15,7 @@ import Step, {
Outlet as StepOutlet Outlet as StepOutlet
} from 'joyent-ui-resource-step'; } from 'joyent-ui-resource-step';
import { Button, P, FirewallIcon } from 'joyent-ui-toolkit'; import { H3, Button, P, FirewallIcon } from 'joyent-ui-toolkit';
import { import {
TagRules, TagRules,
@ -67,11 +67,7 @@ const Firewall = ({
> >
{props => ( {props => (
<Margin right={5}> <Margin right={5}>
<ToggleFirewallForm <ToggleFirewallForm {...props} submitting={loading} />
{...props}
submitting={loading}
left
/>
</Margin> </Margin>
)} )}
</ReduxForm> </ReduxForm>
@ -94,7 +90,15 @@ const Firewall = ({
{enabled && !loading && !defaultRules.length && !tagRules.length ? ( {enabled && !loading && !defaultRules.length && !tagRules.length ? (
<Margin top={5}> <Margin top={5}>
<Empty borderTop> <Empty borderTop>
Sorry, but we weren’t able to find any firewall rules. <Fragment>
<H3>No Firewall rules found</H3>
<Margin top={1}>
<P>
Try viewing inactive rules instead to see firewalls that
can potentially affect your instance
</P>
</Margin>
</Fragment>
</Empty> </Empty>
</Margin> </Margin>
) : null} ) : null}

92
packages/instance-steps/src/metadata/components.js
View File

@ -2,13 +2,19 @@ import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
import { KeyValue } from 'joyent-ui-toolkit'; import { H3, KeyValue } from 'joyent-ui-toolkit';
import Editor from 'joyent-ui-toolkit/dist/es/editor'; import Editor from 'joyent-ui-toolkit/dist/es/editor';
import { Forms } from '../constants'; import { Forms } from '../constants';
const { IC_MD_F_EDIT } = Forms; const { IC_MD_F_EDIT } = Forms;
export const Overview = ({ total = 0 }) => (
<H3>
{total} key-value pair{total === 1 ? '' : 's'}
</H3>
);
export default ({ export default ({
metadata = [], metadata = [],
handleUpdateMetadata, handleUpdateMetadata,
@ -19,42 +25,48 @@ export default ({
handleCancelEdit, handleCancelEdit,
addOpen, addOpen,
disabled disabled
}) => }) => (
metadata.map(({ name, value, open }, index) => ( <Fragment>
<ReduxForm <Margin bottom={5}>
form={IC_MD_F_EDIT(index)} <Overview total={metadata.length} />
key={index} </Margin>
initialValues={{ name, value }} {metadata.map(({ name, value, open }, index) => (
destroyOnUnmount={false} <ReduxForm
forceUnregisterOnUnmount={true} form={IC_MD_F_EDIT(index)}
onSubmit={newValue => handleUpdateMetadata(index, newValue)} key={index}
shouldAsyncValidate={shouldAsyncValidate} initialValues={{ name, value }}
asyncValidate={handleAsyncValidate} destroyOnUnmount={false}
> forceUnregisterOnUnmount={true}
{props => ( onSubmit={newValue => handleUpdateMetadata(index, newValue)}
<Fragment> shouldAsyncValidate={shouldAsyncValidate}
<KeyValue asyncValidate={handleAsyncValidate}
{...props} >
initialValues={{ name, value }} {props => (
expanded={open} <Fragment>
method="edit" <KeyValue
input="textarea" {...props}
type="metadata" initialValues={{ name, value }}
onToggleExpanded={ expanded={open}
handleToggleExpanded && (() => handleToggleExpanded(index)) method="edit"
} input="textarea"
onCancel={handleCancelEdit && (() => handleCancelEdit(index))} type="metadata"
onRemove={ onToggleExpanded={
handleRemoveMetadata && (() => handleRemoveMetadata(index)) handleToggleExpanded && (() => handleToggleExpanded(index))
} }
editor={Editor} onCancel={handleCancelEdit && (() => handleCancelEdit(index))}
disabled={disabled} onRemove={
shadow={false} handleRemoveMetadata && (() => handleRemoveMetadata(index))
/> }
{addOpen || index !== metadata.length - 1 ? ( editor={Editor}
<Margin bottom={2} /> disabled={disabled}
) : null} shadow={false}
</Fragment> />
)} {addOpen || index !== metadata.length - 1 ? (
</ReduxForm> <Margin bottom={2} />
)); ) : null}
</Fragment>
)}
</ReduxForm>
))}
</Fragment>
);

28
packages/instance-steps/src/metadata/index.js
View File

@ -19,7 +19,7 @@ import Step, {
import { Button, KeyValue, MetadataIcon } from 'joyent-ui-toolkit'; import { Button, KeyValue, MetadataIcon } from 'joyent-ui-toolkit';
import { Forms, Values } from '../constants'; import { Forms, Values } from '../constants';
import Preview from './components'; import { default as Preview, Overview } from './components';
import Editor from 'joyent-ui-toolkit/dist/es/editor'; import Editor from 'joyent-ui-toolkit/dist/es/editor';
import { addMetadata as validateMetadata } from '../validators'; import { addMetadata as validateMetadata } from '../validators';
@ -58,18 +58,20 @@ const Metadata = ({
{({ next }) => ( {({ next }) => (
<Margin top="5"> <Margin top="5">
{metadata.length ? ( {metadata.length ? (
<Preview <Fragment>
metadata={metadata} <Preview
handleCancelEdit={handleCancelEdit} metadata={metadata}
handleRemoveMetadata={handleRemoveMetadata} handleCancelEdit={handleCancelEdit}
handleToggleExpanded={handleToggleExpanded} handleRemoveMetadata={handleRemoveMetadata}
handleUpdateMetadata={handleUpdateMetadata} handleToggleExpanded={handleToggleExpanded}
handleAddMetadata={handleAddMetadata} handleUpdateMetadata={handleUpdateMetadata}
shouldAsyncValidate={shouldAsyncValidate} handleAddMetadata={handleAddMetadata}
handleAsyncValidate={handleAsyncValidate} shouldAsyncValidate={shouldAsyncValidate}
handleChangeAddOpen={handleChangeAddOpen} handleAsyncValidate={handleAsyncValidate}
addOpen={addOpen} handleChangeAddOpen={handleChangeAddOpen}
/> addOpen={addOpen}
/>
</Fragment>
) : null} ) : null}
<ReduxForm <ReduxForm
form={IC_MD_F_ADD} form={IC_MD_F_ADD}

17
packages/instance-steps/src/tags/index.js
View File

@ -20,6 +20,7 @@ import Step, {
} from 'joyent-ui-resource-step'; } from 'joyent-ui-resource-step';
import { import {
H3,
Button, Button,
TagsIcon, TagsIcon,
TagList as BaseTagList, TagList as BaseTagList,
@ -37,6 +38,14 @@ const TagList = styled(BaseTagList)`
margin-bottom: ${remcalc(-6)}; margin-bottom: ${remcalc(-6)};
`; `;
const TagCount = ({ total = 0 }) => (
<Margin bottom={5}>
<H3>
{total} Tag{total === 1 ? '' : 's'}
</H3>
</Margin>
);
const Tag = ({ name, value, onRemoveClick }) => ( const Tag = ({ name, value, onRemoveClick }) => (
<Margin right={1} bottom={1} key={`${name}-${value}`}> <Margin right={1} bottom={1} key={`${name}-${value}`}>
<TagItem iconFill="grey" onRemoveClick={onRemoveClick}> <TagItem iconFill="grey" onRemoveClick={onRemoveClick}>
@ -67,13 +76,10 @@ const TagsContainer = ({
</StepDescription> </StepDescription>
<StepPreview> <StepPreview>
<Margin top="3"> <Margin top="3">
<TagCount total={preview.length} />
<TagList> <TagList>
{preview.map(({ name, value }, index) => ( {preview.map(({ name, value }, index) => (
<Tag <Tag name={name} value={value} />
name={name}
value={value}
onRemoveClick={() => handleRemoveTag(index)}
/>
))} ))}
</TagList> </TagList>
</Margin> </Margin>
@ -83,6 +89,7 @@ const TagsContainer = ({
<Fragment> <Fragment>
{tags.length ? ( {tags.length ? (
<Margin top={5}> <Margin top={5}>
<TagCount total={tags.length} />
<TagList> <TagList>
{tags.map(({ name, value }, index) => ( {tags.map(({ name, value }, index) => (
<Tag <Tag

8
packages/instance-steps/src/user-script/components.js
View File

@ -2,12 +2,16 @@ import React, { PureComponent, Fragment } from 'react';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import { FormGroup, H3 } from 'joyent-ui-toolkit'; import { FormGroup, H3, Button } from 'joyent-ui-toolkit';
import Editor from 'joyent-ui-toolkit/dist/es/editor'; import Editor from 'joyent-ui-toolkit/dist/es/editor';
class EditorField extends PureComponent { class EditorField extends PureComponent {
render() { render() {
return <Editor {...this.props} onBlur={null} mode="sh" />; return (
<Fragment>
<Editor {...this.props} onBlur={null} mode="sh" />
</Fragment>
);
} }
} }

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

@ -4,6 +4,7 @@ import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing'; import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component'; import Flex, { FlexItem } from 'styled-flex-component';
import { Row, Col } from 'joyent-react-styled-flexboxgrid'; import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled from 'styled-components';
import { import {
H3, H3,
@ -13,10 +14,15 @@ import {
TagList, TagList,
TagItem, TagItem,
P, P,
Checkbox,
Strong, Strong,
Card Card
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
const Form = styled.form`
margin-bottom: 0 !important;
`;
const capitalizeFirstLetter = string => const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1); string.charAt(0).toUpperCase() + string.slice(1);
@ -170,47 +176,30 @@ export const ToggleFirewallForm = ({
: undefined; : undefined;
return ( return (
<form onChange={onChange}> <Form onChange={onChange}>
<FormGroup name="enabled" type="checkbox" field={Field}> <FormGroup type="checkbox" name="enabled" field={Field}>
<Flex alignCenter> <Checkbox disabled={submitting}>
{left ? ( <FormLabel noMargin actionable>
<Fragment> <Margin left={2} right={2}>
<Margin right={2}> Enable Firewall
<Toggle disabled={submitting} /> </Margin>
</Margin> </FormLabel>
<FormLabel big marginless> </Checkbox>
Enable Firewall
</FormLabel>
</Fragment>
) : (
<Fragment>
<FormLabel big marginless>
Enable Firewall
</FormLabel>
<Margin left={2}>
<Toggle disabled={submitting} />
</Margin>
</Fragment>
)}
</Flex>
</FormGroup> </FormGroup>
</form> </Form>
); );
}; };
export const ToggleInactiveForm = () => ( export const ToggleInactiveForm = () => (
<form> <Form>
<FormGroup name="inactive" type="checkbox" field={Field}> <FormGroup type="checkbox" name="inactive" field={Field}>
<Flex alignCenter> <Checkbox>
<Fragment> <FormLabel noMargin actionable>
<Margin right={2}> <Margin left={2} right={2}>
<Toggle />
</Margin>
<FormLabel big marginless>
Show inactive rules Show inactive rules
</FormLabel> </Margin>
</Fragment> </FormLabel>
</Flex> </Checkbox>
</FormGroup> </FormGroup>
</form> </Form>
); );

18
packages/ui-toolkit/src/form/checkbox.js
View File

@ -9,10 +9,28 @@ const Li = styled.li`
list-style-type: none; list-style-type: none;
display: flex; display: flex;
align-items: center; align-items: center;
display: flex;
align-items: center;
align-content: center;
height: 24px;
label { label {
font-weight: 400; font-weight: 400;
} }
label::after {
width: 0.475rem;
height: 0.205rem;
top: 0.4125rem;
left: 0.35rem;
}
div[type='checkbox'],
div[type='checkbox'] input,
div[type='checkbox'] label {
height: 24px;
width: 24px;
}
`; `;
const Ul = styled.ul` const Ul = styled.ul`