From b8b64bfa178ffe292d53a08fb9407d654f7b9a90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Thu, 25 Jan 2018 18:14:11 +0000 Subject: [PATCH] feat(my-joy-beta): imc user-script initial implementation fixes #1109 --- .../__snapshots__/metadata.spec.js.snap | 410 +++++++++--------- .../src/components/instances/metadata.js | 10 - .../src/containers/instances/index.js | 1 + .../src/containers/instances/user-script.js | 70 +++ packages/my-joy-beta/src/router.js | 8 +- packages/my-joy-beta/src/state/store.js | 1 + packages/ui-toolkit/src/editor/index.js | 2 +- 7 files changed, 285 insertions(+), 217 deletions(-) create mode 100644 packages/my-joy-beta/src/containers/instances/user-script.js 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 }) => (