diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 83235f6c..bd553956 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1,6 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders 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 {
font-family: sans-serif;
font-size: 100%;
@@ -383,62 +481,6 @@ exports[`renders without throwing 1`] = `
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 {
color: rgba(73,73,73,1);
font-weight: 600;
@@ -799,48 +841,6 @@ exports[`renders without throwing 1`] = `
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 {
word-wrap: break-word;
overflow-wrap: break-word;
@@ -1067,6 +1067,113 @@ exports[`renders without throwing 1`] = `
`;
exports[`renders 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 {
font-family: sans-serif;
font-size: 100%;
@@ -1449,71 +1556,6 @@ exports[`renders without throwing 1`] = `
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 {
background-color: rgb(216,216,216);
margin: 0;
@@ -1855,48 +1897,6 @@ exports[`renders without throwing 1`] = `
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 {
word-break: break-all;
line-height: 1.5;
diff --git a/packages/my-joy-beta/src/components/instances/metadata.js b/packages/my-joy-beta/src/components/instances/metadata.js
index 97703367..7f4c2d8a 100644
--- a/packages/my-joy-beta/src/components/instances/metadata.js
+++ b/packages/my-joy-beta/src/components/instances/metadata.js
@@ -1,14 +1,4 @@
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';
diff --git a/packages/my-joy-beta/src/containers/instances/index.js b/packages/my-joy-beta/src/containers/instances/index.js
index cf8e58ad..d74aa93f 100644
--- a/packages/my-joy-beta/src/containers/instances/index.js
+++ b/packages/my-joy-beta/src/containers/instances/index.js
@@ -7,3 +7,4 @@ export { default as Firewall } from './firewall';
export { default as Cns } from './cns';
export { default as Snapshots } from './snapshots';
export { default as Resize } from './resize';
+export { default as UserScript } from './user-script';
diff --git a/packages/my-joy-beta/src/containers/instances/user-script.js b/packages/my-joy-beta/src/containers/instances/user-script.js
new file mode 100644
index 00000000..903d6e37
--- /dev/null
+++ b/packages/my-joy-beta/src/containers/instances/user-script.js
@@ -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 }) => (
+
+
+
+ User script can be used to inject a custom boot script.
+
+
+ {loading ? : null}
+ {!loading && error ? (
+
+ Ooops!
+
+ An error occurred while loading the instance user-script
+
+
+ ) : null}
+ {!loading && metadata ? (
+
+ ) : null}
+ {!loading && !error && !metadata ? (
+ No User Script defined
+ ) : null}
+
+);
+
+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);
diff --git a/packages/my-joy-beta/src/router.js b/packages/my-joy-beta/src/router.js
index 8b73e0c2..e4aa4bd6 100644
--- a/packages/my-joy-beta/src/router.js
+++ b/packages/my-joy-beta/src/router.js
@@ -17,7 +17,8 @@ import {
Firewall as InstanceFirewall,
Cns as InstanceCns,
Snapshots as InstanceSnapshots,
- Resize as InstanceResize
+ Resize as InstanceResize,
+ UserScript as InstanceUserScript
} from '@containers/instances';
export default () => (
@@ -87,6 +88,11 @@ export default () => (
exact
component={InstanceCns}
/>
+
({
diff --git a/packages/ui-toolkit/src/editor/index.js b/packages/ui-toolkit/src/editor/index.js
index ebd8ccd2..85ca28d3 100644
--- a/packages/ui-toolkit/src/editor/index.js
+++ b/packages/ui-toolkit/src/editor/index.js
@@ -38,7 +38,7 @@ class ManifestEditorBundle extends Component {
}
}
-export default ({ input, mode, defaultValue, readOnly }) => (
+export default ({ input = {}, mode, defaultValue, readOnly }) => (