feat(my-joy-beta): imc user-script initial implementation

fixes #1109
This commit is contained in:
Sérgio Ramos 2018-01-25 18:14:11 +00:00 committed by Sérgio Ramos
parent 055b58106a
commit b8b64bfa17
7 changed files with 285 additions and 217 deletions

View File

@ -1,6 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <AddForm /> without throwing 1`] = ` exports[`renders <AddForm /> without throwing 1`] = `
.c3 {
padding-right: 1rem;
padding-left: 1rem;
}
.c8 {
padding: 1rem;
}
.c9 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c18 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c10 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c23 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-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%;
}
.c21 { .c21 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
@ -383,62 +481,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-left: 1.75rem; margin-left: 1.75rem;
} }
.c9 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c18 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c10 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c23 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c6 { .c6 {
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-weight: 600; font-weight: 600;
@ -799,48 +841,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
outline: 0; outline: 0;
} }
.c3 {
padding-right: 1rem;
padding-left: 1rem;
}
.c8 {
padding: 1rem;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-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%;
}
.c2 { .c2 {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -1067,6 +1067,113 @@ exports[`renders <AddForm /> without throwing 1`] = `
`; `;
exports[`renders <EditForm /> without throwing 1`] = ` exports[`renders <EditForm /> without throwing 1`] = `
.c3 {
padding-right: 1rem;
padding-left: 1rem;
}
.c8 {
padding: 1rem;
}
.c9 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c18 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c10 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c19 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-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%;
}
.c22 { .c22 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
@ -1449,71 +1556,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-left: 1.75rem; margin-left: 1.75rem;
} }
.c9 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c18 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c10 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c19 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 { .c15 {
background-color: rgb(216,216,216); background-color: rgb(216,216,216);
margin: 0; margin: 0;
@ -1855,48 +1897,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
outline: 0; outline: 0;
} }
.c3 {
padding-right: 1rem;
padding-left: 1rem;
}
.c8 {
padding: 1rem;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-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%;
}
.c6 { .c6 {
word-break: break-all; word-break: break-all;
line-height: 1.5; line-height: 1.5;

View File

@ -1,14 +1,4 @@
import React from 'react'; import React from 'react';
import { Field } from 'redux-form';
import {
Row,
Col,
FormGroup,
Input,
FormLabel,
Button
} from 'joyent-ui-toolkit';
import KeyValue from '@components/key-value'; import KeyValue from '@components/key-value';

View File

@ -7,3 +7,4 @@ export { default as Firewall } from './firewall';
export { default as Cns } from './cns'; export { default as Cns } from './cns';
export { default as Snapshots } from './snapshots'; export { default as Snapshots } from './snapshots';
export { default as Resize } from './resize'; export { default as Resize } from './resize';
export { default as UserScript } from './user-script';

View File

@ -0,0 +1,70 @@
import React from 'react';
import { compose, graphql } from 'react-apollo';
import { Margin } from 'styled-components-spacing';
import find from 'lodash.find';
import get from 'lodash.get';
import {
ViewContainer,
Message,
MessageTitle,
MessageDescription,
StatusLoader
} from 'joyent-ui-toolkit';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
import Description from '@components/description';
import Empty from '@components/empty';
import GetMetadata from '@graphql/list-metadata.gql';
export const UserScript = ({ metadata, loading = false, error = null }) => (
<ViewContainer main>
<Margin bottom={1}>
<Description>
User script can be used to inject a custom boot script.
</Description>
</Margin>
{loading ? <StatusLoader /> : null}
{!loading && error ? (
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>
An error occurred while loading the instance user-script
</MessageDescription>
</Message>
) : null}
{!loading && metadata ? (
<Editor defaultValue={metadata.value} readOnly />
) : null}
{!loading && !error && !metadata ? (
<Empty>No User Script defined</Empty>
) : null}
</ViewContainer>
);
export default compose(
graphql(GetMetadata, {
options: ({ match }) => ({
variables: {
fetchPolicy: 'network-only',
name: get(match, 'params.instance')
}
}),
props: ({ data }) => {
const { loading, error, variables, refetch, ...rest } = data;
const { name } = variables;
const instance = find(get(rest, 'machines', []), ['name', name]);
const metadata = get(instance, 'metadata', [])
.filter(({ name = '' }) => name === 'user-script')
.shift();
return {
metadata,
instance,
loading,
error
};
}
})
)(UserScript);

View File

@ -17,7 +17,8 @@ import {
Firewall as InstanceFirewall, Firewall as InstanceFirewall,
Cns as InstanceCns, Cns as InstanceCns,
Snapshots as InstanceSnapshots, Snapshots as InstanceSnapshots,
Resize as InstanceResize Resize as InstanceResize,
UserScript as InstanceUserScript
} from '@containers/instances'; } from '@containers/instances';
export default () => ( export default () => (
@ -87,6 +88,11 @@ export default () => (
exact exact
component={InstanceCns} component={InstanceCns}
/> />
<Route
path="/instances/:instance/user-script"
exact
component={InstanceUserScript}
/>
<Route <Route
path="/instances/:instance" path="/instances/:instance"
exact exact

View File

@ -29,6 +29,7 @@ const initialState = {
'Snapshots', 'Snapshots',
'Tags', 'Tags',
'Metadata', 'Metadata',
'User Script',
'Networks', 'Networks',
'Firewall' 'Firewall'
].map(name => ({ ].map(name => ({

View File

@ -38,7 +38,7 @@ class ManifestEditorBundle extends Component {
} }
} }
export default ({ input, mode, defaultValue, readOnly }) => ( export default ({ input = {}, mode, defaultValue, readOnly }) => (
<ManifestEditorBundle <ManifestEditorBundle
mode={mode} mode={mode}
{...input} {...input}