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

fixes #1109

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 <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 {
   font-family: sans-serif;
   font-size: 100%;
@@ -383,62 +481,6 @@ exports[`renders <AddForm /> 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 <AddForm /> 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 <AddForm /> 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 {
   font-family: sans-serif;
   font-size: 100%;
@@ -1449,71 +1556,6 @@ exports[`renders <EditForm /> 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 <EditForm /> 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;

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';
 

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';

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 }) => (
+  <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);

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}
         />
+        <Route
+          path="/instances/:instance/user-script"
+          exact
+          component={InstanceUserScript}
+        />
         <Route
           path="/instances/:instance"
           exact

packages/my-joy-beta/src/state/store.js

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

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 }) => (
   <ManifestEditorBundle
     mode={mode}
     {...input}